/* ==========================================================================
   Hoy conocemos a... — Maqueta C
   Sistema visual Almazán Creative · navy + dorado + Plus Jakarta Sans
   Hermana de la Maqueta B (Almazán Fotografía): mismos tokens, mismos botones,
   mismo eyebrow. Cambia la personalidad, no el sistema.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --navy:#060d1a;
  --navy-2:#0b1524;
  --navy-3:#122036;
  --blue:#003671;
  --gold:#d89e27;        /* dorado de marca: sobre navy */
  --gold-ink:#8a6210;    /* el mismo, oscurecido, para leerlo sobre blanco */
  --gold-2:#eab949;
  --gold-soft:#fbf3e2;
  --cream:#f7f6f3;
  --white:#fff;
  --ink:#101722;
  --body:#4f5967;
  --mut:#69727f;
  --line:#e7e4df;
  --line-d:rgba(255,255,255,.12);

  --r:22px;
  --r-s:14px;
  --sh:0 2px 4px rgba(6,13,26,.04),0 12px 32px rgba(6,13,26,.07);
  --sh-h:0 6px 12px rgba(6,13,26,.07),0 26px 60px rgba(6,13,26,.14);
  --pad:clamp(20px,5vw,64px);
  --max:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font);background:var(--white);color:var(--body);
  font-size:16.5px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--gold);color:var(--navy)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-s{padding-block:clamp(44px,6vw,76px)}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-.03em}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(2rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.8vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.02em}
h4{font-size:1rem;letter-spacing:-.01em}
p{max-width:64ch}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.65;color:var(--body)}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-ink);border-radius:2px;flex:none}
.navy .eyebrow,.on-dark .eyebrow{color:var(--gold)}
.navy .eyebrow::before,.on-dark .eyebrow::before{background:var(--gold)}
.gold{color:var(--gold-ink)}
.navy .gold,.on-dark .gold{color:var(--gold)}
.on-dark{color:var(--white)}
.on-dark p,.on-dark .lead{color:rgba(255,255,255,.72)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--white)}

/* ---------- fondos ---------- */
.navy{background:var(--navy);color:rgba(255,255,255,.72);position:relative;overflow:hidden}
.navy::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 46% at 82% 6%,rgba(216,158,39,.16),transparent 62%),
    radial-gradient(48% 40% at 8% 96%,rgba(0,54,113,.55),transparent 66%);
}
.navy>*{position:relative;z-index:1}
.cream{background:var(--cream)}
.light{background:var(--white);position:relative;overflow:hidden}
.light::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(56% 48% at 88% -6%,rgba(216,158,39,.13),transparent 64%),
    radial-gradient(46% 42% at -4% 104%,rgba(0,54,113,.06),transparent 70%);
}
.light>*{position:relative;z-index:1}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;font-size:14.5px;font-weight:700;
  letter-spacing:-.01em;border:2px solid transparent;white-space:nowrap;
  transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s,box-shadow .35s;
}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 8px 24px rgba(216,158,39,.28)}
.btn-gold:hover{background:var(--gold-2);box-shadow:0 12px 32px rgba(216,158,39,.38)}
.btn-dark{background:var(--navy);color:var(--white)}
.btn-dark:hover{background:var(--navy-3)}
.btn-out{border-color:var(--line);color:var(--ink)}
.btn-out:hover{border-color:var(--navy);background:var(--navy);color:var(--white)}
.btn-out-l{border-color:rgba(255,255,255,.28);color:var(--white)}
.btn-out-l:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.btn-sm{padding:11px 22px;font-size:13.5px}

