/* ============================================================
   PORTADA
   Fondo fijo —la playa— y un riel de tarjetas escalonadas:
   la primera grande, las siguientes cada vez más pequeñas.
   ============================================================ */

.portada{
  position:relative;
  height:100svh;
  min-height:680px;
  overflow:hidden;
  color:var(--texto-inv);
  background:var(--verde-noche);
  isolation:isolate;

  /* Anchos del riel. El JS los lee para saber cuánto desplazar. */
  --carta-0: 310px;   /* la activa            */
  --carta-1: 205px;
  --carta-2: 176px;
  --carta-3: 156px;   /* y también las que ya pasaron */
  --carta-hueco: 14px;
}

/* ---------- Fondo ---------- */
.portada-fondo{
  position:absolute; inset:-6%;
  z-index:0;
  will-change:transform;
}
/* La ensenada es una foto clara y de agua turquesa: se oscurece poco
   en conjunto y el peso se carga al lado izquierdo, que es donde va el
   texto. Así el color del agua sigue leyéndose. */
.portada-fondo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(1.04) contrast(1.04) brightness(.97);
}
.portada-velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(10,26,22,.93) 0%, rgba(10,26,22,.72) 30%, rgba(10,26,22,.2) 58%, rgba(10,26,22,.06) 78%, rgba(10,26,22,.3) 100%),
    linear-gradient(180deg, rgba(10,26,22,.55) 0%, transparent 22%, rgba(10,26,22,.72) 100%);
}

/* ---------- Palabras fantasma ---------- */
.fantasma{
  position:absolute; z-index:2;
  font-family:var(--tipo-marca);
  font-weight:var(--peso-marca);
  color:rgba(249,246,239,.07);
  letter-spacing:-.02em;
  line-height:.82;
  white-space:nowrap;
  pointer-events:none; user-select:none;
  will-change:transform;
}
.fantasma-alto{ top:7%;  left:-2%;   font-size:clamp(4rem,12vw,10rem); }
.fantasma-bajo{ bottom:2%; left:-3%; font-size:clamp(4.5rem,14vw,12rem); }

/* ---------- Retícula ---------- */
.portada-red{
  position:relative; z-index:3;
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  align-items:center;
  gap:clamp(28px,5vw,72px);
}

.portada-texto{ max-width:34rem; }
.portada-texto .etiqueta{ color:var(--hueso-medio); margin-bottom:var(--e-5); }

.titular{
  font-family:var(--tipo-display);
  font-size:var(--t-h1);
  font-weight:var(--peso-display);
  line-height:.94;
  letter-spacing:var(--tracking-display);
  margin-bottom:var(--e-6);
}
.titular .linea{ display:block; overflow:hidden; padding-bottom:.2em; margin-bottom:-.14em; }
.titular .linea > span{ display:block; }
/* La segunda línea lleva la letra del logo */
.titular .voz{
  font-family:var(--tipo-marca);
  font-weight:var(--peso-marca);
  color:var(--amarillo);
  letter-spacing:-.01em;
}

.portada-bajada{
  font-size:var(--t-base);
  color:var(--hueso-medio);
  max-width:38ch;
  margin-bottom:var(--e-7);
}
/* Los dos botones se reparten la fila cuando caben y saltan a una línea
   completa cada uno cuando no. Sin medidas fijas: lo decide el contenido.
   Esto importa entre 900 y 1180px, donde la columna del hero se estrecha
   pero el sitio todavía no está en una sola columna. */
.portada-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-3);
  width:100%;
}
/* flex-shrink en 0 a propósito: con shrink los botones se APLASTAN para
   caber en una fila, y como el texto va en nowrap con overflow oculto,
   el segundo se queda sin texto visible. Sin shrink, baja de línea. */
.portada-acciones .btn{ flex:1 0 auto; }


/* ============================================================
   RIEL DE TARJETAS
   ============================================================ */
.riel{
  position:relative;
  height:min(60vh,460px);
  cursor:grab;
  /* El riel nunca puede empujar el ancho de su contenedor: la pista es
     más larga que la pantalla por diseño y se recorta aquí. */
  overflow:hidden;
  min-width:0;
  max-width:100%;
  /* El desvanecido del borde derecho es sutil: solo insinúa que
     hay más tarjetas, no las esconde. */
  -webkit-mask-image:linear-gradient(90deg,#000 92%,rgba(0,0,0,.35) 100%);
          mask-image:linear-gradient(90deg,#000 92%,rgba(0,0,0,.35) 100%);
}
.riel:active{ cursor:grabbing; }

.riel-pista{
  display:flex;
  align-items:flex-end;
  gap:var(--carta-hueco);
  height:100%;
  will-change:transform;
  transition:transform .95s var(--curva);
}

.riel-carta{
  position:relative;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:var(--radio-3);
  border:1px solid rgba(249,246,239,.22);
  box-shadow:var(--sombra-3);
  transition:width .95s var(--curva), height .95s var(--curva),
             opacity .7s var(--curva-suave), filter .7s var(--curva-suave);

  /* Estado por defecto = tarjeta ya vista, a la izquierda.
     Se distingue por tamaño, no por desaparecer: una foto
     medio borrada se lee como un error, no como jerarquía. */
  width:var(--carta-3); height:46%;
  opacity:.62; filter:brightness(.82);
}
.riel-carta img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.3s var(--curva);
}
.riel-carta::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(10,26,22,.9));
}

