/* ==========================================================
   Corporación DAMGE Consultores — hoja única del sitio público
   v1.8.0 (2026-09-25): «un libro contable bien llevado»

   Identidad del Brief de Diseño Web v1.0. Tema CLARO, 70 · 20 · 10
   (decisión del usuario; el brief dice 60 · 30 · 10):
     70 %  blanco                  lienzo, bandas y tarjetas (v1.9: sin
                                   bandas crema; el crema queda en rellenos)
     20 %  azul noche              cabecera, cabeceras de página, pie,
                                   UNA banda oscura por página como máximo
     10 %  oro                     botón principal, filetes y sellos

   Jerarquía tipográfica (v1.9): Playfair 700 SOLO en H1 y H2 (y la
   marca del pie). H3, cifras, precios y números de paso en Inter 600 con
   cifras de ancho fijo. Tamaños solo de la escala --t-*.

   Reglas del sistema (v1.8):
     · Todo color, sombra, radio y tamaño sale de un token de :root.
       Nada de hex sueltos fuera de los bloques de tokens.
     · UNA tarjeta (papel + filete + radio grande, plana; sube al pasar),
       UNA cabecera de página (.phead), UNA pestaña, UNA insignia (.pill),
       UNA familia de botones. Cambia la composición, no el material.
     · Profundidad por capas: filete de 1 px + elevación en tres niveles.
     · Todo lo continuo se apaga con prefers-reduced-motion y editando.

   Contrastes medidos con script (componiendo alpha):
     · oro #A16600 como TEXTO falla sobre marfil: para texto --acc-ink
       #8F5A00 (5,2 marfil · 5,8 blanco). #A16600 solo relleno (blanco
       encima 4,76).
     · éxito como texto: #177049 (5,7 marfil).

   ZONAS OSCURAS: las superficies azul noche (lista más abajo) REDEFINEN
   los tokens para sus hijos; una tarjeta, un botón o un enlace dentro
   se pinta bien sin reglas extra. Las constantes --c-* NO cambian en
   zona oscura (sirven para objetos que siempre son claros, como la
   nota blanca sobre el héroe).
   ========================================================== */

/* ---- Fuentes autohospedadas (brief 2.4). Solo latín: cubre á é í ó ú ñ ¿ ¡ ---- */
@font-face{font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display"; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/playfair-display-latin-700-normal.woff2) format("woff2")}

:root{
  /* ---- Papel: marfil cálido, nunca blanco puro de lienzo ---- */
  --bg:#FFFFFF;         /* lienzo blanco */
  --s-1:#FFFFFF;        /* tarjeta: blanca, la separa el filete */
  --s-2:#F5F0E5;        /* banda alterna, superficie elevada */
  --s-3:#ECE5D5;        /* hover / activo */
  --paper-2:#F5F0E5;
  --line:#E4DDCC;       /* filete decorativo */
  --line-2:#D2C9B4;     /* filete marcado */
  --line-3:#8A8374;     /* borde de campo: 3,6 sobre marfil (1.4.11) */
  --gris:#EEF1F5;       /* riel y columna del panel (v2.0) */

  /* ---- Oro: 10 % ---- */
  --acc:#A16600;        /* relleno · blanco encima 4,76 */
  --acc-2:#8A5700;      /* hover · blanco encima 6,10 */
  --acc-ink:#8F5A00;    /* oro como texto */
  --acc-soft:color-mix(in srgb,#A16600 8%,transparent);
  --acc-line:color-mix(in srgb,#A16600 34%,transparent);
  --on-acc:#FFFFFF;
  --gold-2:#D9BA47;     /* oro claro: filetes y sellos. PROHIBIDO como texto en claro */

  /* ---- Secundario: azul noche (v2.4.0). Antes celeste #4366BF: era un
     tercer color sin papel en la marca. Ahora la web es azul noche + oro. ---- */
  --sec:#0B1F4B;        /* 16,3 sobre blanco */
  --sec-2:#0B1F4B;
  --on-sec:#FFFFFF;
  --link:#0B1F4B;       /* va siempre subrayado: el color solo no basta */

  /* ---- Estados (solo mensajes del sistema) ---- */
  --risk:#C0392B;
  --ok:#177049;
  --warn:#C98A00;       /* solo relleno o icono */

  --fg:#1B2433;         /* tinta */
  --fg-dim:#5B6472;     /* pizarra · 5,7 marfil */
  --fg-dim-2:#5B6472;
  --wa:#25D366;         /* texto navy encima: 8,07 */
  --wa-2:#33E074;
  --navy:#0B1F4B;
  --video:#05070D;      /* fondo del reproductor */

  /* Constantes: no cambian dentro de una zona oscura */
  --c-white:#FFFFFF;
  --c-ink:#1B2433;
  --c-ink-2:#4A5361;
  --c-ok:#177049;
  --c-gold:#D9BA47;
  --c-sec:#4366BF;

  /* ---- Espaciado: saltos grandes entre secciones, cortos dentro ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-9:64px; --sp-10:96px;
  --gut:clamp(20px,4.4vw,56px);
  --maxw:1200px;
  --bandy:clamp(72px,9vw,136px);
  --bandy-t:clamp(40px,5vw,72px);
  --hdr-h:80px;
  --riel:112px;         /* menú lateral (v2.0) */

  /* ---- Radios: lenguaje suave ---- */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-pill:999px;

  /* ---- Elevación: filete primero, sombra solo para subir ---- */
  --e-1:0 1px 2px color-mix(in srgb,#0B1F4B 5%,transparent), 0 10px 28px -14px color-mix(in srgb,#0B1F4B 18%,transparent);
  --e-2:0 2px 6px color-mix(in srgb,#0B1F4B 6%,transparent), 0 28px 56px -24px color-mix(in srgb,#0B1F4B 30%,transparent);
  --e-3:0 40px 90px -30px color-mix(in srgb,#0B1F4B 55%,transparent);

  /* ---- Tipografía ---- */
  --f:"Inter",system-ui,Arial,sans-serif;
  --f-d:"Playfair Display",Georgia,serif;
  --t--2:.75rem;                                    /* 12 · insignias */
  --t--1:.875rem;                                   /* 14 · notas */
  --t-s:.9375rem;                                   /* 15 · texto de tarjeta */
  --t-0:clamp(1rem,.97rem + .15vw,1.0625rem);       /* 16 → 17 · cuerpo */
  --t-1:clamp(1.0625rem,1rem + .3vw,1.1875rem);     /* 17 → 19 */
  --t-2:clamp(1.3125rem,1.2rem + .5vw,1.5rem);      /* 21 → 24 · H3 */
  --t-3:clamp(1.875rem,1.35rem + 2.1vw,2.75rem);    /* 30 → 44 · H2, en todas las secciones */
  --t-4:clamp(2.25rem,1.5rem + 3vw,3.5rem);         /* 36 → 56 · H1 de página */
  --t-5:clamp(2.5rem,1.3rem + 4.4vw,4.5rem);        /* 40 → 72 · solo el H1 de la portada */
  --t-cifra:clamp(2.5rem,1.8rem + 2.6vw,3.5rem);    /* contadores */

  /* ---- Movimiento ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --d-state:150ms; --d-ui:260ms; --d-rev:640ms; --d-hero:900ms; --d-sec:900ms;
  --rise:20px;

  /* Rayado de libro contable (cabeceras de página) */
  /* Iconos planos: trazo azul noche sobre gris (en zona oscura, oro sobre tinte) */
  --ico-fg:#0B1F4B; --ico-bg:#EEF1F5;

  --rayado:repeating-linear-gradient(180deg,transparent 0 35px,color-mix(in srgb,#FFFFFF 4%,transparent) 35px 36px);
}
@media (max-width:767px){:root{--hdr-h:64px}}

/* ---- Zonas azul noche: redefinen los tokens para todo lo que contienen ---- */
.dk,.hdr,.hero,.foot,.modal__hd,.tutor,.ann,.cuenta__lado{
  --bg:#0B1F4B; --s-1:#12295C; --s-2:#183370; --s-3:#1F3D80; --paper-2:#0E2456;
  --line:color-mix(in srgb,#FFFFFF 14%,transparent); --line-2:color-mix(in srgb,#FFFFFF 24%,transparent); --line-3:color-mix(in srgb,#FFFFFF 42%,transparent);
  --acc:#D9BA47; --acc-2:#E6CB6A; --acc-ink:#D9BA47;    /* 8,43 sobre navy */
  --acc-soft:color-mix(in srgb,#D9BA47 14%,transparent); --acc-line:color-mix(in srgb,#D9BA47 42%,transparent);
  --on-acc:#0B1F4B;
  --sec:#FFFFFF; --on-sec:#0B1F4B;                       /* celeste sobre navy: PROHIBIDO texto */
  --link:#D9BA47;
  --risk:#FF9A8A; --ok:#6FDBA8;
  --fg:#FFFFFF; --fg-dim:#C5CEDF; --fg-dim-2:#A9B4CA;    /* 16,01 · 10,11 · 7,68 */
  --ico-fg:#D9BA47; --ico-bg:color-mix(in srgb,#FFFFFF 8%,transparent);
  color:var(--fg);
}

/* ---- Alias: los nombres viejos siguen valiendo (panel, editor) ---- */
:root,.dk,.hdr,.hero,.foot,.modal__hd,.tutor,.ann,.cuenta__lado{
  --ink:var(--bg); --ink-2:var(--s-1); --ink-3:var(--s-2);
  --paper:var(--bg); --card:var(--s-1);
  --hair-l:var(--line); --hair-l-2:var(--line-2);
  --hair-d:var(--line); --hair-d-2:var(--line-2);
  --hair-b:var(--line); --hair-b-2:var(--line-2);
  --on-ink:var(--fg); --on-ink-dim:var(--fg-dim);
  --on-paper:var(--fg); --on-paper-dim:var(--fg-dim);
  --brand:var(--acc); --brand-2:var(--acc-2);
  --on-brand:var(--on-acc); --on-brand-dim:var(--fg-dim);
  --brass:var(--acc-ink); --brass-ink:var(--acc-ink);
  --brass-line:var(--acc-line); --brass-soft:var(--acc-soft);
  --risk-ink:var(--risk); --ok-ink:var(--ok);
  --act:var(--link); --mark:var(--acc); --focus:var(--link);
  --r-xl:var(--r-lg); --shadow:var(--e-1);
}
@media (prefers-reduced-motion:reduce){
  :root{--d-state:1ms;--d-ui:1ms;--d-rev:1ms;--d-hero:1ms;--d-sec:1ms;--rise:0px}
}

/* ==========================================================
   BASE
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr-h) + var(--sp-6))}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f); font-size:var(--t-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; font-synthesis-weight:none;
}
img,video{max-width:100%; display:block}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-sm)}
::selection{background:color-mix(in srgb,var(--c-gold) 38%,transparent)}
main{overflow-x:clip}

/* Titulares (brief 2.4): H1 y H2 en Playfair 700; H3 y menores en Inter 600 */
h1,h2,h3,h4{margin:0; line-height:1.15; text-wrap:balance}
h1,h2{font-family:var(--f-d); font-weight:700; letter-spacing:-.012em}
h3,h4{font-weight:600; letter-spacing:-.012em; line-height:1.3}
.dim{color:var(--fg-dim)}
.num{font-variant-numeric:lining-nums tabular-nums}
/* Cifras y precios: Inter 600, del mismo ancho, nunca en Playfair */
.contador b,.metodo__n,.pcard__amt,.crs__p,.buy__amt,.eval b,.buybar__p,.pago-tarjeta__total b,.tarjeta b,.err-page b,.yo__av{
  font-family:var(--f)!important; font-weight:600!important; letter-spacing:-.025em; font-variant-numeric:lining-nums tabular-nums}
.ico{width:24px; height:24px; flex-shrink:0}
.dot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45; flex-shrink:0}
.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-999px; top:var(--sp-2); z-index:200; background:var(--acc); color:var(--on-acc); padding:10px 14px; border-radius:var(--r); font-weight:500}
.skip:focus{left:var(--sp-2)}
.txt-risk{color:var(--risk)}
.honeypot{position:absolute; left:-9999px}

/* ==========================================================
   ESTRUCTURA: bandas, cabeceras de sección, columnas
   ========================================================== */
.band{position:relative; isolation:isolate; overflow:clip; padding-block:var(--bandy); padding-inline:var(--gut)}
/* overflow:clip y no hidden: hidden rompe position:sticky (compra, aula). */
.band--paper{background:var(--bg); color:var(--fg)}
.band--paper2{background:var(--bg); color:var(--fg)}   /* v1.9: igual que --paper */
.band--gris{background:var(--gris); color:var(--fg)}    /* v2.0: Orbit alterna blanco y gris */
.band--tight{padding-block:var(--bandy-t)}
.band--pegada{padding-top:clamp(34px,4.4vw,54px)}
.band--sin{padding-block:0}

.lede{font-size:var(--t-1); line-height:1.55; max-width:52ch; color:var(--fg-dim)}
.lede--sm{font-size:var(--t--1); margin:0}
.nota-ed{font-size:var(--t--1); color:var(--fg-dim); margin-top:10px}
.nota-precio{max-width:70ch; margin:var(--sp-6) auto 0; text-align:center; font-size:var(--t-s); color:var(--fg-dim)}
.pie-nota{margin-top:var(--sp-7); text-align:center}
.h-3{font-size:var(--t-3); max-width:15ch}
.col{display:flex; flex-direction:column; gap:clamp(16px,2vw,22px)}
.sep{height:clamp(40px,6vw,72px)}
.centro{display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-top:clamp(28px,4vw,44px)}
.centro .btn .ico{width:20px; height:20px}

/* Cabecera de sección: filete de oro corto sobre el titular (el sello del libro) */
.sh{max-width:var(--maxw); margin:0 auto clamp(30px,4vw,52px)}
.sh h2{font-size:var(--t-3); max-width:24ch}
.sh h2::before,:is(.quienes__txt,.ideas__txt,.ficha__txt,.venta,.faq,.perfil > div) > h2::before{content:""; display:block; width:40px; height:2px; margin-bottom:var(--sp-5); background:linear-gradient(90deg,var(--acc),var(--gold-2)); border-radius:var(--r-pill)}
.sh .lede{margin-top:var(--sp-4); max-width:62ch}
.ceja + h2::before,.ceja + h1::before{display:none}
.sh--split{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,64px); align-items:end}
.sh--centro{text-align:center; display:flex; flex-direction:column; align-items:center}
.sh--centro h2,.sh--centro .lede{margin-inline:auto}
.sh--centro h2::before{margin-inline:auto}
.sh--centro .srv__ic{margin-bottom:var(--sp-4)}
.sh--pie{margin-top:clamp(40px,5vw,64px); margin-bottom:var(--sp-5)}

.dos{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px,4vw,56px); align-items:start}
.dos--centro{align-items:center}
.dos p{color:var(--fg-dim); line-height:1.6}
@media (max-width:860px){.dos,.sh--split{grid-template-columns:1fr; align-items:start}}

/* ==========================================================
   BOTONES: una familia, mismos estados en todas partes
   ========================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:10px 22px; border-radius:var(--r); font-weight:600; font-size:1rem;
  letter-spacing:-.005em; text-decoration:none; white-space:nowrap; border:2px solid transparent;
  transition:background var(--d-state) var(--ease-ui), border-color var(--d-state) var(--ease-ui), color var(--d-state) var(--ease-ui), box-shadow var(--d-ui) var(--ease-ui), transform var(--d-state) var(--ease-ui);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn .ico{width:18px; height:18px; flex-shrink:0}
/* Principal (brief 2.3): oro profundo en claro, oro claro con texto navy en oscuro */
.btn--brand{background:var(--acc); color:var(--on-acc)}
.btn--brand:hover{background:var(--acc-2); box-shadow:0 10px 24px -12px color-mix(in srgb,var(--acc-2) 70%,transparent)}
/* Secundario: borde celeste, se rellena al pasar (blanco en zona oscura) */
.btn--sec{background:transparent; color:var(--sec); border-color:var(--sec)}
.btn--sec:hover{background:var(--sec); color:var(--on-sec)}
.btn--ghost-l{border-color:var(--line-2); color:var(--fg); background:transparent}
.btn--ghost-l:hover{border-color:var(--line-3); background:var(--s-1)}
.btn--wa{background:var(--wa); color:var(--navy)}
.btn--wa:hover{background:var(--wa-2)}
.btn--ok{background:var(--c-ok); color:var(--c-white)}   /* fijo: en zona oscura --ok es verde claro */
.btn--ok:hover{background:color-mix(in srgb,var(--c-ok) 88%,var(--video))}
.btn--sm{min-height:44px; padding:8px 16px; font-size:var(--t-s)}
.btn--lg{min-height:56px; padding:14px 30px; font-size:var(--t-1)}
.btn--blk{width:100%}
.btn[aria-busy="true"]{cursor:progress}

/* ==========================================================
   INSIGNIAS: una sola forma (.pill, .estado, etiquetas del blog)
   ========================================================== */
.pill,.estado,.post__tipo,.post__cat,.chero__meta li,.art-tipo{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  font-size:var(--t--2); font-weight:600; letter-spacing:.02em; line-height:1.4; white-space:nowrap;
  border:1px solid transparent}
.pill--live,.pill--premium{background:var(--acc); color:var(--on-acc)}
.pill--rec{background:var(--navy); color:var(--c-white)}
.pill--gratis{background:var(--c-ok); color:var(--c-white)}
.pill--estado{background:var(--c-white); color:var(--navy)}
.estado{border-color:var(--line-2); color:var(--fg-dim); background:var(--s-1)}
.estado--ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent); color:var(--ok); background:color-mix(in srgb,var(--ok) 6%,var(--s-1))}
.estado--warn{border-color:var(--acc-line); color:var(--acc-ink); background:var(--acc-soft)}
.estado--risk{border-color:color-mix(in srgb,var(--risk) 40%,transparent); color:var(--risk); background:color-mix(in srgb,var(--risk) 5%,var(--s-1))}
.post__cat{background:var(--acc-soft); color:var(--acc-ink)}
.post__tipo{background:color-mix(in srgb,var(--sec) 10%,transparent); color:var(--sec-2)}
.post__tipo--norma{background:color-mix(in srgb,var(--navy) 8%,transparent); color:var(--navy)}
.art-tipo{background:var(--acc-soft); color:var(--acc-ink); border-color:var(--acc-line); margin-top:var(--sp-2)}

/* ==========================================================
   TARJETA: una sola. Papel, filete, radio grande, plana.
   Las que llevan a algún sitio suben al pasar y dibujan un
   filete de oro arriba.
   ========================================================== */
.srv,.pcard,.crs,.riesgo,.eleg,.testi,.pilares li,.aclara > div,.logos li,.eval li,.learn li,
.post,.tarjeta,.bloque,.contacto__datos,.cierre__form,.aula__side,.aula__mat,.examen fieldset,
.boletin,.art-norma,.validado,.cuenta-caja,.fusion__vs,.buy,.vacio,.opt,.mod,.agenda iframe{
  background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg)}
.srv,.pcard,.crs,.post{position:relative; isolation:isolate;
  transition:transform var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease-ui), border-color var(--d-ui) var(--ease-ui)}
.srv:hover,.pcard:hover,.crs:hover,.post:hover{border-color:var(--line-2); box-shadow:var(--e-2); transform:translateY(-4px)}
.srv::before,.pcard::before,.crs::before,.post::before{content:""; position:absolute; left:var(--sp-5); right:var(--sp-5); top:-1px; height:2px; z-index:3;
  background:linear-gradient(90deg,var(--acc),var(--gold-2)); border-radius:var(--r-pill);
  transform:scaleX(0); transform-origin:left; transition:transform 520ms var(--ease)}
.srv:hover::before,.pcard:hover::before,.crs:hover::before,.post:hover::before,.srv.in::before{transform:scaleX(1)}
/* Luz dorada bajo el cursor (app.js pone --mx/--my) */
.srv::after,.pcard::after,.crs::after,.post::after{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c-gold) 20%,transparent),transparent 60%);
  transition:opacity var(--d-ui) var(--ease-ui)}
