/* ==========================================================================
   MEXICO ESPIRITUAL - Rituales eternos
   Catemaco, Veracruz

   Direccion: la pagina es de noche y el ritual es lo unico encendido.
   Obsidiana calida de fondo, oro de copal para lo que importa, morado del
   rebozo del guia para lo secundario. La greca escalonada mexicana es el
   unico ornamento y aparece siempre con intencion, nunca de relleno.
   ========================================================================== */

/* ---------- 1. Fichas ---------- */

:root {
  /* Color: todo en OKLCH */
  --noche:        oklch(0.145 0.020 55);
  --noche-2:      oklch(0.190 0.023 57);
  --noche-3:      oklch(0.235 0.026 58);
  --linea:        oklch(0.320 0.028 60 / 0.55);
  --linea-viva:   oklch(0.430 0.040 62 / 0.75);

  --copal:        oklch(0.815 0.135 78);
  --copal-hondo:  oklch(0.680 0.125 70);
  --amatista:     oklch(0.640 0.135 305);
  --verde-wa:     oklch(0.735 0.170 152);
  --verde-wa-2:   oklch(0.660 0.160 152);

  --hueso:        oklch(0.960 0.010 85);
  --hueso-2:      oklch(0.790 0.016 80);
  --hueso-3:      oklch(0.655 0.020 78);
  /* Tono para el texto que va encima de una fotografia */
  --sobre-foto:   oklch(0.905 0.014 82);

  /* Tipografia */
  --sans: 'Inter', 'Inter respaldo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', 'Fraunces respaldo', 'Iowan Old Style', Georgia, serif;
  --wonk: 'SOFT' 40, 'WONK' 1;

  /* Ritmo */
  --ancho: 74rem;
  /* max() por el notch: viewport-fit=cover deja el contenido debajo de la muesca
     cuando el telefono se pone en apaisado. */
  --margen: max(clamp(1.1rem, 4.2vw, 2.75rem), env(safe-area-inset-left), env(safe-area-inset-right));
  /* Ancho total de una caja que lleva el margen DENTRO, para que el contenido
     util mida siempre --ancho, se cuente el padding donde se cuente. */
  --caja: calc(var(--ancho) + var(--margen) * 2);
  --seccion-y: clamp(3.4rem, 8.5vw, 7rem);
  --radio: 4px;
  --radio-g: 10px;

  /* Movimiento */
  --sal: cubic-bezier(0.22, 1, 0.36, 1);
  --suave: cubic-bezier(0.4, 0, 0.2, 1);

  /* Capas, nombradas por lo que son.
     Las tres primeras son locales: viven dentro de una seccion que se aisla
     (hero, banda, cierre) y nunca compiten con el resto de la pagina. */
  --z-foto:     -3;
  --z-velo:     -2;
  --z-brillo:   -1;
  --z-cabecera: 100;
  --z-barra:    200;
  --z-menu:     300;

  --alto-cab: 3.9rem;

  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --alto-cab: 4.75rem; }
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
  /* Deja el hueco de la barra siempre reservado: al abrir la hoja se pone
     overflow:hidden y sin esto la pagina entera salta unos pixeles. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--noche);
  color: var(--hueso);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--copal);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--copal); color: var(--noche); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.saltar {
  position: fixed;
  inset-inline-start: var(--margen);
  inset-block-start: 0.75rem;
  z-index: var(--z-menu);
  transform: translateY(-200%);
  padding: 0.7rem 1.1rem;
  background: var(--copal);
  color: var(--noche);
  font-weight: 600;
  border-radius: var(--radio);
  transition: transform 0.18s var(--sal);
}
.saltar:focus { transform: none; }

[id] { scroll-margin-top: calc(var(--alto-cab) + 1.2rem); }

/* Aparicion al entrar en pantalla. Solo se apaga si hay JS, para que sin JS
   todo siga visible. */
