/* YEMANJA — layout: rejilla editorial y piezas del sitio */

/* El máximo es de contenido, no de caja: los márgenes van por fuera. Si no,
   a partir de 1440 el margen sigue creciendo hacia dentro y el contenido
   adelgaza mientras el pie (que mide su propio ancho) se queda más ancho:
   los dos bloques dejaban de alinearse. */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: var(--e-6); }

.seccion--corta { padding-block: var(--e-5); }

.oscuro {
  background: var(--noche);
  color: var(--hueso);
  --linea: rgba(243, 238, 228, 0.18);
  --texto-suave: rgba(243, 238, 228, 0.62);
}

.oscuro .boton {
  background: var(--hueso);
  border-color: var(--hueso);
  color: var(--noche);
}

@media (hover: hover) {
  .oscuro .boton:hover {
    background: var(--fuego);
    border-color: var(--fuego);
    color: var(--hueso);
  }
}

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* red de seguridad: antes de desbordar, el nav baja de línea */
  gap: var(--e-1) var(--e-3);
  padding: var(--e-2) var(--margen);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--curva), background 0.4s var(--curva);
}

.cabecera.pegada { border-bottom-color: var(--linea); }

.cabecera--sobre-foto {
  position: fixed;
  inset-inline: 0;
  background: transparent;
  backdrop-filter: none;
  color: var(--hueso);
}

.cabecera--sobre-foto.pegada {
  position: sticky;
  background: color-mix(in srgb, var(--noche) 90%, transparent);
  backdrop-filter: blur(10px);
}

/* El símbolo va como máscara, no como <img>, y por un motivo: así toma el color
   del texto de donde esté (currentColor). Un solo archivo vale para la cabecera
   negra y para el pie claro, y los huecos del dibujo se ven del color del fondo
   en vez de blancos. Con <img> habría que mantener dos versiones y acordarse de
   cuál toca en cada sitio. */
.marca__simbolo {
  display: inline-block;
  flex: none;
  /* 820x224 en el original: la proporción se respeta a mano */
  width: 4.76em;
  height: 1.3em;
  background: currentColor;
  -webkit-mask: url('../img/logo.svg?v=202609262115') center / contain no-repeat;
  mask: url('../img/logo.svg?v=202609262115') center / contain no-repeat;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  white-space: nowrap;
}

.marca__texto {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* devuelve el hueco que el tracking deja tras la última A */
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--e-1) clamp(1rem, 0.4rem + 1.8vw, 2.5rem);
  font-size: var(--t-s);
}

.nav a {
  white-space: nowrap;
  transition: opacity 0.3s var(--curva);
}

@media (hover: hover) {
  .nav a:hover { opacity: 0.55; }
}

