/* Formato Uniones químicas (quimica-uniones-e8r.pages.dev) aplicado a fq3.
   Capa de presentación: se carga al final y no cambia contenido ni scripts. */
@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=Lora:wght@600;700&display=swap");
:root{
  --fondo:#f7f8fa; --fondo-2:#ffffff; --texto:#14181f; --suave:#4d5666; --borde:#e3e7ee; --borde-control:#6b7787;
  --acento:#1f6f5c; --acento-suave:#e6f2ee; --azul:#1f5c8b; --aviso:#8a5a00; --aviso-suave:#fdf3e0; --sobre-acento:#fff;
  --video:#0f1216; --radio:14px; --e3:16px; --e4:24px;
  --sombra:0 1px 2px rgba(31,92,139,.08),0 10px 28px -8px rgba(31,92,139,.14);
  --bg:var(--fondo); --surface:var(--fondo-2); --ink:var(--texto); --muted:var(--suave); --line:var(--borde);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fondo:#0f1216; --fondo-2:#161b22; --texto:#e8ecf1; --suave:#a3adbb; --borde:#252c36; --borde-control:#636f7f;
  --acento:#5fd1b0; --acento-suave:#12241f; --azul:#7db2f0; --aviso:#e0a463; --aviso-suave:#241c12; --sobre-acento:#0f1216;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);}}
:root[data-theme="dark"]{
  --fondo:#0f1216; --fondo-2:#161b22; --texto:#e8ecf1; --suave:#a3adbb; --borde:#252c36; --borde-control:#636f7f;
  --acento:#5fd1b0; --acento-suave:#12241f; --azul:#7db2f0; --aviso:#e0a463; --aviso-suave:#241c12; --sobre-acento:#0f1216;}
html{scroll-behavior:smooth}
body{font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.6;
  background:var(--fondo);color:var(--texto);font-variant-numeric:tabular-nums}
a{color:var(--azul)}
h1,h2,.inicio-caja h3{font-family:Lora,Georgia,serif;letter-spacing:-.01em;text-wrap:balance}
p,li{text-wrap:pretty}

/* Portada centrada */
header.portada{display:block;max-width:none;margin:0;padding:4rem 1.5rem 3rem;text-align:center;border-bottom:1px solid var(--borde);position:relative}
header.portada::before{display:none}
header.portada h1{font-size:clamp(2.1rem,6vw,3.6rem);letter-spacing:-.01em;line-height:1.08;margin:0 auto .6rem;max-width:24ch}
header.portada p{color:var(--suave);max-width:46rem;margin:0 auto}
header.portada .marca{color:var(--c,var(--acento));margin-bottom:.6rem}
header.portada .lead{font-size:1rem}
header.portada .pregunta{font-family:Lora,Georgia,serif;font-size:1.25rem;color:var(--texto);margin:.8rem auto 0}
header.portada .partes{justify-content:center;margin:.9rem 0 0}
header.portada .idea-central{max-width:46rem;margin:1.2rem auto 0;text-align:left;font-size:1rem;color:var(--texto);
  background:var(--fondo-2);border:1px solid var(--borde);border-left:4px solid var(--c,var(--acento));border-radius:12px;padding:.8rem 1rem}
header.portada .enlace-presentacion{margin-top:1.2rem}
header.portada .enlace-presentacion a{display:inline-block;padding:.6rem 1.2rem;border-radius:999px;font-weight:700;text-decoration:none;
  background:var(--acento);color:var(--sobre-acento);border:1px solid var(--acento)}
header.portada .estado-bloque{vertical-align:middle}
.inicio-titulo{margin:var(--e4) 0 var(--e3);font-size:1.35rem;font-family:Lora,Georgia,serif}
header.portada .inicio-sec{padding:0;border:0}
.inicio{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e3);text-align:left;max-width:64rem;margin:0 auto}
.inicio-caja{position:relative;background:var(--fondo-2);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);
  padding:var(--e4) var(--e4) var(--e4) calc(var(--e4) + 2.4rem)}