.srv:hover::after,.pcard:hover::after,.crs:hover::after,.post:hover::after{opacity:1}
/* Inclinación: solo con ratón y con movimiento permitido (app.js) */
.inclina .srv:hover,.inclina .pcard:hover,.inclina .crs:hover{transform:translateY(-4px)}

/* Iconos (v2.4.0): TODOS planos, de linea, trazo 1.75. Antes habia placas
   «con volumen» (degradado, brillo, sombra) junto a iconos de linea: dos
   lenguajes. La placa queda como fondo plano gris; en zona oscura, tinte. */
.srv__ic,.riesgo__ic,.pcard__ic,.opt__i,.vacio__ic,.metodo__ic,.art-norma__ic{
  position:relative; width:56px; height:56px; border-radius:var(--r-lg); flex-shrink:0; display:grid; place-items:center;
  color:var(--ico-fg); background:var(--ico-bg)}
:is(.srv__ic,.riesgo__ic,.pcard__ic,.opt__i,.vacio__ic,.metodo__ic,.art-norma__ic) .ico{width:28px; height:28px; stroke-width:1.75; fill:none}
/* Iconos sueltos en listas: la misma placa, en pequeño */
.franja__l .ico,.valores .ico{width:32px; height:32px; padding:6px; border-radius:var(--r); color:var(--ico-fg); stroke-width:1.75;
  fill:none; background:var(--ico-bg)}

/* ==========================================================
   CABECERA DEL SITIO (v2.0, referencia: Anders CPA)
   .hdr   barra superior azul noche, fija: Mi cuenta · logo · WhatsApp
   .riel  columna gris fija a la izquierda: icono sobre el nombre
   v2.3: sin paneles; cada ítem lleva a su página. En móvil (<1024)
   el riel es el panel de la hamburguesa.
   ========================================================== */
.ann{background:var(--bg); color:var(--fg-dim); text-align:center; padding:10px var(--gut); font-size:var(--t--1); position:relative; z-index:70; border-bottom:1px solid var(--line)}
.ann b{color:var(--fg); font-weight:500}
.ann a:not(.btn){color:var(--acc-ink); text-decoration:none; font-weight:500; margin-left:var(--sp-2)}
.ann a:hover{text-decoration:underline; text-underline-offset:3px}

.hdr{position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:1px solid var(--line)}
.hdr__in{min-height:var(--hdr-h); padding:0 var(--gut) 0 0; display:grid; grid-template-columns:var(--riel) 1fr auto 1fr; align-items:center}
.hdr__in > *{grid-row:1}
.hdr__logo{grid-column:3}
.hdr__logo img{height:44px; width:auto; display:block}
.hdr__wa{grid-column:4; justify-self:end}
.hdr__burger{display:none; color:var(--fg); width:44px; height:44px; place-items:center}
.hdr__burger .ic-x,.menu-open .hdr__burger .ic-m{display:none}
.menu-open .hdr__burger .ic-x{display:block}

.riel{position:fixed; left:0; top:var(--hdr-h); bottom:0; z-index:55; width:var(--riel); overflow-y:auto; scrollbar-width:none;
  display:flex; flex-direction:column; padding:var(--sp-3) 0 var(--sp-6); background:var(--gris); border-right:1px solid var(--line)}
.riel__l,.riel__m{list-style:none; margin:0; padding:0}
.riel__i{display:flex; flex-direction:column; align-items:center; gap:6px; padding:15px var(--sp-2); text-align:center; text-decoration:none;
  font-size:.8125rem; line-height:1.25; font-weight:500; color:var(--fg);
  transition:background var(--d-state) var(--ease-ui), color var(--d-state) var(--ease-ui)}
.riel__i .ico{width:26px; height:26px; color:var(--sec); stroke-width:1.75; transition:color var(--d-state) var(--ease-ui)}
.riel__i:hover,.riel__i[aria-expanded="true"]{background:color-mix(in srgb,var(--c-sec) 12%,var(--gris))}
.riel__i[aria-current="page"],.riel__i[aria-expanded="true"]{background:var(--sec); color:var(--c-white)}
.riel__i[aria-current="page"] .ico,.riel__i[aria-expanded="true"] .ico{color:var(--c-white)}
.riel__m{margin-top:var(--sp-5); padding-top:var(--sp-5); position:relative; display:flex; flex-direction:column; gap:2px}
.riel__m::before{content:""; position:absolute; top:0; left:50%; width:56px; height:1px; translate:-50% 0; background:var(--line-3)}
.riel__m a{display:block; padding:7px var(--sp-2); text-align:center; font-size:var(--t--2); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim); text-decoration:none}
.riel__m a:hover{color:var(--fg)}
.riel__wa{display:none}
/* v2.8.0: un solo Ingresar bajo los seis items del riel (la barra superior
   solo lleva logo + WhatsApp); en movil, boton arriba del panel. Crear
   cuenta se ofrece dentro de /ingresar */
.riel__cuenta{margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line)}

/* v2.0.1: en escritorio con ratón el riel es una tira de iconos de 64 px
   que se abre ENCIMA del contenido al pasar el ratón o al llegar con Tab.
   Los nombres siguen en el árbol de accesibilidad (solo se desvanecen).
   En pantallas táctiles grandes se queda abierto (no hay "pasar"). */
@media (min-width:1024px) and (hover:hover){
  :root{--riel:64px}
  .riel{overflow-x:hidden; transition:width 220ms var(--ease), box-shadow 220ms var(--ease-ui)}
  .riel:hover,.riel:focus-within{width:248px; box-shadow:var(--e-3); transition-delay:90ms}
  .riel__i{flex-direction:row; justify-content:flex-start; gap:var(--sp-4); padding:14px 19px; text-align:left; white-space:nowrap; font-size:var(--t-s)}
  .riel__i span,.riel__m{opacity:0; transition:opacity 140ms var(--ease-ui)}
  .riel:is(:hover,:focus-within) :is(.riel__i span,.riel__m){opacity:1; transition-delay:140ms}
  .riel__m::before{left:19px; translate:none}
  .riel__m a{padding-left:19px; text-align:left; white-space:nowrap}
}

/* Con riel: el contenido empieza a su derecha */
@media (min-width:1024px){
  body:has(.riel) :is(main,.foot,.ann){margin-left:var(--riel)}
  body:has(.riel) .cookies{left:calc(var(--riel) + var(--sp-4))}
}
@media (max-width:1023px){
  .hdr__in{grid-template-columns:auto 1fr auto; padding-left:var(--gut)}
  .hdr__burger{display:grid; grid-column:1}
  .hdr__logo{grid-column:2; justify-self:center}
  .hdr__wa{display:none}
  .riel{display:none; right:0; width:auto; background:var(--c-white); padding:var(--sp-3) var(--gut) var(--sp-7)}
  .riel.abierto{display:flex}
  .riel__i{flex-direction:row; justify-content:flex-start; gap:14px; padding:var(--sp-4) var(--sp-3); font-size:1.0625rem; text-align:left; border-bottom:1px solid var(--line)}
  .riel__m{flex-direction:row; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); padding-top:var(--sp-5)}
  .riel__m::before{display:none}
  .riel__m a{padding:var(--sp-2) 0; text-align:left}
  .riel__wa{display:flex; margin-top:var(--sp-6)}
  .riel__cuenta{order:-1; display:flex; gap:var(--sp-3); margin:0 0 var(--sp-4); padding-top:var(--sp-2); border-top:0}
  .riel__cuenta > *{flex:1}
  .riel__cuenta .riel__i{justify-content:center; min-height:48px; padding:10px var(--sp-3); border:2px solid var(--line-2); border-radius:var(--r); font-size:1rem; font-weight:600}
}
@media (max-width:767px){ .hdr__logo img{height:36px} }

/* ==========================================================
   PIEZAS DE ORBIT (v2.0): ceja, trazo a mano, enlace subrayado,
   puntos de sección
   ========================================================== */
/* Ceja: la línea corta en mayúsculas sobre el titular */
.ceja{margin:0 0 var(--sp-4); font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1.4; color:var(--acc-ink)}

/* Trazo: un círculo o un subrayado dorado dibujado a mano sobre UNA palabra.
   app.js lo pone donde el titular diga data-trazo. Es decoración (una
   línea, no texto): el oro claro puede ir sobre blanco. */
.trazo{position:relative; display:inline-block; white-space:nowrap; isolation:isolate}
.trazo svg{position:absolute; z-index:-1; pointer-events:none; overflow:visible; fill:none; stroke:var(--c-gold); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.trazo--circulo svg{left:-9%; top:-14%; width:118%; height:128%}
.trazo--linea svg{left:-2%; bottom:-.2em; width:104%; height:.42em}
.trazo path{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.2s var(--ease) .25s}
.trazo.in path{stroke-dashoffset:0}

/* Enlace con subrayado de resaltador (Orbit: "HERE'S HOW") */
.subraya{display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:2px 2px 4px; font-size:var(--t-s); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--fg); text-decoration:none;
  background:linear-gradient(var(--c-gold),var(--c-gold)) 0 100% / 100% 3px no-repeat; transition:background-size var(--d-ui) var(--ease)}
a:hover > .subraya,a.subraya:hover{background-size:100% 42%}
.subraya .ico{width:18px; height:18px}

/* Puntos de sección a la derecha (portada; app.js los arma) */
.puntos{position:fixed; right:18px; top:50%; translate:0 -50%; z-index:50; display:flex; flex-direction:column; gap:6px; mix-blend-mode:difference}
.puntos a{display:grid; place-items:center; width:24px; height:24px}
.puntos a::before{content:""; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--c-white); transition:background var(--d-state) var(--ease-ui), transform var(--d-state) var(--ease-ui)}
.puntos a[aria-current="true"]::before{background:var(--c-white); transform:scale(1.2)}
.puntos a:hover::before{background:color-mix(in srgb,var(--c-white) 50%,transparent)}
@media (max-width:1023px){.puntos{display:none}}

/* Portada «una pantalla por paso» (?scroll=pantallas): prueba para elegir */
html:has(body.pantallas){scroll-snap-type:y mandatory; scroll-padding-top:var(--hdr-h)}
.pantallas main > section{min-height:calc(100svh - var(--hdr-h)); scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center}
.pantallas main > section > *{width:100%}
.pantallas main > section:is(.franja,.franja-logos){min-height:0; scroll-snap-align:none}
.pantallas .foot{scroll-snap-align:end}

/* ==========================================================
   CABECERA DE PÁGINA: una para todas las páginas interiores.
   Azul noche con rayado de libro, miga, H1 ancho y corto, lede.
   A la derecha: foto (.phead__media), ficha (.chero__media) o un
   sello con el icono de la página (.phead__sello).
   Tamaños: base (catálogos), --lg (servicios, .phero), --sm
   (legales, artículo, validar, libro), --xs (mi cuenta).
   ========================================================== */
.phead{position:relative; overflow:hidden; isolation:isolate; background:var(--bg);
  padding:clamp(48px,6vw,88px) var(--gut) clamp(44px,5vw,72px); border-bottom:1px solid var(--line)}
/* Fondo con vida (v1.9): tres luces que derivan despacio, en portada y cabeceras */
.portada::before{content:""; position:absolute; inset:-35% -15%; z-index:-1; pointer-events:none;
  background:radial-gradient(38% 46% at 18% 32%,color-mix(in srgb,var(--c-sec) 62%,transparent),transparent 70%),
    radial-gradient(30% 40% at 82% 22%,color-mix(in srgb,var(--c-gold) 34%,transparent),transparent 70%),
    radial-gradient(44% 50% at 62% 88%,color-mix(in srgb,var(--c-sec) 36%,transparent),transparent 70%);
  animation:aurora 26s ease-in-out infinite alternate}
@keyframes aurora{50%{transform:translate3d(5%,-4%,0) rotate(7deg) scale(1.08)} to{transform:translate3d(-5%,3%,0) rotate(-5deg) scale(1.03)}}
.phead::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; pointer-events:none;
  background:linear-gradient(90deg,var(--acc) 0 18%,transparent 18%)}
.phead__in{position:relative; max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,4vw,64px); align-items:center}
.phead__in > :only-child{grid-column:1 / -1}
.phead__txt{min-width:0}
.phead h1{font-size:var(--t-4); max-width:20ch; color:var(--fg)}
.phead .lede{margin-top:var(--sp-5); max-width:58ch; color:var(--fg-dim)}
.phead .portada__cta{margin-top:var(--sp-7)}
.phead__meta{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:var(--sp-5); color:var(--fg-dim); font-size:var(--t--1)}
.phead--sm{padding-block:clamp(40px,5vw,64px) clamp(36px,4vw,56px)}
.phead--sm h1{font-size:var(--t-3); max-width:26ch}
.phero{padding-block:clamp(60px,7.5vw,112px) clamp(52px,6.5vw,96px)}
.phero h1{max-width:22ch}

.crumb{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; font-size:var(--t--1); color:var(--fg-dim); margin-bottom:var(--sp-4)}
.crumb a{color:var(--link); font-weight:500; text-decoration:none; padding:5px 0; min-height:24px; display:inline-flex; align-items:center}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px}

/* El sello: un icono dentro de dos anillos, uno de ellos punteado que gira */
.phead__sello{justify-self:end; position:relative; width:clamp(168px,18vw,236px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  color:var(--acc-ink); background:var(--gris); border:1px solid var(--acc-line); box-shadow:inset 0 0 0 10px var(--bg), inset 0 0 0 11px var(--acc-line)}
.phead__sello::before{content:""; position:absolute; inset:-14px; border-radius:50%; border:1px dashed var(--acc-line); animation:gira 60s linear infinite}
.phead__sello .ico{width:38%; height:38%; stroke-width:1.75; fill:none}
@keyframes gira{to{transform:rotate(360deg)}}

/* Foto a la derecha: marco con un filete de oro desplazado */
.phead__media{margin:0; position:relative; justify-self:end; width:100%; max-width:460px}
.phead__media::before{content:""; position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--acc-line); border-radius:var(--r-lg); z-index:-1}
.phead__media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--e-3)}
@media (max-width:860px){
  .phead__in{grid-template-columns:1fr}
  .phead__sello{display:none}
  .phead__media{justify-self:start; max-width:520px}
}

/* Ficha de curso y de herramienta: la misma cabecera con la portada a la derecha */
.chero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.chero h1{font-size:var(--t-4)}
.chero__meta{list-style:none; margin:var(--sp-5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.chero__meta li{border-color:var(--line-2); background:var(--s-1); color:var(--fg); font-size:var(--t--1); font-weight:500; letter-spacing:0}
.chero__meta .ico{width:15px; height:15px; color:var(--acc-ink)}
.chero__vivo{margin-top:14px; font-weight:600; color:var(--acc-ink)}
.chero__media{position:relative}
.chero__media::before{content:""; position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--acc-line); border-radius:var(--r-lg); z-index:-1}
.chero__media img,.chero__media .yt{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-lg); display:block; box-shadow:var(--e-3)}
@media (max-width:980px){.chero{grid-template-columns:1fr}}

