/* =========================================================
   PORTADA — hero por escenas + franja superior rotativa
   =========================================================
   Este archivo reemplaza el antiguo .destacado-imagen, que era una sola
   imagen de fondo escrita en css/style.css y no se podia administrar.

   Geometria:

       1201px o mas  →  alto 80vh, imagen cubriendo
       hasta 1200px  →  aspect-ratio 3/4 (vertical de movil, tipo
                        publicacion de Instagram: 3 de ancho por 4 de alto)

   Lo unico que se agrega encima es el contenido y el velo de legibilidad.
   ========================================================= */

/* -------------------------
   FRANJA SUPERIOR
-------------------------- */

.franja-superior {
  overflow: hidden;
  min-height: 36px;
}

/* La pista es un grid de una sola celda: todos los avisos ocupan la misma
   casilla, asi el alto de la franja nunca cambia al rotar y no hay salto
   de layout. */
.franja-superior-pista {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 20px;
}

.franja-superior-item {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  /* visibility se cambia despues de la transicion de salida, para que un
     aviso que se va no quede enfocable ni lo lea el lector de pantalla
     mientras se va. */
  visibility: hidden;
  transition: opacity 0.45s ease, transform 0.45s ease,
    visibility 0s linear 0.45s;
  pointer-events: none;
}

.franja-superior-item.is-activo {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
  pointer-events: auto;
}

.franja-superior-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 3px;
}

/* La pista es grid: todos los avisos ocupan la misma celda, asi el alto
   de la franja nunca cambia y no hay salto de layout al rotar. */
.franja-superior-pista > .franja-superior-item {
  grid-area: 1 / 1;
}

@media (max-width: 768px) {
  .franja-superior-item {
    font-size: 0.78em;
    letter-spacing: 0.05em;
  }
}

/* -------------------------
   HERO
-------------------------- */

.hero-portada {
  position: relative;
  width: 100%;
  margin-top: 60px;
  overflow: hidden;
  background-color: #14100c;
  isolation: isolate;

  /* El body es una columna flex de altura fija (css/style.css: html, body
     height 100% + body display flex). Como flex item, esta section se
     encolaba para que todo cupiera en una pantalla. Pero al llevar
     overflow:hidden su min-height:auto vale 0 (regla de Flexbox) y no
     podia oponer un alto minimo, asi que terminaba aplastada a 0 px: el
     medio midia 720 px y overflow:hidden lo recortaba entero, por eso el
     hero no se veia aunque el JSON y las imagenes llegaran bien.

     flex-shrink:0 le devuelve su alto natural y deja que la pagina siga
     desplazandose con scroll, que es lo que se busca. No se toca
     overflow:hidden porque hace falta para el crossfade. */
  flex-shrink: 0;
}

.hero-portada-medio {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 420px;
}

.hero-escena {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  /* visibility se cambia despues de la transicion de salida, para que una
     escena que se va no quede hauntada por el lector de pantalla. Al
     entrar se hace visible de inmediato y es la opacidad la que aparece. */
  visibility: hidden;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 900ms;
  will-change: opacity;
  pointer-events: none;
}

.hero-escena.is-activo {
  opacity: 1;
  visibility: visible;
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  pointer-events: auto;
}

.hero-escena picture,
.hero-escena img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-escena img {
  object-fit: cover;
  object-position: center;
}

/* Las escenas que todavia no se muestran empiezan un pelo desplazadas:
   al entrar solo se opacidad, el imagen nunca "salta". */
.hero-escena img {
  transform: scale(1.04);
  transition: transform 7s linear;
}

.hero-escena.is-activo img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-escena,
  .hero-escena img,
  .franja-superior-item {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  .hero-escena img,
  .hero-escena.is-activo img {
    transform: none;
  }
}

/* Velo: da contraste al texto sin oscurecer de más la fotografía. */
.hero-portada-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(10, 8, 6, 0.72) 0%,
      rgba(10, 8, 6, 0.34) 34%,
      rgba(10, 8, 6, 0) 62%
    ),
    linear-gradient(
      to right,
      rgba(10, 8, 6, 0.55) 0%,
      rgba(10, 8, 6, 0.12) 46%,
      rgba(10, 8, 6, 0) 70%
    );
}

