/* =========================================================
   EstudioYasz Films · Landing de bodas
   Estructura del archivo:
   1. Fuentes          5. Portada          9.  Fotografía
   2. Variables        6. Franjas          10. Testimonios
   3. Base             7. Historias        11. Versículo
   4. Piezas comunes   8. Planes           12. Contacto y pie
                                           13. Movimiento reducido
   Punto de corte principal: 768px (móvil ↔ escritorio).
   ========================================================= */

/* ---------- 1. Fuentes (Playfair Display, incluida en el proyecto) ---------- */
@font-face { font-family: 'Playfair Display'; src: url('../assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../assets/fonts/playfair-display-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../assets/fonts/playfair-display-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../assets/fonts/playfair-display-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Playfair Display'; src: url('../assets/fonts/playfair-display-latin-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }

/* ---------- 2. Variables ---------- */
:root {
  --hueso: #F2EFE9;          /* fondo general */
  --papel: #F7F5F0;          /* fondo de Planes y del formulario */
  --grafito: #17171A;        /* texto principal, botones */
  --noche: #0F0F10;          /* fondo de video y contacto */
  --secundario: #5E5B55;     /* volantas, leyendas */
  --cuerpo: #3A3934;         /* párrafos */
  --claro: #F7F5F0;          /* texto sobre imagen */
  --filete: rgba(23, 23, 26, 0.16);
  --filete-fuerte: rgba(23, 23, 26, 0.5);
  --desaturar: grayscale(0.2) contrast(1.03); /* tratamiento de todas las imágenes */

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --margen: 28px;            /* margen lateral móvil; 100px en escritorio */
  --ancho: 1240px;
  --cabecera: 64px;
}
@media (min-width: 768px) {
  :root { --margen: 56px; --cabecera: 88px; }
}
@media (min-width: 1200px) {
  :root { --margen: 100px; }
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--grafito);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Una palabra que no cabe en su renglón (un enlace pegado, un texto sin
     espacios) se parte, en vez de ensanchar la página hacia un lado */
  overflow-wrap: anywhere;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
em { font-style: italic; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: 0; }

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 14px; background: var(--grafito); color: var(--claro); font-size: 13px;
}
.saltar:focus { top: 12px; }

/* Frases que se parten entre bloques, no dentro de uno. Si un bloque solo
   no cabe en la línea (celular angosto), ahí sí se parte, para no desbordar. */
.sin-corte { display: inline-block; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 4. Piezas comunes ---------- */
.envoltura { width: 100%; max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; padding: 0 var(--margen); }

/* Volanta: el nombre de cada sección y de cada plan o paquete. Pequeña y
   espaciada, pero con el tamaño y el peso justos para leerse de pasada. */
.volanta {
  margin-bottom: 20px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--cuerpo); font-variant-numeric: lining-nums;
}
.volanta--claro { color: rgba(247, 245, 240, 0.92); }

.titulo { font-size: 30px; font-weight: 400; line-height: 1.22; }
.titulo--claro { color: var(--claro); }
.titulo-mayus {
  font-size: 32px; font-weight: 400; line-height: 1.2;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.parrafo { font-size: 14px; line-height: 1.85; color: var(--cuerpo); text-wrap: pretty; }

.filete { width: 100%; height: 1px; margin: 24px 0 22px; border: 0; background: var(--filete-fuerte); }
.filete--suave { background: var(--filete); }

.encabezado-doble { display: flex; flex-direction: column; gap: 0; }
.encabezado-doble .titulo { margin-bottom: 20px; }

.leyenda {
  margin-top: 12px;
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--secundario);
}

.lista li {
  position: relative; padding: 7px 0 7px 18px;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cuerpo); font-variant-numeric: lining-nums; line-height: 1.6;
}
.lista li::before { content: ''; position: absolute; left: 2px; top: 1.05em; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.enlace {
  display: inline-block; margin-top: 26px; padding-bottom: 7px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  border-bottom: 1px solid rgba(23, 23, 26, 0.35);
  transition: color .3s, border-color .3s;
}
.enlace:hover { color: var(--secundario); border-color: var(--secundario); }

/* Marco 16:9: los videos nunca se recortan */
.marco-169 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--noche); }

/* Contenedor de YouTube. Debajo va la imagen del video (póster) y encima
   el iframe, que solo se muestra (.yt__visible) cuando YouTube ya quitó su
   título y sus controles. Se esconde al instante si el video se pausa. En
   cada vuelta del loop hay un momento con dos iframes: el nuevo aparece con
   un fundido encima del anterior.
   El iframe se dibuja grande (1920 px o más) y se reduce con scale(): así
   YouTube entrega la mayor calidad disponible y no la de un reproductor
   pequeño. El JS calcula --yt-w, --yt-h y --yt-escala. */
.yt {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--noche);
  filter: var(--desaturar);
}
.yt__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Portada: imagen desenfocada y oscura mientras carga el video. El
   desenfoque se elige en el panel (el HTML trae --desenfoque, --brillo y
   --agrandar); los valores de aquí son los originales. El scale() evita
   que el desenfoque deje los bordes claros. */
.yt__poster--desenfocado {
  filter: blur(var(--desenfoque, 28px)) brightness(var(--brillo, .62));
  transform: scale(var(--agrandar, 1.15));
}
.yt iframe {
  position: absolute; left: 50%; top: 50%;
  width: var(--yt-w, 1920px); height: var(--yt-h, 1080px);
  transform: translate(-50%, -50%) scale(var(--yt-escala, 1));
  border: 0; pointer-events: none; opacity: 0;
}
.yt iframe.yt__visible { opacity: 1; transition: opacity .9s ease; }
/* Video propio (archivo MP4/WebM subido en el panel o por enlace).
   Aparece con un fundido cuando empieza a reproducirse; mientras, se ve su póster. */
.yt .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .8s ease; }
.yt--cubrir .clip { object-fit: cover; }
.yt .clip.clip--listo { opacity: 1; }

/* ---------- Encabezado fijo ---------- */
.cabecera {
  position: fixed; left: 0; top: 0; right: 0; z-index: 50;
  height: var(--cabecera); padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--claro);
  transition: background-color .4s, color .4s, height .4s, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.cabecera::before { content: ''; width: 34px; } /* equilibra el botón de menú en móvil */