/* Mi cuenta: franja delgada con quien está conectado */
.phead--xs{padding-block:clamp(28px,3.4vw,40px)}
.phead--xs .phead__in{grid-template-columns:auto 1fr; gap:var(--sp-5)}
.phead--xs .phead__in > :only-child{grid-column:auto}
/* v2.8.0: la ruta va encima, a todo el ancho; asi el circulo se alinea con nombre y correo */
.phead--xs .phead__in{align-items:center; row-gap:var(--sp-3)}
.phead--xs .crumb{grid-column:1/-1; margin-bottom:0}
.yo__av{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--acc-soft); color:var(--acc); border:1px solid var(--acc-line);
  font-family:var(--f-d); font-weight:700; font-size:1.25rem}
.yo__t{font-family:var(--f); font-weight:600; font-size:var(--t-2); line-height:1.2}
.yo__m{font-size:var(--t--1); color:var(--fg-dim)}

/* ==========================================================
   PORTADA (brief 5.1)
   ========================================================== */
.portada{position:relative; overflow:hidden; isolation:isolate; background-color:var(--navy); background-image:var(--rayado); margin-top:calc(-1 * var(--hdr-h)); padding:calc(var(--hdr-h) + clamp(32px,5vw,64px)) var(--gut) 0}
.portada__in{position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,56px); align-items:end}
.portada__txt{padding-bottom:clamp(40px,6vw,88px)}
.portada h1{font-size:var(--t-4); max-width:20ch}
.portada__lede{margin-top:var(--sp-5); font-size:var(--t-1); line-height:1.55; max-width:54ch; color:var(--fg-dim)}
.portada__cta{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:28px}
.hero__k{display:inline-flex; align-items:center; gap:9px; margin:0 0 clamp(16px,2vw,22px); font-size:var(--t--1); font-weight:500; color:var(--fg-dim)}
.hero__k i{width:7px; height:7px; border-radius:2px; background:var(--acc); flex-shrink:0; display:block}
.sellos{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:var(--t-s); color:var(--fg-dim)}
.sellos li{display:flex; align-items:center; gap:var(--sp-2)}
.sellos .ico{width:18px; height:18px; color:var(--acc)}
.portada__foto{margin:0; position:relative; align-self:end}
.portada__foto img{position:relative; width:100%; max-width:520px; height:auto; margin-inline:auto}
@media (max-width:860px){
  .portada__in{grid-template-columns:1fr}
  .portada__txt{padding-bottom:0}
  .portada__foto img{max-width:340px}
}

/* Franja de confianza */
.franja{background:var(--s-1); border-bottom:1px solid var(--line); padding:clamp(20px,2.4vw,28px) var(--gut)}
/* v2.4.0: rejilla de 5, no flex: con flex-wrap quedaban 4 arriba y 1 solo abajo */
.franja__l{list-style:none; margin:0 auto; padding:0; max-width:var(--maxw); display:grid; grid-template-columns:repeat(5,auto); justify-content:space-between; gap:var(--sp-3) var(--sp-5)}
.franja__l li{display:flex; align-items:center; gap:10px; font-size:var(--t-s); font-weight:500; color:var(--fg)}
@media (max-width:1180px){.franja__l{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.franja__l{grid-template-columns:1fr}}

/* Contador: cifras en Playfair separadas por filetes, como columnas de un libro */
.contador{list-style:none; margin:0 auto; padding:0; max-width:var(--maxw); display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); text-align:center}
.contador li{padding:var(--sp-2) var(--sp-6)}
.contador li + li{border-left:1px solid var(--line)}
.contador b{display:block; font-size:var(--t-cifra); line-height:1.2; color:var(--navy); font-variant-numeric:tabular-nums}
.contador li > span{display:block; margin-top:10px; font-size:1rem; color:var(--fg-dim)}
/* Rodillos: cada dígito gira hasta el suyo (app.js). Sin JS se lee el número tal cual */
.odo{display:inline-flex; height:1.2em; line-height:1.2; overflow:hidden; vertical-align:top}
.odo__c{display:flex; flex-direction:column; transform:translateY(calc(var(--n,0) * -1.2em)); transition:transform 2s var(--ease); transition-delay:calc(var(--k) * 110ms)}
.odo__c > span{display:block; height:1.2em}
@media (max-width:560px){.contador li + li{border-left:0; border-top:1px solid var(--line); padding-top:var(--sp-5)}}

/* Quiénes somos */
.quienes{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.quienes h2{font-size:var(--t-3); max-width:20ch}
.quienes .lede{margin-top:18px}
.valores{list-style:none; margin:var(--sp-6) 0 28px; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.valores li{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 14px; border:1px solid var(--line); border-radius:var(--r-pill); background:var(--s-1); font-weight:500; font-size:var(--t-s)}
.valores li{padding-left:6px}
.frase{margin:0; padding:clamp(24px,3vw,40px); background:var(--s-2); border:1px solid var(--line); border-radius:var(--r-lg);
  font-family:var(--f); font-weight:600; font-size:var(--t-2); line-height:1.35; color:var(--navy)}
@media (max-width:860px){.quienes{grid-template-columns:1fr}}

/* Video de YouTube con fachada */
.yt{position:relative; display:block; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:var(--navy); color:var(--c-white); text-decoration:none}
.yt img{width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity var(--d-ui) var(--ease-ui)}
.yt:hover img{opacity:1}
.yt__play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:var(--acc); color:var(--c-white); display:grid; place-items:center; box-shadow:var(--e-2);
  transition:transform var(--d-ui) var(--ease)}
.yt:hover .yt__play{transform:translate(-50%,-50%) scale(1.06)}
.yt__play .ico{width:32px; height:32px}
.yt__t{position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px; font-weight:600; background:linear-gradient(0deg,color-mix(in srgb,var(--navy) 90%,transparent),transparent)}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt--vacio{display:grid; place-items:center; gap:var(--sp-2); align-content:center; color:var(--fg-dim); background:var(--s-2); border:1px dashed var(--line-2)}

/* ==========================================================
   SECCIONES DE SERVICIO
   ========================================================== */
/* Qué hacemos */
.srvs{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5)}
.srv{display:flex; flex-direction:column; gap:10px; padding:clamp(22px,2.4vw,28px); text-decoration:none; color:var(--fg)}
.srv__ic{margin-bottom:var(--sp-2)}
.srv h3{font-size:var(--t-1)}
.srv p{font-size:var(--t-s); color:var(--fg-dim); line-height:1.55}
.srv__m{margin-top:auto; padding-top:var(--sp-2); display:inline-flex; align-items:center; gap:6px; color:var(--link); font-weight:600; font-size:var(--t-s)}
.srv__m .ico{width:18px; height:18px; transition:transform var(--d-ui) var(--ease)}
.srv:hover .srv__m .ico{transform:translateX(3px)}
.srv--fijo:hover{transform:none; box-shadow:none; border-color:var(--line)}
.srv--fijo::before,.srv--fijo::after{display:none}
@media (max-width:980px){.srvs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.srvs{grid-template-columns:1fr}}

/* Comparativo: DAMGE con borde dorado y verificaciones; reactivo en gris */
.vs{max-width:var(--maxw); margin-inline:auto}
.vs table{width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-s)}
.vs th,.vs td{padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.vs thead th{font-family:var(--f); font-weight:600; font-size:1rem; border-bottom:0}
.vs tbody th{font-weight:600; color:var(--fg); width:22%}
.vs td .ico{width:18px; height:18px; margin-right:10px; vertical-align:-3px}
.vs .vs__r{color:var(--fg-dim); background:var(--s-1)}
.vs .vs__r .ico{color:var(--fg-dim)}
.vs .vs__d{background:var(--s-1); border-left:2px solid var(--acc); border-right:2px solid var(--acc); color:var(--fg)}
.vs .vs__d .ico{color:var(--acc)}
.vs thead .vs__d{border-top:2px solid var(--acc); border-radius:var(--r-lg) var(--r-lg) 0 0; color:var(--acc-ink)}
.vs tbody tr:last-child .vs__d{border-bottom:2px solid var(--acc)}
@media (max-width:760px){
  /* Movil: cada fila es una tarjeta; las dos respuestas una debajo de otra,
     a todo el ancho, con el nombre del enfoque encima (data-col). */
  .vs table,.vs tbody,.vs tr,.vs th,.vs td{display:block; width:auto}
  .vs thead{display:none}
  .vs tbody{display:grid; gap:var(--sp-3)}
  .vs tbody tr{background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
  .vs tbody th{width:auto; padding:var(--sp-4) var(--sp-4) 0; border:0; font-family:var(--f); font-size:var(--t--2); letter-spacing:.06em; text-transform:uppercase; color:var(--fg-dim)}
  .vs td{position:relative; padding:var(--sp-2) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 26px); border:0; font-size:var(--t-s); line-height:1.5}
  .vs td::before{content:attr(data-col); display:block; margin-bottom:2px; font-size:var(--t--2); font-weight:600}
  .vs td .ico{position:absolute; left:var(--sp-4); top:calc(var(--sp-2) + 1.4em)}
  .vs .vs__r{background:none}
  .vs .vs__d,.vs tbody tr:last-child .vs__d{border:0; border-top:1px solid var(--line); background:color-mix(in srgb,var(--acc) 7%,var(--s-1)); padding-top:var(--sp-3)}
  .vs .vs__d::before{color:var(--acc-ink)}
  .vs .vs__d .ico{top:calc(var(--sp-3) + 1.4em)}
}

/* Pilares */
/* v2.0 (Zarla "why us"): tarjetas numeradas. El número lo pone CSS */
.pilares{list-style:none; max-width:var(--maxw); margin:clamp(32px,4vw,52px) auto 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-4); counter-reset:pilar}
.pilares li{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-6) var(--sp-5); counter-increment:pilar}
.pilares li::before{content:counter(pilar); display:grid; place-items:center; width:40px; height:40px; margin-bottom:var(--sp-2); border-radius:50%; background:var(--navy); color:var(--c-gold); font-weight:600; font-variant-numeric:tabular-nums}
.pilares .ico{display:none}
.pilares b{font-weight:600; font-size:var(--t-1)}
.pilares span{font-size:var(--t-s); color:var(--fg-dim); line-height:1.5}
.pilares--3{grid-template-columns:repeat(3,1fr); margin-top:0}
@media (max-width:980px){.pilares{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.pilares--3{grid-template-columns:1fr}}
@media (max-width:760px){
  .pilares,.pilares--3{grid-template-columns:1fr; gap:var(--sp-5)}
  .pilares li{display:grid; grid-template-columns:40px 1fr; column-gap:var(--sp-4); row-gap:2px; padding:0; background:none; border:0; border-radius:0}
  .pilares li::before{grid-row:1 / span 2; margin:0}
  .pilares b{align-self:end}
}

/* Método (v2.0.1): rejilla de tarjetas compactas con un dibujo de línea por
   paso; en móvil, línea de tiempo vertical sin dibujos (brief 5.1, bloque 7). */
.metodo{list-style:none; max-width:var(--maxw); margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4)}
.metodo--4{grid-template-columns:repeat(4,1fr)}
.metodo li{position:relative; display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-5); background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg)}
.metodo__dib{width:100%; height:120px; margin-bottom:var(--sp-2); padding:var(--sp-2); background:var(--gris); border-radius:var(--r);
  fill:none; stroke:var(--navy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.metodo__dib .o{stroke:var(--c-gold); stroke-width:2.2}
.metodo__dib .r{fill:color-mix(in srgb,var(--c-gold) 30%,transparent)}
.metodo__dib .b{stroke:var(--navy); stroke-width:2}
.metodo__dib text{fill:var(--navy); stroke:none; font:600 9px var(--f); text-anchor:middle}
.metodo__dib text.i{text-anchor:start; font-weight:500; fill:var(--fg-dim)}
.metodo__n{font-size:var(--t--1); font-weight:600; letter-spacing:.08em; color:var(--acc-ink)}
.metodo h3{font-size:var(--t-1)}
.metodo p{font-size:var(--t-s); color:var(--fg-dim); line-height:1.5}
.metodo__fin{max-width:var(--maxw); margin:clamp(28px,4vw,44px) auto 0; display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); align-items:center; justify-content:center; text-align:center}
.metodo__fin b{font-size:var(--t-2); font-weight:600; color:var(--fg)}
@media (max-width:980px){.metodo,.metodo--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){
  .metodo,.metodo--4{grid-template-columns:1fr; gap:0}
  .metodo__dib{display:none}
  .metodo li{display:grid; grid-template-columns:40px 1fr; column-gap:var(--sp-4); row-gap:2px; padding:0 0 var(--sp-6); background:none; border:0; border-radius:0}
  .metodo li::before{content:""; position:absolute; left:19px; top:44px; bottom:4px; width:2px; background:var(--line-2)}
  .metodo li:last-child{padding-bottom:0}
  .metodo li:last-child::before{display:none}
  .metodo__n{grid-row:1 / span 2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--c-gold); letter-spacing:0}
  .metodo h3{align-self:center; margin-top:8px}
}

/* Planes (brief 5.2) */
.pcards{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); align-items:stretch; padding-top:14px}
.pcards--3{grid-template-columns:repeat(3,1fr)}
.pcard{display:flex; flex-direction:column; gap:var(--sp-3); padding:clamp(22px,2.4vw,30px)}
.pcard h3{font-family:var(--f); font-weight:600; font-size:var(--t-2)}
.pcard__para{font-size:var(--t-s); color:var(--fg-dim); line-height:1.5}
.pcard__precio{display:flex; flex-direction:column; gap:2px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pcard__desde{font-size:var(--t--1); color:var(--fg-dim)}
.pcard__amt{font-family:var(--f-d); font-weight:700; font-size:var(--t-3); line-height:1.1; color:var(--fg); font-variant-numeric:tabular-nums}
.pcard__amt--txt{font-size:var(--t-2)}
.pcard__per{font-size:var(--t--1); color:var(--fg-dim)}
.pcard__l{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:var(--t-s)}
.pcard__l li{display:flex; gap:10px; align-items:flex-start; line-height:1.45}
.pcard__l .ico{width:18px; height:18px; color:var(--acc); margin-top:2px}
.pcard .btn{margin-top:auto}
.pcard--rec{border:2px solid var(--acc); margin-top:-14px; padding-top:calc(clamp(22px,2.4vw,30px) + 14px); box-shadow:var(--e-1)}
.pcard__badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:var(--sp-1) 14px; border-radius:var(--r-pill); background:var(--acc); color:var(--on-acc); font-size:var(--t--1); font-weight:600; white-space:nowrap; z-index:4}
.pcard--prem{background:var(--bg); border-color:var(--acc-line)}
.pcard--prem h3{color:var(--acc)}
.pcard--medida{border:2px dashed var(--acc); background:var(--s-2)}
.selector-planes{display:none}
@media (max-width:760px){
  .selector-planes{display:flex; gap:4px; max-width:520px; margin:0 auto var(--sp-6); padding:4px; background:var(--s-1); border:1px solid var(--line-2); border-radius:var(--r-pill); overflow-x:auto; scrollbar-width:none}
  .selector-planes button{flex:1 0 auto; min-height:44px; padding:8px 10px; border-radius:var(--r-pill); font-size:var(--t--1); font-weight:600; color:var(--fg-dim); white-space:nowrap}
  .selector-planes button[aria-pressed="true"]{background:var(--navy); color:var(--c-white)}
  .pcards.con-selector{padding-top:14px}
  .pcards.con-selector > .pcard:not(.elegido){display:none}
}
@media (max-width:1080px){.pcards{grid-template-columns:repeat(2,1fr)} .pcard--rec{margin-top:0}}
@media (max-width:980px){.pcards--3{grid-template-columns:1fr; max-width:520px}}
@media (max-width:620px){.pcards{grid-template-columns:1fr}}

/* Clientes: logos y testimonios */
.logos{list-style:none; max-width:var(--maxw); margin:0 auto; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4)}
.logos li{display:grid; place-items:center; width:180px; height:96px; padding:var(--sp-4)}
.logos img{max-height:48px; width:auto}
.testis{list-style:none; max-width:var(--maxw); margin:clamp(28px,4vw,44px) auto 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp-5)}
.testi{display:flex; flex-direction:column; gap:var(--sp-4); padding:var(--sp-6)}
.testi blockquote{margin:0; font-family:var(--f); font-weight:500; font-size:var(--t-1); line-height:1.5}
.testi__who{display:flex; align-items:center; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--line); font-size:var(--t-s); color:var(--fg-dim)}
.testi__who b{display:block; color:var(--fg); font-weight:600}
.testi__who img,.testi__av{width:48px; height:48px; border-radius:50%; object-fit:cover; flex-shrink:0}
.testi__av{display:grid; place-items:center; background:var(--navy); color:var(--gold-2); font-weight:600}

