/* portada.css — sólo la página de entrada. */

/* ─── Cabecera ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: saturate(.72) contrast(1.06);
}
.hero-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,13,16,.86) 0%, rgba(7,13,16,.28) 32%,
                            rgba(7,13,16,.62) 68%, rgba(7,13,16,.97) 100%),
    radial-gradient(120% 78% at 50% 108%, rgba(7,13,16,.9), transparent 62%);
}

.hero-txt { padding: var(--r7) 0 calc(var(--r7) + var(--r5)); }

.hero-ojo {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--brillo); margin: 0 0 var(--r4);
  opacity: 0; animation: subeSuave .9s .15s var(--curva) forwards;
}

.hero-h1 {
  font-size: var(--t-3xl);
  font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 144;
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: .92;
  color: var(--papel);
  margin: 0 0 var(--r4);
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.hero-h1 em {
  display: block;
  font-style: normal;
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
  font-weight: 500;
  color: var(--ocre-alto);
  letter-spacing: -.02em;
}
.hero-h1 > *, .hero-h1 { opacity: 0; animation: subeSuave 1.1s .3s var(--curva) forwards; }

.hero-lead {
  max-width: 46ch;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--texto);
  margin: 0 0 var(--r5);
  opacity: 0; animation: subeSuave 1s .5s var(--curva) forwards;
}
.hero-lead b { color: var(--brillo-alto); font-weight: 500; }

.hero-bts {
  display: flex; flex-wrap: wrap; gap: var(--r3);
  opacity: 0; animation: subeSuave 1s .68s var(--curva) forwards;
}

@keyframes subeSuave {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.hero-baja {
  position: absolute; left: 50%; bottom: var(--r4);
  transform: translateX(-50%);
  width: 26px; height: 44px;
  border: 1px solid var(--linea-viva); border-radius: 99px;
  display: grid; place-items: start center;
  padding-top: 8px;
  opacity: 0; animation: subeSuave 1s 1.1s var(--curva) forwards;
}
.hero-baja span {
  width: 3px; height: 7px; border-radius: 99px; background: var(--brillo);
  animation: gota 1.9s var(--curva) infinite;
}
@keyframes gota {
  0%, 12%  { transform: translateY(0); opacity: 0; }
  25%      { opacity: 1; }
  70%,100% { transform: translateY(19px); opacity: 0; }
}

/* ─── Secciones ───────────────────────────────────────────────────────── */

.seccion { padding: var(--r7) 0; position: relative; }

.t-grande {
  font-size: var(--t-2xl);
  font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 90;
  color: var(--papel);
  margin: var(--r3) 0 var(--r5);
}
.lead {
  font-size: var(--t-lg); line-height: 1.5; color: var(--texto);
  max-width: 52ch;
}
.lead.centrado { margin-inline: auto; text-align: center; }
.mini { font-size: var(--t-sm); color: var(--texto-2); max-width: 56ch; }
.mini.centrado { margin-inline: auto; text-align: center; }
.mini i { color: var(--texto); font-style: italic; }

.dos-col {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--r6);
  align-items: start;
}
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; gap: var(--r5); } }

/* Cifras */
.cifras { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.cifra {
  background: var(--agua-850);
  padding: var(--r4) var(--r4) var(--r3);
  display: flex; align-items: baseline; gap: var(--r3);
  position: relative; overflow: hidden;
}
.cifra b {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 144;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 300;
  line-height: 1; color: var(--papel);
  min-width: 2.6ch; text-align: right;
  font-variant-numeric: tabular-nums;
}
.cifra span { font-size: var(--t-sm); color: var(--texto-2); line-height: 1.3; }
.cifra.destaca b { color: var(--ocre-alto); }
.cifra.destaca span { color: var(--texto); }
.cifra.duda b { color: var(--rubrica); filter: brightness(1.5); }

/* ─── El río de los nombres ───────────────────────────────────────────── */

.seccion-rio { padding-bottom: var(--r6); }

.rio-nombres {
  position: relative;
  margin: var(--r6) 0 var(--r5);
  padding: 0 var(--r4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rio-pista {
  position: relative;
  display: flex; align-items: stretch;
  gap: 0;
  min-width: max-content;
  margin-inline: auto;
  width: fit-content;
}
.rio-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.rio-n {
  position: relative;
  scroll-snap-align: center;
  width: clamp(150px, 15vw, 210px);
  padding: var(--r5) var(--r3) var(--r5);
  background: none; border: 0; cursor: pointer;
  text-align: center;
  color: var(--texto-2);
  transition: color .25s var(--curva);
}
.rio-n:hover, .rio-n.act { color: var(--papel); }

.rio-n-f {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 90;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 400; line-height: 1;
  color: inherit;
  transition: transform .3s var(--curva), color .25s var(--curva);
}
.rio-n:hover .rio-n-f, .rio-n.act .rio-n-f { transform: translateY(-4px); }
.rio-n.act .rio-n-f { color: var(--ocre-alto); }

.rio-n-d {
  display: block; margin-top: .5em;
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3);
}
.rio-n-p {
  display: block;
  width: 9px; height: 9px; margin: var(--r3) auto 0;
  border-radius: 99px;
  background: var(--agua-500);
  border: 1px solid var(--brillo-bajo);
  transition: background .25s var(--curva), transform .25s var(--curva);
}
.rio-n.act .rio-n-p { background: var(--ocre); border-color: var(--ocre-alto); transform: scale(1.5); }

.rio-nota {
  max-width: 62ch; margin: 0 auto;
  min-height: 5.2em;
  text-align: center;
  font-size: var(--t-md); line-height: 1.55;
  color: var(--texto);
  transition: opacity .3s var(--curva);
}
.rio-nota.cambia { opacity: 0; }

.nota-rio {
  max-width: 60ch; margin: var(--r5) auto 0;
  text-align: center; font-size: var(--t-sm); color: var(--texto-2);
}

/* ─── Tarjetas de vista ───────────────────────────────────────────────── */

/* Siete tarjetas nunca llenan una cuadrícula regular. En vez de dejar el
 * hueco, la primera —que además es la vista principal— ocupa dos columnas:
 * ocho huecos, ocho llenos, tanto a cuatro columnas como a dos. */
.rejilla-v {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--r5);
  background: var(--linea);
  border-block: 1px solid var(--linea);
}
.rejilla-v > .tarjeta:first-child { grid-column: span 2; }
.rejilla-v > .tarjeta:first-child h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); }

