/* =========================================================
   SITIO PERSONAL · Julio Guillen
   Versión del archivo: sitio.css v6 · 2026-10-19 · páginas de servicio por canal (v21)
   Identidad «Panel»: blanco, líneas finas que enmarcan, radios
   de 10 a 16 px, amarillo como resaltador. Hereda los tokens de
   la landing para que sitio y landing se sientan uno solo.
   Solo lo cargan las páginas nuevas; diagnostico.html no se toca.
   ========================================================= */

:root{
  --blanco:#FFFFFF; --papel:#EFEEE8; --tinta:#111111; --grafito:#55544F;
  --borde:#D8D6CE; --borde-s:#E7E5DF; --amarillo:#F5E642; --azul:#2F58C8;
  --consola:#1E1F22; --fondo:#FAFAF7;
  --azul-osc:#1D3A8A; --azul-claro:#EEF2FC; --azul-borde:#DCE3F7;
  --verde-f:#D3EDD9; --verde-t:#135C2C;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --r:10px; --r-g:16px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--tinta);background:var(--fondo);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
img,svg{max-width:100%}
button{font:inherit;color:inherit}
.marco{position:relative;width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.estrecho{max-width:760px}
.gris{color:var(--grafito)}
.mono{font-family:var(--mono)}
.oculto{display:none!important}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:8px}

/* Títulos. El resaltado es un subrayado de resaltador, no un bloque. */
h1,.h1{font-weight:600;font-size:clamp(34px,5.2vw,64px);line-height:1.03;letter-spacing:-.045em;text-wrap:balance}
h2,.h2{font-weight:600;font-size:clamp(28px,4vw,48px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
h3,.h3{font-weight:600;font-size:clamp(19px,2vw,23px);line-height:1.25;letter-spacing:-.02em}
.res{background:linear-gradient(transparent 60%,var(--amarillo) 60%,var(--amarillo) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bajada{margin-top:20px;max-width:38em;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--grafito)}

/* ---------- Barra del último recurso ---------- */
.barra{display:flex;justify-content:center;align-items:center;gap:10px;padding:9px 16px;background:var(--amarillo);color:var(--tinta);font-size:14px;font-weight:500;text-align:center;text-decoration:none}
.barra:hover{background:#F0E030}
.barra .chip{background:var(--tinta);color:var(--blanco);border-color:var(--tinta);font-size:12px;padding:2px 8px;flex:none}

/* ---------- Nav pegajosa ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(250,250,247,.86);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--borde-s)}
.nav .marco{display:flex;align-items:center;gap:16px;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.logo svg{width:26px;height:26px}
.logo b{font-weight:700;font-size:16.5px;letter-spacing:-.02em}
.nav nav{display:none;gap:2px;margin:0 auto}
.nav nav a{font-size:14.5px;font-weight:500;color:var(--grafito);text-decoration:none;padding:7px 12px;border-radius:8px;transition:color .15s,background-color .15s}
.nav nav a:hover{color:var(--tinta);background:var(--papel)}
.nav nav a[aria-current="page"]{color:var(--azul);background:var(--azul-claro)}
.nav .btn{display:none;min-height:38px;padding:8px 14px;font-size:14px;margin-left:auto}
.nav .menu-btn{margin-left:auto;display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r);border:1px solid var(--borde);background:var(--blanco);cursor:pointer}
.nav .menu-btn svg{width:20px;height:20px}
.nav .menu-btn .x{display:none}
.nav.abierto .menu-btn .x{display:block}.nav.abierto .menu-btn .ham{display:none}
.menu-movil{display:none;border-top:1px solid var(--borde-s);background:var(--blanco)}
.nav.abierto .menu-movil{display:block}
.menu-movil a{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--borde-s);font-size:17px;font-weight:500;text-decoration:none}
.menu-movil a[aria-current="page"]{color:var(--azul)}
@media (min-width:900px){
  .nav nav{display:flex}
  .nav .btn{display:inline-flex}
  .nav .menu-btn,.menu-movil{display:none!important}
}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 18px;border-radius:var(--r);border:0;
  background:var(--tinta);color:var(--blanco);font:600 15px/1.2 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(17,17,17,.2),inset 0 1px 0 rgba(255,255,255,.12);transition:background-color .15s,transform .12s}
.btn:hover{background:#2b2b2b}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--blanco);color:var(--tinta);border:1px solid var(--borde);box-shadow:0 1px 2px rgba(17,17,17,.04)}
.btn.sec:hover{background:var(--fondo)}
.btn.ama{background:var(--amarillo);color:var(--tinta);box-shadow:0 1px 2px rgba(17,17,17,.12)}
.btn.ama:hover{background:#FFF06A}
.btn.azul{background:var(--azul)}
.btn.azul:hover{background:#2447A8}
.btn.listo{background:var(--verde-f);color:var(--verde-t);box-shadow:none}
.btn.listo:hover{background:var(--verde-f)}
.btn.ancho{width:100%}
.btn svg{width:16px;height:16px;flex-shrink:0}

/* ---------- Etiquetas y chips ---------- */
.etiqueta{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;border:1px solid var(--borde);background:var(--blanco);font-size:13.5px;font-weight:500}
.etiqueta i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--azul)}
.etiqueta i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blanco)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;border:1px solid var(--borde);background:var(--blanco);font-size:13px;font-weight:500;line-height:1.3}
.chip.tipo{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.chip.pilar{background:var(--papel);border-color:var(--papel);color:var(--grafito)}
.chip.plat{background:var(--azul-claro);border-color:var(--azul-borde);color:var(--azul)}
.fecha{font-family:var(--mono);font-size:12.5px;color:var(--grafito);font-variant-numeric:tabular-nums}

/* Estados del registro, iguales a la landing */
.estado{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;background:rgba(47,88,200,.1);color:var(--azul)}
.estado::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.estado.rech{background:var(--amarillo);color:var(--tinta)}
.estado.env{background:var(--papel);color:var(--grafito)}

/* ---------- Tarjetas ---------- */
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-g);box-shadow:0 1px 2px rgba(17,17,17,.04)}
.rejilla-cards{display:grid;gap:16px}
@media (min-width:700px){.rejilla-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.rejilla-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Card de recurso: aspecto de producto, sin precio */
.card{display:flex;flex-direction:column;gap:14px;padding:20px;transition:border-color .15s,box-shadow .15s}
.card:hover{border-color:#BDBBB3;box-shadow:0 2px 8px rgba(17,17,17,.06)}
.card .cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card h3{font-size:clamp(20px,2.2vw,24px);line-height:1.2}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--azul)}
.card .resumen{font-size:15.5px;line-height:1.5;color:var(--grafito)}
.card .pie-card{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:6px}
.card .nota{font-size:13px;color:var(--grafito)}
.card.vacia{border-style:dashed;box-shadow:none;background:transparent;justify-content:center;color:var(--grafito);font-size:15px}