/* Opiniones (v2.5.0): estrellas en oro, la vacía en filete. Sirven igual en el panel. */
.estr{display:inline-flex; gap:1px; font-size:1.05em; line-height:1; letter-spacing:0}
.estr i{font-style:normal; color:var(--line-2)}
.estr i.on{color:var(--acc)}
.testi .estr{font-size:var(--t-1)}
.ops{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start}
.ops__lado{position:sticky; top:96px; display:flex; flex-direction:column; gap:var(--sp-6)}
.ops__media{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0}
.ops__media b{font-family:var(--f-d,inherit); font-size:var(--t-4); line-height:1; color:var(--fg)}
.ops__media .estr{font-size:var(--t-1)}
.ops__media > span:last-child{flex-basis:100%; color:var(--fg-dim); font-size:var(--t--1)}
.ops__barras{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.ops__barras a{display:grid; grid-template-columns:3.2em 1fr 2.4em; gap:10px; align-items:center; min-height:32px; padding:2px 8px; border-radius:var(--r-sm); color:var(--fg); text-decoration:none; font-size:var(--t--1)}
.ops__barras a:hover,.ops__barras a[aria-current]{background:var(--s-2)}
.ops__barras a[aria-current]{font-weight:600}
.ops__barras .num{text-align:right; color:var(--fg-dim)}
.ops__barra{height:8px; border-radius:var(--r-pill); background:var(--s-2); overflow:hidden}
.ops__barras a[aria-current] .ops__barra,.ops__barras a:hover .ops__barra{background:var(--s-1)}
.ops__barra span{display:block; height:100%; background:var(--acc); border-radius:inherit}
.ops__todas{font-size:var(--t--1); color:var(--acc-ink); font-weight:600}
.ops__btns{display:flex; flex-direction:column; gap:var(--sp-3)}
.ops__reglas{padding-top:var(--sp-5); border-top:1px solid var(--line)}
.ops__h{font-weight:600; margin-bottom:var(--sp-3)}
.ops__reglas ul{margin:0; padding-left:1.1em; display:grid; gap:var(--sp-2); color:var(--fg-dim); font-size:var(--t--1); line-height:1.5}
.ops__main{min-width:0; display:flex; flex-direction:column; gap:var(--sp-6)}
.ops__mia{padding:clamp(20px,2.6vw,32px); background:var(--s-1); border:1px solid var(--acc-line); border-radius:var(--r-lg); scroll-margin-top:96px}
.ops__h2{font-size:var(--t-2); margin-bottom:var(--sp-4)}
.ops__estado{display:inline-block; margin:0 0 var(--sp-4); padding:6px 12px; border-radius:var(--r-pill); font-size:var(--t--1); background:var(--s-2); color:var(--fg)}
.ops__estado--pendiente{background:var(--acc-soft); color:var(--acc-ink)}
.ops__estado--publicada{background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok)}
.estr-elige{border:0; margin:0 0 var(--sp-4); padding:0; display:flex; flex-wrap:wrap; gap:8px}
.estr-elige legend{font-size:var(--t--1); font-weight:500; margin-bottom:8px; padding:0}
.estr-elige label{position:relative}
.estr-elige input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.estr-elige span{display:flex; flex-direction:column; align-items:center; min-width:76px; padding:10px 12px; border:1px solid var(--line-3); border-radius:var(--r); font-weight:600; line-height:1.2; cursor:pointer}
.estr-elige small{font-weight:400; font-size:12px; color:var(--fg-dim)}
.estr-elige input:checked + span{border-color:var(--acc); background:var(--acc-soft); color:var(--acc-ink); box-shadow:inset 0 0 0 1px var(--acc)}
.estr-elige input:focus-visible + span{outline:2px solid var(--acc); outline-offset:2px}
.ops__vacio{padding:var(--sp-6); border:1px dashed var(--line-2); border-radius:var(--r-lg); color:var(--fg-dim); text-align:center}
.ops__l{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4)}
.op{padding:clamp(18px,2.2vw,26px); background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg)}
.op__cab{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-bottom:var(--sp-3)}
.op__cab time{margin-left:auto; color:var(--fg-dim); font-size:var(--t--1)}
.op__ins{font-size:12px; padding:3px 9px; border-radius:var(--r-pill); background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok)}
.op__ins--g{background:var(--s-2); color:var(--fg-dim)}
.op__t{margin:0; line-height:1.6; overflow-wrap:anywhere}
.op__g{margin:var(--sp-2) 0 0; font-size:var(--t--1)}
.op__g a{color:var(--fg-dim)}
.op__resp{margin-top:var(--sp-4); padding:var(--sp-4); border-left:3px solid var(--gold-2); background:var(--s-2); border-radius:0 var(--r) var(--r) 0; font-size:var(--t-s); line-height:1.55}
.op__resp p{margin:0}
.op__resp-h{font-weight:600; margin-bottom:4px !important}
@media (max-width:860px){.ops{grid-template-columns:1fr} .ops__lado{position:static}}

/* Riesgo → solución: nunca solo el problema */
.riesgos{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5)}
.riesgo{display:flex; flex-direction:column; gap:14px; padding:clamp(22px,2.4vw,28px)}
.riesgo__r{font-size:var(--t-s); color:var(--fg-dim); text-decoration:line-through; text-decoration-color:var(--line-3)}
.riesgo__s{font-weight:500; line-height:1.5}
@media (max-width:860px){.riesgos{grid-template-columns:1fr}}

/* Tabla comparativa con encabezado fijo al desplazarse */
.ctabla{max-width:var(--maxw); margin-inline:auto}
.ctabla table{width:100%; border-collapse:separate; border-spacing:0; background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); font-size:var(--t-s)}
.ctabla th,.ctabla td{padding:14px var(--sp-4); border-bottom:1px solid var(--line); text-align:center; vertical-align:middle}
.ctabla tbody th{text-align:left; font-weight:500; width:34%}
.ctabla thead th{position:sticky; top:var(--hdr-h); z-index:2; background:var(--navy); color:var(--c-white); font-weight:600}
.ctabla thead th:first-child{text-align:left; border-top-left-radius:var(--r-lg)}
.ctabla thead th:last-child{border-top-right-radius:var(--r-lg)}
.ctabla tbody tr:last-child > *{border-bottom:0}
.ctabla tbody tr:nth-child(even){background:var(--s-2)}
.ctabla td .ico{width:20px; height:20px; color:var(--acc); display:inline-block; vertical-align:middle}
.ctabla td{color:var(--fg-dim)}
@media (max-width:680px){
  .ctabla{overflow-x:auto}
  .ctabla table{min-width:560px}
  .ctabla thead th{position:static}
}

.checks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px var(--sp-6)}
.checks li{display:flex; gap:var(--sp-3); align-items:flex-start; font-weight:500; line-height:1.45}
.checks .ico{color:var(--acc); flex-shrink:0}
.checks--1{grid-template-columns:1fr}
@media (max-width:560px){.checks{grid-template-columns:1fr}}

/* Asesoría: ¿asesoría o consultoría? */
.eleccion{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6)}
.eleg{display:flex; flex-direction:column; gap:14px; padding:clamp(24px,3vw,36px); position:relative; overflow:hidden}
.eleg::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--acc)}
.eleg:first-child::before{background:var(--sec)}
.eleg h3{font-family:var(--f); font-weight:600; font-size:var(--t-2)}
.eleg__frase{font-size:var(--t-1); font-weight:500}
.eleg dl{margin:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.eleg dt{font-size:var(--t--1); font-weight:600; color:var(--acc-ink); text-transform:uppercase; letter-spacing:.04em}
.eleg dd{margin:2px 0 0; color:var(--fg-dim); line-height:1.5}
.eleg__precio{margin-top:auto; padding:14px var(--sp-4); background:var(--s-2); border-radius:var(--r); font-weight:500; font-size:var(--t-s)}
@media (max-width:860px){.eleccion{grid-template-columns:1fr}}
.agenda{max-width:var(--maxw); margin-inline:auto}
.agenda iframe{width:100%; min-height:720px}

/* Contacto */
.contacto{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(24px,4vw,48px); align-items:start}
.contacto__datos{display:flex; flex-direction:column; gap:18px; padding:clamp(22px,2.6vw,30px); background:var(--s-2)}
.contacto__promesa{display:flex; gap:10px; align-items:center; font-weight:600; color:var(--fg)}
.contacto__promesa .ico{color:var(--acc)}
.contacto__datos ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.contacto__datos li{display:flex; gap:var(--sp-3); align-items:flex-start; color:var(--fg-dim); line-height:1.5}
.contacto__datos li .ico{color:var(--acc-ink); margin-top:2px}
.contacto__datos b{display:block; color:var(--fg); font-weight:600}
.contacto__datos li a:not(.btn){color:var(--link)}
@media (max-width:860px){.contacto{grid-template-columns:1fr}}

/* Nosotros */
.perfil{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:center; max-width:var(--maxw); margin-inline:auto}
.perfil__img{aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:var(--s-1); border:1px solid var(--line)}
.perfil__img img{width:100%; height:100%; object-fit:cover; object-position:top}
.perfil h2{font-size:var(--t-3)}
.perfil .lede{margin-top:var(--sp-4); max-width:none}
.prosa--grande{font-size:var(--t-1); line-height:1.75}
.manifiesto{background:var(--bg); border-top:3px solid var(--gold-2)}
.manifiesto__in{max-width:900px; margin-inline:auto}
.manifiesto h2{font-size:var(--t-3); margin-bottom:28px; color:var(--acc)}
.manifiesto ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.manifiesto li{font-family:var(--f); font-weight:600; font-size:var(--t-2); line-height:1.35; color:var(--fg); padding-left:var(--sp-6); border-left:2px solid var(--acc-line)}
.aclara{max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:14px}
.aclara > div{padding:var(--sp-5) 22px}
.aclara dt{color:var(--fg-dim); font-size:var(--t-s)}
.aclara dd{margin:var(--sp-2) 0 0; display:flex; gap:10px; align-items:flex-start; font-weight:500; line-height:1.5}
.aclara dd .ico{color:var(--acc); flex-shrink:0}
@media (max-width:980px){.perfil{grid-template-columns:1fr} .perfil__img{max-width:420px}}

/* Cursos y herramientas destacados, blog y video */
.courses{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); max-width:var(--maxw); margin-inline:auto}
.courses--2{grid-template-columns:repeat(2,1fr); max-width:900px}
.blogyt{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(20px,3vw,36px); align-items:start}
.blogyt--solo{grid-template-columns:1fr}
@media (max-width:980px){.courses{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.blogyt{grid-template-columns:1fr}}
@media (max-width:620px){.courses,.courses--2{grid-template-columns:1fr}}

/* Preguntas frecuentes */
.faq{max-width:68ch; margin:clamp(34px,5vw,60px) auto 0}
.faq-caja{container-type:inline-size; max-width:var(--maxw); margin-inline:auto}
@container (min-width:860px){
  .faq--sola{display:grid; grid-template-columns:.8fr 1.2fr; column-gap:clamp(40px,6vw,96px); max-width:none}
  .faq--sola h2{grid-row:1 / span 12; align-self:start; position:sticky; top:calc(var(--hdr-h) + 24px)}
  .faq--sola details{grid-column:2}
}
.faq--sola{margin-top:0}
.faq--sola h2{font-size:var(--t-3); margin-bottom:var(--sp-6)}
.faq details{border-top:1px solid var(--line-2); padding:var(--sp-4) 0}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer; font-weight:500; font-size:var(--t-0); list-style:none; display:flex; justify-content:space-between; gap:var(--sp-3); align-items:center; min-height:32px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex-shrink:0; width:9px; height:9px; margin-right:6px; border-right:2px solid var(--acc); border-bottom:2px solid var(--acc); transform:translateY(-30%) rotate(45deg); transition:transform var(--d-ui) var(--ease)}
.faq details[open] summary::after{transform:translateY(20%) rotate(225deg)}
.faq summary:hover{color:var(--acc-ink)}
.faq p{margin-top:10px; color:var(--fg-dim); line-height:1.6; max-width:60ch}

/* Llamado final: azul noche con halo dorado */
.cierre{background:var(--bg); border-top:3px solid var(--gold-2)}
.cierre__in{max-width:var(--maxw); margin-inline:auto; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(28px,5vw,72px); display:grid; grid-template-columns:1fr minmax(0,440px); gap:clamp(28px,5vw,72px); align-items:center}
.cierre__in--solo{grid-template-columns:1fr; text-align:center; justify-items:center}
.cierre h2{font-size:var(--t-3); max-width:18ch}
.cierre .lede{margin:var(--sp-4) 0 26px; color:var(--fg-dim)}
/* v2.0 (Zarla): datos de contacto junto al formulario */
.cierre__datos{list-style:none; margin:0 0 var(--sp-7); padding:0; display:grid; gap:var(--sp-4)}
.cierre__datos li{display:flex; gap:var(--sp-3); align-items:flex-start; color:var(--fg-dim); line-height:1.45}
.cierre__datos .ico{width:22px; height:22px; color:var(--acc-ink); margin-top:2px}
.cierre__datos b{display:block; font-size:var(--t--1); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg)}
.cierre__datos a:not(.btn){color:var(--fg-dim)}
.cierre__form{padding:clamp(20px,2.6vw,30px); border-color:var(--line-2); box-shadow:var(--e-3)}
.cierre__form label{color:var(--fg)}
.cierre__form .field--check label{color:var(--fg-dim)}
.cierre__form a:not(.btn){color:var(--link)}
@media (max-width:860px){.cierre__in{grid-template-columns:1fr}}

/* /empezar: página de venta sin menú, una columna */
.portada--sola{margin-top:0; padding-top:0}
.mini{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto clamp(28px,4vw,56px); min-height:var(--hdr-h); display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4)}
.mini img{height:40px; width:auto}
.venta{max-width:760px; margin-inline:auto}
.venta h2{font-size:var(--t-3); margin-bottom:var(--sp-6)}
.venta .lede{max-width:none; margin-top:var(--sp-6)}
.dolor{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.dolor li{padding:var(--sp-4) var(--sp-5); background:var(--s-1); border:1px solid var(--line); border-radius:var(--r); line-height:1.5}

/* ==========================================================
   CATÁLOGOS: tarjeta de curso/herramienta, barra de filtros,
   pestañas, vacío
   ========================================================== */
.crs{overflow:hidden; display:flex; flex-direction:column; text-align:left; width:100%}
.crs__cv{position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--navy)}
.crs__cv img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 620ms var(--ease); filter:saturate(.88) contrast(1.04)}
.crs:hover .crs__cv img{transform:scale(1.07)}
.crs__cv::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,color-mix(in srgb,var(--navy) 14%,transparent) 0%,color-mix(in srgb,var(--navy) 60%,transparent) 100%)}
.crs__cv .pill{position:absolute; left:14px; top:13px; z-index:2}
.crs__cv .pill--estado{left:auto; right:14px}
.crs__top{padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px) var(--sp-3); display:flex; flex-direction:column; gap:var(--sp-2)}
.crs__k{font-size:var(--t--2); letter-spacing:.08em; text-transform:uppercase; color:var(--acc-ink); font-weight:600}
.crs h3{font-size:var(--t-1); color:var(--fg); max-width:24ch}
.crs h3 a{color:inherit; text-decoration:none}
.crs h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.crs__bd{padding:0 clamp(18px,2.2vw,24px) clamp(18px,2.2vw,22px); display:flex; flex-direction:column; gap:var(--sp-3); flex:1}
.crs__m{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--t--1); color:var(--fg-dim); font-variant-numeric:tabular-nums; flex-wrap:nowrap; white-space:nowrap; min-width:0}
.crs__m > span:first-child{overflow:hidden; text-overflow:ellipsis}
.crs__m .ico{width:15px; height:15px}
.crs__cert{margin-left:auto; display:inline-flex; color:var(--acc-ink)}
.crs__cert .ico{width:18px; height:18px}
.crs__vivo{font-size:var(--t--1); color:var(--fg-dim); line-height:1.5}
.crs__vivo b{color:var(--fg); font-weight:600}
.crs__pie{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-4); border-top:1px solid var(--line)}
.crs__pie form{margin:0}
.crs__p{color:var(--fg); font-family:var(--f-d); font-size:var(--t-2); font-weight:700; font-variant-numeric:tabular-nums}
.crs__p.free{color:var(--acc-ink)}
.crs__ver{font-size:var(--t--1); color:var(--link); text-decoration:none; align-self:flex-start}
.crs__ver:hover{text-decoration:underline; text-underline-offset:3px}
.herr__ex{margin:0; font-size:var(--t--1); color:var(--fg-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
#lista-herr[aria-busy=true]{opacity:.5; transition:opacity var(--d-state)}

/* Barra de filtros: buscador + un boton «Filtros» que despliega los selectores
   (partials/filtros). La lista de abajo siempre se ve completa. */
.bfiltro{position:relative; max-width:var(--maxw); margin:0 auto clamp(24px,3vw,36px); display:flex; gap:10px; align-items:center;
  padding:10px; background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e-1)}
.bfiltro__q{flex:1 1 auto; min-width:0; position:relative; display:flex; align-items:center}
.bfiltro__q .ico{position:absolute; left:14px; width:18px; height:18px; color:var(--fg-dim); pointer-events:none}
.bfiltro input[type=search],.bfiltro select{width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--line-3); border-radius:var(--r); background:var(--bg); color:var(--fg); font:inherit; font-size:var(--t-s);
  transition:border-color var(--d-state) var(--ease-ui), background var(--d-state) var(--ease-ui)}
.bfiltro input[type=search]:hover,.bfiltro select:hover{border-color:var(--fg-dim)}
.bfiltro input[type=search]:focus,.bfiltro select:focus{border-color:var(--acc); background:var(--s-1); outline:2px solid var(--acc-line); outline-offset:0}
.bfiltro input[type=search]{padding-left:42px}
.bfiltro .btn{min-height:48px}
.bfiltro__mas{flex:0 0 auto}
.bfiltro__mas > summary{list-style:none; cursor:pointer; gap:var(--sp-2)}
.bfiltro__mas > summary::-webkit-details-marker{display:none}
.bfiltro__mas > summary .ico{width:18px; height:18px}
.bfiltro__mas[open] > summary{background:var(--navy); border-color:var(--navy); color:var(--c-white)}
.bfiltro__n{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--r-pill); background:var(--acc); color:var(--on-acc); font-size:var(--t--1); line-height:1}
.bfiltro__panel{position:absolute; z-index:6; right:10px; top:calc(100% + 8px); width:min(560px, calc(100% - 20px)); padding:var(--sp-5);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4);
  background:var(--s-1); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--e-3)}