.cabecera__nav, .cabecera__cta { display: none; }
.cabecera__nav a, .cabecera__cta { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }
.cabecera__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
/* El logo se cambia en el panel: mientras menos ancho es, más alto se ve
   (--escala: 1 ancho, 1,2 medio, 1,4 cuadrado) y nunca pasa de max-width.
   El claro y el oscuro van en la misma celda, uno encima del otro, cada uno
   con su tamaño (pueden tener distinta forma). */
.logo--medio { --escala: 1.2; }
.logo--cuadrado { --escala: 1.4; }
.cabecera__logo img { grid-area: 1 / 1; height: calc(34px * var(--escala, 1)); width: auto; max-width: 46vw; object-fit: contain; }
.cabecera__logo .logo-oscuro { opacity: 0; transition: opacity .4s; }
.cabecera__logo .logo-claro { transition: opacity .4s; }
.cabecera__menu {
  width: 44px; height: 44px; margin-right: -10px; padding: 0 10px 0 0;
  border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px;
}
.cabecera__menu span { display: block; height: 1px; background: currentColor; }
.cabecera__menu span:first-child { width: 26px; }
.cabecera__menu span:last-child { width: 17px; }

/* Al pasar la portada el encabezado se vuelve claro y se esconde al bajar */
.cabecera--solida {
  --cabecera: 60px;
  background: rgba(242, 239, 233, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--grafito); box-shadow: 0 1px 0 var(--filete);
}
.cabecera--solida .logo-claro { opacity: 0; }
.cabecera--solida .logo-oscuro { opacity: 1; }
.cabecera--solida .cabecera__logo img { height: calc(28px * var(--escala, 1)); }
.cabecera--oculta { transform: translateY(-100%); }

@media (min-width: 768px) {
  .cabecera { padding: 0 var(--margen); }
  .cabecera::before, .cabecera__menu { display: none; }
  .cabecera__nav { display: flex; gap: 34px; }
  /* Con enlaces a secciones nuevas, los que no caben junto al logo se esconden (ver menuQueCabe en main.js) */
  .cabecera__nav a { white-space: nowrap; }
  .cabecera__nav a[hidden] { display: none; }
  .cabecera__cta { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid currentColor; border-color: rgba(244, 241, 234, 0.45); }
  .cabecera--solida .cabecera__cta { border-color: var(--filete-fuerte); }
  .cabecera__nav a, .cabecera__cta { transition: opacity .3s; }
  .cabecera__nav a:hover, .cabecera__cta:hover { opacity: .65; }
  .cabecera__logo img { height: calc(38px * var(--escala, 1)); max-width: 280px; }
}

/* ---------- Menú móvil ----------
   Abrir: el panel baja como una cortina (clip-path) y después entran, en
   cascada, los enlaces, la línea y el pie. Cerrar: el contenido se
   desvanece rápido y la cortina sube. El JS solo pone o quita .menu--abierto. */
.menu {
  --curva: cubic-bezier(.76, 0, .24, 1);
  --entrada: cubic-bezier(.2, .7, .2, 1);
  position: fixed; inset: 0; z-index: 100;
  background: var(--hueso); color: var(--grafito);
  display: flex; flex-direction: column;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--curva) .12s, visibility 0s .72s;
}
.menu--abierto {
  visibility: visible; clip-path: inset(0 0 0 0);
  transition: clip-path .7s var(--curva), visibility 0s;
}
.menu__barra { height: 64px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; }
.menu__barra > span { width: 26px; }
.menu__barra img { height: calc(28px * var(--escala, 1)); width: auto; max-width: 55vw; object-fit: contain; }
.menu__barra button { width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; }
.menu__enlaces { margin-top: auto; margin-bottom: auto; padding: 0 var(--margen); display: flex; flex-direction: column; gap: 4px; }
.menu__enlaces a { font-size: 42px; line-height: 1.5; }
.menu__pie { padding: 0 var(--margen) 44px; display: flex; flex-direction: column; gap: 18px; }
.menu__pie::before { content: ''; height: 1px; background: rgba(23, 23, 26, 0.18); }
.menu__pie p { font-size: 15px; line-height: 1.7; color: var(--cuerpo); }
.menu__pie a { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--secundario); }

/* Estado cerrado de cada pieza (también es la salida: rápida y sin retraso) */
.menu__barra img, .menu__barra svg, .menu__enlaces a, .menu__pie p, .menu__pie a {
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.menu__barra svg { transform: rotate(-90deg); }
.menu__enlaces a { display: block; transform: translateY(28px); }
.menu__pie p, .menu__pie a { transform: translateY(10px); }
.menu__pie::before { transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }

/* Entrada en cascada, cuando la cortina ya va bajando */
.menu--abierto .menu__barra img, .menu--abierto .menu__barra svg,
.menu--abierto .menu__enlaces a, .menu--abierto .menu__pie p, .menu--abierto .menu__pie a {
  opacity: 1; transform: none;
  transition: opacity .6s ease var(--espera, .35s), transform .9s var(--entrada) var(--espera, .35s);
}
.menu--abierto .menu__barra svg { --espera: .4s; }
.menu--abierto .menu__enlaces a:nth-child(1) { --espera: .32s; }
.menu--abierto .menu__enlaces a:nth-child(2) { --espera: .40s; }
.menu--abierto .menu__enlaces a:nth-child(3) { --espera: .48s; }
.menu--abierto .menu__pie::before { transform: none; transition: transform 1s var(--entrada) .5s; }
.menu--abierto .menu__pie p { --espera: .62s; }
.menu--abierto .menu__pie a { --espera: .7s; }
body.menu-abierto { overflow: hidden; }

/* ---------- 5. Portada ---------- */
.portada {
  position: relative; height: 100vh; height: 100svh; min-height: 560px;
  overflow: hidden; background: var(--noche); color: var(--claro);
}
.portada__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,15,16,.42) 0%, rgba(15,15,16,.14) 22%, rgba(15,15,16,.34) 48%, rgba(15,15,16,.82) 100%);
}
/* Con video aparte para celular hay dos capas: cada una se ve solo en su dispositivo */
.portada__video--movil { display: none; }
@media (max-width: 767px) {
  .portada__video--escritorio { display: none; }
  .portada__video--movil { display: block; }
}
/* Capa pareja sobre el video, para videos claros (--oscurecer se elige en el panel) */
.portada__velo::before { content: ''; position: absolute; inset: 0; background: rgba(15,15,16, var(--oscurecer, 0)); }
.portada__texto { position: absolute; right: 20px; bottom: 44px; font-size: 14px; }