.nav a[aria-current='page'] {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.nav__tel {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* --- Menú de rayas (móvil e iPad) ----------------------------------------
   Hasta 56rem (896 px: entran todos los móviles y el iPad en vertical) la
   navegación no cabe al lado de la marca. En vez de esconder enlaces, se
   guardan todos detrás de un botón de tres rayas. Sin JavaScript el menú no
   se abre, así que el pie sigue teniendo la navegación completa. */

.menu-boton { display: none; }

@media (max-width: 56rem) {
  .menu-boton {
    position: relative;
    z-index: 45;
    display: grid;
    gap: 5px;
    place-content: center;
    /* 44x44 aunque las rayas midan 24: es el mínimo que se toca con el dedo */
    width: 44px;
    height: 44px;
    margin-right: -0.5rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .menu-boton span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.35s var(--curva), opacity 0.2s var(--curva);
  }

  .menu-boton[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-boton[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .menu-boton[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--e-2);
    padding: var(--e-6) var(--margen) var(--e-5);
    background: var(--noche);
    color: var(--hueso);
    font-family: var(--display);
    font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.4rem);
    letter-spacing: -0.02em;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity 0.35s var(--curva), transform 0.35s var(--curva),
      visibility 0.35s var(--curva);
  }

  .nav.es-abierto {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Dentro del menú caben todos: aquí no se esconde nada */
  .nav__enlace--secundario { display: block; }

  .nav a[aria-current='page'] { border-bottom-width: 2px; }

  .nav__tel {
    margin-top: var(--e-2);
    padding-top: var(--e-2);
    border-top: 1px solid rgba(243, 238, 228, 0.2);
    width: 100%;
    font-family: var(--texto-fuente);
    font-size: var(--t-m);
    letter-spacing: 0.04em;
    color: rgba(243, 238, 228, 0.75);
  }

  /* Con el menú abierto, la cabecera se funde con él */
  .cabecera.menu-encima {
    background: transparent;
    backdrop-filter: none;
    border-bottom-color: transparent;
    color: var(--hueso);
  }

  body.menu-abierto { overflow: hidden; }
}

/* Entre el menú de rayas y 72rem hay sitio para la marca y cinco enlaces, no
   para siete. Los dos secundarios esperan a que la pantalla dé de sí; dentro
   del menú de rayas salen siempre todos. */
@media (min-width: 56.0625rem) and (max-width: 72rem) {
  .nav__enlace--secundario { display: none; }
}

@media (max-width: 40rem) {
  .cabecera { padding-inline: var(--e-2); }
  .marca { font-size: 0.9rem; letter-spacing: 0.28em; text-indent: 0.28em; }
}

/* --- Fotografía ----------------------------------------------------------
   Mientras no estén las fotos reales, estos bloques mantienen el sitio en pie
   con la proporción y el peso visual definitivos. Sustituir por <picture>. */

.foto {
  position: relative;
  overflow: hidden;
  background: var(--arena-honda);
  aspect-ratio: var(--ar, 4 / 5);
}

.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.foto[data-tono='agua'] {
  background: radial-gradient(120% 90% at 20% 15%, #2f7d75 0%, #1e5c58 42%, #0f2f31 100%);
}

.foto[data-tono='noche'] {
  background: radial-gradient(130% 100% at 70% 10%, #2a3a3a 0%, #16211f 55%, #0b100f 100%);
}

.foto[data-tono='arena'] {
  background: radial-gradient(120% 95% at 25% 20%, #efe6d6 0%, #d9cbb2 55%, #b8a68b 100%);
}

.foto[data-tono='fuego'] {
  background: radial-gradient(120% 95% at 30% 85%, #eb8a4a 0%, #ce5729 45%, #4a2418 100%);
}

.foto[data-tono='nieve'] {
  background: radial-gradient(120% 95% at 60% 15%, #eef2f2 0%, #c3d0d1 50%, #6d8688 100%);
}

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

.foto--completa { --ar: auto; height: 100%; }

/* Rotador: varias fotos en el mismo hueco, cruzándose despacio. Las capas van
   sobre el color del marcador (que sigue haciendo de fondo mientras cargan) y
   por debajo del grano de .foto::after. */

.foto__capa {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--curva);
}

.foto__capa.is-activa { opacity: 1; }

figure { margin: 0; }

figcaption {
  margin-top: var(--e-1);
  font-size: var(--t-s);
  color: var(--texto-suave);
  max-width: 38ch;
}

/* --- Portada ------------------------------------------------------------- */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: var(--e-5) var(--margen) var(--e-4);
  color: var(--hueso);
  isolation: isolate;

  /* Velo sobre la foto: sin él el titular no se lee. Lo usan la portada y,
     cuando hay carrusel, cada lámina por separado */
  --velo: linear-gradient(
    to top,
    rgba(11, 16, 15, 0.82) 0%,
    rgba(11, 16, 15, 0.35) 45%,
    rgba(11, 16, 15, 0.28) 100%
  );
}

.portada__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.portada::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--velo);
}

/* 22ch se medían con la fuente del bloque (17 px), no con la del titular: en
   cualquier pantalla salían ~13rem y la entradilla caía en siete líneas.
   El ancho de la columna se dice en rem y punto. */
/* 32rem daba unos 12 caracteres por línea con el titular a 96 px: la frase
   caía en cuatro líneas y la portada parecía una columna de periódico. Con
   46rem y el titular algo más contenido, entra en dos o tres. */
.portada__texto { max-width: min(100%, 46rem); }

.portada h1 { margin-bottom: var(--e-3); }

.portada__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-4);
  border-top: 1px solid rgba(243, 238, 228, 0.28);
  padding-top: var(--e-2);
}

.portada__pie p {
  max-width: 30ch;
  font-size: var(--t-s);
  color: rgba(243, 238, 228, 0.8);
}

/* Móvil apaisado: 390 px de alto para 100svh. Con el titular a 8vw y el aire
   de siempre, la portada pedía 540 px y el pie se iba fuera de pantalla.
   El hueco de abajo (padding-bottom) no se toca: ahí vive el rótulo del
   destino del carrusel. */
@media (orientation: landscape) and (max-height: 32rem) {
  .portada { padding-top: var(--e-4); }

  .portada h1 {
    font-size: clamp(2rem, 9vh, 4rem);
    margin-bottom: var(--e-2);
  }

  .portada .entradilla { font-size: var(--t-m); }

  .portada__pie { margin-top: var(--e-3); }
}

/* --- Carrusel de portada -------------------------------------------------
   Las fotos se apilan y se cruzan por fundido; nada se desliza. El nombre del
   destino y los puntos viven dentro del carrusel, así que este no puede irse
   detrás de todo como .portada__fondo (z-index -2): quedarían tapados y sin
   poder pulsarse. Se queda como capa de fondo por encima del degradado y es el
   contenido de la portada el que sube. */

.portada > *:not(.carrusel):not(.portada__fondo) {
  position: relative;
  z-index: 1;
}

.portada .carrusel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* El marcado mete el carrusel dentro de .portada__fondo, que estaba en -2 para
   quedarse debajo de todo. Ahí dentro los puntos no se podrían ni pulsar. */
.portada__fondo:has(.carrusel) { z-index: 0; }

/* Con carrusel el velo lo pone cada lámina, para que el rótulo del destino
   quede por encima de él y no debajo */
.portada:has(.carrusel)::before { content: none; }

.carrusel {
  position: relative;
  overflow: hidden;
  --carrusel-fundido: 1.2s;
  --carrusel-zoom: 8s; /* el JS lo ajusta al intervalo real de cada carrusel */
}

.carrusel__pista {
  position: absolute;
  inset: 0;
  background: var(--noche);
}

.carrusel__lamina {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--carrusel-fundido) var(--curva);
}

.carrusel__lamina.is-activa {
  opacity: 1;
  pointer-events: auto;
}

.carrusel__lamina picture { display: block; height: 100%; }

.carrusel__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El reposo es el final del recorrido: al retirarse la animación no hay
     salto, solo el resto del camino andado despacio */
  transform: scale(1.06);
  transition: transform var(--carrusel-fundido) var(--curva);
}