/* ---------- Filtros tipo píldora ---------- */
.filtros{display:grid;gap:10px;padding:14px 16px;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-g)}
.filtros .fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filtros .fila > span{font-size:13px;color:var(--grafito);min-width:44px}
.filtro{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--borde);background:var(--blanco);font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.filtro:hover{background:var(--fondo)}
.filtro[aria-pressed="true"]{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.conteo{font-size:14px;color:var(--grafito)}

/* ---------- Secciones y superficies ---------- */
/* Alternar: blanco roto, papel, tinta. El ojo descansa cada dos bloques. */
.sec{border-top:1px solid var(--borde-s)}
.sec.papel{background:var(--papel);border-top-color:#E3E1D9}
.sec.papel .tarjeta{box-shadow:none}
.sec.suave{background:var(--azul-claro);border-top-color:var(--azul-borde)}
.sec.suave .tarjeta{box-shadow:none;border-color:var(--azul-borde)}
.sec.tinta{background:var(--tinta);color:var(--blanco);border-top:0}
.sec.tinta .gris,.sec.tinta .bajada{color:#C9CBD1}
.sec.tinta .etiqueta{background:transparent;border-color:#3A3B40;color:var(--blanco)}
.sec.tinta .res{background:var(--amarillo);color:var(--tinta);padding:0 .12em;border-radius:4px}
.sec.tinta .tarjeta{background:#1E1F22;border-color:#34353A;color:var(--blanco)}
.sec > .marco{padding-top:64px;padding-bottom:64px}
@media (min-width:900px){.sec > .marco{padding-top:88px;padding-bottom:88px}}
.sec .cab-sec{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec .cab-sec h2{max-width:17em}
.enlace{font-weight:600;color:var(--azul);text-decoration:none;text-underline-offset:3px}
.enlace:hover{text-decoration:underline}

/* ---------- Hero ---------- */
.hero{padding:44px 0 0;background:radial-gradient(60% 50% at 50% 0%,#fff 0,rgba(255,255,255,0) 70%)}
.hero .marco{text-align:center}
.hero h1{margin:20px auto 0;max-width:14em}
.hero .bajada{margin-left:auto;margin-right:auto}
.hero .acciones{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}

/* Escaparate: una interfaz dibujada, como en la landing */
.escaparate{margin:44px auto 0;max-width:1120px;padding:0 12px;-webkit-mask:linear-gradient(#000 82%,transparent);mask:linear-gradient(#000 82%,transparent)}
.app{display:grid;grid-template-columns:1fr;background:var(--blanco);border:1px solid var(--borde);border-radius:16px 16px 0 0;overflow:hidden;text-align:left;box-shadow:0 1px 2px rgba(17,17,17,.04),0 24px 60px -30px rgba(17,17,17,.25)}
.app-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 18px;border-bottom:1px solid var(--borde-s)}
.app-cab b{font-size:14.5px;font-weight:600}
.app-cab span{flex:none;white-space:nowrap;font-family:var(--mono);font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--papel);color:var(--grafito)}
.app .cuerpo{padding:18px}
.lateral{display:none}
@media (min-width:1000px){
  .app{grid-template-columns:200px minmax(0,1fr)}
  .lateral{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-right:1px solid var(--borde-s);background:var(--fondo)}
  .lateral .it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--grafito)}
  .lateral .it i{width:16px;height:16px;border-radius:4px;background:var(--borde-s)}
  .lateral .it.on{background:var(--blanco);color:var(--tinta);font-weight:500;box-shadow:0 1px 2px rgba(17,17,17,.06)}
  .lateral .it.on i{background:var(--azul)}
}


/* ---------- Página de recurso ---------- */
.cab-recurso{display:grid;gap:18px;padding:26px 22px;align-items:start}
@media (min-width:900px){.cab-recurso{grid-template-columns:minmax(0,1fr) 300px;gap:32px;padding:34px 36px}}
.cab-recurso h1{font-size:clamp(30px,4.4vw,52px)}
.ficha{display:grid;gap:0;border:1px solid var(--borde-s);border-radius:12px;background:var(--fondo);overflow:hidden}
.ficha div{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--borde-s)}
.ficha div:last-child{border-bottom:0}
.ficha dt{color:var(--grafito)}
.ficha dd{margin:0;font-weight:500;text-align:right}
.terminas{display:grid;gap:4px;padding:14px 16px;border-radius:12px;background:var(--azul-claro);border-left:3px solid var(--azul)}
.terminas b{font-size:12.5px;font-weight:600;color:var(--azul)}
.terminas span{font-size:15px}

/* Índice lateral (escritorio) y pestañas (celular): una sección a la vez */
.cuerpo-recurso{display:grid;gap:24px;align-items:start}
@media (min-width:900px){.cuerpo-recurso{grid-template-columns:260px minmax(0,1fr);gap:40px}}
.indice{position:sticky;top:76px;display:none;flex-direction:column;gap:4px;padding:8px}
.indice button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:46px;padding:0 14px;border:0;border-radius:var(--r);background:transparent;font-size:15px;font-weight:500;color:var(--grafito);cursor:pointer;transition:background-color .15s,color .15s}
.indice button:hover{background:var(--fondo);color:var(--tinta)}
.indice button[aria-selected="true"]{background:var(--azul);color:var(--blanco);font-weight:600}
.indice .n{font-family:var(--mono);font-size:12px;width:20px}
.pestanas{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--borde);padding-bottom:0}
.pestanas::-webkit-scrollbar{display:none}
.pestanas button{flex:none;min-height:46px;padding:0 14px;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:transparent;font-size:14.5px;font-weight:500;color:var(--grafito);cursor:pointer;white-space:nowrap}
.pestanas button[aria-selected="true"]{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}
@media (min-width:900px){.indice{display:flex}.pestanas{display:none}}
.panel[hidden]{display:none}
.panel{display:grid;gap:18px;min-height:280px}
.panel h2{font-size:clamp(24px,3vw,34px)}
.panel p{max-width:38em;font-size:clamp(16px,1.6vw,18px);line-height:1.55}
.siguiente{justify-self:start}

/* Causas: tarjetas pequeñas de una idea */
.causas{display:grid;gap:8px}
@media (min-width:600px){.causas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.causas li{padding:14px 16px;border:1px solid var(--borde-s);border-radius:12px;background:var(--blanco);font-size:15px;font-weight:500;line-height:1.4}

/* Requisitos marcables */
.requisitos{display:grid;gap:8px;max-width:640px}
.requisitos button{display:flex;align-items:center;gap:14px;text-align:left;min-height:52px;padding:12px 14px;border:1px solid var(--borde);border-radius:12px;background:var(--blanco);font-size:15.5px;cursor:pointer;transition:border-color .15s,background-color .15s}
.requisitos button i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--borde);background:var(--blanco);transition:background-color .15s,border-color .15s}
.requisitos button i svg{width:14px;height:14px;opacity:0}
.requisitos button[aria-pressed="true"]{border-color:var(--azul)}
.requisitos button[aria-pressed="true"] i{background:var(--azul);border-color:var(--azul)}
.requisitos button[aria-pressed="true"] i svg path{stroke:#fff}
.requisitos button[aria-pressed="true"] i svg{opacity:1}

/* Panel oscuro del prompt / checklist */
.consola{position:relative;background:var(--consola);color:#E6E7EA;border-radius:12px;padding:20px 20px 20px;font-family:var(--mono);font-size:13.5px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.consola .t{position:absolute;top:10px;right:14px;font-size:11px;color:#9A9CA3}
.consola mark{background:var(--amarillo);color:var(--tinta);padding:0 3px;border-radius:3px}
.lista-pasos{display:grid;gap:10px}
.lista-pasos li{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--borde-s);border-radius:12px;background:var(--blanco)}
.lista-pasos b{font-size:16px}
.lista-pasos span{font-size:15px;line-height:1.5;color:var(--grafito)}
.avisos{display:grid;gap:8px;max-width:640px}
.avisos li{display:flex;gap:10px;padding:10px 12px;border-radius:10px;background:var(--papel);font-size:14.5px;line-height:1.45}
.avisos li::before{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--tinta)}
.cita{padding:18px 20px;border-left:3px solid var(--amarillo);font-size:clamp(17px,1.8vw,20px);font-weight:500;line-height:1.45;letter-spacing:-.01em}

/* Pasos, uno a la vez */
.paso-a-paso{display:grid;gap:14px;max-width:720px}
.paso-a-paso .cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.puntos{display:flex;gap:6px}
.puntos i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--azul);background:var(--blanco);transition:background-color .2s}
.puntos i.on{background:var(--azul)}
.paso{display:flex;gap:16px;align-items:flex-start;min-height:130px;padding:22px;border:1px solid var(--borde);border-radius:var(--r-g);background:var(--blanco)}
.paso .num{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--azul-claro);border:1px solid var(--azul-borde);color:var(--azul);font-family:var(--mono);font-weight:600;font-size:16px}
.paso p{font-size:clamp(17px,1.8vw,20px);line-height:1.45}
.paso-a-paso .nav-pasos{display:flex;gap:10px}
.paso-a-paso .nav-pasos .btn:last-child{flex:1}

