/* ============================================================
   Díaz Marketing · página SEO (seo.html)
   Se carga después de styles.css y scrollcraft.css. Aquí viven:
   1. los tokens de ScrollCraft ajustados a la marca,
   2. los huecos de imagen (recuadros vacíos, a propósito),
   3. las seis capas de la página,
   4. la réplica del panel «Centro SEO» (prefijo cs-),
   5. el estado apagado/encendido que gobierna js/seo.js.
   ============================================================ */

/* ---------- 1 · Tokens ---------- */
:root{
  --sc-canvas:#060608; --sc-surface:#0d0d12;
  --sc-ink:#F3F0EA;    --sc-ink-soft:#BEB5A3;
  --sc-accent:#F9B233; --sc-accent-ink:#060608;
  --sc-font-display:'Sora',system-ui,sans-serif;
  --sc-font-text:'Inter',system-ui,sans-serif;
  --sc-font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --sc-maxw:1200px;
}
body.pagina-seo{background:var(--sc-canvas);color:var(--txt)}
body.pagina-seo main{position:relative;z-index:1}
/* El motor deja la copia a opacidad 0 hasta que se monta; en esta página
   la copia del hero y del cierre no usa cues, así que no hay parpadeo. */

/* ---------- 2 · Los fondos ---------- */
/* Ninguna foto se queda quieta. Las de los actos fijados hacen un acercamiento
   lento (1,10 → 1,00) mientras dura el acto, y la banda de aire se abre de los
   lados hacia fuera al entrar. Los valores los escribe js/seo.js leyendo la
   variable --sc-p que publica el motor; aquí solo viven los de reposo, para que
   sin JS la foto se vea entera y bien. Solo transform y clip-path. */
.fondo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(var(--z,1));will-change:transform;
}
[data-fondo="abrir"]{clip-path:inset(0 var(--c,0%))}

/* ---------- Píldora (etiqueta de capa, estilo Fora) ---------- */
.pildora{
  display:inline-flex;align-items:center;gap:8px;
  font:500 11px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-2);border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;
  background:rgba(6,6,8,.4);backdrop-filter:blur(6px);
}
.pildora::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cy)}

/* ---------- 3 · Capas ---------- */

/* Capa 1 · hero + vitrina (fijado, 2,4 pantallas) */
#vitrina .sc-stage{display:flex;flex-direction:column;background:var(--sc-canvas)}
.vit-fondo{position:absolute;left:0;right:0;top:-14vh;bottom:-14vh;z-index:0}
/* El velo sujeta el titular y la entradilla contra las crestas iluminadas, y
   suelta la foto en la franja media, que es la que se ve entera. */
.vit-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,6,8,.86) 0%,rgba(6,6,8,.62) 30%,rgba(6,6,8,.34) 50%,rgba(6,6,8,.1) 68%,rgba(6,6,8,.62) 100%);
}
.vit-copy{
  position:relative;z-index:2;text-align:center;
  width:min(880px,calc(100% - 48px));margin:0 auto;
  padding-top:clamp(96px,14vh,150px);
}
/* La entradilla cae justo sobre las crestas iluminadas y ahí se quedaba en
   1,81:1. En vez de bajar la foto entera, que la aplanaría, va un velo elíptico
   solo detrás del bloque de texto: las crestas siguen visibles alrededor. */
.vit-copy::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-6%;translate:-50% 0;width:164%;height:128%;
  background:radial-gradient(58% 52% at 50% 46%,
    rgba(6,6,8,.92) 0%,rgba(6,6,8,.8) 42%,rgba(6,6,8,.38) 72%,transparent 100%);
}
.vit-copy h1{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(2.15rem,5vw,4.15rem);margin:22px 0 18px;text-wrap:balance;color:var(--txt);
}
.vit-copy .lede{
  font-size:clamp(1rem,1.25vw,1.16rem);color:var(--txt-2);line-height:1.62;max-width:60ch;margin:0 auto;text-wrap:pretty;
}
.vit-acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