.carrusel__lamina.is-activa img {
  animation: carrusel-acercar var(--carrusel-zoom) var(--curva) both;
}

@keyframes carrusel-acercar {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.carrusel__lamina::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--velo);
  pointer-events: none;
}

/* Tanto el rótulo como los puntos viven en la franja del padding-bottom de la
   portada (var(--e-4)), que siempre está libre: así no chocan ni con el
   titular ni con el enlace de .portada__pie, que van a la izquierda y arriba
   de esa línea. */
.carrusel__lugar {
  position: absolute;
  z-index: 1;
  right: var(--margen);
  bottom: var(--e-2);
  /* misma receta que .rotulo, en claro y sobre foto */
  font-family: var(--texto-fuente);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  color: var(--hueso);
  text-shadow: 0 1px 14px rgba(11, 16, 15, 0.7);
  pointer-events: none;
}

.carrusel__puntos {
  position: absolute;
  z-index: 2;
  right: var(--margen);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.carrusel__punto {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.carrusel__punto::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid rgba(243, 238, 228, 0.7);
  border-radius: 50%;
  transition: background 0.6s var(--curva), border-color 0.6s var(--curva),
    transform 0.6s var(--curva);
}

@media (hover: hover) {
  .carrusel__punto:hover::before { border-color: var(--hueso); }
}

.carrusel__punto.is-activa::before {
  background: var(--hueso);
  border-color: var(--hueso);
  transform: scale(1.2);
}

/* Con el dedo el punto pintado sigue midiendo 7 px, pero el área que se pulsa
   pasa a 44 px */
@media (pointer: coarse) {
  .carrusel__punto {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (max-width: 46rem) {
  /* En vertical la columna de puntos se cruzaría con el titular, que ocupa
     todo el ancho. Bajan a la franja libre de abajo, en fila, y el destino
     sobra: no hay sitio para las dos cosas. */
  .carrusel__lugar { display: none; }

  .carrusel__puntos {
    top: auto;
    bottom: 0;
    transform: none;
    flex-direction: row;
  }
}

/* Parar las fotos. Lo pone el JS, porque sin JS no pasan solas y no hay nada
   que parar. Se aparta de los puntos: en ancho van al centro derecha y este
   se queda abajo; en estrecho los puntos bajan a la derecha y este a la
   izquierda, en la misma franja que el titular deja libre. */
.carrusel__pausa {
  position: absolute;
  z-index: 2;
  right: var(--margen);
  bottom: var(--margen);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(243, 238, 228, 0.35);
  border-radius: 50%;
  background: rgba(11, 12, 12, 0.35);
  color: var(--hueso);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.3s var(--curva), border-color 0.3s var(--curva);
}

.carrusel__pausa:hover,
.carrusel__pausa:focus-visible {
  opacity: 1;
  border-color: var(--hueso);
}

/* Dos barras cuando está pasando; un triángulo cuando está parada */
.carrusel__pausa span {
  width: 0.5rem;
  height: 0.75rem;
  border-left: 0.16rem solid currentColor;
  border-right: 0.16rem solid currentColor;
}

.carrusel__pausa.is-parado span {
  width: 0;
  height: 0;
  margin-left: 0.15rem;
  border: 0;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  border-left: 0.62rem solid currentColor;
}

@media (max-width: 46rem) {
  .carrusel__pausa {
    right: auto;
    left: var(--margen);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__lamina,
  .carrusel__pausa,
  .foto__capa { transition: none; }

  .carrusel__lamina img {
    animation: none;
    transform: none;
    transition: none;
  }
}

/* --- Rejillas ------------------------------------------------------------ */

.dos {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 52rem) {
  .dos {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* Recién partido en dos, 5rem de calle se comen la columna estrecha
       (donde va el manifiesto, a cuerpo grande). El aire llega después. */
    gap: var(--e-4);
  }
  .dos--invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dos--centrada { align-items: center; }
}

@media (min-width: 72rem) {
  .dos { gap: var(--e-5); }
}

.desplazada { margin-top: 0; }

@media (min-width: 52rem) {
  .desplazada { margin-top: var(--e-5); }
}

.par {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .par { grid-template-columns: 1fr 1fr; }
}

/* --- Bloque de titular con rótulo ---------------------------------------- */

.titular {
  display: grid;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

@media (min-width: 52rem) {
  .titular {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--e-4);
    align-items: baseline;
  }
}

/* --- Tira de posicionamiento ----------------------------------------------
   Va justo debajo de la portada y responde en cuatro golpes a qué es esto,
   con quién, cómo y qué te llevas. Sin logo que hable por la marca, esto es
   lo que tiene que entenderse en los tres primeros segundos. */

.posicionamiento {
  background: var(--arena);
  border-block: 1px solid rgba(16, 22, 20, 0.1);
}

.posicionamiento__lista {
  display: grid;
  gap: var(--e-3) var(--e-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .posicionamiento__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .posicionamiento__lista { grid-template-columns: repeat(4, 1fr); }
}

.posicionamiento__lista li {
  display: grid;
  gap: 0.4em;
  align-content: start;
}

.posicionamiento__lista p {
  font-family: var(--display);
  font-size: var(--t-l);
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 28ch;
}

/* --- Manifiesto ---------------------------------------------------------- */

/* La apertura: el manifiesto solo, sin nada al lado y sin titular encima. Es lo
   primero que se lee al salir de la portada, así que sale a un cuerpo propio,
   entre el del titular de portada y el del manifiesto dentro de una columna:
   se lee como una declaración, no como un párrafo destacado. */
.apertura { padding-block: var(--e-5) var(--e-4); }

.manifiesto--apertura p {
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.6rem);
  max-width: 20ch;
}

@media (min-width: 52rem) {
  .manifiesto--apertura p { max-width: 26ch; }
}


.manifiesto p {
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 30, 'WONK' 1;
  max-width: 22ch;
}

.manifiesto p + p { margin-top: var(--e-3); }

.manifiesto em {
  font-style: normal;
  color: var(--fuego);
}

/* --- Rituales: tarjetas con icono y ventana -------------------------------
   Los iconos van dibujados a mano en el propio HTML. Nada de librerías: seis
   trazos propios pesan menos que una fuente de iconos y no se parecen a los de
   nadie. Sin JS la tarjeta enseña su texto entero y esto es una lista normal;
   el JS es quien pliega el detalle y lo manda a la ventana. */

.tarjetas {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--linea);
  border-block: 1px solid var(--linea);
}

@media (min-width: 40rem) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .tarjetas { grid-template-columns: repeat(3, 1fr); }
}

.tarjeta {
  background: var(--noche);
  display: grid;
  align-content: start;
  gap: var(--e-1);
  padding: var(--e-3);
}

.tarjeta__icono {
  display: block;
  width: 2.25rem;
  margin-bottom: var(--e-1);
  color: var(--fuego);
}

.tarjeta__icono svg {
  display: block;
  width: 100%;
  height: auto;
}

.tarjeta h3 { font-size: var(--t-l); }

.tarjeta__pista { color: var(--texto-suave); }

/* Con JS: la tarjeta entera es el botón que abre la ventana. */
.tarjeta__disparador {
  display: grid;
  align-content: start;
  gap: var(--e-1);
  width: 100%;
  padding: var(--e-3);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s var(--curva);
}

.tarjeta:has(.tarjeta__disparador) { padding: 0; }

.tarjeta__disparador::after {
  content: 'Ver más';
  margin-top: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fuego);
}

@media (hover: hover) {
  .tarjeta__disparador:hover { background: var(--noche-suave); }
}

.tarjeta__disparador:focus-visible {
  outline: 2px solid var(--fuego);
  outline-offset: -4px;
}

/* --- La ventana ----------------------------------------------------------
   <dialog> nativo: la tecla Escape, el foco atrapado dentro y el fondo inerte
   los pone el navegador. No hay que reinventar nada de eso, y sale mejor. */

.ventana {
  width: min(34rem, calc(100vw - var(--margen) * 2));
  padding: 0;
  border: 0;
  background: var(--hueso);
  color: var(--noche);
  margin: auto;
}

.ventana::backdrop { background: rgba(16, 22, 20, 0.72); }

.ventana__caja {
  position: relative;
  padding: var(--e-4) var(--e-3) var(--e-3);
  display: grid;
  gap: var(--e-2);
  align-content: start;
}

.ventana__icono {
  display: block;
  width: 2.75rem;
  color: var(--fuego);
}

.ventana__icono svg { display: block; width: 100%; height: auto; }

.ventana__titulo { font-size: var(--t-xl); }

.ventana__cuerpo p + p { margin-top: var(--e-2); }

/* La equis se dibuja con dos rayas: sin fuente de iconos y sin imagen. */
.ventana__cerrar {
  position: absolute;
  top: var(--e-2);
  right: var(--e-2);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

.ventana__cerrar::before,
.ventana__cerrar::after {
  content: '';
  position: absolute;
  inset: 50% 25% auto;
  height: 1px;
  background: currentColor;
}

.ventana__cerrar::before { transform: rotate(45deg); }
.ventana__cerrar::after { transform: rotate(-45deg); }

.ventana__cerrar:focus-visible {
  outline: 2px solid var(--fuego);
  outline-offset: 2px;
}

/* Mientras hay ventana abierta, el fondo no se mueve. */
.ventana-abierta { overflow: hidden; }

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

/* --- Lista de tarjetas / no negociables ---------------------------------- */

.lista-numerada {
  counter-reset: n;
  border-top: 1px solid var(--linea);
}

.lista-numerada li {
  counter-increment: n;
  display: grid;
  gap: var(--e-1) var(--e-3);
  grid-template-columns: 2.5rem 1fr;
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linea);
}

/* Las tres columnas entran a 64rem, no a 52rem: entre 832 y 1024 px la del
   título se quedaba en ~270 px y «Pescar y cocinar con quien vive allí» caía
   en cuatro líneas. Y aun entrando, esa columna nunca baja de 13rem. */
@media (min-width: 64rem) {
  .lista-numerada li {
    grid-template-columns: 2.5rem minmax(13rem, 4fr) minmax(0, 7fr);
    align-items: baseline;
  }

  .lista-numerada li p { grid-column: 3; }
}

/* Cada elemento tiene tres piezas (número, título y texto) y en móvil la
   rejilla solo tiene dos columnas: sin decirle dónde va cada una, el texto se
   caía a la fila siguiente y aterrizaba en la columna del número, de 40 px.
   Una palabra por línea. Se coloca cada pieza a mano. */
.lista-numerada li::before {
  grid-column: 1;
  grid-row: 1;
  content: counter(n, decimal-leading-zero);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.lista-numerada li h3,
.lista-numerada li p { grid-column: 2; }

/* Por debajo de 34rem (544 px) la columna del número se come 68 px de los 280
   que hay de ancho útil. A esas anchuras el número va encima, como una
   etiqueta, y el texto ocupa la línea entera. */
@media (max-width: 34rem) {
  .lista-numerada li { grid-template-columns: 1fr; gap: var(--e-1); }
  .lista-numerada li::before { grid-column: 1; }
  .lista-numerada li h3,
  .lista-numerada li p { grid-column: 1; }
}

.lista-numerada h3 {
  font-size: var(--t-l);
  letter-spacing: -0.01em;
}

.lista-numerada p {
  color: var(--texto-suave);
  /* En una sola columna el párrafo va a lo ancho de la sección y necesita
     tope; en tres, la columna manda antes que este máximo */
  max-width: 60ch;
}

/* --- Viajes -------------------------------------------------------------- */

.viajes {
  display: grid;
  gap: var(--e-5) var(--e-3);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .viajes { grid-template-columns: 1fr 1fr; gap: var(--e-5) var(--e-4); }
  .viajes > :nth-child(even) { margin-top: var(--e-5); }
}

/* A partir de 82rem dos columnas dan tarjetas de más de 600 px: una foto 4/5
   no cabe entera en pantalla. Con tres, el desfase pasa a la columna del
   medio, que es el mismo gesto y sigue funcionando con 3 y con 5 tarjetas. */
@media (min-width: 82rem) {
  .viajes { grid-template-columns: repeat(3, 1fr); }
  .viajes > :nth-child(even) { margin-top: 0; }
  .viajes > :nth-child(3n + 2) { margin-top: var(--e-5); }
}

.viaje { display: block; }

.viaje .foto {
  transition: transform 1.2s var(--curva);
  will-change: transform;
}

/* Sin ratón el :hover se queda pegado después de tocar */
@media (hover: hover) {
  .viaje:hover .foto { transform: scale(1.02); }
}

.viaje__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  margin-top: var(--e-2);
}

.viaje h3 {
  margin-top: var(--e-1);
  font-size: var(--t-xl);
}

.viaje p {
  margin-top: var(--e-1);
  color: var(--texto-suave);
  max-width: 44ch;
}

.viaje__estado {
  display: inline-block;
  margin-top: var(--e-2);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  font-size: var(--t-s);
}

/* --- Ficha de viaje ------------------------------------------------------ */

.ficha {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--linea);
  padding-top: var(--e-3);
}

