/* ===== PORTADA ===== */

/* ---------- Hero ---------- */

/*
 * Las medidas están calcadas de la fila de Kadence, comprobadas elemento a
 * elemento en el navegador:
 *
 *   alto mínimo 100vh · relleno 24px arriba / 64px abajo
 *   caja del logotipo: margen 104px arriba y 32px a los lados en móvil,
 *   160px en escritorio; alto 339px en móvil, 653px en tableta, 651px en
 *   escritorio · separación entre logotipo y botón 32px
 *
 * El contenido va pegado arriba, no centrado: así estaba y así se queda.
 */
.ep-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--ep-esp-sm) var(--ep-esp-sm) var(--ep-esp-xl);
  background-color: var(--ep-negro);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  isolation: isolate;
  overflow: hidden;
}

/* Velo: el mismo tono y la misma opacidad que la fila original. */
.ep-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ep-negro-suave);
  opacity: 0.6;
}

.ep-hero__contenido {
  display: grid;
  gap: var(--ep-esp-md);
  width: 100%;
  max-width: var(--ep-ancho-maximo);
  margin-inline: auto;
}

.ep-hero__caja-logo {
  display: grid;
  place-items: center;
  height: 339px;
  margin: var(--ep-esp-3xl) var(--ep-esp-md) var(--ep-esp-md);
}

@media (min-width: 768px) {
  .ep-hero__caja-logo {
    height: 653px;
  }
}

@media (min-width: 1025px) {
  .ep-hero__caja-logo {
    height: 651px;
    margin: var(--ep-esp-5xl);
  }
}

.ep-hero__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.ep-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ep-esp-xs);
  margin-block: 0.67rem;
}

/* ---------- Secciones con foto de fondo ---------- */

/*
 * Espaciado calcado del original, medido hijo a hijo:
 *   h2      margen 54px arriba / 18px abajo   (1,5em y 0,5em)
 *   párrafo margen 32px abajo
 *   botón   margen 32px abajo
 *   y un respiro final de 66px
 * La sección no lleva relleno propio: su alto lo marca el contenido.
 */
.ep-seccion-foto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 0 66px;
  background-color: var(--ep-negro);
  /* El encuadre lo fija cada sección; los valores son los del original. */
  background-size: var(--ep-bg-size, cover);
  background-position: var(--ep-bg-pos, 50% 50%);
  background-repeat: no-repeat;
  isolation: isolate;
}

/*
 * El fondo fijo solo en escritorio con ratón: en iOS
 * `background-attachment: fixed` no funciona y provoca saltos al desplazar,
 * que es justo por lo que Kadence también lo desactivaba en móvil.
 */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .ep-seccion-foto {
    background-attachment: fixed;
  }
}

/* Velo: el mismo tono al 75 %. */
.ep-seccion-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ep-negro-suave);
  opacity: 0.75;
}

.ep-seccion-foto__contenido {
  width: 100%;
  max-width: var(--ep-ancho-estrecho);
  padding-inline: var(--ep-esp-sm);
}

.ep-seccion-foto h2 {
  margin: 1.5em 0 0.5em;
  font-size: var(--ep-txt-xxl);
  color: var(--ep-melocoton);
}

.ep-seccion-foto p {
  margin: 0 0 var(--ep-esp-md);
  color: var(--ep-crema);
  font-size: var(--ep-txt-medio);
  font-weight: 300;
}

/* ---------- Bloques de texto sin foto ---------- */

.ep-bloque {
  padding: var(--ep-esp-3xl) 0 var(--ep-esp-5xl);
}

.ep-bloque--ajustado {
  padding: 0 0 var(--ep-esp-3xl);
}

.ep-bloque__titulo {
  margin-bottom: var(--ep-esp-md);
  font-size: var(--ep-txt-grande);
  text-align: center;
}

.ep-bloque__titulo--formulario {
  margin-bottom: 30px;
}

/* ---------- Galería ---------- */

/*
 * El original cruzaba las fotos con un fundido de 1 s (Splide en modo «fade»),
 * no las deslizaba. Se replica con opacidad, que además es más barato de
 * animar: no hay nada que recolocar, solo componer.
 */
.ep-galeria {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--ep-negro);
}

.ep-galeria__diapositiva {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1s var(--ep-entrada);
}

.ep-galeria__diapositiva.es-activa {
  opacity: 1;
}

/* Sin JavaScript se ve la primera foto, no un hueco negro. */
.no-js .ep-galeria__diapositiva:first-child {
  opacity: 1;
}

.ep-galeria__diapositiva img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Flechas ---- */

.ep-galeria__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 48px;
  padding: 0;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  border: 0;
  border-radius: 3px;
  color: #fff;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.3s, background 0.3s;
}

.ep-galeria__flecha--prev { left: 0; }
.ep-galeria__flecha--next { right: 0; }

.ep-galeria__flecha svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.ep-galeria__flecha--prev svg {
  transform: scaleX(-1);
}

@media (hover: hover) and (pointer: fine) {
  .ep-galeria__flecha:hover {
    opacity: 1;
  }
}

.ep-galeria__flecha:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ep-melocoton);
  outline-offset: 2px;
}

.no-js .ep-galeria__flecha {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ep-galeria__diapositiva {
    transition: none;
  }
}

/* El bloque de botones llevaba 32px de separación bajo el párrafo. */
.ep-seccion-foto__acciones {
  display: flex;
  justify-content: center;
  margin-bottom: var(--ep-esp-md);
}