.vit-marco{
  position:relative;z-index:2;flex:1;min-height:0;
  width:min(1180px,calc(100% - 32px));margin:clamp(30px,5vh,52px) auto 0;
  border:1px solid rgba(255,255,255,.13);border-bottom:0;border-radius:16px 16px 0 0;
  background:#0E1116;overflow:hidden;
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset,0 50px 120px -30px rgba(0,0,0,.85);
  --enc:0;   /* 0 apagado · 1 conectado; lo escribe js/seo.js */
  transform:translate3d(0,calc((1 - var(--enc)) * 4vh),0);
  will-change:transform;
}
/* La ventana del navegador se reduce, y el panel queda cortado por abajo
   como en Fora: la interfaz sigue más allá del borde. */
.vit-marco::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:rgba(6,6,8,.58);opacity:calc(1 - var(--enc));
  transition:none;
}
.vit-marco .cseo{height:100%}

/* Capa 2 · el cambio (flujo, se ilumina frase a frase) */
#cambio{padding:clamp(120px,22vh,220px) 0}
#cambio .wrap{max-width:1040px}
.cambio-texto{
  font-family:'Sora',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.3;
  font-size:clamp(1.45rem,2.9vw,2.55rem);margin:26px 0 0;text-wrap:pretty;color:var(--txt);
}
.cambio-texto .fr{
  /* luz de lectura: cada frase se enciende en su tramo del scroll */
  --a:calc(0.26 + var(--i) * 0.05);
  opacity:calc(0.16 + 0.84 * clamp(0, (var(--sc-p, 0) - var(--a)) / 0.06, 1));
}
.cambio-texto .fr--clave{color:var(--cy)}
.cambio-pie{margin-top:34px;color:var(--txt-3);font-size:.95rem;max-width:52ch;line-height:1.7}

/* Aire · una pantalla sin texto nuevo */
#aire{height:78vh;overflow:hidden;position:relative}
.aire-marco{position:absolute;left:0;right:0;top:-12vh;bottom:-12vh;overflow:hidden}

/* Capa 3 · las vistas (fijado, 2 pantallas) */
#vistas .sc-stage{background:var(--sc-canvas)}
.vis-fondo{position:absolute;inset:0;z-index:0}
/* Aquí el velo va de izquierda a derecha: la columna de texto se apoya en la
   arena oscura del delta y los canales de luz quedan libres a la derecha. */