/* Cuatro cifras en fila piden 60rem. En tablet vertical (768-820 px) salían
   columnas de 140 px y «Pequeño, de verdad» se partía en tres líneas: hasta
   entonces, 2x2. */
@media (min-width: 34rem) {
  .ficha { grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
}

@media (min-width: 60rem) {
  .ficha { grid-template-columns: repeat(4, 1fr); gap: var(--e-4); }
}

.ficha dt {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 0.4em;
}

.ficha dd {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-l);
  line-height: 1.2;
}

.dias li {
  display: grid;
  gap: var(--e-1);
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--linea);
}

/* Mismo criterio que .lista-numerada: la columna del título no se estrangula */
@media (min-width: 64rem) {
  .dias li { grid-template-columns: minmax(12rem, 4fr) minmax(0, 8fr); gap: var(--e-4); }
}

.dias h3 { font-size: var(--t-l); }
.dias p { color: var(--texto-suave); max-width: 56ch; }

.incluye {
  display: grid;
  gap: var(--e-2) var(--e-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .incluye { grid-template-columns: 1fr 1fr; }
}

.incluye li {
  padding-block: 0.6em;
  border-bottom: 1px solid var(--linea);
}

.incluye li::before {
  content: '—';
  margin-right: 0.7em;
  color: var(--texto-suave);
}

/* --- Cita ---------------------------------------------------------------- */

.cita {
  font-family: var(--display);
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
  max-width: 18ch;
}

.cita--ancha { max-width: 24ch; }

/* --- Diario -------------------------------------------------------------- */

.diario {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
}

/* A 44rem las tres columnas dejaban entradas de 195 px: la foto quedaba de
   sello de correos. Esperan a 52rem. */
@media (min-width: 52rem) {
  .diario { grid-template-columns: repeat(3, 1fr); gap: var(--e-4) var(--e-3); }
  .diario > :first-child { grid-column: span 2; }
}

.entrada h3 { margin-top: var(--e-2); font-size: var(--t-l); }
.entrada p { margin-top: var(--e-1); color: var(--texto-suave); max-width: 46ch; }

/* --- Llamada ------------------------------------------------------------- */

/* --- Hablemos: la sección se hace de noche --------------------------------
   Primer intento: dos columnas, foto al lado, todo simétrico. Corporativo.
   Segundo: rejilla a sangre y asimetría. Mejor compuesto, pero seguía siendo
   un formulario con una foto al lado — y eso es mirar la hoguera desde fuera.

   Aquí la fotografía no es un elemento: es el suelo. La sección se apaga, el
   fuego queda de fondo y el texto se escribe encima. Los dos cuadrantes que
   parecen vacíos son el fuego, y por eso deja de sentirse vacía: el aire ya no
   es papel en blanco, es noche.

   Nada de tarjetas, ni paneles, ni marcos. Palabras sobre una noche. */

.hablemos {
  position: relative;
  overflow: hidden;
}

.hablemos__fondo {
  position: absolute;
  inset: 0;
  /* Un grado de color, como el de una película: las escenas de la ronda vienen
     de sitios muy distintos —una hoguera de noche y una ladera nevada no se
     parecen en nada— y sin bajarles el brillo y el color cada cambio sería un
     salto. Con esto se leen todas como la misma noche. */
  filter: brightness(0.92) saturate(0.9) contrast(1.03);
}

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

/* El velo. No es un degradado decorativo: es lo que hace legible el texto y lo
   que convierte una fotografía en suelo. Cae con más peso a la izquierda, que
   es donde va el titular, y se abre a la derecha para que se vea el fuego. */
/* Va dentro del fondo y no en la sección: los elementos posicionados se pintan
   en el orden del documento, así que un ::before de .hablemos quedaría por
   DEBAJO de la foto. Aquí, detrás de las capas de imagen, cae encima. */
.hablemos__fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(16, 22, 20, 0.80) 0%,
      rgba(16, 22, 20, 0.58) 40%,
      rgba(16, 22, 20, 0.20) 100%),
    linear-gradient(to bottom,
      rgba(16, 22, 20, 0.22) 0%,
      rgba(16, 22, 20, 0.04) 45%,
      rgba(16, 22, 20, 0.78) 100%);
}

