/* rubenelalbino.com · v5 · dirección «Pegatina»
   Móvil primero. Todo en rem: respeta el tamaño de letra de cada navegador.
   Colores en variables: :root = claro; los mismos nombres cambian en oscuro. */

/* ---------- Tipografías (alojadas en la web, sin Google Fonts) ---------- */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(../fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(../fonts/atkinson-hyperlegible-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Colores ----------
   Dos marcas, dos colores: el lima de @RubenElAlbino y el morado del fondo del logo de White Noise
   (#34134C y #1B0E27, sacados de la portada). Oscuro: fondo morado y acentos lima.
   Claro: lo mismo al revés, fondo lavanda muy claro, tinta morada y lima. */
:root{
  --bg:#EFEAF5; --surface:#FCFAFE; --ink:#1B0E27; --muted:#4B3B5C;
  --lime:#6BE03A; --on-lime:#1B0E27; --focus:#1B0E27;
  --line:#1B0E27; --line-soft:#D3C8E0; --hover-soft:#E4DBEE; --shadow:#1B0E27;
  --bar-bg:rgb(239 234 245 / .9);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0F0915; --surface:#23142F; --ink:#F4EFF8; --muted:#CDBFDA;
  --lime:#7DEB4C; --on-lime:#1B0E27; --focus:#7DEB4C;
  --line:#F4EFF8; --line-soft:#3E2A50; --hover-soft:#2F1C40; --shadow:#7DEB4C;
  --bar-bg:rgb(15 9 21 / .9);
  color-scheme:dark;
}}
:root[data-theme=dark]{
  --bg:#0F0915; --surface:#23142F; --ink:#F4EFF8; --muted:#CDBFDA;
  --lime:#7DEB4C; --on-lime:#1B0E27; --focus:#7DEB4C;
  --line:#F4EFF8; --line-soft:#3E2A50; --hover-soft:#2F1C40; --shadow:#7DEB4C;
  --bar-bg:rgb(15 9 21 / .9);
  color-scheme:dark;
}

/* ---------- Medidas ---------- */
:root{
  --body:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Bricolage Grotesque","Atkinson Hyperlegible Next",system-ui,sans-serif;
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,monospace;
  --r-card:1.5rem;        /* bloques */
  --r-pill:999px;         /* todo lo que se pulsa */
  --border:.16rem;        /* 2,5 px a tamaño normal */
  --lift:.25rem;          /* sombra sólida en reposo */
  --gutter:1.25rem;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (min-width:48rem){:root{--gutter:2rem}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.125rem;line-height:1.5;
  overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
h3{text-wrap:pretty}
p{margin:0}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.1em}
:where(ul[role=list]){list-style:none;margin:0;padding:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:.2rem solid var(--focus);outline-offset:.2rem}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--gutter);top:-10rem;z-index:100;padding:.75rem 1.25rem;border-radius:var(--r-pill);
  background:var(--lime);color:var(--on-lime);font-weight:700;border:var(--border) solid var(--line)}
.skip:focus{top:.75rem}

/* Iconos: SVG en línea (sprite al principio del body). Toman el color del texto. */
.ico{flex:none;width:1.4em;height:1.4em;fill:currentColor}

/* ---------- Pegatina: lo que se pulsa ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.25rem;padding:.6rem 1.4rem;
  border:var(--border) solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
  font-weight:700;text-decoration:none;line-height:1.2;text-align:center;
  box-shadow:var(--lift) var(--lift) 0 var(--shadow);
  transition:transform .18s var(--spring),box-shadow .18s var(--spring),background-color .15s,color .15s}
.btn--lime{background:var(--lime);color:var(--on-lime)}
@media (hover:hover){
  .btn:hover{transform:translate(-.15rem,-.15rem);box-shadow:calc(var(--lift) + .2rem) calc(var(--lift) + .2rem) 0 var(--shadow);
    background:var(--lime);color:var(--on-lime)}
  .btn--lime:hover{background:var(--ink);color:var(--bg)}
}
.btn:focus-visible{transform:translate(-.15rem,-.15rem);box-shadow:calc(var(--lift) + .2rem) calc(var(--lift) + .2rem) 0 var(--shadow);
  background:var(--lime);color:var(--on-lime);outline-offset:.35rem}
.btn:active{transform:translate(.2rem,.2rem);box-shadow:.05rem .05rem 0 var(--shadow);transition-duration:.06s}

/* ---------- Barra superior ----------
   Escritorio: enlaces centrados y modo oscuro a la derecha.
   Móvil (con JS): botón de menú a la izquierda, desplegable y modo oscuro solo con icono.
   Sin JS: los enlaces se ven siempre, centrados y en varias líneas si hace falta. */
.bar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;
  min-height:4rem;padding:.6rem var(--gutter);background:var(--bar-bg);border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav{grid-column:2}
.nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem}
.nav a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.3rem 1rem;border-radius:var(--r-pill);
  border:.12rem solid transparent;text-decoration:none;font-weight:700;font-size:1.05rem;
  transition:background-color .15s,border-color .15s,color .15s}