.bfiltro__panel label{display:grid; gap:6px; font-size:var(--t--1); font-weight:600; color:var(--fg-dim)}
.bfiltro__acc{grid-column:1 / -1; display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap}
.bfiltro__x{font-size:var(--t--1); color:var(--link)}
@media (max-width:620px){
  .bfiltro__mas > summary{padding-inline:14px}
  .bfiltro__panel{right:0; left:0; width:auto; grid-template-columns:1fr}
}

/* Vacío: una hoja en blanco con sello, no un recuadro punteado */
.vacio{max-width:600px; margin-inline:auto; padding:clamp(28px,4vw,44px); text-align:center; color:var(--fg-dim); line-height:1.6; box-shadow:var(--e-1)}
.vacio__ic{margin:0 auto var(--sp-4); width:56px; height:56px; border-radius:50%}
.vacio__ic .ico{width:26px; height:26px}
.vacio b{color:var(--fg); font-family:var(--f); font-weight:600; font-size:var(--t-2); display:block; margin-bottom:6px; line-height:1.3}
.vacio a:not(.btn){color:var(--link)}
.vacio .btn{margin-top:var(--sp-5)}
.vacio--izq{text-align:left; margin-inline:0; max-width:none}
.vacio--izq .vacio__ic{margin-inline:0}

/* ==========================================================
   BLOG
   ========================================================== */
.posts{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp-5); max-width:var(--maxw); margin-inline:auto}
.posts:has(> :only-child){max-width:420px; margin-inline:0}
.posts--col{grid-template-columns:1fr}
.posts--col .post__cv{display:none}
.post{display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit}
.post__cv{position:relative; aspect-ratio:16/9; background:var(--s-2); overflow:hidden}
.post__cv img{width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease)}
.post:hover .post__cv img{transform:scale(1.04)}
.post__play{position:absolute; inset:0; display:grid; place-items:center}
.post__play .ico{width:56px; height:56px; padding:14px; border-radius:50%; background:color-mix(in srgb,var(--navy) 78%,transparent); color:var(--c-white)}
.post__bd{padding:18px var(--sp-5) 22px; display:flex; flex-direction:column; gap:var(--sp-2); flex:1}
.post__tags{display:flex; flex-wrap:wrap; gap:6px}
.post__tags:empty{display:none}
.post h2,.post h3{font-size:var(--t-1); letter-spacing:-.015em; line-height:1.3}
.post__d{font-size:var(--t--1); color:var(--fg-dim); line-height:1.55}
.post__k{margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--line); font-size:var(--t--1); color:var(--fg-dim)}
.post--grande{max-width:var(--maxw); margin:0 auto var(--sp-5); display:grid; grid-template-columns:1.2fr 1fr}
.post--grande .post__cv{aspect-ratio:16/9; align-self:stretch; height:100%}   /* 16:9 recorta las franjas negras de hqdefault (4:3) */
.post--grande .post__bd{padding:clamp(22px,3vw,40px); justify-content:center}
.post--grande h2{font-family:var(--f-d); font-size:var(--t-3)}
@media (max-width:760px){.post--grande{grid-template-columns:1fr} .post--grande .post__cv{height:auto}}

/* Prosa (artículos, legal) */
.prosa{max-width:68ch; margin-inline:auto; font-size:var(--t-0); line-height:1.75; color:var(--fg)}
.prosa--izq{margin-inline:0}
.prosa h2{font-size:var(--t-2); margin:2.2em 0 .6em}
.prosa h3{font-size:var(--t-1); margin:1.8em 0 .5em}
.prosa p{margin:0 0 1.1em}
.prosa ul,.prosa ol{margin:0 0 1.2em; padding-left:1.3em}
.prosa li{margin-bottom:.4em}
.prosa li::marker{color:var(--acc-ink)}
.prosa a:not(.btn){color:var(--link); text-underline-offset:3px}
.prosa blockquote{margin:1.6em 0; padding:var(--sp-4) var(--sp-5); background:var(--s-2); border:1px solid var(--line); border-radius:var(--r-lg); font-family:var(--f-d); font-size:var(--t-1); color:var(--fg)}
.prosa img{border-radius:var(--r-lg); margin:1.4em 0}
.prosa table{width:100%; border-collapse:collapse; font-size:var(--t--1); margin:1.2em 0}
.prosa th,.prosa td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
.prosa th{color:var(--fg-dim); font-weight:500}
.prosa hr{border:0; border-top:1px solid var(--line-2); margin:2em 0}
.prosa .dim{color:var(--fg-dim)}
.prosa > .dim:first-child{font-size:var(--t--1); padding-bottom:var(--sp-4); margin-bottom:var(--sp-6); border-bottom:1px solid var(--line)}

/* Artículo: la cabecera se alinea con la columna del texto */
.art-head{max-width:68ch; margin-inline:auto; width:100%}
.art-head .lede{max-width:none}
.art-autor{display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2)}
.art-autor img{width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:top; background:var(--s-2); border:1px solid var(--acc-line)}
.art-cover{max-width:var(--maxw); margin:0 auto clamp(28px,4vw,48px); border-radius:var(--r-lg); overflow:hidden; aspect-ratio:21/9; background:var(--s-1); box-shadow:var(--e-2)}
.art-cover img{width:100%; height:100%; object-fit:cover}
.art-video{max-width:880px; margin:0 auto clamp(28px,4vw,48px)}
.art-video--pie{max-width:68ch; margin-top:clamp(28px,4vw,40px)}
.art-caja{max-width:68ch; margin:0 auto clamp(24px,3vw,36px); padding:var(--sp-5) var(--sp-6); border-radius:var(--r-lg); background:var(--s-2); border:1px solid var(--line)}
.art-caja--breve{position:relative; overflow:hidden}
.art-caja--breve::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:var(--gold-2)}
.art-caja--hacer{margin-top:clamp(28px,4vw,40px); background:var(--s-1); border-color:var(--acc-line); box-shadow:var(--e-1)}
.art-caja__t{display:flex; align-items:center; gap:var(--sp-2); margin:0 0 10px; font-weight:600; color:var(--fg)}
.art-caja__t .ico{width:20px; height:20px; color:var(--ok)}
.art-caja ul,.art-caja ol{margin:0; padding-left:1.2em; display:grid; gap:6px; line-height:1.55}
.art-norma{max-width:68ch; margin:clamp(24px,3vw,36px) auto 0; padding:18px var(--sp-5); display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap}
.art-norma__ic .ico{padding:10px; color:var(--navy)}
.art-norma__txt{flex:1 1 220px; display:flex; flex-direction:column; gap:2px; font-size:var(--t--1); color:var(--fg-dim)}
.art-norma__txt .art-caja__t{margin:0}
.art-norma__txt b{font-size:1rem; color:var(--fg)}
.art-aviso{max-width:68ch; margin:clamp(24px,3vw,36px) auto 0; color:var(--fg-dim); font-style:italic}
.art-aviso small{font-size:var(--t--1)}
.art-firma{max-width:68ch; margin:clamp(28px,4vw,44px) auto 0; padding-top:var(--sp-6); border-top:1px solid var(--line); display:flex; gap:var(--sp-4); align-items:center}
.art-firma img{width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:top; background:var(--s-2); flex-shrink:0; border:1px solid var(--acc-line)}
.art-firma b{display:block}
.art-firma p{font-size:var(--t--1); color:var(--fg-dim); line-height:1.55}
.art-compartir{max-width:68ch; margin:18px auto 0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2)}
.art-compartir > *{font-size:var(--t-s)}
.art-compartir > span{color:var(--fg-dim); margin-right:var(--sp-1)}
.art-compartir a,.art-compartir button{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:var(--sp-2) 14px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--s-1); color:var(--fg); text-decoration:none; font:inherit; cursor:pointer;
  transition:border-color var(--d-state) var(--ease-ui)}
.art-compartir a:hover,.art-compartir button:hover{border-color:var(--acc)}
.art-compartir .ico{width:16px; height:16px}
.art-foot{max-width:68ch; margin:clamp(34px,5vw,60px) auto 0; padding-top:var(--sp-6); border-top:1px solid var(--line-2); display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between}

/* Boletín */
.boletin{max-width:var(--maxw); margin:clamp(40px,5vw,64px) auto 0; padding:clamp(22px,3vw,36px); display:grid; grid-template-columns:1fr 1.1fr; gap:var(--sp-5) var(--sp-7); align-items:center; box-shadow:var(--e-1)}
.boletin h2{font-size:var(--t-2)}
.boletin__txt p{margin-top:6px; color:var(--fg-dim)}
.boletin__campos{display:flex; flex-wrap:wrap; gap:10px}
.boletin__campos > label:first-child{flex:1 1 220px}
.boletin input[type=email]{width:100%; min-height:48px; padding:10px 14px; border:1px solid var(--line-3); border-radius:var(--r); background:var(--bg); font:inherit}
.boletin__ok-legal{flex-basis:100%; font-size:var(--t--1); color:var(--fg-dim)}
.boletin__ok-legal a:not(.btn){color:var(--link)}
.boletin__ok{display:flex; align-items:center; gap:var(--sp-2); color:var(--ok); font-weight:600}
@media (max-width:760px){.boletin{grid-template-columns:1fr}}

/* Paginación */
.paginas{margin-top:clamp(22px,2.8vw,32px); display:flex; gap:var(--sp-4); align-items:center; justify-content:center; flex-wrap:wrap}
.step__more{margin-top:clamp(22px,2.8vw,32px); display:flex; gap:var(--sp-4); align-items:center; flex-wrap:wrap}

/* ==========================================================
   FICHA DE CURSO Y DE HERRAMIENTA
   ========================================================== */
.detail{display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(28px,4vw,60px); align-items:start; max-width:var(--maxw); margin-inline:auto}
.detail__flash{max-width:var(--maxw); margin-inline:auto}
.detail__flash:empty{display:none}
.blk{margin-bottom:clamp(32px,4vw,50px)}
.blk h2{font-size:var(--t-2); margin-bottom:var(--sp-4)}
.learn{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; list-style:none}
.learn li{display:flex; gap:10px; align-items:flex-start; font-size:var(--t--1); line-height:1.5; padding:14px var(--sp-4); border-radius:var(--r)}
.learn .ico{width:16px; height:16px; color:var(--acc); flex-shrink:0; margin-top:3px}
/* Temario con <details>: se abre sin JavaScript */
.mod{border-radius:0; overflow:hidden; margin-bottom:-1px}
.mod:first-child{border-radius:var(--r-lg) var(--r-lg) 0 0}
.mod:last-child{border-radius:0 0 var(--r-lg) var(--r-lg); margin-bottom:0}
.mod:only-child{border-radius:var(--r-lg)}
details.mod summary{list-style:none; cursor:pointer}
details.mod summary::-webkit-details-marker{display:none}
.mod__btn{width:100%; display:flex; align-items:center; gap:14px; padding:var(--sp-4) 18px; text-align:left; transition:background var(--d-state) var(--ease-ui)}
.mod__btn:hover{background:var(--s-2)}
.mod__n{font-weight:600; color:var(--acc-ink); font-variant-numeric:tabular-nums; flex-shrink:0; min-width:22px; font-size:var(--t-0)}
.mod__t{font-weight:500; font-size:var(--t-0); flex:1; letter-spacing:-.015em}
.mod__meta{font-size:var(--t--1); color:var(--fg-dim); font-variant-numeric:tabular-nums; flex-shrink:0}
.mod__chev{transition:transform var(--d-ui) var(--ease-ui); flex-shrink:0; color:var(--fg-dim)}
details.mod[open] .mod__chev,.mod__btn[aria-expanded="true"] .mod__chev{transform:rotate(180deg)}
.mod__panel{display:none; border-top:1px solid var(--line); background:var(--bg)}
.mod__panel.open,details.mod .mod__panel{display:block}
.lesson{display:flex; align-items:center; gap:var(--sp-3); padding:11px 18px 11px 54px; font-size:var(--t--1); border-bottom:1px solid var(--line)}
.lesson:last-child{border-bottom:0}
.lesson__t{flex:1}
.lesson__d{color:var(--fg-dim); font-variant-numeric:tabular-nums; flex-shrink:0}
.lesson__free{color:var(--acc-ink); font-weight:600; font-size:var(--t--2); letter-spacing:.06em; text-transform:uppercase; flex-shrink:0}
.play-i{width:14px; height:14px; color:var(--fg-dim); flex-shrink:0}

/* Columna de compra: fija en escritorio */
.buy{position:sticky; top:calc(var(--hdr-h) + var(--sp-4)); overflow:hidden; box-shadow:var(--e-2); border-color:var(--line-2)}
.buy::before{content:""; display:block; height:3px; background:linear-gradient(90deg,var(--acc),var(--gold-2))}
.buy__bd{padding:var(--sp-6); display:flex; flex-direction:column; gap:14px}
.buy__price{display:flex; align-items:baseline; gap:var(--sp-2)}
.buy__amt{font-family:var(--f-d); font-size:var(--t-3); font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.buy__was{color:var(--fg-dim); text-decoration:line-through; font-variant-numeric:tabular-nums; font-size:var(--t-0)}
.buy__incl{margin:0; padding:var(--sp-4) 0 0; border-top:1px solid var(--line); list-style:none; display:flex; flex-direction:column; gap:9px; font-size:var(--t--1)}
.buy__incl li{display:flex; gap:9px; align-items:center; color:var(--fg-dim)}
.buy__incl .ico{width:14px; height:14px; color:var(--ok); flex-shrink:0}
.buy__gratis{display:flex; flex-direction:column; gap:10px}
.buy__nov{display:flex; gap:var(--sp-2); align-items:flex-start; font-size:var(--t--1); color:var(--fg-dim)}
.buy__mail{display:none}
.buy__gratis:has(.buy__nov input:checked) .buy__mail{display:block}
.buy__mail input{width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--line-3); border-radius:var(--r); background:var(--bg); font:inherit}
.buy__seguro{margin:0; display:flex; gap:var(--sp-2); align-items:center; justify-content:center; font-size:var(--t--1); color:var(--fg-dim)}
.buy__seguro .ico{width:14px; height:14px; color:var(--ok)}

.tutor{display:flex; gap:18px; align-items:center; background:var(--bg); color:var(--fg); border-radius:var(--r-lg); padding:clamp(18px,2.4vw,26px); background-image:var(--rayado)}
.tutor__av{width:88px; height:88px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--s-1); display:block; border:2px solid var(--acc-line)}
.tutor__av img{width:100%; height:100%; object-fit:cover; object-position:50% 0%; transform:scale(1.85); transform-origin:50% 6%; filter:grayscale(1) contrast(1.06) sepia(.28) hue-rotate(178deg) saturate(1.3)}
.tutor h3{font-size:var(--t-1); color:var(--fg)}
.tutor p{font-size:var(--t--1); color:var(--fg-dim); margin-top:7px; line-height:1.5}

.sesiones{list-style:none; margin:0 0 var(--sp-3); padding:0; border-top:1px solid var(--line)}
.sesiones li{display:flex; flex-wrap:wrap; gap:var(--sp-1) var(--sp-4); align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--line)}
.sesiones b{min-width:16ch; color:var(--navy)}
.sesiones__acc{margin-left:auto; display:flex; gap:var(--sp-2); flex-wrap:wrap}
.eval{list-style:none; margin:0 0 var(--sp-3); padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.eval li{padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1)}
.eval b{font-family:var(--f-d); font-size:var(--t-3); color:var(--navy); line-height:1; font-variant-numeric:tabular-nums}
.eval span{font-size:var(--t--1); color:var(--fg-dim)}
@media (max-width:560px){.eval{grid-template-columns:1fr}}

/* Vista previa del certificado: una miniatura del documento real. Sus
   tamaños son proporcionales al papel, no a la escala de texto. */
.certprev{aspect-ratio:297/210; background:var(--s-2); border:2px solid var(--acc); outline:1px solid var(--gold-2); outline-offset:-7px; border-radius:var(--r-sm); padding:7% 8%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; box-shadow:var(--e-2)}
.certprev__k{font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-ink); font-weight:600}
.certprev__se{font-family:var(--f-d); font-style:italic; font-size:var(--t--2); color:var(--fg-dim)}
.certprev__n{font-family:var(--f-d); font-weight:700; font-size:clamp(18px,2.4vw,26px); color:var(--navy); border-bottom:1px solid var(--gold-2); padding:0 var(--sp-3) var(--sp-1)}
.certprev__c{font-family:var(--f-d); font-weight:700; font-size:var(--t--2); color:var(--navy); max-width:32ch}
.certprev__pie{margin-top:6px; display:flex; align-items:center; gap:var(--sp-2); font-size:.625rem; font-weight:600; color:var(--navy); letter-spacing:.04em}
.certprev__qr{width:26px; height:26px; background:repeating-conic-gradient(var(--navy) 0 25%, transparent 0 50%) 0 0/8px 8px; border:2px solid var(--navy)}