/* Cuentas del velo, por si alguien lo retoca: los dos degradados se suman, así
   que el peso real es 1-(1-a)(1-b). Arriba a la izquierda, donde va el
   titular, queda en 0,92 —texto seguro—. En el centro derecha baja a 0,51 y es
   donde respira el fuego. Abajo a la derecha, bajo el formulario, sube otra
   vez a 0,84 para que las líneas de los campos no se pierdan sobre la llama.
   Si se aclara más, comprobar el contraste ahí antes de publicar.

   Valores actuales: 0,84 bajo el titular · 0,23 en el centro derecha, que es
   donde la foto se ve entera · 0,82 bajo el formulario. */

/* El mismo grano que llevan todas las fotos del sitio: aquí une la fotografía
   con el fondo plano para que no se note dónde acaba una y empieza el otro. */
.hablemos::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grano);
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hablemos__capa { position: relative; }

/* --- La deriva -----------------------------------------------------------
   El fondo se mueve un poco más despacio que el contenido al pasar por
   delante. No es un efecto: es la única pista real de profundidad que tiene el
   ojo —las cosas lejanas se mueven menos— y por eso funciona sin llamar la
   atención sobre sí misma.

   Va con animación de scroll del propio CSS: cero JavaScript, cero librerías.
   Donde el navegador no la soporta, sencillamente no pasa nada y la foto se
   queda quieta. El recorrido es corto a propósito: seis por ciento arriba y
   seis abajo. Más que eso ya es un efecto, y esto no va de efectos. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hablemos__fondo {
      animation: deriva linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    @keyframes deriva {
      from { transform: translateY(-6%) scale(1.13); }
      to   { transform: translateY(6%) scale(1.13); }
    }
  }
}

/* --- La invitación --- */