/* Texto justificado con los mismos cortes de línea del diseño.
   Cada línea es un <span class="l">; la última de cada párrafo lleva "f".
   El ancho va en em, así las líneas caben igual a cualquier tamaño de letra. */
.just { width: 17.9em; display: flex; flex-direction: column; gap: 1.28em; line-height: 1.45; color: rgba(247,245,240,.92); }
.just p { margin: 0; }
.just .it { font-style: italic; }
.just .l { display: block; white-space: nowrap; text-align: justify; text-align-last: justify; }
.just .l.f { text-align-last: right; }
.just--titulo { display: block; margin-bottom: 1.1em; font-size: 1.1em; font-style: italic; font-weight: 500; line-height: 1.5; color: var(--claro); width: calc(17.9em / 1.1); }

.portada__desliza { display: none; }

@media (min-width: 768px) {
  .portada__velo {
    background:
      linear-gradient(180deg, rgba(15,15,16,.55) 0, rgba(15,15,16,0) 220px),
      linear-gradient(0deg, rgba(15,15,16,.55) 0, rgba(15,15,16,0) 200px),
      linear-gradient(0deg, rgba(15,15,16,.78) 0%, rgba(15,15,16,.50) 30%, rgba(15,15,16,.12) 62%, rgba(15,15,16,.08) 100%);
  }
  /* En escritorio el texto va abajo, centrado a lo ancho, y corre seguido
     (sin los cortes ni el justificado de móvil) en un bloque más ancho.
     Deja libre a cada lado el espacio de "Desliza". */
  .portada__texto {
    left: calc(var(--margen) + 110px); right: calc(var(--margen) + 110px); bottom: 56px;
    font-size: 17px; text-align: center;
  }
  .just { width: auto; max-width: 44em; margin: 0 auto; line-height: 1.6; gap: 0.9em; }
  .just--titulo { width: auto; max-width: calc(44em / 1.1); margin: 0 auto 0.9em; }
  .just p, .just--titulo { text-wrap: balance; }
  .just .l { display: inline; white-space: normal; }
  .just .l__guion { display: none; }
  .portada__desliza {
    position: absolute; left: var(--margen); bottom: 56px;
    display: flex; flex-direction: column; gap: 14px;
    font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(247,245,240,.72);
  }
  .portada__desliza span { width: 1px; height: 44px; background: rgba(247,245,240,.55); transform-origin: top; animation: desliza 2.4s ease-in-out infinite; }
}
@media (min-width: 768px) and (max-height: 700px) {
  .portada__texto { font-size: 15px; bottom: 36px; }
}
@keyframes desliza { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- 6. Franjas con foto ----------
   Con parallax (lo normal) la imagen queda fija respecto a la pantalla y la
   franja la recorta: al hacer scroll la página se desliza encima, como una
   ventana. Importante: ningún contenedor padre puede tener transform,
   filter ni will-change, porque rompen el position: fixed. La foto sí lleva
   translateZ(0): sin su propia capa, Safari la pinta negra o a pedazos.
   Sin parallax (.franja--sin-parallax) la foto cubre la franja y se mueve
   con la página. Altos: --baja, normal y --alta. */
.franja { position: relative; height: 440px; overflow: hidden; background: var(--noche); color: var(--claro); }
.franja--baja { height: 320px; }
.franja--alta { height: 500px; }
.franja__ventana { position: absolute; inset: 0; clip: rect(0, auto, auto, 0); clip-path: inset(0); }
.franja__ventana img {
  position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh;
  object-fit: cover; filter: var(--desaturar); transform: translateZ(0);
}
.franja--sin-parallax .franja__ventana { clip: auto; clip-path: none; }
.franja--sin-parallax .franja__ventana img { position: absolute; inset: 0; height: 100%; transform: none; }
.franja__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,16,.30) 0%, rgba(15,15,16,.48) 50%, rgba(15,15,16,.38) 100%); }
.franja__contenido { position: relative; height: 100%; padding: 0 32px; display: flex; flex-direction: column; justify-content: center; }
.franja__contenido--centro { align-items: center; text-align: center; }
.franja__contenido .volanta { margin-bottom: 22px; }
.gancho { max-width: 900px; font-size: 27px; font-style: italic; font-weight: 400; line-height: 1.45; text-wrap: balance; }
.franja--baja .gancho { font-size: 23px; }

@media (min-width: 768px) {
  .franja { height: 560px; }
  .franja--baja { height: 420px; }
  .franja--alta { height: 640px; }
  .franja__contenido { padding: 0 160px; }
  .franja__contenido .volanta { margin-bottom: 28px; font-size: 15px; }
  .gancho { font-size: 44px; line-height: 1.4; }
  .franja--baja .gancho { font-size: 36px; }
}

/* ---------- 7. Historias ---------- */
.historias { padding: 76px 0 88px; }
/* En móvil todas las historias van iguales, una debajo de otra.
   En escritorio la primera va destacada y las demás en pares debajo. */
.historias__lista { margin-top: 44px; display: flex; flex-direction: column; gap: 20px; }
.historias__par { display: flex; flex-direction: column; gap: 20px; }

@media (min-width: 768px) {
  .historias { padding: 120px 0 128px; }
  .encabezado-doble { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: clamp(40px, 6vw, 80px); }
  .encabezado-doble > div { max-width: 640px; }
  .encabezado-doble .titulo { margin-bottom: 0; }
  /* El párrafo se angosta si no cabe junto al título (tablets) */
  /* (mínimo 220 px: con un título larguísimo el navegador le daba todo el
     ancho al título y dejaba el párrafo en una columna de una palabra) */
  .encabezado-doble .parrafo { flex: 0 1 400px; min-width: 220px; font-size: 15px; line-height: 1.86; }
  .volanta { margin-bottom: 24px; font-size: 15px; letter-spacing: 0.26em; }
  .titulo { font-size: 46px; line-height: 1.18; }
  .historias__lista { margin-top: 72px; gap: 32px; }
  .historias__par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  /* Si en los pares sobra una, cierra a lo ancho (ver historias() en vista.js) */
  .historia--ancha { grid-column: 1 / -1; }
}