.js .rev {
  opacity: 0;
  transform: translateY(14px);
  /* background-color va aqui porque este atajo pisa entero al de .ritual
     (mas especifico) y si no, las tarjetas se quedan sin transicion de hover. */
  transition: opacity 0.28s var(--sal), transform 0.28s var(--sal),
              background-color 0.2s var(--suave);
}
.js .rev.vista { opacity: 1; transform: none; }

/* ---------- 3. Piezas comunes ---------- */

.epigrafe {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copal);
  margin-bottom: 0.85rem;
}

.seccion {
  padding-block: var(--seccion-y);
  padding-inline: var(--margen);
}

.seccion__cab { max-width: 40rem; }

.seccion h2 { font-size: clamp(1.8rem, 1.15rem + 3.1vw, 3.15rem); }

.seccion__bajada {
  margin-top: 1rem;
  color: var(--hueso-2);
  max-width: 34rem;
}

.btn {
  --btn-fondo: transparent;
  --btn-tinta: var(--hueso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.85rem;
  padding: 0.7rem 1.25rem;
  background: var(--btn-fondo);
  color: var(--btn-tinta);
  border-radius: var(--radio);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-align: center;
  transition: transform 0.14s var(--suave), background-color 0.18s var(--suave),
              color 0.18s var(--suave);
}
.btn:active { transform: scale(0.97); }

.btn__ico { width: 1.15em; height: 1.15em; fill: currentColor; stroke: none; flex: none; }

.btn--wa { --btn-fondo: var(--verde-wa); --btn-tinta: oklch(0.16 0.03 152); }
.btn--wa:hover { --btn-fondo: var(--verde-wa-2); }

.btn--grande {
  min-height: 3.2rem;
  padding-inline: clamp(1.05rem, 3.4vw, 1.6rem);
  font-size: 1rem;
}
.btn--bloque { width: 100%; }

/* Enlace secundario: no compite con el boton principal */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.85rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--hueso);
  position: relative;
  transition: color 0.18s var(--suave);
}
.enlace-flecha svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: var(--copal);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.24s var(--sal);
}
.enlace-flecha::after {
  content: '';
  position: absolute;
  left: 0;
  right: 1.5em;
  bottom: 0.6rem;
  height: 1px;
  background: var(--copal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--sal);
}
.enlace-flecha:hover { color: var(--copal); }
.enlace-flecha:hover::after { transform: scaleX(1); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* ---------- 4. Cabecera ---------- */

.cab {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera);
  transition: background-color 0.24s var(--suave), border-color 0.24s var(--suave);
  border-bottom: 1px solid transparent;
}
.cab.pegada {
  background: oklch(0.145 0.020 55 / 0.92);
  border-bottom-color: var(--linea);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.cab__caja {
  max-width: var(--caja);
  margin-inline: auto;
  min-height: var(--alto-cab);
  padding-inline: var(--margen);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marca { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.marca__signo { width: 1.7rem; height: 1.7rem; color: var(--copal); flex: none; }
.marca__texto { display: flex; flex-direction: column; }
.marca__nombre {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.marca__linea {
  font-size: 0.63rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--hueso-3);
  margin-top: 0.18rem;
}

.cab__nav { display: none; gap: 1.6rem; }
.cab__nav a {
  font-size: 0.88rem;
  color: var(--hueso-2);
  position: relative;
  padding-block: 0.35rem;
  transition: color 0.18s var(--suave);
}
.cab__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--copal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--sal);
}
.cab__nav a:hover { color: var(--hueso); }
.cab__nav a:hover::after { transform: scaleX(1); }

.cab__wa { display: none; }

.hamb {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-content: center;
  gap: 6px;
  margin-right: -0.6rem;
}
.hamb span {
  display: block;
  width: 22px;
  height: 1.6px;
  background: var(--hueso);
  transition: transform 0.22s var(--sal), opacity 0.16s var(--suave);
}
.hamb[aria-expanded='true'] span:first-child { transform: translateY(3.8px) rotate(45deg); }
.hamb[aria-expanded='true'] span:last-child { transform: translateY(-3.8px) rotate(-45deg); }

.menu {
  position: absolute;
  max-height: calc(100svh - var(--alto-cab));
  overflow-y: auto;
  overscroll-behavior: contain;
  inset-inline: 0;
  top: 100%;
  z-index: var(--z-menu);
  border-top: 1px solid var(--linea);
  background: oklch(0.165 0.021 56 / 0.98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 0.8rem var(--margen) calc(1.1rem + env(safe-area-inset-bottom));
}
.menu[hidden] { display: none; }
.menu__nav { display: grid; }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 1.28rem;
  font-weight: 600;
}
.menu__nav a span {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--copal);
}
.menu__wa { margin-top: 1.1rem; width: 100%; }

