/* Modo Astronauta · estética editorial: blanco, negro, condensada gigante y líneas finas.
   Un solo acento (naranja traje) para el botón de reproducir y el foco. */
/* Tipografías alojadas en el propio sitio (más rápido y sin depender de Google Fonts). Licencia SIL OFL. */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-var.woff2) format("woff2-variations"),url(/assets/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/assets/fonts/public-sans-400i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --negro:#000; --blanco:#fff; --gris:#6B6B6B; --linea:#000; --suave:#E6E6E6; --acento:#E8501A;
  --f-tit:"Archivo",Arial Narrow,system-ui,sans-serif;
  --f-txt:"Public Sans",system-ui,sans-serif;
  --pad:16px; --gap:20px; --bar:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 12px)}
body{margin:0;background:var(--blanco);color:var(--negro);font:400 17px/1.5 var(--f-txt)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:8px 14px;z-index:60}
.skip:focus{left:8px}
.wrap{padding:0 var(--pad)}
.cond{font-family:var(--f-tit);font-stretch:75%;font-weight:600;letter-spacing:-.01em}

/* ---------- Barra superior ---------- */
.topbar{position:sticky;top:0;z-index:40;height:var(--bar);background:var(--blanco);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--pad)}
.topbar-l{display:flex;gap:22px}
.topbar-r{justify-self:end}
.tb-link{background:none;border:0;padding:6px 0;font:500 .95rem var(--f-txt);text-transform:uppercase;letter-spacing:.02em;color:inherit;text-decoration:none;cursor:pointer}
.tb-link:hover{text-decoration:underline;text-underline-offset:4px}
.tb-logo{font-family:var(--f-tit);font-stretch:75%;font-weight:900;font-size:1.65rem;letter-spacing:-.005em;text-decoration:none;line-height:1}
.menu{position:absolute;top:var(--bar);left:0;right:0;background:var(--blanco);border-bottom:2px solid var(--negro);padding:6px var(--pad) 22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
.menu[hidden]{display:none}
.menu a{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.05;text-decoration:none;padding:10px 0;border-top:1px solid var(--negro)}
.menu a:hover,.menu a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.menu-search{grid-column:1/-1;margin-top:16px}
.menu-search input{width:100%;max-width:520px;border:0;border-bottom:2px solid var(--negro);padding:10px 0;font:400 1.3rem var(--f-txt);background:none;border-radius:0}

/* ---------- Franjas de videos (portada) ---------- */
.franjas{padding-top:6px}
.franja{margin-bottom:30px}
.franja-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 var(--pad);margin-bottom:10px}
.franja-head h2{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(1.5rem,2.2vw,2.3rem);line-height:1.05;letter-spacing:-.005em}
.franja-head h2 a{text-decoration:none}
.franja-head h2 a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.franja-ver{font-size:.98rem;text-decoration:none;white-space:nowrap}
.franja-ver:hover{text-decoration:underline}
.franja-track{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;padding:0 var(--pad) 6px;scrollbar-width:none;scroll-padding:0 var(--pad)}
.franja-track::-webkit-scrollbar{display:none}
.franja-track:focus-visible{outline-offset:-3px}
.franja-track > *{flex:0 0 calc((100vw - 2*var(--pad) - 3*var(--gap)) / 4.2)}

/* ---------- Tarjeta de video ---------- */
.vi a{text-decoration:none;display:block}
.vi-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--suave);border:2px solid var(--negro)}
.vi-img img{width:100%;height:100%;object-fit:cover}
.vi-cap{font:400 1.02rem/1.35 var(--f-txt);margin-top:12px}
.vi-etq{white-space:nowrap}
.vi a:hover .vi-cap{text-decoration:underline;text-underline-offset:3px}
.vi-mas{display:flex;align-items:flex-end;aspect-ratio:16/9;border:2px solid var(--negro);padding:16px;text-decoration:none;font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:1.5rem;line-height:1.05}
.vi-mas:hover{background:var(--negro);color:var(--blanco)}