/* ---------- 8. Planes ----------
   Cada plan es una fila: texto a la izquierda y video (con controles de
   YouTube) a la derecha; "incluye" va debajo del video. En móvil el orden
   es nombre → video → descripción → incluye. */
.planes { padding: 76px 0 80px; background: var(--papel); }
/* Letra pequeña un poco más grande y con menos espaciado que en el resto,
   porque aquí se lee con detalle */
.planes .lista li { font-size: 11.5px; letter-spacing: 0.14em; color: var(--grafito); }

.planes__cabeza {
  padding-bottom: 36px; border-bottom: 1px solid var(--filete-fuerte);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.planes__cabeza .volanta { margin-bottom: 20px; }
.planes__cabeza .titulo-mayus { margin-bottom: 22px; }
.planes__entrada { margin-top: 26px; font-size: 21px; line-height: 1.4; }
.planes__entrada--extras { margin-top: 64px; text-align: center; }

.plan {
  padding: 48px 0 56px; border-bottom: 1px solid var(--filete);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px;
  grid-template-areas: "cabeza" "video" "cuerpo" "incluye";
}
.plan__cabeza { grid-area: cabeza; }
.plan__video { grid-area: video; }
.plan__cuerpo { grid-area: cuerpo; }
.plan__incluye { grid-area: incluye; margin-top: 12px; }

.plan__cabeza .volanta { margin-bottom: 14px; }
.plan__nombre { font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; }
.plan__tipo { margin-top: 10px; font-size: 17px; color: var(--cuerpo); }
/* Reproductores de Planes e Historias (YouTube o archivo propio) */
.marco-169 > iframe, .marco-169 > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Datos clave: duración y entrega */
.datos { margin: 26px 0 30px; border-bottom: 1px solid var(--filete); }
.datos div { padding: 11px 0; border-top: 1px solid var(--filete); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.datos dt { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--secundario); }
.datos dd { margin: 0; font-size: 16px; font-style: italic; text-align: right; font-variant-numeric: lining-nums; }

/* Botón de contorno redondeado */
.boton-linea {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border: 1px solid var(--filete-fuerte); border-radius: 999px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: background-color .3s, color .3s, border-color .3s;
}
.boton-linea::before { content: '→'; font-size: 13px; letter-spacing: 0; }
.boton-linea:hover { background: var(--grafito); border-color: var(--grafito); color: var(--claro); }

.incluye { margin-bottom: 10px; font-size: 28px; font-style: italic; line-height: 1.2; }

.extras { margin-top: 32px; padding-top: 40px; border-top: 1px solid var(--filete-fuerte); display: flex; flex-direction: column; gap: 48px; }
.extra__titulo {
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--filete-fuerte);
  font-size: 16px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
}
.extra__intro, .extra__nota { font-size: 13.5px; line-height: 1.75; color: var(--cuerpo); }
.extra__intro { margin-bottom: 8px; }
.extra__nota { margin-top: 16px; font-variant-numeric: lining-nums; }

@media (min-width: 768px) {
  .planes { padding: 112px 0; }
  .planes__cabeza { padding-bottom: 56px; }
  .planes__cabeza .volanta { margin-bottom: 24px; }
  .planes__cabeza .titulo-mayus { margin-bottom: 28px; }
  .titulo-mayus { font-size: 44px; line-height: 1.18; }
  .planes__cabeza .parrafo { max-width: 760px; font-size: 16px; }
  .planes__entrada { margin-top: 40px; font-size: 30px; }
  .planes__entrada--extras { margin-top: 96px; }

  .plan {
    padding: 80px 0 88px;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 0;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "cabeza video" "cuerpo video" "cuerpo incluye";
  }
  .plan__cabeza { padding-top: 4px; }
  .plan__nombre { font-size: 40px; }
  .plan__tipo { font-size: 18px; }
  .plan__cuerpo { padding-top: 26px; }
  .plan__incluye { margin-top: 40px; }
  .parrafo { font-size: 15px; }
  .incluye { font-size: 32px; }
  .lista--columnas { columns: 2; column-gap: 48px; }
  .lista--columnas li { break-inside: avoid; }
  .extras { margin-top: 40px; padding-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 72px; }
  /* Recuadros: de 1 a 4 (extras--N). Uno solo va centrado; dos, a lo ancho con
     más aire; cuatro, de a dos hasta que caben en una fila. */
  .extras--1 { grid-template-columns: minmax(0, 440px); justify-content: center; }
  .extras--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 120px; padding-left: 60px; padding-right: 60px; }
  .extras--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 120px; row-gap: 64px; padding-left: 60px; padding-right: 60px; }
}
@media (min-width: 1100px) {
  .extras--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 56px; padding-left: 0; padding-right: 0; }
}
@media (min-width: 1200px) {
  .plan { column-gap: 88px; }
}

/* ---------- 9. Fotografía ---------- */
.fotografia { padding: 76px 0 0; }

/* Galería: cada foto en su forma, en columnas escalonadas (2 en celular y
   tableta, 3 desde 1024 px). El JS ubica cada foto (columna y filas de 2 px)
   y activa .galeria__rejilla--escalonada; sin JS queda una rejilla simple.
   En modo escalonado la foto llena su espacio (y se recorta un poco si el JS
   la acortó o alargó para emparejar el final de las columnas). */
.galeria { --espacio: 8px; margin-top: 44px; padding: 0 14px; }
.galeria__rejilla {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio); align-items: start;
}
.galeria__rejilla--escalonada { grid-auto-rows: 2px; row-gap: 0; }
.galeria__rejilla--escalonada .galeria__item { align-self: stretch; padding-bottom: var(--espacio); }
.galeria__rejilla--escalonada .galeria__foto { aspect-ratio: auto; height: 100%; }
.galeria__foto {
  display: block; width: 100%; aspect-ratio: var(--proporcion, 1.5); padding: 0; border: 0; overflow: hidden;
  background: #E6E1D7; cursor: zoom-in;
}
.galeria__foto img {
  display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--desaturar);
  transition: opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.galeria__rejilla--escalonada .galeria__foto img:not(.cargada) { opacity: 0; }