.inicio-caja h3{margin:0 0 .5rem;font-size:1.15rem}
header.portada .inicio-caja p,.inicio-caja p{margin:0 0 .6rem;color:var(--suave);max-width:none}
.inicio-n{position:absolute;left:var(--e3);top:var(--e4);width:2rem;height:2rem;border-radius:50%;background:var(--azul);color:#fff;font-weight:700;display:grid;place-items:center}
@media (min-width:900px){.inicio{grid-template-columns:1fr 1fr}.inicio-caja:first-child{grid-column:1/-1}}
.instrucciones{max-width:64rem;margin:var(--e4) auto 0;text-align:left;background:var(--fondo-2);border:1px solid var(--borde);border-radius:var(--radio);padding:var(--e3) var(--e4)}
.instrucciones summary{cursor:pointer;font-weight:700;font-size:1.05rem;color:var(--azul)}
.instrucciones ol{margin:var(--e3) 0 0;padding-left:1.4rem}
.instrucciones li{margin-bottom:.35rem}
.nota-inicio{font-size:.92rem;margin-top:var(--e3)!important}
header.portada p.previo{margin-top:1.4rem;font-size:.95rem}

/* Barra pegajosa de píldoras (reemplaza la barra superior) */
nav.indice{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);padding:.6rem 1rem;display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;align-items:center;margin:0}
nav.indice a{color:var(--suave);text-decoration:none;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--borde-control);font-size:.9rem;white-space:nowrap;background:transparent}
nav.indice a:hover{color:var(--texto);border-color:var(--azul);background:transparent}
nav.indice a.destacado{color:var(--acento);border-color:var(--acento)}
nav.indice a b{color:var(--acento);margin-right:.3rem}
nav.indice .modo-switch{display:inline-flex;border:1px solid var(--borde-control);border-radius:999px;overflow:hidden;margin-left:.4rem}
nav.indice .modo-switch button{background:transparent;color:var(--suave);border:0;cursor:pointer;padding:.35rem .8rem;font-size:.85rem;font-family:inherit}
nav.indice .modo-switch button[aria-pressed="true"]{background:var(--aviso);color:var(--sobre-acento);font-weight:700}
nav.indice{margin-left:0}

