/* ═══════════════════════════════════════════════════════════════════════════
   AriseReach · web pública
   Réplica del diseño de Claude Design (octubre 2026) con clases en lugar de
   estilos en línea. Fuentes servidas desde el propio dominio.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
    src: url('fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --fondo: #FBFAFE;
    --fondo-2: #F4F1FB;
    --superficie: #FFFFFF;
    --tinta: #14101F;
    --texto: #1B1726;
    --texto-art: #2A2436;
    --suave: #5C5567;
    --suave-2: #8A8395;
    --acento: #6C47FF;
    --acento-hover: #5B36EE;
    --acento-suave: #E9E1FF;
    --acento-claro: #C8B8FF;
    --linea: #E6E1F0;
    --linea-2: #D6CFE6;
    --linea-3: #F0ECF7;
    --oscuro: #14101F;
    --oscuro-2: #1B1726;
    --oscuro-linea: #2C2540;
    --oscuro-texto: #ECE7F8;
    --oscuro-suave: #A79EC2;
    --verde: #1F9D55;
    --verde-suave: #E3F4EA;
    --ambar: #C98A09;
    --rojo: #D6453C;
    --rojo-suave: #FBE7E5;
    --coral: #E8897F;
    --sans: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sombra-panel: 0 1px 0 rgba(20,16,31,.04), 0 30px 60px -30px rgba(60,40,140,.28);
    --sombra-hover: 0 14px 30px -18px rgba(60,40,140,.3);
    --sombra-cierre: 0 30px 60px -40px rgba(60,40,140,.3);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); }
img { max-width: 100%; }
button { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.solo-lector { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.saltar:focus { top: 12px; color: #fff; }

/* ── Estructura ─────────────────────────────────────────────────────────── */
.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.seccion { padding: 96px 0; }
.seccion--88 { padding: 88px 0; }
.seccion--104 { padding: 104px 0; }
.seccion--80 { padding: 80px 0; }
.seccion--alt { background: var(--fondo-2); }
.seccion--oscura { background: var(--oscuro); color: var(--oscuro-texto); }
.seccion--cab { padding: 56px 0 72px; }
.seccion--sin-arriba { padding-top: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 440px)), 1fr)); gap: var(--gap, 20px); }
.rejilla--relleno { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 340px)), 1fr)); }
.centrado { align-items: center; }
.arriba { align-items: start; }
.abajo { align-items: end; }
.pila { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 20px); }
.lista-limpia { list-style: none; margin: 0; padding: 0; }

