/*!
 * IEL · El C.V. profesional: características, atributos y elementos esenciales
 * (c) 2026 M. en Dis. Elisa Espinoza Castillo - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-IEL-CV-2026-4E7B
 */
/* ═══════════════════════════════════════════════════════════════
   EL C.V. PROFESIONAL · M. en Dis. Elisa Espinoza Castillo

   La paleta sale de medir su PowerPoint: los fondos y las tintas se
   leyeron del archivo y los rellenos de forma se muestrearon de los
   PNG exportados. Lo que se moderniza es el trato — los negros puros
   pasan a un negro con sesgo verde, cada bloque del temario lleva su
   propio acento, y las imágenes caen en tarjeta y se abren al pulsar
   en vez de recortarse a la fuerza.
   ═══════════════════════════════════════════════════════════════ */

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

:root{
  /* medidos en el PowerPoint, no aproximados */
  --cian:#06E9FA;   --magenta:#AD1F66;  --coral:#FF4B41;
  --morado:#9966FF; --azul:#0099FF;     --rojo:#F80C55;
  --ambar:#FFC000;  --verde:#00CC99;    --lila:#7575D1;
  --teal:#224B50;   --indigo:#222268;   --indigo-hondo:#14143C;

  --sans:Poppins,"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;

  /* superficies · oscuro por omisión */
  --fondo:#0B1113;  --fondo-2:#141C1E;  --fondo-3:#1B2427;
  --texto:#F2F7F7;  --texto-2:#B7C6C7;  --texto-3:#7E9193;
  --linea:#263234;  --linea-suave:#1E2A2C;
  --acento:#06E9FA;
}
:root[data-theme="light"]{
  --fondo:#EFF3F3;  --fondo-2:#FFFFFF;  --fondo-3:#F6F9F9;
  --texto:#0E1618;  --texto-2:#3D5052;  --texto-3:#6C8082;
  --linea:#D2DDDD;  --linea-suave:#E2EAEA;
  --acento:#046B77;
}

/* Cada bloque del temario lleva su acento: no es decoración, dice en qué
   parte del recorrido va quien mira. */