.vis-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,6,8,.93) 0%,rgba(6,6,8,.86) 30%,rgba(6,6,8,.6) 48%,rgba(6,6,8,.42) 70%,rgba(6,6,8,.5) 100%);
}
.vis-grid{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-columns:minmax(300px,.42fr) 1fr;gap:clamp(28px,4vw,64px);align-items:center;
  padding-top:76px;
}
.vis-copy h2{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.8rem,3.2vw,2.8rem);margin:20px 0 22px;color:var(--txt);text-wrap:balance;
}
.vis-tabs{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.vis-tab{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--txt-3);
  font:600 .95rem/1.2 'Inter',sans-serif;cursor:pointer;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.vis-tab::before{
  content:"";width:18px;height:1.5px;background:var(--line-2);border-radius:2px;flex:0 0 18px;
  transition:background .25s var(--ease),transform .35s var(--ease);
}
.vis-tab:hover{color:var(--txt)}
.vis-tab.on{color:var(--txt);background:rgba(255,255,255,.04)}
.vis-tab.on::before{background:var(--cy);transform:scaleX(1.4);transform-origin:left}
/* Los seis textos ocupan la misma celda: el bloque mide lo que el más largo
   y ninguno se sale ni se corta. */
.vis-leads{display:grid;margin-top:22px}
.vis-lead{
  grid-area:1/1;margin:0;color:var(--txt-2);font-size:.98rem;line-height:1.68;max-width:44ch;
  opacity:0;transform:translate3d(0,8px,0);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.vis-lead.on{opacity:1;transform:none}

.vis-marco{
  position:relative;align-self:stretch;margin-block:clamp(24px,6vh,64px);min-height:0;
  border:1px solid rgba(255,255,255,.13);border-radius:16px;background:#0E1116;overflow:hidden;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.85);
}
.vis-marco .cseo{height:100%}
.cs-cuerpo{position:relative;flex:1;min-height:0}   /* las vistas se apilan aquí, debajo de la barra superior */
.cs-vista{
  position:absolute;inset:0;padding:22px 24px 40px;overflow:hidden;
  opacity:0;transform:translate3d(0,10px,0);pointer-events:none;
  transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.cs-vista.on{opacity:1;transform:none;pointer-events:auto}

/* Capa 4 · lo que consigues (flujo) */
#logros{padding:clamp(100px,16vh,170px) 0 clamp(60px,10vh,120px)}
#logros .sec-cab{max-width:720px;margin-bottom:clamp(56px,8vh,96px)}
#logros .sec-cab h2{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.9rem,3.6vw,3.1rem);margin:18px 0 0;color:var(--txt);text-wrap:balance;
}
.logro{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(36px,6vh,64px) 0;border-top:1px solid var(--line);
}
.logro:last-child{border-bottom:1px solid var(--line)}
.logro:nth-child(even) .logro__vis{order:-1}
.logro__txt h3{
  font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.12;
  font-size:clamp(1.45rem,2.4vw,2.05rem);margin:0 0 16px;color:var(--txt);text-wrap:balance;
}
.logro__txt p{color:var(--txt-2);line-height:1.72;max-width:50ch;margin:0}
.logro__txt .nota{margin-top:16px;font-size:.88rem;color:var(--txt-3)}
/* La imagen de cada logro es un recorte del panel flotando sobre el hueco de
   la foto, cortado por el borde como en Fora. El recorte se maqueta a un
   ancho fijo (--w) y se escala al hueco (--k, lo calcula js/seo.js). */
.logro__vis{
  aspect-ratio:4/3;max-width:100%;position:relative;overflow:hidden;
  border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.08);background:var(--bg-2);
  --w:480px;   /* ancho de maqueta del recorte */
  --f:.64;     /* fracción del hueco que ocupa el recorte */
  --k:.7;      /* escala resultante; la escribe js/seo.js */
}
.logro__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Anclado arriba a la derecha y cortado por abajo y por la derecha, como las
   interfaces de Fora: se ve la barra del panel y la foto respira a la izquierda. */
.cs-recorte{
  position:absolute;right:-6%;top:13%;width:var(--w);
  transform:scale(var(--k));transform-origin:top right;
  border:1px solid rgba(255,255,255,.16);border-radius:14px;
  background:#0E1116;overflow:hidden;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.5);
}
/* doble clase: tiene que ganar a la rejilla de .cseo, que se declara más abajo */
.cseo.cseo--solo{grid-template-columns:1fr}

/* lista de acciones (vista «Qué hacer ahora») */
.cs-act{display:flex;gap:12px;padding:12px 15px;border-bottom:1px solid rgba(38,46,57,.55);align-items:flex-start}
.cs-act:last-child{border-bottom:0}
.cs-act .rank{
  width:21px;height:21px;flex:0 0 21px;border-radius:5px;background:var(--p-raise);color:var(--p-dim);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.cs-act.crit .rank{background:rgba(226,85,99,.16);color:var(--p-bad)}
.cs-act h5{font-size:12.6px;font-weight:600;margin:0 0 2px;font-family:'Archivo',sans-serif;color:var(--p-text)}
.cs-act p{font-size:11.6px;color:var(--p-dim);line-height:1.45;margin:0}
.cs-act .who{margin-left:auto;flex:0 0 auto;padding-top:2px}

/* paquete listo (vista «Paquetes listos») */
.cs-pkg{border:1px solid var(--p-line);border-radius:10px;overflow:hidden;background:var(--p-panel)}
.cs-pkg .cs-cab .meta{font-size:10.5px;color:var(--p-faint);margin-top:1px;font-family:'IBM Plex Mono',monospace}
.cs-pkg .why{
  padding:10px 15px;font-size:11.6px;color:var(--p-dim);
  background:linear-gradient(90deg,rgba(91,141,239,.05),transparent 70%);border-bottom:1px solid var(--p-line);
}
.cs-pkg .why b{color:var(--p-text);font-weight:600}
.cs-code{position:relative}
.cs-code pre{
  margin:0;padding:14px 15px;overflow:hidden;font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:1.6;
  color:#BFD0E4;background:#10141A;
}
.cs-copy{
  position:absolute;top:8px;right:9px;border:1px solid var(--p-line2);background:var(--p-raise);color:var(--p-dim);
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;padding:4px 10px;border-radius:6px;
}

/* título de bloque dentro de una vista */
.cs-sec{
  font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--p-faint);font-weight:600;
  margin:18px 0 10px;display:flex;align-items:center;gap:11px;font-family:'Archivo',sans-serif;
}
.cs-sec::after{content:"";flex:1;height:1px;background:var(--p-line)}

/* conexiones */
.cs-conn{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cs-conn .body{display:flex;gap:12px;align-items:flex-start}
.cs-conn .ic{
  width:36px;height:36px;flex:0 0 36px;border-radius:9px;background:var(--p-raise);display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:12px;color:var(--p-dim);
}
.cs-conn h5{font-size:12.8px;font-weight:600;margin:0 0 3px;font-family:'Archivo',sans-serif;color:var(--p-text)}
.cs-conn p{font-size:11.6px;color:var(--p-dim);line-height:1.5;margin:0}
.cs-need{margin-top:8px;padding:8px 11px;background:var(--p-panel2);border-radius:7px;border-left:2px solid var(--p-gold-dim)}
.cs-need span{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--p-faint);font-weight:600;display:block;margin-bottom:3px}
.cs-need p{font-size:11.3px}

/* Capa 5 · preguntas (flujo) */
#faq{padding:clamp(90px,14vh,150px) 0}
#faq .sec-cab{text-align:center;max-width:720px;margin:0 auto clamp(40px,6vh,64px)}
#faq .sec-cab h2{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(1.8rem,3.2vw,2.7rem);margin:18px 0 0;color:var(--txt);text-wrap:balance;
}
#faq .faq-item{transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s,background .3s}