/* ── Tipografía ─────────────────────────────────────────────────────────── */
.h1, .h2, .h3 { font-weight: 800; color: var(--tinta); margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 22px; }
.h1--m { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.04; }
.h1--s { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; }
.h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.035em; }
.h2--m { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; }
.h2--s { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.03em; }
.h2--cierre { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.06; }
.h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.3; }
.h3--l { font-size: 24px; letter-spacing: -0.025em; }
.seccion--oscura .h2, .seccion--oscura .h1 { color: #fff; }
.lead { font-size: 18.5px; color: var(--suave); max-width: 60ch; margin: 0; text-wrap: pretty; }
.texto { font-size: 17.5px; color: var(--suave); max-width: 56ch; margin: 0; text-wrap: pretty; }
.texto + .texto { margin-top: 14px; }
.texto strong { color: var(--tinta); }
.suave { color: var(--suave); }
.acento { color: var(--acento); }
.gris { color: var(--suave-2); }
.mono { font-family: var(--mono); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.etiqueta { font-family: var(--mono); font-size: 12px; color: var(--suave-2); }
.etiqueta--acento { color: var(--acento); font-weight: 700; font-size: 13px; }
.nota { font-family: var(--mono); font-size: 11.5px; color: var(--suave-2); margin: 10px 0 0; }
.aviso-ejemplo { font-size: 14px; color: var(--suave-2); font-style: italic; }
.mb-0 { margin-bottom: 0; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-28 { margin-bottom: 28px; }
.mb-40 { margin-bottom: 40px; }
.mb-44 { margin-bottom: 44px; }
.mt-28 { margin-top: 28px; }

/* ── Botones y enlaces ──────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--acento); color: #fff;
    font-weight: 800; font-size: 17px; padding: 15px 24px; border-radius: 12px; border: 0; cursor: pointer;
    box-shadow: 0 10px 24px -12px rgba(108,71,255,.7);
    transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.btn:hover { background: var(--acento-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(108,71,255,.8); }
.btn--s { font-size: 16px; padding: 13px 22px; border-radius: 11px; }
.btn--bloque { display: block; text-align: center; font-weight: 700; font-size: 16px; padding: 13px; border-radius: 11px; box-shadow: none; }
.btn--borde { background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); box-shadow: none; }
.btn--borde:hover { background: var(--tinta); color: #fff; box-shadow: none; }
.btn--oscuro { background: var(--tinta); box-shadow: none; }
.btn--oscuro:hover { background: #000; }
.enlace { font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; }
.enlace--subrayado { color: var(--tinta); border-bottom: 1.5px solid var(--linea-2); padding-bottom: 2px; }
.enlace--subrayado:hover { color: var(--acento); border-color: var(--acento); }
.enlace--oscuro { color: var(--acento-claro); }
.enlace--oscuro:hover { color: #fff; }
.chip-enlace { font-weight: 700; font-size: 15px; color: var(--tinta); border: 1px solid var(--linea); background: var(--fondo); border-radius: 9px; padding: 8px 14px; transition: transform 150ms ease, border-color 150ms ease; }
.chip-enlace:hover { transform: translateY(-2px); border-color: var(--acento); color: var(--acento); }
.chip-enlace--blanco { background: #fff; border-color: var(--linea-2); padding: 9px 14px; }
.icono { flex-shrink: 0; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 26px; }
.tarjeta--18 { border-radius: 18px; padding: 32px; }
.tarjeta--elevable { transition: transform 150ms ease, box-shadow 150ms ease; }
.tarjeta--elevable:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
a.tarjeta { display: flex; color: var(--texto); }
a.tarjeta:hover { color: var(--texto); }
.tarjeta--pila { display: flex; flex-direction: column; gap: 14px; }
.tarjeta-pie { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--linea-3); }
.chapa-ejemplo { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ambar); border: 1px solid var(--ambar); border-radius: 5px; padding: 2px 6px; }
.chapa { display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--acento); background: var(--acento-suave); padding: 3px 9px; border-radius: 6px; }
.logo-caja { align-self: flex-start; height: 44px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 8px; display: flex; align-items: center; background: #fff; max-width: 180px; }
.logo-caja img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; }
.logo-caja--l { height: 48px; max-width: 200px; }
.logo-caja--l img { height: 32px; }
.logo-caja--xl { height: 56px; max-width: 240px; }
.logo-caja--xl img { height: 40px; }

/* ── Migas ─────────────────────────────────────────────────────────────── */
.migas { font-family: var(--mono); font-size: 12.5px; color: var(--suave-2); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; line-height: 1.5; }
.migas a { color: var(--suave-2); }
.migas a:hover { color: var(--acento); }
.migas [aria-current] { color: var(--tinta); }

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.cabecera {
    position: sticky; top: 0; z-index: 40;
    background: rgba(251,250,254,.88);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    padding: 18px 0;
    transition: padding 200ms ease, border-color 200ms ease;
}
.cabecera.desplazada { padding: 10px 0; border-bottom-color: var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 28px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); flex-shrink: 0; }
.marca:hover { color: var(--tinta); }
.marca__icono { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(160deg, #7B5CFF, #5B36EE); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: -0.02em; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nombre { font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.marca__nombre span { color: var(--acento); }
.marca__by { font-family: var(--mono); font-size: 10.5px; color: var(--suave-2); margin-top: 3px; }
.nav { display: flex; gap: 26px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.nav a { color: var(--texto); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--acento); }
.cabecera__der { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.idioma { font-family: var(--mono); font-size: 12.5px; display: flex; gap: 6px; color: var(--suave-2); }
.idioma strong { color: var(--tinta); font-weight: 700; }
.idioma a { color: var(--suave-2); }
.cabecera__cta { background: var(--acento); color: #fff; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 10px; white-space: nowrap; transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.cabecera__cta:hover { background: var(--acento-hover); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(108,71,255,.6); }
.hamburguesa { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--linea); background: #fff; place-items: center; cursor: pointer; color: var(--tinta); }
.volver { font-weight: 700; font-size: 15px; color: var(--texto); display: inline-flex; align-items: center; gap: 8px; }
.nav-movil { display: none; max-width: 1200px; margin: 12px auto 4px; padding: 8px 24px 12px; flex-direction: column; gap: 2px; font-weight: 700; font-size: 18px; border-top: 1px solid var(--linea); }
.nav-movil a { color: var(--tinta); padding: 10px 0; }
.cabecera.abierta .nav-movil { display: flex; }
@media (max-width: 1079px) {
    .nav, .cabecera .idioma { display: none; }
    .hamburguesa { display: grid; }
}
.nav-movil .nav-movil__cta { display: none; }
@media (max-width: 480px) {
    .cabecera .cabecera__cta { display: none; }
    .nav-movil .nav-movil__cta { display: block; margin-top: 8px; text-align: center; background: var(--acento); color: #fff; border-radius: 10px; padding: 12px; }
    .cabecera__fila { gap: 12px; }
    .cabecera__der { gap: 10px; }
}

/* ── Hero de portada ───────────────────────────────────────────────────── */
.hero { padding: 72px 0 56px; }
.hero .rejilla { --min: 480px; gap: 56px; }
.hero__h1 { margin-bottom: 22px; }
.hero__lead { max-width: 56ch; margin: 0 0 32px; }
.hero__nota { font-family: var(--mono); font-size: 12.5px; color: var(--suave-2); margin: 20px 0 0; }
.banda-cifras { margin-top: 64px; }
.banda-cifras__rejilla { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.banda-cifras__item { padding: 24px 4px; }
.banda-cifras__num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); }
.banda-cifras__txt { color: var(--suave); font-size: 15.5px; }

/* ── Bloques de la portada ─────────────────────────────────────────────── */
.tarjeta-dolor { display: flex; flex-direction: column; gap: 12px; }
.tarjeta-dolor__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tarjeta-dolor .h3 { margin: 0; }
.tarjeta-dolor p { margin: 0; color: var(--suave); font-size: 16px; }
.tarjeta-dolor .tarjeta-pie { color: var(--tinta); font-size: 15.5px; font-weight: 700; }
.pie-bloque { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; font-size: 14.5px; color: var(--suave); }
.pie-bloque span { max-width: 70ch; }
.pie-bloque a { font-weight: 700; }
.cabeza-seccion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 48px; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 20px; }
.paso { display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid var(--linea); border-radius: 18px; background: #fff; }
.paso__num { font-family: var(--mono); font-size: 13px; color: var(--acento); font-weight: 700; }
.paso .h3 { font-size: 24px; letter-spacing: -0.025em; margin: 6px 0 8px; }
.paso p { margin: 0; color: var(--suave); font-size: 16.5px; max-width: 52ch; }
.paso .pn { margin-top: auto; }
.lista-numerada li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--linea-3); font-size: 16.5px; color: var(--texto); }
.lista-numerada li span { font-family: var(--mono); font-size: 12px; color: var(--suave-2); font-variant-numeric: tabular-nums; width: 22px; flex-shrink: 0; }
.tu-parte { background: var(--acento); color: #fff; border-radius: 18px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 320px; }
.tu-parte__frase { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 800; margin: 0 0 18px; text-wrap: balance; }
.tu-parte p:last-child { margin: 0; font-size: 16px; color: #F1ECFF; max-width: 40ch; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); border: 1px solid var(--linea); border-radius: 18px; background: #fff; overflow: hidden; }
.dos-columnas > div { padding: 32px; }
.dos-columnas > div + div { background: var(--fondo); border-left: 1px solid var(--linea); }
.dos-columnas h3 { font-family: var(--mono); font-size: 13px; font-weight: 700; margin: 0 0 18px; letter-spacing: 0; }
.vinetas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16.5px; color: var(--texto); }
.vinetas li { display: flex; gap: 12px; }
.vinetas li::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--acento); margin-top: 10px; flex-shrink: 0; }
.vinetas--oscuras li::before { border-radius: 99px; background: var(--tinta); }
.lista-checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-radius: 18px; background: #fff; overflow: hidden; }
.lista-checks li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 22px; border-top: 1px solid var(--linea-3); font-size: 16.5px; color: var(--texto); }
.lista-checks li:first-child { border-top: 0; }
.lista-checks svg { margin-top: 3px; }
.lista-iconos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16.5px; }
.lista-iconos li { display: flex; gap: 12px; }
.lista-iconos svg { margin-top: 3px; }
.tabla-cifras { background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; font-size: 16.5px; }
.tabla-cifras__fila { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,30%); align-items: center; gap: 8px 12px; padding: 15px 24px; border-top: 1px solid var(--linea-3); }
.tabla-cifras__fila:first-child { border-top: 0; }
.tabla-cifras__v { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.tabla-cifras__n { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--suave-2); }
.tabla-cifras--s { border-radius: 14px; font-size: 15.5px; }
.tabla-cifras--s .tabla-cifras__fila { grid-template-columns: minmax(0,1fr) auto minmax(0,35%); padding: 12px 20px; }
.tabla-cifras--s .tabla-cifras__v { font-size: 15.5px; }
.tabla-cifras--s .tabla-cifras__n { font-size: 12px; }
@media (max-width: 560px) {
    .tabla-cifras__fila { grid-template-columns: minmax(0,1fr) auto; }
    .tabla-cifras__n { grid-column: 1 / -1; text-align: left; }
}
.pildora { font-family: var(--mono); font-size: 12.5px; color: var(--suave); border: 1px solid var(--linea-2); border-radius: 99px; padding: 5px 12px; background: #fff; }

/* Casos */
.tarjeta-caso { position: relative; flex-direction: column; gap: 18px; padding: 22px; }
.tarjeta-caso .chapa-ejemplo { position: absolute; top: 14px; right: 14px; }
.tarjeta-caso__cifra { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); line-height: 1.1; }
.tarjeta-caso__desc { font-size: 16px; color: var(--texto); font-weight: 700; margin-top: 4px; }
.tarjeta-caso__pie { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea-3); display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--suave-2); }
.tarjeta-caso--l { gap: 22px; padding: 28px; border-radius: 18px; }
.tarjeta-caso--l:hover { box-shadow: 0 18px 36px -20px rgba(60,40,140,.32); }
.tarjeta-caso__cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tarjeta-caso__tit { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.025em; color: var(--tinta); text-wrap: balance; }
.tres-cifras { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid var(--linea-3); }
.tres-cifras b { display: block; font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.tres-cifras b.acento { color: var(--acento); }
.tres-cifras span { font-size: 13px; color: var(--suave-2); }
.pie-mono { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--suave-2); }