.galeria{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--sp-3)}
.galeria figure{margin:0}
.galeria a{display:block; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; cursor:zoom-in}
.galeria img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; transition:transform var(--d-ui) var(--ease)}
.galeria a:hover img{transform:scale(1.03)}
.galeria figcaption{margin-top:6px; font-size:var(--t--1); color:var(--fg-dim)}
.lbox{border:0; padding:0; max-width:min(1100px,94vw); max-height:92vh; background:transparent; overflow:visible}
.lbox::backdrop{background:color-mix(in srgb,var(--navy) 86%,transparent)}
.lbox img{display:block; max-width:100%; max-height:84vh; margin:auto; border-radius:var(--r)}
.lbox__pie{color:var(--c-white); text-align:center; margin:10px 0 0}
.lbox__x{position:absolute; right:-6px; top:-44px; width:40px; height:40px; border:0; border-radius:50%; background:var(--c-white); color:var(--navy); cursor:pointer; display:grid; place-items:center}
.lbox__x .ico{width:18px; height:18px}

/* Compra fija: barra abajo en móvil */
.buybar{display:none}
@media (max-width:980px){
  .detail{grid-template-columns:1fr}
  .buy{position:static}
  .buybar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background:var(--s-1); border-top:1px solid var(--line); box-shadow:0 -8px 24px color-mix(in srgb,var(--navy) 8%,transparent)}
  .buybar form{margin:0}
  .buybar__p{font-family:var(--f-d); font-weight:700; font-size:var(--t-2); color:var(--navy)}
  body:has(.buybar) .foot{padding-bottom:84px}
  body:has(.buybar) .wa-float,body:has(.buybar) .to-top{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:680px){.learn{grid-template-columns:1fr} .lesson{padding-left:18px}}

/* ==========================================================
   AULA (v2.1: con la forma del aula de Skool)
   Pestañas subrayadas arriba, lienzo gris claro, temario en una
   tarjeta con módulos plegables, la lección en UNA tarjeta con el
   check redondo junto al título y las preguntas como comentarios.
   ========================================================== */
.aula-cab{padding-block:clamp(24px,3vw,36px) clamp(16px,2vw,24px)}
.aula-cab .phead__in{grid-template-columns:1fr}
.aula-cab h1{font-size:var(--t-3); max-width:none}
.aula-cab .phead__txt{max-width:none}
.atabs{background:var(--bg); border-bottom:1px solid var(--line); padding-inline:var(--gut); position:sticky; top:var(--hdr-h); z-index:5}
.atabs__in{max-width:var(--maxw); margin-inline:auto; display:flex; gap:clamp(16px,3vw,32px); overflow-x:auto; scrollbar-width:none}
.atabs a{position:relative; padding:14px 0 13px; font-size:var(--t--1); font-weight:500; color:var(--fg-dim); text-decoration:none; white-space:nowrap;
  transition:color var(--d-state) var(--ease-ui)}
.atabs a:hover{color:var(--fg)}
.atabs a[aria-current]{color:var(--fg); font-weight:600}
.atabs a[aria-current]::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--acc)}
.atabs__n{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:4px; border-radius:var(--r-pill); background:var(--acc-soft); color:var(--acc-ink); font-size:var(--t--2); font-weight:600; vertical-align:1px}

.aula-band{padding-block:clamp(20px,3vw,32px) var(--bandy-t); background:color-mix(in srgb,var(--gris) 60%,var(--bg))}
.aula{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:300px minmax(0,1fr); gap:clamp(16px,2.4vw,28px); align-items:start}
.aula__side{position:sticky; top:calc(var(--hdr-h) + 64px); padding:18px 14px 10px; max-height:calc(100vh - var(--hdr-h) - 88px); overflow-y:auto}
.avance{height:8px; border-radius:var(--r-pill); background:var(--s-3); overflow:hidden}
.avance span{display:block; height:100%; background:linear-gradient(90deg,var(--acc),var(--gold-2)); border-radius:inherit}
.avance--mini{width:110px; display:inline-block; vertical-align:middle; margin-right:var(--sp-2)}
.avance__t{font-size:var(--t--1); color:var(--fg-dim); margin:6px 4px 8px}
.avance__t b{color:var(--fg); font-weight:600}
.aula__side .avance{margin-inline:4px}
.aula__temario{margin-top:var(--sp-3)}
.aula__mod{border-top:1px solid var(--line)}
.aula__mod summary{display:flex; align-items:center; gap:var(--sp-2); padding:12px 6px; cursor:pointer; list-style:none; font-weight:600; font-size:var(--t-s); color:var(--fg)}
.aula__mod summary::-webkit-details-marker{display:none}
.aula__mod summary::after{content:""; width:7px; height:7px; margin-left:var(--sp-1); border-right:1.5px solid var(--fg-dim); border-bottom:1.5px solid var(--fg-dim); transform:rotate(-45deg); transition:transform var(--d-ui) var(--ease-ui)}
.aula__mod[open] summary::after{transform:rotate(45deg)}
.aula__mod summary small{margin-left:auto; font-weight:500; color:var(--fg-dim); font-variant-numeric:tabular-nums}
.aula__mod summary:focus-visible{outline:2px solid var(--sec); outline-offset:2px; border-radius:var(--r-sm)}
.aula__temario ul{list-style:none; margin:0 0 var(--sp-2); padding:0}
.aula__temario a{display:flex; gap:10px; align-items:flex-start; padding:9px 8px; border-radius:var(--r); font-size:var(--t--1); color:var(--fg); text-decoration:none; line-height:1.4;
  transition:background var(--d-state) var(--ease-ui)}
.aula__temario a:hover{background:var(--s-2)}
.aula__temario a[aria-current]{background:color-mix(in srgb,var(--acc) 12%,var(--s-1)); font-weight:600}
.aula__temario small{margin-left:auto; color:var(--fg-dim); white-space:nowrap; font-weight:400}
.aula__ck{width:20px; height:20px; flex-shrink:0; border:1.5px solid var(--line-3); border-radius:50%; display:grid; place-items:center; margin-top:-1px; background:var(--s-1)}
.aula__ck .ico{width:12px; height:12px; stroke-width:3}
.hecha .aula__ck{background:var(--ok); border-color:var(--ok); color:var(--c-white)}

/* La lección: una tarjeta */
.leccion{background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px,2.6vw,32px); box-shadow:var(--e-1)}
.leccion + .leccion{margin-top:var(--sp-5)}
.leccion h2{font-size:var(--t-2); margin-bottom:var(--sp-3)}
.leccion > p{margin-bottom:var(--sp-3)}
.leccion__hd{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-4)}
.leccion__hd h2{margin:0}
.leccion__hd form{margin:0; flex-shrink:0}
.aula__k{font-size:var(--t--1); color:var(--fg-dim); margin-bottom:var(--sp-1)}
/* El check de Skool: círculo que se rellena de verde */
.chk{display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--s-1); color:var(--fg); font:500 var(--t--1)/1.2 var(--f); cursor:pointer; white-space:nowrap;
  transition:border-color var(--d-state) var(--ease-ui), background var(--d-state) var(--ease-ui)}
.chk__o{width:28px; height:28px; border-radius:50%; border:2px solid var(--line-3); display:grid; place-items:center; color:transparent; transition:all var(--d-ui) var(--ease)}
.chk__o .ico{width:15px; height:15px; stroke-width:3}
button.chk:hover{border-color:var(--ok); background:color-mix(in srgb,var(--ok) 5%,var(--s-1))}
button.chk:hover .chk__o{border-color:var(--ok); color:var(--ok)}
button.chk:focus-visible{outline:2px solid var(--sec); outline-offset:2px}
.chk--hecha{cursor:default; border-color:color-mix(in srgb,var(--ok) 35%,transparent); color:var(--ok); font-weight:600}
.chk--hecha .chk__o{background:var(--ok); border-color:var(--ok); color:var(--c-white)}
.aula__video{position:relative; aspect-ratio:16/9; background:var(--video); border-radius:var(--r); overflow:hidden; margin-bottom:var(--sp-5)}
.aula__video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
/* Marca de agua: encima del video pero sin robarle clics */
.aula__marca{position:absolute; right:var(--sp-3); bottom:52px; pointer-events:none; font-size:var(--t--2); color:color-mix(in srgb,var(--c-white) 55%,transparent); text-shadow:0 1px 2px color-mix(in srgb,var(--video) 60%,transparent); animation:marca 40s linear infinite alternate}
@keyframes marca{0%{transform:translate(0,0)} 50%{transform:translate(-40vw,-12vw)} 100%{transform:translate(-10vw,-22vw)}}
.aula__txt{margin:0 0 var(--sp-5); max-width:none}
.aula__mat{padding:var(--sp-4) 18px; margin-bottom:var(--sp-5); background:var(--s-2); border-color:transparent}
.aula__mat h3{font-size:var(--t-s); font-family:var(--f); font-weight:600; margin-bottom:var(--sp-2)}
.aula__mat ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.aula__mat a:not(.btn){display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--link)}
.aula__mat .ico{width:18px; height:18px}
.aula__mat small{color:var(--fg-dim)}
.leccion__nav{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding-top:var(--sp-4); border-top:1px solid var(--line)}
.leccion--hilos h3{font-size:var(--t-1); font-family:var(--f); font-weight:600; margin-bottom:var(--sp-4)}
.cert-ok .ico{width:20px; height:20px; vertical-align:-4px; color:var(--acc-ink)}

/* Preguntas como comentarios */
.hilo{display:flex; gap:var(--sp-3); align-items:flex-start; padding-block:var(--sp-4); border-top:1px solid var(--line)}
.leccion > .lede + .hilo,.leccion > h3 + .hilo{border-top:0; padding-top:0}
.hilo__av{width:36px; height:36px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--s-3); color:var(--fg); font-size:var(--t--2); font-weight:600}
.hilo__av--damge{background:var(--navy); color:var(--c-gold)}
.hilo__cuerpo{flex:1; min-width:0}
.hilo__cuerpo p{margin:0; line-height:1.55}
.hilo__cuerpo .hilo__meta{font-size:var(--t--1); color:var(--fg-dim); margin-bottom:2px}
.hilo__meta b{color:var(--fg); font-weight:600}
.hilo--resp{margin-top:var(--sp-3); padding:var(--sp-3) 0 0; border-top:0}
.hilo--resp .hilo__av{width:30px; height:30px}
.hilo__cuerpo .hilo__pend,.hilo__pend{margin-top:6px; font-size:var(--t--1); color:var(--fg-dim)}
.hilo--caja textarea{width:100%; font:inherit; min-height:52px; resize:vertical; margin-bottom:var(--sp-2)}
.hilo--caja .btn{margin-left:auto; display:flex}

.examen fieldset{padding:var(--sp-4) 18px; margin:0 0 14px}
.examen legend{font-weight:600; padding:0 6px}
.examen legend span{color:var(--acc-ink)}
.examen label{display:flex; gap:10px; align-items:flex-start; padding:var(--sp-2) 0; cursor:pointer}
.examen input{width:18px; height:18px; margin-top:2px; accent-color:var(--acc)}
.cert-form{max-width:560px}
.cert-form input{width:100%}
.sesiones__ic{color:var(--acc-ink); display:inline-flex}
.sesiones__ic .ico{width:18px; height:18px}
@media (max-width:900px){
  .aula{grid-template-columns:1fr}
  .aula__side{position:static; max-height:none}
  .leccion__hd{flex-direction:column}
  .aula__main{order:-1}   /* en el teléfono, primero la lección; el temario debajo */
}

/* Mis cursos: tarjetas con avance (el «Classroom» de Skool) */
.clases{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--sp-5)}
.clase{position:relative; display:flex; flex-direction:column; background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease-ui), border-color var(--d-ui) var(--ease-ui)}
.clase:hover{border-color:var(--line-2); box-shadow:var(--e-2); transform:translateY(-3px)}
.clase__cv{position:relative; aspect-ratio:16/9; background:var(--navy); overflow:hidden}
.clase__cv img{width:100%; height:100%; object-fit:cover; display:block}
.clase__bd{padding:var(--sp-4) 18px 18px; display:flex; flex-direction:column; gap:var(--sp-2); flex:1}
.clase h2{font-family:var(--f); font-size:var(--t-1); font-weight:600; line-height:1.35; margin:0}
.clase h2 a{color:var(--fg); text-decoration:none}
.clase h2 a::after{content:""; position:absolute; inset:0}
.clase h2 a:focus-visible{outline:none}
.clase:has(h2 a:focus-visible){outline:2px solid var(--sec); outline-offset:2px}
.clase__bd > p{margin:0; font-size:var(--t--1); color:var(--fg-dim); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.clase__av{margin-top:auto; padding-top:var(--sp-2)}
.clase__av .avance{height:6px}
.clase__av .avance__t{margin:6px 0 0}
.clase__lock{position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:6px; background:color-mix(in srgb,var(--navy) 72%,transparent); color:var(--c-white); font-size:var(--t--1); font-weight:600}
.clase__lock .ico{width:26px; height:26px}
.clase__renovar{position:relative; z-index:2; align-self:flex-start}
.clase--mas{border-style:dashed; border-color:var(--line-2); justify-content:center; align-items:center; text-align:center; min-height:220px; padding:var(--sp-5); gap:var(--sp-2); color:var(--fg-dim); text-decoration:none}
.clase--mas .ico{width:28px; height:28px; color:var(--acc-ink)}
.clase--mas b{color:var(--fg)}

/* /nosotros: ficha de la entidad (v2.1, GEO) */
.ficha-band{padding-block:clamp(40px,5vw,72px)}
.ficha{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px,4vw,56px); align-items:start}
.ficha__txt h2{font-size:var(--t-2); margin-bottom:var(--sp-4)}
.ficha__txt p{font-size:var(--t-0); line-height:1.75; margin:0; max-width:68ch}
.ficha__datos{margin:0; padding:var(--sp-5) var(--sp-6); background:var(--s-2); border:1px solid var(--line); border-radius:var(--r-lg); font-size:var(--t--1)}
.ficha__datos div{display:grid; grid-template-columns:9em 1fr; gap:var(--sp-3); padding-block:10px; border-bottom:1px solid var(--line)}
.ficha__datos div:last-child{border-bottom:0}
.ficha__datos dt{color:var(--fg-dim)}
.ficha__datos dd{margin:0; color:var(--fg); font-weight:500; overflow-wrap:anywhere}
.ficha__datos a:not(.btn){color:var(--link)}
@media (max-width:900px){.ficha{grid-template-columns:1fr}}

/* Respuestas rapidas: enlaces a las paginas de una seccion (v2.2.0) */
.guias__lista{max-width:var(--maxw); margin:0 auto; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-3)}
.guias__lista a{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); color:var(--fg); text-decoration:none; font-weight:500; line-height:1.4;
  transition:border-color var(--d-state) var(--ease-ui), transform var(--d-ui) var(--ease)}
.guias__lista a:hover{border-color:var(--acc); transform:translateY(-2px)}
.guias__lista .ico{width:22px; height:22px; flex:none; color:var(--acc-ink)}

/* ==========================================================
   PÁGINAS CORTAS DE FONDO DE EMBUDO (v2.1, Landing::PAGINAS)
   Una columna de lectura: respuesta, «En corto» y un botón arriba.
   ========================================================== */
.lp-cab .phead__txt{max-width:68ch}
.lp-cab .lede{max-width:none}
.lp-breve{margin:var(--sp-5) 0 var(--sp-6); max-width:none}
.lp-breve p:last-child{margin:0; line-height:1.6}
.lp{padding-top:clamp(36px,5vw,64px)}
.lp-tabla{max-width:68ch; margin:0 auto clamp(28px,4vw,44px)}
.lp-tabla tbody th{width:auto}
.lp-cuerpo h2:first-child{margin-top:0}
.lp-faq{max-width:68ch; margin:clamp(28px,4vw,44px) auto 0}
.lp-faq .faq-caja{display:block}
.lp-faq h2{font-size:var(--t-2)}
.lp-firma{max-width:68ch; margin:clamp(28px,4vw,44px) auto 0; padding:var(--sp-5) 0 0; border-top:1px solid var(--line); color:var(--fg-dim); line-height:1.6}
.lp-firma p{margin:0 0 var(--sp-2); font-size:var(--t--1)}
.lp-firma b{color:var(--fg); font-weight:600}
.lp-firma a:not(.btn){color:var(--link)}

/* ==========================================================
   FORMULARIOS
   ========================================================== */
.form{max-width:600px; margin-inline:auto}
.form--ancho{max-width:820px}
.form--izq{margin-inline:0}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label,.field > span{font-size:var(--t--1); font-weight:500}
.field input,.field textarea,.field select{padding:12px 14px; min-height:48px; border:1px solid var(--line-3); border-radius:var(--r); font:inherit; font-size:var(--t-0); background:var(--bg); color:var(--fg);
  transition:border-color var(--d-state) var(--ease-ui), background var(--d-state) var(--ease-ui)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--fg-dim)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--acc); background:var(--s-1); outline:2px solid var(--acc-line); outline-offset:0}
.field textarea{min-height:120px; resize:vertical}
.field__help{font-size:var(--t--1); color:var(--fg-dim-2); font-weight:400}
.field--check{flex-direction:row; align-items:flex-start; gap:10px}
.field--check input{width:18px; height:18px; min-height:0; margin-top:3px; accent-color:var(--acc)}
.field--check label{font-weight:400; color:var(--fg-dim); line-height:1.5}
.fila-2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.form__acciones{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; margin-top:var(--sp-2)}
.form__t{margin-top:22px}
@media (max-width:680px){.fila-2{grid-template-columns:1fr}}