/* ---------- 5. Hero ---------- */

/* El texto vive en el espacio vacio de arriba de la foto; el ritual queda
   entero por debajo. La altura esta calculada para que ningun rostro ni el
   altar queden tapados. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(96svh, 52rem);
  display: flex;
  align-items: flex-start;
  padding: calc(var(--alto-cab) + 0.9rem) var(--margen) 2rem;
  overflow: hidden;
}

.hero__fondo { position: absolute; inset: 0; z-index: var(--z-foto); }
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    linear-gradient(to bottom,
      oklch(0.145 0.020 55 / 0.95) 0%,
      oklch(0.145 0.020 55 / 0.90) 26%,
      oklch(0.145 0.020 55 / 0.60) 37%,
      oklch(0.145 0.020 55 / 0.18) 48%,
      oklch(0.145 0.020 55 / 0) 58%),
    linear-gradient(to top,
      var(--noche) 0%,
      oklch(0.145 0.020 55 / 0.45) 13%,
      oklch(0.145 0.020 55 / 0) 32%);
}

/* Resplandor de las veladoras. Estatico a proposito:
   - con mix-blend-mode dentro de un grupo aislado apagaba la foto entera;
   - con una animacion infinita de opacidad la capa se promociona al
     compositor, rompe las capturas y deja la GPU trabajando sin parar.
   El parpadeo no aportaba nada que la foto no tenga ya. */
.hero__brasa {
  position: absolute;
  inset: 0;
  z-index: var(--z-brillo);
  pointer-events: none;
  background: radial-gradient(52% 24% at 50% 74%,
    oklch(0.78 0.15 62 / 0.11), oklch(0.78 0.15 62 / 0) 72%);
}

.hero__caja {
  position: relative;
  max-width: 34rem;
  width: 100%;
}

.hero__titulo {
  font-size: clamp(2rem, 1.05rem + 4.6vw, 4.5rem);
  font-weight: 600;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 144;
}

.hero__bajada {
  margin-top: 1.05rem;
  color: var(--sobre-foto);
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.12rem);
  max-width: 30rem;
}

.hero__acciones {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.15rem;
}

/* Telefono en apaisado: 96svh son ~370 px y el texto del hero no cabia,
   asi que el unico boton de conversion quedaba debajo del pliegue. */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    align-items: flex-start;
    padding-block: calc(var(--alto-cab) + 0.6rem) 1.6rem;
  }
  .hero__titulo { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
  .hero__bajada { margin-top: 0.7rem; font-size: 0.9rem; }
  .hero__acciones { margin-top: 1rem; }
  .hero__caja { max-width: 30rem; }
  .hero__velo {
    background:
      linear-gradient(97deg,
        var(--noche) 0%,
        oklch(0.145 0.020 55 / 0.95) 38%,
        oklch(0.145 0.020 55 / 0.55) 58%,
        oklch(0.145 0.020 55 / 0) 78%),
      linear-gradient(to top, var(--noche) 0%, oklch(0.145 0.02 55 / 0) 26%);
  }
  .hero__fondo img { object-position: 60% 42%; }
}

/* ---------- 6. Franja de rituales ---------- */

.franja {
  border-block: 1px solid var(--linea);
  background: var(--noche-2);
  padding-block: 0.85rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-inline: var(--margen);
}

.franja__rotulo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hueso-3);
  flex: none;
}