/* Precios (resumen en portada) */
.pack { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.pack--destacado { border: 2px solid var(--acento); padding: 27px; box-shadow: 0 24px 48px -28px rgba(108,71,255,.55); position: relative; }
.pack__chapa { position: absolute; top: -12px; left: 26px; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: #fff; background: var(--acento); padding: 3px 10px; border-radius: 6px; }
.pack h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); margin: 0; }
.pack__para { margin: 4px 0 0; color: var(--suave); font-size: 15.5px; }
.pack__precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pack__precio b { font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: -0.04em; color: var(--tinta); }
.pack__precio span { font-size: 14.5px; color: var(--suave-2); }
.pack dl { margin: 0; display: flex; flex-direction: column; font-size: 15px; }
.pack dl div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linea-3); }
.pack dt { color: var(--suave); }
.pack dd { margin: 0; color: var(--tinta); font-weight: 700; text-align: right; }
.pack dd.num { font-family: var(--mono); }
.pack .btn--bloque { margin-top: auto; }
.pie-precios { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 14.5px; color: var(--suave); }
.pie-precios a { font-weight: 700; }

/* FAQ con <details>: funciona sin JavaScript. */
.faq { border-top: 1px solid var(--linea); min-width: 0; }
.faq--alt { border-color: var(--linea-2); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq--alt details { border-color: var(--linea-2); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; color: var(--tinta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex-shrink: 0; transition: transform 200ms ease; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: -6px 0 22px; color: var(--suave); font-size: 16.5px; max-width: 62ch; text-wrap: pretty; }
.faq h3 { margin: 0; font: inherit; }

/* Cierre */
.cierre { background: #fff; border: 1px solid var(--linea); border-radius: 24px; padding: clamp(32px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 36px; align-items: end; box-shadow: var(--sombra-cierre); }
.cierre--s { padding: clamp(32px, 6vw, 64px); gap: 32px; box-shadow: none; }
.cierre p { margin: 0 0 26px; color: var(--suave); font-size: 17.5px; max-width: 48ch; }

.banda-prueba { background: var(--oscuro); color: var(--oscuro-texto); border-radius: 24px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px 48px; align-items: center; box-shadow: var(--sombra-cierre); }
.banda-prueba p { margin: 16px 0 0; color: var(--oscuro-suave); font-size: 17.5px; max-width: 56ch; }
.banda-prueba .btn { justify-self: start; }
@media (min-width: 900px) { .banda-prueba .btn { justify-self: end; } }

/* Banda oscura (entregabilidad) */
.seccion--oscura .texto { color: var(--oscuro-suave); }

/* ── Cómo funciona ─────────────────────────────────────────────────────── */
.indice-etapas { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 13px; }
.indice-etapas a { display: block; padding: 7px 12px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; color: var(--texto); }
.indice-etapas a:hover { border-color: var(--acento); color: var(--acento); }
.etapa { scroll-margin-top: 70px; }
.etapa .h2 { margin: 8px 0 18px; }
.estados { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 16.5px; max-width: 56ch; }
.estados li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; align-items: baseline; }
.estado { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.estado--no { color: var(--rojo); background: var(--rojo-suave); }
.estado--fuera { color: var(--ambar); background: #FBF0D9; }
.estado--si { color: var(--verde); background: var(--verde-suave); }

/* ── Para quién ────────────────────────────────────────────────────────── */
.encaje-resultado { border: 1px solid var(--linea); background: #fff; border-radius: 14px; padding: 20px 22px; transition: border-color 200ms ease; }
.encaje-resultado.encaja { border-color: var(--verde); }
.encaje-resultado.no-encaja { border-color: var(--rojo); }
.pips { display: flex; gap: 6px; margin-bottom: 12px; }
.pips span { flex: 1; height: 6px; border-radius: 3px; background: var(--linea); transition: background 200ms ease; }
.pips span.si { background: var(--verde); }
.pips span.no { background: var(--rojo); }
.encaje-resultado p { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--tinta); }
.encaje-resultado .btn { display: none; }
.encaje-resultado.encaja .btn { display: inline-flex; }
.pregunta-encaje { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 24px; }
.pregunta-encaje__cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.pregunta-encaje h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); flex: 1 1 260px; }
.pregunta-encaje h3 span { font-family: var(--mono); font-size: 13px; color: var(--acento); margin-right: 10px; }
.pregunta-encaje p { margin: 12px 0 0; color: var(--suave); font-size: 16px; max-width: 62ch; }
.si-no { display: flex; border: 1px solid var(--linea-2); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.si-no button { font-weight: 700; font-size: 14.5px; padding: 8px 18px; border: 0; cursor: pointer; background: #fff; color: var(--texto); transition: background 150ms ease, color 150ms ease; }
.si-no button + button { border-left: 1px solid var(--linea-2); }
.si-no button[data-v="si"][aria-pressed="true"] { background: var(--verde); color: #fff; }
.si-no button[data-v="no"][aria-pressed="true"] { background: var(--rojo); color: #fff; }
.pegajoso { position: sticky; top: 110px; }
.oscuro-caja { background: var(--oscuro); color: var(--oscuro-texto); border-radius: 18px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.oscuro-caja .h2 { color: #fff; }
.oscuro-caja p { margin: 0; color: var(--oscuro-suave); font-size: 16.5px; }

/* ── Precios ───────────────────────────────────────────────────────────── */
.banda-oferta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--oscuro); color: var(--oscuro-texto); border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; font-size: 15.5px; }
.banda-oferta__chapa { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--tinta); background: var(--acento-claro); padding: 3px 8px; border-radius: 5px; }
.banda-oferta__texto { flex: 1 1 420px; }
.banda-oferta strong { color: #fff; }
.banda-oferta__plazas { font-family: var(--mono); font-size: 13px; color: var(--acento-claro); }
.desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 14px 24px 4px; }
.tabla-packs { min-width: 860px; display: grid; grid-template-columns: minmax(150px, .8fr) repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--linea); border-radius: 18px; }
.tabla-packs > div { padding: 16px 22px; border-bottom: 1px solid var(--linea-3); font-size: 15.5px; color: var(--texto); }
.tabla-packs .th { padding: 24px 22px; border-bottom-color: var(--linea); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); }
.tabla-packs .rh { font-family: var(--mono); font-size: 12px; color: var(--suave-2); }
.tabla-packs .dest { background: #F6F2FF; border-left: 2px solid var(--acento); border-right: 2px solid var(--acento); border-bottom-color: #EAE2FF; }
.tabla-packs .th.dest { border-top: 2px solid var(--acento); border-radius: 14px 14px 0 0; margin-top: -14px; padding-top: 36px; position: relative; }
.tabla-packs .th.dest span { position: absolute; top: 10px; left: 22px; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #fff; background: var(--acento); padding: 2px 8px; border-radius: 5px; letter-spacing: 0; }
.tabla-packs .precio { padding: 20px 22px; border-bottom: 0; }
.tabla-packs .precio b { display: block; font-family: var(--mono); font-size: 38px; font-weight: 700; letter-spacing: -0.04em; color: var(--tinta); line-height: 1.1; }
.tabla-packs .precio b small { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--suave-2); letter-spacing: 0; }
.tabla-packs .precio > span { font-size: 14px; color: var(--suave-2); }
.tabla-packs .boton { padding: 0 22px 24px; border-bottom: 0; }
.tabla-packs .boton.dest { border-bottom: 2px solid var(--acento); border-radius: 0 0 14px 14px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.linea-tiempo li { padding: 0 24px 0 0; margin-bottom: 28px; }
.linea-tiempo__marca { display: flex; align-items: center; margin-bottom: 18px; }
.linea-tiempo__marca span:first-child { width: 14px; height: 14px; border-radius: 99px; background: #fff; border: 3px solid var(--acento); flex-shrink: 0; }
.linea-tiempo__marca span:last-child { flex: 1; height: 2px; background: var(--linea-2); }
.linea-tiempo b { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--acento); margin-bottom: 8px; }
.linea-tiempo p { margin: 0; font-size: 16px; color: var(--texto); }
.garantia__sub { font-family: var(--mono); font-size: 13px; color: var(--acento); font-weight: 700; margin-bottom: 10px; }
.garantia h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: var(--tinta); margin: 0 0 12px; }
.garantia p { margin: 0; color: var(--suave); font-size: 16.5px; }
.frase-fuerte { margin: 28px 0 0; font-size: 19px; font-weight: 700; color: var(--tinta); max-width: 60ch; }

/* ── Entregabilidad / Cumplimiento ─────────────────────────────────────── */
.capa { background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 26px 28px; display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 8px 20px; }
.capa__n { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--linea-2); line-height: 1; }
.capa h3 { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); }
.capa p { margin: 0; color: var(--suave); font-size: 16.5px; max-width: 72ch; }
.capa__extra { grid-column: 1 / -1; margin-top: 14px; }
@media (max-width: 560px) { .capa { grid-template-columns: 1fr; } }
.medidor { height: 10px; border-radius: 4px; opacity: .85; }
.medidor__marcas { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--suave-2); margin-top: 6px; gap: 6px; }
.medidor__cifra { font-family: var(--mono); font-size: 32px; font-weight: 700; color: var(--tinta); margin: 6px 0 14px; }
.paradas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--oscuro-linea); border-radius: 16px; overflow: hidden; background: var(--oscuro-2); }
.paradas li { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-top: 1px solid var(--oscuro-linea); font-family: var(--mono); font-size: 14.5px; color: var(--oscuro-texto); }
.paradas li:first-child { border-top: 0; }
.paradas li::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--coral); flex-shrink: 0; }
.ley { list-style: none; margin: 0; padding: 0; }
.ley li .etiqueta--acento { font-size: 12.5px; margin-bottom: 12px; }
.ley li p { margin: 0; font-size: 16.5px; color: var(--texto); text-wrap: pretty; }
.medidas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.medidas li { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 40px; padding: 26px 0; border-bottom: 1px solid var(--linea); }
.medidas h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); display: flex; gap: 14px; }
.medidas h3 span { font-family: var(--mono); font-size: 14px; color: var(--acento); padding-top: 5px; }
.medidas p { margin: 0; color: var(--suave); font-size: 16.5px; max-width: 62ch; }
.no-aqui li { display: flex; gap: 12px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; font-size: 17px; }
.no-aqui svg { margin-top: 3px; }