/* Cuerpo */
main{max-width:76rem;margin:0 auto;padding:0 1.2rem 5rem}
main .wrap{max-width:none;padding:0}
main.wrap{max-width:76rem;padding:0 1.2rem 5rem}
section.bloque{padding-top:3.2rem;padding-bottom:0;border-bottom:0}
section.bloque>h2,.modulo-cab h2{font-size:clamp(1.3rem,3.2vw,1.9rem);margin:0 0 .3rem}
section.bloque>h2 .n{color:var(--acento);background:none;border:0;width:auto;height:auto;display:inline;margin-right:.5rem;font-variant-numeric:tabular-nums}
section.bloque>p.resumen,.modulo-cab .sub{color:var(--suave);margin:0 0 1.6rem;max-width:52rem}
.clase-seccion p,.clase-seccion li{max-width:52rem}
.clase-seccion{font-size:1.05rem}
.grilla{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.u-tarjeta{background:var(--fondo-2);border:1px solid var(--borde);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease}
.u-tarjeta:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.u-tarjeta video,.u-tarjeta img{width:100%;display:block}
.u-tarjeta img{background:var(--fondo-2)}
.u-tarjeta .texto{padding:.9rem 1rem 1.1rem}
.u-tarjeta h3{margin:0 0 .3rem;font-size:1.05rem}
.u-tarjeta p{margin:0;color:var(--suave);font-size:.92rem}
.enlaces-bloque{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 1.6rem}
.enlaces-bloque a{font-size:.88rem;text-decoration:none;border:1px solid var(--borde-control);border-radius:999px;padding:.35rem .85rem;color:var(--texto)}
.enlaces-bloque a:hover{border-color:var(--azul)}
.boton{display:inline-block;padding:.6rem 1.2rem;border-radius:999px;font-weight:700;text-decoration:none;border:1px solid var(--borde-control);color:var(--texto);transition:transform .2s ease}
.boton.principal{background:var(--acento);color:var(--sobre-acento);border-color:var(--acento)}
.boton:hover{transform:translateY(-1px);border-color:var(--azul)}

/* Lectura */
details.lectura{background:var(--fondo-2);border:1px solid var(--borde);border-radius:12px;padding:.8rem 1.1rem;margin:0 0 1.6rem}
details.lectura>summary{cursor:pointer;color:var(--acento);font-weight:600}
details.lectura h3{font-size:1.08rem;margin:1.5rem 0 .4rem;color:var(--texto)}
details.lectura p,details.lectura li{color:var(--suave)}
details.lectura strong,details.lectura th{color:var(--texto)}
.idea-central,details.lectura .clave{border-left:3px solid var(--acento)}

/* Módulos de la portada y de presentaciones: filas -> grilla de tarjetas */
section.modulo{padding-top:3.2rem;padding-bottom:0;border:0}
.modulo-cab{display:flex;gap:.6rem;align-items:baseline;margin:0 0 .4rem}
.modulo-cab .modulo-letra{font-family:Lora,Georgia,serif;font-size:clamp(1.3rem,3.2vw,1.9rem);font-weight:700;color:var(--acento);background:none;width:auto;height:auto;border:0}
ol.filas{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));list-style:none;padding:0;margin:0}
.fila{display:flex;flex-direction:column;padding:0;border:1px solid var(--borde);border-radius:12px;background:var(--fondo-2);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.fila:first-child{border-top:1px solid var(--borde)}
.fila:hover{transform:translateY(-2px);box-shadow:var(--sombra)}
.fila .miniatura{display:block;background:var(--video);aspect-ratio:16/9;overflow:hidden}
.fila .miniatura img{width:100%;height:100%;object-fit:cover;display:block}
.fila .miniatura.sin{display:grid;place-items:center;color:#cfd6df;font-family:Lora,Georgia,serif;font-size:1.1rem;padding:1rem;text-align:center}
.fila-n{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.fila-cuerpo{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.fila .kicker{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--acento));margin:0 0 .25rem}
.fila h3{margin:0 0 .3rem;font-size:1.05rem;line-height:1.3;font-family:Onest,sans-serif}
.fila-titulo{text-decoration:none;color:var(--texto)}
.fila-titulo::after{content:""}
.fila p{color:var(--suave);font-size:.92rem;margin:0 0 .8rem}
.fila .partes{margin-top:auto;gap:.4rem}
.parte{font-size:.8rem;border-radius:999px;border-color:var(--borde-control);background:transparent}
a.parte-deck{color:var(--acento);border-color:var(--acento);font-weight:600}

/* Clase: animación, videos y láminas como tarjetas */
.video-clase{background:var(--fondo-2);border:1px solid var(--borde);border-radius:12px;overflow:hidden}
.video-clase video{border-radius:0;background:var(--video)}
.video-clase details{padding:.7rem 1rem}
.yt{position:relative;aspect-ratio:16/9;background:var(--video)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-yt .meta{font-size:.82rem;margin:.1rem 0 .5rem}
.video-yt p+p{margin-top:.5rem}
#laminas>h2,#videos-clase>h2{font-family:Onest,sans-serif;font-size:1rem;color:var(--suave);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin:0 0 1rem}
.laminas{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.lamina{background:var(--fondo-2);border:1px solid var(--borde);border-radius:12px}
.lamina img{border-bottom:1px solid var(--borde)}
.descargas a{font-size:.85rem;text-decoration:none;border-bottom:1px dotted}
.figura-presentacion{margin:1.4rem 0;background:var(--fondo-2);border:1px solid var(--borde);border-radius:12px;overflow:hidden;max-width:52rem}
.figura-presentacion img{display:block;width:100%;height:auto;background:#fff}
.figura-presentacion figcaption{padding:.7rem 1rem;font-size:.88rem;color:var(--suave)}

/* Pie */
footer{border-top:1px solid var(--borde);padding:2.5rem 1.5rem;text-align:center;color:var(--suave);font-size:.9rem}
footer .wrap{max-width:76rem}
footer .nav-clases{text-align:left}
@media print{nav.indice,.modo-switch,.enlaces-bloque{display:none!important}body{background:#fff;color:#000}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}