.franja__lista {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
  flex: 1;
  /* El difuminado del borde avisa de que la lista sigue */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
@media (min-width: 1100px) {
  .franja__lista { -webkit-mask-image: none; mask-image: none; }
}
.franja__lista::-webkit-scrollbar { display: none; }
.franja__lista li { flex: none; scroll-snap-align: start; }

.franja__lista button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.4rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hueso-2);
  white-space: nowrap;
  transition: color 0.18s var(--suave), transform 0.14s var(--suave);
}
.franja__lista button::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--copal-hondo);
  transform: rotate(45deg);
  transition: background-color 0.18s var(--suave), transform 0.22s var(--sal);
}
.franja__lista button:hover { color: var(--hueso); }
.franja__lista button:active { transform: scale(0.97); }
.franja__lista button:hover::before { background: var(--copal); transform: rotate(45deg) scale(1.35); }

/* ---------- 7. Rituales ---------- */

.rituales { max-width: var(--caja); margin-inline: auto; }

.rejilla {
  margin-top: clamp(1.8rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  overflow: hidden;
}

.ritual {
  position: relative;
  background: var(--noche-2);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.2rem 0.95rem;
  padding: 0.95rem 1rem;
  transition: background-color 0.2s var(--suave);
}
.ritual:hover, .ritual:focus-within { background: var(--noche-3); }

.ritual__glifo {
  grid-row: 1 / -1;
  width: 2.1rem;
  height: 2.1rem;
  fill: none;
  stroke: var(--copal-hondo);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s var(--suave), transform 0.26s var(--sal);
}
.ritual:hover .ritual__glifo, .ritual:focus-within .ritual__glifo {
  stroke: var(--copal);
  transform: translateY(-2px);
}

.ritual__num {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--hueso-3);
  grid-column: 2;
}

.ritual__nombre {
  grid-column: 2;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  font-weight: 600;
  line-height: 1.22;
}
.ritual__abrir { text-align: left; }
/* Toda la tarjeta es el area tactil */
.ritual__abrir::after { content: ''; position: absolute; inset: 0; }

.ritual__situacion {
  grid-column: 2;
  margin-top: 0.22rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--hueso-3);
  line-height: 1.45;
}

.ritual__mas {
  grid-row: 1 / -1;
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--copal);
  white-space: nowrap;
}
.ritual__mas svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.24s var(--sal);
}
.ritual:hover .ritual__mas svg { transform: translateX(3px); }

.ritual__mas > :not(svg) { display: none; }

/* Sin JavaScript las fichas se leen debajo de cada tarjeta; con JavaScript se
   esconden y su contenido se clona dentro de la hoja. Mismo patron que .rev. */
.js .ficha { display: none; }
.ficha {
  grid-column: 2 / -1;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linea);
  font-size: 0.88rem;
  color: var(--hueso-2);
}
.ficha .ficha__resumen { color: var(--copal); font-weight: 500; }
.ficha .ficha__detalle { margin-top: 0.35rem; }
.ficha .ficha__marcas { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.5rem; }
.ficha .ficha__marcas li { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hueso-3); }
.ficha .ficha__nota { margin-top: 0.5rem; font-style: italic; color: var(--hueso-3); }

/* ---------- 8. Banda ---------- */

.banda {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(2.4rem, 7vw, 4.5rem) var(--margen);
  min-height: clamp(12rem, 26vw, 20rem);
  overflow: hidden;
}
.banda__img {
  position: absolute;
  inset: 0;
  z-index: var(--z-foto);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
}
.banda::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    linear-gradient(to bottom, var(--noche) 0%, oklch(0.145 0.02 55 / 0.46) 28%,
      oklch(0.145 0.02 55 / 0.46) 72%, var(--noche) 100%),
    oklch(0.145 0.02 55 / 0.22);
}
.banda__texto {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.35rem, 0.9rem + 2.3vw, 2.5rem);
  line-height: 1.24;
  text-align: center;
  text-wrap: balance;
  max-width: 26rem;
}
.banda__texto em { color: var(--copal); font-style: normal; }

