/* =====================================================================
   Vision Pro · landing
   Reescrita el 16-set-2026.

   La escala tipografica sale de medir la pagina que Emanuel puso de
   referencia: titular principal 76 px con interlineado 0.98 y letra apretada
   (-0.02em), titulares de seccion 60-63 px, subtitulos 28 px. La version
   anterior usaba 60/46/19 y por eso se leia pequena y sin jerarquia.

   Ya no se carga Tailwind por CDN: todo esta aca, que ademas quita una
   dependencia externa de una pagina que ya fue atacada una vez.
   ===================================================================== */

:root{
  --oro:#C99D51;
  --oro-claro:#E4C287;
  --oro-hondo:#A87F3A;
  --oscuro:#0F1117;
  --oscuro-2:#161922;
  --oscuro-3:#1E222C;
  --clara:#FAF8F2;
  --clara-2:#F1EFE6;
  --tinta:#1B1F27;
  --olivo:#5C6B4B;
  --verde:#6FA86B;
  --linea-osc:rgba(255,255,255,.09);
  --linea-cla:rgba(27,31,39,.10);
  --tx-osc:rgba(250,248,242,.62);
  --tx-cla:rgba(27,31,39,.66);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Onest', ui-sans-serif, system-ui, sans-serif;
  background:var(--clara);
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
::selection{ background:var(--oro); color:var(--oscuro); }

/* ---------- Estructura ---------- */
.ancho{ max-width:1240px; margin:0 auto; padding:0 24px; }
.ancho.angosto{ max-width:860px; }
.centrado{ text-align:center; }
section{ scroll-margin-top:84px; }
.sec-oscura{ position:relative; background:var(--oscuro); color:var(--clara); padding:120px 0; overflow:hidden; }
.sec-clara{ position:relative; background:var(--clara); color:var(--tinta); padding:120px 0; }
.sec-flush{ padding-top:0; }
@media (max-width:860px){
  .sec-oscura,.sec-clara{ padding:72px 0; }
  .sec-flush{ padding-top:0; }
}

/* ---------- Tipografia ---------- */
.rotulo{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oro); margin:0 0 22px;
}
.rotulo.oscuro{ color:var(--oro-hondo); }
.rotulo.con-punto::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:currentColor; margin-right:10px; vertical-align:2px;
}
.centrado .rotulo{ display:inline-block; }

.titular-xl{
  font-size:clamp(40px, 5.2vw, 68px);
  line-height:1.0; letter-spacing:-.022em; font-weight:700; margin:0 0 26px;
}
.titular-l{
  font-size:clamp(32px, 4.4vw, 60px);
  line-height:1.04; letter-spacing:-.018em; font-weight:700; margin:0 0 22px;
}
.titular-l.tinta{ color:var(--tinta); }
.en-oro{ color:var(--oro); }
.en-verde{ color:var(--verde); }

.bajada{ font-size:19px; line-height:1.55; color:var(--tx-osc); max-width:620px; margin:0 0 34px; }
.bajada.tinta-suave{ color:var(--tx-cla); }
.bajada.centro{ margin-left:auto; margin-right:auto; }
h3{ font-size:28px; line-height:1.15; font-weight:700; letter-spacing:-.01em; margin:0 0 10px; }

/* ---------- Botones ---------- */
.btn-oro{
  display:inline-flex; align-items:center; gap:8px; background:var(--oro); color:var(--oscuro);
  font-weight:650; font-size:15px; padding:13px 24px; border-radius:999px;
  text-decoration:none; border:0; cursor:pointer; transition:background .2s ease;
}
.btn-oro:hover{ background:var(--oro-claro); }
.btn-oro.grande{ font-size:16px; padding:16px 30px; }
.btn-linea{
  display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--clara);
  border:1px solid rgba(250,248,242,.24); font:inherit; font-size:16px; font-weight:650;
  padding:15px 26px; border-radius:999px; cursor:pointer; transition:border-color .2s, color .2s;
}
.btn-linea:hover{ border-color:var(--oro); color:var(--oro); }

/* CTA que acompaña el scroll. Aparece pasado el héroe. */
.cta-flotante{
  position:fixed; right:26px; bottom:26px; z-index:60;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--oro); color:var(--oscuro); font-weight:700; font-size:15px;
  padding:14px 24px; border-radius:999px; text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.cta-flotante.se-ve{ opacity:1; transform:none; pointer-events:auto; }
@media (max-width:640px){ .cta-flotante{ right:14px; bottom:14px; padding:12px 20px; font-size:14px; } }

/* ---------- Cabecera ---------- */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:70;
  background:rgba(15,17,23,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea-osc);
}
.cab-in{ max-width:1240px; margin:0 auto; padding:0 24px; height:72px;
         display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cab-logo img{ height:26px; width:auto; }
.cab-nav{ display:none; gap:30px; }
.cab-nav a{ color:rgba(250,248,242,.7); text-decoration:none; font-size:14.5px; font-weight:500; }
.cab-nav a:hover{ color:var(--oro-claro); }
.cab-acc{ display:none; align-items:center; gap:14px; }
.cab-login{ color:rgba(250,248,242,.7); text-decoration:none; font-size:14.5px; font-weight:500; }
.cab-login:hover{ color:var(--oro-claro); }
#hamburger{ background:0; border:0; padding:8px; cursor:pointer; }
#hamburger span{ display:block; width:22px; height:2px; background:var(--clara); margin-bottom:5px; }
#hamburger span:last-child{ margin-bottom:0; }
#mobile-menu{ display:none; flex-direction:column; gap:16px; padding:22px 24px 28px;
              background:var(--oscuro-2); border-top:1px solid var(--linea-osc); }
#mobile-menu a{ color:var(--clara); text-decoration:none; font-size:16px; }
#mobile-menu .men-login{ color:var(--oro-claro); }
#mobile-menu .btn-oro{ justify-content:center; }
@media (min-width:1024px){
  .cab-nav,.cab-acc{ display:flex; }
  #hamburger{ display:none; }
  #mobile-menu{ display:none !important; }
}

/* ---------- Héroe ---------- */
.hero{ padding-top:150px; padding-bottom:0; }
.hero-grid{ display:grid; gap:56px; align-items:center; padding-bottom:96px; }
@media (min-width:1024px){ .hero-grid{ grid-template-columns:1.18fr .82fr; gap:56px; } }
.hero-botones{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-nota{ margin:28px 0 0; font-size:13.5px; line-height:1.6; color:rgba(250,248,242,.42); max-width:460px; }

/* La pieza del demo se sale por el borde derecho, como en la referencia. */
@media (min-width:1280px){ .hero-demo{ margin-right:-90px; } }

.glow{ position:absolute; border-radius:999px; filter:blur(100px); pointer-events:none; }
.glow-a{ width:560px; height:560px; background:rgba(201,157,81,.15); top:-160px; right:-140px; }
.glow-b{ width:440px; height:440px; background:rgba(92,107,75,.16); bottom:60px; left:-160px; }
.hero-lens{
  position:absolute; width:280px; height:280px; border-radius:999px; opacity:.5;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle,rgba(228,194,135,.15) 0%,rgba(228,194,135,0) 70%);
}