.nav a:hover{background:var(--hover-soft);border-color:var(--line)}
.nav a:active{background:var(--lime);color:var(--on-lime)}
.bar__tools{grid-column:3;justify-self:end;display:flex;align-items:center;gap:.5rem}
.theme{min-height:2.75rem;padding:.35rem 1rem;gap:.5rem;font-size:1rem;white-space:nowrap;box-shadow:.15rem .15rem 0 var(--shadow)}
/* Por debajo de 1120 px, solo el icono (el texto sigue ahí para los lectores de pantalla). Deja sitio al futuro selector de idioma. */
@media (max-width:69.99rem){
  .theme{padding:0;width:2.9rem;height:2.9rem;min-height:0;border-radius:50%}
  .theme__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.theme .i-sun{display:none}
.theme[data-dark=true] .i-sun{display:block} .theme[data-dark=true] .i-moon{display:none}
.bar__menu{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.35rem 1rem;
  border:var(--border) solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-weight:700;font-size:1rem;
  box-shadow:.15rem .15rem 0 var(--shadow);transition:transform .15s var(--spring),box-shadow .15s var(--spring),background-color .15s}
.bar__menu:active{transform:translate(.15rem,.15rem);box-shadow:0 0 0 var(--shadow)}
.bar__menu .i-x{display:none}
.bar__menu[aria-expanded=true]{background:var(--lime);color:var(--on-lime)}
.bar__menu[aria-expanded=true] .i-list{display:none} .bar__menu[aria-expanded=true] .i-x{display:block}

@media (max-width:43.99rem){
  /* sin JS: la navegación ocupa su propia fila */
  html:not(.js) .nav{grid-column:1/-1;grid-row:2}
  html:not(.js) .bar__tools{grid-row:1}
  /* con JS: desplegable */
  .js .bar{display:flex;justify-content:space-between}
  .js .nav{position:absolute;left:0;right:0;top:100%;padding:.75rem var(--gutter) 1.25rem;background:var(--bg);
    border-bottom:var(--border) solid var(--line);box-shadow:0 .75rem 1.5rem rgb(0 0 0 / .15);
    visibility:hidden;opacity:0;transform:translateY(-.5rem);transition:opacity .2s,transform .25s var(--spring),visibility 0s .25s}
  .js .bar[data-open] .nav{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .25s var(--spring)}
  .js .nav ul{flex-direction:column;gap:.6rem}
  .js .nav a{justify-content:center;width:100%;min-height:3.5rem;font-size:1.2rem;border:var(--border) solid var(--line);
    background:var(--surface);box-shadow:.2rem .2rem 0 var(--shadow)}
}

/* ---------- Página ---------- */
main{max-width:68rem;margin:0 auto;padding:0 var(--gutter) 5rem;display:grid;gap:clamp(3.5rem,9vw,6rem)}

/* ---------- Hero tipo linktree ---------- */
.hero{display:grid;justify-items:center;text-align:center;padding-top:clamp(2rem,7vw,4rem)}
.hero__photo{width:min(13.5rem,58vw);aspect-ratio:1;border-radius:50%;border:.4rem solid #fff;
  box-shadow:0 0 0 var(--border) var(--line),.4rem .5rem 0 var(--border) var(--shadow);
  transform:rotate(-4deg);transition:transform .5s var(--spring)}
@media (hover:hover){.hero__photo:hover{transform:rotate(3deg) scale(1.04)}}
.hero h1{font-size:clamp(2.6rem,11vw,4.6rem);line-height:1;margin-top:1.75rem}
.social{display:grid;gap:.9rem;width:min(24rem,100%);margin-top:2rem}
.social .btn{min-height:3.75rem;font-size:1.2rem;width:100%}

.hero__kicker{margin-top:1.75rem;font-weight:700;font-size:1rem;display:inline-block;padding:.2rem .9rem;border-radius:var(--r-pill);
  background:var(--lime);color:var(--on-lime);border:.12rem solid var(--line)}
.hero__kicker + h1{margin-top:.9rem}
.hero__handle{margin-top:.4rem;font-weight:700;font-size:1.2rem;color:var(--muted)}
.hero__micro{margin-top:1.5rem;max-width:34ch;color:var(--muted)}
.hero__bio{margin-top:2.5rem;width:100%;text-align:left;padding:1.25rem 1.4rem;border-radius:var(--r-card);
  background:var(--surface);border:.1rem solid var(--line-soft)}
@media (min-width:48rem){.hero__bio{padding:1.5rem 2rem;font-size:1.2rem}}

/* ---------- Bloques grandes ---------- */
h2{font-size:clamp(2rem,8vw,3rem)}

/* ---------- White Noise ---------- */
.pod__card{border:var(--border) solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:1.5rem 1.25rem 1.75rem;display:grid;gap:1.5rem}
.pod__cover{width:min(11rem,55%);border-radius:1rem;border:var(--border) solid var(--line);transform:rotate(-3deg);
  box-shadow:var(--lift) var(--lift) 0 var(--shadow);transition:transform .5s var(--spring)}
@media (hover:hover){.pod__card:hover .pod__cover{transform:rotate(2deg) scale(1.03)}}
.pod__sub{display:block;margin-top:.4rem;font-family:var(--body);font-weight:700;font-size:1.15rem;letter-spacing:0;color:var(--muted)}
.pod__desc{margin-top:1rem}
.player{display:grid;gap:.6rem;justify-items:start}
.player__btn{min-height:3.5rem;font-size:1.15rem}
.player__note{font-size:1rem;color:var(--muted)}
.player iframe{display:block;width:100%;height:352px;border:0;border-radius:1rem}
.player.is-loaded{justify-items:stretch}
.pod__label{font-family:var(--body);font-size:1.05rem;letter-spacing:0;margin-bottom:-.75rem}
.pod__join{display:grid;gap:.75rem;justify-items:start;padding-top:1.5rem;border-top:.1rem solid var(--line-soft)}
.pod__join .pod__label{margin-bottom:0}
.pod__join .btn--sm{width:auto}
.platforms{display:grid;gap:.75rem}
@media (min-width:30rem){.platforms{grid-template-columns:1fr 1fr}}
.btn--sm{min-height:3rem;padding:.5rem 1rem;font-size:1rem;width:100%;white-space:nowrap;box-shadow:.18rem .18rem 0 var(--shadow)}
.pod__more{justify-self:stretch;min-height:3.75rem;font-size:1.2rem}
.pod__head .pod__more{margin-top:1.5rem;width:100%}
@media (min-width:48rem){.pod__head .pod__more{width:auto}}
/* Invitación a participar, al final de la página del podcast */
.wn-join{display:grid;gap:1rem;justify-items:start;padding:clamp(1.5rem,4vw,2.5rem);border:var(--border) solid var(--line);
  border-radius:var(--r-card);background:var(--surface)}
.wn-join h2{font-size:clamp(1.6rem,5vw,2.2rem)}
.wn-join p{max-width:62ch}
@media (min-width:48rem){
  .pod__card{grid-template-columns:14rem 1fr;column-gap:2.5rem;padding:2.5rem}
  .pod__cover{width:100%;align-self:center}
  .pod__card > :not(.pod__cover,.pod__head){grid-column:1/-1}
  .platforms{display:flex;flex-wrap:wrap}
  .btn--sm{width:auto}
  .pod__more{justify-self:start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important;scroll-behavior:auto!important}
  .hero__photo{transform:none}
}
@media (forced-colors:active){
  .btn,.hero__photo{box-shadow:none}
}

/* ---------- Encabezados de sección ---------- */
.sec__sub{margin-top:.5rem;font-weight:700;font-size:1.15rem;color:var(--muted)}

/* ---------- Preguntas frecuentes ---------- */
.faq__list{display:grid;gap:.9rem;margin-top:1.75rem}
.faq__item{border:var(--border) solid var(--line);border-radius:var(--r-card);background:var(--surface);
  transition:transform .2s var(--spring),box-shadow .2s var(--spring);scroll-margin-top:6rem}
.faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:3.5rem;padding:1rem 1.25rem;border-radius:calc(var(--r-card) - .2rem);transition:background-color .2s,color .2s}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{font-family:var(--body);font-size:1.15rem;font-weight:700;letter-spacing:0;line-height:1.3}
.faq__item summary::after{content:"";flex:none;width:2rem;height:2rem;border-radius:50%;border:.14rem solid currentColor;
  background:linear-gradient(currentColor,currentColor) center/.8rem .14rem no-repeat,linear-gradient(currentColor,currentColor) center/.14rem .8rem no-repeat;
  transition:transform .3s var(--spring)}