/* Acordeón, como la FAQ de la landing */
.acordeon{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-g);overflow:hidden}
.acordeon details + details{border-top:1px solid var(--borde-s)}
.acordeon summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;font-size:clamp(16px,1.7vw,18px);font-weight:500}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary:hover{background:var(--fondo)}
.acordeon summary:focus-visible{outline-offset:-3px;border-radius:0}
.acordeon .contenido{padding:0 20px 20px;display:grid;gap:12px;color:var(--grafito);font-size:15.5px;line-height:1.55}
.signo{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:7px;border:1px solid var(--borde);transition:transform .3s ease}
.signo::before,.signo::after{content:"";position:absolute;left:7px;right:7px;top:11px;height:2px;border-radius:1px;background:var(--tinta);transition:transform .3s ease}
.signo::after{transform:rotate(90deg)}
details[open] .signo{transform:rotate(180deg)}
details[open] .signo::after{transform:rotate(0)}

/* Línea base y después, dentro del bloque tinta */
.lineas{display:grid}
.lineas div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 20px;border-top:1px solid var(--borde-s)}
.lineas div:first-child{border-top:0}
.lineas span{font-size:14.5px;color:var(--grafito)}
.lineas b{flex:none;white-space:nowrap;font-family:var(--mono);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lineas div.dif b{background:var(--amarillo);color:var(--tinta);padding:0 .25em;border-radius:6px}

/* ---------- Proyectos ---------- */
.proyectos{display:grid;gap:16px}
@media (min-width:900px){.proyectos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proyecto{display:grid;gap:14px;padding:24px}
.proyecto .mini{border:1px solid var(--borde-s);border-radius:12px;background:var(--fondo);padding:14px;display:grid;gap:8px}
.proyecto .mini .fila{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:12px;color:var(--grafito)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--borde-s);border-radius:10px;overflow:hidden;background:var(--blanco)}
.kpi{padding:10px 12px 8px;min-width:0}
.kpi + .kpi{border-left:1px solid var(--borde-s)}
.kpi .lbl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--grafito)}
.kpi .lbl i{width:8px;height:8px;border-radius:2px}
.kpi .val{display:block;margin-top:2px;font-family:var(--mono);font-weight:600;font-size:clamp(20px,2.6vw,28px);line-height:1.1;font-variant-numeric:tabular-nums}
.kpi.dif{background:linear-gradient(180deg,rgba(245,230,66,.55),rgba(245,230,66,.25))}

