/* Pantalla de carga, cabecera, menú a pantalla completa y portada.
   La portada sigue la referencia de Mairen: el nombre enorme en minúsculas sobre la foto y textos pequeños en las esquinas. */

/* Pantalla de carga: la marca y una línea. Sin GSAP se retira hacia arriba; con GSAP la abre movimiento.js. */
.precarga { display: none; }
html.con-js .precarga {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.4rem;
  background: var(--c-tinta);
  color: var(--c-blanco);
}
html.con-js:not(.con-mov) .precarga { transition: transform 1.1s var(--curva), visibility 1.1s; }
html.con-js:not(.con-mov).cargado .precarga { transform: translateY(-100%); visibility: hidden; }
.precarga__marca { font-family: var(--f-titulo); font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); line-height: 1; letter-spacing: -0.02em; animation: aparecer 1s var(--curva) both; }
.precarga__linea { position: relative; width: 140px; height: 1px; overflow: hidden; background: rgba(255, 255, 255, 0.2); }
.precarga__linea i { position: absolute; inset: 0; background: var(--c-blanco); transform: scaleX(0); transform-origin: left; animation: progreso 1s var(--curva) 0.15s forwards; }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } }
@keyframes progreso { to { transform: scaleX(1); } }

/* Cabecera: sobre la portada y con el menú abierto, solo texto blanco; en el resto, una píldora de cristal claro. */
.cabecera {
  position: fixed;
  top: var(--flotar);
  left: var(--margen);
  right: var(--margen);
  z-index: 60;
  height: 64px;
  border: 1px solid transparent;
  border-radius: var(--r-pildora);
  background: transparent;
  color: var(--c-blanco);
  transition: background 0.5s var(--curva), color 0.5s var(--curva), border-color 0.5s var(--curva), box-shadow 0.5s var(--curva), transform 0.7s var(--curva);
}
.cabecera--clara {
  border-color: rgba(20, 17, 15, 0.08);
  background: rgba(255, 255, 255, 0.86);
  color: var(--c-tinta);
  box-shadow: 0 12px 40px rgba(20, 17, 15, 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.cabecera__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
  padding: 0 8px 0 1.6rem;
  transition: padding 0.5s var(--curva);
}
/* Sin píldora, el texto se alinea con el margen de la página */
.cabecera:not(.cabecera--clara) .cabecera__in { padding-left: 0; padding-right: 0; }
.marca { display: flex; flex-shrink: 0; align-items: baseline; gap: 0.75rem; text-decoration: none; line-height: 1; }
.marca__nombre { font-family: var(--f-titulo); font-size: 1.7rem; letter-spacing: -0.02em; }
.marca__lugar { white-space: nowrap; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.78; }

.menu { display: flex; align-items: center; gap: 0.15rem; }
.menu a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 0.85rem;
  border-radius: var(--r-pildora);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.35s var(--curva), color 0.35s var(--curva);
}
.menu a:not(.menu__cta):hover { background: rgba(255, 255, 255, 0.14); }
.cabecera--clara .menu a:not(.menu__cta):hover { background: rgba(20, 17, 15, 0.06); }
.menu .menu__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: 0.7rem;
  height: 48px;
  margin-left: 0.5rem;
  padding: 0 1.35rem;
  background: var(--c-blanco);
  color: var(--c-tinta);
}
.menu .menu__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-arena);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--curva);
}
.menu .menu__cta:hover::before { transform: scaleX(1); transform-origin: left; }
.cabecera--clara .menu .menu__cta { background: var(--c-tinta); color: var(--c-blanco); }
.cabecera--clara .menu .menu__cta::before { background: var(--c-mar); }

