/* HumanOS Podcast — humanosproject.com */
@font-face{font-family:Poppins;font-weight:300;src:url(../fonts/Poppins-Light.woff) format("woff");font-display:swap}
@font-face{font-family:Poppins;font-weight:400;src:url(../fonts/Poppins-Regular.woff) format("woff");font-display:swap}
@font-face{font-family:"JetBrains Mono";font-weight:700;src:url(../fonts/JetBrainsMono-Bold.woff) format("woff");font-display:swap}
@font-face{font-family:"Bebas Neue";font-weight:400;src:url(../fonts/BebasNeue-Regular.ttf) format("truetype");font-display:swap}

:root{
  --red:#E10600;--red-d:#B00500;--black:#0A0A0A;--gray:#8493A2;--salmon:#C4776E;
  --pad:clamp(20px,5vw,72px);
  --bg:var(--black);--fg:#fff;--muted:var(--gray);--line:rgba(255,255,255,.16);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--fg);font:300 17px/1.65 Poppins,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-weight:300;line-height:1.1;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(30px,4.4vw,58px)}
h2 em{font-style:normal;color:var(--red)}
h3{font-size:clamp(22px,2.2vw,30px)}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr,.saltar:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar:focus{position:fixed;top:10px;left:10px;z-index:20;background:#fff;color:#000;padding:10px 16px}

.kicker,.meta,.rol,.mono{font:700 12px/1.5 "JetBrains Mono",monospace;letter-spacing:.28em;text-transform:uppercase;color:var(--salmon);margin:0}

/* wordmark: the master logo outlines (logo() in app/lib.php). Human takes the text colour, OS is always red.
   Its height is the cap height of the text around it and it sits on the text baseline, so it scales with font-size. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.hos{display:inline-block;line-height:1;white-space:nowrap}
.hos svg{display:inline-block;height:.72em;width:4.277em;vertical-align:-.01em;overflow:visible}
.kicker{display:inline-block;color:#fff;border:1px solid #fff;padding:9px 12px 8px 17px}
.kicker .hos{font-size:1.25em} /* next to 12px capitals */
/* a section label that is also a link (home "Episodios" goes to the full list) */
a.kicker.enlace{text-decoration:none;transition:background .2s,color .2s}
a.kicker.enlace span[aria-hidden]{color:var(--red);margin-left:.6em;letter-spacing:0;display:inline-block;transition:transform .2s}
@media (hover:hover){a.kicker.enlace:hover{background:#fff;color:#0A0A0A}a.kicker.enlace:hover span[aria-hidden]{transform:translateX(3px)}}
.hos .sr{position:static;display:inline-block;margin-right:-1px;vertical-align:baseline} /* hidden but in the text flow, so copying gives "HumanOS es…" on one line */
.pod{display:block;font:400 .28em/1 "Bebas Neue",sans-serif;letter-spacing:.5em;color:var(--salmon);text-transform:uppercase}

.top{display:flex;align-items:center;gap:32px;padding:22px var(--pad)}
.top .brand{font-size:30px;text-decoration:none}
.top .brand{line-height:1}
.top .brand .pod{font-size:11px;letter-spacing:.52em;padding-left:.2em;margin-top:-1px}
.top nav a.aqui{opacity:1;color:#fff;box-shadow:0 2px 0 var(--red);padding-bottom:5px}
.top nav{margin-left:auto;display:flex;gap:28px;font-size:15px}
.top nav a{text-decoration:none;opacity:.78}
@media (hover:hover){.top nav a:hover{opacity:1;color:var(--red)}} /* touch screens keep :hover after a tap */
.inicio .top{position:absolute;inset:0 0 auto 0;z-index:2}
.inicio .top .brand{visibility:hidden}

.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;background:var(--red);color:#fff;border:1px solid var(--red);border-radius:0;text-decoration:none;font:400 15px/1.2 Poppins,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--red-d);border-color:var(--red-d)}
.btn.ghost{background:none;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:#fff;color:#0A0A0A;border-color:#fff}
.play::before{content:"";border-left:.7em solid currentColor;border-top:.42em solid transparent;border-bottom:.42em solid transparent}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0}

/* ── hero: the studio sign ── */
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:120px var(--pad) 90px;position:relative}
.hero h1 .hos{font-size:clamp(76px,18vw,290px);display:block}
.hero .pod{font-size:clamp(17px,2.5vw,40px);letter-spacing:.6em;padding-left:.6em;margin:.9em 0 1.1em}
.lema{font-size:clamp(19px,3.2vw,48px);color:var(--gray);line-height:1.2;margin:0}
.lema em{color:var(--red);font-style:normal}
.desde{display:flex;align-items:center;justify-content:center;gap:.9em;margin:1.3em 0 0;font:400 clamp(20px,2.6vw,40px)/1 "Bebas Neue",sans-serif;letter-spacing:.34em;text-transform:uppercase;color:#fff}
.desde::before,.desde::after{content:"";width:clamp(24px,5vw,72px);height:2px;background:var(--red)}
.desde::after{margin-left:-.34em}
.hero .cta{margin-top:44px}
.baja{position:absolute;bottom:28px;left:var(--pad);right:var(--pad)}

/* ── sections ── */
section:not(.hero){padding:clamp(64px,9vw,128px) var(--pad);border-top:1px solid var(--line)}
.wrap{max-width:860px;margin:0 auto;text-align:center}
.wrap>.kicker{margin-bottom:20px}
.wrap>h2{margin-bottom:40px}

.texto{font-size:1.1em}
.reglas{list-style:none;margin:48px 0 0;padding:0}
.reglas li{border-top:1px solid var(--line);padding:24px 0;color:var(--muted)}
.reglas b{display:block;font-weight:300;color:#fff;font-size:1.5em;line-height:1.3;margin-bottom:4px}

.ep .meta{margin:20px 0 8px}
.ep p{color:var(--muted);margin:8px auto 0;max-width:56ch}
.ep.destacado h3{font-size:clamp(26px,3vw,40px)}
.eps{display:grid;grid-template-columns:1fr 1fr;gap:48px 32px;margin-top:72px}
.eps.uno{grid-template-columns:1fr}
.eps.tres{grid-template-columns:repeat(3,1fr);gap:40px 24px}
.eps.tres h3{font-size:clamp(19px,1.7vw,24px)}
.eps.tres .ep p{font-size:15px}

.video{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video .poster{display:block;width:100%;height:100%}
.video img{width:100%;height:100%;object-fit:cover;transition:transform .6s,opacity .3s}
.video .poster:hover img{transform:scale(1.03)}
.playbtn{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--red);transition:transform .2s}
.playbtn::after{content:"";position:absolute;left:35px;top:27px;border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent}
.poster:hover .playbtn{transform:scale(1.08)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aviso{position:absolute;inset:0;display:grid;place-content:center;gap:18px;padding:24px;background:rgba(10,10,10,.93);font-size:15px}
.aviso p{margin:0;color:#fff;max-width:none}

.preguntas{margin-top:80px}
.preguntas ul{list-style:none;padding:0;margin:18px 0 0}
.preguntas li{border-top:1px solid var(--line)}
.preguntas li:last-child{border-bottom:1px solid var(--line)}
.corto summary{display:block;padding:15px 0;cursor:pointer;list-style:none;font-size:clamp(18px,2vw,24px);line-height:1.3;transition:color .2s}
.corto summary::-webkit-details-marker{display:none}
.corto summary::after{content:"+";display:inline-block;margin-left:.5em;color:var(--red);font-family:"JetBrains Mono",monospace;font-weight:700}
.corto[open] summary::after{content:"−"}
.corto summary:hover,.corto[open] summary{color:var(--red)}
.corto summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.corto-cuerpo{padding:6px 0 30px}
.marco{position:relative;width:min(100%,330px);aspect-ratio:9/16;margin:0 auto;background:#000}
.marco:empty{display:none}
.marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.permiso{font-size:15px}
.permiso p{margin:0 auto 16px;max-width:46ch}
.permiso .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.mas{margin:44px 0 0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}

.personas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.persona .rol{margin:10px 0 14px}
.persona p,.set{color:var(--muted)}
.set{margin:48px auto 0;max-width:62ch}

.mail{display:inline-block;font-size:clamp(19px,2.2vw,28px);text-decoration:none;border-bottom:2px solid var(--red)}
.mail:hover{color:var(--red)}
.estado{padding:14px 18px;border:1px solid;margin:28px auto 0;max-width:560px}
.estado.bien{border-color:#3fa66b;color:#8fe0b0}
.estado.mal{border-color:var(--red);color:#ff8f8b}
form{display:grid;gap:18px;text-align:left;max-width:560px;margin:44px auto 0}
label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
input,select,textarea{font:300 17px/1.5 Poppins,sans-serif;color:#fff;background:transparent;border:0;border-bottom:1px solid var(--line);padding:9px 0;border-radius:0;width:100%}
select option{color:#000}
/* same look in every browser: Safari paints its own light box on native selects */
select{-webkit-appearance:none;appearance:none;padding-right:28px;cursor:pointer;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center/12px 8px}
textarea{resize:none;min-height:120px;max-height:60vh;max-height:60svh;overflow-y:auto;field-sizing:content} /* grows with the text (site.js does it where field-sizing is missing) */
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--red)}
.check{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.check input{width:auto;margin-top:3px;accent-color:var(--red)}
form .btn{justify-self:start}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

footer{padding:36px var(--pad);border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--red)}

/* ── cookie notice ── */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:10;max-width:620px;margin:0 auto;background:#fff;color:#0A0A0A;padding:22px 24px;font-size:14.5px;line-height:1.55;box-shadow:0 12px 50px rgba(0,0,0,.6)}
.consent .cta{justify-content:flex-start}
.consent .btn{padding:11px 18px;font-size:14px}
.consent .btn.ghost:hover{background:#0A0A0A;color:#fff;border-color:#0A0A0A}

/* ── legal pages ── */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--pad) clamp(64px,9vw,120px)}
.legal h1{font-size:clamp(34px,5vw,60px);margin:14px 0 36px}
.legal h2{font-size:clamp(21px,2.4vw,28px);margin:44px 0 12px;letter-spacing:-.01em}
.legal p,.legal li{color:#cfd4da}
.legal a{text-decoration-color:var(--red);text-underline-offset:3px}
.legal ul{padding-left:1.2em}
.legal .fecha{color:var(--muted);font-size:14px;margin-top:48px}
.legal table{border-collapse:collapse;width:100%;font-size:15px;margin:12px 0}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-top:1px solid var(--line);color:#cfd4da}
.legal th{font-weight:400;color:#fff}

@media (max-width:820px){
  /* phone: logo and YouTube button scroll away, the row of sections stays at the top of the screen */
  .top,.inicio .top{position:sticky;inset:auto;top:-70px;z-index:20;flex-wrap:wrap;gap:0 16px;padding-top:14px;padding-bottom:0;background:rgba(10,10,10,.94);border-bottom:1px solid var(--line)}
  .top .brand,.top .yt{height:44px;display:flex;flex-direction:column;justify-content:center}
  .top .yt{margin-left:auto;flex-direction:row;align-items:center}
  .top nav{order:3;flex:0 0 100%;margin:12px 0 0;justify-content:space-between;gap:6px;font-size:14px;border-top:1px solid var(--line)}
  .top nav a{opacity:.92;white-space:nowrap;padding:13px 2px}
  .top nav a.aqui{box-shadow:inset 0 -2px 0 var(--red);padding-bottom:13px}
  .inicio .top .brand{display:none}
  /* home: no logo row to hide, so the row of sections sticks right at the top */
  .inicio .top{top:0;padding-top:0}
  .inicio .top nav{margin-top:0;border-top:0}
  .eps,.eps.tres,.personas{grid-template-columns:1fr}
  .hero{padding-top:56px;min-height:calc(100svh - 118px)}
  section[id],.wrap[id]{scroll-margin-top:56px}
  .personas{gap:40px}
  .playbtn{transform:scale(.75)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* episode pages */
.ep h3 a{text-decoration:none}
.ep h3 a:hover{color:var(--red)}
.ep .ficha{margin-top:14px;font-size:15px}
.ep h3 .num{font:700 .42em/1 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--red);white-space:nowrap;vertical-align:middle;margin-left:.6em}
.ep .ficha a{color:#fff;text-decoration-color:var(--red);text-underline-offset:4px}
.episodio{max-width:980px;margin:0 auto;padding:clamp(32px,6vw,80px) var(--pad) clamp(64px,9vw,120px);text-align:center}
.episodio h1{font-size:clamp(38px,6.2vw,84px);margin:18px 0 14px}
.episodio .perfil{font:700 12px/1.6 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--salmon);max-width:52ch;margin:0 auto 18px}
.episodio .sub{font-size:clamp(18px,2.1vw,26px);color:var(--gray);max-width:30ch;margin:0 auto 44px;line-height:1.3;max-width:44ch}
.episodio .datos{margin:22px 0 0}
.episodio .mas{margin-top:28px}
.episodio h2{font-size:clamp(24px,3vw,38px);margin:clamp(56px,8vw,96px) 0 26px}
.episodio .desc{max-width:680px;margin:0 auto;text-align:left;color:#cfd4da}
.episodio .desc p{margin:0 0 1.1em}
.episodio .desc a{text-decoration-color:var(--red);text-underline-offset:3px;word-break:break-word}
.transcripcion{max-width:680px;margin:0 auto;text-align:left;color:#cfd4da;border:1px solid var(--line);padding:0 24px}
.transcripcion summary{cursor:pointer;padding:18px 0;font-size:17px;color:#fff;list-style:none}
.transcripcion summary::-webkit-details-marker{display:none} /* Safari paints its own marker and ignores ::marker colour */
.transcripcion summary::before{content:"";display:inline-block;border:6px solid transparent;border-left:9px solid var(--red);border-right:0;margin-right:12px;transition:transform .2s;vertical-align:1px}
.transcripcion[open] summary::before{transform:rotate(90deg)}
.transcripcion[open] summary{border-bottom:1px solid var(--line);margin-bottom:8px}
.transcripcion h3{font-size:19px;margin:30px 0 10px;line-height:1.3}
.transcripcion h3 a{color:#fff;text-decoration:none}
.transcripcion h3 .mono{color:var(--red);letter-spacing:.08em;margin-right:.5em;font-size:13px}
.transcripcion p{margin:0 0 1em}
.transcripcion .nota{font-size:13px;color:var(--muted);margin-top:28px}
@media (hover:hover){.transcripcion h3 a:hover{color:var(--red)}}
.episodio .preguntas{margin-top:0;max-width:860px;margin-left:auto;margin-right:auto}
.otros{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(56px,8vw,96px);padding-top:32px;border-top:1px solid var(--line);text-align:left}
.otros a{text-decoration:none;display:block}
.otros a:hover .quien{color:var(--red)}
.otros .sig{text-align:right;grid-column:2}
.otros .quien{display:block;font-size:clamp(19px,2.2vw,26px);margin-top:8px;transition:color .2s}
.episodio .cierre{margin-top:clamp(56px,8vw,96px);color:var(--muted)}
.lista-eps{display:grid;grid-template-columns:1fr 1fr;gap:56px 32px;margin-top:48px}
@media (max-width:700px){.lista-eps{grid-template-columns:1fr}.otros{grid-template-columns:1fr}.otros .sig{grid-column:1;text-align:left}}
.episodio h1 em{font-style:normal;color:var(--red)}
.migas{margin:0 0 30px}
.migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .7em;font-size:14px;color:var(--muted)}
.migas li+li::before{content:"/";margin-right:.7em;color:var(--red)}
.migas a{color:#fff;text-decoration:none;border-bottom:1px solid var(--line)}
.migas a:hover{color:var(--red);border-color:var(--red)}
.episodio .volver{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:40px 0 0}
.episodio .desc .tit{display:block;font:700 12px/1.5 "JetBrains Mono",monospace;letter-spacing:.22em;color:#fff;margin:1.6em 0 .5em}

/* episode cards: each episode in its own rounded box, text aligned left */
.ep{background:#141516;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-align:center;display:flex;flex-direction:column}
/* the name sits in the middle of the card; when it needs two lines they share the same left edge (width set by site.js) */
.ep h3{text-align:left;margin:0 auto;max-width:100%}
.ep .txt{padding:0 clamp(18px,2.4vw,30px) clamp(22px,2.4vw,30px);display:flex;flex-direction:column;flex:1}
.ep .meta{margin:22px 0 10px}
.ep p{margin:10px auto 0;max-width:none}
.ep h3 .num{margin-left:.5em}
.ep .ficha{margin-top:auto;padding-top:20px;font-size:14px}
.ep .ficha a{display:inline-block;border:1px solid #fff;border-radius:999px;padding:9px 18px;text-decoration:none;transition:background .2s,color .2s}
.ep .ficha a:hover{background:#fff;color:#0A0A0A}
.eps,.lista-eps{align-items:stretch}

/* menu separators */
.top nav{align-items:center;gap:16px}
.top nav i{font-style:normal;color:#4a4d52;font-weight:300;user-select:none}
@media (max-width:820px){
  .top nav{gap:4px}
  .top nav a{padding-left:0;padding-right:0}
}
@media (max-width:380px){.top nav{font-size:13px}}

/* contact form in a card, like the episodes */
.contacto form{background:#141516;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3.4vw,38px);max-width:620px}
.contacto form input,.contacto form select,.contacto form textarea{border-bottom-color:#3a3d41}
.contacto form input:focus,.contacto form select:focus,.contacto form textarea:focus{border-bottom-color:var(--red)}

/* platform icons on the episodes page */
.plataformas{list-style:none;display:flex;justify-content:center;gap:22px;margin:26px 0 0;padding:0}
.plataformas a,.plataformas>li>span{display:grid;justify-items:center;gap:8px;text-decoration:none;font-size:13px;color:var(--muted)}
.plataformas i{display:grid;place-items:center;width:60px;height:60px;border:1px solid #3a3d41;border-radius:16px;background:#141516;transition:border-color .2s,transform .2s}
.plataformas b{font-weight:300}
.plataformas svg{width:30px;height:30px}
.plataformas .yt svg{fill:#FF0000}
.plataformas .iv svg{width:34px;height:34px}
@media (hover:hover){.plataformas a:hover{color:#fff}.plataformas a:hover i{border-color:#fff;transform:translateY(-2px)}}
.plataformas .sp svg{fill:#1DB954}
.plataformas .pronto{opacity:.45;cursor:not-allowed}
.plataformas .pronto svg{fill:#6b7178;filter:grayscale(1)}

/* home: soft glows so the sections are not all flat black */
.que{background:radial-gradient(ellipse 70% 60% at 50% 0,rgba(225,6,0,.2),transparent 70%)}
.nosotros{background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(225,6,0,.2),transparent 70%)}
.contacto{background:radial-gradient(ellipse 60% 45% at 50% 0,rgba(132,147,162,.16),transparent 70%)}

/* same gap to the next section as everywhere else */
.reglas li:last-child{padding-bottom:0}

/* the two hosts, each in a card like the episodes */
.personas{gap:clamp(18px,2.4vw,28px)}
.persona{background:#141516;border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,36px) clamp(20px,2.6vw,32px)}
.persona p:last-child{margin-bottom:0}
@media (max-width:820px){.personas{gap:18px}}

/* computer: the menu stays at the top while scrolling (phones already keep their row of sections) */
@media (min-width:821px){
  .top{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.93);border-bottom:1px solid transparent;transition:background .25s,border-color .25s,padding .25s}
  .inicio .top{position:fixed;inset:0 0 auto 0;background:transparent}
  .bajado .top{border-bottom-color:var(--line);padding-top:14px;padding-bottom:14px}
  .bajado .inicio .top{background:rgba(10,10,10,.93)}
  .bajado .inicio .top .brand{visibility:visible}
  html{scroll-padding-top:60px}
}