.hablemos__titular {
  font-size: var(--t-2xl);
  max-width: 15ch;
  margin-top: 0.25em;
}

.hablemos__entrada {
  margin-top: var(--e-3);
  max-width: 46ch;
  color: var(--texto-suave);
}

@media (min-width: 64rem) {
  .hablemos__invitacion { max-width: 58%; }
}

/* La entrada, escalonada: rótulo, titular y párrafo con una décima entre
   ellos. Es el único momento con movimiento de la sección, y por eso se nota.
   El contenedor deja de moverse él, pero conserva «aparece»: de ahí saca el
   JS a quién vigilar. */
.hablemos__invitacion.aparece {
  opacity: 1;
  transform: none;
  transition: none;
}

.hablemos__invitacion.aparece > * {
  opacity: 0;
  transform: translateY(1rem);
}

.hablemos__invitacion.aparece.visible > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
}

.hablemos__invitacion.aparece.visible > *:nth-child(2) { transition-delay: 0.1s; }
.hablemos__invitacion.aparece.visible > *:nth-child(3) { transition-delay: 0.2s; }
.hablemos__invitacion.aparece.visible > *:nth-child(4) { transition-delay: 0.3s; }

/* --- El horizonte --------------------------------------------------------
   Cruza la pantalla de borde a borde y se dibuja solo, de izquierda a derecha,
   como se descubre un horizonte. Es lo único gráfico que se añade y separa el
   momento de leer del momento de decidir. */