.menu-boton {
  display: none;
  align-items: center;
  gap: 0.75rem;
  height: 48px;
  padding: 0 1.3rem 0 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--r-pildora);
  background: none;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.35s var(--curva), background 0.35s var(--curva);
}
.menu-boton:hover { background: rgba(255, 255, 255, 0.12); }
.cabecera--clara .menu-boton { border-color: var(--c-linea-fuerte); }
.cabecera--clara .menu-boton:hover { background: rgba(20, 17, 15, 0.05); }
.menu-boton__lineas { position: relative; width: 18px; height: 10px; }
.menu-boton__lineas i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.5s var(--curva), top 0.5s var(--curva); }
.menu-boton__lineas i:first-child { top: 0; }
.menu-boton__lineas i:last-child { top: 8.5px; }
.menu-boton[aria-expanded="true"] .menu-boton__lineas i { top: 4.25px; }
.menu-boton[aria-expanded="true"] .menu-boton__lineas i:first-child { transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__lineas i:last-child { transform: rotate(-45deg); }

/* Menú a pantalla completa en pantallas estrechas: se abre como un telón */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  overflow-y: auto;
  padding: calc(var(--flotar) + 64px + 2.4rem) var(--margen) 2rem;
  background: var(--c-mar);
  color: var(--c-blanco);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.8s var(--curva), visibility 0s 0.8s;
}
.menu-movil.abierto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.8s var(--curva), visibility 0s; }
.menu-movil__in { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; width: 100%; min-height: 100%; }
.menu-movil__enlace {
  font-family: var(--f-titulo);
  font-size: clamp(1.8rem, 1.1rem + 4vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s var(--curva), transform 0.9s var(--curva);
}
.menu-movil.abierto .menu-movil__enlace { opacity: 1; transform: none; }
.menu-movil.abierto .menu-movil__enlace:nth-child(1) { transition-delay: 0.2s; }
.menu-movil.abierto .menu-movil__enlace:nth-child(2) { transition-delay: 0.26s; }
.menu-movil.abierto .menu-movil__enlace:nth-child(3) { transition-delay: 0.32s; }
.menu-movil.abierto .menu-movil__enlace:nth-child(4) { transition-delay: 0.38s; }
.menu-movil.abierto .menu-movil__enlace:nth-child(5) { transition-delay: 0.44s; }
.menu-movil__cta { margin-top: 2.2rem; opacity: 0; transition: opacity 0.6s var(--curva) 0.5s, color 0.45s var(--curva), transform 0.2s; }
.menu-movil.abierto .menu-movil__cta { opacity: 1; }
.menu-movil__pie { margin-top: auto; padding-top: 2.5rem; font-size: var(--t-xs); color: rgba(255, 255, 255, 0.62); }

@media (max-width: 1280px) {
  .menu { display: none; }
  .menu-boton { display: inline-flex; }
}
@media (max-width: 560px) {
  .cabecera { top: 10px; height: 58px; }
  .cabecera__in { padding: 0 6px 0 1.2rem; }
  .menu-boton { height: 44px; padding: 0 1.1rem 0 0.95rem; }
  .menu-movil { padding-top: calc(10px + 58px + 2rem); }
  .marca__lugar { display: none; }
}

/* ---------- Barra de progreso a la derecha (la crea progreso.js) ----------
   Una línea fina con un punto por sección, en el margen derecho. Tinta sobre blanco y blanca sobre fotos. */
.progreso {
  --alto: min(46vh, 420px);
  position: fixed;
  top: 50%;
  right: calc(var(--margen) / 2);
  z-index: 50;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  color: var(--c-tinta);
  transform: translate(50%, -50%);
  pointer-events: none;
  transition: color 0.5s var(--curva), opacity 0.9s var(--curva);
}
html.con-js:not(.cargado) .progreso { opacity: 0; }
.progreso--claro { color: var(--c-blanco); }
.progreso__cuenta { display: grid; justify-items: center; gap: 0.3rem; line-height: 1; }
.progreso__num { font-family: var(--f-estetica); font-size: 1.1rem; font-weight: 500; }
.progreso__total { font-size: 0.56rem; font-weight: 500; letter-spacing: 0.08em; opacity: 0.6; }
/* La pista vacía, tenue; el relleno, del color entero */
.progreso__pista { position: relative; width: 1px; height: var(--alto); background: rgba(20, 17, 15, 0.2); background: color-mix(in srgb, currentColor 24%, transparent); }
.progreso__relleno { position: absolute; inset: 0; background: currentColor; transform: scaleY(0); transform-origin: top; }
.progreso__punto {
  position: absolute;
  left: 50%;
  top: calc(var(--i) / (var(--n) - 1) * 100%);
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  pointer-events: auto;
  transition: opacity 0.4s var(--curva), transform 0.5s var(--curva);
}
/* Zona de clic más grande que el punto */
.progreso__punto::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.progreso__punto.es-pasado,
.progreso__punto.es-actual,
.progreso__punto:hover { opacity: 1; }
/* La sección actual (y la que está bajo el ratón) lleva un anillo alrededor del punto */
.progreso__punto::after { content: ""; position: absolute; inset: -5px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; transform: scale(0.4); transition: opacity 0.4s var(--curva), transform 0.6s var(--curva); }
.progreso__punto.es-actual::after,
.progreso__punto:hover::after { opacity: 1; transform: none; }
/* Nombre de la sección: una píldora de cristal a la izquierda del punto */
.progreso__nombre {
  position: absolute;
  top: 50%;
  right: calc(100% + 16px);
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(20, 17, 15, 0.08);
  border-radius: var(--r-pildora);
  background: rgba(255, 255, 255, 0.88);
  color: var(--c-tinta);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(20, 17, 15, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity 0.4s var(--curva), transform 0.6s var(--curva);
}
.progreso__punto:hover .progreso__nombre,
.progreso.con-nombre .progreso__punto.es-actual .progreso__nombre { opacity: 1; transform: translate(0, -50%); }
/* Móvil: solo la línea fina, sin puntos ni números */
@media (max-width: 760px) {
  .progreso { --alto: 32vh; right: 6px; transform: translateY(-50%); }
  .progreso__cuenta,
  .progreso__punto { display: none; }
  .progreso__pista { width: 2px; border-radius: 2px; overflow: hidden; }
}
@media print { .progreso { display: none; } }

/* ---------- Portada ---------- */
.portada {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-mar);
  color: var(--c-blanco);
}
.portada__medio { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* Fotos de la portada: pasan con un fundido y cada una se acerca muy despacio mientras se ve (app.js) */
/* Una sola capa para las fotos (las mueve movimiento.js al bajar): así Chrome no las vuelve a dibujar en cada fotograma */
.portada__fotos { position: absolute; inset: 0; will-change: transform; }
/* Las que no se ven se ocultan del todo al acabar su fundido, para no tener cinco fotos grandes superpuestas */
.portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0; visibility: hidden; transition: opacity 1.8s var(--curva), visibility 0s linear 1.8s; }
.portada__foto.es-activa { opacity: 1; visibility: visible; transition: opacity 1.8s var(--curva), visibility 0s; }
@media (prefers-reduced-motion: no-preference) {
  .portada__foto.es-activa { animation: acercarse 8s linear both; }
  @keyframes acercarse { from { transform: scale(1.06); } to { transform: scale(1); } }
}
.portada__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portada__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 12, 14, 0.5) 0%, rgba(10, 12, 14, 0.12) 24%, rgba(10, 12, 14, 0) 40%),
    linear-gradient(0deg, rgba(10, 12, 14, 0.62) 0%, rgba(10, 12, 14, 0.28) 30%, rgba(10, 12, 14, 0) 55%);
}
.portada__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "lema lugar"
    "elegir ."
    "titulo pie";
  gap: 1.5rem 3rem;
  min-height: 100svh;
  padding: calc(var(--flotar) + 64px + clamp(2rem, 6vh, 4rem)) var(--margen) clamp(2.2rem, 7vh, 4.4rem);
}