/* ---------- Marco del detector ---------- */
.marco-demo{
  position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:var(--oscuro-2);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.marco-demo video,.marco-demo canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hud-top{ position:absolute; top:0; left:0; right:0; display:flex; align-items:center;
          justify-content:space-between; padding:13px 16px;
          background:linear-gradient(to bottom,rgba(15,17,23,.85),transparent); }
.hud-marca{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.16em;
            text-transform:uppercase; color:var(--oro-claro); }
.hud-reloj{ display:flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace;
            font-size:11px; color:rgba(250,248,242,.8); }
.punto-vivo{ width:6px; height:6px; border-radius:50%; background:#E5484D; animation:latir 1.6s infinite; }
@keyframes latir{ 0%,100%{opacity:1} 50%{opacity:.25} }
.hud-insignias{ position:absolute; left:16px; right:16px; bottom:60px; display:flex;
                flex-wrap:wrap; gap:8px; align-items:flex-end; }
.hud-badge{ font-size:11px; font-weight:650; padding:6px 12px; border-radius:999px;
            background:rgba(201,157,81,.92); color:var(--oscuro); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.hud-badge.tono-olivo{ background:rgba(92,107,75,.92); color:var(--clara); }
.hud-bot{ position:absolute; left:0; right:0; bottom:0; padding:12px 16px;
          background:linear-gradient(to top,rgba(15,17,23,.9),transparent); }
.hud-bot p{ margin:0; font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(250,248,242,.7); }
.demo-idle{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
            justify-content:center; gap:14px; padding:24px; text-align:center;
            background:rgba(15,17,23,.93); }
.idle-tit{ margin:0; font-size:16px; font-weight:650; }
.idle-sub{ margin:0; font-size:13.5px; line-height:1.55; color:rgba(250,248,242,.55); max-width:290px; }
.scan-line{ position:absolute; left:0; right:0; height:2px; pointer-events:none;
            background:linear-gradient(90deg,transparent,rgba(228,194,135,.75),transparent);
            animation:barrer 3.4s linear infinite; }
@keyframes barrer{ from{top:0} to{top:100%} }

/* ---------- Franja de eventos ---------- */
.marquee-wrap{ border-top:1px solid var(--linea-osc); border-bottom:1px solid var(--linea-osc);
               padding:14px 0; overflow:hidden; background:rgba(255,255,255,.02); }
.marquee{ display:flex; gap:44px; white-space:nowrap; animation:correr 42s linear infinite; }
.marquee-set{ display:flex; gap:44px; flex:0 0 auto;
              font-family:'IBM Plex Mono',monospace; font-size:12px; color:rgba(250,248,242,.4); }
.marquee-set > span{ display:inline-flex; align-items:center; gap:9px; }
@keyframes correr{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .marquee{ animation:none; } }

/* ---------- El problema ---------- */
.pro-grid{ display:grid; gap:48px; align-items:center; padding-top:110px; }
@media (min-width:1024px){ .pro-grid{ grid-template-columns:1fr 1fr; gap:72px; } }
.pro-foto img{ width:100%; border-radius:18px; border:1px solid rgba(255,255,255,.1); }

/* Línea que enlaza dos secciones, como en la referencia. */
.conector{ position:relative; max-width:1240px; margin:56px auto 0; padding:0 24px; height:130px; }
.conector svg{ width:100%; height:130px; display:block; opacity:.55; }
.conector-punto{ position:absolute; left:24px; bottom:0; width:9px; height:9px;
                 border-radius:50%; background:var(--oro); transform:translateX(-4px); }
@media (max-width:860px){ .conector{ display:none; } }

/* ---------- Circuito ---------- */
.cc-grid{ display:grid; gap:40px; margin-top:64px; align-items:start; }
@media (min-width:1024px){ .cc-grid{ grid-template-columns:1.05fr .95fr; gap:60px; } }
@media (min-width:1024px){ .cc-fijo{ position:sticky; top:104px; } }
.cc-marco{ position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
           border:1px solid rgba(255,255,255,.12); background:var(--oscuro-2);
           box-shadow:0 30px 70px rgba(0,0,0,.4); }
.cc-lamina{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
            transition:opacity .5s ease, visibility .5s; }
.cc-lamina.is-activa{ opacity:1; visibility:visible; }
.cc-lamina img,.cc-lamina video{ width:100%; height:100%; object-fit:cover; }
.cc-pie{ position:absolute; left:0; right:0; bottom:0; padding:14px 18px;
         background:linear-gradient(to top,rgba(15,17,23,.92),transparent); }
.cc-etq{ display:none; align-items:center; gap:9px; font-size:13px; color:rgba(250,248,242,.85); }
.cc-etq.is-activa{ display:flex; }
.cc-etq i{ width:7px; height:7px; border-radius:50%; background:var(--oro); flex:0 0 auto; }

/* Ficha de interfaz que acompaña a cada paso */
.cc-ficha{ display:none; margin-top:16px; border:1px solid var(--linea-osc); border-radius:14px;
           padding:16px 18px; background:rgba(255,255,255,.03); }
.cc-ficha.is-activa{ display:block; animation:entrar .4s ease; }
@keyframes entrar{ from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.ficha-rot{ margin:0 0 12px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
            letter-spacing:.15em; text-transform:uppercase; color:var(--oro); }
.ficha-fila{ display:flex; justify-content:space-between; gap:16px; padding:7px 0;
             border-bottom:1px solid rgba(255,255,255,.05); font-size:13.5px; }
.ficha-fila:last-child{ border-bottom:0; }
.ficha-fila span{ color:rgba(250,248,242,.5); }
.ficha-fila b{ font-weight:600; }
.ficha-barra{ height:6px; border-radius:999px; background:rgba(255,255,255,.08); margin:10px 0 4px; }
.ficha-barra i{ display:block; height:100%; border-radius:999px; background:var(--verde); }
.ficha-wa{ border-left:3px solid var(--verde); padding:4px 0 4px 12px; }
.wa-txt{ margin:0 0 4px; font-size:14px; }
.wa-pie{ margin:0; font-size:12px; color:rgba(250,248,242,.45); }

.cc-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cc-paso{ display:flex; gap:18px; padding:24px; border-radius:16px; cursor:pointer;
          border:1px solid var(--linea-osc); background:rgba(255,255,255,.02);
          opacity:.4; transition:opacity .35s, background .35s, border-color .35s; }
.cc-paso.is-activa{ opacity:1; background:rgba(255,255,255,.05); border-color:rgba(201,157,81,.45); }
.cc-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
         color:var(--oro); padding-top:6px; flex:0 0 auto; }
.cc-paso h3{ font-size:22px; margin:0 0 8px; }
.cc-paso p{ margin:0; font-size:15px; line-height:1.6; color:var(--tx-osc); }

/* Tira de cuatro con divisores */
.tira4{ display:grid; gap:0; margin-top:72px; border-top:1px solid var(--linea-osc); }
@media (min-width:860px){ .tira4{ grid-template-columns:repeat(4,1fr); } }
.tira4 > div{ padding:26px 24px 26px 0; border-bottom:1px solid var(--linea-osc); }
@media (min-width:860px){
  .tira4 > div{ border-bottom:0; border-right:1px solid var(--linea-osc); padding:26px 26px 6px; }
  .tira4 > div:first-child{ padding-left:0; }
  .tira4 > div:last-child{ border-right:0; }
}
.t4-num{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
         color:var(--oro); margin-bottom:12px; }
.tira4 b{ display:block; font-size:17px; margin-bottom:7px; }
.tira4 p{ margin:0; font-size:14px; line-height:1.6; color:var(--tx-osc); }

/* ---------- Pestañas de lo que reconoce ---------- */
.pestanas{ display:flex; flex-wrap:wrap; gap:10px; margin:36px 0 26px; }
.pest{ border:1px solid var(--linea-cla); background:#fff; color:var(--tinta);
       font:inherit; font-size:14px; font-weight:600; padding:10px 20px; border-radius:999px;
       cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.pest:hover{ border-color:var(--oro); }
.pest.is-activa{ background:var(--oro); border-color:var(--oro); color:var(--oscuro); }
.vistas{ position:relative; }
.vista{ display:none; margin:0; }
.vista.is-activa{ display:grid; animation:entrar .4s ease; gap:0; }
@media (min-width:900px){ .vista.is-activa{ grid-template-columns:1.5fr 1fr; } }
.vista img{ width:100%; height:100%; object-fit:cover; border-radius:18px 18px 0 0; }
@media (min-width:900px){ .vista img{ border-radius:18px 0 0 18px; } }
.vista figcaption{ background:#fff; border:1px solid var(--linea-cla); border-radius:0 0 18px 18px;
                   padding:32px; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:900px){ .vista figcaption{ border-radius:0 18px 18px 0; border-left:0; } }
.vista figcaption p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--tx-cla); }

/* ---------- Cámaras ---------- */
.cam-grid{ display:grid; gap:20px; margin-top:48px; }
@media (min-width:900px){ .cam-grid{ grid-template-columns:1fr 1fr; } }
.cam-card{ border:1px solid var(--linea-osc); border-radius:18px; padding:32px;
           background:rgba(255,255,255,.025); }
.cam-rot{ margin:0 0 14px; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
          letter-spacing:.15em; text-transform:uppercase; color:var(--oro); }
.cam-card h3{ font-size:26px; }
.cam-card > p{ margin:0 0 18px; font-size:15.5px; line-height:1.6; color:var(--tx-osc); }
.cam-lista{ margin:0; padding:0; list-style:none; }
.cam-lista li{ position:relative; padding-left:22px; margin-bottom:10px;
               font-size:14.5px; line-height:1.55; color:var(--tx-osc); }
.cam-lista li::before{ content:''; position:absolute; left:0; top:8px; width:7px; height:7px;
                       border-radius:50%; background:var(--oro); }
.cam-nota{ margin:28px 0 0; font-size:14px; color:rgba(250,248,242,.4); max-width:640px; }

/* ---------- Evidencia ---------- */
.ev-grid{ display:grid; gap:20px; margin-top:48px; }
@media (min-width:900px){ .ev-grid{ grid-template-columns:1fr 1fr; } }
.ev-card{ margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--linea-cla); background:#fff; }
.ev-card video{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.ev-card figcaption{ padding:18px 22px; font-size:14px; color:var(--tx-cla); }
.ev-card figcaption b{ color:var(--tinta); }

/* ---------- Preguntas ---------- */
.faq-lista{ display:flex; flex-direction:column; gap:12px; margin-top:40px; }
.faq-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
             padding:22px 24px; background:#fff; border:1px solid var(--linea-cla);
             border-radius:14px; font:inherit; font-size:17px; font-weight:600; text-align:left;
             color:var(--tinta); cursor:pointer; transition:border-color .2s; }
.faq-toggle:hover{ border-color:rgba(201,157,81,.55); }
.faq-toggle svg{ flex:0 0 auto; transition:transform .25s ease; }
.faq-item[data-open="true"] .faq-toggle{ border-color:var(--oro); border-radius:14px 14px 0 0; }
.faq-item[data-open="true"] .faq-toggle svg{ transform:rotate(45deg); }
.faq-panel{ overflow:hidden; max-height:0; transition:max-height .3s ease; background:#fff;
            border:1px solid var(--oro); border-top:0; border-radius:0 0 14px 14px; }
.faq-item[data-open="false"] .faq-panel{ border-color:transparent; }
.faq-panel p{ margin:0; padding:4px 24px 24px; font-size:15.5px; line-height:1.7; color:var(--tx-cla); }

/* ---------- Contacto ---------- */
.ct-grid{ display:grid; gap:52px; align-items:start; }
@media (min-width:1024px){ .ct-grid{ grid-template-columns:1fr 1fr; gap:80px; } }
.ct-correo{ color:var(--oro-claro); text-decoration:none; font-size:16px; font-weight:600; }
.ct-correo:hover{ color:var(--oro); }
.ct-form{ display:flex; flex-direction:column; gap:16px; }
.ct-fila{ display:grid; gap:16px; }
@media (min-width:640px){ .ct-fila{ grid-template-columns:1fr 1fr; } }
.ct-form label{ display:flex; flex-direction:column; gap:8px; font-size:13px; font-weight:600;
                color:rgba(250,248,242,.75); }
.ct-form input,.ct-form select,.ct-form textarea{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:12px;
  padding:14px 16px; font:inherit; font-size:15.5px; font-weight:400; color:var(--clara);
  transition:border-color .2s, background .2s;
}
.ct-form input::placeholder,.ct-form textarea::placeholder{ color:rgba(250,248,242,.3); }
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{
  outline:none; border-color:var(--oro); background:rgba(255,255,255,.08);
}
.ct-form select option{ background:var(--oscuro-2); color:var(--clara); }
.ct-form textarea{ resize:vertical; min-height:120px; }
.ct-submit{ margin-top:4px; background:var(--oro); color:var(--oscuro); border:0; border-radius:999px;
            padding:16px 30px; font:inherit; font-size:16px; font-weight:700; cursor:pointer;
            transition:background .2s; }
.ct-submit:hover{ background:var(--oro-claro); }
.ct-nota{ margin:0; font-size:12.5px; line-height:1.6; color:rgba(250,248,242,.4); }

/* ---------- Pie ---------- */
.pie{ background:var(--oscuro); border-top:1px solid var(--linea-osc); padding:40px 0; }
.pie-in{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
@media (min-width:640px){ .pie-in{ flex-direction:row; justify-content:space-between; text-align:left; } }
.pie img{ height:24px; width:auto; opacity:.8; }
.pie p{ margin:0; font-size:13.5px; color:rgba(250,248,242,.45); }
.pie a{ color:rgba(250,248,242,.45); text-decoration:none; font-size:13.5px; }
.pie a:hover{ color:var(--oro); }

/* ---------- Animación de entrada ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
/* El observador de script.js anade 'in-view', no 'visible'. Con la clase
   equivocada 43 elementos se quedaban invisibles en la pagina. */
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .scan-line{ animation:none; }
}

/* =====================================================================
   La plataforma · lista de módulos + maqueta del panel

   Medidas tomadas de la referencia a 1440 px: tarjetas de 65 px de alto
   con 11 de aire, maqueta de 929 x 545 con riel oscuro de 45 px y barra
   superior de 40, tarjeta flotante montada 13 px fuera del marco.

   Todo lo que va dentro de .pf-escena está en px de esa medida: script.js
   escala la escena entera (--pf-k) al ancho disponible.
   ===================================================================== */
.pf-sec{ position:relative; background:var(--clara); color:var(--tinta); padding:120px 0 128px;
         border-top:1px solid var(--linea-cla); }
/* Mismo borde izquierdo que el resto de la página. Hacia la derecha la maqueta
   gana hasta 120 px en pantallas anchas, igual que el vídeo del héroe. */
@media (min-width:1101px){
  .pf-cab, .pf-grid{ margin-right:calc(-1 * clamp(0px, (100vw - 1240px) / 2 - 16px, 120px)); }
}

.pf-sec svg:not([viewBox]){ fill:none; stroke:currentColor; stroke-width:1.8;
                             stroke-linecap:round; stroke-linejoin:round; }
.pf-vivo em, .pf-pildora em, .pf-sec .k em, .pf-sec .s em{ font-style:normal; opacity:.6; margin:0 .5em; }
.pf-sec .k{ margin:0; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; font-weight:400;
            letter-spacing:.14em; text-transform:uppercase; color:#5E626A; white-space:nowrap; }
.pf-sec .s{ margin:0; font-size:12.5px; color:#5E626A; white-space:nowrap; }

/* ---------- Cabecera ---------- */
.pf-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:40px; }
.pf-cab .titular-l{ margin-bottom:24px; text-wrap:balance; }
.pf-bajada{ margin:0; font-size:21px; line-height:1.4; color:var(--tx-cla); }
.pf-cta{
  flex:none; display:inline-flex; align-items:center; gap:10px; margin-bottom:-6px;
  background:var(--oro); color:var(--oscuro); text-decoration:none; border-radius:999px;
  font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:16.5px; font-weight:500; letter-spacing:.01em;
  padding:17px 30px; transition:background .2s ease;
}
.pf-cta:hover{ background:var(--oro-claro); }
.pf-cta svg{ width:15px; height:15px; stroke-width:2; }

/* ---------- Lista de módulos ---------- */
/* --pf-k (script.js) también encoge la lista, para que termine a la altura de la maqueta. */
.pf-grid{ --pf-k:1; display:grid; grid-template-columns:minmax(0,455fr) minmax(0,929fr); gap:20px; align-items:start; }
.pf-lista{ display:flex; flex-direction:column; gap:calc(11px * var(--pf-k)); }
.pf-mod{
  appearance:none; font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:center; width:100%; height:max(54px, calc(65px * var(--pf-k))); padding:0 20px 0 19px;
  background:#fff; border:1px solid #E8E5DB; border-radius:12px; color:var(--tinta);
  transition:transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pf-mod:hover{ border-color:#D6CFBD; }
.pf-mod:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; }
.pf-ico{
  flex:none; display:grid; place-items:center; width:35px; height:35px; margin-right:15px; border-radius:9px;
  border:1px solid rgba(201,157,81,.5); color:rgba(168,127,58,.78);
  transition:background-color .3s ease, border-color .3s ease, color .3s ease;
}
.pf-ico svg{ width:18px; height:18px; stroke-width:1.6; }
.pf-nom{ flex:1; min-width:0; font-size:16.5px; font-weight:600; letter-spacing:-.005em;
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-fl{ flex:none; width:13px; height:13px; color:var(--oro-hondo); opacity:0; transform:translateX(-6px);
        transition:opacity .3s ease, transform .3s ease; }
.pf-mod.is-activo{ background:#F7EDDC; border-color:var(--oro); box-shadow:inset 0 0 0 .5px var(--oro);
                   transform:translateX(4px); }
.pf-mod.is-activo .pf-ico{ background:var(--oro); border-color:var(--oro); color:#fff; }
.pf-mod.is-activo .pf-fl{ opacity:1; transform:none; }

/* ---------- Descripción ---------- */
.pf-der{ position:relative; min-width:0; }
.pf-desc{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; min-height:37px; padding-top:2px; }
.pf-dtxs{ min-width:0; }
.pf-dtx{ display:none; margin:0; font-size:15.5px; line-height:1.35; color:#5A5E66; }
.pf-dtx.is-activa{ display:block; animation:entrar .4s ease; }
.pf-mas{ flex:none; display:inline-flex; align-items:center; gap:7px; margin-top:2px; text-decoration:none;
         font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:13px; letter-spacing:.04em; color:var(--oro-hondo); }
.pf-mas:hover{ color:var(--tinta); }
.pf-mas svg{ width:12px; height:12px; stroke-width:2; }

/* ---------- Escena escalada ---------- */
.pf-visor{ position:relative; }
.pf-caja{ position:relative; width:100%; aspect-ratio:929 / 545; }
.pf-escena{ position:absolute; left:0; top:0; width:929px; height:545px; transform-origin:0 0; transform:scale(var(--pf-k)); }
.pf-marco{
  position:absolute; inset:0; display:flex; overflow:hidden; background:#F4F4F1;
  border:2px solid #202127; border-radius:21px;
  box-shadow:0 0 0 1px rgba(27,31,39,.08), 0 40px 70px -40px rgba(27,31,39,.35);
}

/* Riel */
.pf-rail{ flex:none; width:45px; display:flex; flex-direction:column; align-items:center; gap:4px;
          padding:12px 0 13px; background:#111216; }
.pf-rail-logo{ width:27px; height:27px; margin-bottom:10px; border-radius:8px; }
.pf-ri{ display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:#85888F;
        transition:background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.pf-ri svg{ width:15px; height:15px; }
.pf-ri.is-activo{ background:var(--oro); color:#fff; box-shadow:0 0 0 3px rgba(201,157,81,.28); }
.pf-rail-yo{ margin-top:auto; display:grid; place-items:center; width:23px; height:23px; border-radius:50%;
             background:#2A2C33; color:#E8E8EA; }
.pf-rail-yo svg{ width:11px; height:11px; }

/* App y vistas */
.pf-app{ position:relative; flex:1; min-width:0; }
.pf-vista{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s; }
.pf-vista.is-activa{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.pf-top{ position:absolute; left:0; right:0; top:0; height:40px; display:flex; align-items:center; gap:22px;
         padding:0 18px 0 16px; background:#fff; border-bottom:1px solid #EAEAE6; }
.pf-top > b{ flex:none; font-size:13.5px; font-weight:650; color:#121317; letter-spacing:-.01em; }
.pf-tabs{ display:flex; gap:15px; min-width:0; overflow:hidden; white-space:nowrap; font-size:12.5px; color:#4B4F57; }
.pf-tabs .on{ color:#121317; }
.pf-tabs span:last-child{ -webkit-mask-image:linear-gradient(90deg,#000 15%,transparent 95%);
                          mask-image:linear-gradient(90deg,#000 15%,transparent 95%); }
.pf-vivo{ margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:7px;
          font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; letter-spacing:.14em; color:#4B4F57; }
.pf-vivo i, .pf-pildora i{ flex:none; width:6px; height:6px; border-radius:50%; background:#E5484D;
                           box-shadow:0 0 0 3px rgba(229,72,77,.2); animation:latir 1.6s infinite; }
.pf-area{ position:absolute; left:0; right:0; top:40px; bottom:0; }
.pf-lienzo{ position:absolute; left:13px; right:14px; top:10px; bottom:13px; background:#fff;
            border:1px solid #E7E7E2; border-radius:10px; overflow:hidden; }
.pf-lienzo.oscuro{ background:#111216; border-color:#1D1E23; }
.pf-caja-g{ position:absolute; background:#fff; border:1px solid #EAEAE5; border-radius:9px; }
.pf-caja-g > .k{ position:absolute; left:14px; top:12px; }
.pf-caja-g > .s{ position:absolute; left:14px; top:29px; }
.pf-delta{ display:inline-flex; align-items:center; height:17px; padding:0 7px; border-radius:999px; background:#EEF0EC;
           font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; font-weight:500; letter-spacing:.02em;
           color:#4B4F57; white-space:nowrap; }
.pf-delta.sube{ background:#E3F2E8; color:#1E7F52; }
.pf-leyenda{ display:flex; align-items:center; gap:5px; margin:0; font-family:'IBM Plex Mono', ui-monospace, monospace;
             font-size:9.5px; letter-spacing:.02em; color:#3B3F46; white-space:nowrap; }
.pf-leyenda i{ flex:none; width:6px; height:6px; border-radius:50%; margin-left:8px; }
.pf-leyenda i:first-child{ margin-left:0; }
.pf-leyenda i.n1{ background:#52B062; } .pf-leyenda i.n2{ background:#F2C94C; }
.pf-leyenda i.n3{ background:#F2994A; } .pf-leyenda i.n4{ background:#E5534B; }

/* ── 1 · Vídeo a sangre ── */
.pf-sangre{ overflow:hidden; background:#0E0F12; }
.pf-sangre > img{ width:100%; height:100%; object-fit:cover; }
.pf-pildora{ position:absolute; left:13px; top:12px; display:inline-flex; align-items:center; gap:9px; height:31px;
             padding:0 15px 0 12px; border-radius:999px; background:rgba(18,19,23,.74);
             -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
             font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:12px; letter-spacing:.1em; color:#fff; }
.pf-tubo{ position:absolute; left:13px; right:14px; bottom:13px; height:32px; display:flex; align-items:center; padding:0 13px;
          border-radius:8px; background:rgba(18,19,23,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
          font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.08em; color:#E6E6E9; white-space:nowrap; }
.pf-tubo em{ font-style:normal; margin:0 .6em; opacity:.7; }
.pf-tubo b{ font-weight:400; color:var(--oro-claro); }

/* ── 2 · Conversación ── */
.pf-burbuja{ position:absolute; right:19px; top:17px; height:39px; margin:0; display:flex; align-items:center; padding:0 15px;
             border-radius:14px; background:#EFEDE6; font-size:13px; color:#121317; white-space:nowrap; }
.pf-bot{ position:absolute; left:18px; top:66px; width:30px; height:31px; display:grid; place-items:center; border-radius:8px;
         background:#1B1C21; box-shadow:0 0 0 1px #34353B; }
.pf-bot img{ width:18px; height:18px; border-radius:5px; }
.pf-etiqueta{ position:absolute; left:58px; top:68px; height:24px; display:inline-flex; align-items:center; gap:7px; padding:0 12px 0 10px;
              border-radius:999px; background:rgba(201,157,81,.12); box-shadow:inset 0 0 0 1px rgba(201,157,81,.5);
              font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; letter-spacing:.12em; color:var(--oro-claro); }
.pf-etiqueta svg{ width:11px; height:11px; }
.pf-respuesta{ position:absolute; left:58px; top:102px; width:777px; height:243px; padding:14px 15px; border-radius:12px;
               background:#18191E; box-shadow:inset 0 0 0 1px #2A2B31; }
.pf-respuesta > p{ margin:0; font-size:13px; line-height:19px; color:#C9CACF; }
.pf-respuesta > p b{ color:#fff; font-weight:600; }
.pf-horas{ position:absolute; left:15px; right:15px; top:63px; height:131px; border-radius:9px; background:#0E0F13;
           box-shadow:inset 0 0 0 1px #25262B; }
.pf-horas .k{ position:absolute; left:14px; top:13px; color:#8D9096; }
.pf-horas-barras{ position:absolute; left:14px; right:14px; top:34px; height:61px; display:flex; align-items:flex-end; gap:5px; }
.pf-horas-barras i{ flex:1; border-radius:2px 2px 0 0; background:#34353B; }
.pf-horas-barras i.pico{ background:var(--oro); }
.pf-horas-ejes{ position:absolute; left:14px; right:14px; top:103px; height:14px; margin:0; font-family:'IBM Plex Mono', ui-monospace, monospace;
                font-size:10px; letter-spacing:.06em; color:#8D9096; }
.pf-horas-ejes span{ position:absolute; top:0; white-space:nowrap; }
.pf-horas-ejes span:first-child{ left:0; }
.pf-horas-ejes span:last-child{ right:0; }
.pf-horas-ejes span.c{ left:50%; transform:translateX(-50%); color:#D5D6DA; }
.pf-citas{ position:absolute; left:15px; top:204px; display:flex; gap:8px; }
.pf-citas span{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:999px;
                box-shadow:inset 0 0 0 1px #34353B; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; color:#D5D6DA; }
.pf-citas svg{ width:8px; height:8px; fill:var(--oro); stroke:none; }
.pf-escribir{ position:absolute; left:0; right:0; bottom:0; height:57px; display:flex; align-items:center; gap:12px; padding:0 14px 0 18px;
              border-top:1px solid #222328; font-size:13px; color:#8D8F95; }
.pf-escribir img{ width:20px; height:20px; border-radius:5px; }
.pf-escribir i{ margin-left:auto; display:grid; place-items:center; width:35px; height:35px; border-radius:8px; background:var(--oro); color:#111216; }
.pf-escribir i svg{ width:15px; height:15px; }

/* ── 3 · Tablero denso ── */
.pf-kpis{ position:absolute; left:0; right:0; top:0; height:49px; display:grid; grid-template-columns:repeat(4,1fr);
          border-bottom:1px solid #EDEDE9; }
.pf-kpis > div{ padding:8px 14px 0; border-right:1px solid #EDEDE9; }
.pf-kpis > div:last-child{ border-right:0; }
.pf-kpis .v{ margin:4px 0 0; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:650; color:#121317; white-space:nowrap; }
.pf-radar-caja{ left:13px; top:59px; width:424px; height:209px; }
.pf-radar{ position:absolute; left:0; top:52px; width:424px; height:150px; overflow:visible; }
.pf-lineas-caja{ left:449px; top:59px; width:389px; height:209px; }
.pf-lineas{ position:absolute; left:14px; top:58px; width:361px; height:94px; overflow:visible; }
.pf-lineas-ejes{ position:absolute; left:14px; right:14px; top:160px; margin:0; display:flex; justify-content:space-between;
                 font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; color:#6B6F76; }
.pf-lineas-caja .pf-leyenda{ position:absolute; left:14px; top:184px; }
.pf-matriz-caja{ left:13px; top:278px; width:825px; height:189px; }
.pf-matriz{ position:absolute; left:14px; right:12px; top:52px; display:grid; grid-template-columns:50px repeat(14,1fr);
            column-gap:3px; row-gap:3px; font-family:'IBM Plex Mono', ui-monospace, monospace; }
.pf-matriz span{ font-size:9px; line-height:9px; color:#3B3F46; white-space:nowrap; }
.pf-matriz span.f{ text-align:center; }
.pf-matriz i{ display:block; height:9px; border-radius:999px; font-style:normal; font-size:7.5px; line-height:9px; text-align:center; color:#fff; }
.pf-matriz i.n1{ background:#52B062; } .pf-matriz i.n2{ background:#F2C94C; color:rgba(0,0,0,.55); }
.pf-matriz i.n3{ background:#F2994A; } .pf-matriz i.n4{ background:#E5534B; }
.pf-matriz-pie{ position:absolute; left:14px; right:14px; top:167px; margin:0; display:flex; align-items:center; justify-content:space-between; }

/* ── 4 · Mapa de calor ── */
.pf-camcol{ position:absolute; left:13px; top:12px; width:111px; }
.pf-mini{ display:flex; align-items:center; justify-content:space-between; height:14px; margin:0 0 8px;
          font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#5E626A; }
.pf-mini span{ display:inline-flex; align-items:center; gap:4px; letter-spacing:.04em; color:#2E3238; }
.pf-mini svg{ width:11px; height:11px; }
.pf-thumb{ position:relative; width:111px; height:70px; margin:0 0 8px; border-radius:6px; overflow:hidden; background:#1A1B1F;
           box-shadow:0 0 0 1px rgba(0,0,0,.4); }
.pf-thumb img{ width:100%; height:100%; object-fit:cover; }
.pf-thumb figcaption{ position:absolute; left:0; right:0; bottom:0; padding:14px 7px 5px; background:linear-gradient(transparent, rgba(0,0,0,.78));
                      font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; font-weight:600; color:#fff;
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-thumb.on{ box-shadow:0 0 0 2px var(--oro); }
.pf-thumb.on::after{ content:""; position:absolute; right:5px; top:5px; width:5px; height:5px; border-radius:50%; background:var(--oro); }
.pf-principal{ position:absolute; left:135px; top:11px; width:703px; height:350px; border-radius:6px; overflow:hidden;
               background:#0E0F12; box-shadow:0 0 0 1.5px #1B1C21; }
.pf-principal > img{ width:100%; height:100%; object-fit:cover; }
.pf-calor{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(22,1fr); grid-template-rows:repeat(11,1fr); }
.pf-calor i{ display:block; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.06); }
.pf-acciones{ position:absolute; left:11px; top:11px; height:30px; display:flex; align-items:center; gap:2px; padding:0 4px 0 12px;
              border-radius:7px; background:rgba(20,21,25,.8); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
              box-shadow:0 0 0 1px rgba(255,255,255,.06);
              font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; color:#ECECEE; }
.pf-acciones span{ padding:4px 6px; border-radius:5px; }
.pf-acciones .k{ margin-right:6px; padding-left:0; color:#9A9DA4; }
.pf-acciones .on{ background:rgba(255,255,255,.14); color:#fff; }
.pf-analitica{ position:absolute; left:0; right:0; top:372px; height:38px; display:flex; align-items:center; gap:14px; padding:0 14px;
               border-top:1px solid #EDEDE9; font-size:12.5px; color:#3B3F46; white-space:nowrap; }
.pf-analitica .k{ margin-right:5px; }
.pf-analitica b{ font-weight:650; color:#121317; }
.pf-analitica b.oro{ color:var(--oro-hondo); }
.pf-barras{ position:absolute; left:14px; right:14px; top:420px; display:grid; grid-template-columns:repeat(8,1fr); gap:5px; }
.pf-barras .area{ height:27px; display:flex; align-items:flex-end; }
.pf-barras .area i{ display:block; width:100%; border-radius:2px 2px 0 0; background:#F28E6C; }
.pf-barras .area i.m{ background:#F5C35C; }
.pf-barras .dia{ display:block; margin-top:8px; text-align:center; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; color:#5E626A; }

/* ── 5 · Timelapse ── */
.pf-filtros{ position:absolute; left:14px; right:14px; top:12px; height:26px; display:flex; align-items:center; gap:6px; }
.pf-filtros .k{ margin-right:4px; }
.pf-filtros .k.sep{ margin-left:16px; padding-left:16px; border-left:1px solid #E3E3DE; line-height:24px; }
.pf-filtros .chip{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; box-shadow:inset 0 0 0 1px #E3E3DE;
                   font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; color:#3B3F46; }
.pf-filtros .chip.on{ background:#121317; color:#fff; box-shadow:none; }
.pf-reproductor{ position:absolute; left:14px; right:14px; top:48px; height:326px; border-radius:8px; overflow:hidden; background:#0E0F12; }
.pf-reproductor video{ width:100%; height:100%; object-fit:cover; }
.pf-controles{ position:absolute; left:12px; right:12px; bottom:12px; height:32px; display:flex; align-items:center; gap:12px; padding:0 13px;
               border-radius:8px; background:rgba(18,19,23,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pf-controles svg{ width:11px; height:11px; fill:#fff; stroke:none; }
.pf-avance{ position:relative; flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.22); }
.pf-avance i{ position:absolute; left:0; top:0; bottom:0; width:62%; border-radius:3px; background:var(--oro); }
.pf-avance i::after{ content:""; position:absolute; right:-5px; top:-4px; width:11px; height:11px; border-radius:50%; background:#fff;
                     box-shadow:0 0 0 3px rgba(201,157,81,.45); }
.pf-controles .t{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; letter-spacing:.04em; color:#E6E6E9; }
.pf-dias{ position:absolute; left:14px; right:14px; top:386px; height:78px; display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.pf-dias figure{ position:relative; margin:0; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.pf-dias img{ width:100%; height:100%; object-fit:cover; }
.pf-dias figcaption{ position:absolute; left:0; right:0; bottom:0; padding:12px 8px 5px; background:linear-gradient(transparent, rgba(0,0,0,.72));
                     font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; font-weight:600; letter-spacing:.06em; color:#fff; }
.pf-dias figure.on{ box-shadow:0 0 0 2px var(--oro); }

/* ── 6 · Un número y su tendencia ── */
.pf-lead{ position:absolute; left:14px; top:13px; margin:0; font-size:12.5px; color:#5E626A; }
.pf-puntaje{ left:14px; top:42px; width:239px; height:243px; display:flex; flex-direction:column; justify-content:center; padding:0 16px; }
.pf-puntaje .k{ position:static; }
.pf-puntaje .n{ margin:12px 0 9px; font-size:42px; font-weight:600; line-height:1; letter-spacing:-.03em; color:#121317; }
.pf-puntaje .n span{ margin-left:8px; font-size:12.5px; font-weight:400; letter-spacing:0; color:#5E626A; }
.pf-puntaje .pf-delta{ align-self:flex-start; }
.pf-tendencia{ left:264px; top:42px; width:574px; height:243px; }
.pf-tendencia > .k{ top:52px; }
.pf-tend{ position:absolute; left:14px; top:74px; width:546px; height:120px; overflow:visible; }
.pf-reporte{ left:14px; top:295px; width:824px; height:57px; display:flex; align-items:center; gap:9px; padding:0 16px 7px; }
.pf-reporte .ic{ width:18px; height:18px; color:var(--oro-hondo); }
.pf-reporte b{ margin-right:4px; font-size:13.5px; font-weight:650; color:#121317; }
.pf-reporte .chip{ display:inline-flex; align-items:center; height:19px; padding:0 8px; border-radius:5px;
                   font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; letter-spacing:.1em; }
.pf-reporte .chip.gris{ background:#F1F1EE; color:#5E626A; }
.pf-reporte .chip.oro{ background:#F6ECDB; color:var(--oro-hondo); }
.pf-reporte .der{ margin-left:auto; display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.06em; color:#6B6F76; }
.pf-reporte .der svg{ width:13px; height:13px; }
.pf-reporte .pista{ position:absolute; left:16px; right:16px; bottom:11px; height:2px; border-radius:2px; background:#EDEDE9; overflow:hidden; }
.pf-reporte .pista i{ position:absolute; top:0; bottom:0; left:-35%; width:35%; background:linear-gradient(90deg, transparent, var(--oro), transparent);
                      animation:pf-barrido 3.4s ease-in-out infinite; }
@keyframes pf-barrido{ from{ left:-35%; } to{ left:100%; } }
.pf-kpi3{ top:361px; width:268px; height:106px; }
.pf-in .pf-kpi3:nth-child(5){ left:14px; }
.pf-in .pf-kpi3:nth-child(6){ left:292px; }
.pf-in .pf-kpi3:nth-child(7){ left:570px; }
.pf-kpi3 > .k{ left:13px; top:13px; }
.pf-kpi3 .v{ position:absolute; left:13px; top:33px; margin:0; display:flex; align-items:center; gap:8px; font-size:17px; font-weight:500; color:#121317; }
.pf-spark{ position:absolute; left:13px; right:13px; bottom:10px; height:26px; display:flex; align-items:flex-end; gap:3px; }
.pf-spark i{ flex:1; border-radius:2px 2px 0 0; }
.pf-spark.coral i{ background:#F3A488; } .pf-spark.verde i{ background:#7DB59C; } .pf-spark.ambar i{ background:#F4CF7C; }

/* ── 7 · Piezas ── */
.pf-mk-cab{ position:absolute; left:14px; right:14px; top:11px; height:24px; display:flex; align-items:center; justify-content:space-between; }
.pf-formatos{ display:inline-flex; padding:2px; border-radius:7px; background:#F1F1EE; }
.pf-formatos span{ height:20px; display:inline-flex; align-items:center; padding:0 9px; border-radius:5px;
                   font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; color:#5E626A; }
.pf-formatos .on{ background:#fff; color:#121317; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.pf-pieza{ position:absolute; top:46px; width:196px; margin:0; }
.pf-mk .pf-pieza:nth-of-type(1){ left:14px; }
.pf-mk .pf-pieza:nth-of-type(2){ left:224px; }
.pf-mk .pf-pieza:nth-of-type(3){ left:434px; }
.pf-mk .pf-pieza:nth-of-type(4){ left:644px; }
.pf-pieza .lz{ position:relative; height:356px; border-radius:8px; overflow:hidden; background:#121317; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.pf-pieza.on .lz{ box-shadow:0 0 0 2px var(--oro); }
.pf-pieza .lz img{ position:absolute; left:0; width:100%; object-fit:cover; }
.pf-pieza .logo{ position:absolute; left:12px; top:12px; z-index:2; padding:4px 7px; border-radius:4px; border:1px dashed rgba(255,255,255,.7);
                 font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:8.5px; letter-spacing:.12em; color:#fff; }
.pf-pieza figcaption{ display:flex; flex-direction:column; gap:3px; margin-top:9px; }
.pf-pieza figcaption b{ font-size:12.5px; font-weight:650; color:#121317; }
.pf-pieza figcaption span{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; color:#6B6F76; }
.lz.portada img{ top:0; height:100%; }
.lz.portada::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 30%, transparent 50%, rgba(0,0,0,.8) 100%); }
.lz.portada p{ position:absolute; left:14px; right:14px; bottom:16px; z-index:2; margin:0; font-size:25px; font-weight:700; line-height:1; letter-spacing:-.02em; color:#fff; }
.lz.portada p span{ display:block; margin-bottom:8px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:8.5px; font-weight:400; letter-spacing:.14em; color:var(--oro-claro); }
.lz.hoy{ background:var(--clara); }
.lz.hoy img{ top:0; height:66%; }
.lz.hoy p{ position:absolute; left:14px; right:14px; bottom:16px; margin:0; display:flex; flex-direction:column; gap:6px; }
.lz.hoy p b{ font-size:21px; font-weight:700; line-height:1; letter-spacing:-.02em; color:#121317; }
.lz.hoy p span{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9px; letter-spacing:.06em; color:#5E626A; }
.lz.hoy p::before{ content:""; width:22px; height:3px; margin-bottom:6px; border-radius:2px; background:var(--oro); }
.lz.partido img:nth-of-type(1){ top:0; height:50%; }
.lz.partido img:nth-of-type(2){ top:50%; height:50%; border-top:2px solid var(--oro); }
.lz.partido .a, .lz.partido .b{ position:absolute; left:10px; z-index:2; padding:4px 8px; border-radius:999px; background:rgba(18,19,23,.78);
                                font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:8.5px; letter-spacing:.12em; color:#fff; }
.lz.partido .a{ top:10px; }
.lz.partido .b{ top:calc(50% + 10px); background:var(--oro); color:#121317; }
.lz.cifra{ background:#121317; }
.lz.cifra img{ bottom:0; height:38%; }
.lz.cifra::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(#121317, transparent 45%); }
.lz.cifra p{ position:absolute; left:14px; right:14px; top:92px; margin:0; display:flex; flex-direction:column; }
.lz.cifra p b{ font-size:92px; font-weight:700; line-height:.9; letter-spacing:-.04em; color:var(--oro); }
.lz.cifra p span{ margin-top:6px; font-size:15px; font-weight:600; color:#fff; }

/* ── 8 · Red de accesos ── */
.pf-red{ overflow:hidden;
         background:radial-gradient(circle at 50% 50%, rgba(201,157,81,.36) 0%, rgba(150,96,34,.22) 16%, rgba(30,22,14,0) 44%),
                    radial-gradient(ellipse at 50% 62%, #241B12 0%, #0F0F12 64%); }
.pf-red-lineas{ position:absolute; left:0; top:0; width:880px; height:501px; }
.pf-nodo{ position:absolute; display:grid; place-items:center; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:11px;
          background:#F4EFE6; color:#8A6424; box-shadow:0 6px 18px rgba(0,0,0,.45); }
.pf-nodo svg{ width:20px; height:20px; }
.pf-nodo em{ position:absolute; top:52px; left:50%; transform:translateX(-50%); font-style:normal; white-space:nowrap;
             font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10px; letter-spacing:.06em; color:#E7E3DB; }
.pf-nodo.chico{ width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:9px; background:rgba(206,196,178,.58); color:#1C1D22;
                font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:10.5px; font-weight:600; }
.pf-nodo.centro{ width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:15px; background:#141519;
                 box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 50px rgba(201,157,81,.55), 0 0 110px rgba(201,157,81,.25); }
.pf-nodo.centro img{ width:34px; height:34px; border-radius:8px; }

/* ---------- Tarjetas flotantes ---------- */
.pf-flot{
  position:absolute; right:calc(-13px * var(--pf-k)); z-index:3; max-width:264px; padding:11px 15px 12px;
  background:#fff; border:1px solid #E9E8E3; border-radius:11px;
  box-shadow:0 18px 40px -18px rgba(27,31,39,.35), 0 2px 8px rgba(27,31,39,.06);
  transform-origin:100% 0; transform:scale(var(--pf-k));
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s;
}
.pf-flot.is-activa{ opacity:1; visibility:visible; transition:opacity .35s ease .12s; }
.pf-flot.alta{ top:7.4%; }
.pf-flot.media{ top:70%; }
.pf-flot.baja{ top:69.5%; background:#B8391F; border-color:#B8391F; }
.pf-flot .r{ display:flex; align-items:center; gap:7px; margin:0; white-space:nowrap;
             font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; letter-spacing:.14em; color:#3B3F46; }
.pf-flot .r i{ flex:none; width:5px; height:5px; border-radius:50%; background:var(--oro); }
.pf-flot .t{ margin:6px 0 0; font-size:13.5px; font-weight:600; line-height:1.3; letter-spacing:-.005em; color:#121317; }
.pf-flot .ok{ display:flex; align-items:center; gap:5px; margin:7px 0 0; white-space:nowrap;
              font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; letter-spacing:.04em; color:#1E8A5A; }
.pf-flot .ok svg{ width:10px; height:10px; stroke-width:2.4; }
.pf-flot.baja .r, .pf-flot.baja .t, .pf-flot.baja .ok{ color:#fff; }
.pf-flot.baja .r i{ background:#fff; }

/* ---------- Pantallas medianas y chicas ---------- */
@media (max-width:1100px){
  .pf-grid{ grid-template-columns:1fr; gap:22px; }
  .pf-lista{ flex-direction:row; gap:8px; margin:0 -24px; padding:4px 24px 8px; overflow-x:auto; scrollbar-width:none; }
  .pf-lista::-webkit-scrollbar{ display:none; }
  .pf-mod{ flex:none; width:auto; height:52px; padding:0 16px 0 9px; }
  .pf-mod.is-activo{ transform:none; }
  .pf-ico{ width:32px; height:32px; margin-right:10px; }
  .pf-nom{ font-size:15px; overflow:visible; }
  .pf-fl{ display:none; }
}
/* Entre 1101 y 1300 px la descripción puede ocupar dos líneas: se reserva el
   alto de dos para que la maqueta no salte al cambiar de módulo. */
@media (min-width:1101px) and (max-width:1300px){
  .pf-dtxs{ min-height:calc(2 * 1.35em); }
  .pf-desc{ margin-bottom:12px; }
}
@media (max-width:860px){
  .pf-dtxs{ min-height:calc(2 * 1.35em); }
  .pf-cab{ flex-direction:column; align-items:flex-start; gap:26px; }
  .pf-bajada{ font-size:18px; }
  .pf-cta{ margin-bottom:0; }
  .pf-desc{ height:auto; flex-direction:column; gap:8px; margin-bottom:16px; }
}
@media (max-width:640px){
  .pf-sec{ padding:72px 0; }
  .pf-cab h2 br{ display:none; }
  .pf-cta{ font-size:14.5px; padding:14px 22px; }
  .pf-flot{ position:relative; right:auto; top:auto; display:none; max-width:none; margin-top:14px; transform:none; }
  .pf-flot.alta, .pf-flot.media, .pf-flot.baja{ top:auto; }
  .pf-flot.is-activa{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  .pf-reporte .pista i, .pf-vivo i, .pf-pildora i{ animation:none; }
  .pf-mod, .pf-vista, .pf-flot{ transition:none; }
}