.faq__item[open] summary::after{transform:rotate(135deg)}
.faq__item[open] summary{background:var(--lime);color:var(--on-lime);border-radius:calc(var(--r-card) - .2rem) calc(var(--r-card) - .2rem) 0 0}
@media (hover:hover){
  .faq__item:hover{transform:translate(-.12rem,-.12rem);box-shadow:.35rem .35rem 0 var(--shadow)}
  .faq__item:not([open]) summary:hover{background:var(--hover-soft)}
}
.faq__item:focus-within{box-shadow:.35rem .35rem 0 var(--shadow)}
.faq__a{padding:1.1rem 1.25rem 1.35rem}
.faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.faq__item[open]::details-content{block-size:auto}
:root{interpolate-size:allow-keywords}
.faq__src{margin-top:1.5rem;font-size:1rem;color:var(--muted)}

.search{margin-top:2.5rem;display:grid;gap:.75rem;padding:1.25rem;border-radius:var(--r-card);border:.14rem dashed var(--line)}
.search label{font-weight:700;font-size:1.15rem}
.search__row{display:flex;flex-wrap:wrap;gap:.75rem}
.search input{flex:1 1 14rem;min-width:0;min-height:3.25rem;padding:.6rem 1.25rem;border:var(--border) solid var(--line);
  border-radius:var(--r-pill);background:var(--surface);color:var(--ink)}
.search input::placeholder{color:var(--muted);opacity:1}
.search .btn{flex:1 0 auto}
@media (min-width:36rem){.search .btn{flex:none}}