/* ---------- Sobre mí ---------- */
.perfil{display:grid;gap:16px}
@media (min-width:900px){.perfil{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.perfil .texto{padding:28px 24px;display:grid;gap:14px;font-size:clamp(16px,1.6vw,18px);line-height:1.55}
.perfil .texto h1{font-size:clamp(30px,4vw,48px)}
.perfil .cargo{font-weight:500;color:var(--grafito)}
.lista-hago{display:grid;gap:0;padding:8px 0}
.lista-hago li{display:flex;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid var(--borde-s);font-size:15.5px}
.lista-hago li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--tinta);flex:none}
.dato{padding:22px 24px;display:grid;gap:4px}
.dato b{font-family:var(--mono);font-weight:600;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.dato b s{color:var(--grafito)}
.dato > span{font-size:14px;color:var(--grafito)}

/* ---------- Cierre y pie ---------- */
.cierre{background:var(--azul-osc);color:var(--blanco);padding:80px 0 88px;text-align:center}
.cierre h2{margin:0 auto;max-width:15em}
.cierre h2 .res{background:var(--amarillo);color:var(--tinta);padding:0 .12em;border-radius:4px}
.cierre p{margin:18px auto 0;max-width:34em;color:#C9D3F0}
.cierre .btn{margin-top:30px}
.cierre .btn:focus-visible{outline-color:#fff}
.pie{background:var(--blanco);border-top:1px solid var(--borde-s)}
.pie .marco{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:24px;padding-bottom:32px;font-size:14px;color:var(--grafito)}
.pie svg{width:22px;height:22px}
.pie .firma{display:grid;gap:2px}
.pie .firma b{color:var(--tinta);font-weight:600}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-left:auto}
.pie a{text-decoration:none;overflow-wrap:anywhere}
.pie a:hover{color:var(--tinta);text-decoration:underline;text-underline-offset:3px}

/* ---------- Autor: franja y firma con foto ---------- */
.autor{display:flex;align-items:center;gap:16px;padding:16px 20px}
.autor img,.autor .avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--borde)}
.autor .avatar{display:grid;place-items:center;background:var(--azul-claro);color:var(--azul);font-weight:700;font-size:18px}
.autor .txt{display:grid;gap:2px;min-width:0}
.autor b{font-size:16px}
.autor span{font-size:14px;color:var(--grafito)}
.autor .enlace{margin-left:auto;flex:none;font-size:14px}
.firma-rec{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--grafito)}
.firma-rec img,.firma-rec .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.firma-rec .avatar{display:grid;place-items:center;background:var(--azul-claro);color:var(--azul);font-weight:700;font-size:12px}

/* Testimonios reales (solo si existen) */
.testimonios{display:grid;gap:16px;margin-top:28px}
@media (min-width:900px){.testimonios{grid-template-columns:repeat(3,minmax(0,1fr))}}
.testimonio{padding:22px;display:grid;gap:14px;align-content:start}
.testimonio p{font-size:15.5px;line-height:1.55}
.testimonio .quien{display:grid;gap:1px;font-size:13.5px;color:var(--grafito)}
.testimonio .quien b{color:var(--tinta)}