.galeria__foto:focus-visible { outline-offset: 3px; }
.galeria__item--nueva { animation: galeria-entra .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes galeria-entra { from { opacity: 0; transform: translateY(18px); } }
.galeria__pie { margin-top: 40px; text-align: center; }

/* Visor a pantalla completa (<dialog>) */
.visor {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(12, 12, 13, .97); color: var(--claro); overflow: hidden;
}
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: visor-entra .35s ease; }
.visor::backdrop { background: rgba(12, 12, 13, .5); }
@keyframes visor-entra { from { opacity: 0; } }
.visor__barra { padding: 10px 10px 10px 20px; display: flex; align-items: center; justify-content: space-between; }
.visor__contador { font-size: 11px; letter-spacing: 0.24em; color: rgba(247, 245, 240, .72); font-variant-numeric: lining-nums; }
.visor__cerrar { width: 48px; height: 48px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
.visor__marco {
  margin: 0; min-height: 0; padding: 0 12px 84px; touch-action: pan-y;
  display: flex; align-items: center; justify-content: center;
}
.visor__foto {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  transition: opacity .35s ease;
}
.visor__foto.cambiando { opacity: 0; }
.visor__flecha {
  position: absolute; bottom: 18px; width: 52px; height: 52px; padding: 0;
  border: 1px solid rgba(247, 245, 240, .3); border-radius: 50%; background: transparent; color: inherit;
  display: grid; place-items: center; cursor: pointer; transition: background-color .3s, border-color .3s;
}
.visor__flecha:hover { background: rgba(247, 245, 240, .08); border-color: rgba(247, 245, 240, .6); }
.visor__flecha--ant { left: calc(50% - 64px); }
.visor__flecha--sig { right: calc(50% - 64px); }
body.visor-abierto { overflow: hidden; }

.paquetes { padding: 64px 0 88px; display: flex; flex-direction: column; gap: 56px; }
.paquete__nombre { margin-bottom: 6px; font-size: 32px; font-weight: 400; line-height: 1.1; font-variant-numeric: lining-nums; }
.paquete__tipo { margin-bottom: 22px; font-size: 16px; line-height: 1.5; color: var(--cuerpo); }
.filas { border-bottom: 1px solid var(--filete); }
.filas li { padding: 12px 0; border-top: 1px solid var(--filete); font-size: 14px; color: var(--cuerpo); }

@media (min-width: 768px) {
  .fotografia { padding-top: 112px; }
  .galeria { --espacio: 14px; margin-top: 72px; padding: 0 var(--margen); }
  .galeria__pie { margin-top: 56px; }
  .visor__marco { padding: 0 110px 40px; }
  .visor__flecha { top: 50%; bottom: auto; margin-top: -26px; }
  .visor__flecha--ant { left: 32px; }
  .visor__flecha--sig { right: 32px; }
  .paquetes { padding: 110px 60px 112px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 120px; }
  /* Paquetes: de 1 a 4 (paquetes--N). Uno solo va centrado; tres, uno bajo otro
     hasta que caben en una fila; cuatro, de a dos. */
  .paquetes--1 { grid-template-columns: minmax(0, 480px); justify-content: center; }
  .paquetes--3 { grid-template-columns: minmax(0, 480px); justify-content: center; row-gap: 72px; }
  .paquetes--4 { row-gap: 88px; }
  .paquete .volanta { margin-bottom: 16px; }
  .paquete__nombre { font-size: 40px; }
  .paquete__tipo { margin-bottom: 26px; font-size: 18px; }
  .filas li { padding: 14px 0; font-size: 15px; }
}

@media (min-width: 1024px) {
  .paquetes--3 { padding-left: 0; padding-right: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 72px; justify-content: stretch; }
  .galeria { --espacio: 18px; }
  .galeria__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria__foto:hover img { transform: scale(1.025); }
}

/* ---------- Aviso de cookies ----------
   Solo si el cliente puso su píxel de Meta y dejó encendido "Pedir permiso".
   Una tarjeta abajo, que no tapa el contenido ni mueve la página: primero un
   texto corto con "Aceptar todas" y "Ver preferencias"; las preferencias se
   abren en la misma tarjeta. */
.cookies {
  position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60;
  padding: 22px 22px 18px; background: var(--grafito); color: var(--claro);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .32);
  animation: cookies-sube .5s cubic-bezier(.2, .7, .2, 1) both;
}
.cookies[hidden], .cookies [hidden] { display: none; }
.cookies__texto { font-size: 13.5px; line-height: 1.6; color: rgba(247, 245, 240, .9); }
.cookies__texto a { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 245, 240, .45); }
.cookies__texto a:hover { text-decoration-color: currentColor; }
.cookies__titulo { margin-bottom: 4px; font-size: 19px; line-height: 1.3; }
.cookies__botones { margin-top: 18px; display: flex; flex-direction: column-reverse; gap: 6px; }
.cookies button {
  min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; transition: background-color .3s, color .3s, border-color .3s;
}
/* El principal, lleno; el de preferencias, un enlace discreto */
.cookies .cookies__principal { background: var(--claro); color: var(--grafito); }
.cookies .cookies__principal:hover { background: #fff; }
.cookies .cookies__secundario { border-color: rgba(247, 245, 240, .4); }
.cookies .cookies__secundario:hover { border-color: var(--claro); }
.cookies .cookies__enlace { min-height: 40px; color: rgba(247, 245, 240, .72); }
.cookies .cookies__enlace:hover { color: var(--claro); }
/* Preferencias: cada tipo de cookie en una fila, con su interruptor */
.cookies__fila { padding: 14px 0; border-top: 1px solid rgba(247, 245, 240, .16); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.cookies__titulo + .cookies__fila { margin-top: 12px; }
label.cookies__fila { cursor: pointer; }
.cookies__que { display: flex; flex-direction: column; gap: 3px; }
.cookies__que strong { font-size: 14px; font-weight: 500; }
.cookies__que span { font-size: 12.5px; line-height: 1.5; color: rgba(247, 245, 240, .7); }
.cookies__siempre { flex: none; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(247, 245, 240, .6); }
.cookies__fila input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookies__pista { position: relative; flex: none; width: 42px; height: 24px; border-radius: 99px; background: rgba(247, 245, 240, .22); transition: background-color .25s; }
.cookies__pista::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--claro); transition: transform .25s; }
.cookies__fila input:checked + .cookies__pista { background: #7FA68A; }
.cookies__fila input:checked + .cookies__pista::after { transform: translateX(18px); }
.cookies__fila input:focus-visible + .cookies__pista { outline: 2px solid var(--claro); outline-offset: 3px; }
@keyframes cookies-sube { from { opacity: 0; transform: translateY(12px); } }
@media (min-width: 768px) {
  .cookies { left: 28px; right: auto; bottom: 28px; width: 420px; padding: 26px 28px 22px; }
  .cookies__botones { flex-direction: row; justify-content: flex-end; align-items: center; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }

/* ---------- Política de privacidad (/privacidad) ----------
   Una página de solo texto, con la letra y los colores del sitio. */
.pagina-legal { background: var(--hueso); }
.legal__barra { padding: 22px var(--margen); border-bottom: 1px solid var(--filete); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.legal__barra img { display: block; height: calc(30px * var(--escala, 1)); width: auto; }
.legal__volver { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--secundario); }
.legal__volver:hover { color: var(--grafito); }
.legal { max-width: calc(680px + 2 * var(--margen)); margin: 0 auto; padding: 64px var(--margen) 96px; }
.legal .titulo { margin-bottom: 10px; }
.legal__fecha { margin-bottom: 44px; font-size: 13px; font-style: italic; color: var(--secundario); }
.legal h2 { margin: 38px 0 12px; font-size: 21px; font-weight: 400; line-height: 1.3; }
.legal p { font-size: 15px; line-height: 1.8; color: var(--cuerpo); }
.legal p + p { margin-top: 12px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filete-fuerte); }
.legal .legal__cierre { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--filete); font-style: italic; }
@media (min-width: 768px) { .legal { padding-top: 96px; } .legal h2 { font-size: 24px; } }

