@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:InterMuestra;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --noche:#0b1623; --mar:#1d3a52; --luz:#f2c76b; --luz-osc:#c99a34; --papel:#f4efe6; --papel-2:#e9e1d1;
  --tinta:#17130f; --gris:#4a4339; --linea:#d4c9b3; --teja:#9a3b2e;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:InterMuestra,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ancho:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:1.0625rem;line-height:1.65}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:1.2rem}
h3{font-size:1.6rem;margin-bottom:.6rem}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--luz);outline-offset:3px}
.saltar{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;z-index:99}
.saltar:focus{left:0}
.env{width:min(var(--ancho),100% - 2.5rem);margin-inline:auto}

/* Aviso y cabecera */
.aviso-muestra{background:var(--luz);color:#17130f;padding:.65rem 1.25rem;text-align:center;font-size:.95rem}
.aviso-muestra p{margin:0}
.aviso-muestra a{font-weight:650;margin-left:.4rem}
.cabecera{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1.25rem;background:rgb(11 22 35 / .92);backdrop-filter:blur(8px);color:var(--papel)}
.marca{font-family:var(--serif);font-size:1.5rem;text-decoration:none}
.cabecera nav{display:flex;gap:1.3rem;flex-wrap:wrap}
.cabecera nav a{text-decoration:none;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center}
.cabecera nav a:hover{color:var(--luz)}
@media (max-width:760px){.cabecera nav a:nth-child(n+4){display:none}.cabecera nav{gap:.9rem}}

/* Etiquetas de función (lo que se enseña en el ejemplo) */
.fn{font-family:ui-monospace,"Cascadia Mono","Courier New",monospace;font-size:.875rem;letter-spacing:.04em;text-transform:uppercase;color:#1f4d3a;margin-bottom:.8rem}
.fn-claro{color:var(--luz)}
.fn-b{margin:1.4rem 0 0;color:#cfd8df}

/* Portada */
.portada{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--noche),#12283b 70%,#1a3a52);color:var(--papel)}
.haz{position:absolute;right:-8%;top:14%;width:150%;height:200px;transform-origin:100% 50%;background:linear-gradient(90deg,transparent,rgb(242 199 107 / .13) 40%,rgb(242 199 107 / .3));clip-path:polygon(0 48%,100% 0,100% 100%,0 52%);animation:barre 9s ease-in-out infinite alternate;pointer-events:none}
@keyframes barre{from{transform:rotate(-7deg)}to{transform:rotate(6deg)}}
.portada-in{position:relative;width:min(var(--ancho),100% - 2.5rem);margin-inline:auto;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;padding-block:clamp(2.5rem,7vw,5.5rem)}
.etiqueta{font-family:ui-monospace,"Cascadia Mono","Courier New",monospace;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;color:var(--luz)}
.portada h1{font-size:clamp(3rem,8vw,6.2rem);letter-spacing:-.015em;margin-bottom:1.2rem}
.portada h1 em{color:var(--luz)}
.gancho{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.3;max-width:30ch;color:#e6dcc5}
.cuenta{margin:1.8rem 0}
.cuenta .fn{color:#cfd8df}
.cuenta-cifras{display:flex;gap:clamp(.7rem,2.5vw,1.6rem)}
.cuenta-cifras div{min-width:4.2rem}
.cuenta-cifras b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,4rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--papel)}
.cuenta-cifras span{font-size:.9rem;color:#cfd8df}
.cuenta-fin{font-family:var(--serif);font-size:2rem;color:var(--luz)}
.acciones{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.9rem 1.7rem;background:var(--tinta);color:var(--papel);font:650 1.05rem var(--sans);text-decoration:none;border:0;cursor:pointer;box-shadow:4px 4px 0 var(--luz-osc)}
.portada .boton,.boton-luz{background:var(--luz);color:#17130f;box-shadow:4px 4px 0 rgb(0 0 0 / .35)}
.boton:hover{transform:translate(-2px,-2px)}
.enlace-claro{color:var(--papel);font-weight:600;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center}
.cubierta{margin:0;justify-self:center;width:min(100%,320px);transform:rotate(2deg);filter:drop-shadow(14px 18px 22px rgb(0 0 0 / .5));font-family:var(--serif)}
.cubierta figcaption{text-align:center;font-size:.9rem;color:#cfd8df;margin-top:.8rem;font-family:var(--sans)}
@media (max-width:880px){.portada-in{grid-template-columns:1fr}.cubierta{order:-1;width:min(62%,250px)}}

/* Bloques */
.papel{background:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)}
.oscura{background:var(--noche);color:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)}
.beta{background:var(--mar);color:var(--papel);padding-block:clamp(3rem,7vw,5.5rem)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
@media (max-width:860px){.dos{grid-template-columns:1fr}}
.papel p,.papel li{color:var(--gris)}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.5rem;margin:1.6rem 0 0;padding-top:1.2rem;border-top:2px solid var(--tinta)}
.ficha dt{font-size:.875rem;text-transform:uppercase;letter-spacing:.06em;color:#1f4d3a}
.ficha dd{margin:0;font-family:var(--serif);font-size:1.25rem}
.autora{background:#fffdf8;border:1px solid var(--tinta);padding:1.6rem;box-shadow:6px 6px 0 var(--linea)}
.h1-autora{font-size:clamp(2.8rem,6.5vw,4.8rem);margin-bottom:1rem}
.gancho-oscuro{font-family:var(--serif);font-size:1.55rem;line-height:1.3;color:var(--tinta)!important}
.h2-s{font-size:1.8rem;margin:2rem 0 .6rem}
.boton-sec{background:#1f4d3a;color:#f4efe6;box-shadow:4px 4px 0 var(--linea)}
.autora-nota{font-size:.95rem;color:var(--gris);border-top:1px solid var(--linea);padding-top:1rem;margin:1.2rem 0 0}
.autora-nota b{color:var(--tinta)}
.autora-nota a{color:#1f4d3a;font-weight:650;text-underline-offset:3px}
.ventana{border:1px solid var(--tinta);padding:0;max-width:min(640px,100% - 2rem);width:100%;background:#fffdf8;color:var(--tinta);box-shadow:10px 10px 0 rgb(0 0 0 / .25)}
.ventana::backdrop{background:rgb(11 22 35 / .72)}
.ventana-cierre{display:flex;justify-content:flex-end;margin:0}
.ventana-x{all:unset;box-sizing:border-box;cursor:pointer;width:48px;height:48px;display:grid;place-items:center;font-size:2rem;line-height:1}
.ventana-x:focus-visible{outline:3px solid var(--luz-osc);outline-offset:-6px}
.ventana-cuerpo{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;padding:0 1.8rem 1.8rem}
.ventana h2{font-size:2.2rem;margin-bottom:.6rem}
.ventana p{color:var(--gris)}
.retrato{width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2f5a73,#0b1623);color:var(--luz);font:400 2.2rem var(--serif);display:grid;place-items:center}
.ventana-enlaces{display:flex;gap:1.2rem;flex-wrap:wrap}
.ventana-enlaces a{color:#1f4d3a;font-weight:650;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:560px){.ventana-cuerpo{grid-template-columns:1fr;padding:0 1.2rem 1.4rem}.retrato{width:80px;height:80px;font-size:1.7rem}}
.nota-mano{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:#1f4d3a}

/* Vídeo */
.video{aspect-ratio:16/9;max-width:860px;background:radial-gradient(circle at 70% 30%,#2f5a73,#0b1623 70%);border:1px solid #2f5a73;display:grid;place-items:center;margin:1rem 0}
.video-play{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:.5rem;justify-items:center;text-align:center;padding:2rem;width:100%;height:100%;align-content:center}
.video-play:focus-visible{outline:3px solid var(--luz);outline-offset:-6px}
.play{width:78px;height:78px;border-radius:50%;background:var(--luz);position:relative}
.play::after{content:"";position:absolute;left:31px;top:23px;border-left:24px solid #17130f;border-block:16px solid transparent}
.video-t{font-family:var(--serif);font-size:1.7rem}
.video-s,.video-nota{color:#cfd8df;font-size:.95rem}
.video-nota{max-width:70ch}

/* Formularios */
.form{display:grid;gap:.5rem;margin-top:1.4rem}
.form label{font-weight:600;font-size:1rem;margin-top:.5rem}
.form input[type=text],.form input[type=email],.form select{width:100%;min-height:48px;padding:.7rem .9rem;border:1px solid var(--tinta);border-radius:0;background:#fffdf8;color:var(--tinta);font:inherit;font-size:1rem}
.form .fila{display:grid;grid-template-columns:1fr auto;gap:.6rem}
@media (max-width:560px){.form .fila{grid-template-columns:1fr}}
.form .check{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;font-size:.95rem;margin-top:.8rem}
.form .check input{width:22px;height:22px;margin-top:.15rem;flex:none}
.form .boton{margin-top:.8rem;justify-self:start}
.estado{min-height:1.5rem;margin:.6rem 0 0;font-weight:600;color:#1f4d3a}
.form-claro label,.form-claro .check{color:var(--papel)}
.form-claro .estado{color:var(--luz)}
.lista-b{padding-left:1.2rem}
.lista-b li{margin-bottom:.4rem}

/* Correo de ejemplo */
.correo{background:#fffdf8;border:1px solid var(--tinta);padding:1.4rem 1.6rem;box-shadow:6px 6px 0 var(--linea);transform:rotate(-1deg)}
.correo p{color:var(--gris)}
.correo-cab{display:grid;gap:.15rem;font-size:.875rem;border-bottom:1px solid var(--linea);padding-bottom:.7rem;margin-bottom:1rem}
.correo-t{font-family:var(--serif);font-size:1.8rem!important;color:var(--tinta)!important;line-height:1.1}
.correo-btn{display:inline-block;background:#1f4d3a;color:#fffdf8!important;padding:.6rem 1.1rem;font-weight:650}
.correo-p{font-size:.95rem}

/* Presentación */
.evento{list-style:none;margin:0 0 1.2rem;padding:0;border-top:2px solid var(--tinta)}
.evento li{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--linea)}
.evento b{font-family:ui-monospace,"Cascadia Mono","Courier New",monospace;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;color:#1f4d3a;padding-top:.2rem}
.contacto{background:rgb(255 255 255 / .06);border:1px solid #2f5a73;padding:1.6rem}
.contacto .nota-mano{color:var(--luz)}

/* Cierre y pie */
/* Cierre: el faro. Un haz de luz barre la página y pasa por el titular, que se ilumina a su paso. */
.cierre{position:relative;overflow:hidden;text-align:center;color:var(--papel);padding-block:clamp(4rem,9vw,7rem) clamp(3.5rem,8vw,6rem);
  background:
    radial-gradient(1.5px 1.5px at 12% 22%,#f4efe6 50%,transparent 51%),
    radial-gradient(1px 1px at 27% 60%,#f4efe6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 18%,#f4efe6 50%,transparent 51%),
    radial-gradient(1px 1px at 71% 54%,#f4efe6 50%,transparent 51%),
    radial-gradient(1px 1px at 92% 74%,#f4efe6 50%,transparent 51%),
    radial-gradient(1px 1px at 6% 80%,#f4efe6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 48% 12%,#f4efe6 50%,transparent 51%),
    linear-gradient(180deg,#0b1623,#12283b 65%,#1a3a52)}
.cierre .env{position:relative;z-index:1}
.cierre-faro{margin:0 auto 1.2rem;overflow:visible}
.cierre-faro .halo{transform-origin:60px 40px;animation:late 4s ease-in-out infinite alternate}
@keyframes late{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.12)}}
.cierre-haz{display:block;max-width:none;position:absolute;left:50%;top:calc(clamp(4rem,9vw,7rem) - 82px);width:min(1500px,170%);height:220px;margin-left:calc(min(1500px,170%) / -2);pointer-events:none}
.cierre-haz .b-d,.cierre-haz .b-i{transform-origin:750px 110px;animation:haz 7s ease-in-out infinite alternate}
.cierre-haz .b-i{animation-name:haz-i}
@keyframes haz{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
@keyframes haz-i{from{transform:scaleX(1)}to{transform:scaleX(.02)}}
.cierre h2{max-width:20ch;margin-inline:auto;font-size:clamp(2.2rem,5.4vw,4rem);color:var(--papel)}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .cierre h2{color:transparent;-webkit-background-clip:text;background-clip:text;background-size:280% 100%;
    background-image:linear-gradient(100deg,#8fa3b5 0%,#8fa3b5 38%,#fff3d4 50%,#8fa3b5 62%,#8fa3b5 100%);
    animation:barrido 7s ease-in-out infinite alternate}
}
@keyframes barrido{from{background-position:0 0}to{background-position:100% 0}}
.cierre p{max-width:46ch;margin-inline:auto;color:#cfd8df}
.cierre .boton{margin:1.2rem 0 1.4rem}
.cierre .enlace-claro{color:var(--papel)}
@media (max-width:700px){.cierre-haz{display:none}.cierre h2{color:var(--papel);background:none;animation:none}}
.pie{background:var(--noche);color:#cfd8df;padding:1.6rem 1.25rem;text-align:center;font-size:.95rem}
.pie p{margin:0}
.pie a{color:var(--luz)}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);max-width:min(560px,100% - 2rem);background:var(--tinta);color:var(--papel);padding:.9rem 1.2rem;border-left:4px solid var(--luz);z-index:60;box-shadow:0 12px 30px rgb(0 0 0 / .4)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .haz{animation:none;transform:rotate(-2deg)}
  .cierre-haz .b-d,.cierre-haz .b-i,.cierre-faro .halo{animation:none}
  .cierre-haz .b-d{transform:scaleX(.6)}.cierre-haz .b-i{transform:scaleX(.6)}
  .cierre h2{animation:none;background:none;color:var(--papel)}
  .boton:hover{transform:none}
}