/* Textos pequeños de las esquinas */
.portada__lema,
.portada__lugar {
  font-size: clamp(0.76rem, 0.68rem + 0.28vw, 0.98rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Sombra muy suave: los textos pequeños pisan cielo, palmeras y jardín */
.portada__lema,
.portada__lugar,
.portada__pie { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.32); }
.portada__lema { grid-area: lema; }
.portada__lema span,
.portada__lugar span { display: block; }
.portada__lugar { grid-area: lugar; text-align: right; }
.portada__aviso { margin-top: 1.1rem; font-size: 0.68em; letter-spacing: 0.12em; opacity: 0.72; }

.portada__elegir {
  grid-area: elegir;
  align-self: center;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.5rem 0 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  font-size: var(--t-l);
  line-height: 1.2;
  text-decoration: none;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.3);
}
.portada__elegir::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c-blanco); transition: transform 0.5s var(--curva); }
.portada__elegir:hover::after { transform: scale(1.7); }

/* El nombre: enorme, en minúsculas y apoyado en la base de la portada */
.portada__titulo {
  grid-area: titulo;
  align-self: end;
  margin: 0 0 0 -0.045em;
  font-size: min(29vw, 60svh);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* Letras de la portada: cada una sube desde su máscara (las crea movimiento.js) */
.portada__letras { display: inline-flex; overflow: hidden; padding: 0.06em 0.03em 0.04em; margin: -0.06em -0.03em -0.04em; }
.portada__letras .letra { display: inline-block; }

.portada__pie { grid-area: pie; align-self: end; display: grid; justify-items: start; gap: 1.3rem; width: min(330px, 30vw); padding-bottom: 0.4rem; }
.portada__texto { font-size: var(--t-s); line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.portada__desde { display: flex; align-items: baseline; gap: 0.7rem; }
.portada__desde span { font-size: var(--t-etiqueta); font-weight: 500; letter-spacing: var(--espaciado-etiqueta); text-transform: uppercase; opacity: 0.8; }
.portada__desde b { font-family: var(--f-estetica); font-size: clamp(2.2rem, 1.5rem + 1.8vw, 3.3rem); font-weight: 500; line-height: 0.9; }
.portada__controles { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; }
.portada__pelicula,
.portada__pausa {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pildora);
  background: none;
  color: var(--c-blanco);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.portada__play { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50%; transition: background 0.4s var(--curva), border-color 0.4s var(--curva); }
.portada__play::before { content: ""; margin-left: 3px; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: border-left-color 0.4s var(--curva); }
.portada__pelicula:hover .portada__play { background: var(--c-blanco); border-color: var(--c-blanco); }
.portada__pelicula:hover .portada__play::before { border-left-color: var(--c-tinta); }
.portada__duracion { opacity: 0.68; }
.portada__pausa-icono { position: relative; width: 9px; height: 10px; }
.portada__pausa-icono::before,
.portada__pausa-icono::after { content: ""; position: absolute; top: 0; width: 2px; height: 10px; background: currentColor; }
.portada__pausa-icono::before { left: 1px; }
.portada__pausa-icono::after { right: 1px; }
.portada__pausa[data-parado="si"] .portada__pausa-icono::before { left: 1px; width: 0; height: 0; background: none; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.portada__pausa[data-parado="si"] .portada__pausa-icono::after { display: none; }
/* El anillo de foco del teclado, en píldora como el resto de botones */
.portada__pelicula:focus-visible,
.portada__pausa:focus-visible { outline-offset: 6px; }

/* Entrada de la portada sin GSAP (con GSAP la hace movimiento.js) */
html.con-js:not(.con-mov) .portada__in > * { opacity: 0; transform: translateY(40px); }
html.con-js:not(.con-mov).cargado .portada__in > * { opacity: 1; transform: none; transition: opacity 1.4s var(--curva) 0.4s, transform 1.4s var(--curva) 0.4s; }
html.con-js:not(.con-mov).cargado .portada__titulo { transition-delay: 0.25s; }

/* Sin GSAP, el fondo se desplaza un poco al bajar en los navegadores con animaciones ligadas al scroll */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.con-mov) .portada__medio { animation: deriva linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes deriva { to { transform: translateY(14%) scale(1.06); } }
  }
}

/* Pantallas apaisadas: foto; el vídeo vertical solo en pantallas verticales (lo elige app.js) */
@media (min-aspect-ratio: 801/1000) { .portada__video, .portada__pausa { display: none; } }
@media (max-aspect-ratio: 4/5) {
  /* En vertical se ve el vídeo (con su primer fotograma de póster); las fotos no hacen falta */
  .portada__fotos { display: none; }
}

/* Tableta y móvil: el nombre ocupa el ancho y los textos van debajo */
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .portada__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "lema lugar"
      "elegir elegir"
      "titulo titulo"
      "pie pie";
    gap: 1.2rem 1.5rem;
  }
  .portada__titulo { justify-self: start; font-size: calc((100vw - 2 * var(--margen)) / 2.16); }
  .portada__pie { grid-template-columns: minmax(0, 1fr) auto; align-items: end; width: 100%; gap: 1rem 1.5rem; padding-bottom: 0; }
  .portada__texto { grid-column: 1 / -1; max-width: 40ch; }
  .portada__controles { justify-content: flex-end; }
}
@media (max-width: 560px) {
  .portada__in { padding-top: calc(10px + 58px + 1.6rem); }
  .portada__aviso { max-width: 15ch; margin-left: auto; }
  .portada__elegir { font-size: var(--t-m); }
  .portada__pie { grid-template-columns: 1fr; }
  .portada__controles { justify-content: flex-start; gap: 0.2rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.con-js .precarga { display: none; }
  html.con-js:not(.con-mov) .portada__in > * { opacity: 1; transform: none; }
}