/* ---------- marcador de foto ---------- */
.ph{position:relative;overflow:hidden;background:var(--cream);isolation:isolate}
.ph::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(110% 80% at 26% 12%,rgba(216,158,39,.16),transparent 60%),
    linear-gradient(155deg,#0b1524 0%,#122036 58%,#0b1524 100%);
}
.ph::after{
  content:attr(data-ph);position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.1em;
  font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(216,158,39,.45);
}
.ph img{
  position:relative;z-index:2;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s var(--ease),transform 1.1s var(--ease);
}
.ph img.ok{opacity:1}
img.is-missing{opacity:0!important}
.ph.real::before,.ph.real::after{display:none}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}.rv[data-d="4"]{transition-delay:.28s}
.rv[data-d="5"]{transition-delay:.35s}.rv[data-d="6"]{transition-delay:.42s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- cabecera ---------- */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.hdr-in{
  max-width:var(--max);margin-inline:auto;padding:13px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo img{height:46px;width:auto;object-fit:contain}
.logo .fb{font-weight:800;color:var(--ink);font-size:16.5px;letter-spacing:-.03em;white-space:nowrap;line-height:1.15}
.logo .fb i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
@media(max-width:520px){.logo img{height:38px}}
.menu{display:flex;align-items:center;gap:4px}
.menu>li>a{
  display:block;padding:10px 15px;border-radius:100px;color:var(--body);
  font-size:14px;font-weight:600;transition:.3s var(--ease);
}
.menu>li>a:hover{background:var(--cream);color:var(--ink)}
.menu>li>a.act{color:var(--gold-ink);background:var(--gold-soft)}
.hdr .btn{flex:none}
.burger{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--line);position:relative;flex:none;background:var(--white)}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:.32s var(--ease)}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:26px}
.burger.x i:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){top:20px;transform:rotate(-45deg)}
@media(max-width:1080px){
  .menu{
    position:fixed;top:69px;left:0;right:0;bottom:0;background:var(--white);
    flex-direction:column;align-items:stretch;gap:2px;padding:20px var(--pad) 60px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .28s var(--ease),transform .34s var(--ease),visibility .34s;
  }
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu>li>a{padding:14px 16px;font-size:16px;border-radius:12px}
  .hdr .btn{display:none}
  .burger{display:block}
}

/* ---------- hero portada ---------- */
.hero{padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,120px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{margin-bottom:22px;text-wrap:balance}
.hero .lead{max-width:48ch;margin-bottom:32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line-d)}
.trust div b{display:block;font-size:1.9rem;font-weight:800;color:var(--gold);line-height:1.1;letter-spacing:-.03em}
.trust div span{font-size:11.5px;color:rgba(255,255,255,.55);font-weight:600;letter-spacing:.06em}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.collage .ph{border-radius:var(--r);box-shadow:var(--sh-h)}
.collage .a{grid-row:span 2;aspect-ratio:3/4.5}
.collage .b{aspect-ratio:4/3}
.collage .c{aspect-ratio:1/1}
@media(max-width:520px){.collage .a{aspect-ratio:3/4}}

/* ---------- buscador ---------- */
.finder{display:flex;gap:10px;max-width:560px;margin-top:6px}
.finder .fld{position:relative;flex:1}
.finder input{
  width:100%;padding:16px 20px 16px 48px;border-radius:100px;border:2px solid var(--line);
  background:var(--white);font-size:15px;color:var(--ink);transition:border-color .3s;
}
.finder input::placeholder{color:var(--mut)}
.finder input:focus{outline:none;border-color:var(--gold)}
.finder .fld svg{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;
  fill:none;stroke:var(--mut);stroke-width:2;pointer-events:none;
}
.on-dark .finder input{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
.on-dark .finder input::placeholder{color:rgba(255,255,255,.45)}
.on-dark .finder input:focus{border-color:var(--gold);background:rgba(255,255,255,.1)}
.on-dark .finder .fld svg{stroke:rgba(255,255,255,.5)}

/* ---------- cabecera de sección ---------- */
.sec-head{max-width:660px;margin-bottom:clamp(34px,4.5vw,56px)}
.sec-head.c{margin-inline:auto;text-align:center}
.sec-head.c .eyebrow{justify-content:center}
.sec-head h2{margin-bottom:16px;text-wrap:balance}
.sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}
.sec-row .sec-head{margin-bottom:0}