/* ---------- 9. Proceso ---------- */

.proceso__caja {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.pasos { margin-top: clamp(1.6rem, 3.5vw, 2.6rem); display: grid; gap: 1px; }

.paso {
  position: relative;
  padding: 1.25rem 0 1.35rem 3.1rem;
  border-top: 1px solid var(--linea);
}
.paso:last-child { border-bottom: 1px solid var(--linea); }

.paso__num {
  position: absolute;
  left: 0;
  top: 1.3rem;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 1.05rem;
  color: var(--copal);
}
.paso__titulo {
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.4rem);
  margin-bottom: 0.35rem;
}
.paso p { color: var(--hueso-2); font-size: 0.95rem; }

.proceso__foto {
  margin: 0;
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid var(--linea);
}
.proceso__foto img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10;
  /* Desplazado a la izquierda: al recortar en vertical, el centro se comia el
     pendulo, que es justo lo que anuncia el alt. */
  object-position: 34% 50%;
}

/* ---------- 10. Catemaco ---------- */

.catemaco { background: var(--noche-2); border-block: 1px solid var(--linea); }

.catemaco__caja {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.8rem, 5vw, 3.5rem);
  align-items: center;
}

.catemaco__foto {
  margin: 0;
  border-radius: var(--radio-g);
  overflow: hidden;
  border: 1px solid var(--linea);
  position: relative;
}
.catemaco__foto picture { display: contents; }
.catemaco__foto img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 30%; }

.catemaco__texto h2 { margin-bottom: 1.1rem; }
.catemaco__texto p { color: var(--hueso-2); }
.catemaco__texto p + p { margin-top: 0.9rem; }

.catemaco__texto .catemaco__pie {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hueso-3);
}
.catemaco__pie svg { width: 1.05rem; height: 1.05rem; color: var(--copal); flex: none; }

/* ---------- 11. Preguntas ---------- */

.preguntas { max-width: calc(52rem + var(--margen) * 2); margin-inline: auto; }

.faq { margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }

.faq__item { border-top: 1px solid var(--linea); }
.faq__item:last-child { border-bottom: 1px solid var(--linea); }

.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 0;
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.28rem);
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.18s var(--suave);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--copal); }
.faq__item summary span { flex: 1; }
.faq__item summary::after {
  content: '';
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-right: 1.5px solid var(--copal);
  border-bottom: 1.5px solid var(--copal);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.26s var(--sal);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.faq__cuerpo { padding-bottom: 1.25rem; }
.faq__cuerpo p { color: var(--hueso-2); max-width: 44rem; }

.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.26s var(--sal), content-visibility 0.26s allow-discrete;
}
.faq__item[open]::details-content { block-size: auto; }

/* ---------- 12. Cierre ---------- */

.cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3.5rem, 9vw, 6.5rem) var(--margen) clamp(3.5rem, 9vw, 6.5rem);
  text-align: center;
}
.cierre__img {
  position: absolute;
  inset: 0;
  z-index: var(--z-foto);
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}
.cierre__velo {
  position: absolute;
  inset: 0;
  z-index: var(--z-velo);
  background:
    radial-gradient(72% 95% at 50% 52%, oklch(0.145 0.02 55 / 0.66), oklch(0.145 0.02 55 / 0.92) 72%),
    linear-gradient(to bottom, var(--noche), oklch(0.145 0.02 55 / 0.6) 40%, var(--noche));
}
.cierre__caja { max-width: 34rem; margin-inline: auto; }
.cierre h2 { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.5rem); }
.cierre__bajada { margin-top: 1rem; color: var(--sobre-foto); }
.cierre .btn { margin-top: 1.7rem; }
.cierre__dato {
  margin-top: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  color: var(--hueso-2);
}

/* ---------- 13. Pie ---------- */