/* Capa 6 · cierre (fijado, 1,15 pantallas: resuelve y se queda) */
#cierre .sc-stage{display:flex;flex-direction:column;background:var(--sc-canvas)}
.cie-fondo{position:absolute;inset:0;z-index:0}
/* La franja de luz del valle cae justo donde va el párrafo: el velo la sujeta
   ahí y la deja limpia por debajo, entre el botón y el panel. */
.cie-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,8,.84) 0%,rgba(6,6,8,.7) 30%,rgba(6,6,8,.56) 46%,rgba(6,6,8,.18) 72%,rgba(6,6,8,.8) 100%);
}
.cie-copy{
  position:relative;z-index:2;text-align:center;
  width:min(760px,calc(100% - 48px));margin:0 auto;padding-top:clamp(100px,16vh,170px);
}
.cie-copy h2{
  font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.04;
  font-size:clamp(2rem,4.4vw,3.7rem);margin:0 0 18px;color:var(--txt);text-wrap:balance;
}
.cie-copy p{color:var(--txt-2);font-size:1.06rem;line-height:1.66;max-width:52ch;margin:0 auto 28px}
.cie-marco{
  position:relative;z-index:2;flex:1;min-height:0;
  width:min(980px,calc(100% - 32px));margin:clamp(30px,6vh,60px) auto 0;
  border:1px solid rgba(255,255,255,.13);border-bottom:0;border-radius:16px 16px 0 0;
  background:#0E1116;overflow:hidden;box-shadow:0 50px 120px -30px rgba(0,0,0,.85);
}