.hero-portada-contenido {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: min(720px, 100%);
  padding: 0 clamp(20px, 5vw, 72px) clamp(34px, 6vh, 72px);
  color: #ffffff;
  pointer-events: none;
}

.hero-portada-contenido > * {
  pointer-events: auto;
}

.hero-titulo {
  margin: 0;
  font-family: var(--fuente-delgada-moderna, "Segoe UI", sans-serif);
  font-size: clamp(2.1rem, 6.2vw, 4.6rem);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero-subtitulo {
  margin: 0;
  max-width: 46ch;
  font-family: var(--fuente-delgada-moderna, "Segoe UI", sans-serif);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 13px 30px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(3px);
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

.hero-cta:hover,
.hero-cta:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: #14100c;
}

.hero-cta[hidden] {
  display: none;
}

/* Indicadores 01 02 03 */
.hero-indicadores {
  position: absolute;
  z-index: 3;
  right: clamp(20px, 5vw, 72px);
  bottom: clamp(34px, 6vh, 72px);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-indicadores[hidden] {
  display: none;
}

.hero-indicador {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: color 220ms ease;
}

.hero-indicador::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 320ms ease, color 220ms ease;
}

.hero-indicador:hover,
.hero-indicador:focus-visible {
  color: #ffffff;
}

.hero-indicador.is-activo {
  color: #ffffff;
}

.hero-indicador.is-activo::after {
  width: 30px;
}

.hero-indicador:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
}

/* -------------------------
   MOVIL Y TABLET
   La caja cuadrada (9/9) es la composicion actual de la portada en
   pantallas angostas y se conserva. Solo cambia la posicion del texto
   y la escala del indicador.
-------------------------- */

@media (max-width: 1200px) {
  .hero-portada {
    margin-top: 25px;
  }

  .hero-portada-medio {
    height: auto;
    min-height: 0;
    /* 3 de ancho por 4 de alto: la caja vertical de movil. Como el alto
       sale de la relacion y no de una medida fija, el hero se adapta solo a
       cualquier ancho (320, 360, 390, 430...) sin nada escrito a mano. La
       imagen mantiene object-fit:cover, asi que cubre la caja sin
       estirarse. */
    aspect-ratio: 3 / 4;
  }

  .hero-portada-contenido {
    gap: 11px;
    padding: 0 22px 34px;
  }

  .hero-titulo {
    font-size: clamp(1.85rem, 8vw, 2.9rem);
  }

  .hero-subtitulo {
    font-size: 0.95rem;
  }

  .hero-cta {
    padding: 11px 22px;
    font-size: 0.74rem;
    letter-spacing: 0.13em;
  }

  .hero-portada-velo {
    background:
      linear-gradient(
        to top,
        rgba(10, 8, 6, 0.76) 0%,
        rgba(10, 8, 6, 0.38) 38%,
        rgba(10, 8, 6, 0) 68%
      );
  }

  .hero-indicadores {
    right: 22px;
    bottom: 18px;
    gap: 11px;
  }

  .hero-indicador {
    font-size: 0.68rem;
  }

  .hero-indicador.is-activo::after {
    width: 22px;
  }
}

/* Pantallas muy angostas: el indicador completo (01 02 03 04) no cabe al
   lado del titulo, asi que baja a su propia fila. */
@media (max-width: 560px) {
  .hero-indicadores {
    right: auto;
    left: 22px;
    bottom: 16px;
  }

  .hero-portada-contenido {
    padding-bottom: 58px;
  }
}

@media (max-width: 380px) {
  .hero-titulo {
    font-size: 1.7rem;
  }

  .hero-subtitulo {
    font-size: 0.88rem;
  }

  .hero-cta {
    padding: 10px 18px;
    font-size: 0.7rem;
  }

  .hero-portada-contenido,
  .hero-indicadores {
    padding-left: 16px;
  }

  .hero-indicadores {
    left: 16px;
  }
}