/* 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:#0D6470; --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:#0A5560}
.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}
.pend::after{content:attr(data-pend);position:absolute;left:0;top:calc(100% + 6px);font:600 .68rem/1.2 var(--f-mono);letter-spacing:.04em;color:var(--ink);background:var(--card);border:1px dashed var(--ink2);padding:.15rem .35rem;border-radius:4px;white-space:nowrap}
.band.deep .pend::after{color:var(--ink)}

/* 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}}
.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:rgba(18,52,59,.88)}
.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}
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}}

/* 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}