/* Caja de correo semanal */
.correo{display:grid;gap:12px;padding:24px}
.correo h3{font-size:clamp(18px,2vw,22px)}
.correo p{font-size:14.5px;color:var(--grafito);line-height:1.5}
.correo form{display:flex;gap:8px;flex-wrap:wrap}
.correo input[type=email]{flex:1 1 220px;min-height:46px;padding:0 14px;border:1px solid var(--borde);border-radius:var(--r);font:inherit;font-size:15px;background:var(--blanco)}
.correo input:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
.correo small{font-size:12.5px;color:var(--grafito)}
.cierre .correo{max-width:560px;margin:28px auto 0;text-align:left;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:var(--blanco)}
.cierre .correo h3{color:var(--blanco)}.cierre .correo p,.cierre .correo small{color:#C9D3F0}
.cierre .correo input[type=email]{border-color:rgba(255,255,255,.25);background:#FFFFFF;color:var(--tinta)}

/* Garantía y pago en pasos */
.garantia{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:var(--azul-claro);border:1px solid var(--azul-borde);text-align:left;font-size:14.5px;line-height:1.5}
.garantia svg{width:22px;height:22px;flex:none;margin-top:2px}
.garantia b{display:block}
.pago-pasos{display:grid;gap:8px;margin-top:22px;max-width:560px;margin-left:auto;margin-right:auto;text-align:left}
.pago-pasos li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:12px 14px;border:1px solid var(--borde-s);border-radius:10px;background:var(--blanco);font-size:14.5px;line-height:1.45}
.pago-pasos li i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--azul);color:#fff;font-family:var(--mono);font-size:12px;font-weight:600;font-style:normal}
.cupos{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--grafito)}
.cupos i{width:120px;height:6px;border-radius:3px;background:var(--borde-s);overflow:hidden;display:block}
.cupos i b{display:block;height:100%;background:var(--azul);width:var(--w,0%)}

/* Puente del recurso al curso o al servicio */
.puente{display:grid;gap:12px;padding:22px 24px}
@media (min-width:700px){.puente{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}}
.puente b{display:block;font-size:17px;margin-bottom:4px}
.puente p{font-size:15px;color:var(--grafito);line-height:1.5}

/* Servicios */
.servicios{display:grid;gap:16px;margin-top:32px}
@media (min-width:900px){.servicios{grid-template-columns:repeat(2,minmax(0,1fr))}}
.servicio{display:grid;gap:14px;padding:26px;align-content:start}
.servicio h3{font-size:clamp(20px,2.2vw,24px)}
.servicio .para{font-size:14.5px;color:var(--grafito)}
.servicio ul{display:grid;gap:8px;font-size:15px;line-height:1.5}
.servicio li{display:flex;gap:10px}
.servicio li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--azul)}
.servicio .precio-s{font-family:var(--mono);font-size:13px;color:var(--grafito)}
.aviso-ejemplo{font-family:var(--mono);font-size:11px;color:var(--grafito);letter-spacing:.02em}

/* ---------- Movimiento ---------- */
/* Revelado al entrar en pantalla: lo aplica sitio.js a tarjetas y títulos */
.rev{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.rev.visto{opacity:1;transform:none}
.tarjeta.card,.pasos-m li,.sabes li,.materiales li,.fuga,.pilar-card{will-change:transform}
.tarjeta.card:hover,.sabes li.tarjeta:hover,.pasos-m li.tarjeta:hover{transform:translateY(-3px)}
.sabes li.tarjeta,.pasos-m li.tarjeta{transition:transform .2s ease,box-shadow .2s ease}
.sabes li.tarjeta:hover,.pasos-m li.tarjeta:hover{box-shadow:0 8px 24px -12px rgba(17,17,17,.25)}
.btn{transition:background-color .15s,transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(17,17,17,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(17,17,17,.2)}
.nav{transition:box-shadow .25s}
.nav.con-sombra{box-shadow:0 6px 24px -16px rgba(17,17,17,.35)}

/* Elementos flotantes: chips de estado que derivan despacio detrás del hero */
.flotantes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero{position:relative}
.hero > .marco,.hero > .escaparate,.hero > .cascada{position:relative;z-index:1}
.flotante{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--borde);background:var(--blanco);box-shadow:0 10px 24px -14px rgba(17,17,17,.3);font-family:var(--mono);font-weight:600;font-size:11.5px;letter-spacing:.02em;opacity:.9;animation:flotar-entrada .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--retraso,0s)}
.flotante::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.flotante.gra{color:var(--azul)}
.flotante.rec{color:#7A4A00;background:#FFF6E0}
.flotante.rech{color:var(--tinta);background:var(--amarillo);border-color:var(--amarillo)}
.flotante.env{color:var(--grafito);background:var(--papel)}
.flotante.num{font-size:14px;color:var(--tinta)}
.flotante.num::before{display:none}
.flotante .ico{width:14px;height:14px}
@keyframes flotar-entrada{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:.9;transform:translate3d(0,0,0)}}
@media (max-width:1180px){.flotante{display:none}.flotante.m{display:inline-flex}}
@media (max-width:900px){.flotantes{display:none}}