/* ---------- 4 · Réplica del panel «Centro SEO» ---------- */
.cseo{
  --p-bg:#0E1116; --p-panel:#151A21; --p-panel2:#1B212A; --p-raise:#212936;
  --p-line:#262E39; --p-line2:#2F3945;
  --p-text:#E6EAF0; --p-dim:#98A3B3; --p-faint:#7B8797;
  --p-gold:#C9A84C; --p-gold-dim:#8A7331;
  --p-ok:#3DD68C; --p-warn:#E0A33A; --p-bad:#E25563; --p-info:#5B8DEF;
  --p-side:212px;
  display:grid;grid-template-columns:var(--p-side) 1fr;
  font-family:'Archivo',sans-serif;font-size:12.5px;line-height:1.5;color:var(--p-text);
  background:var(--p-bg);text-align:left;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-font-smoothing:antialiased;
}
.cseo *{box-sizing:border-box}
.cseo .mono,.cseo .num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* lateral */
.cs-side{
  background:linear-gradient(180deg,#12161C 0%,#0F1318 100%);border-right:1px solid var(--p-line);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.cs-brand{padding:18px 18px 16px;border-bottom:1px solid var(--p-line);display:flex;align-items:center;gap:10px}
.cs-brand .sq{
  width:28px;height:28px;border-radius:6px;flex:0 0 28px;
  background:linear-gradient(135deg,var(--p-gold) 0%,#9C8138 100%);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:12px;color:#0E1116;letter-spacing:-.03em;
}
.cs-brand strong{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.cs-brand small{display:block;font-size:9.5px;color:var(--p-faint);letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.cs-nav{padding:14px 10px;flex:1;min-height:0}
.cs-grupo{margin-bottom:16px}
.cs-grupo>span{display:block;font-size:9px;letter-spacing:.19em;text-transform:uppercase;color:var(--p-faint);padding:0 8px 7px;font-weight:600}
.cs-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:7px 10px;border-radius:7px;color:var(--p-dim);font-size:12.4px;font-weight:500;position:relative;
}
.cs-item.on{background:var(--p-raise);color:var(--p-text);font-weight:600}
.cs-item.on::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--p-gold);
}
.cs-item .pill{margin-left:auto;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:20px;font-family:'IBM Plex Mono',monospace}
.cs-item .pill.red{background:rgba(226,85,99,.16);color:var(--p-bad)}
.cs-item .pill.amber{background:rgba(224,163,58,.16);color:var(--p-warn)}
.cs-sidefoot{padding:12px 16px;border-top:1px solid var(--p-line);font-size:10px;color:var(--p-faint);line-height:1.5}

/* principal */
.cs-main{min-width:0;display:flex;flex-direction:column;min-height:0;position:relative}
.cs-top{
  display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--p-line);
  background:rgba(14,17,22,.82);flex-wrap:wrap;row-gap:8px;
}
.cs-top .crumb{font-size:10px;color:var(--p-faint);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1px}
.cs-top h3{font-size:15.5px;font-weight:700;letter-spacing:-.015em;margin:0;font-family:'Archivo',sans-serif;line-height:1.2;color:var(--p-text)}
.cs-chips{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cs-chip{
  display:inline-flex;align-items:center;gap:6px;font-size:10.5px;padding:5px 10px;border-radius:20px;
  border:1px solid var(--p-line2);background:var(--p-panel);color:var(--p-dim);
  font-family:'IBM Plex Mono',ui-monospace,monospace;white-space:nowrap;
}
.cs-chip .dot{width:6px;height:6px;border-radius:50%;flex:0 0 6px;background:var(--p-faint);transition:background .3s,box-shadow .3s}
.cs-chip .si{display:none}
.cs-chip.on .dot{background:var(--p-ok);box-shadow:0 0 0 3px rgba(61,214,140,.13)}
.cs-chip.on .no{display:none}
.cs-chip.on .si{display:inline}
.cs-chip.fijo .dot{background:var(--p-ok);box-shadow:0 0 0 3px rgba(61,214,140,.13)}

.cs-scroll{padding:22px 24px 40px;flex:1;min-height:0}
.cs-aviso{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--p-line2);border-left:2px solid var(--p-warn);
  background:linear-gradient(90deg,rgba(224,163,58,.07),transparent 70%);
  padding:11px 14px;border-radius:0 9px 9px 0;margin-bottom:18px;
}
.cs-aviso b{color:var(--p-text);font-weight:600}
.cs-aviso p{font-size:11.8px;color:var(--p-dim);margin:2px 0 0}

.cs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.cs-kpi{background:var(--p-panel);border:1px solid var(--p-line);border-radius:11px;padding:14px 15px;position:relative;overflow:hidden}
.cs-kpi::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:linear-gradient(90deg,var(--p-gold-dim),transparent 60%);opacity:.5;
}
.cs-kpi .lab{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--p-faint);font-weight:600}
.cs-kpi .val{font-size:26px;font-weight:700;letter-spacing:-.035em;margin:6px 0 2px;font-family:'IBM Plex Mono',monospace;color:var(--p-text)}
.cs-kpi .delta{font-size:11px;font-family:'IBM Plex Mono',monospace;transition:opacity .4s}
.cs-kpi .delta.up{color:var(--p-ok)}
.cs-kpi .delta.down{color:var(--p-bad)}
.cs-kpi .delta[data-espera]{opacity:0}
.cs-kpi .delta[data-espera].on{opacity:1}