/* Escalonado: la activa manda y las siguientes decrecen */
.riel-carta.activa{
  width:var(--carta-0); height:100%;
  opacity:1; filter:none;
  border-color:rgba(255,203,36,.55);
  box-shadow:0 40px 110px rgba(10,26,22,.55), 0 0 0 1px rgba(255,203,36,.18);
}
.riel-carta.activa img{ transform:scale(1); }
.riel-carta.n1{ width:var(--carta-1); height:84%; opacity:1;   filter:brightness(.97); }
.riel-carta.n2{ width:var(--carta-2); height:72%; opacity:.96; filter:brightness(.92); }
.riel-carta.n3{ width:var(--carta-3); height:62%; opacity:.9;  filter:brightness(.87); }

.riel-info{
  position:absolute; z-index:2;
  left:0; right:0; bottom:0;
  padding:var(--e-5) var(--e-4) var(--e-4);
}
.riel-info strong{
  display:block;
  font-family:var(--tipo-display);
  font-size:1.05rem; font-weight:500;
  letter-spacing:-.01em;
  color:var(--hueso);
  line-height:1.2;
}
.riel-info small{
  display:block; margin-top:5px;
  font-size:var(--t-micro);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--amarillo);
  opacity:0; transform:translateY(8px);
  transition:opacity var(--vel-3) var(--curva), transform var(--vel-3) var(--curva);
}
.riel-carta.activa .riel-info small{ opacity:1; transform:none; }
/* En las pequeñas el texto estorba más de lo que aporta */
.riel-carta:not(.activa):not(.n1) .riel-info{ opacity:0; transition:opacity var(--vel-2); }


/* ---------- Controles ---------- */
.portada-pie{
  position:absolute; z-index:4;
  left:0; right:0; bottom:clamp(20px,3.5vh,40px);
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--e-5);
  pointer-events:none;
}
.portada-pie > *{ pointer-events:auto; }

.portada-cue{
  display:flex; align-items:center; gap:var(--e-3);
  font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--hueso-tenue);
}
.portada-cue i{
  display:block; width:52px; height:1px;
  background:rgba(249,246,239,.4);
  position:relative; overflow:hidden;
}
.portada-cue i::after{
  content:""; position:absolute; inset:0;
  background:var(--acento-relleno);
  transform:translateX(-100%);
  animation:cue 2.6s var(--curva-duo) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

.riel-mando{
  display:flex; align-items:center; gap:var(--e-4);
  margin-left:auto;
}
.riel-flechas{ display:flex; gap:var(--e-2); }
.riel-flecha{
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(249,246,239,.3);
  background:rgba(10,26,22,.3);
  backdrop-filter:blur(10px);
  color:var(--hueso);
  display:grid; place-items:center;
  transition:background var(--vel-2), color var(--vel-2), border-color var(--vel-2), transform var(--vel-2) var(--curva);
}
.riel-flecha:hover{
  background:var(--acento-relleno); color:var(--hueso);
  border-color:var(--acento-relleno); transform:scale(1.06);
}

.portada-contador{
  display:flex; align-items:center; gap:var(--e-4);
  font-family:var(--tipo-display);
  font-size:var(--t-menor);
  color:var(--hueso-tenue);
  font-variant-numeric:tabular-nums;
}
.portada-contador b{
  font-size:1.5rem; font-weight:400;
  color:var(--hueso);
  min-width:2.1ch; text-align:right;
}
.portada-contador .rayita{
  display:block; width:clamp(56px,10vw,150px); height:2px;
  background:rgba(249,246,239,.24);
  border-radius:2px;
  position:relative; overflow:hidden;
}
.portada-contador .rayita i{
  position:absolute; left:0; top:0; height:100%; width:0;
  background:var(--amarillo);
  border-radius:2px;
  transition:width .95s var(--curva);
}


/* ---------- Adaptación ---------- */
@media (max-width:1180px){
  .portada{ --carta-0:270px; --carta-1:180px; --carta-2:156px; --carta-3:138px; }
}
@media (max-width:900px){
  .portada{
    height:auto; min-height:0;
    padding-block:clamp(124px,18vh,180px) clamp(40px,7vh,72px);
    --carta-0:250px; --carta-1:168px; --carta-2:146px; --carta-3:130px;
  }
  /* minmax(0,1fr) y no «1fr»: un item de grid tiene min-width:auto, así
     que con «1fr» el riel —que mide más de 1000px de tarjetas— estira la
     columna y arrastra consigo todo lo demás fuera de la pantalla. */
  .portada-red{ grid-template-columns:minmax(0,1fr); gap:var(--e-8); }
  .portada-texto{ max-width:none; }
  .riel{ height:min(44vh,340px); -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
         mask-image:linear-gradient(90deg,#000 88%,transparent 100%); }
  .fantasma-alto{ display:none; }
  .portada-pie{ position:static; margin-top:var(--e-6); padding-inline:var(--margen-x); }
  .portada-cue{ display:none; }
}
@media (max-width:620px){
  .portada{ --carta-0:200px; --carta-1:124px; --carta-2:108px; --carta-3:96px; --carta-hueco:10px; }
  .riel{ height:290px; }
  .riel-mando{ width:100%; justify-content:space-between; }
}