/* ---------- Secciones que agrega el cliente ----------
   Usan las piezas de siempre (volanta, título, párrafo, marcos de video,
   galería, botón) con su propia composición: el encabezado va centrado, no
   partido en dos como en Historias y Fotografía, y los videos del mismo
   tamaño, para que no se vean repetidas si quedan seguidas. */
/* Fondo alternado entre secciones claras seguidas (ver ordenar() en vista.js) */
.tono--hueso { background: var(--hueso); }
.tono--papel { background: var(--papel); }

.seccion { padding: 76px 0 88px; }
.seccion__cabeza { display: flex; flex-direction: column; align-items: center; text-align: center; }
.seccion__cabeza .titulo { max-width: 20em; text-wrap: balance; }
.seccion__cabeza .parrafo { max-width: 42em; margin-top: 20px; }

/* Videos en rejilla: uno debajo de otro en celular */
.rejilla-videos { margin-top: 44px; display: flex; flex-direction: column; gap: 20px; }
.seccion__cabeza:empty + .rejilla-videos { margin-top: 0; }

/* Texto con foto: en celular, el texto y debajo la foto; sin foto, el texto centrado */
.texto-foto { display: flex; flex-direction: column; gap: 40px; }
.texto-foto__texto .titulo { margin-bottom: 20px; }
.texto-foto__texto .boton-linea { margin-top: 30px; }
.texto-foto__foto { margin: 0; background: #E6E1D7; }
.texto-foto__foto img { display: block; width: 100%; height: auto; filter: var(--desaturar); }
.seccion--texto:not(.seccion--con-foto) .texto-foto__texto { width: 100%; max-width: 44em; margin: 0 auto; text-align: center; }

@media (min-width: 768px) {
  .seccion { padding: 120px 0 128px; }
  .seccion__cabeza .parrafo { margin-top: 24px; font-size: 16px; }
  /* De a dos por fila; si sobra uno, cierra a lo ancho */
  .rejilla-videos { margin-top: 72px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px; }
  .rejilla-videos__item { grid-column: span 3; }
  .rejilla-videos__item:last-child:nth-child(odd) { grid-column: span 6; }
  .rejilla-videos--uno { grid-template-columns: minmax(0, 980px); justify-content: center; }
  .rejilla-videos--uno .rejilla-videos__item { grid-column: auto; }
  /* Espejo de Historias: el título a la derecha y el párrafo a la izquierda */
  .encabezado-doble--espejo { flex-direction: row-reverse; }
  .encabezado-doble--espejo > div { text-align: right; }
  .texto-foto { flex-direction: row; align-items: center; gap: clamp(48px, 7vw, 112px); }
  .texto-foto__texto { flex: 1 1 0; min-width: 0; }
  .texto-foto__texto .titulo { margin-bottom: 26px; }
  .texto-foto__foto { flex: 0 1 44%; min-width: 0; }
  .seccion--foto-izquierda .texto-foto { flex-direction: row-reverse; }
}
@media (min-width: 1024px) {
  /* De a tres por fila; los que sobran (--media) abren de a dos (ver videosDe() en vista.js) */
  .rejilla-videos__item, .rejilla-videos__item:last-child:nth-child(odd) { grid-column: span 2; }
  .rejilla-videos__item--media, .rejilla-videos__item--media:last-child:nth-child(odd) { grid-column: span 3; }
  .rejilla-videos--uno .rejilla-videos__item { grid-column: auto; }
}

/* ---------- 10. Testimonios ----------
   Tarjetas en fila que se deslizan (scroll-snap): en computador se ven dos
   y la tercera asoma; en tablet y celular, una y la siguiente asoma. Cada
   tarjeta lleva comillas grandes y el autor abajo, separado por un filete,
   para que se lean como opiniones de un vistazo. Todas miden lo mismo (la
   más larga manda). Con uno o dos testimonios ocupan el ancho sin huecos, y
   el JS esconde las flechas si todas caben. Sin JS se ven una debajo de otra.
   Los colores van en variables (--t-…): claros por defecto y oscuros dentro
   de Contacto, donde está hoy: después del formulario y antes del pie. */
.testimonios {
  --t-titulo: var(--grafito); --t-texto: var(--cuerpo); --t-suave: var(--secundario);
  --t-linea: var(--filete); --t-borde: var(--filete-fuerte); --t-comillas: rgba(23, 23, 26, .35);
  --t-tarjeta: var(--papel); --t-hover: rgba(23, 23, 26, .05);
  --t-espacio: 12px;
  padding: 0 0 84px;
}
.contacto .testimonios {
  --t-titulo: var(--claro); --t-texto: rgba(247, 245, 240, .78); --t-suave: rgba(247, 245, 240, .6);
  --t-linea: rgba(247, 245, 240, .16); --t-borde: rgba(247, 245, 240, .34); --t-comillas: rgba(247, 245, 240, .55);
  --t-tarjeta: rgba(247, 245, 240, .035); --t-hover: rgba(247, 245, 240, .08);
  position: relative; margin-top: 72px; padding-bottom: 8px;
}
.testimonios__cuerpo { position: relative; display: flex; flex-direction: column; padding-top: 64px; }
.testimonios__cuerpo::before { content: ''; position: absolute; top: 0; left: var(--margen); right: var(--margen); height: 1px; background: var(--t-linea); }
.testimonios__cabeza .volanta { color: var(--t-suave); }
.testimonios__cabeza .titulo { margin-bottom: 20px; color: var(--t-titulo); }
.testimonios__cabeza .parrafo { max-width: 34em; color: var(--t-texto); }

.testimonios__lista { margin-top: 36px; display: flex; flex-direction: column; gap: var(--t-espacio); }
.testimonio {
  position: relative; margin: 0; padding: 72px 24px 22px; display: flex; flex-direction: column;
  border: 1px solid var(--t-linea); background: var(--t-tarjeta);
}
.testimonio__comillas { position: absolute; top: 14px; left: 20px; font-size: 72px; line-height: 1; color: var(--t-comillas); }
.testimonio__frase { font-size: 22px; font-style: italic; line-height: 1.35; color: var(--t-titulo); text-wrap: balance; }
.testimonio__texto { margin-top: 14px; font-size: 14.5px; line-height: 1.8; color: var(--t-texto); white-space: pre-line; text-wrap: pretty; }
.testimonio__cita { margin: 0; padding-bottom: 22px; }
/* El autor va abajo de todo (margin-top: auto), con el filete encima: como todas las
   tarjetas miden lo mismo, filete y autor quedan a la misma altura en todas */
.testimonio__autor { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--t-linea); display: flex; align-items: center; gap: 14px; }
.testimonio__foto { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: var(--desaturar); }
.testimonio__iniciales {
  display: grid; place-items: center; border: 1px solid var(--t-borde);
  font-size: 12px; font-style: italic; color: var(--t-texto); white-space: nowrap;
}
.testimonio__quien { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.testimonio__nombres { font-size: 15px; color: var(--t-titulo); }
.testimonio__detalle { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--t-suave); }

