/* Semana 53 · estilos del sitio. Los colores y tipografías salen de la marca (CLAUDE.md). No cambiar tokens sin aprobación. */
/* Layout: columna editorial de 1120px; bandas a todo el ancho con su propio relleno lateral. Marca Semana 53 (CLAUDE.md). Tema único claro, por decisión de marca. */
:root{
  --bg:#F5F7F6; --card:#FFFFFF; --tint:#DDECEC; --line:#C9D6D7;
  --ink:#13262B; --ink2:#4D6166; --pet:#12343B; --deep:#12343B; --on-deep:#F5F7F6; --amber:#E9A23B;
  --f-display:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);margin:0}
a{color:var(--pet)}
a:focus-visible,button:focus-visible{outline:3px solid var(--pet);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{padding-block:clamp(3rem,7vw,5.5rem)}
.band.alt{background:var(--card);border-block:1px solid var(--line)}
.band.deep{background:var(--deep);color:var(--on-deep)}
.band.deep .lead,.band.deep p{color:#C9DCDE}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.6vw,4rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600}
p{margin:0;max-width:65ch}
.lead{font-size:clamp(1.1rem,1.6vw,1.25rem);color:var(--ink2)}
.eyebrow{font-family:var(--f-mono);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--pet)}
.band.deep .eyebrow{color:var(--amber)}
.stack{display:flex;flex-direction:column;gap:1rem}
.stack-lg{display:flex;flex-direction:column;gap:2rem}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Encabezado */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(245,247,246,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.75rem}
.logo{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--ink);font:700 1.35rem/1 var(--f-display)}
.logo b{font:600 .95rem/1 var(--f-mono);background:var(--amber);color:var(--ink);padding:.3rem .4rem;border-radius:5px}
.nav{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink2);text-decoration:none;font-size:.95rem}
.nav a:hover{color:var(--ink)}
@media (max-width:640px){.nav .hide-sm{display:none}}