.pie {
  border-top: 1px solid var(--linea);
  padding: clamp(2.2rem, 5vw, 3.2rem) var(--margen) 2rem;
  background: var(--noche-2);
}
.pie__caja {
  max-width: var(--ancho);
  margin-inline: auto;
  display: grid;
  gap: 1.8rem;
}
.pie__marca { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.65rem; align-items: center; }
.pie__marca .marca__signo { grid-row: 1 / 3; width: 2rem; height: 2rem; }
.pie__marca .marca__nombre { font-size: 1.15rem; }

.pie__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.pie__nav a {
  font-size: 0.88rem;
  color: var(--hueso-2);
  padding-block: 0.3rem;
  transition: color 0.18s var(--suave);
}
.pie__nav a:hover { color: var(--copal); }

.pie__wa {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.6rem;
  font-weight: 500;
  color: var(--hueso);
  transition: color 0.18s var(--suave);
}
.pie__wa svg { width: 1.25rem; height: 1.25rem; fill: var(--verde-wa); stroke: none; }
.pie__wa:hover { color: var(--copal); }

.pie__aviso,
.pie__firma {
  max-width: var(--ancho);
  margin-inline: auto;
  font-size: 0.76rem;
  color: var(--hueso-3);
  line-height: 1.55;
}
.pie__aviso {
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--linea);
}
.pie__firma { margin-top: 0.7rem; }

/* ---------- 14. Barra fija de movil ---------- */

.barra {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-barra);
  padding: 0.6rem var(--margen) calc(0.6rem + env(safe-area-inset-bottom));
  background: oklch(0.145 0.020 55 / 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
  transform: translateY(110%);
  /* Fuera de pantalla tambien fuera del recorrido de tabulacion: si no, el foco
     se va a un boton que no se ve. La visibilidad se retrasa lo que dura el
     deslizamiento para no cortar la animacion. */
  visibility: hidden;
  transition: transform 0.26s var(--sal), visibility 0s linear 0.26s;
}
.barra.dentro { visibility: visible; transition: transform 0.26s var(--sal), visibility 0s; }
.barra[hidden] { display: none; }
/* Con el menu abierto ya hay un boton de WhatsApp en pantalla */
.con-menu .barra { transform: translateY(110%); }
.barra.dentro { transform: none; }
.barra .btn { width: 100%; min-height: 3rem; }

/* Sitio para la barra al final de la pagina */
@media (max-width: 899px) {
  .pie { padding-bottom: calc(2rem + 4.4rem + env(safe-area-inset-bottom)); }
}

/* ---------- 15. Hoja del ritual ---------- */

.hoja {
  width: 100%;
  max-width: 34rem;
  max-height: 90svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--radio-g) var(--radio-g) 0 0;
  background: var(--noche-2);
  color: var(--hueso);
  overflow: hidden;
  /* Sin display aqui: el navegador le pone display:none a un dialog cerrado y
     ponerlo a flex lo dejaba maquetado al final de la pagina, ocupando sitio y
     dejando dos paradas de foco invisibles. La transicion de display va con
     allow-discrete, asi que la animacion de salida se conserva. */
  flex-direction: column;
  box-shadow: 0 -1px 0 var(--linea-viva), 0 -24px 60px oklch(0 0 0 / 0.55);

  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.2s var(--suave), transform 0.28s var(--sal),
              overlay 0.28s allow-discrete, display 0.28s allow-discrete;
}
.hoja[open] { display: flex; opacity: 1; transform: translateY(0); }
@starting-style { .hoja[open] { opacity: 0; transform: translateY(100%); } }

.hoja::backdrop {
  background: oklch(0.09 0.012 55 / 0.74);
  opacity: 0;
  transition: opacity 0.22s var(--suave), overlay 0.22s allow-discrete, display 0.22s allow-discrete;
}
.hoja[open]::backdrop { opacity: 1; }
@starting-style { .hoja[open]::backdrop { opacity: 0; } }

.hoja.arrastrando { transition: none; }

.hoja__asa {
  width: 2.5rem;
  height: 4px;
  border-radius: 4px;
  background: var(--linea-viva);
  margin: 0.7rem auto 0;
  flex: none;
}