/* ── Comparativa ───────────────────────────────────────────────────────── */
.tabla-comp { min-width: 900px; display: grid; grid-template-columns: minmax(150px, .75fr) repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; }
.tabla-comp > div { padding: 14px 20px; border-bottom: 1px solid var(--linea-3); font-size: 15px; color: var(--texto); }
.tabla-comp .th { padding: 20px; border-bottom-color: var(--linea); }
.tabla-comp .th b { display: block; font-weight: 800; font-size: 17px; color: var(--tinta); }
.tabla-comp .th span { font-family: var(--mono); font-size: 12px; color: var(--suave-2); }
.tabla-comp .rh { font-family: var(--mono); font-size: 12px; color: var(--suave-2); }
.tabla-comp .nos { background: #F6F2FF; border-bottom-color: #EAE2FF; font-weight: 700; color: var(--tinta); }
.tabla-comp .th.nos span { color: var(--acento); }
.tabla-comp > div:nth-last-child(-n+4) { border-bottom: 0; }

/* ── Casos (ficha) ─────────────────────────────────────────────────────── */
.ficha { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border: 1px solid var(--linea); border-radius: 14px; background: #fff; overflow: hidden; }
.ficha div { padding: 16px 20px; border-right: 1px solid var(--linea-3); }
.ficha dt { font-family: var(--mono); font-size: 11.5px; color: var(--suave-2); }
.ficha dd { margin: 2px 0 0; font-weight: 700; color: var(--tinta); }
.hicimos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea-2); }
.hicimos li { padding: 14px 0; border-bottom: 1px solid var(--linea-2); display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 14px; }
.hicimos a { font-family: var(--mono); font-size: 12.5px; font-weight: 700; padding-top: 3px; }
.hicimos span { font-size: 16.5px; color: var(--texto); }
.cita { margin: 0; background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 32px; }
.cita blockquote { margin: 0; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.35; letter-spacing: -0.02em; font-weight: 700; color: var(--tinta); text-wrap: pretty; }
.cita figcaption { margin-top: 20px; display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--suave); }
.avatar { width: 40px; height: 40px; border-radius: 99px; background: var(--acento-suave); color: var(--acento); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.avatar--solido { background: var(--acento); color: #fff; }
.otros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; font-family: var(--mono); font-size: 12.5px; }
.otros a { padding: 7px 12px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; color: var(--texto); }
.otros a:hover { border-color: var(--acento); color: var(--acento); }

/* ── Blog ──────────────────────────────────────────────────────────────── */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros button { font-weight: 700; font-size: 15px; padding: 8px 16px; border-radius: 99px; cursor: pointer; border: 1px solid var(--linea); background: #fff; color: var(--texto); transition: background 150ms ease, color 150ms ease; }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.filtros button span { font-family: var(--mono); font-size: 12px; opacity: .7; }
.tarjeta-post { flex-direction: column; gap: 14px; }
.tarjeta-post .chapa { align-self: flex-start; }
.tarjeta-post h2 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--tinta); text-wrap: balance; }
.tarjeta-post p { margin: 0; font-size: 15.5px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta-post .pie-mono { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--linea-3); }
.tarjeta-post--pronto { background: var(--fondo); border-style: dashed; }
.tarjeta-post--pronto h2 { color: var(--suave); }
[hidden] { display: none !important; }
.articulo { max-width: 760px; margin: 0 auto; padding: 48px 24px 40px; font-size: 18px; line-height: 1.7; }
.borrador { display: flex; align-items: center; gap: 10px; background: #FBF0D9; border: 1px solid #EBCB85; color: #7A5205; border-radius: 10px; padding: 10px 14px; font-family: var(--mono); font-size: 12.5px; margin-bottom: 32px; line-height: 1.5; }
.articulo__h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 800; color: var(--tinta); margin: 18px 0 24px; text-wrap: balance; }
.autor-linea { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--suave); margin-bottom: 36px; line-height: 1.4; }
.autor-linea a { font-weight: 700; color: var(--tinta); }
.caja-blanca { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 22px 24px; }
.resumen { margin-bottom: 32px; }
.resumen p { margin: 0; font-size: 17.5px; color: var(--tinta); }
.indice { border-left: 2px solid var(--linea); padding: 4px 0 4px 18px; margin-bottom: 40px; }
.indice ol { margin: 0; padding-left: 18px; font-size: 16px; display: flex; flex-direction: column; gap: 4px; }
.cuerpo h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.03em; font-weight: 800; color: var(--tinta); margin: 48px 0 14px; scroll-margin-top: 90px; }
.cuerpo p { margin: 0 0 18px; color: var(--texto-art); }
.cuerpo .dato { margin: 28px 0; }
.dato__fila { display: flex; flex-wrap: wrap; gap: 24px 40px; }
.dato__num { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.dato__txt { font-size: 14.5px; color: var(--suave); }
.fuentes { margin: 44px 0 0; }
.fuentes ul { margin: 0; padding-left: 18px; font-size: 15.5px; display: flex; flex-direction: column; gap: 6px; }
.pilar { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--oscuro); color: var(--oscuro-texto); border-radius: 14px; padding: 22px 24px; transition: transform 150ms ease; }
.pilar:hover { transform: translateY(-2px); color: #fff; }
.pilar small { display: block; font-family: var(--mono); font-size: 12px; color: var(--oscuro-suave); }
.pilar b { font-weight: 800; font-size: 19px; color: #fff; }
.relacionado { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 18px 20px; font-weight: 800; font-size: 16.5px; line-height: 1.35; color: var(--tinta); transition: transform 150ms ease; }
.relacionado:hover { transform: translateY(-2px); color: var(--tinta); }
.bio { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea); display: flex; gap: 16px; align-items: flex-start; }
.bio .avatar { width: 52px; height: 52px; font-size: 17px; }
.bio p { margin: 0; font-size: 15.5px; color: var(--suave); line-height: 1.6; }
.cta-articulo { margin-top: 44px; background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.cta-articulo p { margin: 0; font-weight: 800; font-size: 19px; color: var(--tinta); max-width: 30ch; line-height: 1.3; }
.lista-autor { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; }
.lista-autor li { border-top: 1px solid var(--linea-3); }
.lista-autor li:first-child { border-top: 0; }
.lista-autor a, .lista-autor .pronto { display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 8px 20px; align-items: baseline; padding: 18px 24px; color: var(--texto); transition: background 150ms ease; }
.lista-autor a:hover { background: var(--fondo); color: var(--texto); }
.lista-autor .pronto { color: var(--suave); }
.lista-autor .tema { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--acento); }
.lista-autor .titulo { font-size: 17px; font-weight: 700; color: var(--tinta); line-height: 1.35; }
.lista-autor .pronto .titulo { color: var(--suave); }
.lista-autor .fecha { font-family: var(--mono); font-size: 12px; color: var(--suave-2); white-space: nowrap; }
@media (max-width: 640px) { .lista-autor a, .lista-autor .pronto { grid-template-columns: 1fr; } }
.avatar-xl { width: 112px; height: 112px; border-radius: 99px; background: var(--acento); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 40px; letter-spacing: -0.03em; }
.datos-autor { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 20px; }
.datos-autor b { display: block; font-family: var(--mono); font-size: 30px; font-weight: 700; color: var(--tinta); line-height: 1.1; }
.datos-autor span { font-size: 14.5px; color: var(--suave); }

/* ── Contacto ──────────────────────────────────────────────────────────── */
.contacto { max-width: 1200px; margin: 0 auto; padding: 56px 24px 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: start; }
.que-traer { border: 1px solid var(--linea); border-radius: 14px; background: #fff; padding: 20px 22px; max-width: 48ch; }
.que-traer p { margin: 0; font-size: 17px; color: var(--tinta); font-weight: 700; }
.canal { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 14px 18px; color: var(--tinta); transition: transform 150ms ease, border-color 150ms ease; }
.canal:hover { transform: translateY(-2px); color: var(--tinta); border-color: var(--acento); }
.canal--wa:hover { border-color: #25D366; }
.canal__icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--acento-suave); }
.canal--wa .canal__icono { background: #25D366; }
.canal small { display: block; font-size: 13px; color: var(--suave-2); line-height: 1.35; }
.canal b { font-weight: 800; font-size: 17px; line-height: 1.35; }
.calendario { border: 1px solid var(--linea); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: var(--sombra-cierre); }
.calendario__cab { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linea); font-family: var(--mono); font-size: 12px; color: var(--suave); }
.calendario__cab span:first-child { color: var(--tinta); }
.calendario__cab span:last-child { margin-left: auto; }
.calendario__cuerpo { height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 32px; background: var(--fondo); }
.calendario__cuerpo p { margin: 0; max-width: 36ch; font-size: 16px; color: var(--suave); }
.calendario iframe { display: block; width: 100%; height: 620px; border: 0; }
.desplegable { margin-top: 20px; border-top: 1px solid var(--linea); }
.desplegable summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; font-size: 17px; font-weight: 800; color: var(--tinta); }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary svg { transition: transform 200ms ease; }
.desplegable[open] summary svg { transform: rotate(180deg); }
.formulario { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.formulario label span.opcional { font-weight: 500; color: var(--suave-2); }
.formulario input:not([type="checkbox"]), .formulario textarea { font: inherit; padding: 12px 14px; border: 1px solid var(--linea-2); border-radius: 10px; background: #fff; font-size: 16px; font-weight: 500; color: var(--texto); outline-color: var(--acento); }
.formulario textarea { resize: vertical; }
.formulario .casilla { flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--texto); }
.formulario .casilla input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--acento); flex-shrink: 0; }
.formulario .error { color: var(--rojo); font-size: 13.5px; font-weight: 600; }
.formulario .btn { align-self: flex-start; }
.formulario__legal { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--suave-2); }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso-error { background: var(--rojo-suave); color: #8E2A24; border-radius: 10px; padding: 12px 14px; font-size: 15px; margin-bottom: 16px; }
.gracias { max-width: 720px; margin: 0 auto; padding: 120px 24px; }
.gracias__icono { width: 52px; height: 52px; border-radius: 14px; background: var(--verde-suave); display: grid; place-items: center; margin-bottom: 28px; }

/* ── Legal ─────────────────────────────────────────────────────────────── */
.legal { max-width: 780px; margin: 0 auto; padding: 48px 24px 96px; font-size: 17px; line-height: 1.7; }
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.pestanas a { font-weight: 700; font-size: 14.5px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--linea); background: #fff; color: var(--texto); }
.pestanas a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.legal h1 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 800; color: var(--tinta); margin: 0 0 12px; }
.legal section { margin-bottom: 32px; scroll-margin-top: 90px; }
.legal h2 { font-size: 23px; line-height: 1.25; letter-spacing: -0.025em; font-weight: 800; color: var(--tinta); margin: 0 0 10px; }
.legal p { margin: 0 0 14px; color: var(--texto-art); }
.legal .recuadro { background: #fff; border: 1px solid var(--linea-2); border-radius: 14px; padding: 6px 22px 8px; }
.legal .recuadro p { margin: 14px 0; }
.tabla-cookies { min-width: 620px; display: grid; grid-template-columns: 1.1fr .9fr .8fr 1.6fr; background: #fff; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; font-size: 14.5px; }
.tabla-cookies > div { padding: 12px 16px; border-bottom: 1px solid var(--linea-3); }
.tabla-cookies .th { font-family: var(--mono); font-size: 12px; color: var(--suave-2); border-bottom-color: var(--linea); }
.tabla-cookies .n { font-family: var(--mono); font-size: 13px; color: var(--tinta); }
.tabla-cookies .f { color: var(--suave); }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie { background: var(--fondo-2); border-top: 1px solid var(--linea); padding: 64px 0 28px; font-size: 15px; color: var(--texto); }
.pie__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 36px; }
.pie__frase { margin: 16px 0 0; color: var(--suave); max-width: 30ch; }
.pie__tit { font-family: var(--mono); font-size: 12px; color: var(--suave-2); margin-bottom: 14px; }
.pie__enlaces { display: flex; flex-direction: column; gap: 9px; }
.pie__enlaces a { color: var(--texto); }
.pie__enlaces a:hover { color: var(--acento); }
.pie address { font-style: normal; color: var(--suave); display: flex; flex-direction: column; gap: 4px; }
.pie address span:first-child { color: var(--texto); }
.pie address a { color: var(--suave); }
.pie__ia { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 14px; color: var(--suave); }
.pie__ia a { font-weight: 700; font-size: 13.5px; color: var(--tinta); border: 1px solid var(--linea-2); background: #fff; border-radius: 99px; padding: 5px 12px; }
.pie__ia a:hover { border-color: var(--acento); color: var(--acento); }
.pie__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; color: var(--suave-2); }
.pie__legal a, .pie__legal button { color: var(--suave); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.pie__legal a:hover, .pie__legal button:hover { color: var(--acento); }
.pie__legal span { margin-left: auto; }

/* WhatsApp */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 45; display: flex; align-items: center; height: 56px; border-radius: 99px; background: #25D366; color: #fff; padding: 0 16px; box-shadow: 0 10px 26px -10px rgba(20,16,31,.45); transition: bottom 250ms ease, transform 150ms ease; }
.wa:hover { transform: translateY(-2px); color: #fff; }
.wa span { overflow: hidden; white-space: nowrap; font-weight: 800; font-size: 15px; max-width: 0; margin-left: 0; transition: max-width 200ms ease, margin 200ms ease; }
.wa:hover span, .wa:focus-visible span { max-width: 120px; margin-left: 10px; }
body.con-cookies .wa { bottom: 96px; }
body.con-cookies.cookies-config .wa { bottom: 220px; }
@media (max-width: 699px) {
    body.con-cookies .wa { bottom: 170px; }
    body.con-cookies.cookies-config .wa { bottom: 380px; }
}

/* Cookies */
.cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid var(--linea); box-shadow: 0 -10px 30px -20px rgba(20,16,31,.25); color: var(--texto); }
.cookies__fila { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cookies__fila p { margin: 0; flex: 1 1 380px; font-size: 14.5px; }
.cookies__botones { display: flex; align-items: center; gap: 10px; }
.cookies__config { background: none; border: 0; font-size: 14.5px; font-weight: 700; color: var(--suave); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 8px 6px; }
.cookies__btn { min-width: 112px; font-size: 14.5px; font-weight: 700; padding: 10px 16px; border-radius: 9px; border: 1.5px solid var(--tinta); background: #fff; color: var(--tinta); cursor: pointer; }
.cookies__btn--si { background: var(--tinta); color: #fff; }
.cookies__opciones { max-width: 1200px; margin: 0 auto; padding: 0 24px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.cookies__opcion { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; font-size: 14px; background: #fff; text-align: left; color: var(--texto); }
button.cookies__opcion { cursor: pointer; font-family: var(--sans); }
.cookies__opcion span span { color: var(--suave); }
.interruptor { width: 38px; height: 22px; border-radius: 99px; background: var(--linea-2); position: relative; flex-shrink: 0; transition: background 150ms ease; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: #fff; transition: left 150ms ease; }
.interruptor--fijo::after, [aria-pressed="true"] .interruptor::after { left: 19px; }
[aria-pressed="true"] .interruptor { background: var(--acento); }
.cookies__guardar { justify-self: start; font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 9px; border: 1.5px solid var(--tinta); background: #fff; color: var(--tinta); cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   Paneles simulados (datos de ejemplo)
   Sin JavaScript se ven en su estado final. Con JavaScript arrancan vacíos y se
   animan una vez al entrar en pantalla (clase .pn-on), con la duración de cada
   elemento en --d (retardo) y --t (duración).
   ═══════════════════════════════════════════════════════════════════════════ */
.pn { font-family: var(--sans); color: var(--texto); line-height: 1.5; }
.pn-caja { background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: 16px; box-shadow: 0 20px 40px -30px rgba(60,40,140,.3); }
.pn-caja--suave { background: var(--fondo); box-shadow: none; border-radius: 12px; }
.pn-caja--16 { border-radius: 16px; padding: 0; box-shadow: var(--sombra-panel); }
.pn-oscuro { background: var(--oscuro-2); border: 1px solid var(--oscuro-linea); border-radius: 16px; color: var(--oscuro-texto); box-shadow: 0 30px 60px -30px rgba(20,16,31,.5); overflow: hidden; }
.pn-oscuro--plano { box-shadow: none; }
.pn-barra-titulo { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linea); font-family: var(--mono); font-size: 12px; color: var(--suave); }
.pn-oscuro .pn-barra-titulo { border-bottom-color: var(--oscuro-linea); color: var(--oscuro-suave); }
.pn-puntos { display: flex; gap: 5px; }
.pn-puntos span { width: 9px; height: 9px; border-radius: 99px; background: var(--linea); }
.pn-barra-titulo .pn-tit { margin-left: 6px; color: var(--tinta); font-weight: 500; }
.pn-oscuro .pn-tit { color: var(--oscuro-texto); margin-left: 0; }
.pn-estado { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pn-vivo { width: 7px; height: 7px; border-radius: 99px; background: var(--verde); display: inline-block; flex-shrink: 0; animation: pnPulso 2.2s ease-out infinite; }
@keyframes pnPulso { 0% { box-shadow: 0 0 0 0 rgba(31,157,85,.55); } 70% { box-shadow: 0 0 0 7px rgba(31,157,85,0); } 100% { box-shadow: 0 0 0 0 rgba(31,157,85,0); } }
.pn-mono { font-family: var(--mono); }
.pn-meta { font-family: var(--mono); font-size: 11.5px; color: var(--suave-2); }
.pn-meta--11 { font-size: 11px; }
.pn-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pn-total { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; color: var(--tinta); }
.pn-filas { display: flex; flex-direction: column; gap: 6px; }
.pn-pie { font-family: var(--mono); font-size: 11px; color: var(--suave-2); margin-top: 10px; }

/* Embudo */
.pn-embudo { padding: 22px 22px 8px; display: flex; flex-direction: column; gap: 18px; }
.pn-embudo__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 7px; }
.pn-embudo__cab span:first-child { font-size: 14.5px; font-weight: 700; color: var(--texto); }
.pn-embudo__cab .num { font-size: 15px; font-weight: 700; color: var(--tinta); }
.pn-embudo__cab .num.bueno { color: var(--verde); }
.pn-pista { height: 12px; border-radius: 4px; background: var(--fondo-2); overflow: hidden; }
.pn-barra { height: 100%; border-radius: 4px; background: var(--acento); width: var(--w); }
.pn-barra.bueno { background: var(--verde); }
.pn-embudo-pie { display: flex; justify-content: space-between; gap: 12px; padding: 12px 22px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--suave-2); }

/* Búsqueda */
.pn-fuente { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 9px 12px; }
.pn-caja .pn-fuente { background: var(--fondo); }
.pn-caja--suave .pn-fuente { background: #fff; }
.pn-fuente b { font-size: 14px; font-weight: 700; color: var(--texto); }
.pn-fuente small { font-size: 13px; color: var(--suave-2); }
.pn-fuente .num { font-size: 13px; color: var(--acento); font-weight: 700; }

/* Filtro IA */
.pn-empresa { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 9px 12px; }
.pn-caja .pn-empresa { background: var(--fondo); }
.pn-caja--suave .pn-empresa { background: #fff; }
.pn-empresa__nombre { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-empresa__motivo { grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px; color: var(--suave); }
.pn-chapa { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.pn-chapa--si { background: var(--verde-suave); color: var(--verde); }
.pn-chapa--no { background: var(--rojo-suave); color: var(--rojo); }
.pn-chapa--espera { background: var(--fondo-2); color: var(--suave-2); }
.pn-empresa.apta { border-color: #BFE5CD; }
.pn-empresa.descartada { opacity: .6; transform: translateX(10px); }
.pn-recuento .si { color: var(--verde); font-weight: 700; }
.pn-recuento .no { color: var(--rojo); font-weight: 700; }

/* A/B */
.pn-ab { display: flex; flex-direction: column; gap: 14px; }
.pn-ab__cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.pn-ab__cab > span:first-child { font-size: 14px; color: var(--texto); min-width: 0; }
.pn-ab__clave { font-family: var(--mono); font-weight: 700; color: var(--acento); margin-right: 8px; }
.pn-ab__cab .num { font-size: 13.5px; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.pn-ab .pn-pista { height: 10px; background: #EFEBF7; }
.pn-ab .pn-barra.b { background: #B9A6FF; }
.pn-ganador { height: 30px; margin-top: 12px; display: flex; align-items: center; }
.pn-ganador__si { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--acento); background: var(--acento-suave); padding: 5px 10px; border-radius: 7px; }
.pn-ganador__no { font-family: var(--mono); font-size: 12px; color: var(--suave-2); }

/* Respuesta */
.pn-hilo { display: flex; flex-direction: column; gap: 10px; }
.pn-correo { background: #fff; border: 1px solid var(--linea); border-radius: 9px; padding: 12px 14px; }
.pn-caja .pn-correo { background: var(--fondo); }
.pn-caja--suave .pn-correo { background: #fff; }
.pn-correo p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--suave); }
.pn-correo--resp { margin-left: 20px; }
.pn-correo--resp.etiquetada { border-color: #BFE5CD; }
.pn-correo--resp p { color: var(--texto); min-height: 63px; }
.pn-correo__cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 20px; }
.pn-cursor { display: inline-block; width: 1.5px; height: 15px; background: var(--acento); vertical-align: -2px; margin-left: 1px; opacity: 0; }
.pn-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.pn-acciones .pn-meta { margin-right: auto; }
.pn-pasar { font-weight: 700; font-size: 14px; border: 0; border-radius: 9px; padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; background: var(--acento); color: #fff; cursor: pointer; transition: background 200ms ease, transform 150ms ease; }
.pn-pasar:hover { transform: translateY(-2px); }
.pn-pasar.pasado { background: var(--verde-suave); color: var(--verde); cursor: default; transform: none; }

/* Salud */
.pn-salud { padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 22px; align-items: center; }
.pn-anillo { position: relative; width: 148px; height: 148px; margin: 0 auto; }
.pn-anillo svg { transform: rotate(-90deg); }
.pn-anillo__arco { stroke-dashoffset: var(--o); }
.pn-anillo__centro { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.pn-anillo__num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 38px; font-weight: 700; color: #fff; line-height: 1; }
.pn-anillo__txt { font-family: var(--mono); font-size: 11px; color: var(--oscuro-suave); margin-top: 4px; }
.pn-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pn-checks li { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13.5px; }
.pn-check { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; border: 1px solid; }
.pn-grafico { padding: 0 22px 20px; }
.pn-leyenda { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; color: var(--oscuro-suave); margin-bottom: 12px; }
.pn-leyenda span { display: flex; align-items: center; gap: 6px; }
.pn-leyenda i { width: 9px; height: 9px; border-radius: 2px; }
.pn-columnas { position: relative; height: 104px; }
.pn-tope { position: absolute; left: 0; right: 0; top: 9%; border-top: 1.5px dashed var(--coral); }
.pn-tope-txt { position: absolute; right: 0; top: 9%; transform: translateY(-120%); font-family: var(--mono); font-size: 10.5px; color: var(--coral); background: var(--oscuro-2); padding-left: 6px; }
.pn-columnas__fila { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 3px; }
.pn-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; }
.pn-col i { display: block; height: var(--h); }
.pn-col i:first-child { background: #4A3F6B; border-radius: 0 0 2px 2px; }
.pn-col i:last-child { background: #8C6BFF; border-radius: 2px 2px 0 0; }
.pn-eje { position: relative; height: 16px; margin-top: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--oscuro-suave); }
.pn-eje > span { position: absolute; white-space: nowrap; }
@media (max-width: 560px) { .pn-ancho { display: none; } }

/* Cadencia */
.pn-cadencia { padding: 20px 22px; }
.pn-cadencia__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--oscuro-suave); margin-bottom: 22px; }
.pn-cadencia__cab b { color: #fff; font-weight: 700; }
.pn-cadencia__cab .claro { color: var(--oscuro-texto); }
.pn-pista-dia { position: relative; height: 56px; }
.pn-pista-dia::before { content: ''; position: absolute; left: 0; right: 0; top: 27px; height: 1px; background: var(--oscuro-linea); }
.pn-punto { position: absolute; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 99px; }
.pn-pausa { position: absolute; top: -4px; bottom: -4px; left: 97.8%; width: 0; border-left: 1.5px dashed var(--coral); }
.pn-horas { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--oscuro-suave); margin-top: 10px; }
.pn-horas .coral { color: var(--coral); }

/* Ficha de campaña */
.pn-ficha { margin: 0; padding: 6px 16px 4px; }
.pn-ficha div { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea-3); font-size: 14px; }
.pn-ficha dt { font-family: var(--mono); font-size: 11.5px; color: var(--suave-2); padding-top: 2px; }
.pn-ficha dd { margin: 0; font-weight: 700; color: var(--texto); }
.pn-ficha dd.rojo { color: var(--rojo); }
.pn-niveles { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.pn-nivel__cab { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 5px; }
.pn-nivel__cab b { font-family: var(--mono); font-weight: 700; color: var(--acento); margin-right: 8px; }
.pn-nivel__cab b.gris { color: var(--suave-2); }
.pn-niveles .pn-pista { height: 8px; border-radius: 3px; }
.pn-niveles .pn-barra { border-radius: 3px; }

/* ── Estados discretos (el JavaScript los quita al empezar y los pone a su hora) ── */
.pn-cambia:not(.hecho) .despues { display: none; }
.pn-cambia.hecho .antes { display: none; }
.pn-empresa { transition: opacity 400ms ease, transform 400ms ease, border-color 300ms ease; }
.pn-checks li { color: #6B6383; transition: color 300ms ease; }
.pn-checks li .pn-check { background: transparent; border-color: #3A3252; transition: background 300ms ease, border-color 300ms ease; }
.pn-checks li .pn-check svg { opacity: 0; transition: opacity 300ms ease; }
.pn-checks li.hecho { color: var(--oscuro-texto); }
.pn-checks li.hecho .pn-check { background: var(--verde); border-color: var(--verde); }
.pn-checks li.hecho .pn-check svg { opacity: 1; }
.pn-etiqueta:not(.visible) { visibility: hidden; }
.pn-correo--resp { transition: border-color 300ms ease, opacity 300ms ease; }
.pn-ab .pn-barra, .pn-ab__clave { transition: background 300ms ease, color 300ms ease, width var(--t, 1000ms) cubic-bezier(.33,1,.68,1) var(--d, 0ms); }
.pn-ab.gana .pn-barra.b { background: var(--linea-2); }
.pn-ab.gana .pn-ab__clave.b { color: var(--suave-2); }
.pn-pasar:not(.listo) { background: #EFEBF7; color: var(--oscuro-suave); cursor: default; }
.pn-pasar:not(.listo):hover { transform: none; }
.pn-pausa-el { transition: opacity 300ms ease; }
.pn-pausa-el:not(.visible) { opacity: 0; }

/* ── Animación continua: estado inicial solo con JavaScript y sin reducción de movimiento ── */
@media (prefers-reduced-motion: no-preference) {
    .js [data-pn]:not(.pn-on) .pn-barra { width: 0; }
    .js [data-pn] .pn-barra { transition: width var(--t, 1000ms) cubic-bezier(.33,1,.68,1) var(--d, 0ms), background 300ms ease; }
    .js [data-pn]:not(.pn-on) .pn-col i { height: 0; }
    .js [data-pn] .pn-col i { transition: height 650ms cubic-bezier(.33,1,.68,1) var(--d, 0ms); }
    .js [data-pn]:not(.pn-on) .pn-aparece { opacity: 0; transform: scale(.3); }
    .js [data-pn] .pn-aparece { transition: opacity 250ms ease var(--d, 0ms), transform 250ms ease var(--d, 0ms); }
    .js [data-pn]:not(.pn-on) .pn-sube { opacity: .25; transform: translateY(4px); }
    .js [data-pn] .pn-sube { transition: opacity 300ms ease var(--d, 0ms), transform 300ms ease var(--d, 0ms); }
    .js [data-pn]:not(.pn-on) .pn-tenue { opacity: .15; }
    .js [data-pn] .pn-tenue { transition: opacity 300ms ease var(--d, 0ms); }
    .js [data-pn]:not(.pn-on) .pn-anillo__arco { stroke-dashoffset: 326.73; }
    .js [data-pn] .pn-anillo__arco { transition: stroke-dashoffset 1700ms cubic-bezier(.33,1,.68,1); }
    .js [data-pn]:not(.pn-on) .pn-correo--resp { opacity: .35; }
    .js [data-pn] .pn-correo--resp { transition: border-color 300ms ease, opacity 300ms ease 500ms; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}