/* Botones */
.btns{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.2rem;border-radius:6px;font:600 1rem/1 var(--f-body);text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn.pri{background:var(--pet);color:#fff}
.btn.pri:hover{background:#1E525C}
/* sobre fondo oscuro el botón principal va en ámbar, el único color de contraste */
.band.deep .btn.pri,.hero-band .btn.pri,.feat .btn.pri,.res .btn.pri{background:var(--amber);color:var(--ink)}.band.deep .btn.pri:hover,.hero-band .btn.pri:hover,.feat .btn.pri:hover,.res .btn.pri:hover{background:#D9922B}
.btn.sec{background:transparent;color:var(--pet);border-color:var(--pet)}
.btn.sec:hover{background:var(--tint)}
.band.deep .btn.sec{color:var(--on-deep);border-color:#5E9EA6}
.pend{position:relative}

/* Héroe */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero > *{min-width:0}
.red{width:100%;max-width:400px;height:auto;display:block;margin-inline:auto}
.red .n{fill:var(--tint)} .red .n.on{fill:var(--pet)} .red .l{stroke:#AFCDD1;stroke-width:1.5}
.red .b{fill:var(--amber)} .red .bt1{font:600 14px var(--f-mono);fill:var(--ink);letter-spacing:.08em} .red .bt2{font:600 56px var(--f-mono);fill:var(--ink)}
@media (max-width:820px){.hero{grid-template-columns:1fr}.red{max-width:300px}}
@media (prefers-reduced-motion:no-preference){.red .l{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.6s ease-out .2s forwards}}
@keyframes draw{to{stroke-dashoffset:0}}

/* Grillas de tarjetas */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
@media (max-width:820px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;min-width:0}
.band.alt .card{background:var(--bg)}
.card .ic{color:var(--pet);width:26px;height:26px}
.card p{color:var(--ink2)}

/* Programas */
.prog{display:grid;grid-template-columns:1.4fr 1fr;gap:1.25rem}
@media (max-width:820px){.prog{grid-template-columns:1fr}}
.prog .feat,.band.alt .prog .feat{background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.prog .feat p{color:#C9DCDE}
.pill{align-self:flex-start;font:600 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:.4rem .55rem;border-radius:999px;background:var(--amber);color:var(--ink)}
.pill.muted{background:var(--tint);color:var(--pet)}
.facts{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font:500 .9rem/1.4 var(--f-mono);color:#C9DCDE}

/* Personas */
.person{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.avatar{width:56px;height:56px;border-radius:12px;background:var(--tint);color:var(--pet);display:grid;place-items:center;font:700 1.2rem var(--f-display)}

/* Hechos rápidos (VigIA) */
.strip{color:var(--ink);display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.strip div{padding:1rem 1.25rem;border-right:1px solid var(--line);min-width:0}
.strip div:last-child{border-right:0}
.strip small{display:block;font:600 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.strip strong{font:700 1.15rem/1.3 var(--f-display)}
@media (max-width:820px){.strip{grid-template-columns:1fr 1fr}.strip div:nth-child(2){border-right:0}.strip div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* Embudo notificaciones -> casos */
.funnel{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:820px){.funnel{grid-template-columns:1fr}}
.num{font:700 clamp(2.2rem,4.5vw,3.2rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
.num.amber{display:inline-block;background:var(--amber);color:var(--ink);padding:.15rem .5rem;border-radius:8px}
.bar{height:10px;border-radius:6px;background:var(--tint);overflow:hidden}
.bar i{display:block;height:100%;background:var(--pet)}

/* Semanas */
.weeks{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:820px){.weeks{grid-template-columns:1fr}}
.week{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.25rem;min-width:0}
.week .k{font:600 .78rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pet)}
.week .k b{display:block;font:700 1.9rem/1 var(--f-display);color:var(--ink);letter-spacing:0;text-transform:none;margin-top:.25rem}
.week .built{font:500 .85rem/1.4 var(--f-mono);color:var(--pet);margin-top:.35rem}
.week.last{grid-column:1/-1;background:var(--deep);color:var(--on-deep);border-color:var(--deep)}
.week.last p{color:#C9DCDE}.week.last .k{color:var(--amber)}.week.last .k b{color:var(--on-deep)}.week.last .built{color:var(--amber)}

/* Precio */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:820px){.price{grid-template-columns:1fr}}
/* Cuatro formas de pago (29-oct): 4 en fila en pantalla grande, 2 × 2 en tableta, 1 en celular */
.price.cuatro{grid-template-columns:repeat(4,1fr)}
.price.cuatro .amount{font-size:clamp(1.35rem,1.9vw,1.75rem);white-space:nowrap}
@media (max-width:1100px){.price.cuatro{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.price.cuatro{grid-template-columns:1fr}}
.price .card.main{border:2px solid var(--pet)}
.amount{font:700 2rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}

/* Preguntas */
details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.25rem}
details+details{margin-top:.75rem}
summary{cursor:pointer;font:600 1.1rem/1.4 var(--f-display);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--f-mono);color:var(--pet)}
details[open] summary::after{content:"–"}
details p{margin-top:.75rem;color:var(--ink2)}


/* Héroe oscuro con red viva */
.band.hero-band{background:radial-gradient(1200px 500px at 85% 20%,#1B4A53 0%,var(--deep) 60%);color:var(--on-deep);overflow:hidden}
.hero-band .lead{color:#C9DCDE}
.hero-band .eyebrow{color:var(--amber)}
.hero-band .btn.sec{color:var(--on-deep);border-color:#5E9EA6}
.hero-band .btn.sec:hover{background:#1B4A53}
.hero-band .red .n{fill:#1E525C}.hero-band .red .n.on{fill:#3E8A94}.hero-band .red .l{stroke:#2E6B75}
.red .pk{fill:var(--amber)}
@media (prefers-reduced-motion:no-preference){
 .red .n.on{animation:blink 3.5s ease-in-out infinite}
 .red .glow{animation:glow 2.6s ease-in-out infinite}
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(233,162,59,0))}50%{filter:drop-shadow(0 0 14px rgba(233,162,59,.55))}}
.top{background:#12343B;backdrop-filter:none}
.top .logo{color:var(--on-deep)} .top .nav a{color:#C9DCDE} .top .nav a:hover{color:#fff}
.top{border-bottom-color:#1E525C}

/* Terminal: la orden en vivo */
.term{background:#0B2228;border:1px solid #1E525C;border-radius:12px;overflow:hidden;font:500 .88rem/1.65 var(--f-mono);color:#C9DCDE;box-shadow:0 20px 60px rgba(0,0,0,.35);min-width:0}
.term .bar{display:flex;gap:6px;padding:.7rem .9rem;background:#12343B;border-bottom:1px solid #1E525C;height:auto}
.term .bar i{width:10px;height:10px;border-radius:50%;background:#2E6B75;display:block}
.term .bar span{margin-left:auto;font-size:.72rem;letter-spacing:.08em;color:#7FA9AE}
.term pre{margin:0;padding:1rem 1.1rem 1.2rem;white-space:pre-wrap;word-break:break-word}
.term .cmd{color:#F5F7F6}.term .ok{color:#7FD1B9}.term .n53{color:var(--amber)}
.term .ln{display:block}
.term .caret{display:inline-block;width:.55em;height:1em;background:var(--amber);vertical-align:-2px;animation:car 1s steps(1) infinite}
@keyframes car{50%{opacity:0}}

/* Calculadora */
.calc{display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem;align-items:stretch}
@media (max-width:820px){.calc{grid-template-columns:1fr}}
.calc label{display:flex;justify-content:space-between;gap:1rem;font-weight:700}
.calc output{font:600 .95rem var(--f-mono);color:var(--pet);white-space:nowrap}
.res .golpe{font:700 1.15rem/1.3 var(--f-display);color:var(--on-deep);margin-top:-.25rem}
.btn.amb{background:var(--amber);color:var(--ink)}.btn.amb:hover{background:#D9922B}
.res .sig{margin-top:.25rem}.res .sig a{color:var(--amber);font-weight:700}
input[type=range]{width:100%;accent-color:var(--pet);height:28px}
.res,.band.alt .card.res{background:var(--deep);color:var(--on-deep);border-color:var(--deep);justify-content:center}
.res .big{font:700 clamp(3rem,7vw,4.5rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
.res .big small{font-size:.35em;font-weight:600;margin-left:.3rem;color:#C9DCDE}
.res p{color:#C9DCDE}
.res .amberline{font:600 .9rem var(--f-mono);color:var(--amber)}

/* WhatsApp flotante y barra fija en celular */
.fab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:9;display:inline-flex;align-items:center;gap:.5rem;background:var(--pet);color:#fff;text-decoration:none;font-weight:700;padding:.85rem 1.1rem;border-radius:999px;box-shadow:0 10px 30px rgba(13,100,112,.35)}
.fab:hover{background:#0A5560}
.mbar{display:none}
@media (max-width:640px){
 .fab{display:none}
 .mbar{display:flex;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:9;background:rgba(245,247,246,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:.6rem max(16px,env(safe-area-inset-right,0px)) calc(.6rem + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
 .mbar .btn{flex:1;justify-content:center;padding:.8rem .5rem}
 body{padding-bottom:72px}
}

/* Quiz en ventana emergente */
.quiz-dlg{padding:0;border:1px solid var(--line);border-radius:12px;width:min(960px,calc(100vw - 32px));height:min(90dvh,900px);max-width:none;max-height:none;background:var(--card);color:var(--ink);overflow:hidden}
.quiz-dlg[open]{display:flex;flex-direction:column}
.quiz-dlg::backdrop{background:rgba(11,34,40,.65)}
.qbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem .5rem .4rem 1rem;background:var(--deep);color:var(--on-deep)}
.qbar strong{font:600 .95rem/1.3 var(--f-display);min-width:0}
.qact{display:flex;align-items:center;gap:.25rem;flex:none}
.qact a{color:#C9DCDE;font-size:.85rem;padding:.6rem}
.qclose{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:6px;background:transparent;color:var(--on-deep);cursor:pointer}
.qclose:hover{background:#1B4A53}
.quiz-dlg iframe{flex:1;width:100%;border:0;background:var(--card)}
body.quiz-open{overflow:hidden}
@media (max-width:640px){.quiz-dlg{width:100vw;height:100dvh;border:0;border-radius:0}.qbar strong{font-size:.85rem}}

/* Páginas legales */
.legal{max-width:760px;display:flex;flex-direction:column;gap:1rem}
.legal h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.legal h2{font-size:1.35rem;margin-top:1.25rem}
.legal ul{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.4rem}
.legal .vig{font-size:.9rem;color:var(--ink2)}
.hueco{background:var(--amber);color:var(--ink);padding:0 .25rem;border-radius:4px;font-weight:700}

/* Pie */
footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--ink2);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.nota-ind{font-size:.9rem;color:var(--ink2);border-left:3px solid var(--line);padding-left:.9rem;max-width:72ch}

/* Accesos bajo el título de la portada */
.hero-band .accesos{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:clamp(1.5rem,4vw,2.5rem)}
.acceso{display:flex;flex-direction:column;gap:.25rem;border:1px solid #2E6B75;border-radius:12px;padding:1rem 1.1rem;text-decoration:none;color:var(--on-deep);background:rgba(255,255,255,.03)}
.acceso:hover,.acceso:focus-visible{background:#1B4A53;outline:none;border-color:#5E9EA6}
.acceso b{font-family:var(--f-display);font-size:1.15rem}
.acceso span:last-child{font-size:.92rem;color:#C9DCDE}
@media (max-width:820px){.hero-band .accesos{grid-template-columns:1fr}}
/* En celular la red de semanas se funde con una malla de celdas del mismo tamaño, centrada:
   las celdas se encienden y forman el 53 dentro de la malla, y el texto sube para que los botones se vean */
@media (max-width:820px){
 .band.hero-band{position:relative}
 .band.hero-band:has(.red)::before{content:"";position:absolute;left:0;right:0;top:0;height:430px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.9' height='20.9'%3E%3Crect x='1.4' y='1.4' width='18' height='18' rx='2.4' fill='%231E525C'/%3E%3C/svg%3E") calc(50% + 10.45px) 0/20.9px 20.9px repeat;opacity:.4;-webkit-mask-image:radial-gradient(circle at 50% 125px,#000 60px,rgba(0,0,0,.8) 100px,rgba(0,0,0,.5) 150px,rgba(0,0,0,.25) 200px,rgba(0,0,0,.08) 250px,transparent 295px);mask-image:radial-gradient(circle at 50% 125px,#000 60px,rgba(0,0,0,.8) 100px,rgba(0,0,0,.5) 150px,rgba(0,0,0,.25) 200px,rgba(0,0,0,.08) 250px,transparent 295px);pointer-events:none}
 .band.hero-band > .wrap.hero{position:static}
 .hero-band .red{position:absolute;top:40.4px;left:50%;transform:translateX(-50%);width:170px;max-width:none;margin:0}
 .hero-band:has(.red) .hero > .stack-lg{position:relative;z-index:1;padding-top:200px}
 .band.hero-band > .wrap.accesos{position:relative;z-index:1}
}
/* En computador, la misma idea del celular: la red de semanas se funde con una malla del mismo paso,
   que se difumina desde el logo hacia afuera. El paso de la malla sale del ancho del logo (unidades cqw). */
@media (min-width:821px){
 .red-box{position:relative;width:min(400px,100%);margin-inline:auto;container-type:inline-size}
 .red-box .red{position:relative;z-index:1;max-width:none}
 .red-box::before{content:"";position:absolute;--p:calc(100cqw * 44.25 / 360);left:calc(-4 * var(--p));top:calc(-4 * var(--p));width:calc(100% + 8 * var(--p));height:calc(100% + 8 * var(--p));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.25 44.25'%3E%3Crect x='6' y='6' width='38.2' height='38.2' rx='5' fill='%231E525C'/%3E%3C/svg%3E") 0 0/var(--p) var(--p) repeat;opacity:.4;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,.75) 40%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.06) 68%,transparent 74%);mask-image:radial-gradient(circle at 50% 50%,#000 30%,rgba(0,0,0,.75) 40%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.06) 68%,transparent 74%);pointer-events:none}
}
/* En computador, menos aire arriba del título para que los botones se vean sin deslizar */
@media (min-width:821px){.band.hero-band{padding-top:clamp(1.5rem,2.5vw,2.25rem)}}
/* Calculadora: 4 barras con los niveles del quiz; en computador, en dos columnas */
.tareas{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem;align-content:start}
.tareas .tarea{display:flex;flex-direction:column;gap:.35rem}
.tareas label{flex-direction:column;align-items:flex-start;gap:.15rem}
.tareas .pequena{grid-column:1/-1;font-size:.9rem;color:var(--ink2);margin:0}
@media (max-width:820px){.tareas{grid-template-columns:1fr}}
/* Las barras quedan alineadas entre columnas: el nombre ocupa la misma altura en cada fila y el control va abajo */
.tareas .tarea{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:.35rem}
.tareas label{justify-content:flex-end;height:100%}
@supports not (grid-template-rows:subgrid){.tareas label{min-height:3.4em}}

/* Traductor en la portada: lo esencial en puntos y el detalle de eventos plegado */
.puntos{margin:0;padding-left:1.2rem;color:var(--ink2);display:grid;gap:.35rem}
.puntos li::marker{color:var(--pet)}
.mas summary{cursor:pointer;color:var(--pet);font-weight:700}
.mas p{margin-top:.5rem}

/* Quiénes somos en celular: la inicial arriba y el texto a todo el ancho */
@media (max-width:600px){.person{grid-template-columns:1fr}.person .avatar{width:48px;height:48px}}

/* Franja de la clase gratuita del 5-nov bajo el encabezado de la portada (23-oct). Enlace de texto, no botón: el ámbar queda para el botón principal. */
.franja{display:block;background:var(--tint);color:var(--ink);text-decoration:none;font-size:.95rem;padding-block:.6rem;border-bottom:1px solid var(--line)}
.franja .wrap{display:block;text-align:center}
.franja-ir{color:var(--pet);font-weight:700;text-decoration:underline;white-space:nowrap}
.franja:hover .franja-ir,.franja:focus-visible .franja-ir{text-decoration:none}

/* Franja de título de las páginas internas (clase, quiz y traductor), la misma de la portada y VigIA (28-oct) */
.band.cab{position:relative;padding-block:clamp(2.25rem,6vw,3.75rem)}
.cab .wrap{position:relative}
.cab h1{font:700 clamp(2rem,5.5vw,3.1rem)/1.08 var(--f-display);color:var(--on-deep);margin:.6rem 0 .7rem;max-width:18ch}
.cab .lead{max-width:56ch}
.cab-in{position:relative;z-index:1;max-width:640px}
.cab-celdas{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(9,22px);gap:6px;pointer-events:none}
.cab-celdas i{width:22px;height:22px;border-radius:5px;background:#1E525C}.cab-celdas i:nth-child(7n+3){background:#2E6B75}.cab-celdas i:last-child{background:var(--amber)}
@media (max-width:900px){.cab-celdas{display:none}}

/* Revisión del 28-oct: el botón flotante no tapa el pie; menú único */
footer{padding-bottom:calc(2rem + 64px)}
@media (min-width:900px){footer{padding-bottom:2rem}footer .wrap{padding-right:150px}}

/* Estilo «boleto» de las páginas de un solo propósito: clase, quiz y traductor (28-oct, JuanCa).
   Franja oscura con cuadrícula de marca de agua, título y tarjetas numeradas a la izquierda, la acción a la derecha. */
.boleto{padding-block:clamp(2rem,5vw,3.5rem)}
/* Cuadrícula de marca de agua que se difumina, la misma de la portada (28-oct) */
.boleto{position:relative;overflow:hidden}.boleto>.wrap{position:relative}
.boleto::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.25 44.25'%3E%3Crect x='6' y='6' width='38.2' height='38.2' rx='5' fill='%231E525C'/%3E%3C/svg%3E") 0 0/44px 44px repeat;opacity:.45;-webkit-mask-image:radial-gradient(ellipse 60% 85% at 76% 42%,#000 18%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.35) 58%,rgba(0,0,0,.1) 76%,transparent 92%);mask-image:radial-gradient(ellipse 60% 85% at 76% 42%,#000 18%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.35) 58%,rgba(0,0,0,.1) 76%,transparent 92%);pointer-events:none}
@media (max-width:959px){.boleto::before{-webkit-mask-image:radial-gradient(ellipse 90% 45% at 50% 40%,#000 15%,rgba(0,0,0,.5) 50%,transparent 90%);mask-image:radial-gradient(ellipse 90% 45% at 50% 40%,#000 15%,rgba(0,0,0,.5) 50%,transparent 90%)}}
.bol{display:grid;gap:1.5rem;grid-template-areas:"txt" "cupo" "items"}
.bol-txt{grid-area:txt}.bol-cupo{grid-area:cupo}.bol-items{grid-area:items}
@media (min-width:960px){.bol{grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"txt cupo" "items cupo";column-gap:3.5rem;row-gap:2rem;align-items:start}}
.boleto h1{font:700 clamp(2.1rem,5vw,3.3rem)/1.05 var(--f-display);color:var(--on-deep);margin:.6rem 0 1.2rem;max-width:15ch}
.fecha{display:flex;gap:1rem;align-items:center}
.fecha .dia{flex:none;display:grid;justify-items:center;width:68px;padding:.45rem 0;border-radius:10px;background:var(--amber);color:var(--ink)}
.fecha .dia small{font:600 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.fecha .dia b{font:700 2rem/1.05 var(--f-display)}
.fecha p{margin:0;color:#C9DCDE}.fecha p b{display:block;color:var(--on-deep);font:700 1.15rem/1.3 var(--f-display)}
.bol-items{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:600px){.bol-items{grid-template-columns:1fr 1fr}}
.bol-items li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;padding:.9rem 1rem;border:1px solid #2B5C65;border-radius:12px;background:rgba(245,247,246,.04);align-content:start}
.bol-items .num{grid-row:span 2;font:600 .85rem/1.6 var(--f-mono);color:var(--amber)}
.bol-items b{color:var(--on-deep);font:700 1.02rem/1.3 var(--f-display)}
.bol-items span:last-child{color:#C9DCDE;font-size:.92rem;line-height:1.45}
.bol-card{background:var(--card);color:var(--ink);border-top:4px solid var(--amber);border-radius:14px;padding:1.4rem;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.bol-card h2{font:700 1.35rem/1.2 var(--f-display);margin:0 0 .5rem;color:var(--ink)}
@media (min-width:960px){.bol-cupo.estira{align-self:stretch;display:flex}.bol-cupo.estira .bol-card{flex:1;display:flex;flex-direction:column}.bol-cupo.estira .bol-card .abajo{margin-top:auto}}
@media (min-width:600px){.bol-items.tres{grid-template-columns:repeat(3,1fr)}.bol-items.tres li{grid-template-columns:1fr}.bol-items.tres .num{grid-row:auto}}
@media (min-width:960px){.bol-cupo.centro{align-self:center}}
@media (max-width:600px){.boleto{padding-top:1.4rem}.boleto h1{margin-bottom:.8rem}.bol{gap:1.1rem}.bol-card{padding:1.1rem}}

/* Menú único de Semana 53 (29-oct): el mismo en el sitio, el traductor y la entrada del aula */
.m53{display:flex;align-items:center;gap:18px;font:400 15px/1.2 "Atkinson Hyperlegible",Arial,sans-serif}
.m53 a{color:#C9DCDE;text-decoration:none}.m53 a:hover{color:#fff}
.m53-d{display:flex;align-items:center;gap:18px}
.m53 a.m53-clase{color:#E9A23B;font-weight:700;border:1.5px solid #E9A23B;border-radius:999px;padding:6px 13px;white-space:nowrap}
.m53 a.m53-clase:hover{background:rgba(233,162,59,.14);color:#E9A23B}
.m53 details{position:relative}
.m53 summary{list-style:none;cursor:pointer;color:#C9DCDE;display:flex;align-items:center;gap:6px}
.m53 summary::-webkit-details-marker{display:none}
.m53 summary:hover{color:#fff}
.m53-rec summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.m53 .m53-rec[open] summary::after{transform:translateY(1px) rotate(225deg)}
.m53-caja{position:absolute;right:0;top:calc(100% + 12px);background:#fff;border:1px solid #C9D6D7;border-radius:12px;box-shadow:0 14px 34px rgba(18,52,59,.2);padding:6px;min-width:270px;display:grid;z-index:30}
.m53 .m53-caja a{color:#13262B;padding:10px 12px;border-radius:8px;font-size:15px;line-height:1.3}
.m53 .m53-caja a:hover{background:#DDECEC;color:#13262B}
.m53 .m53-caja small{display:block;color:#4D6166;font-size:12.5px;margin-top:2px}
.m53-cel{display:none}
.m53-cel summary{width:40px;height:40px;justify-content:center;border:1px solid #2E6B75;border-radius:8px}
.m53-cel svg{width:22px;height:22px;stroke:#F5F7F6;fill:none;stroke-width:2;stroke-linecap:round}
@media (max-width:760px){.m53-d{display:none}.m53-cel{display:block}.m53{gap:10px}}
.m53 details{background:none;border:0;border-radius:0;padding:0;margin:0}
.m53 details+details{margin:0}
.m53 summary{font:inherit;justify-content:flex-start;gap:6px}
.m53 summary::after,.m53 .m53-cel[open] summary::after{content:none}
.m53 .m53-rec summary::after,.m53 .m53-rec[open] summary::after{content:"";color:inherit;font:inherit;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.m53 .m53-rec[open] summary::after{transform:translateY(1px) rotate(225deg)}