.cs-grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-bottom:12px}
.cs-card{background:var(--p-panel);border:1px solid var(--p-line);border-radius:11px;overflow:hidden}
/* Cabecera de tarjeta. Es un div y no un <header> porque styles.css fija
   todos los <header> de la web a la ventana. */
.cs-cab{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--p-line)}
.cs-cab h4{font-size:12.5px;font-weight:600;letter-spacing:-.005em;margin:0;font-family:'Archivo',sans-serif;color:var(--p-text)}
.cs-cab .tag{margin-left:auto;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--p-faint);font-weight:600;white-space:nowrap}
.cs-card .body{padding:14px 15px}
.cs-card .body p{font-size:12.2px;color:var(--p-dim);line-height:1.6;margin:0}
.cs-card .body p+p{margin-top:10px}
.cs-card .body p b{color:var(--p-text);font-weight:600}
.cs-card .nota{font-size:11px;color:var(--p-faint);margin-top:10px;line-height:1.55}

.cseo table{width:100%;border-collapse:collapse;font-size:12px}
.cseo th{
  text-align:left;padding:8px 15px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-faint);font-weight:600;border-bottom:1px solid var(--p-line);background:var(--p-panel2);
}
.cseo td{padding:9px 15px;border-bottom:1px solid rgba(38,46,57,.55);vertical-align:middle;color:var(--p-text)}
.cseo tr:last-child td{border-bottom:0}
.cseo th.r,.cseo td.r{text-align:right}
.cseo th.c,.cseo td.c{text-align:center}
.cseo td.url{color:var(--p-dim);font-size:11.5px}
.cseo td.url b,.cseo td b{color:var(--p-text);font-weight:600}
.cseo .bar{height:3px;border-radius:3px;background:var(--p-line2);overflow:hidden;margin-top:5px}
.cseo .bar span{display:block;height:100%;border-radius:3px;background:var(--p-gold)}
.cs-badge{
  display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:600;padding:3px 7px;border-radius:5px;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;white-space:nowrap;
}
.b-ok{background:rgba(61,214,140,.12);color:var(--p-ok)}
.b-bad{background:rgba(226,85,99,.13);color:var(--p-bad)}
.b-warn{background:rgba(224,163,58,.13);color:var(--p-warn)}
.b-off{background:var(--p-raise);color:var(--p-dim)}
.b-info{background:rgba(91,141,239,.13);color:var(--p-info)}