/* ---------- Nombre gigante ---------- */
.marca{padding:10px var(--pad) 0;text-align:center}
.wordmark{font-family:var(--f-tit);font-stretch:75%;font-weight:900;font-size:11.4vw;line-height:.82;letter-spacing:-.012em;white-space:nowrap;margin:0 -.02em;padding-top:.06em}
.seguir{display:inline-block;margin:14px 0 26px;font-size:1rem;text-decoration:none}
.seguir:hover{text-decoration:underline}

/* ---------- Acordeones ---------- */
.acordeones{padding:0 var(--pad)}
.acc{border-top:2px solid var(--negro)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;padding:14px 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary h2{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(2.6rem,4.6vw,5.4rem);line-height:1;letter-spacing:-.01em}
.acc-t::before{content:"[Abrir]";font-size:1rem}
.acc[open] .acc-t::before{content:"[Cerrar]"}
.acc summary:hover h2{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:3px}
.acc-body{padding:8px 0 44px}
.acc-texto p{font:400 clamp(1.45rem,3vw,3.3rem)/1.16 var(--f-txt);letter-spacing:-.01em;margin:0 0 .35em;max-width:none}
.acc-texto a{text-decoration-thickness:2px;text-underline-offset:6px}
.acc-servicios{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.acc-servicios ul{list-style:none;margin:0;padding:0}
.acc-servicios li{font:400 clamp(1.45rem,3vw,3.3rem)/1.18 var(--f-txt);letter-spacing:-.01em}
.acc-img{display:block;aspect-ratio:3/4;overflow:hidden;background:#000}
.acc-img img{width:100%;height:100%;object-fit:cover}

/* ---------- Encabezados de páginas internas ---------- */
.page-head{padding:22px var(--pad) 10px}
.crumbs{font-size:.92rem;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;color:var(--gris)}
.crumbs a{color:var(--negro)}
.crumbs [aria-current]{max-width:50ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titulo-xl{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(2.8rem,7vw,7.6rem);line-height:.92;letter-spacing:-.015em}
.intro-xl{font:400 clamp(1.25rem,2.2vw,2.3rem)/1.22 var(--f-txt);letter-spacing:-.005em;max-width:46ch;margin:22px 0 0}
.meta{font-size:1rem;margin-top:16px}
.sec-h{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(1.8rem,3vw,3rem);line-height:1;padding:14px 0;border-top:2px solid var(--negro);margin-top:60px}
.narrow{max-width:900px}

/* ---------- Grilla de videos (temas, búsqueda) ---------- */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px var(--gap);padding:20px var(--pad) 0}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:40px var(--pad) 0;font-size:1rem}
.pager a{text-decoration:none}
.pager a:last-child{justify-self:end}
.pager a:hover{text-decoration:underline}
.vacio{padding:30px var(--pad);font-size:1.3rem}

/* Lista de temas grande con líneas */
.temas-lista{list-style:none;margin:0;padding:0 var(--pad)}
.temas-lista li{border-top:2px solid var(--negro)}
.temas-lista li:last-child{border-bottom:2px solid var(--negro)}
.temas-lista a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;text-decoration:none;font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(2rem,4.2vw,4.8rem);line-height:1.02;letter-spacing:-.01em}
.temas-lista a:hover span:first-child{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:3px}
.tl-n{font:400 1rem var(--f-txt);letter-spacing:0}
.otros{margin-top:70px}
.otros .sec-h{margin:0 var(--pad);padding-left:0}

/* ---------- Página de video ---------- */
.video-top{padding:22px var(--pad) 0}
.video-top .titulo-xl{font-size:clamp(2.3rem,5.2vw,5.6rem);max-width:22ch}
.video-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;padding:26px var(--pad) 0;align-items:start}
.player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:2px solid var(--negro)}
.player img{width:100%;height:100%;object-fit:cover}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:0;cursor:pointer;background:var(--acento);color:#fff;display:grid;place-items:center;transition:transform .15s}
.play svg{margin-left:4px}
.play:hover{transform:translate(-50%,-50%) scale(1.06)}
@media (prefers-reduced-motion:reduce){.play{transition:none}}
.noscript-yt{position:absolute;left:0;right:0;bottom:0;background:#000;color:#fff;padding:10px;text-align:center}
.lead-xl{font:400 clamp(1.3rem,2vw,2rem)/1.25 var(--f-txt);letter-spacing:-.005em;margin:26px 0 0;max-width:40ch}
.prose{max-width:70ch;font-size:1.1rem;line-height:1.62}
.prose h2,.faq h2{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(1.8rem,2.6vw,2.6rem);line-height:1;border-top:2px solid var(--negro);padding-top:12px;margin:48px 0 16px}
.prose p{margin:0 0 1em}
.prose ul{padding-left:1.1em}
.prose a{text-underline-offset:3px}
.puntos{list-style:none;padding:0!important}
.puntos li{border-bottom:1px solid var(--suave);padding:10px 0 10px 34px;position:relative}
.puntos li::before{content:"✓";position:absolute;left:4px;top:10px;font-weight:500}
.faq{max-width:70ch}
.faq details{border-bottom:1px solid var(--negro)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-size:1.12rem;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"[+]";flex-shrink:0;font-weight:400}
.faq details[open] summary::after{content:"[–]"}
.faq details p{margin:0 0 16px;font-size:1.05rem;line-height:1.6}
.siguiente{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center;margin-top:44px;padding:16px 0;border-top:2px solid var(--negro);border-bottom:2px solid var(--negro);text-decoration:none;max-width:70ch}
.siguiente-k{display:block;font-size:.95rem;margin-bottom:6px}
.siguiente strong{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(1.5rem,2.2vw,2.2rem);line-height:1.02}
.siguiente:hover strong{text-decoration:underline;text-underline-offset:5px}
.creditos{font-size:.9rem;color:var(--gris);max-width:70ch;margin-top:30px}
.creditos a{color:var(--negro)}
.side{position:sticky;top:calc(var(--bar) + 16px)}
.side-h{font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:1.7rem;line-height:1;border-top:2px solid var(--negro);padding-top:10px;margin-bottom:16px}
.side-list{display:flex;flex-direction:column;gap:18px}
.side-list .vi a{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;align-items:start}
.side-list .vi-cap{margin-top:0;font-size:.95rem}
.side-tema{display:inline-block;margin-top:20px;text-decoration:none;font-size:1rem}
.side-tema:hover{text-decoration:underline}

/* ---------- Búsqueda ---------- */
.search-big{display:flex;gap:16px;max-width:900px;margin-top:22px;align-items:flex-end}
.search-big input{flex:1;border:0;border-bottom:2px solid var(--negro);padding:10px 0;font:400 clamp(1.3rem,2.4vw,2.2rem) var(--f-txt);background:none;border-radius:0;min-width:0}
.search-big button{background:none;border:0;font:500 1rem var(--f-txt);cursor:pointer;padding:12px 0;white-space:nowrap}
.search-big button:hover{text-decoration:underline}

/* ---------- Publicidad ---------- */
.ad{margin:30px 0;text-align:center;min-height:90px}
.ad-label{display:block;font-size:.75rem;color:var(--gris);margin-bottom:4px}
.ad-ph{display:grid;place-items:center;background:#F2F2F2;color:var(--gris);font-size:.85rem}
.ad-side{min-height:250px;margin-top:28px}

/* ---------- Pie ---------- */
.pie{margin-top:90px;border-top:2px solid var(--negro);padding:34px var(--pad) 20px}
.pie-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:30px var(--gap)}
.pie .pie-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--f-tit);font-stretch:75%;font-weight:900;font-size:2.1rem;line-height:1;width:auto}
.pie-marca p{margin:18px 0 0;max-width:46ch;font-size:1rem;line-height:1.55}
.pie-h{margin:0 0 14px;font-size:1rem}
.pie-h2{margin-top:26px}
.pie a{display:block;text-decoration:none;padding:1px 0;font-size:1rem;width:fit-content}
.pie nav a:hover,.pie div > a:hover{text-decoration:underline}
.pie-muted{color:var(--gris)}
.pie-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:44px;font-size:.9rem;color:var(--gris)}