/* Botón fijo de compra (página del curso) */
.cta-fijo{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(250,250,247,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--borde-s);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.cta-fijo.visible{transform:none}
.cta-fijo .btn{width:100%;max-width:520px;min-height:50px;font-size:16px;background:#25D366;color:#073B1E;box-shadow:0 1px 2px rgba(17,17,17,.18)}
.cta-fijo .btn:hover{background:#1FBF5B;color:#073B1E}
.cta-fijo .btn svg{width:20px;height:20px}
@media (min-width:900px){
  .cta-fijo{left:auto;right:24px;bottom:24px;padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;transform:translateY(24px);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s}
  .cta-fijo.visible{transform:none;opacity:1}
  .cta-fijo .btn{width:auto;padding:0 22px;border-radius:999px;box-shadow:0 12px 30px -12px rgba(7,59,30,.55)}
}
body.con-cta-fijo{padding-bottom:84px}
@media (min-width:900px){body.con-cta-fijo{padding-bottom:0}}

.aparece{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.aparece.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .aparece,.rev{opacity:1;transform:none}
  .flotante{display:none}
  .cta-fijo.visible{transform:none;opacity:1}
  .cta-fijo:not(.visible){visibility:hidden}
  html{scroll-behavior:auto}
}

/* ---------- Páginas de servicio (v21): /servicios y una por canal ---------- */
.cab-serv{padding:44px 0 56px}
@media (min-width:900px){.cab-serv{padding:64px 0 72px}}
.cab-serv h1{margin-top:16px;max-width:15em}
.cab-serv .acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.dato-precio{margin-top:18px;font-family:var(--mono);font-size:13px;color:var(--grafito);display:flex;flex-wrap:wrap;gap:6px 14px}
.dato-precio span{display:inline-flex;align-items:center;gap:8px}
.dato-precio span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--borde)}
.dato-precio b{color:var(--tinta);font-weight:600}
.chips-con{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips-con span{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;border:1px solid var(--borde);background:var(--blanco);font-size:14px;font-weight:500}
.chips-con span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--azul)}
.lista-punto{display:grid;gap:10px;margin-top:22px;padding:0;list-style:none;font-size:15.5px;line-height:1.5}
.lista-punto li{display:flex;gap:12px}
.lista-punto li::before{content:"";flex:none;width:8px;height:8px;margin-top:8px;border-radius:50%;background:var(--azul)}
.canales{display:grid;gap:14px;margin-top:30px}
@media (min-width:900px){.canales{grid-template-columns:repeat(3,minmax(0,1fr))}}
.canal{display:grid;gap:10px;padding:24px;align-content:start;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.canal:hover{border-color:var(--azul);transform:translateY(-2px)}
.canal .cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.canal .cab .chip{background:var(--azul-claro);border-color:var(--azul-borde);color:var(--azul)}
.canal .precio{font-family:var(--mono);font-size:12.5px;color:var(--tinta);font-weight:600}
.canal h3{margin-top:4px}
.canal p{font-size:15px;color:var(--grafito);line-height:1.5}
.canal .enlace{margin-top:4px;font-size:14.5px}
.nota-canal{margin-top:18px;font-size:15px;color:var(--grafito);max-width:44em}
.bloque-serv{display:grid;gap:18px;padding:26px;scroll-margin-top:84px}
@media (min-width:900px){.bloque-serv{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:36px;padding:34px}}
.bloque-serv + .bloque-serv{margin-top:16px}
.bloque-serv .cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bloque-serv .cab .chip{background:var(--azul-claro);border-color:var(--azul-borde);color:var(--azul)}
.bloque-serv .precio{font-family:var(--mono);font-size:13px;font-weight:600}
.bloque-serv h2{font-size:clamp(22px,2.6vw,30px);line-height:1.15;margin-top:12px}
.bloque-serv .resumen{margin-top:10px;font-size:16.5px;line-height:1.5}
.bloque-serv .nota{margin-top:12px;font-size:14px;color:var(--grafito)}
.bloque-serv .lista-punto{margin-top:0;font-size:15px}
.bloque-serv .btn{margin-top:18px;justify-self:start}
.lado-serv{display:grid;gap:12px;align-content:start;padding:20px;border:1px solid var(--borde-s);border-radius:12px;background:var(--fondo)}
.lado-serv > b{font-size:13px;color:var(--grafito);font-weight:600}
.dos-col{display:grid;gap:16px;margin-top:30px}
@media (min-width:900px){.dos-col{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dos-col .tarjeta{padding:24px;display:grid;gap:8px;align-content:start}
.dos-col .tarjeta .lista-punto{margin-top:6px;font-size:15px}
.aviso{margin-top:18px;padding:14px 18px;border-left:3px solid var(--amarillo);background:var(--blanco);border-radius:0 10px 10px 0;font-size:15px;line-height:1.5;max-width:44em}
.tabla-precio{margin-top:26px;display:grid;border:1px solid var(--borde);border-radius:var(--r-g);background:var(--blanco);overflow:hidden;max-width:640px}
.tabla-precio div{display:grid;gap:2px;padding:14px 18px;font-size:15px}
@media (min-width:600px){.tabla-precio div{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px;align-items:baseline}.tabla-precio dd{text-align:right}}
.tabla-precio div + div{border-top:1px solid var(--borde-s)}
.tabla-precio dt{color:var(--grafito);font-size:14px}
.tabla-precio dd{margin:0;font-weight:600;line-height:1.4}
.pasos-serv{display:grid;gap:12px;margin-top:28px;counter-reset:p;padding:0;list-style:none}
@media (min-width:900px){.pasos-serv{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pasos-serv li{counter-increment:p;padding:22px;display:grid;gap:8px;align-content:start}
.pasos-serv li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-weight:600;font-size:12px;color:var(--azul)}
.pasos-serv b{font-size:16.5px}
.pasos-serv p{font-size:14.5px;color:var(--grafito);line-height:1.5}
.regalo{display:grid;gap:14px;padding:28px;justify-items:start}
@media (min-width:900px){.regalo{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:34px}}
.regalo .chip{background:var(--amarillo);border-color:var(--amarillo);color:var(--tinta)}
.regalo h2{font-size:clamp(24px,3vw,34px);margin-top:10px}
.regalo p{margin-top:8px;color:var(--grafito);font-size:16px;line-height:1.5;max-width:36em}
.otros-canales{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:15.5px}
.otros-canales span{color:var(--grafito)}
.cierre .acciones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.cierre .acciones .btn{margin-top:0}
.cierre .btn.sec{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.35)}
.cierre .btn.sec:hover{background:rgba(255,255,255,.08)}
.otra-via{margin-top:18px;font-size:15px;color:#C9D3F0}
.otra-via a{color:var(--blanco);font-weight:600;text-underline-offset:3px}

/* =========================================================
   v22 · línea compartida: menú, pie y botones (todas las páginas)
   Logo en cursiva, enlaces grises, botón de WhatsApp negro.
   ========================================================= */
[hidden]{display:none!important}
.btn{min-height:48px}
.btn .ico-wa{width:18px;height:18px}
.nav.nav22{background:rgba(255,255,255,.9);border-bottom-color:transparent;transition:box-shadow .25s,border-color .25s,background-color .25s}
.nav.nav22 .marco{height:68px}
.nav.nav22.con-sombra{border-bottom-color:var(--borde-s);box-shadow:0 6px 20px -14px rgba(17,17,17,.35)}
.logo-txt{font-style:italic;font-weight:700;font-size:21px;letter-spacing:-.02em;text-decoration:none;color:var(--tinta)}
.nav.nav22 nav{gap:4px}
.nav.nav22 nav a{color:#9A9890;font-size:15px;padding:7px 10px;background:none!important}
.nav.nav22 nav a:hover{color:var(--tinta)}
.nav.nav22 nav a[aria-current="page"]{color:var(--tinta);font-weight:600}
.nav.nav22 .btn.wa{background:var(--tinta);color:var(--blanco);min-height:40px;padding:8px 16px}
.nav.nav22 .btn.wa .ico-wa{color:#25D366}
.pie22{background:var(--blanco);border-top:1px solid var(--borde-s);padding:36px 0 24px;font-size:15px}
.pie22 .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 20px}
.pie22 .marca{grid-column:1/-1}
.pie22 .marca b{display:block;font-style:italic;font-weight:700;font-size:21px;letter-spacing:-.02em}
.pie22 .marca p{margin-top:8px;color:var(--grafito);line-height:1.5;max-width:22em}
.pie22 .tit{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grafito);margin-bottom:10px}
.pie22 ul{display:grid;gap:2px}
.pie22 ul a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:var(--tinta)}
.pie22 ul a:hover{color:var(--azul);text-decoration:underline;text-underline-offset:3px}
.pie22 .legal{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:34px;padding-top:18px;border-top:1px solid var(--borde-s);font-size:13.5px;color:var(--grafito)}
.pie22 .legal a{color:inherit;text-underline-offset:3px}
@media (min-width:700px){.pie22 .cols{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}.pie22 .marca{grid-column:auto}}

/* =========================================================
   v22 · IDENTIDAD EN TODO EL SITIO
   Fondo blanco con cuadrícula de puntos que se mueve con el mouse,
   titulares en mayúsculas finas, énfasis en cursiva azul,
   tarjetas que se levantan, preguntas con círculo +/−.
   ========================================================= */
html{background:#FFFFFF}
body{background:transparent;position:relative}
/* Capa de puntos (fija) y foco azul que sigue al cursor */
body::before,body::after{content:"";position:fixed;inset:-48px;z-index:-1;pointer-events:none;background-size:22px 22px}
body::before{background-image:radial-gradient(circle,rgba(17,17,17,.15) 1px,transparent 1.25px);transform:translate3d(var(--bx,0px),var(--by,0px),0)}
body::after{background-image:radial-gradient(circle,var(--azul) 1.3px,transparent 1.7px);transform:translate3d(var(--bx,0px),var(--by,0px),0);opacity:0;transition:opacity .4s;
  -webkit-mask-image:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),#000 0,transparent 70%);mask-image:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),#000 0,transparent 70%)}
body.foco-on::after{opacity:.6}
@media (prefers-reduced-motion:reduce){body::before,body::after{transform:none}}

/* Secciones transparentes para que se vean los puntos */
body:not([data-pagina="inicio"]) .sec,body:not([data-pagina="inicio"]) .sec.suave,body:not([data-pagina="inicio"]) .sec.papel{background:transparent;border-top-color:var(--borde-s)}
body:not([data-pagina="inicio"]) .hero,body:not([data-pagina="inicio"]) .cab-serv,body:not([data-pagina="inicio"]) .cab-cat,body:not([data-pagina="inicio"]) .cab-sobre{background:transparent}
.sec.suave .tarjeta{border-color:var(--borde)}

/* Titulares: mayúsculas finas; el énfasis pasa a cursiva azul */
body:not([data-pagina="inicio"]) h1{font-weight:300;text-transform:uppercase;letter-spacing:.025em;font-size:clamp(29px,7.6vw,64px);line-height:1.04;text-wrap:balance}
body:not([data-pagina="inicio"]) h2{font-weight:300;text-transform:uppercase;letter-spacing:.025em;font-size:clamp(23px,6.2vw,48px);line-height:1.07}
body:not([data-pagina="inicio"]) h1 .res,body:not([data-pagina="inicio"]) h2 .res{background:none;padding:0;font-style:italic;font-weight:700;text-transform:none;letter-spacing:-.02em;color:var(--azul)}
body:not([data-pagina="inicio"]) h1 .gris,body:not([data-pagina="inicio"]) h2 .gris{color:#8C8A82}
body:not([data-pagina="inicio"]) .cierre h2 .res{color:var(--amarillo);background:none}
body:not([data-pagina="inicio"]) h3{letter-spacing:-.01em}

/* Etiquetas: monoespaciada con punto azul, sin cápsula */
body:not([data-pagina="inicio"]) .etiqueta{border:0;background:transparent;padding:0;gap:9px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--grafito)}
body:not([data-pagina="inicio"]) .etiqueta i{width:8px;height:8px;background:var(--azul)}
body:not([data-pagina="inicio"]) .etiqueta i::before{display:none}
.cierre .etiqueta{color:#C9D3F0!important}

/* Tarjetas: blancas, se levantan al pasar el mouse */
.tarjeta{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
@media (hover:hover){
  body:not([data-pagina="inicio"]) .tarjeta:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(17,17,17,.4);border-color:#B9B7AE}
}

/* Botones */
.btn{border-radius:12px}

/* Preguntas: círculo +/− como en el inicio */
.signo{width:30px;height:30px;border-radius:50%;transition:background-color .2s,border-color .2s}
.signo::before,.signo::after{left:8px;right:8px;top:13px;height:1.6px}
details[open] .signo{transform:none;background:var(--azul);border-color:var(--azul)}
details[open] .signo::before,details[open] .signo::after{background:#fff}
.acordeon summary:hover{background:transparent;color:var(--azul)}
.acordeon .contenido{overflow:hidden}

/* Cierre: azul con puntos que derivan y círculo amarillo */
.cierre{position:relative;overflow:hidden;isolation:isolate}
.cierre::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(255,255,255,.18) 1px,transparent 1.2px);background-size:22px 22px}
.cierre::after{content:"";position:absolute;z-index:-1;right:-80px;bottom:-120px;width:clamp(160px,26vw,300px);aspect-ratio:1;border-radius:50%;background:var(--amarillo)}
.cierre h2{text-wrap:balance}
@media (prefers-reduced-motion:no-preference){
  @keyframes deriva22{from{background-position:0 0}to{background-position:44px 44px}}
  .cierre::before{animation:deriva22 14s linear infinite}
}

/* Ícono dentro del titular (como en el inicio) */
.ico{display:inline-block;width:.86em;height:.86em;vertical-align:-.1em;margin:0 .1em}
.ico svg{display:block;width:100%;height:100%}

/* Flotantes (compartidos por todas las páginas) */
.flots{position:absolute;top:0;bottom:0;left:20px;right:20px;pointer-events:none;z-index:0}
.flot{position:absolute;pointer-events:none;transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.kpi{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:8px 12px;box-shadow:0 14px 28px -18px rgba(17,17,17,.35)}
.kpi small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--grafito);letter-spacing:.04em;text-transform:uppercase}
.kpi strong{display:flex;align-items:baseline;gap:6px;font-weight:300;font-size:22px;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.kpi strong i{font-style:normal;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--azul)}
.noti{position:relative;width:226px;height:48px}
.noti-msg{position:absolute;inset:0;display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.97);border:1px solid var(--borde-s);border-radius:14px;padding:8px 12px 8px 8px;box-shadow:0 14px 28px -18px rgba(17,17,17,.4);font-size:13px;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1)}
.noti-msg.on{opacity:1;transform:none}
.noti-msg .ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#E7F8EE;flex:none}
.noti-msg .ic.az{background:var(--azul-claro)}
.noti-msg b{display:block;font-weight:600;font-size:13px;line-height:1.2;white-space:nowrap}
.noti-msg div span{display:block;color:var(--grafito);font-size:11.5px;white-space:nowrap}
.noti-msg em{margin-left:auto;align-self:flex-start;font-style:normal;font-family:var(--mono);font-size:10px;color:#9A9890}
.cursor22{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.cursor22 .et{margin-left:14px;background:var(--azul);color:#fff;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px 999px 999px 4px}
.circ{display:block;border-radius:50%;background:var(--amarillo)}
.cruz{display:block;position:relative;width:18px;height:18px}
.cruz::before,.cruz::after{content:"";position:absolute;background:var(--tinta)}
.cruz::before{left:8px;top:0;width:1.5px;height:18px}.cruz::after{top:8px;left:0;height:1.5px;width:18px}
/* En páginas internas: los flotantes viven en la cabecera y solo se ven donde hay espacio */
.cab-flots{position:relative}
.cab-flots > .marco{position:relative;z-index:1}
.cab-flots .flots{z-index:0}
.cab-flots .fl-esc{display:none}
@media (min-width:1100px){.cab-flots .fl-esc{display:block}}
@media (prefers-reduced-motion:no-preference){
  @keyframes flota22{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @keyframes entra22{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
  .flot-in{animation:entra22 .8s cubic-bezier(.34,1.4,.64,1) both, flota22 6s ease-in-out infinite;animation-delay:var(--fd,.9s),calc(var(--fd,.9s) + .8s)}
}

/* Revelado más visible y con cascada */
.rev{transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}

/* Las chips de estado del curso, en la línea nueva */
.flotante{border-radius:10px;font-weight:500}
.cab-flots .marco > :not(.flots){position:relative;z-index:1}
.cab-flots{overflow:hidden}

.cab-flots .flot.fl-circ{display:none}
@media (min-width:900px){.cab-flots .flot.fl-circ{display:block}}
body:not([data-pagina="inicio"]) .etiqueta i{flex:none}

/* v22 · botón de WhatsApp dentro del menú de celular */
.menu-movil .menu-cta{padding:16px 20px 20px}
.menu-movil .menu-cta a.btn{display:flex;justify-content:center;width:100%;min-height:50px;padding:12px 18px;border:0;border-radius:12px;background:var(--tinta);color:var(--blanco);font-size:16px;font-weight:600}
.menu-movil .menu-cta a.btn .ico-wa{color:#25D366;width:18px;height:18px}

/* v22 · fondo «agua»: cuando el canvas está activo, se apagan los puntos de CSS */
#fondo-agua{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body.fondo-canvas::before,body.fondo-canvas::after{display:none}

/* v22 · celular y tableta: puntos fijos, más tenues y separados, sin foco (lectura) */
@media (hover:none),(pointer:coarse){
  body::before{background-image:radial-gradient(circle,rgba(17,17,17,.075) 1px,transparent 1.25px);background-size:26px 26px;transform:none}
  body::after{display:none}
}