.hoja__cerrar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  color: var(--hueso-2);
  transition: color 0.18s var(--suave), background-color 0.18s var(--suave);
}
.hoja__cerrar svg { width: 1.1rem; height: 1.1rem; }
.hoja__cerrar:hover { color: var(--hueso); background: var(--noche-3); }
.hoja__cerrar:active { transform: scale(0.94); }

.hoja__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.3rem 1.4rem 0.4rem;
  -webkit-overflow-scrolling: touch;
}

.hoja__cab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.9rem;
  align-items: center;
  padding-right: 2.2rem;
}
.hoja__glifo {
  grid-row: 1 / 3;
  width: 2.6rem;
  height: 2.6rem;
  fill: none;
  stroke: var(--copal);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hoja__num {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--hueso-3);
}
.hoja__titulo { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); }

.hoja__cuerpo { margin-top: 1.1rem; }
.hoja__cuerpo .ficha__resumen {
  font-family: var(--serif);
  font-variation-settings: var(--wonk);
  font-size: 1.1rem;
  color: var(--copal);
  line-height: 1.35;
}
.hoja__cuerpo .ficha__detalle { margin-top: 0.8rem; color: var(--hueso-2); }
.hoja__cuerpo .ficha__marcas {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.hoja__cuerpo .ficha__marcas li {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hueso-2);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}
.hoja__cuerpo .ficha__nota {
  margin-top: 1.1rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--amatista);
  color: var(--hueso-2);
  font-size: 0.9rem;
  font-style: italic;
}

.hoja__pie {
  flex: none;
  padding: 1rem 1.4rem calc(1.1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--noche-2);
}
.hoja__aviso {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.74rem;
  color: var(--hueso-3);
}

/* ---------- 16. Testimonios (se activan desde datos.js) ---------- */

.testimonios { max-width: var(--caja); margin-inline: auto; }
.testimonios__carril {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--margen) * -1);
  padding-inline: var(--margen);
}
.testimonios__carril::-webkit-scrollbar { display: none; }
.testi {
  flex: 0 0 min(88%, 22rem);
  scroll-snap-align: start;
  background: var(--noche-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-g);
  padding: 1.3rem 1.35rem;
}
.testi__texto { font-family: var(--serif); font-variation-settings: var(--wonk); font-weight: 600; font-size: 1.05rem; line-height: 1.4; }
.testi__quien { margin-top: 1rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hueso-3); }

/* ==========================================================================
   17. Tamanios grandes
   ========================================================================== */

@media (min-width: 600px) {
  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .ritual--ancha { grid-column: span 2; }
}

/* Tableta: las fotos a ancho completo dejaban la pagina mas larga aqui que en
   movil (una foto 4:5 a 820 px son mas de mil pixeles de alto). */
@media (min-width: 700px) {
  .proceso__caja { grid-template-columns: 1fr 0.55fr; align-items: center; }
  .proceso__foto img { aspect-ratio: 3 / 4; }
  .catemaco__caja { grid-template-columns: 0.8fr 1fr; }

}

@media (min-width: 820px) {
  .hero {
    align-items: center;
    min-height: min(88svh, 48rem);
    padding-block: calc(var(--alto-cab) + 2rem) 3rem;
  }
  .hero__fondo img { object-position: 50% 38%; }
  .hero__velo {
    background:
      linear-gradient(97deg,
        var(--noche) 0%,
        oklch(0.145 0.020 55 / 0.97) 30%,
        oklch(0.145 0.020 55 / 0.90) 46%,
        oklch(0.145 0.020 55 / 0.55) 60%,
        oklch(0.145 0.020 55 / 0.14) 73%,
        oklch(0.145 0.020 55 / 0) 84%),
      linear-gradient(to bottom, oklch(0.145 0.02 55 / 0.55) 0%, oklch(0.145 0.02 55 / 0) 20%),
      linear-gradient(to top, var(--noche) 0%, oklch(0.145 0.02 55 / 0.4) 12%, oklch(0.145 0.02 55 / 0) 30%);
  }
  .hero__brasa {
    background: radial-gradient(30% 40% at 68% 62%,
      oklch(0.72 0.16 62 / 0.26), oklch(0.72 0.16 62 / 0) 70%);
  }
  .hero__caja { max-width: 32rem; margin-left: max(0px, calc((100% - var(--ancho)) / 2)); }
}