/* ---------- Responsivo ---------- */
@media (max-width:1100px){
  .franja-track > *{flex-basis:calc((100vw - 2*var(--pad) - 2*var(--gap)) / 3.2)}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .video-grid{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .side-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pie-marca{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--pad:14px;--gap:14px;--bar:52px}
  .wordmark{font-size:10.9vw}
  .franja-track{scroll-snap-type:x mandatory}
  .franja-track > *{flex-basis:76vw;scroll-snap-align:start}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px var(--gap)}
  .tb-hide-m{display:none}
  .tb-logo{font-size:1.3rem}
  .tb-link{font-size:.85rem}
  .menu{grid-template-columns:minmax(0,1fr)}
  .acc-servicios{grid-template-columns:minmax(0,1fr)}
  .acc-img{aspect-ratio:16/9}
  .side-list{grid-template-columns:minmax(0,1fr)}
  .siguiente{grid-template-columns:130px minmax(0,1fr)}
  .pie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .side-list .vi a{grid-template-columns:120px minmax(0,1fr)}
}

/* Guía escrita de cada tema */
.guia-tema{padding:0 var(--pad);margin-top:40px;display:grid;gap:0 56px;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.guia-tema .faq h2{margin-top:48px}
@media (max-width:900px){.guia-tema{grid-template-columns:1fr}}

/* ---------- Portada: 2 líneas con todos los temas seguidos + nombre, en la primera pantalla ---------- */
.portada{min-height:calc(100svh - var(--bar));display:flex;flex-direction:column}
.portada .marca{margin-top:auto}
.lineas{padding-top:10px}
.linea{display:flex;gap:0;padding:0;margin:0 0 18px;scroll-padding:0}
.grupo{display:flex;gap:var(--gap);flex:0 0 auto;padding-right:calc(var(--gap) * 1.5);align-items:flex-start}
.grupo:last-child{padding-right:var(--pad)}
/* Título del tema en vertical, con la base de las letras hacia los videos. Queda fijo a la izquierda
   mientras se desplazan sus videos y lo empuja el título del tema siguiente: así cambia al deslizar. */
.grupo-tit{position:sticky;left:0;z-index:2;flex:0 0 auto;align-self:stretch;margin:0;background:var(--blanco);
  padding:0 10px 0 var(--pad);border-right:2px solid var(--negro);display:flex}
.grupo-tit a{writing-mode:vertical-rl;transform:rotate(180deg);text-decoration:none;white-space:nowrap;
  font-family:var(--f-tit);font-stretch:75%;font-weight:600;font-size:clamp(1.35rem,1.9vw,2rem);line-height:1;letter-spacing:-.005em}
.grupo-tit a span{font:400 .8rem var(--f-txt);letter-spacing:0}
.grupo-tit a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.grupo .vi,.grupo .vi-mas{flex:0 0 calc((100vw - 2*var(--pad) - 3*var(--gap)) / 4.2)}
.home .vi-cap{margin-top:8px;font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home .seguir{margin:10px 0 16px}
@media (min-width:761px){
  /* El ancho de cada video se ajusta al alto de la pantalla para que entren las 2 líneas + el nombre */
  .grupo .vi,.grupo .vi-mas{flex-basis:clamp(170px, calc((100svh - var(--bar) - 10px - 11.4vw * .9 - 52px - 2 * 82px) / 2 * 16 / 9), calc((100vw - 2*var(--pad) - 3*var(--gap)) / 4.2))}
}
@media (max-width:760px){
  .portada{min-height:0}
  .grupo .vi,.grupo .vi-mas{flex-basis:68vw}
  .linea{scroll-snap-type:none}
}