/* Avisos: filete completo + color del estado, nunca solo el color */
.aviso{padding:14px var(--sp-4); border-radius:var(--r); font-size:var(--t--1); line-height:1.5; margin-bottom:var(--sp-4); border:1px solid var(--line-2); background:var(--s-1); color:var(--fg)}
.aviso--ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent); background:color-mix(in srgb,var(--ok) 5%,var(--s-1)); color:var(--ok)}
.aviso--error{border-color:color-mix(in srgb,var(--risk) 40%,transparent); background:color-mix(in srgb,var(--risk) 4%,var(--s-1)); color:var(--risk)}
.aviso--warn{border-color:var(--acc-line); background:var(--acc-soft); color:var(--acc-ink)}
.aviso p{margin:0}
.aviso p + p{margin-top:var(--sp-2)}
.aviso a:not(.btn){color:inherit; font-weight:600}

/* Opciones de radio con aspecto de botón (embudo, reclamaciones) */
.opts{display:grid; gap:9px}
.opts--form{margin-bottom:14px}
.opts--form .opt{width:100%}
.opt{display:flex; align-items:center; gap:13px; padding:15px var(--sp-4); text-align:left; border-color:var(--line-2); border-radius:var(--r);
  transition:background var(--d-state) var(--ease-ui), border-color var(--d-state) var(--ease-ui)}
.opt:hover{background:var(--s-2); border-color:var(--line-3)}
.opt[aria-pressed="true"],.opt:has(input:checked){background:var(--acc-soft); border-color:var(--acc)}
.opt input[type="radio"]{position:absolute; opacity:0; pointer-events:none}
.opt:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:3px}
.opt__i{width:36px; height:36px}
.opt__i svg{width:18px; height:18px}
.opt__t{display:block; font-weight:500; font-size:var(--t-0); letter-spacing:-.015em}
.opt__d{display:block; font-size:var(--t--1); color:var(--fg-dim); margin-top:2px}
.q{font-size:var(--t-2); font-weight:600; letter-spacing:-.02em; margin-bottom:5px}
.q-help{font-size:var(--t--1); color:var(--fg-dim); margin-bottom:18px}

/* Barras de pasos y de fuerza de contraseña */
.pasos{display:flex; gap:6px; margin-bottom:var(--sp-5)}
.pasos span{height:3px; flex:1; border-radius:var(--r-pill); background:var(--line-2)}
.pasos span.on{background:var(--acc)}
.fuerza{height:4px; border-radius:var(--r-pill); background:var(--line-2); overflow:hidden; margin-top:-6px; margin-bottom:var(--sp-3)}
.fuerza i{display:block; height:100%; width:0; background:var(--acc); transition:width var(--d-ui) var(--ease-ui)}
.fuerza[data-n="1"] i{width:25%; background:var(--risk)}
.fuerza[data-n="2"] i{width:50%; background:var(--acc)}
.fuerza[data-n="3"] i{width:75%; background:var(--acc)}
.fuerza[data-n="4"] i{width:100%; background:var(--ok)}
.pwf{margin:6px 0 10px}
.pwf-barra{display:flex; gap:var(--sp-1); height:4px}
.pwf-barra i{flex:1; border-radius:var(--r-pill); background:var(--line-2)}
.pwf-barra i.on{background:var(--acc)}
.pwf[data-nivel="0"] .pwf-barra i.on,.pwf[data-nivel="1"] .pwf-barra i.on{background:var(--risk)}
.pwf[data-nivel="4"] .pwf-barra i.on{background:var(--ok)}
.pwf-texto{font-size:var(--t--1); color:var(--fg-dim); margin-top:6px; min-height:1.2em}

/* Miniatura de documento (libro de reclamaciones, notas de la portada) */
.art{background:var(--s-1); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:14px; font-size:var(--t--1); line-height:1.45; color:var(--fg-dim);
  font-variant-numeric:tabular-nums; height:186px; display:flex; flex-direction:column; gap:7px}
.art--auto{height:auto; margin-bottom:var(--sp-6)}
.art__hd{display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--fg); font-weight:500}
.art__rule{height:1px; background:var(--line-2); margin:2px 0}
.art__row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3)}
.art__row b{font-weight:400; color:var(--fg)}

/* Validar certificado */
.validar{max-width:560px; margin:0 auto; display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; padding:var(--sp-5); background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e-1)}
.validar .field{flex:1 1 280px; margin:0}
.validar input{text-transform:uppercase; letter-spacing:.04em}
.validado{max-width:560px; margin:var(--sp-6) auto 0; padding:var(--sp-5) 22px; border-color:var(--line-2)}
.validado--ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent); background:color-mix(in srgb,var(--ok) 6%,var(--s-1))}
.validado--no{border-color:color-mix(in srgb,var(--risk) 40%,transparent)}
.validado__t{display:flex; align-items:center; gap:var(--sp-2); font-weight:700; font-size:var(--t-1); margin-bottom:10px}
.validado--ok .validado__t{color:var(--ok)}
.validado--no .validado__t{color:var(--risk)}
.validado__t .ico{width:22px; height:22px}
.validado dl{display:grid; grid-template-columns:auto 1fr; gap:6px var(--sp-4); margin:0}
.validado dt{color:var(--fg-dim); font-size:var(--t--1)}
.validado dd{margin:0; font-weight:600}

/* ==========================================================
   EMBUDO «Cuéntanos tu caso» (modal)
   ========================================================== */
.ov{position:fixed; inset:0; z-index:100; background:color-mix(in srgb,var(--navy) 74%,transparent); backdrop-filter:blur(4px); display:none; place-items:center; padding:18px; overflow-y:auto}
.ov.open{display:grid}
.modal{background:var(--bg); border-radius:var(--r-lg); width:min(600px,100%); overflow:hidden; box-shadow:var(--e-3); animation:pop var(--d-ui) var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal__hd{background:var(--bg); background-image:var(--rayado); color:var(--fg); padding:var(--sp-5) var(--sp-6); display:flex; align-items:flex-start; gap:14px; border-bottom:3px solid var(--gold-2)}
.modal__tit{flex:1}
.modal__hd h2{font-size:var(--t-2); color:var(--fg)}
.modal__hd p{font-size:var(--t--1); color:var(--fg-dim); margin-top:5px}
.modal__x{margin-left:auto; color:var(--fg-dim); font-size:24px; line-height:1; padding:0 6px; min-width:44px; min-height:44px}
.modal__x:hover{color:var(--fg)}
.pips{display:flex; gap:5px; margin-top:14px}
.pip{height:3px; flex:1; border-radius:var(--r-pill); background:color-mix(in srgb,var(--fg) 18%,transparent); transition:background var(--d-ui) var(--ease-ui)}
.pip.on{background:var(--acc)}
.modal__bd{padding:var(--sp-6)}
.recap{background:var(--s-1); border:1px solid var(--line); border-radius:var(--r); padding:14px var(--sp-4); margin-bottom:var(--sp-4)}
.recap__hd{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:9px; font-size:var(--t--1); font-weight:500; color:var(--acc-ink)}
.recap__hd svg{width:14px; height:14px; flex-shrink:0}
.recap__v{font-weight:500}
.recap__frase{font-family:var(--f); font-weight:500; font-size:var(--t-1); line-height:1.4; margin:0}
.wa-note{font-size:var(--t--1); color:var(--fg-dim); text-align:center; margin-top:var(--sp-3); line-height:1.5}
.modal__ft{display:flex; gap:10px; align-items:center; margin-top:var(--sp-5)}
.back{color:var(--fg-dim); font-size:var(--t--1); font-weight:500; padding:var(--sp-2) 2px; min-height:44px}
.back:hover{color:var(--acc-ink)}

/* ==========================================================
   ACCESO (ingresar, registro, olvidé): panel de marca + hoja
   ========================================================== */
.cuenta{min-height:100vh; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); background:var(--bg)}
.cuenta__lado{position:relative; overflow:hidden; isolation:isolate; background:var(--bg); background-image:var(--rayado); padding:clamp(32px,5vw,72px); display:flex; flex-direction:column; justify-content:space-between; gap:var(--sp-8)}
.cuenta__lado::before{content:""; position:absolute; left:-20%; bottom:-30%; width:80%; aspect-ratio:1; border-radius:50%; z-index:-1; background:radial-gradient(closest-side,color-mix(in srgb,var(--c-sec) 30%,transparent),transparent)}
.cuenta__lado::after{content:""; position:absolute; top:0; bottom:0; right:0; width:3px; background:linear-gradient(180deg,var(--acc),var(--gold-2))}
.cuenta__lado img{height:48px; width:auto}
.cuenta__frase{font-family:var(--f-d); font-weight:700; font-size:var(--t-3); line-height:1.2; max-width:16ch; color:var(--fg)}
.cuenta__puntos{list-style:none; margin:var(--sp-6) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); color:var(--fg-dim)}
.cuenta__puntos li{display:flex; align-items:center; gap:10px}
.cuenta__puntos .ico{width:20px; height:20px; color:var(--acc)}
.cuenta__pie{font-size:var(--t--1); color:var(--fg-dim-2)}
.cuenta__hoja{display:grid; place-items:center; padding:clamp(24px,4vw,56px) var(--gut)}
.cuenta-caja{width:min(440px,100%); padding:clamp(24px,3vw,40px); box-shadow:var(--e-2)}
.cuenta-caja h1{font-size:var(--t-3); margin:0 0 6px}
.cuenta-caja .lede{font-size:var(--t--1); margin-bottom:var(--sp-5); max-width:none}
.cuenta-marca{display:flex; align-items:center; gap:10px; margin-bottom:22px; text-decoration:none; color:inherit}
.cuenta-marca img{height:36px; border-radius:var(--r-sm)}
.cuenta-marca span{font-size:var(--t--1); color:var(--fg-dim)}
.cuenta__lado ~ .cuenta__hoja .cuenta-marca{display:none}
.cuenta-form .btn{width:100%; margin-top:6px}
.clave{position:relative; display:block}
.clave > input[type]{width:100%; padding-right:48px}  /* [type] gana a .f input del panel */
.clave__ojo{position:absolute; top:50%; right:4px; transform:translateY(-50%); display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:var(--r-sm); background:none; color:var(--fg-dim); cursor:pointer}
.clave__ojo:hover{color:var(--fg)}
.clave__ojo svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.oauth{display:grid; gap:10px; margin-top:var(--sp-4)}
.oauth__btn{display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:10px 16px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--card); color:var(--fg); font-weight:500; text-decoration:none; transition:border-color var(--d-ui), box-shadow var(--d-ui)}
.oauth__btn:hover{border-color:var(--fg-dim); box-shadow:var(--e-1)}
.oauth__btn svg{width:20px; height:20px; flex:none}
.oauth__nota{font-size:var(--t--2); color:var(--fg-dim); margin:2px 0 0; text-align:center}
.oauth__nota a{color:var(--link)}
.oauth__o{display:flex; align-items:center; gap:12px; font-size:var(--t--1); color:var(--fg-dim); margin:0 0 2px}
.oauth__o::before,.oauth__o::after{content:""; flex:1; border-top:1px solid var(--line)}
.cuenta-olvide{font-size:var(--t--1); margin:-6px 0 var(--sp-3); text-align:right}
.cuenta-olvide a:not(.btn),.cuenta-pie a:not(.btn){color:var(--link); text-decoration:none}
.cuenta-olvide a:hover{text-decoration:underline; text-underline-offset:3px}
.cuenta-pie{font-size:var(--t--1); color:var(--fg-dim); margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line); text-align:center; line-height:1.6}
.cuenta-pie a:not(.btn){text-decoration:underline; text-underline-offset:3px; font-weight:500}
@media (max-width:900px){
  .cuenta{grid-template-columns:1fr; min-height:0}
  .cuenta__lado{padding-block:var(--sp-7); gap:var(--sp-5)}
  .cuenta__lado::after{top:auto; left:0; width:auto; height:3px; background:linear-gradient(90deg,var(--acc),var(--gold-2))}
  .cuenta__frase{font-size:var(--t-2); max-width:none}
  .cuenta__puntos,.cuenta__pie{display:none}
}

/* ==========================================================
   MI CUENTA
   ========================================================== */
.mc{max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:240px minmax(0,1fr); gap:clamp(24px,4vw,48px); padding-block:clamp(28px,4vw,52px)}
.mc__side{display:flex; flex-direction:column; gap:var(--sp-1); position:sticky; top:calc(var(--hdr-h) + var(--sp-4)); align-self:start}
.mc__side a{position:relative; padding:10px 14px; border-radius:var(--r); color:var(--fg-dim); text-decoration:none; font-size:var(--t-0);
  transition:background var(--d-state) var(--ease-ui), color var(--d-state) var(--ease-ui)}
.mc__side a:hover{background:var(--s-2); color:var(--fg)}
.mc__side a[aria-current="page"]{background:var(--s-1); color:var(--fg); font-weight:500; box-shadow:inset 0 0 0 1px var(--line)}
.mc__side a[aria-current="page"]::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:var(--r-pill); background:var(--acc)}
.mc__side .mc__sep{height:1px; background:var(--line); margin:10px 0}
.mc__side a{display:flex; align-items:center; gap:10px}
.mc__side a .ico{width:18px; height:18px; flex-shrink:0; color:var(--sec)}
/* v2.8.0: en el movil el menu es una lista tipo app en el Resumen y cada
   seccion lleva «← Mi cuenta». En escritorio, solo el lateral. */
.mc__lista,.mc__volver{display:none}
.mc h1{font-size:var(--t-3); margin-bottom:6px}
.mc__hd{margin-bottom:clamp(20px,3vw,32px)}
.mc__hd .lede{max-width:none}
.mc h2{font-size:var(--t-1)}
.tarjetas{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:clamp(24px,3vw,36px)}
.tarjeta{padding:var(--sp-5) 22px; display:flex; flex-direction:column; gap:6px}
.tarjeta b{font-family:var(--f-d); font-size:var(--t-3); font-weight:700; line-height:1; color:var(--navy)}
.tarjeta span{font-size:var(--t--1); color:var(--fg-dim)}
.tarjeta a:not(.btn){font-size:var(--t--1); color:var(--link); text-decoration:none; margin-top:auto; padding-top:var(--sp-2)}
.tarjeta a:hover{text-decoration:underline; text-underline-offset:3px}
.bloque{padding:clamp(18px,2.4vw,28px); margin-bottom:clamp(18px,2.4vw,28px)}
.bloque h2{font-size:var(--t-1); margin-bottom:14px}
.bloque .btn{margin-top:var(--sp-1)}
.tabla{width:100%; border-collapse:collapse; font-size:var(--t--1)}
.tabla th,.tabla td{text-align:left; padding:var(--sp-3) 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla th{color:var(--fg-dim); font-weight:500; font-size:var(--t--2); letter-spacing:.06em; text-transform:uppercase}
.tabla td .btn{margin:0}
.tabla small,.tabla .dim{font-size:var(--t--1)}
.pago .btn{margin-top:var(--sp-2)}
.pago__acc{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
/* Pagar con tarjeta (Izipay): resumen a la izquierda, formulario a la derecha */
.pago-tarjeta{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(18px,2.4vw,28px); align-items:start}
.pago-tarjeta .bloque{margin:0}
.pago-tarjeta__resumen ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.pago-tarjeta__resumen li,.pago-tarjeta__total{display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--t-s)}
.pago-tarjeta__total{margin:var(--sp-4) 0 var(--sp-2); padding-top:var(--sp-4); border-top:1px solid var(--line); font-weight:600}
.pago-tarjeta__total b{font-family:var(--f-d); font-size:var(--t-2)}
.pago-tarjeta .kr-embedded{margin:var(--sp-2) 0 var(--sp-4); font-family:var(--f)}
.pago-tarjeta .kr-embedded .kr-payment-button{background:var(--acc); border-radius:var(--r); min-height:48px; font-weight:600}
.pago-tarjeta .kr-embedded .kr-payment-button:hover{background:var(--acc-2)}
.pago-tarjeta__otra{margin-top:var(--sp-3); text-align:center}
.pago-tarjeta__otra a:not(.btn){color:var(--link)}
@media (max-width:860px){.pago-tarjeta{grid-template-columns:1fr}}
@media (max-width:980px){
  .mc{grid-template-columns:1fr}
  .mc__side{display:none}
  .mc__volver{display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; margin-bottom:var(--sp-3); font-weight:600; color:var(--fg); text-decoration:none}
  .mc__lista{display:flex; flex-direction:column; margin-bottom:clamp(24px,3vw,36px)}
  .mc__lista a{display:flex; align-items:center; gap:14px; min-height:56px; padding:var(--sp-3) var(--sp-4); background:var(--s-1); border:1px solid var(--line); border-top-width:0; color:var(--fg); font-weight:500; text-decoration:none}
  .mc__lista a:first-child{border-top-width:1px; border-radius:var(--r-lg) var(--r-lg) 0 0}
  .mc__lista a:nth-last-child(3){border-radius:0 0 var(--r-lg) var(--r-lg)}
  .mc__lista a::after{content:"\203A"; margin-left:auto; font-size:1.375rem; line-height:1; color:var(--fg-dim)}
  .mc__lista a:active{background:var(--s-2)}
  .mc__lista .ico{width:22px; height:22px; flex-shrink:0; color:var(--sec)}
  .mc__lista .mc__sep{height:var(--sp-4)}
  .mc__lista .mc__salir{width:100%}
  .tarjetas{grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-bottom:var(--sp-4)}
  .tarjeta{padding:var(--sp-3); gap:2px}
  .tarjeta b{font-size:var(--t-2)}
  .tarjeta a:not(.btn){display:none}
}
@media (max-width:620px){
  .tabla thead{display:none}
  .tabla tr{display:grid; gap:var(--sp-1); padding:var(--sp-3) 0; border-bottom:1px solid var(--line)}
  .tabla td{border:0; padding:2px 0}
}

/* ==========================================================
   ERROR (404, 403, 500) Y GRACIAS
   ========================================================== */
.err-page{min-height:60vh; display:grid; place-items:center; padding:clamp(40px,8vw,120px) var(--gut); text-align:center}
.err-page > div{max-width:640px; padding:clamp(28px,5vw,56px); background:var(--s-1); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e-2)}
.err-page b{display:block; font-family:var(--f-d); font-size:var(--t-4); font-weight:700; color:var(--acc-ink); line-height:1}
.err-page h1{font-size:var(--t-3); margin:14px 0 10px}
.err-page p{color:var(--fg-dim); max-width:46ch; margin-inline:auto}
.err-page p + p{margin-top:var(--sp-3)}
.err-page p .btn{margin:22px 5px 0}
.err-page code{display:block; margin-top:18px; font-size:var(--t--1); color:var(--fg-dim-2)}
.gracias__ic{display:inline-grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--acc-soft); color:var(--acc-ink); border:1px solid var(--acc-line); box-shadow:0 0 0 8px var(--s-1), 0 0 0 9px var(--line)}
.gracias__ic .ico{width:34px; height:34px}
.err-links{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2) var(--sp-5); margin-top:28px; padding-top:var(--sp-5); border-top:1px solid var(--line)}
.err-links a:not(.btn){color:var(--link); font-weight:500}