.hablemos__horizonte {
  position: relative;
  height: 1px;
  background: rgba(243, 238, 228, 0.28);
  margin-block: var(--e-5);
}

.hablemos__horizonte.aparece {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.6s var(--curva) 0.25s;
}

.hablemos__horizonte.aparece.visible { transform: scaleX(1); }

/* Y una vez dibujado, respira: sube y baja unos píxeles muy despacio, como una
   marea. Doce segundos de ida y vuelta — si se nota que se mueve, sobra. */
@media (prefers-reduced-motion: no-preference) {
  .hablemos__horizonte.visible { animation: marea 12s ease-in-out 2s infinite; }

  @keyframes marea {
    0%, 100% { margin-block: var(--e-5); }
    50% { margin-block: calc(var(--e-5) + 6px) calc(var(--e-5) - 6px); }
  }
}

/* --- El formulario -------------------------------------------------------
   Se va al lado contrario del titular. Con el fuego de fondo, la diagonal
   entre los dos es la composición: texto arriba a la izquierda, formulario
   abajo a la derecha, y la noche en las dos esquinas que quedan. */

@media (min-width: 64rem) {
  .hablemos__forma {
    width: min(100%, 38rem);
    margin-left: auto;
  }
}

/* Nombre y teléfono comparten línea: tres cajas iguales apiladas es lo que
   hacía que esto se leyera como un impreso. */
.forma__linea {
  display: grid;
  gap: 0 var(--e-4);
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .forma__linea { grid-template-columns: 1fr 1fr; }
}

.campo--destinos { display: block; }

/* Los destinos no son botones: son nombres de sitios, en la tipografía de los
   titulares, con un filete debajo. Una colección de posibilidades señaladas. */
.destinos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.4em;
}

.destino {
  padding: 0.1em 0 0.35em;
  border: 0;
  border-bottom: 1px solid rgba(243, 238, 228, 0.28);
  border-radius: 0;
  background: none;
  color: var(--texto-suave);
  font-family: var(--display);
  font-size: var(--t-m);
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.3s var(--curva), border-color 0.3s var(--curva);
}

@media (hover: hover) {
  .destino:hover { color: var(--hueso); border-bottom-color: currentColor; }
}

/* El naranja de marca sobre negro no tiene contraste suficiente a este cuerpo;
   se usa el aclarado que ya emplean los destacados en fondo oscuro. */
.destino.is-elegido {
  color: #ef8f56;
  border-bottom-color: #ef8f56;
}

.destino:focus-visible {
  outline: 2px solid #ef8f56;
  outline-offset: 3px;
}