/* ---------- En los medios ---------- */
.media__list{display:grid;gap:1.25rem;margin-top:1.75rem}
.mcard{position:relative;display:grid;border-radius:var(--r-card);overflow:hidden;
  background:var(--surface);border:var(--border) solid var(--line);transition:transform .2s var(--spring),box-shadow .2s var(--spring)}
.mcard__img{margin:0;position:relative;background:#fff;border-bottom:var(--border) solid var(--line)}
.mcard__img img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.mcard--coupon .mcard__img img{object-fit:contain;aspect-ratio:auto}
.mcard__img figcaption{position:absolute;right:.5rem;bottom:.5rem;font-size:.8rem;font-weight:700;padding:.1rem .5rem;border-radius:var(--r-pill);
  background:rgb(27 14 39 / .85);color:#fff}
.mcard__body{display:grid;align-content:start;gap:.45rem;padding:1.1rem 1.25rem 1.35rem}
.mcard__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.mcard__chip{font-size:.95rem;font-weight:700;padding:.1rem .75rem;border-radius:var(--r-pill);border:.12rem solid var(--line);background:var(--bg);
  transition:background-color .15s,color .15s}
.mcard__chip--date{background:transparent}
.mcard__title{font-size:1.35rem;line-height:1.2;margin-top:.3rem;text-wrap:pretty}
.mcard__title a{text-decoration:none}
.mcard__title a::after{content:"";position:absolute;inset:0;z-index:1} /* toda la tarjeta es el enlace */
.mcard__meta{color:var(--muted);font-size:1.02rem}
@media (min-width:44rem){
  .mcard{grid-template-columns:17rem 1fr}
  .mcard__img{border-bottom:0;border-right:var(--border) solid var(--line)}
  .mcard__body{padding:1.35rem 1.75rem 1.5rem;align-content:center}
  .mcard--feature{grid-template-columns:1fr}
  .mcard--feature .mcard__img{border-right:0;border-bottom:var(--border) solid var(--line)}
  .mcard--feature .mcard__img img{aspect-ratio:21/9}
}
@media (hover:hover){
  .mcard:has(a):hover{transform:translate(-.15rem,-.15rem);box-shadow:.4rem .4rem 0 var(--shadow)}
  .mcard:has(a):hover .mcard__title a{text-decoration:underline}
}
.mcard:has(a:focus-visible){transform:translate(-.15rem,-.15rem);box-shadow:.4rem .4rem 0 var(--shadow);outline:.2rem solid var(--focus);outline-offset:.3rem}
.mcard a:focus-visible{outline:none}
.mcard:has(a):active{transform:translate(.15rem,.15rem);box-shadow:.05rem .05rem 0 var(--shadow)}
.mcard--feature{background:var(--lime);color:var(--on-lime);--muted:var(--on-lime)}
/* Tarjeta destacada (fondo lima): las dos etiquetas iguales; al pasar, las dos se rellenan */
.mcard--feature .mcard__chip{background:transparent;color:var(--on-lime);border-color:var(--on-lime)}
.mcard--feature .mcard__title{font-size:clamp(1.5rem,5vw,2.1rem)}
.mcard__quote{margin:.6rem 0 0;padding:0;font-size:clamp(1.2rem,4vw,1.45rem);font-style:italic}
.mcard__from{font-weight:700;font-size:1rem}

/* ---------- ¿Hablamos? ---------- */
.talk__card{border:var(--border) solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:1.75rem 1.25rem;
  display:grid;gap:1rem;justify-items:start;box-shadow:var(--lift) var(--lift) 0 var(--shadow)}
@media (min-width:48rem){.talk__card{box-shadow:.5rem .5rem 0 var(--shadow)}}
@media (min-width:48rem){.talk__card{padding:2.75rem}}
.talk__card .sec__sub{margin-top:-.5rem}
.talk__text{font-size:1.2rem}
.talk__options{display:flex;flex-wrap:wrap;gap:.6rem;margin:.25rem 0 .5rem}
.talk__options li{padding:.45rem 1rem;border-radius:1rem;background:var(--hover-soft);border:.1rem solid var(--line-soft);font-weight:700;font-size:1rem}
.talk__options li:nth-child(1){transform:rotate(-1.2deg)} .talk__options li:nth-child(2){transform:rotate(.8deg)} .talk__options li:nth-child(3){transform:rotate(-.6deg)}
.talk__btn{min-height:4rem;font-size:1.25rem;padding-inline:2rem}
.talk__micro{color:var(--muted)}
.talk__mail{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.75rem;padding-top:1.25rem;border-top:.1rem solid var(--line-soft);width:100%}
.talk__address{font-weight:700;font-size:1.1rem;word-break:break-all}
.copy{width:auto}
.copy.is-done{background:var(--lime);color:var(--on-lime)}

/* ---------- Pie ---------- */
.foot{border-top:var(--border) solid var(--line);background:var(--surface);margin-top:2rem}
.foot__in{max-width:68rem;margin:0 auto;padding:2.5rem var(--gutter) 3rem;display:grid;gap:2rem}
.foot__cols{display:grid;gap:1.75rem}
@media (min-width:44rem){.foot__cols{grid-template-columns:1fr 1fr}}
.foot__h{font-family:var(--body);font-size:1rem;letter-spacing:0;color:var(--muted);margin-bottom:.5rem}
.foot ul{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.foot a{display:inline-flex;min-height:2.75rem;align-items:center;font-weight:700}
.foot__legal{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:center;color:var(--muted);font-size:1rem}

/* Movimiento reducido: nada se desplaza, solo cambia el color */
@media (prefers-reduced-motion:reduce){
  .ep:hover,.ep:has(.ep__sum:active),.btn:hover,.btn:focus-visible,.btn:active,.faq__item:hover,.mcard:has(a):hover,.mcard:has(a:focus-visible),.mcard:has(a):active,
  .pod__card:hover .pod__cover,.hero__photo:hover,.talk__options li{transform:none}
}

/* Medios: texto, icono de pestaña nueva y fecha que también se enciende */
.mcard__desc{margin-top:.2rem}
.mcard__title{display:flex;align-items:flex-start;gap:.5rem;justify-content:space-between}
.mcard__out{width:1.1em;height:1.1em;margin-top:.1em;opacity:.7;transition:opacity .15s,transform .2s var(--spring)}
@media (hover:hover){
  .mcard:has(a):hover .mcard__chip{background:var(--lime);color:var(--on-lime)}
  .mcard:has(a):hover .mcard__out{opacity:1;transform:translate(.1rem,-.1rem)}
  .mcard--feature:has(a):hover .mcard__chip{background:var(--on-lime);color:var(--lime);border-color:var(--on-lime)}
}
.mcard:has(a:focus-visible) .mcard__chip{background:var(--lime);color:var(--on-lime)}
.mcard--feature:has(a:focus-visible) .mcard__chip{background:var(--on-lime);color:var(--lime)}

/* =====================================================================
   Página /white-noise/
   ===================================================================== */
.page-wn main{max-width:68rem;gap:clamp(2.25rem,5vw,3.5rem)}
.page-wn .foot__in{max-width:68rem}
.wn-hero{display:grid;gap:1.5rem;padding-top:clamp(2rem,5vw,3rem)}
.wn-hero .pod__cover{width:min(12rem,55%)}
.wn-hero h1{font-size:clamp(2.6rem,10vw,4rem);line-height:1}
.wn-hero__desc{margin-top:1rem;font-size:1.15rem}
.wn-hero__by{margin-top:.75rem;font-weight:700;color:var(--muted)}
@media (min-width:44rem){
  .wn-hero{grid-template-columns:15rem 1fr;column-gap:2.5rem;align-items:center}
  .wn-hero .pod__cover{width:100%}
  .wn-hero__platforms{grid-column:1/-1}
}
@media (min-width:60rem){.wn-hero__platforms{flex-wrap:nowrap}}

/* Buscador */
.finder h2{font-size:clamp(1.8rem,6vw,2.4rem)}
.finder .search{margin-top:1rem;border-style:solid;background:var(--surface)}
.tags{margin-top:1.25rem}
.tags__label{font-weight:700;margin-bottom:.6rem;display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;cursor:pointer;list-style:none}
.tags__label::-webkit-details-marker{display:none}
.tags__label::after{content:"";width:.55rem;height:.55rem;border-right:.16rem solid currentColor;border-bottom:.16rem solid currentColor;
  transform:translateY(-.15rem) rotate(45deg);transition:transform .2s var(--spring)}
.tags[open] .tags__label::after{transform:translateY(.1rem) rotate(-135deg)}
.tags:not([open]) .tags__label{margin-bottom:0}
.tags__n{font-weight:400;color:var(--muted)}
.tags__list{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;min-height:2.75rem;padding:.35rem 1rem;border-radius:var(--r-pill);border:.14rem solid var(--line);background:var(--surface);
  font-weight:700;font-size:1rem;transition:transform .15s var(--spring),background-color .15s,color .15s,box-shadow .15s var(--spring)}
@media (hover:hover){.tag:hover{transform:translate(-.1rem,-.1rem);box-shadow:.2rem .2rem 0 var(--shadow)}}
.tag:active{transform:translate(.1rem,.1rem);box-shadow:none}
.tag[aria-pressed=true],.tag[aria-current=true]{background:var(--lime);color:var(--on-lime);box-shadow:.2rem .2rem 0 var(--shadow)}
.finder__status{margin-top:1rem;font-weight:700;color:var(--muted)}
.finder__empty{margin-top:1rem;display:grid;gap:.9rem;justify-items:start;padding:1.25rem;border-radius:var(--r-card);
  border:.14rem dashed var(--line);background:var(--surface)}
mark{background:var(--lime);color:var(--on-lime);border-radius:.25rem;padding:0 .1em}

/* Episodios: tarjeta plegada con miniatura; al pulsar se despliega */
.episodes{display:grid;gap:1.25rem;margin-top:-1rem}
.ep{border:var(--border) solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden;scroll-margin-top:5.5rem;
  transition:transform .2s var(--spring),box-shadow .2s var(--spring)}
.ep__sum{list-style:none;cursor:pointer;display:grid}
.ep__sum::-webkit-details-marker{display:none}
.ep__thumb{display:block;background:#1d1030;border-bottom:var(--border) solid var(--line)}
.ep__thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ep__head{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.25rem 1.25rem}
.ep__foot{margin-top:auto;padding-top:.5rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
@media (min-width:48rem){
  /* La miniatura rellena siempre su hueco (sin franjas). Su ancho es siempre el de la columna y su alto
     mínimo, el 16:9 de ese ancho; si el texto es más alto, la imagen crece recortando por los lados.
     (Con aspect-ratio + stretch, en anchos medios la imagen se ensanchaba y unas tarjetas salían más grandes.) */
  .ep__sum{grid-template-columns:42% 1fr}
  .ep__thumb{position:relative;align-self:stretch;border-bottom:0;border-right:var(--border) solid var(--line)}
  .ep__thumb::before{content:"";display:block;padding-top:56.25%}
  .ep__thumb img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .ep__head{padding:1.25rem 1.5rem}
}
@media (hover:hover){
  .ep:not([open]):hover{transform:translate(-.15rem,-.15rem);box-shadow:.4rem .4rem 0 var(--shadow)}
  .ep:not([open]):hover .chip{background:var(--lime);color:var(--on-lime)}
  .ep:not([open]):hover .ep__toggle{background:var(--lime);color:var(--on-lime)}
}
.ep__sum:focus-visible{outline:none}
.ep:has(.ep__sum:focus-visible){outline:.2rem solid var(--focus);outline-offset:.3rem}
.ep:not([open]):has(.ep__sum:active){transform:translate(.15rem,.15rem);box-shadow:.05rem .05rem 0 var(--shadow)}
.ep[open],.ep--solo{box-shadow:.4rem .4rem 0 var(--shadow)}
.ep[open] .ep__sum,.ep--solo .ep__sum{border-bottom:var(--border) solid var(--line);background:var(--lime);color:var(--on-lime);--muted:var(--on-lime)}
.ep[open] .ep__sum .chip,.ep--solo .ep__sum .chip{background:var(--surface);color:var(--ink)}
.ep--solo .ep__sum{cursor:default}

.ep__chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.chip{font-size:.95rem;font-weight:700;padding:.1rem .75rem;border-radius:var(--r-pill);border:.12rem solid var(--line);background:var(--bg);
  transition:background-color .15s,color .15s}
.chip--code{font-family:var(--mono)}
.ep__title{display:grid;gap:.25rem}
.ep__guest{font-size:clamp(1.7rem,6vw,2.3rem)}
.ep__claim{font-family:var(--body);font-weight:700;font-size:1.12rem;letter-spacing:0;line-height:1.25;text-wrap:pretty}
.ep__role{color:var(--muted);font-size:1rem;line-height:1.35}
.ep__toggle{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .95rem;border-radius:var(--r-pill);
  border:.14rem solid var(--line);font-weight:700;font-size:1rem;background:var(--surface);transition:background-color .15s,color .15s}
.ep__toggle::after{content:"";width:.55rem;height:.55rem;border-right:.16rem solid currentColor;border-bottom:.16rem solid currentColor;
  transform:rotate(45deg) translate(-.1rem,-.1rem);transition:transform .3s var(--spring)}
.ep[open] .ep__toggle::after{transform:rotate(225deg) translate(-.1rem,-.1rem)}
.ep__toggle-close,.ep[open] .ep__toggle-open{display:none}
.ep[open] .ep__toggle-close{display:inline}
.ep[open] .ep__toggle{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.ep__body{display:grid;gap:1rem;padding:1.4rem 1.25rem 1.75rem}
@media (min-width:48rem){.ep__body{padding:2rem 2.5rem 2.5rem}}
.ep::details-content{block-size:0;overflow:hidden;transition:block-size .4s ease,content-visibility .4s allow-discrete}
.ep[open]::details-content{block-size:auto}
.ep__meta{font-weight:700;color:var(--muted)}
.ep__desc{font-size:1.15rem}
.ep__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.ep__actions .btn{min-height:3.5rem;font-size:1.1rem}
.ep__actions .player.is-loaded{flex:1 1 100%;order:2}
.ep__h{font-family:var(--body);font-size:1.1rem;letter-spacing:0;margin-bottom:.75rem}
.ep__chapters{padding-top:1.25rem;border-top:.1rem solid var(--line-soft)}

/* Línea de tiempo: dónde cae cada tema dentro del episodio */
.tl{position:relative;height:.6rem;border-radius:var(--r-pill);background:var(--hover-soft);border:.1rem solid var(--line-soft);margin-bottom:1rem}
.tl__mark{position:absolute;top:-.2rem;bottom:-.2rem;left:var(--at);width:.2rem;border-radius:.1rem;background:var(--ink);transition:transform .2s var(--spring),background-color .2s}
.tl__mark.is-hit{background:var(--lime);transform:scaleY(1.9);box-shadow:0 0 0 .1rem var(--line);z-index:1}
.tl__mark.is-dim{opacity:.35}

.chapters{display:grid;gap:.15rem;list-style:none;margin:0;padding:0}
.ch a{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:baseline;padding:.55rem .6rem;border-radius:.8rem;
  text-decoration:none;border:.12rem solid transparent;transition:background-color .15s,border-color .15s,transform .15s var(--spring)}
@media (hover:hover){.ch a:hover{background:var(--hover-soft);border-color:var(--line)}.ch a:hover .ch__title{text-decoration:underline}}
.ch a:active{transform:scale(.99)}
.tc{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;font-size:.95rem;padding:.05rem .45rem;border-radius:.4rem;
  background:var(--bg);border:.1rem solid var(--line)}
.ch a:hover .tc,.ch a:focus-visible .tc{background:var(--lime);color:var(--on-lime)}

/* Preguntas de cada episodio (mismo acordeón que la home) */
.ep__qs{padding-top:1.25rem;border-top:.1rem solid var(--line-soft)}
.ep__qs .faq__list{margin-top:0}
.q summary{justify-content:flex-start}
.q summary h3{flex:1;margin:0;font-family:var(--body);font-size:1.1rem;font-weight:700;letter-spacing:0;line-height:1.3;text-wrap:pretty}
.q summary .tc{flex:none}
.q[open] summary .tc{background:var(--surface);color:var(--ink)}
/* En el móvil, dos filas: arriba el minuto y el «+», unidos por una pista de cinta; abajo, la pregunta a todo el ancho */
@media (max-width:43.99rem){
  .q summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"tc pista mas" "preg preg preg";
    align-items:center;column-gap:.6rem;row-gap:.55rem}
  .q summary .tc{grid-area:tc;justify-self:start}
  .q summary::before{content:"";grid-area:pista;border-top:.14rem dashed currentColor;opacity:.3}
  .q summary::after{grid-area:mas;width:1.85rem;height:1.85rem}
  .q summary h3{grid-area:preg;hyphens:manual;-webkit-hyphens:manual}
}
.q__quote{margin:.9rem 0 0;padding-left:1rem;border-left:.3rem solid var(--lime);font-style:italic}
.q__at{margin-top:.9rem}
.q__at a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700}

/* Clip de YouTube dentro de cada respuesta */
.clip{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;margin-top:1rem}
.clip__btn{min-height:3rem}
.clip__yt{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:1rem}
.clip__frame{display:block;width:100%;aspect-ratio:16/9;border:var(--border) solid var(--line);border-radius:1rem;background:#000}
.clip:has(.clip__frame) .clip__yt{order:2}

/* Enlace fijo al episodio, paginación, migas y más episodios */
.pager ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem}
.pager__n{display:inline-flex;align-items:center;justify-content:center;min-width:2.9rem;min-height:2.9rem;border-radius:50%;
  border:.14rem solid var(--line);font-weight:700;text-decoration:none;background:var(--surface)}
.pager__n[aria-current]{background:var(--lime);color:var(--on-lime)}
.pager .btn--sm{width:auto}
.finder__clear{display:inline-block;margin-top:.5rem;font-weight:700}
.crumbs{padding-top:1.5rem;font-weight:700;color:var(--muted)}
.episodes--solo{margin-top:-1rem}
.crumbs a{color:var(--ink)}
.wn-hero--mini .wn-hero__title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,7vw,2.6rem);line-height:1.05;letter-spacing:-.02em}
.notfound{padding-top:3rem;display:grid;gap:1rem;justify-items:start}

/* Página de episodio: migas y anterior/siguiente arriba */
.ep-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem;padding-top:1.5rem}
.ep-nav .crumbs{padding-top:0}
.ep-nav__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.ep-nav__btns .btn--sm{width:auto}

/* Compartir episodio, a la derecha de los botones de escuchar */
.share{margin-left:auto}
.share.is-done{background:var(--lime);color:var(--on-lime)}
@media (max-width:35.99rem){.share{margin-left:0}}
.notfound__links{display:flex;flex-wrap:wrap;gap:.75rem}
.notfound__links .btn{width:auto}

/* Aviso de cookies: franja abajo, sin tapar el contenido ni atrapar el foco */
.cookies{position:fixed;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);z-index:50;max-width:44rem;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;padding:1rem 1.25rem;border-radius:var(--r-card);
  background:var(--surface);color:var(--ink);border:var(--border) solid var(--line);box-shadow:var(--lift) var(--lift) 0 var(--shadow)}