.testimonios__controles { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.testimonios__flecha {
  width: 48px; height: 48px; padding: 0; border: 1px solid var(--t-borde); border-radius: 50%;
  background: transparent; color: var(--t-titulo); display: grid; place-items: center; cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.testimonios__flecha:hover { background: var(--t-hover); border-color: var(--t-titulo); }
.testimonios__contador { min-width: 5.5em; text-align: center; font-size: 11px; letter-spacing: .22em; color: var(--t-suave); font-variant-numeric: lining-nums tabular-nums; }

/* Con JS: fila deslizable. --por-vista = cuántas tarjetas caben (la fracción es la que asoma).
   Los bordes se desvanecen solo del lado donde hay más tarjetas (--izq / --der, los pone el JS). */
.testimonios--js .testimonios__lista {
  --por-vista: 1.22; --izq: 0px; --der: 0px; --desvanecer: 24px;
  flex-direction: row; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--izq), #000 calc(100% - var(--der)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--izq), #000 calc(100% - var(--der)), transparent 100%);
}
.testimonios--js .testimonios__lista::-webkit-scrollbar { display: none; }
.testimonios--js .testimonios__lista.hay-izq { --izq: var(--desvanecer); }
.testimonios--js .testimonios__lista.hay-der { --der: var(--desvanecer); }
.testimonios--js .testimonio {
  flex: 0 0 calc((100% - (var(--por-vista) - 1) * var(--t-espacio)) / var(--por-vista));
  scroll-snap-align: start;
}
.testimonios--js.testimonios--uno .testimonios__lista { --por-vista: 1; }

@media (min-width: 768px) {
  .testimonios { --t-espacio: 24px; padding: 0 0 128px; }
  .contacto .testimonios { margin-top: 110px; padding-bottom: 16px; }
  .testimonios__cuerpo {
    padding-top: 96px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "cabeza controles" "lista lista"; column-gap: 40px;
  }
  .testimonios__cabeza { grid-area: cabeza; max-width: 640px; }
  .testimonios__cabeza .titulo { margin-bottom: 24px; }
  .testimonios__controles { grid-area: controles; align-self: end; margin-top: 0; }
  .testimonios__lista { grid-area: lista; margin-top: 56px; }
  .testimonio { padding: 92px 40px 32px; }
  .testimonio__comillas { top: 18px; left: 36px; font-size: 96px; }
  .testimonio__frase { font-size: 26px; line-height: 1.3; }
  .testimonio__cita { padding-bottom: 28px; }
  .testimonio__autor { padding-top: 24px; }
  .testimonio__foto { width: 48px; height: 48px; }
  .testimonios--js .testimonios__lista { --por-vista: 1.35; --desvanecer: 48px; }
  .testimonios--js.testimonios--dos .testimonios__lista { --por-vista: 1.35; }
  .testimonios--js.testimonios--uno .testimonio { flex-basis: min(100%, 720px); }
}

@media (min-width: 1024px) {
  .testimonios--js .testimonios__lista { --por-vista: 2.35; }
  .testimonios--js.testimonios--dos .testimonios__lista { --por-vista: 2; }
}

/* ---------- 11. Versículo que se escribe solo ---------- */
.franja--versiculo { height: 540px; }
.franja__velo--lateral { background: linear-gradient(180deg, rgba(15,15,16,.74) 0%, rgba(15,15,16,.68) 70%, rgba(15,15,16,.52) 100%); }
.versiculo { position: absolute; left: 50px; right: 28px; top: 64px; bottom: 64px; }
.versiculo__linea { position: absolute; left: -22px; top: 0; bottom: 0; width: 1px; background: rgba(247,245,240,.38); }
.versiculo .volanta { margin-bottom: 22px; }
.versiculo__texto { font-size: 15.5px; font-style: italic; line-height: 1.78; color: var(--claro); text-wrap: pretty; }
.cursor { display: inline-block; margin-left: 2px; font-style: normal; color: rgba(247,245,240,.85); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

@media (min-width: 768px) {
  .franja__velo--lateral { background: linear-gradient(90deg, rgba(15,15,16,.80) 0%, rgba(15,15,16,.66) 48%, rgba(15,15,16,.46) 100%); }
  .versiculo { left: calc(var(--margen) + 50px); right: auto; width: min(560px, 70vw); top: 112px; bottom: 112px; }
  .versiculo__linea { left: -40px; }
  .versiculo .volanta { margin-bottom: 30px; }
  .versiculo__texto { font-size: 21px; }
}

/* ---------- 12. Contacto y pie ---------- */
.contacto { position: relative; overflow: hidden; background: var(--noche); color: var(--claro); }
.contacto__fondo { position: absolute; inset: 0; }
.contacto__fondo img { width: 100%; height: 100%; object-fit: cover; filter: var(--desaturar); opacity: .5; }
.contacto__fondo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,15,16,.74) 0%, rgba(15,15,16,.60) 40%, rgba(15,15,16,.94) 88%, var(--noche) 100%); }
.contacto__cuerpo { position: relative; padding: 72px 20px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.contacto__cuerpo .volanta { margin-bottom: 18px; }
.contacto__cuerpo .titulo { margin-bottom: 14px; }
.contacto__bajada { margin-bottom: 36px; font-size: 14.5px; line-height: 1.7; color: rgba(247,245,240,.84); }

.formulario {
  width: 100%; max-width: 800px; padding: 36px 24px 32px; text-align: left;
  background: var(--papel); color: var(--grafito);
  display: flex; flex-direction: column; gap: 22px;
}
.formulario__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.campo label, .campo legend { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--secundario); }
.campo legend { padding: 0; margin-bottom: 14px; }
.campo input, .campo select, .campo textarea {
  width: 100%; height: 44px; padding: 0; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(23,23,26,.28); background: transparent;
  font-family: var(--serif); font-size: 16px; color: var(--grafito);
  -webkit-appearance: none; appearance: none; transition: border-color .3s;
}
.campo select {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317171A'/%3E%3C/svg%3E") right 2px center / 10px 6px no-repeat;
  padding-right: 20px;
}
.campo textarea { height: auto; padding: 6px 0; line-height: 1.7; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #8C8983; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--grafito); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { box-shadow: 0 1px 0 var(--grafito); }
.campo--invalido input { border-bottom-color: #9B3B32; }
.opciones { display: flex; flex-direction: column; gap: 12px; }
.campo .opciones label { display: flex; align-items: center; gap: 12px; min-height: 26px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--grafito); cursor: pointer; font-variant-numeric: lining-nums; }
.opciones input { width: 16px; height: 16px; margin: 0; accent-color: var(--grafito); -webkit-appearance: auto; appearance: auto; }
.formulario__error { font-size: 13.5px; color: #9B3B32; }
.boton {
  margin-top: 6px; height: 56px; border: 0; cursor: pointer;
  background: var(--grafito); color: var(--claro);
  font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; transition: background-color .3s;
}
.boton:hover { background: #2B2B30; }
.formulario__nota { margin-top: -8px; font-size: 12.5px; font-style: italic; text-align: center; color: var(--secundario); }
.formulario__legal { margin-top: -12px; font-size: 12px; text-align: center; color: var(--secundario); }
.formulario__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filete-fuerte); }

.pie { position: relative; padding: 72px 20px 36px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.pie__logo { height: calc(54px * var(--escala, 1)); width: auto; max-width: min(300px, 80vw); object-fit: contain; opacity: .92; }
.pie__enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.pie__enlaces a { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,245,240,.86); transition: color .3s; }
.pie__enlaces a:hover { color: #fff; }

@media (min-width: 768px) {
  .contacto__cuerpo { padding: 96px var(--margen) 0; }
  .contacto__cuerpo .volanta { margin-bottom: 22px; }
  .contacto__cuerpo .titulo { margin-bottom: 16px; font-size: 44px; line-height: 1.2; }
  .contacto__bajada { margin-bottom: 54px; font-size: 16px; }
  .formulario { padding: 54px 56px 48px; gap: 30px; }
  .formulario__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 30px; }
  /* Si queda una casilla sola en la última fila (sin la pregunta del plan), va a lo ancho */
  .formulario__rejilla > .campo:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .campo { gap: 9px; }
  .campo label, .campo legend { font-size: 10.5px; }
  .campo input, .campo select { height: 42px; }
  .opciones { flex-direction: row; flex-wrap: wrap; gap: 12px 28px; }
  .boton { margin-top: 8px; font-size: 12px; }
  .pie { padding: 110px var(--margen) 44px; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .pie__logo { height: calc(62px * var(--escala, 1)); }
  .pie__enlaces { gap: 34px; }
  .pie__enlaces a { font-size: 11px; letter-spacing: 0.22em; }
}

/* ---------- Aparición suave al entrar en pantalla ---------- */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.aparece.visible { opacity: 1; transform: none; }

/* ---------- 13. Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .franja__ventana img { position: absolute; height: 100%; }
  .aparece { opacity: 1; transform: none; }
  .cursor { display: none; }
  .menu, .menu *, .menu *::before { transition-delay: 0s !important; }
}