/* --- El botón ------------------------------------------------------------
   Es donde termina la mirada. Ocupa el ancho entero y, sobre la noche, va en
   hueso: el punto más claro de toda la sección. El filete que se alarga es el
   movimiento; una flecha sería lo que hace todo el mundo. */

.hablemos__boton {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-3);
  padding: 1.35em 1.6em;
  margin-top: var(--e-3);
}

.hablemos__boton::after {
  content: '';
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--curva);
}

@media (hover: hover) {
  .hablemos__boton:hover::after { width: 4rem; }
}

.hablemos__letra {
  margin-top: var(--e-3);
  font-size: var(--t-s);
  color: var(--texto-suave);
  max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
  .destino,
  .hablemos__boton::after { transition: none; }

  /* Llevan dos clases, así que le ganan a la regla general de «.aparece» de
     base.css. Sin repetirlas aquí, quien pide menos movimiento se quedaría el
     horizonte sin dibujar y el texto invisible. */
  .hablemos__invitacion.aparece > *,
  .hablemos__invitacion.aparece.visible > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hablemos__horizonte.aparece,
  .hablemos__horizonte.aparece.visible {
    transform: none;
    transition: none;
  }
}

.telefono {
  display: inline-block;
  font-family: var(--display);
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1em;
  transition: color 0.3s var(--curva);
}

@media (hover: hover) {
  .telefono:hover { color: var(--fuego); }
}

/* --- Pie ----------------------------------------------------------------- */

.pie {
  padding: var(--e-5) var(--margen) var(--e-3);
  background: var(--noche);
  color: var(--hueso);
  --linea: rgba(243, 238, 228, 0.18);
  --texto-suave: rgba(243, 238, 228, 0.6);
}

.pie__rejilla {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  max-width: var(--ancho);
  margin-inline: auto;
}

/* A 44rem las tres columnas del pie miden 182 px y hello@yemanjagroup.com
   (187 px, sin sitio donde partir) se salía. A 48rem ya entra. */
@media (min-width: 48rem) {
  .pie__rejilla { grid-template-columns: repeat(3, 1fr); }
}

.pie h2 {
  font-size: var(--t-l);
  max-width: 20ch;
}

.pie li + li { margin-top: 0.5em; }

.pie li { overflow-wrap: break-word; }

@media (hover: hover) {
  .pie a:hover { color: var(--fuego); }
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  justify-content: space-between;
  max-width: var(--ancho);
  margin: var(--e-5) auto 0;
  padding-top: var(--e-2);
  border-top: 1px solid var(--linea);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

/* --- Lo que queremos que se quede -----------------------------------------
   Una idea por bloque, nunca dos en la misma pantalla: en cuanto el color se
   repite deja de destacar y pasa a ser decoración. Sobre fondo oscuro el fuego
   pierde fuerza, así que ahí sube de tono. */

.clave {
  color: var(--fuego);
  font-weight: 500;
}

.oscuro .clave,
.portada .clave { color: #ef8f56; }

/* --- Utilidades ----------------------------------------------------------
   Pocas y con nombre. La CSP no permite estilos en línea, así que todo lo
   puntual vive aquí. */

.sep-2 { margin-top: var(--e-2); }
.sep-3 { margin-top: var(--e-3); }
.sep-4 { margin-top: var(--e-4); }
.sep-5 { margin-top: var(--e-5); }

.apagado { color: var(--texto-suave); }

.sep-pie { margin-bottom: var(--e-2); }

.rotulo--claro { color: rgba(243, 238, 228, 0.75); }

.ar-45 { --ar: 4 / 5; }
.ar-11 { --ar: 1 / 1; }
.ar-32 { --ar: 3 / 2; }
.ar-169 { --ar: 16 / 9; }
.ar-219 { --ar: 21 / 9; }

/* Una banda 21:9 en un móvil de 360 px son 154 px de alto: una rendija en la
   que no se ve la foto. En pantallas estrechas se recortan menos. */
@media (max-width: 44rem) {
  .ar-219 { --ar: 3 / 2; }
  .ar-169 { --ar: 4 / 3; }
}

/* --- Información básica de protección de datos --------------------------- */

.basica {
  margin-top: var(--e-3);
  border-top: 1px solid var(--linea);
}

.basica > div {
  display: grid;
  gap: 0.2em var(--e-3);
  padding-block: var(--e-2);
  border-bottom: 1px solid var(--linea);
}

@media (min-width: 40rem) {
  .basica > div { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}

.basica dt {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.basica dd { margin: 0; }

/* --- Documento legal ----------------------------------------------------- */

.documento h2 {
  font-size: var(--t-xl);
  margin-top: var(--e-4);
  margin-bottom: var(--e-2);
}

.documento p + p,
.documento ul { margin-top: var(--e-2); }

.documento li {
  padding-left: 1.2em;
  position: relative;
}

.documento li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--texto-suave);
}

.documento li + li { margin-top: 0.4em; }