/* ---------- rejilla de entrevistas ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.cards,.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards,.cards.c3{grid-template-columns:1fr}}
.card{
  display:flex;flex-direction:column;background:var(--white);border-radius:var(--r);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
/* el buscador oculta tarjetas con el atributo hidden: sin esta línea, "display:flex"
   de arriba gana el empate de especificidad y el navegador las sigue enseñando. */
.card[hidden]{display:none}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-h);border-color:transparent}
.card .ph{aspect-ratio:16/9}
.card:hover .ph img{transform:scale(1.06)}
/* La cabecera de cada persona ya lleva su nombre y su oficio escritos encima
   (son las miniaturas de sus vídeos): repetirlos debajo, en un bloque de texto
   aparte, quedaba redundante y sobrecargado. Se queda solo la categoría, como
   etiqueta sobre la foto, y una línea de acción abajo. El nombre y el oficio
   se mantienen en el HTML (clase .vo) para quien usa lector de pantalla y
   para el buscador, que sigue leyendo data-buscar igual que antes. */
/* La categoría va DEBAJO, no encima de la foto: las cabeceras llevan el
   nombre escrito arriba a la izquierda y cualquier chip ahí lo tapaba. */
.card-b .tag{
  min-width:0;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .ph .pl{
  position:absolute;right:12px;bottom:12px;z-index:3;width:36px;height:36px;border-radius:50%;
  background:rgba(6,13,26,.78);border:1px solid rgba(216,158,39,.45);
  display:grid;place-items:center;transition:background .35s,transform .35s var(--ease);
}
.card:hover .ph .pl{background:var(--gold);transform:scale(1.08)}
.card .ph .pl::after{content:"";border-left:10px solid var(--gold);border-top:6.5px solid transparent;border-bottom:6.5px solid transparent;margin-left:3px;transition:border-color .35s}
.card:hover .ph .pl::after{border-left-color:var(--navy)}
.vo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card-b{padding:14px 18px 16px;display:flex;flex-direction:column}
.card-b .go{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12.5px;font-weight:700;color:var(--mut);
  transition:color .3s;
}
.card:hover .card-b .go{color:var(--gold-ink)}

/* ---------- filtros del directorio ---------- */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0 0}
.chips button{
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;background:var(--white);
  font-size:13.5px;font-weight:600;color:var(--body);transition:.3s var(--ease);
}
.chips button:hover{border-color:var(--navy);color:var(--ink)}
.chips button.on{background:var(--navy);border-color:var(--navy);color:var(--white)}
.count{font-size:13.5px;color:var(--mut);font-weight:600;margin:26px 0 22px}
.count b{color:var(--ink);font-weight:800}
.empty{padding:56px 0;text-align:center;color:var(--mut)}