/* filas que se verifican con el scroll: mientras no toca, muestran «pendiente» */
tr[data-en] .cs-badge{display:none}
tr[data-en] .cs-badge.pend{display:inline-flex}
tr[data-en].ok .cs-badge{display:inline-flex}
tr[data-en].ok .cs-badge.pend{display:none}

.cs-btn{
  display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 'Archivo',sans-serif;
  padding:8px 12px;border-radius:7px;background:var(--p-gold);color:#0E1116;border:0;
}
.cs-btn.ghost{background:transparent;border:1px solid var(--p-line2);color:var(--p-dim)}
.cs-progress{height:3px;border-radius:3px;background:var(--p-line2);overflow:hidden;margin:12px 15px 0}
.cs-progress span{display:block;height:100%;width:62%;background:var(--p-gold)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .cseo{grid-template-columns:1fr;--p-side:0}
  .cs-side{display:none}
  /* minmax(0,1fr) y no 1fr: la fila de pestañas sin salto de línea inflaría el
     ancho mínimo de la columna y la sacaría de la pantalla. */
  .vis-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start;gap:16px;padding-top:84px}
  .vis-copy{min-width:0}
  .vis-tabs{min-width:0;max-width:100%}
  .vis-copy h2{font-size:clamp(1.55rem,5.4vw,2.2rem);margin:14px 0 14px}
  .vis-tabs{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .vis-tabs::-webkit-scrollbar{display:none}
  /* La fila de pestañas cruza los canales iluminados del delta: con .5 la
     inactiva se quedaba en 4,22:1, así que la ficha se cierra más. */
  .vis-tab{width:auto;white-space:nowrap;padding:8px 12px;font-size:.86rem;border:1px solid var(--line);background:rgba(6,6,8,.86)}
  .vis-tab::before{display:none}
  .vis-tab.on{border-color:rgba(249,178,51,.5)}
  .vis-leads{min-height:4.4em;margin-top:12px}
  .vis-lead{font-size:.9rem;max-width:none}
  .vis-marco{margin-block:0 0;border-radius:14px 14px 0 0;border-bottom:0}
  .vis-velo{background:linear-gradient(180deg,rgba(6,6,8,.9) 0%,rgba(6,6,8,.7) 50%,rgba(6,6,8,.3) 100%)}
  .cs-kpis{grid-template-columns:repeat(2,1fr)}
  .cs-grid2{grid-template-columns:1fr}
  .cs-chips{display:none}
  .cs-top{padding:12px 16px}
  .cs-scroll{padding:16px 16px 30px}
  .cs-vista{padding:16px 16px 30px}
  .logro{grid-template-columns:1fr;gap:22px}
  .logro:nth-child(even) .logro__vis{order:0}
  .logro__vis{--w:440px;--f:.8}
  .cs-recorte{right:-4%;top:12%}
  .vit-marco{width:calc(100% - 20px)}
}
@media (max-width:640px){
  .vit-copy{padding-top:100px}
  .vit-copy h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .vit-acciones .btn{width:100%}
  .cs-kpi .val{font-size:22px}
  .cseo table{font-size:11px}
  .cseo th,.cseo td{padding:8px 10px}
  .cambio-texto{font-size:clamp(1.3rem,6vw,1.7rem)}
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .cambio-texto .fr{opacity:1}
  .vit-marco{transform:none}
  .fondo{transform:none}
  [data-fondo="abrir"]{clip-path:none}
  .cs-vista,.vis-lead,.vis-tab,.vis-tab::before{transition:none}
}