/* ==========================================================
   PIE (brief 4.3), FLOTANTES (brief 4.4) Y COOKIES
   ========================================================== */
.foot{background:var(--bg); background-image:var(--rayado); padding:clamp(48px,6vw,80px) var(--gut) 28px; border-top:3px solid var(--gold-2)}
.foot__in{max-width:var(--maxw); margin-inline:auto}
.foot__top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:clamp(24px,4vw,48px); padding-bottom:36px; border-bottom:1px solid var(--line)}
.foot__h{font-size:var(--t--1); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--acc-ink); margin-bottom:var(--sp-4)}
.foot ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:var(--t-s); color:var(--fg-dim)}
.foot a{color:var(--fg-dim); text-decoration:none; transition:color var(--d-state) var(--ease-ui)}
.foot a:hover{color:var(--fg); text-decoration:underline; text-underline-offset:3px}
.foot__logo img{height:48px; width:auto; margin-bottom:18px}
.foot__firma{font-family:var(--f); font-weight:600; font-size:var(--t-1); color:var(--fg); margin:0 0 10px}
.foot__txt{font-size:var(--t-s); color:var(--fg-dim); max-width:34ch; line-height:1.6}
.foot__redes{display:flex; gap:10px; margin-top:18px}
.foot__redes a{display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); color:var(--fg)}
.foot__redes a:hover{border-color:var(--acc); color:var(--acc-ink)}
.foot__redes svg{width:18px; height:18px}
.foot__legal{padding-top:22px; display:flex; flex-wrap:wrap; gap:10px var(--sp-6); align-items:center; justify-content:space-between; font-size:var(--t--1); color:var(--fg-dim); line-height:1.55}
.foot__legal nav{display:flex; flex-wrap:wrap; gap:6px 18px}
.foot__cookies{color:var(--fg-dim); font-size:inherit; padding:0; min-height:24px}
.foot__cookies:hover{color:var(--fg); text-decoration:underline; text-underline-offset:3px}
.foot__seguro{display:inline-flex; align-items:center; gap:6px}
.foot__seguro .ico{width:14px; height:14px; color:var(--ok)}
.foot__bot{margin-top:14px; font-size:var(--t--1); color:var(--fg-dim-2)}
/* v1.9: la marca a lo ancho, cortada por el borde, como firma del pie */
.foot{overflow:hidden}
.foot__marca{margin:clamp(24px,4vw,48px) 0 calc(-.26 * clamp(5rem,21vw,19rem)); font-family:var(--f-d); font-weight:700; font-size:clamp(5rem,21vw,19rem); line-height:1; letter-spacing:-.02em; text-align:center; user-select:none;
  color:transparent; -webkit-text-stroke:1px var(--acc-line); background:linear-gradient(180deg,var(--acc-soft),transparent 70%); -webkit-background-clip:text; background-clip:text}
@media (max-width:980px){.foot__top{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.foot__top{grid-template-columns:1fr}}

.wa-float{position:fixed; right:var(--sp-5); bottom:var(--sp-5); z-index:65; width:60px; height:60px; border-radius:50%;
  background:var(--wa); color:var(--c-white); display:grid; place-items:center; box-shadow:var(--e-2); transition:transform var(--d-state) var(--ease-ui)}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:32px; height:32px}
.to-top{position:fixed; right:28px; bottom:92px; z-index:64; width:44px; height:44px; border-radius:50%;
  background:var(--navy); color:var(--c-white); display:grid; place-items:center; box-shadow:var(--e-1), 0 0 0 1px color-mix(in srgb,var(--c-white) 35%,transparent);
  opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity var(--d-ui) var(--ease-ui), transform var(--d-ui) var(--ease)}
.to-top.show{opacity:.9; pointer-events:auto; transform:none}
.to-top:hover{opacity:1}
.to-top .ico{width:18px; height:18px}
.cookies{position:fixed; left:var(--sp-4); bottom:var(--sp-4); z-index:66; width:min(440px,calc(100vw - 32px)); background:var(--s-1); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e-3); padding:var(--sp-5)}
.cookies p{font-size:var(--t-s); color:var(--fg-dim); line-height:1.55}
.cookies p a:not(.btn){color:var(--link); text-decoration:underline; text-underline-offset:3px}
.cookies__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.cookies__acts .btn{flex:1}
.cookies details{margin-top:var(--sp-3); font-size:var(--t-s)}
.cookies summary{cursor:pointer; color:var(--link); font-weight:500; min-height:44px; display:flex; align-items:center}
.cookies label{display:flex; gap:10px; align-items:flex-start; margin:10px 0; color:var(--fg-dim)}
.cookies input{width:18px; height:18px; margin-top:3px; accent-color:var(--acc)}
.cookies label b{color:var(--fg); font-weight:600}

/* ==========================================================
   MOVIMIENTO — el mismo en todas las páginas
     · Solo opacity y transform se animan de forma continua.
     · Todo lo continuo se apaga con prefers-reduced-motion.
     · Editando (body.qp-editando) no se anima nada.
   ========================================================== */
/* Piezas sueltas (.rv) y secciones enteras (.anim-*, elegidas en el editor) */
.js .rv{opacity:0; transform:translateY(var(--rise)); transition:opacity var(--d-rev) var(--ease), transform var(--d-rev) var(--ease)}
.js .rv.in{opacity:1; transform:none}
.js .anim-subir,.js .anim-fundido,.js .anim-izquierda,.js .anim-derecha,.js .anim-escala{
  opacity:0; transition:opacity var(--d-sec) var(--ease), transform var(--d-sec) var(--ease)}
.js .anim-subir{transform:translateY(34px)}
.js .anim-izquierda{transform:translateX(-40px)}
.js .anim-derecha{transform:translateX(40px)}
.js .anim-escala{transform:scale(.97)}
.js :is(.anim-subir,.anim-fundido,.anim-izquierda,.anim-derecha,.anim-escala).in{opacity:1; transform:none}
.js .hero:is(.anim-subir,.anim-fundido,.anim-izquierda,.anim-derecha,.anim-escala){opacity:1; transform:none; transition:none}
/* .rv ya sube por su cuenta; las tarjetas animan transform al pasar: al
   entrar, la transición del hover no debe retrasar el revelado. */
.js .rv.in:is(.srv,.pcard,.crs,.post){transition:transform var(--d-ui) var(--ease), box-shadow var(--d-ui) var(--ease-ui), border-color var(--d-ui) var(--ease-ui), opacity var(--d-rev) var(--ease)}

/* Titulares palabra a palabra (solo el H1 de cada página, lo pone app.js) */
.w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em}
.w > span{display:inline-block; transform:translateY(112%); transition:transform 900ms var(--ease); transition-delay:calc(var(--i,0) * 45ms)}
.words-in .w > span{transform:none}

/* Destello del botón principal */
.btn--brand{position:relative; overflow:hidden; isolation:isolate}
.btn--brand::after{content:""; position:absolute; top:-20%; bottom:-20%; left:0; width:38%; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--c-white) 42%,transparent) 50%,transparent 100%);
  transform:translateX(-180%) skewX(-18deg); opacity:0}
@media (hover:hover){.btn--brand:hover::after{animation:sheen 720ms var(--ease) forwards}}
@keyframes sheen{from{transform:translateX(-180%) skewX(-18deg); opacity:1} to{transform:translateX(340%) skewX(-18deg); opacity:1}}

/* Cierre: halo dorado que respira */
.cierre::before{content:""; position:absolute; inset:-30%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 50% 100%,color-mix(in srgb,var(--c-gold) 22%,transparent),transparent 55%); animation:respira 12s ease-in-out infinite alternate}
@keyframes respira{to{transform:scale(1.15) translateY(-4%)}}

/* ---- Editando: nada se esconde ni se mueve ---- */
body.qp-editando :is(.anim-subir,.anim-fundido,.anim-izquierda,.anim-derecha,.anim-escala){opacity:1; transform:none; transition:none}
body.qp-editando .w > span{transform:none; transition:none}

/* ---- Menos movimiento: se apaga todo lo continuo ---- */
@media (prefers-reduced-motion:reduce){
  .js :is(.anim-subir,.anim-fundido,.anim-izquierda,.anim-derecha,.anim-escala){opacity:1; transform:none; transition:none}
  .w > span{transform:none; transition:none}
  .btn--brand:hover::after{animation:none}
  .odo__c{transition:none}
  .portada::before{animation:none}
  .cierre::before,.phead__sello::before,.aula__marca{animation:none}
  .modal{animation:none}
  .srv:hover,.pcard:hover,.crs:hover,.post:hover{transform:none}
  .crs__cv img,.post__cv img{transition:none}
}

/* ==========================================================
   CARRITO (v2.7.0): icono en la cabecera, boton, panel lateral
   y avisos. Verde = agregar, rojo = quitar (pedido del usuario).
   ========================================================== */
.hdr__der{grid-column:4; justify-self:end; display:flex; align-items:center; gap:var(--sp-3)}
.hdr__carro{position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); color:var(--fg); text-decoration:none;
  transition:border-color var(--d-state) var(--ease-ui), background var(--d-state) var(--ease-ui)}
.hdr__carro[hidden]{display:none}
.hdr__carro:hover{border-color:var(--c-ok); background:color-mix(in srgb,var(--c-ok) 8%,transparent)}
.hdr__carro .ico{width:20px; height:20px}
.hdr__carro-n{position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-pill); background:var(--c-ok); color:var(--c-white);
  font-size:12px; font-weight:700; line-height:20px; text-align:center; font-variant-numeric:tabular-nums}
.hdr__carro.salta{animation:carro-salta 560ms var(--ease)}
.hdr__carro.aparece{animation:carro-aparece 420ms var(--ease)}
@keyframes carro-salta{0%{transform:scale(1)}30%{transform:scale(1.2)}60%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes carro-aparece{from{transform:scale(.3); opacity:0}to{transform:scale(1); opacity:1}}
@media (max-width:1023px){
  .hdr__der{grid-column:3; gap:0}
}

/* El boton: verde para agregar; ya dentro, rojo para quitar */
.btn--carro{background:var(--c-ok); color:var(--c-white); border-color:var(--c-ok)}
.btn--carro:hover{background:color-mix(in srgb,var(--c-ok) 85%,#000)}
.btn--carro.is-en{background:transparent; color:var(--risk); border-color:var(--risk)}
.btn--carro.is-en:hover{background:var(--risk); color:var(--c-white)}
.btn--carro :is(.carro-b__si,.carro-b__no){display:inline-flex; align-items:center; gap:var(--sp-2)}
.btn--carro.is-en .carro-b__si,.btn--carro:not(.is-en) .carro-b__no{display:none}
.btn--carro .ico{width:18px; height:18px}
.btn--carro[aria-busy="true"]{opacity:.7; pointer-events:none}
.btn--carro.late{animation:carro-salta 480ms var(--ease)}

/* Panel lateral */
.carro{position:fixed; inset:0; z-index:90}
.carro[hidden]{display:none}
.carro__velo{position:absolute; inset:0; background:rgb(11 31 75 / .45); opacity:0; transition:opacity 240ms var(--ease-ui)}
.carro__panel{position:absolute; top:0; right:0; bottom:0; width:min(420px,100%); display:flex; flex-direction:column; background:var(--c-white); color:var(--c-ink);
  box-shadow:var(--e-3); transform:translateX(100%); transition:transform 320ms var(--ease)}
.carro.abierto .carro__velo{opacity:1}
.carro.abierto .carro__panel{transform:none}
.carro__hd{display:flex; align-items:center; justify-content:space-between; padding:var(--sp-5) var(--sp-5) var(--sp-4); border-bottom:1px solid var(--line)}
.carro__hd h2{font-size:var(--t-2); margin:0}
.carro__x{width:40px; height:40px; display:grid; place-items:center; border-radius:50%; color:var(--fg)}
.carro__x:hover{background:var(--gris)}
.carro__cuerpo{flex:1; overflow-y:auto; padding:var(--sp-4) var(--sp-5) var(--sp-6)}
.carro__l{list-style:none; margin:0 0 var(--sp-4); padding:0}
.carro__i{display:grid; grid-template-columns:64px 1fr auto auto; gap:var(--sp-3); align-items:center; padding:var(--sp-3) var(--sp-2); margin:0 calc(-1 * var(--sp-2)); border-bottom:1px solid var(--line); border-radius:var(--r-sm)}
.carro__i img,.carro__ph{width:64px; height:48px; border-radius:var(--r-sm); object-fit:cover; background:var(--gris); display:grid; place-items:center; color:var(--fg-dim)}
.carro__ph .ico{width:22px; height:22px}
.carro__txt{min-width:0}
.carro__txt a{display:block; color:var(--fg); font-weight:600; text-decoration:none; line-height:1.3}
.carro__txt a:hover{text-decoration:underline; text-underline-offset:3px}
.carro__txt small{color:var(--fg-dim); font-size:var(--t--2)}
.carro__quitar{width:38px; height:38px; display:grid; place-items:center; border-radius:50%; color:var(--risk); border:1px solid transparent; background:transparent; cursor:pointer;
  transition:background var(--d-state) var(--ease-ui), border-color var(--d-state) var(--ease-ui)}
.carro__quitar:hover,.carro__quitar:focus-visible{background:color-mix(in srgb,var(--risk) 10%,transparent); border-color:color-mix(in srgb,var(--risk) 45%,transparent)}
.carro__quitar .ico{width:18px; height:18px}
.carro__i.sale{animation:carro-sale 260ms var(--ease-ui) forwards}
.carro__i.entra{animation:carro-entra 900ms var(--ease-ui)}
@keyframes carro-sale{to{opacity:0; transform:translateX(28px)}}
@keyframes carro-entra{from{background:color-mix(in srgb,var(--c-ok) 16%,transparent)}to{background:transparent}}
.carro__total{display:flex; justify-content:space-between; align-items:baseline; margin:var(--sp-4) 0 var(--sp-1); font-weight:600}
.carro__total b{font-size:var(--t-2)}
.carro__pagar{width:100%; justify-content:center; margin-top:var(--sp-4)}
.carro__pagar .ico{width:18px; height:18px}
.carro__vacio{text-align:center; padding:var(--sp-7) 0; color:var(--fg-dim)}
.carro__vacio > .ico{width:40px; height:40px; margin:0 auto var(--sp-3); display:block}
.carro-pagina{max-width:720px; margin:0 auto}

/* Avisos: verde al agregar, rojo al quitar. Arriba a la derecha, cerca del icono. */
.carro-avisos{position:fixed; right:var(--sp-4); top:calc(var(--hdr-h) + var(--sp-3)); z-index:95; display:flex; flex-direction:column; gap:var(--sp-2); pointer-events:none;
  width:min(380px, calc(100vw - 2 * var(--sp-4)))}
/* Con el panel abierto, abajo: arriba taparian la lista */
.carro:not([hidden]) ~ .carro-avisos{top:auto; bottom:var(--sp-4)}
.carro-aviso{display:flex; gap:var(--sp-3); align-items:center; padding:12px var(--sp-4); border-radius:var(--r); color:var(--c-white); font-size:var(--t-s); font-weight:500; line-height:1.4;
  box-shadow:var(--e-3); pointer-events:auto; animation:aviso-entra 280ms var(--ease)}
.carro-aviso--ok{background:var(--c-ok)}
.carro-aviso--quitar,.carro-aviso--error{background:var(--risk)}
.carro-aviso .ico{width:18px; height:18px; flex:none}
.carro-aviso button{margin-left:auto; color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; background:none; border:0; cursor:pointer; font:inherit}
.carro-aviso.sale{animation:aviso-sale 220ms var(--ease-ui) forwards}
@keyframes aviso-entra{from{opacity:0; transform:translateY(-10px) scale(.97)}}
@keyframes aviso-sale{to{opacity:0; transform:translateY(-8px)}}

/* La bolita verde que vuela del boton al carrito */
.carro-vuelo{position:fixed; z-index:96; left:0; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--c-ok);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c-ok) 25%,transparent); pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .carro__panel,.carro__velo{transition:none}
  .hdr__carro.salta,.hdr__carro.aparece,.btn--carro.late,.carro-aviso,.carro-aviso.sale,.carro__i.entra,.carro__i.sale{animation:none}
}