/* ---------- ficha de entrevista ---------- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);margin-bottom:22px}
.crumb a:hover{color:var(--gold-ink)}
.crumb span{opacity:.5}
.art-head{padding-block:clamp(30px,4vw,48px) clamp(26px,3.4vw,38px);border-bottom:1px solid var(--line)}
.art-head h1{font-size:clamp(1.9rem,4.2vw,3.4rem);margin-bottom:20px;text-wrap:balance}
.byline{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13.5px;color:var(--mut);font-weight:600}
.byline b{color:var(--ink);font-weight:800}
.byline span.d{opacity:.35}
.art{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,4.5vw,64px);align-items:start;padding-block:clamp(34px,4.5vw,54px)}
@media(max-width:980px){.art{grid-template-columns:1fr;gap:38px}}

.resumen{
  background:var(--gold-soft);border:1px solid rgba(216,158,39,.3);border-left:4px solid var(--gold);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:22px 26px;margin-bottom:32px;
}
.resumen strong{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px}
.resumen p{font-size:17px;line-height:1.6;color:var(--ink);font-weight:500;max-width:none}

.player{
  position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;
  background:var(--navy);box-shadow:var(--sh-h);cursor:pointer;margin-bottom:12px;
}
.player img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .4s,transform .6s var(--ease)}
.player:hover img{opacity:.62;transform:scale(1.03)}
.player iframe{width:100%;height:100%;border:0;display:block}
.player .pl-big{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.player .pl-big i{
  width:78px;height:78px;border-radius:50%;background:var(--gold);display:grid;place-items:center;
  box-shadow:0 12px 36px rgba(216,158,39,.45);transition:transform .35s var(--ease);
}
.player:hover .pl-big i{transform:scale(1.08)}
.player .pl-big i::after{content:"";border-left:23px solid var(--navy);border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.pie{font-size:12.5px;color:var(--mut);margin-bottom:34px;font-weight:600}

.prosa h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:42px 0 14px;scroll-margin-top:100px}
.prosa h3{margin:28px 0 10px}
.prosa p{margin-bottom:16px;font-size:17px;line-height:1.75;color:var(--body);max-width:68ch}
.prosa h2+p,.prosa h3+p{margin-top:0}

.lat{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.box.cream{background:var(--cream)}
.box.navy{background:var(--navy);border-color:var(--navy)}
.box h4{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:15px}
.box.navy h4{color:var(--gold)}
.box.navy p{color:rgba(255,255,255,.7);font-size:14.5px;margin-bottom:16px}
.idx{display:flex;flex-direction:column;gap:9px;font-size:14px}
.idx a{border-left:2px solid var(--line);padding-left:12px;color:var(--body);font-weight:600;transition:.3s}
.idx a:hover{color:var(--gold-ink);border-color:var(--gold)}
.datos{display:flex;flex-direction:column;gap:11px;font-size:14px}
.datos div{display:flex;justify-content:space-between;gap:14px}
.datos dt{color:var(--mut);font-weight:600}
.datos dd{text-align:right;font-weight:800;color:var(--ink)}
.datos dd a{color:var(--gold-ink)}

/* ---------- pie ---------- */
.pie-web{background:var(--navy);color:rgba(255,255,255,.6);padding-block:clamp(48px,6vw,72px) 28px;font-size:14px}
.pie-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:34px}
@media(max-width:820px){.pie-grid{grid-template-columns:1fr;gap:32px}}
.pie-web .logo-pie{background:var(--white);border-radius:var(--r-s);padding:12px 18px;display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}
.pie-web .logo-pie img{height:46px}
.pie-web .logo-pie .fb{font-weight:800;color:var(--navy);font-size:16px;letter-spacing:-.03em;line-height:1.15}
.pie-web .logo-pie .fb i{display:block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink)}
.pie-web h4{color:var(--white);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.pie-web ul{display:flex;flex-direction:column;gap:10px}
.pie-web a:hover{color:var(--gold)}
.redes{display:flex;gap:10px;margin-top:20px}
.redes a{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d);
  display:grid;place-items:center;transition:.3s var(--ease);
}
.redes a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.redes svg{width:17px;height:17px;fill:currentColor}
.redes a:hover svg{fill:var(--navy)}
.pie-legal{
  border-top:1px solid var(--line-d);padding-top:22px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:12.5px;
}
.pie-legal .lk{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- formatos: ver, escuchar, leer ----------
   La misma entrevista existe en tres sitios (YouTube, podcast y texto).
   Hasta ahora estaban repartidos; aquí conviven en una sola página y en
   una sola URL, que es lo que concentra el posicionamiento. */
.formatos{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;
  padding:6px;background:var(--cream);border:1px solid var(--line);border-radius:100px;width:fit-content;
}
.formatos button{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;
  font-size:13.5px;font-weight:700;color:var(--body);transition:.3s var(--ease);
}
.formatos button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.formatos button:hover{color:var(--ink)}
.formatos button.on{background:var(--navy);color:var(--white)}
.formatos button[disabled]{opacity:.38;cursor:not-allowed}
.formatos button[disabled]:hover{color:var(--body)}
.fmt-panel[hidden]{display:none}
.audio{
  background:var(--navy);border-radius:var(--r);padding:26px;box-shadow:var(--sh-h);margin-bottom:12px;
}
.audio p{color:rgba(255,255,255,.62);font-size:14px;margin-bottom:16px}
.audio iframe{width:100%;border:0;border-radius:12px;display:block}
.a-leer{
  display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:100px;
  background:var(--gold-soft);border:1px solid rgba(216,158,39,.35);color:var(--gold-ink);
  font-size:14px;font-weight:700;margin-bottom:12px;
}

/* iconos de formato en la tarjeta del directorio */
.fmt{display:flex;gap:6px;margin-left:auto}
.fmt span{
  width:22px;height:22px;border-radius:6px;background:var(--cream);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--mut);
}
.fmt span svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2}
.card:hover .fmt span{border-color:rgba(216,158,39,.4);color:var(--gold-ink)}