.s-def{--acento:#06E9FA}
.s-hist{--acento:#FFC000}
.s-tipos{--acento:#9966FF}
.s-datos{--acento:#00CC99}
.s-reco{--acento:#FF4B41}
:root[data-theme="light"] .s-def{--acento:#046B77}
:root[data-theme="light"] .s-hist{--acento:#8A6200}
:root[data-theme="light"] .s-tipos{--acento:#6532C8}
:root[data-theme="light"] .s-datos{--acento:#07795C}
:root[data-theme="light"] .s-reco{--acento:#C22A1B}

*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:var(--fondo)}
body{font-family:var(--sans);color:var(--texto);-webkit-font-smoothing:antialiased}

#escenario{position:fixed;inset:0;overflow:hidden}
/* El centrado va a mano y NUNCA con place-items del padre: cuando el lienzo
   es mayor que el hueco, la especificación degrada ese centrado a alineación
   al inicio y la lámina se dibuja desplazada. */
#lienzo{
  width:1600px;height:900px;overflow:hidden;
  transform-origin:center center;
  position:absolute;left:50%;top:50%;margin:-476px 0 0 -800px;
  background:var(--fondo);
}

.slide{
  position:absolute;inset:0;background:var(--fondo);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
.slide.on{opacity:1;visibility:visible}
.wrap{position:absolute;inset:0;padding:74px 104px 84px}

/* ── fondos con carácter ── */
.g-teal{background:
  radial-gradient(1100px 620px at 78% 16%, rgba(6,233,250,.17), transparent 62%),
  radial-gradient(760px 520px at 10% 94%, rgba(173,31,102,.22), transparent 64%),
  #224B50; color:#fff}
.g-hondo{background:
  radial-gradient(900px 540px at 88% 8%, rgba(153,102,255,.26), transparent 62%),
  #14143C; color:#fff}
.g-indigo{background:#222268;color:#fff}

/* ── rótulo de sección ── */
.etq{
  position:absolute;top:36px;right:0;z-index:3;
  background:var(--acento);color:#08110F;
  padding:10px 30px 10px 32px;border-radius:5px 0 0 5px;
  font-size:19px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
:root[data-theme="light"] .etq{color:#fff}

/* ── tipografía ── */
.eyebrow{
  font-size:19px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acento);
  display:flex;align-items:center;gap:14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35;max-width:150px}
h1{font-size:88px;font-weight:700;letter-spacing:-.03em;line-height:1.02}
h2{font-size:58px;font-weight:600;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
h3{font-size:38px;font-weight:600;line-height:1.16}
p{font-size:25px;font-weight:400;line-height:1.6;color:var(--texto-2);max-width:38ch}
.g-teal p,.g-hondo p,.g-indigo p{color:rgba(255,255,255,.88)}
strong,b{font-weight:600;color:var(--texto)}
.g-teal b,.g-hondo b,.g-indigo b{color:#fff}
.acento{color:var(--acento)}
.chico{font-size:21px;line-height:1.55}
.h2-m{font-size:50px}
.h2-s{font-size:44px}
.h3-m{font-size:32px}
.h3-s{font-size:28px}

/* ── columnas ── */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:58px;height:100%;align-items:center}
.dos.ancha-izq{grid-template-columns:1.12fr .88fr}
.dos.ancha-der{grid-template-columns:.88fr 1.12fr}
.texto{display:flex;flex-direction:column;gap:20px}
.texto p{margin:0}

/* ── imágenes ──
   Antes iban con object-fit:cover y se recortaban a la fuerza: una hoja
   vertical dentro de una caja apaisada perdía media pieza. Ahora la tarjeta
   las muestra enteras con contain, y al pulsar se abren a tamaño completo. */
/* grid-auto-rows:1fr es lo que sujeta la altura: sin ello las filas se
   dimensionan por contenido y, en cuanto la imagen carga, la tarjeta crece
   hasta el alto natural de la foto y se sale del lienzo. */
.galeria{display:grid;gap:16px;grid-auto-rows:1fr;align-content:stretch}
.galeria.g1{grid-template-columns:1fr}
.galeria.g2{grid-template-columns:1fr 1fr}
.galeria.g3{grid-template-columns:1fr 1fr 1fr}
.pieza{
  position:relative;display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;padding:13px;
  background:var(--fondo-2);border:1px solid var(--linea);border-radius:14px;
  cursor:zoom-in;transition:border-color .18s,transform .18s;text-align:left;
}
.pieza:hover{border-color:var(--acento);transform:translateY(-2px)}
.pieza img{display:block;width:100%;flex:1;min-height:0;object-fit:contain;border-radius:6px}
.pieza .lupa{
  position:absolute;top:21px;right:21px;width:31px;height:31px;border-radius:9px;
  display:grid;place-items:center;font-size:14px;
  background:rgba(8,17,15,.66);color:#fff;opacity:0;transition:opacity .18s;
}
.pieza:hover .lupa,.pieza:focus-visible .lupa{opacity:1}
.credito{
  display:block;flex:none;margin-top:9px;font-size:13.5px;line-height:1.35;
  color:var(--texto-3);letter-spacing:.01em;
}

/* ── imagen sangrada ──
   Como en el PowerPoint original: la pieza ocupa el borde del lienzo de
   arriba abajo, sin tarjeta ni margen. Aquí sí se recorta con cover, que es
   lo que significa sangrar; la pieza entera se ve al pulsar, en el visor.
   La lámina cede su relleno del lado que sangra. */
:root{--banda:48%}
.sangra-der .wrap{padding-right:calc(var(--banda) + 60px);display:flex;flex-direction:column;justify-content:center}
.sangra-izq .wrap{padding-left:calc(var(--banda) + 60px);display:flex;flex-direction:column;justify-content:center}
/* Sobre la banda el rótulo necesita separarse del borde para no pegarse. */
.sangra-der .etq{right:0}
.sangrada{
  position:absolute;top:0;bottom:0;width:var(--banda);padding:0;border:0;border-radius:0;
  background:var(--fondo-2);overflow:hidden;cursor:zoom-in;
}
.sangra-der .sangrada{right:0}
.sangra-izq .sangrada{left:0}

/* Banda doble: dos piezas repartidas en el mismo hueco, como en la lámina 5
   del original, donde una está centrada y la otra toca el borde. Cada una
   sigue abriéndose por su cuenta en el visor. */
.doble .sangrada{width:calc(var(--banda) / 2)}
.sangra-der.doble .b1{right:calc(var(--banda) / 2)}
.sangra-der.doble .b2{right:0}

/* Sangría total: la pieza ocupa el lienzo entero y el texto va encima. El
   original lo resolvía apoyando tipografía negra sobre la zona clara de la
   foto; aquí el fondo es oscuro, así que hace falta un velo que garantice
   la lectura pase lo que pase por debajo. */
.sangra-todo .sangrada{left:0;right:0;width:auto}
.sangra-todo .wrap{z-index:2}
.sangra-todo .wrap::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--fondo) 94%,transparent) 0%,
    color-mix(in srgb,var(--fondo) 88%,transparent) 34%,
    transparent 62%);
}
.sangra-todo .wrap .texto{max-width:44ch}
.sangrada img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:0;flex:none}
.sangrada .credito{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 20px 12px;
  color:rgba(255,255,255,.82);
  background:linear-gradient(to top,rgba(6,12,13,.78),transparent);
}
.sangrada .lupa{top:18px;right:18px}
.sangrada:hover{transform:none}
/* El velo del acento marca que es pulsable sin ensuciar la imagen. */
.sangrada::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--acento);transition:box-shadow .18s;
}
.sangrada:hover::after,.sangrada:focus-visible::after{box-shadow:inset 0 0 0 4px var(--acento)}

/* En vertical la banda vuelve al flujo y el hueco que le reservaba sobra. */
@media (max-aspect-ratio:1/1){
  /* El modulo pone display:flex en la lamina activa, sin direccion. Con dos
     hijos --el texto y la banda-- eso las deja una al lado de la otra. */
  .sangra-der,.sangra-izq{flex-direction:column}
  .sangra-der .wrap,.sangra-izq .wrap{padding-left:18px;padding-right:18px}
  /* En el telefono hay sitio de sobra en vertical: la pieza se ve entera
     con contain en vez de recortada, que es lo util en una pantalla asi. */
  /* Con la misma especificidad que .doble .sangrada y .sangra-todo .sangrada,
     o esas dos se quedan con su ancho de escritorio. */
  .sangrada,.doble .sangrada,.sangra-todo .sangrada{
    position:static;width:100%;height:54vh;flex:none;margin-top:20px;border-radius:12px
  }
  .doble .sangrada{height:44vh}
  /* En el flujo la imagen ya no va detrás del texto: el velo sobra. */
  .sangra-todo .wrap::before{display:none}
  .sangrada img{height:100%;object-fit:contain;border-radius:12px}
  .sangrada .credito{position:static;background:none;padding:8px 0 0;color:var(--texto-3)}
}

/* ── visor de imagen a tamaño completo ── */
#visor{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(4,9,10,.94);padding:44px 56px 70px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#visor.on{display:grid;place-items:center}
#visor img{max-width:100%;max-height:calc(100vh - 160px);border-radius:10px;display:block;margin:0 auto}
#visor figcaption{margin-top:15px;text-align:center;font-size:14px;color:rgba(255,255,255,.74)}
#visorCerrar{
  position:absolute;top:20px;right:26px;width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;font-size:22px;
  background:rgba(255,255,255,.13);color:#fff;
}
#visorCerrar:hover{background:rgba(255,255,255,.24)}

/* ── pantalla partida ── */
.partida{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.mitad{padding:76px 64px;display:flex;flex-direction:column;color:#fff}
.m-magenta{background:#AD1F66}
.m-negro{background:#0B1113}
.m-indigo{background:#14143C}
.mitad h3{text-align:center;font-size:46px;font-weight:700}
.mitad h3 span{display:block;font-size:23px;font-weight:400;margin-top:5px;opacity:.86}
.mitad ul{list-style:none;margin-top:38px;display:flex;flex-direction:column;gap:21px}
.mitad li{font-size:21px;font-weight:400;line-height:1.45;padding-left:38px;position:relative;color:rgba(255,255,255,.93)}
.mitad li::before{position:absolute;left:0;top:0;font-size:22px;font-weight:600}
.m-magenta li::before{content:"✔";color:#fff}
.m-negro li::before,.m-indigo li::before{content:"✕";color:#FF4B41}

/* ── esquemas propios ── */
.esq{display:block;width:100%;height:auto}
.pie-esq{font-size:17px;line-height:1.4;color:var(--texto-3);margin-top:13px;text-align:center;max-width:none}

/* ══════════ ZONAS INTERACTIVAS ══════════ */
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:focus-visible,.pieza:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.marcaviva{
  display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
  font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#08110F;background:var(--acento);padding:5px 14px;border-radius:5px;
}
:root[data-theme="light"] .marcaviva{color:#fff}
.marcaviva::before{content:"◆";font-size:11px;letter-spacing:0}

/* 1 · ¿Entra o sobra? */
.fichas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ficha{
  padding:14px 16px;border-radius:13px;background:var(--fondo-2);
  border:1px solid var(--linea);min-height:100px;
  display:flex;flex-direction:column;gap:5px;transition:.18s;
}
.ficha:hover{border-color:var(--acento)}
.ficha b{font-size:19px;font-weight:500;line-height:1.25;color:var(--texto)}
.ficha i{font-style:normal;font-size:14.5px;line-height:1.38;color:var(--texto-3)}
.ficha[data-visto="1"]{background:color-mix(in srgb,#00CC99 16%,var(--fondo-2));border-color:#00CC99}
.ficha[data-visto="0"]{background:color-mix(in srgb,#FF4B41 15%,var(--fondo-2));border-color:#FF4B41}
.ficha .veredicto{font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ficha[data-visto="1"] .veredicto{color:#00CC99}
.ficha[data-visto="0"] .veredicto{color:#FF4B41}
.marcador{font-size:20px;font-weight:500;color:var(--texto-2);display:flex;align-items:center;gap:16px}
.barra{flex:1;height:7px;border-radius:4px;background:var(--linea);overflow:hidden;max-width:380px}
.barra i{display:block;height:100%;width:0;background:var(--acento);transition:width .3s ease}

/* 2 · ¿Cuál me toca? */
.casos{display:flex;flex-direction:column;gap:10px}
.caso{
  text-align:left;padding:15px 20px;border-radius:13px;font-size:20px;line-height:1.35;
  background:var(--fondo-2);border:1px solid var(--linea);transition:.18s;color:var(--texto-2);
}
.caso:hover{border-color:var(--acento);color:var(--texto)}
.caso[aria-pressed="true"]{background:color-mix(in srgb,var(--acento) 16%,var(--fondo-2));border-color:var(--acento);color:var(--texto)}
.respuesta{
  background:var(--fondo-2);border:1px solid var(--linea);border-left:4px solid var(--acento);
  border-radius:13px;padding:26px 30px;min-height:318px;
}
.respuesta .tipo{font-size:36px;font-weight:600;color:var(--acento);line-height:1.1}
.respuesta .porque{font-size:21px;line-height:1.5;margin-top:13px;max-width:none}
.respuesta dl{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.respuesta dt{font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.respuesta dd{font-size:18px;line-height:1.42;margin-top:3px;color:var(--texto-2)}
.respuesta .vacia{font-size:21px;color:var(--texto-3);line-height:1.5;max-width:none}

/* 3 · La misma información, tres formatos */
.pestanas{display:flex;gap:10px}
.pestana{
  padding:9px 22px;border-radius:22px;font-size:19px;font-weight:500;
  background:var(--fondo-2);border:1px solid var(--linea);color:var(--texto-2);
}
.pestana[aria-pressed="true"]{background:var(--acento);color:#08110F;border-color:var(--acento);font-weight:600}
:root[data-theme="light"] .pestana[aria-pressed="true"]{color:#fff}
.hoja{background:#F8FAFA;color:#111A1C;border-radius:12px;padding:22px 26px;height:428px;overflow:hidden}
.hoja .nom{font-size:24px;font-weight:600;letter-spacing:-.01em}
.hoja .rol{font-size:14px;color:#5A6C6E;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.hoja .bloque{margin-top:16px}
.hoja .bloque h4{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#1E5C63}
.hoja .linea{display:flex;gap:12px;font-size:15px;line-height:1.45;margin-top:6px}
.hoja .linea .fecha{color:#7A8C8E;min-width:98px;font-variant-numeric:tabular-nums}
.hoja .barrita{height:6px;border-radius:4px;background:#D9E2E2;margin-top:7px}
.oculta-aviso{
  padding:15px 19px;border-radius:11px;
  background:color-mix(in srgb,#FF4B41 13%,var(--fondo-2));
  border-left:4px solid #FF4B41;font-size:18px;line-height:1.45;max-width:none;color:var(--texto-2);
}

/* 4 · Tu inventario */
.inventario{display:grid;grid-template-columns:1fr 1fr;gap:8px 34px}
.item{display:flex;align-items:flex-start;gap:12px;text-align:left;font-size:18.5px;line-height:1.35;padding:6px 9px;border-radius:8px;color:var(--texto-2)}
.item:hover{background:var(--fondo-2)}
.caja{flex:none;width:22px;height:22px;border-radius:6px;margin-top:1px;border:2px solid var(--texto-3);display:grid;place-items:center;font-size:14px;font-weight:700;color:transparent}
.item[aria-pressed="true"] .caja{background:#00CC99;border-color:#00CC99;color:#08110F}
.item[aria-pressed="true"]{opacity:.5}
.falta{font-size:19px;line-height:1.5;color:var(--texto-2);max-width:none}
.falta b{color:var(--acento)}

/* 27 · tarjetas que se voltean */
.tendencias{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tarjeta{perspective:1200px;height:396px}
/* .cara es un <span>: sin display:block, height no le aplica y las dos caras
   colapsan a la altura del relleno. */
.cara{display:block;position:relative;width:100%;height:100%;transition:transform .5s ease;transform-style:preserve-3d;text-align:left}
.tarjeta[aria-pressed="true"] .cara{transform:rotateY(180deg)}
.frente,.dorso{position:absolute;inset:0;backface-visibility:hidden;border-radius:15px;padding:25px 23px;display:flex;flex-direction:column}
.frente{background:var(--fondo-2);border:1px solid var(--linea)}
.tarjeta:hover .frente{border-color:var(--acento)}
.dorso{background:var(--acento);color:#08110F;transform:rotateY(180deg)}
:root[data-theme="light"] .dorso{color:#fff}
.frente .n{display:block;font-size:46px;font-weight:700;color:var(--acento);line-height:1}
.frente .ttl{display:block;font-size:23px;font-weight:600;line-height:1.2;margin-top:auto;color:var(--texto)}
.frente .pista{display:block;font-size:14.5px;color:var(--texto-3);margin-top:10px}
.dorso .txt{display:block;font-size:17px;line-height:1.45}
.dorso .uso{display:block;margin-top:auto;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.82}

/* ── portada ── */
.portada{display:flex;flex-direction:column;justify-content:center}
.marca-agua{
  position:absolute;right:-30px;top:50%;transform:translateY(-50%);
  font-size:400px;font-weight:700;line-height:.8;letter-spacing:-.06em;
  color:rgba(255,255,255,.055);pointer-events:none;user-select:none;
}
.titulo{font-size:94px;font-weight:700;letter-spacing:-.032em;line-height:1;color:#fff}
.bajada{font-size:39px;font-weight:400;line-height:1.26;margin-top:14px;max-width:22ch;color:rgba(255,255,255,.9)}
.regla{width:126px;height:5px;background:#06E9FA;margin-top:42px;border-radius:3px}
.credito-autor{margin-top:auto;padding-top:48px;font-size:22px;font-weight:500;color:#fff}
.credito-autor span{display:block;font-weight:400;opacity:.6;margin-top:6px;font-size:19px}

/* ── divisores ── */
.divisor{display:flex;flex-direction:column;justify-content:center}
.div-arriba{font-size:50px;font-weight:400;line-height:1.2;max-width:22ch;color:rgba(255,255,255,.92)}
.div-grande{font-size:146px;font-weight:600;color:var(--acento);line-height:1;letter-spacing:-.035em;margin:8px 0 4px}
.div-abajo{font-size:38px;font-weight:400;color:rgba(255,255,255,.88)}

.fuentes{list-style:none;display:flex;flex-direction:column;gap:9px}
.fuentes li{font-size:16.5px;line-height:1.42;color:var(--texto-2);max-width:62ch}
.creditos-img{padding-top:15px;border-top:1px solid var(--linea);font-size:15.5px;line-height:1.5;color:var(--texto-3);max-width:70ch}

/* ══════════════ CROMO ══════════════ */
.railbar{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:21}
.railbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#06E9FA,#9966FF);transition:width .3s}
/* La clase "chrome" no es decorativa: es la que busca ayuda.js para meter
   su boton dentro de la barra. Sin ella el boton queda flotando aparte. */
.chrome.hud{
  position:fixed;left:0;right:0;bottom:0;z-index:20;height:52px;
  display:flex;align-items:center;gap:12px;padding:0 18px;
  background:linear-gradient(0deg,color-mix(in srgb,var(--fondo) 94%,transparent),transparent);
}
.hud-btn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--linea);background:color-mix(in srgb,var(--fondo-2) 80%,transparent);
  color:var(--texto-2);font-size:15px;transition:.16s;
}
.hud-btn:hover{border-color:#06E9FA;color:var(--texto);transform:translateY(-1px)}
.hud-btn[disabled]{opacity:.28;cursor:default;transform:none;border-color:var(--linea-suave);color:var(--texto-3)}
.counter{font-family:var(--mono);font-size:12px;color:var(--texto-3);min-width:58px;text-align:center;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.hud-title{
  flex:1;min-width:0;font-size:12px;color:var(--texto-3);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.index{
  position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--fondo) 97%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:40px 52px;overflow-y:auto;display:none;
}
.index.on{display:block}
.index h2{font-size:22px;margin-bottom:3px;letter-spacing:-.02em}
.index .sub{font-size:12.5px;color:var(--texto-3);margin-bottom:18px;max-width:none}
.idx-keys{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px;font-size:11.5px;color:var(--texto-3)}
.idx-keys kbd{display:inline-block;padding:1px 7px;border:1px solid var(--linea);border-radius:5px;background:var(--fondo-2);color:var(--texto-2);font-family:var(--mono);font-size:10.5px;margin-right:5px}
.idx-group{margin-bottom:20px}
.idx-group h3{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#06E9FA;margin-bottom:9px}
.idx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:7px}
.idx-list button{
  text-align:left;padding:9px 13px;border-radius:10px;border:1px solid var(--linea-suave);
  background:var(--fondo-2);color:var(--texto-2);font-size:13px;display:flex;gap:9px;transition:.14s;
}
.idx-list button:hover{border-color:#06E9FA;color:var(--texto);transform:translateY(-1px)}
.idx-list button b{font-family:var(--mono);font-size:11px;color:var(--texto-3);flex:0 0 20px;font-weight:400}
.idx-list button.now{border-color:#06E9FA;background:var(--fondo-3);color:var(--texto)}
.idx-close{position:absolute;top:16px;right:22px;font-size:22px;color:var(--texto-3);padding:6px 12px}

/* La clase se llama .tiny porque es la que oculta vertical.css al recomponer. */
.tiny{display:none;position:fixed;inset:auto 0 62px 0;text-align:center;font-size:14px;color:var(--texto-3);padding:0 20px}
@media (max-width:640px) and (orientation:portrait){.tiny{display:block}}

@media (prefers-reduced-motion:reduce){
  .slide,.cara,.barra i,.railbar i,.pieza,.hud-btn{transition:none}
}

/* ── papel ── */
@media print{
  html,body{height:auto;overflow:visible;background:#fff;color:#000}
  #escenario{position:static}
  #lienzo{position:static;margin:0;transform:none!important;width:100%;height:auto;background:#fff}
  .slide{position:static;opacity:1!important;visibility:visible!important;page-break-after:always;height:auto;min-height:0}
  .wrap{position:static;padding:22px 0}
  .hud,.railbar,.index,.tiny,#visor,.lupa{display:none!important}
  .tarjeta{height:auto;perspective:none}
  .cara{transform:none!important;height:auto}
  .frente,.dorso{position:static;transform:none!important;backface-visibility:visible;height:auto}
  .ficha i,.ficha .veredicto{display:block!important}
  .respuesta .vacia{display:none}
}











/* CL-MEJORAS-INICIO */

/* ════════════════════════════════════════════════════════════
   REVELADO PROGRESIVO  ·  módulo compartido
   La barra espaciadora descubre los elementos de la diapositiva
   uno por uno. Las flechas siguen saltando de lámina completa.

   Los elementos se ocultan ANTES del primer pintado y solo se
   les añade la transición después, para que nunca se vea el
   parpadeo de aparecer y desaparecer.
   ════════════════════════════════════════════════════════════ */
.clf{opacity:0!important;transform:translateY(calc(.6 * var(--u, 10px)))}
.clf-t{transition:opacity .3s ease, transform .3s cubic-bezier(.22,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.clf-t{transition:none}}

/* Durante el montaje se suprime TODA transición del documento. Sin esto,
   los elementos que ya traen una transición propia —los botones de los
   selectores, por ejemplo— se ven desvanecerse al cargar la página. */
body.clf-montando *{transition:none!important;animation-duration:0s!important}

/* indicador discreto de cuántos elementos quedan */
#clf-hint{
  position:fixed;left:50%;bottom:calc(52px + 10px);transform:translateX(-50%);
  z-index:60;display:flex;gap:5px;align-items:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease
}
#clf-hint.on{opacity:.8}
#clf-hint i{
  width:6px;height:6px;border-radius:50%;display:block;
  background:currentColor;opacity:.26;transition:opacity .2s ease,transform .2s ease
}
#clf-hint i.done{opacity:1;transform:scale(1.25)}

/* ════════════════════════════════════════════════════════════
   AYUDA DE USO  ·  módulo compartido
   Vive en el cromo, nunca en la diapositiva: un botón en el HUD
   que abre el panel, y un aviso breve la primera vez que se abre
   la presentación en ese navegador.

   Los colores se toman de los tokens de cada presentación. Cada
   cadena de reserva prueba primero los nombres en inglés de las
   presentaciones antiguas y después los que usa el esqueleto del
   estándar, en español: sin eso, un mazo nuevo caía al #12161f de
   reserva con el color heredado, y en modo claro salía texto negro
   sobre panel negro.
   ════════════════════════════════════════════════════════════ */
#clf-ayuda-btn.clf-suelto{
  position:fixed;right:14px;bottom:58px;z-index:900;
  width:30px;height:30px;border-radius:50%;font-size:14px;line-height:1;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,transparent))));
  color:inherit;opacity:.55;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.4))))
}
#clf-ayuda-btn.clf-suelto:hover{opacity:1}

#clf-ayuda{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:rgba(7,10,16,.55);opacity:0;transition:opacity .18s ease
}
/* Imprescindible: el atributo hidden no puede con un display de autor, y
   sin esta regla la capa se queda encima de la lámina, invisible, robando
   cada clic de los módulos interactivos. */
#clf-ayuda[hidden]{display:none}
#clf-ayuda.on{opacity:1}
@media (prefers-reduced-motion:reduce){#clf-ayuda{transition:none}}

#clf-ayuda .clf-panel{
  position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;
  padding:26px 28px 24px;border-radius:10px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:14px;line-height:1.5;text-align:left
}
#clf-ayuda h2{
  font-size:17px;line-height:1.25;margin:0 0 4px;font-weight:700;
  color:var(--txt,var(--texto,inherit));letter-spacing:0
}
#clf-ayuda .clf-sub{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent,var(--acento,var(--gold,currentColor)));margin:0 0 14px
}
#clf-ayuda dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;align-items:baseline}
#clf-ayuda dt{white-space:nowrap;display:flex;gap:4px}
#clf-ayuda dd{margin:0;color:var(--txt-2,var(--texto-2,var(--dim,inherit)))}
#clf-ayuda .clf-pie{
  margin:16px 0 0;padding-top:14px;font-size:12.5px;
  border-top:1px solid var(--line-soft,var(--linea-suave,var(--line,var(--linea,rgba(127,127,127,.25)))));
  color:var(--txt-3,var(--texto-3,var(--dim,inherit)))
}
#clf-ayuda .clf-cerrar{
  position:absolute;top:10px;right:12px;font-size:20px;line-height:1;
  padding:4px 6px;opacity:.5;background:none;border:0;color:inherit;cursor:pointer
}
#clf-ayuda .clf-cerrar:hover{opacity:1}

#clf-ayuda kbd,#clf-onboard kbd{
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:11.5px;
  padding:2px 6px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.45))));
  background:var(--surface-2,var(--fondo-3,var(--bg-2,var(--bg2,transparent))));
  color:var(--txt,var(--texto,inherit))
}

/* aviso de la primera visita */
#clf-onboard{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  z-index:900;width:min(430px,calc(100vw - 32px));
  padding:14px 16px;border-radius:9px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:13px;line-height:1.45;
  opacity:0;transition:opacity .3s ease,transform .3s ease
}
#clf-onboard.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#clf-onboard{transition:none}}
#clf-onboard p{margin:0 0 4px}
#clf-onboard p:last-of-type{margin:0}
#clf-onboard .clf-acciones{display:flex;gap:14px;align-items:center;margin-top:12px}
#clf-onboard button{
  font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0
}
#clf-onboard .clf-ok{
  padding:5px 12px;border-radius:5px;font-weight:600;font-size:12.5px;
  background:var(--accent,var(--acento,var(--gold,currentColor)));
  color:var(--onaccent,var(--bg,var(--fondo,#fff)))
}
#clf-onboard .clf-todo{font-size:12.5px;opacity:.7;text-decoration:underline}
#clf-onboard .clf-todo:hover{opacity:1}

/* fuera del sitio autorizado no se pinta nada del cromo añadido */
.cl-lock #clf-ayuda-btn,.cl-lock #clf-ayuda,.cl-lock #clf-onboard,.cl-lock #clf-hint{display:none!important}
@media print{#clf-ayuda-btn,#clf-ayuda,#clf-onboard{display:none!important}}

/* ════════════════════════════════════════════════════════════
   VERTICAL · módulo compartido

   Los motores de lienzo fijo escalan un rectángulo de 1280×720 o
   1600×900 al hueco disponible. En un teléfono de pie ese hueco es
   el ancho, y la escala se desploma: medido en IEL con una ventana
   de 375×812, el lienzo quedaba en 375×211 y el cuerpo del texto en
   4.2 px. Ilegible, y encogerlo mejor no existe.

   Así que en vertical se abandona el lienzo. Las láminas dejan de
   estar superpuestas, pasan al flujo normal, se recomponen en una
   columna y la página se desplaza. La tipografía recupera su tamaño
   de diseño —14.5 px de cuerpo, que en un teléfono está bien— porque
   ya no la encoge ninguna transformación.

   El colapso de las rejillas no está aquí: lo genera el inyector
   leyendo la hoja de cada presentación, porque cada una nombra sus
   columnas a su manera.
   ════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio:1/1){

  html,body{overflow-x:hidden;overflow-y:auto;height:auto}

  /* El escenario deja de ser una ventana fija y el lienzo, un lienzo. */
  /* Los cuatro primeros nombres son los de las presentaciones que ya
     existian; #escenario y #lienzo son los que usa el esqueleto del
     estandar, y sin ellos un mazo nuevo escrito segun el documento se
     queda con el lienzo escalado: la tipografia cambia de tamano pero la
     transformacion sigue puesta, asi que en el telefono se ve igual de
     pequena y parece que el modulo funciona cuando no ha entrado. */
  .stage,#viewport,#escenario{position:static;display:block;width:100%}
  .deck,#stage,#lienzo{
    position:static;left:auto;top:auto;margin:0;
    width:100%;max-width:100%;height:auto;min-height:100dvh;
    /* «!important» porque la funcion de ajuste sigue escribiendo la
       transformacion en el atributo de estilo en cada redimension. */
    transform:none!important;
    border:0;box-shadow:none;border-radius:0;
  }

  /* Las láminas dejan de estar una encima de otra. */
  .slide{
    position:static;inset:auto;
    opacity:1;visibility:visible;transform:none;
    display:none;width:100%;max-width:100%;
    padding:22px 18px 88px;
    overflow-wrap:anywhere;
  }
  .slide.on,.slide.is-active{display:flex}

  /* Sin esto, un hijo flex no baja de su contenido y desborda. */
  .slide *{min-width:0}
  .slide > *{max-width:100%}
  .slide [class*="badge"],.slide .tag{flex-wrap:wrap;max-width:100%}
  .body{justify-content:flex-start}

  /* Algunas rejillas se declaran en el atributo de estilo, donde la
     extraccion de selectores del inyector no las ve. Se alcanzan por
     atributo: «!important» gana a un estilo en linea normal. */
  .slide [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* Un titular de 60 px es de proyector, no de telefono: en una columna de
     320 px no cabe ni la primera palabra y se parte a lo bruto —el
     navegador no guiona en espanol, se probo—. Se le pone un techo
     relativo al marco, que es lo que hace DPGA al crecer su unidad. */
  .slide h1{font-size:min(34px,10vw)}
  .slide h2{font-size:min(26px,7.5vw)}
  .slide h3{font-size:min(20px,6vw)}

  /* Y el cuerpo tambien, por la razon contraria. Como aqui se abandona el
     lienzo, las medidas de diseno se usan tal cual, asi que el tamano del
     lienzo decidia a que tamano se lee en un telefono: medido, las de 1280
     quedaban en 13 px —pequeno— y las de 1600 en 22 —grande y con lineas de
     26 caracteres—. Con esta horquilla las tres familias caen en 17-18 px y
     30-36 caracteres, y el lienzo deja de tener consecuencia. */
  .slide p,.slide li,.slide td,.slide th{font-size:clamp(15px,4.8vw,18px)}

  /* Una tabla de ocho o diez columnas no se recompone en una: se
     comprime hasta partir las palabras letra a letra. Se le deja su
     ancho natural y su propio desplazamiento lateral. */
  .slide table{
    display:block;max-width:100%;
    overflow-x:auto;overflow-y:hidden;overflow-wrap:normal;
  }
  .slide table td,.slide table th{white-space:nowrap;overflow-wrap:normal}

  /* El aviso de «esto es de pantalla horizontal» deja de ser cierto
     en cuanto la lámina se recompone. */
  .tiny{display:none!important}
}

/* El cromo absoluto de la lamina, al flujo. */
@media (max-aspect-ratio:1/1){
.slide > /* El centrado va a mano y NUNCA con place-items del padre: cuando el lienzo es mayor que el hueco,
.slide > la especificación degrada ese centrado a alineación al inicio y la lámina se dibuja desplazada. */ #lienzo,
.slide > .slide,
.slide > .wrap,
.slide > /* ── rótulo de sección ── */ .etq,
.slide > .pieza .lupa,
.slide > .sangrada,
.slide > .sangra-todo .wrap::before,
.slide > .sangrada .credito,
.slide > /* El velo del acento marca que es pulsable sin ensuciar la imagen. */ .sangrada::after,
.slide > #visorCerrar,
.slide > /* ── pantalla partida ── */ .partida,
.slide > .mitad li::before,
.slide > .frente,
.slide > .dorso,
.slide > .marca-agua,
.slide > .idx-close{position:static}
}

/* Lo que no se puede partir, con desplazamiento propio. */
@media (max-aspect-ratio:1/1){
.slide .hud-title{max-width:100%;overflow-x:auto}
}

/* Rejillas de esta presentacion, a una columna. */
@media (max-aspect-ratio:1/1){
.slide /* ── columnas ── */ .dos,
.slide .dos.ancha-izq,
.slide .dos.ancha-der,
.slide .galeria.g1,
.slide .galeria.g2,
.slide .galeria.g3,
.slide /* ── pantalla partida ── */ .partida,
.slide /* 1 · ¿Entra o sobra? */ .fichas,
.slide /* 4 · Tu inventario */ .inventario,
.slide /* 27 · tarjetas que se voltean */ .tendencias,
.slide .idx-list{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */