﻿/* Huella digital: elementos propios (identidad, ficha de Google, gráfica, perfiles, informe SEO). Se apoya en puerta2.css. */
.door2 .constel{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto}
.door2 .constel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.door2 .constel line{stroke:rgba(146,129,247,.35);stroke-width:1;stroke-dasharray:3 6;animation:flow 3.4s linear infinite}
.door2 .constel .core{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:26px;background:linear-gradient(160deg,#2b2b30,#09090a);box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 -12px 22px rgba(0,0,0,.6),0 0 0 1px #1b1b1f,0 14px 34px rgba(146,129,247,.26);display:grid;place-items:center;font:500 22px/1 var(--font-sans);letter-spacing:.08em;color:#fff;animation:float 7s ease-in-out infinite}
.door2 .constel .nd{position:absolute;transform:translate(-50%,-50%);padding:7px 13px;border-radius:99px;background:#0b0b0d;box-shadow:inset 0 0 0 1px var(--hair);font:400 12px/1 var(--font-mono);letter-spacing:.06em;color:#e6e5e2;white-space:nowrap;animation:bob 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
.door2 .constel .nd::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--vg);margin-right:8px;vertical-align:1px}
@keyframes flow{to{stroke-dashoffset:-18}}
@keyframes bob{50%{transform:translate(-50%,calc(-50% - 5px))}}
@keyframes ping{0%,100%{opacity:.4}50%{opacity:1}}

/* tablero de identidad */
.door2 .brand{padding:18px 16px;display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}
.door2 .brand svg{width:110px;height:110px}
.door2 .brand .g{stroke:#2e3236;stroke-width:1;fill:none}
.door2 .brand .m{stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:260;stroke-dashoffset:0}
.door2 .brand .sw{display:flex;gap:8px;margin-top:10px}
.door2 .brand .sw i{width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.door2 .brand .tp{font:400 44px/1 var(--font-serif);color:#fff}.door2 .brand .tp small{font:500 16px var(--font-sans);color:var(--t3);margin-left:8px}
.door2 .brand .lb{font:400 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.js.door2 .scene .brand .m{stroke-dashoffset:260}
.js.door2 .scene.in .brand .m{animation:draw 2s var(--ease) .2s forwards}
.js.door2 .scene .brand .sw i{opacity:0;transform:scale(.4)}
.js.door2 .scene.in .brand .sw i{animation:pop .45s var(--ease) forwards;animation-delay:calc(1.3s + var(--i,0)*.14s)}
@keyframes draw{to{stroke-dashoffset:0}}

/* ficha de Google */
.door2 .gcard{padding:16px;display:grid;gap:12px}
.door2 .gcard .nm{font:500 17px/1.2 var(--font-sans);color:#fff}
.door2 .gcard .meta{font-size:13px;color:var(--t3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.door2 .stars{display:inline-flex;gap:2px;color:#ffca16;font-size:14px;letter-spacing:1px}
.door2 .gcard .acts{display:flex;gap:8px}
.door2 .gcard .acts span{padding:7px 12px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--hair);font-size:13px;color:#e6e5e2}
.door2 .rev{padding:12px 14px;border-radius:12px;background:#0d0d0f;box-shadow:inset 0 0 0 1px var(--hair);font-size:14px;line-height:1.45;color:#e6e5e2}
.door2 .rev small{display:block;font:400 12px/1.3 var(--font-mono);letter-spacing:.06em;color:var(--t3);margin-bottom:5px;text-transform:uppercase}
.door2 .rev .ap{display:inline-grid;margin-top:8px}
.door2 .rev .ap>span{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:6px;font-size:13px;transition:opacity .5s var(--ease)}
.door2 .rev .ap .a1{background:#fff;color:#000}.door2 .rev .ap .a2{opacity:0;box-shadow:inset 0 0 0 1px var(--hair);color:#fff}
.door2 .rev .ap.done .a1{opacity:0}.door2 .rev .ap.done .a2{opacity:1}
.js.door2 .scene .stars span{opacity:.15}
.js.door2 .scene.in .stars span{animation:lit .4s var(--ease) forwards;animation-delay:calc(.4s + var(--i,0)*.12s)}
@keyframes lit{to{opacity:1}}

/* gráfica */
.door2 .chart{padding:16px}
.door2 .kpis{display:flex;gap:10px;margin-bottom:10px}
.door2 .kpis div{flex:1;padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair);background:#0b0b0d}
.door2 .kpis small{display:block;font:400 12px/1 var(--font-mono);letter-spacing:.08em;color:var(--t3);text-transform:uppercase}
.door2 .kpis b{display:block;margin-top:6px;font:500 24px/1 var(--font-sans);color:#fff;letter-spacing:-.02em}
.door2 .chart svg{width:100%;height:120px;display:block}
.door2 .chart .ln{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:0}
.door2 .chart .ar{fill:url(#ga);opacity:1}
.door2 .chart .gl{stroke:#1d2023;stroke-width:1}
.js.door2 .scene .chart .ln{stroke-dashoffset:420}
.js.door2 .scene.in .chart .ln{animation:draw 1.8s var(--ease) .2s forwards}
.js.door2 .scene .chart .ar{opacity:0}
.js.door2 .scene.in .chart .ar{animation:lit 1s ease 1.3s forwards}

/* perfiles que se alinean */
.door2 .profs{padding:18px 16px;display:grid;gap:10px}
.door2 .pf{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:#0b0b0d;box-shadow:inset 0 0 0 1px var(--hair);transition:transform .9s var(--ease)}
.door2 .pf .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#2b2b30,#09090a);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font:500 13px var(--font-sans);color:#fff}
.door2 .pf b{display:block;font-weight:500;font-size:14.5px;color:#fff}.door2 .pf small{font-size:12.5px;color:var(--t3)}
.door2 .pf em{font:400 12px var(--font-mono);color:var(--t3);font-style:normal;letter-spacing:.06em}
.js.door2 .scene .pf:nth-child(1){transform:translateX(-14px) rotate(-2deg)}
.js.door2 .scene .pf:nth-child(2){transform:translateX(16px) rotate(1.6deg)}
.js.door2 .scene .pf:nth-child(3){transform:translateX(-8px) rotate(-1.2deg)}
.js.door2 .scene.in .pf{transform:none;transition-delay:calc(.5s + var(--i,0)*.15s)}

/* informe SEO */
.door2 .rep{padding:6px 16px 0;list-style:none;margin:0}
.door2 .rep li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair);font-size:14.5px;color:#e6e5e2}
.door2 .rep li i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#3ad389;color:#04140b;font:700 11px/1 var(--font-sans);font-style:normal;flex:none}
.door2 .rep li em{margin-left:auto;font:400 12px var(--font-mono);letter-spacing:.06em;color:var(--t3);font-style:normal}
.js.door2 .rep li{opacity:0}.js.door2 .rep.in li{animation:rise .5s var(--ease) forwards;animation-delay:calc(var(--i,0)*.3s + .2s)}

@media (prefers-reduced-motion:reduce){
 .js.door2 .scene .brand .m,.js.door2 .scene .chart .ln{stroke-dashoffset:0!important}
 .js.door2 .scene .brand .sw i,.js.door2 .scene .stars span,.js.door2 .scene .chart .ar,.js.door2 .rep li{opacity:1!important;transform:none!important}
 .js.door2 .scene .pf{transform:none!important}
}
@media (min-width:900px){.door2 .constel{margin:0}}