/* El retrato cambia de persona a la vez que el hero, no antes */
@media (min-width: 820px) {
  .catemaco__foto img { aspect-ratio: 4 / 5; object-position: 50% 22%; }
}

@media (min-width: 900px) {
  .cab__nav { display: flex; }
  .cab__wa { display: inline-flex; }
  .hamb { display: none; }
  .menu { display: none; }
  .barra { display: none; }

  /* La rejilla de rituales pasa a ser una tabla de codice: 3 arriba, 4 abajo */
  .rejilla { grid-template-columns: repeat(12, 1fr); }
  .ritual {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.6rem 1.5rem 1.5rem;
    min-height: 13.75rem;
  }
  .ritual:nth-child(-n + 3) { grid-column: span 4; }
  .ritual--ancha { grid-column: span 3; }

  .ritual__glifo { width: 2.4rem; height: 2.4rem; }
  .ritual__num {
    position: absolute;
    top: 1.4rem;
    right: 1.5rem;
    font-size: 0.72rem;
  }
  .ritual__nombre { margin-top: 0.35rem; }
  .ritual__situacion { margin-top: 0; }
  .ritual__mas { margin-top: auto; padding-top: 0.6rem; }
  .ritual__mas > :not(svg) { display: inline; }

  .proceso__caja { grid-template-columns: 1fr 0.62fr; align-items: center; }
  .proceso__foto img { aspect-ratio: 4 / 5; }

  .catemaco__caja { grid-template-columns: 0.75fr 1fr; }

  .pie__caja {
    grid-template-columns: 1.2fr 1fr auto;
    align-items: start;
    gap: 2.5rem;
  }
  .pie__nav { flex-direction: column; gap: 0.35rem; }
  .pie__contacto { justify-self: end; }
}

@media (min-width: 1024px) {
  .hoja {
    max-width: 36rem;
    margin: auto;
    border-radius: var(--radio-g);
    max-height: 84svh;
    transform: translateY(16px) scale(0.985);
  }
  .hoja[open] { transform: none; }
  @starting-style { .hoja[open] { transform: translateY(16px) scale(0.985); } }
  .hoja__asa { display: none; }
  .hoja__scroll { padding-top: 1.6rem; }
}

/* ==========================================================================
   18. Preferencias del usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .rev { opacity: 1; transform: none; }
  /* El selector universal no alcanza a los pseudoelementos */
  .faq__item::details-content { transition-duration: 0.001ms; }
  .hoja::backdrop { transition-duration: 0.001ms; }
}

@media (prefers-contrast: more) {
  :root {
    --hueso-2: oklch(0.885 0.014 82);
    --hueso-3: oklch(0.790 0.016 80);
    --linea: oklch(0.45 0.03 60 / 0.8);
  }
}

@media print {
  /* Se reasignan los tokens: si no, todo el texto secundario sale casi blanco
     sobre papel blanco. */
  :root {
    --noche: #fff; --noche-2: #fff; --noche-3: #f4f1ec;
    --hueso: #14100c; --hueso-2: #3a332b; --hueso-3: #5a5147;
    --sobre-foto: #14100c; --copal: #7a5a14; --copal-hondo: #7a5a14;
    --linea: #c9c1b5; --linea-viva: #a89e90;
  }
  .cab, .barra, .hoja, .franja, .hero__brasa { display: none; }
  body { background: #fff; color: #14100c; }
  .hero__velo, .cierre__velo, .banda::after { display: none; }
  .hero, .cierre, .banda { min-height: 0; }
  .rejilla, .proceso__foto, .catemaco__foto { break-inside: avoid; }
}