/* ---------- página de temporadas ---------- */
.temps{display:flex;flex-direction:column;gap:clamp(30px,4vw,52px)}
.temp{border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3vw,36px);background:var(--white);box-shadow:var(--sh)}
.temp header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.temp header .eyebrow{margin-bottom:6px}
.temp header h2{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.temp-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 20px}
.temp-lista a{display:block;padding:9px 12px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--body);transition:.25s}
.temp-lista a b{color:var(--mut);font-weight:700;font-size:12.5px;margin-right:7px}
.temp-lista a:hover{background:var(--gold-soft);color:var(--gold-ink)}
.temp-lista a:hover b{color:var(--gold-ink)}

/* ==========================================================================
   PORTADA v3 — el río, los contadores y la protagonista
   Todo lo de aquí anima o coloca cosas que YA están en el HTML servido.
   Ningún enlace nace del JavaScript: ese fue el error de la web anterior.
   ========================================================================== */

/* --- hero: ahora a una columna, el río hace de imagen --- */
.hero-v3{padding-block:clamp(56px,7vw,96px) 0;overflow:hidden}
.hero-v3-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,64px);align-items:end}
@media(max-width:980px){.hero-v3-grid{grid-template-columns:1fr;gap:30px;align-items:start}}
.hero-v3 h1{font-size:clamp(2.2rem,4.6vw,4rem);max-width:14ch;margin-bottom:0;text-wrap:balance}
.hero-v3 .lead{max-width:46ch;margin-bottom:30px}
.hero-v3-b .stats{padding-bottom:0;margin-top:32px}
/* la palabra que se escribe sola */
/* min-width: para que al borrarse la palabra el titular no se desmonte */
.tw{color:var(--gold);border-right:3px solid var(--gold);padding-right:4px;white-space:nowrap;display:inline-block;min-width:5.5ch;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{border-color:transparent}}
.stats{display:flex;gap:clamp(28px,5vw,52px);flex-wrap:wrap;border-top:1px solid var(--line-d);margin-top:40px;padding-top:28px;padding-bottom:46px}
.stat b{display:block;font-size:clamp(32px,4vw,42px);font-weight:800;color:var(--gold);line-height:1;margin-bottom:7px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.stat span{font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.13em;text-transform:uppercase;font-weight:700}

/* --- el río: dos filas de cabeceras COMPLETAS, nunca recortadas --- */
.rio{position:relative;padding-block:clamp(40px,5vw,60px) clamp(48px,6vw,72px);z-index:2}
.rio .fila{display:flex;gap:18px;width:max-content;animation:fluir 90s linear infinite}
.rio .fila.f2{animation-direction:reverse;animation-duration:110s;margin-top:18px}
.rio:hover .fila,.rio:focus-within .fila{animation-play-state:paused}
@keyframes fluir{to{transform:translateX(-50%)}}
.ficha-rio{position:relative;width:clamp(260px,24vw,380px);aspect-ratio:16/9;border-radius:16px;overflow:hidden;flex:none;background:var(--navy-2);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .4s var(--ease)}
.ficha-rio:hover,.ficha-rio:focus-visible{transform:translateY(-6px) scale(1.02)}
.ficha-rio:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ficha-rio img{width:100%;height:100%;object-fit:cover}
.ficha-rio .velo{position:absolute;inset:auto 0 0 0;padding:26px 14px 10px;background:linear-gradient(transparent,rgba(6,13,26,.88));display:flex;align-items:flex-end;justify-content:space-between;gap:10px;opacity:0;transition:opacity .35s}
.ficha-rio:hover .velo,.ficha-rio:focus-visible .velo{opacity:1}
.ficha-rio .velo b{color:#fff;font-size:13.5px;font-weight:800;line-height:1.25}
.ficha-rio .velo span{color:var(--gold);font-size:11px;font-weight:700;white-space:nowrap}

/* --- temporada en curso: una protagonista y las demás en miniatura --- */
.destacada{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:center;background:var(--cream);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
@media(max-width:900px){.destacada{grid-template-columns:1fr}}
.destacada .foto{aspect-ratio:16/9;position:relative;display:block;background:var(--navy-2)}
.destacada .foto img{width:100%;height:100%;object-fit:cover}
.destacada .texto{padding:clamp(24px,3.4vw,52px)}
.destacada .texto h3{font-size:clamp(1.4rem,2.4vw,2rem);margin:4px 0 12px;letter-spacing:-.03em}
.destacada .texto>p{color:var(--mut);margin-bottom:22px}
.miniaturas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.miniaturas a{width:96px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.55;transition:.3s;display:block}
.miniaturas a img{width:100%;height:100%;object-fit:cover}
.miniaturas a.on{border-color:var(--gold);opacity:1}
.miniaturas a:hover,.miniaturas a:focus-visible{opacity:1}
/* cuando la protagonista está montada, la rejilla original se esconde:
   sigue en el HTML, que es lo que importa para Google */
#rejilla-temporada[hidden]{display:none}

/* --- el muro: aperitivo del directorio --- */
/* Rejilla, no columnas: con las cabeceras ya todas a 16:9 el muro cierra en
   rectángulo perfecto. Son 24 piezas justo porque 24 es divisible entre 4, 3
   y 2, las tres anchuras: nunca queda una fila coja. */
.muro{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1080px){.muro{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.muro{grid-template-columns:repeat(2,1fr)}}
.muro a{display:block;border-radius:14px;overflow:hidden;position:relative;box-shadow:var(--sh);transition:transform .35s var(--ease)}
.muro a:hover,.muro a:focus-visible{transform:translateY(-4px)}
/* height:auto es imprescindible: sin él, el atributo height="225" del HTML
   se aplica como altura fija mientras el ancho se estira al 100%, y la cara
   sale deformada. El aspect-ratio deja todas las cabeceras iguales aunque
   alguna no venga exacta a 16:9. */
.muro img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
/* El muro es un escaparate: las cabeceras YA llevan el nombre y el oficio
   escritos encima. Encima de eso no va nada. El nombre sigue en el HTML,
   oculto, para lectores de pantalla y buscadores. */
.muro .tag,.muro .mv{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muro-pie{margin-top:22px;font-size:14px;color:var(--mut)}
.muro-pie a{color:var(--gold-ink);font-weight:700;border-bottom:1px solid rgba(216,158,39,.4)}

/* --- quien pide menos movimiento, no lo tiene --- */
@media (prefers-reduced-motion:reduce){
  .rio .fila{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .rio .fila.f2{margin-top:18px}
  .tw{animation:none;border-right:0;padding-right:0}
  .ficha-rio,.muro a{transition:none}
}