.cookies__txt{flex:1 1 20rem;font-size:1rem}
.cookies__btns{display:flex;gap:.6rem;flex-wrap:wrap}
.cookies__btns .btn{width:auto;min-width:7.5rem}

/* Aviso legal */
.legal{padding-top:2rem;display:grid;gap:1rem}
.legal h1{font-size:clamp(2.2rem,8vw,3.2rem)}
.legal h2{font-size:clamp(1.5rem,5vw,1.9rem);margin-top:1.5rem}
.legal__upd{color:var(--muted);font-weight:700}
.legal__table{overflow-x:auto;border:var(--border) solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.legal table{width:100%;border-collapse:collapse;font-size:1rem}
.legal th,.legal td{text-align:left;vertical-align:top;padding:.75rem 1rem;border-bottom:.1rem solid var(--line-soft)}
.legal tr:last-child td{border-bottom:0}
.legal th{background:var(--hover-soft)}
.legal .btn{width:auto}

/* Menú: la sección en la que estás */
.nav a[aria-current]{background:var(--lime);color:var(--on-lime);border-color:var(--line)}

html.has-cookies body{padding-bottom:calc(var(--cookies-h, 0px) + 1.5rem)}
/* Al moverse con el teclado, el elemento con el foco nunca queda debajo del aviso */
html.has-cookies{scroll-padding-bottom:calc(var(--cookies-h, 0px) + 1rem)}
@media (max-width:40rem){
  .cookies{left:.5rem;right:.5rem;bottom:.5rem;padding:.65rem .8rem;gap:.5rem;border-width:.12rem}
  .cookies__txt{flex-basis:100%;font-size:.9rem;line-height:1.3}
  .cookies__btns{width:100%}
  .cookies__btns .btn{flex:1;min-width:0;min-height:2.75rem;padding-block:.35rem}
}

/* Las rejillas de una columna nunca se ensanchan más que la pantalla (zoom alto y móviles de 320 px) */
main,.hero,.pod__card,.talk__card,.faq__list,.media__list,.episodes,.ep__body,.ep__head,.mcard,.mcard__body,.legal,.finder,.search,.wn-hero{grid-template-columns:minmax(0,1fr)}
@media (min-width:44rem){.wn-hero{grid-template-columns:15rem minmax(0,1fr)}}
@media (min-width:48rem){.pod__card{grid-template-columns:14rem minmax(0,1fr)}.mcard{grid-template-columns:17rem minmax(0,1fr)}.ep__sum{grid-template-columns:42% minmax(0,1fr)}}
/* En tablets en vertical, la tarjeta va apilada como en el móvil. En portátiles pequeños: miniatura de ancho fijo cuyo 16:9 mide lo mismo que el texto,
   para que todas las tarjetas salgan igual de altas sin recortar las miniaturas */
@media (min-width:48rem) and (max-width:55.99rem){.ep__sum{grid-template-columns:minmax(0,1fr)}
  .ep__thumb{border-right:0;border-bottom:var(--border) solid var(--line)}}
@media (min-width:56rem) and (max-width:63.99rem){.ep__sum{grid-template-columns:23.25rem minmax(0,1fr);min-height:13.08rem}
  .ep__guest{font-size:1.7rem}.ep__head{padding:1rem 1.25rem}}
.mcard--feature{grid-template-columns:minmax(0,1fr)!important}
h1,h2,h3,p,li,summary{overflow-wrap:break-word}
/* Con el texto muy grande, la barra del móvil pasa a dos líneas en vez de salirse */
@media (max-width:43.99rem){.js .bar{flex-wrap:wrap;row-gap:.5rem}}
.player,.pod__join,.foot__in,.pod__head,.hero__bio,.tags,.finder__empty,.notfound,.q .faq__a{grid-template-columns:minmax(0,1fr);min-width:0}
main *,.foot *{min-width:0}
@media (min-width:44rem){.foot__cols{grid-template-columns:1fr 1fr}}
.foot ul{flex-wrap:wrap}
/* El recorte horizontal solo donde el menú no es un desplegable: en el iPhone, Safari recortaba el
   desplegable al terminar la animación y el menú aparecía y desaparecía */
@media (min-width:44rem){.bar{overflow-x:clip}}
html:not(.js) .bar{overflow-x:clip}
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.talk__options li{max-width:100%}
@media (max-width:43.99rem){.js .nav a{padding-inline:.6rem;overflow-wrap:anywhere}}
@media (min-width:30rem){.platforms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.btn--sm{white-space:normal}
/* Botones: con el texto muy grande se estrechan y parten el texto en vez de salirse */
.btn{max-width:100%;overflow-wrap:anywhere}
.btn .ico{flex:none}
.skip{max-width:calc(100vw - 2 * var(--gutter))}
.foot a,.talk__address{overflow-wrap:anywhere}
@media (max-width:47.99rem){.talk__options li{transform:none!important}}
.talk__options{width:100%}.talk__options li{overflow-wrap:anywhere}

/* Transición suave al cambiar de página (Chrome, Edge y Safari; en el resto, cambio normal).
   La barra superior se queda quieta y el contenido se funde. Con movimiento reducido, nada. */
@view-transition{navigation:auto}
.bar{view-transition-name:barra}
::view-transition-old(root){animation:vt-salida .16s ease-out both}
::view-transition-new(root){animation:vt-entrada .32s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-salida{to{opacity:0}}
@keyframes vt-entrada{from{opacity:0;transform:translateY(.6rem)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* FAQ v3: párrafos, lista, enlaces a vídeos y tarjeta de cierre de leyendas */
.faq__a p + p,.faq__a p + .faq__ul,.faq__ul + p{margin-top:.8rem}
.faq__ul{margin:.6rem 0 0;padding-left:1.2rem;display:grid;gap:.45rem}
.faq__ul li::marker{color:var(--ink)}
.faq__links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.faq__links .btn{width:auto}

/* Home al mismo ancho que el podcast; el bloque de presentación sigue centrado y más estrecho */
.hero{max-width:44rem;margin-inline:auto;width:100%}