@media (max-width: 1180px) { .rejilla-v { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .rejilla-v { grid-template-columns: 1fr; }
  .rejilla-v > .tarjeta:first-child { grid-column: span 1; }
}
.tarjeta {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 268px;
  padding: var(--r4);
  background: var(--agua-850);
  color: var(--texto-2); text-decoration: none;
  overflow: hidden;
  transition: color .3s var(--curva);
}
/* Las rutas van aquí y no en un `style=` del HTML a propósito: una url()
 * dentro de una variable CSS la resuelve el navegador contra la hoja de
 * estilo donde se sustituye, no contra el documento, y las imágenes se
 * buscaban en css/media/. Declaradas así no hay ambigüedad. */
.tarjeta[data-img='arbol']::before      { background-image: url('../media/hero-poster.jpg'); }
.tarjeta[data-img='rio']::before        { background-image: url('../media/cuenca.jpg'); }
.tarjeta[data-img='mapa']::before       { background-image: url('../media/pueblo.jpg'); }
.tarjeta[data-img='tiempo']::before     { background-image: url('../media/rueda.jpg'); }
.tarjeta[data-img='nombres']::before    { background-image: url('../media/pergamino.jpg'); }
.tarjeta[data-img='parentesco']::before { background-image: url('../media/manantial-a.jpg'); }
.tarjeta[data-img='cuaderno']::before   { background-image: url('../media/carta.jpg'); }

.tarjeta::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.12);
  transition: opacity .55s var(--curva), transform .8s var(--curva);
  filter: saturate(.5);
}
.tarjeta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,13,16,.5), rgba(7,13,16,.93));
  opacity: 0; transition: opacity .55s var(--curva);
}
.tarjeta:hover::before, .tarjeta:focus-visible::before { opacity: .5; transform: scale(1); }
.tarjeta:hover::after,  .tarjeta:focus-visible::after  { opacity: 1; }
.tarjeta:hover, .tarjeta:focus-visible { color: var(--texto); }

.tarjeta-n {
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--texto-3); letter-spacing: .12em;
}
.tarjeta h3 {
  margin: var(--r2) 0 var(--r3);
  font-size: var(--t-xl);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60;
  color: var(--papel);
}
.tarjeta p { font-size: var(--t-sm); line-height: 1.5; margin: 0; }
.tarjeta-i {
  margin-top: auto; padding-top: var(--r4);
  font-size: var(--t-xs); font-family: var(--mono);
  color: var(--ocre); letter-spacing: .06em;
  display: flex; align-items: center; gap: .5em;
}
.tarjeta-i::after {
  content: '→'; transition: transform .3s var(--curva);
}
.tarjeta:hover .tarjeta-i::after { transform: translateX(5px); }

/* ─── Spot ────────────────────────────────────────────────────────────── */

.seccion-spot { text-align: center; }
.seccion-spot .t-grande { text-align: center; }
.spot-caja {
  margin: var(--r5) auto var(--r4);
  max-width: 940px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--agua-800);
}
.spot-v { display: block; width: 100%; height: auto; }

/* ─── Bloque de papel ─────────────────────────────────────────────────── */

.seccion-falta { padding-bottom: var(--r6); }
.bloque-papel {
  padding: var(--r6) clamp(var(--r4), 5vw, var(--r6));
  max-width: 72ch;
}
.bloque-papel h2 {
  font-size: var(--t-xl);
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60;
  margin: var(--r2) 0 var(--r4);
}
.bloque-papel p { color: var(--tinta-2); }
.bloque-papel .cierre {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 40;
  font-size: var(--t-lg); line-height: 1.35; color: var(--tinta);
  border-left: 2px solid var(--rubrica);
  padding-left: var(--r3);
  margin: var(--r5) 0;
}

/* ─── Móvil ───────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  :root { --r7: 62px; --r6: 40px; }
  .hero-txt { padding-bottom: var(--r6); }
  .cifra b { font-size: 1.7rem; }
}