/* ═════════════════════════════════════════════════════════════════════
   inicio-nuevo.css
   Se carga después de estilo-flujo.css y usa sus mismos tokens.
   ═════════════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.envoltura { width: min(100% - 2 * var(--margen), 1240px); margin-inline: auto; }
.bloque { padding-block: clamp(88px, 12vw, 164px); }
.titulo {
  margin: 0; font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30;
  font-weight: 600; font-size: clamp(2.5rem, 5.6vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; text-wrap: balance;
}
.titulo em { font-style: italic; font-weight: 500; color: var(--rosa); }
.antetitulo { margin: 0; font-size: .98rem; font-weight: 600; color: var(--rosa); }
.cabeza { display: grid; gap: 20px; max-width: 760px; margin-bottom: clamp(44px, 6vw, 80px); }

/* Aparecer al entrar: un fundido con peso, sin rebote. */
.js .aparece { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s var(--salida), transform 1.1s var(--salida), filter .9s var(--salida); transition-delay: calc(var(--i, 0) * 70ms); }
.js .aparece.visto { opacity: 1; transform: none; filter: none; }

/* ═════════ ISLA (cabecera flotante) ═════════ */
.isla { position: fixed; z-index: 50; top: calc(12px + env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.isla-in {
  pointer-events: auto; width: min(100% - 24px, 1120px); height: 60px; padding: 0 8px 0 22px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: background-color .45s ease, box-shadow .45s ease;
}
.isla.solida .isla-in {
  background: oklch(0.19 0.04 355 / .74);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--hilo), 0 20px 50px oklch(0.06 0.04 355 / .35);
}
.isla .marca-logo { height: 26px; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.boton) { padding: 10px 14px; border-radius: 999px; text-decoration: none; font-size: .95rem; font-weight: 500; color: var(--luna-2); transition: color .2s ease, background-color .2s ease; }
.nav a:not(.boton):hover { color: var(--luna); background: oklch(0.94 0.018 40 / .07); }
.nav .boton { margin-left: 8px; }
.isla-movil { display: none; align-items: center; gap: 4px; }
.menu-boton { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.menu-boton span { position: absolute; left: 13px; right: 13px; height: 1.5px; border-radius: 2px; background: var(--luna); transition: transform .45s var(--salida); }
.menu-boton span:first-child { top: 18px; }
.menu-boton span:last-child { top: 25px; }
.menu-boton[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.hoja-menu {
  position: fixed; z-index: 49; top: calc(82px + env(safe-area-inset-top)); left: 12px; right: 12px;
  display: grid; gap: 2px; padding: 12px; border-radius: 28px;
  background: oklch(0.19 0.04 355 / .92); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--hilo), 0 30px 80px oklch(0.06 0.04 355 / .55);
  transform-origin: top right; opacity: 0; visibility: hidden; transform: scale(.94) translateY(-8px); filter: blur(8px);
  transition: opacity .25s ease, transform .5s var(--salida), filter .3s ease, visibility 0s .5s;
}
.hoja-menu.abierta { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .3s ease, transform .5s var(--salida), filter .35s ease, visibility 0s; }
.hoja-menu a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 16px; text-decoration: none; font-size: 1.15rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .6s var(--salida), background-color .2s ease; }
.hoja-menu.abierta a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 40ms + 60ms); }
.hoja-menu a:not(.boton):hover { background: oklch(0.94 0.018 40 / .06); }
.hoja-menu .boton { justify-content: center; margin-top: 8px; font-size: 1.05rem; }
@media (max-width: 920px) {
  .nav { display: none; }
  .isla-movil { display: flex; }
  .isla-in { padding-left: 18px; }
}
@media (min-width: 921px) { .hoja-menu { display: none; } }

/* ═════════ PORTADA ═════════ */
.portada { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.portada picture { position: absolute; inset: 0; z-index: -3; }
.portada picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.js .portada picture img { animation: acercar 2.8s var(--salida) both; }
@keyframes acercar { from { transform: scale(1.08); } to { transform: none; } }
.portada::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 70% at 0% 100%, oklch(0.12 0.04 355 / .72), transparent 62%),
    linear-gradient(180deg, oklch(0.12 0.04 355 / .5) 0%, transparent 22%, transparent 45%, oklch(0.13 0.04 355 / .7) 78%, var(--noche) 100%);
}
.estrellas { position: absolute; left: 0; right: 0; top: 0; height: 50%; width: 100%; z-index: -2; pointer-events: none; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.portada-in { display: grid; gap: 22px; padding-block: 150px clamp(56px, 9vh, 104px); }
.portada h1 {
  margin: 0; max-width: 11ch; font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30;
  font-weight: 600; font-size: clamp(3.5rem, 9.6vw, 8.6rem); line-height: .92; letter-spacing: -0.03em;
  text-shadow: 0 2px 30px oklch(0.1 0.04 355 / .45);
}
.portada h1 span { display: block; }
.portada h1 em { font-style: italic; font-weight: 500; color: oklch(0.84 0.06 8); }
.portada .lead { max-width: 46ch; color: var(--luna); text-shadow: 0 1px 18px oklch(0.1 0.04 355 / .7); }
@media (min-width: 761px) {
  /* En computadora el título cae sobre el teepee encendido: un velo de lado
     deja la foto viva a la derecha y el texto limpio a la izquierda. */
  .portada::after {
    background:
      linear-gradient(90deg, oklch(0.14 0.04 355 / .82) 0%, oklch(0.14 0.04 355 / .55) 34%, transparent 62%),
      linear-gradient(180deg, oklch(0.14 0.04 355 / .45) 0%, transparent 20%, transparent 55%, oklch(0.15 0.04 355 / .7) 82%, var(--noche) 100%);
  }
  /* section. sube la especificidad: la regla base de esta sección va más abajo en el archivo.
     Las letras y la pantalla quedan a la derecha de la foto; el texto va a la izquierda, sobre el seto. */
  section.pedida-seccion::after {
    background:
      linear-gradient(90deg, oklch(0.14 0.04 355 / .85) 0%, oklch(0.14 0.04 355 / .5) 30%, transparent 48%),
      linear-gradient(180deg, var(--noche) 0%, transparent 16%, transparent 62%, oklch(0.15 0.04 355 / .5) 100%);
  }
  /* La pantalla que dice "Cine bajo las estrellas" se corre a la derecha para que el título no la tape. */
  .portada picture img { object-position: 6% 55%; }
}
.portada .antetitulo { color: oklch(0.86 0.05 10); text-shadow: 0 1px 12px oklch(0.1 0.04 355 / .9), 0 0 2px oklch(0.1 0.04 355 / .6); }
@media (max-width: 760px) {
  /* En celular el título cae sobre la tela clara del teepee: velo más firme abajo. */
  .portada::after {
    background:
      linear-gradient(180deg, oklch(0.12 0.04 355 / .45) 0%, transparent 18%, transparent 36%, oklch(0.13 0.04 355 / .62) 58%, oklch(0.13 0.04 355 / .88) 80%, var(--noche) 100%);
  }
}
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.portada-datos { color: var(--luna-2); font-size: .98rem; text-shadow: 0 1px 14px oklch(0.1 0.04 355 / .7); }
.portada-datos b { color: var(--luna); font-weight: 650; }
.js .enciende { opacity: 0; transform: translateY(18px); filter: blur(10px); animation: enciende 1.2s var(--salida) both; animation-delay: calc(.3s + var(--i) * 110ms); }
@keyframes enciende { to { opacity: 1; transform: none; filter: none; } }

/* ═════════ LA VELADA ═════════ */
.velada { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.velada-texto { position: sticky; top: 130px; display: grid; gap: 22px; }
.actos { display: grid; gap: clamp(64px, 9vw, 120px); }
.acto { display: grid; gap: 20px; margin: 0; }
.acto:nth-child(2) { margin-left: clamp(0px, 8vw, 110px); }
.acto-foto { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; background: var(--noche-1); }
.acto-foto img { width: 100%; height: 100%; object-fit: cover; }
.acto-pie { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; max-width: 48ch; }
.acto-num { grid-row: span 2; font-size: 1.7rem; line-height: 1.1; color: var(--foco); }
.acto h3 { margin: 0; font-weight: 650; font-size: 1.35rem; letter-spacing: -0.015em; }
.acto p { color: var(--luna-2); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .acto-foto { animation: destapa linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    @keyframes destapa { from { clip-path: inset(10% 8% 0 8% round var(--r-xl)); } to { clip-path: inset(0 round var(--r-xl)); } }
  }
}

/* ═════════ PAQUETES ═════════ */
.paquetes { position: relative; display: grid; grid-template-columns: 1fr 1.16fr 1fr; gap: 16px; align-items: stretch; }
.paquete { display: flex; flex-direction: column; gap: 0; padding: 10px; border-radius: 30px; background: var(--noche-1); box-shadow: inset 0 0 0 1px var(--hilo); }
.paquete--destacado { background: var(--noche-2); box-shadow: inset 0 0 0 1px var(--hilo-2), 0 40px 90px oklch(0.06 0.04 355 / .45); }
.paquete figure { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; }
.paquete figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.paquete-etiqueta { position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px; background: var(--foco); color: var(--tinta-foco); font-size: .84rem; font-weight: 650; }
.paquete-cuerpo { display: flex; flex-direction: column; gap: 22px; flex: 1; padding: 20px clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px); }
.paquete-nombre { font-weight: 650; font-size: 1.2rem; }
.paquete-desc { color: var(--luna-2); font-size: .98rem; margin-top: 4px; }
.paquete-precio { font-size: clamp(3rem, 4.4vw, 3.9rem); line-height: 1; letter-spacing: -0.02em; }
.paquete-precio small { margin-left: 6px; font-family: var(--texto); font-size: .95rem; font-weight: 500; letter-spacing: 0; color: var(--luna-3); }
.paquete ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.paquete li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; color: var(--luna-2); line-height: 1.45; }
.paquete li::before {
  content: ''; width: 16px; height: 16px; margin-top: 3px; background: var(--foco);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.paquete .boton { margin-top: auto; }
.incluye { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px clamp(32px, 5vw, 72px); margin-top: clamp(48px, 6vw, 72px); padding-top: 36px; border-top: 1px solid var(--hilo); }
.incluye h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 650; }
.incluye ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--luna-2); }
.incluye b { color: var(--foco); font-weight: 650; }
.aparta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 36px; padding: 20px 20px 20px 26px; border-radius: 26px; background: var(--foco-suave); }
.aparta p { font-size: 1.08rem; }
.aparta strong { color: var(--foco); font-weight: 650; }

/* ═════════ LA PREGUNTA ═════════ */
.pedida-seccion { position: relative; min-height: min(94svh, 920px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.pedida-seccion picture { position: absolute; inset: 0; z-index: -2; }
.pedida-seccion img { width: 100%; height: 100%; object-fit: cover; }
.pedida-seccion::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 0% 100%, oklch(0.12 0.04 355 / .85), transparent 65%), linear-gradient(180deg, var(--noche) 0%, transparent 18%, transparent 55%, oklch(0.13 0.04 355 / .75) 100%); }
.pedida-in { display: grid; gap: 20px; max-width: 34rem; padding-block: clamp(64px, 10vw, 120px); }
.pedida-in p { color: var(--luna); text-shadow: 0 1px 16px oklch(0.1 0.04 355 / .7); }

/* ═════════ DORMIR ═════════ */
.dormir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: center; }
.dormir figure { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; }
.dormir figure img { width: 100%; height: 100%; object-fit: cover; }
.dormir-texto { display: grid; gap: 22px; }
.tarifas { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--hilo); }
.tarifas li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hilo); }
.tarifas span { color: var(--luna-2); }
.tarifas small { margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--musgo-fondo); color: var(--musgo); font-size: .8rem; font-weight: 600; }
.tarifas strong { font-size: 1.9rem; line-height: 1; }
.dormir .pista { font-size: .94rem; color: var(--luna-3); }

/* ═════════ MENÚ ═════════ */
.carta-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.carta-grid .cabeza { position: sticky; top: 130px; margin-bottom: 0; }
.carta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(32px, 5vw, 64px); }
.carta h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 650; color: var(--foco); }
.platillo { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--hilo); }
.platillo strong { font-weight: 600; }
.platillo .precio { font-variant-numeric: tabular-nums; color: var(--luna-2); }
.platillo span:not(.precio) { grid-column: 1; font-size: .94rem; color: var(--luna-3); }

/* ═════════ GALERÍA ═════════ */
.galeria-cabeza { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vw, 56px); }
.galeria-cabeza .cabeza { margin-bottom: 0; }
.tira-controles { display: flex; gap: 10px; }
.redondo { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--noche-2); color: var(--luna); cursor: pointer; box-shadow: inset 0 0 0 1px var(--hilo); transition: background-color .2s ease, transform .35s var(--salida), opacity .2s ease; }
.redondo:hover { background: var(--noche-3); }
.redondo:active { transform: scale(.94); transition-duration: 90ms; }
.redondo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tira { position: relative; display: flex; gap: 14px; overflow-x: auto; padding: 4px var(--margen) 8px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen); scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.tira::-webkit-scrollbar { display: none; }
.tira.arrastrando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.tira figure { position: relative; flex: none; height: clamp(340px, 62vh, 620px); margin: 0; border-radius: 22px; overflow: hidden; scroll-snap-align: start; background: var(--noche-1); }
.tira .alta { aspect-ratio: 3 / 4; }
.tira .ancha { aspect-ratio: 4 / 3; }
.tira .angosta { aspect-ratio: 9 / 16; }
.tira img, .tira video { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.tira figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: oklch(0.12 0.04 355 / .72); font-size: .88rem; font-weight: 500; }
.sonido { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; background: oklch(0.12 0.04 355 / .72); }
.sonido .con { display: none; }
.sonido.activo .sin { display: none; }
.sonido.activo .con { display: block; }
.galeria-nota { margin-top: 24px; color: var(--luna-3); font-size: .95rem; }

/* ═════════ VOCES ═════════ */
.voces { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.voz-grande { display: grid; gap: 28px; margin: 0; }
.voz-grande figure { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; }
.voz-grande figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.voz-grande blockquote { margin: 0; font-size: clamp(1.45rem, 2.4vw, 2.05rem); line-height: 1.35; font-weight: 450; letter-spacing: -0.012em; text-wrap: pretty; }
.voces-lista { display: grid; }
.voz { margin: 0; padding: 26px 0; border-top: 1px solid var(--hilo); display: grid; gap: 12px; }
.voz:first-child { border-top: 0; padding-top: 0; }
.voz blockquote { margin: 0; font-size: 1.12rem; line-height: 1.55; }
.autor { font-size: .94rem; color: var(--luna-3); }
.autor b { color: var(--luna); font-weight: 650; margin-right: 6px; }
.cinco { display: block; width: 78px; height: 14px; background: var(--foco);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'><path d='M8 .6l2.3 4.8 5.2.7-3.8 3.6.9 5.2L8 12.4l-4.6 2.5.9-5.2L.5 6.1l5.2-.7z'/></svg>") 0 0 / 15.6px 14px repeat-x;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'><path d='M8 .6l2.3 4.8 5.2.7-3.8 3.6.9 5.2L8 12.4l-4.6 2.5.9-5.2L.5 6.1l5.2-.7z'/></svg>") 0 0 / 15.6px 14px repeat-x; }

/* ═════════ CÓMO FUNCIONA ═════════ */
.pasos-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(28px, 4vw, 56px); }
.pas { display: grid; align-content: start; gap: 12px; padding-top: 26px; border-top: 1px solid var(--hilo-2); }
.pas-num { font-size: 2.4rem; line-height: 1; color: var(--foco); }
.pas h3 { margin: 6px 0 0; font-weight: 650; font-size: 1.3rem; letter-spacing: -0.015em; }
.pas p { color: var(--luna-2); }
.pas-meta { font-size: .9rem; color: var(--luna-3); }

/* ═════════ PREGUNTAS ═════════ */
.dudas-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.dudas-grid .cabeza { position: sticky; top: 130px; margin-bottom: 0; }
.duda { border-bottom: 1px solid var(--hilo); }
.duda:first-child { border-top: 1px solid var(--hilo); }
.duda button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border: 0; background: none; color: var(--luna); text-align: left; font-size: clamp(1.06rem, 1.5vw, 1.2rem); font-weight: 550; cursor: pointer; }
.duda .mas { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--noche-2); transition: transform .5s var(--salida), background-color .2s ease; }
.duda .mas::before, .duda .mas::after { content: ''; position: absolute; left: 10px; right: 10px; top: 15.25px; height: 1.5px; background: var(--luna); }
.duda .mas::after { transform: rotate(90deg); }
.duda button[aria-expanded="true"] .mas { transform: rotate(45deg); background: var(--foco-suave); }
.respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--salida); }
.respuesta > div { overflow: hidden; }
.duda button[aria-expanded="true"] + .respuesta { grid-template-rows: 1fr; }
.respuesta p { padding: 0 48px 24px 0; color: var(--luna-2); max-width: 68ch; }

/* ═════════ CÓMO LLEGAR ═════════ */
.llegar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.llegar-texto { display: grid; gap: 22px; }
.hechos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--luna-2); }
.hechos li { display: flex; gap: 12px; align-items: baseline; }
.hechos li::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--foco); transform: translateY(-2px); }
.mapa { aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: var(--noche-1); box-shadow: inset 0 0 0 1px var(--hilo); }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.3) brightness(.92) contrast(.92); }

/* ═════════ RESERVA ═════════ */
.reserva-seccion { background: linear-gradient(var(--noche), var(--noche-1) 30%); }
.reserva-seccion > .recuerdo { width: min(100% - 2 * var(--margen), 1240px); margin: 0 auto 32px; }
.reserva-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.reserva-lado { position: sticky; top: 104px; display: grid; gap: 26px; }
.reserva-lado figure { margin: 0; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; }
.reserva-lado figure img { width: 100%; height: 100%; object-fit: cover; }
.resumen { display: grid; gap: 0; padding: 6px 22px; border-radius: 22px; background: var(--noche-2); box-shadow: inset 0 0 0 1px var(--hilo); }
.resumen div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hilo); font-size: .96rem; }
.resumen div:last-child { border-bottom: 0; align-items: baseline; }
.resumen span { color: var(--luna-3); }
.resumen b { font-weight: 600; text-align: right; }
.resumen .res-total { font-size: 1.9rem; line-height: 1; }
.resumen p { padding: 0 0 14px; font-size: .88rem; color: var(--luna-3); }
.promesas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.promesas li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.promesas svg { width: 22px; height: 22px; margin-top: 2px; fill: none; stroke: var(--foco); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.promesas strong { display: block; font-weight: 600; }
.promesas span { color: var(--luna-3); font-size: .94rem; }

.forma-marco { padding: 8px; border-radius: 38px; background: oklch(0.94 0.018 40 / .035); box-shadow: inset 0 0 0 1px var(--hilo); }
.reserva-form { padding: clamp(22px, 3.4vw, 40px); border-radius: 30px; background: var(--noche); box-shadow: inset 0 1px 0 oklch(0.94 0.018 40 / .06); }
.fl-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.fl-progress span { position: relative; height: 3px; border-radius: 3px; background: var(--hilo-2); overflow: hidden; }
.fl-progress span::after { content: ''; position: absolute; inset: 0; background: var(--foco); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--salida); }
.fl-progress span.done::after, .fl-progress span.current::after { transform: scaleX(1); }
.fl-step-label { margin: 12px 0 26px; font-size: .92rem; color: var(--luna-3); }
.fl-step-label strong, .fl-step-label span { color: var(--luna); font-weight: 600; }
.step-panel { display: none; }
.step-panel.active { display: grid; gap: 22px; animation: panel-entra .55s var(--salida) both; }
.step-panel.active.atras { animation-name: panel-atras; }
@keyframes panel-entra { from { opacity: 0; transform: translateX(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes panel-atras { from { opacity: 0; transform: translateX(-16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.step-h { margin: 0; font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-weight: 600; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.02; letter-spacing: -0.02em; }
.step-h em { font-style: italic; font-weight: 500; color: var(--rosa); }
.step-sub { margin-top: 8px; color: var(--luna-2); }
.step-panel .field { margin-bottom: 0; }
.micro { display: block; font-size: .9rem; line-height: 1.5; color: var(--luna-3); }
.micro-mas summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; cursor: pointer; list-style: none; color: var(--foco); font-size: .94rem; font-weight: 600; }
.micro-mas summary::-webkit-details-marker { display: none; }
.micro-mas summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--salida); }
.micro-mas[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.micro-mas p { margin-top: 4px; font-size: .94rem; color: var(--luna-2); }
.aviso-campo { display: block; margin-top: 8px; font-size: .92rem; font-weight: 600; line-height: 1.45; color: var(--petalo); }
.aviso-campo.parcial { color: var(--foco); }
.fecha-oculta { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.pedida-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 20px; border-radius: 22px; background: var(--noche-2); box-shadow: inset 0 0 0 1px var(--hilo); transition: background-color .3s ease, box-shadow .3s ease; }
.pedida-tit { font-weight: 650; }
.pedida-sub { font-size: .92rem; color: var(--luna-2); }
.pedida-box.lista { background: var(--foco-suave); box-shadow: inset 0 0 0 1.5px var(--foco); }

.calendario { position: relative; }
.calendario .flatpickr-calendar.inline { width: 100% !important; max-width: 480px; margin-top: 2px; }
.calendario .flatpickr-innerContainer, .calendario .flatpickr-rContainer, .calendario .flatpickr-days, .calendario .dayContainer, .calendario .flatpickr-weekdays { display: block; width: 100% !important; min-width: 0 !important; max-width: none !important; }
.calendario .dayContainer { display: flex !important; flex-wrap: wrap; }
.calendario .flatpickr-weekdaycontainer { display: flex; width: 100%; }
.calendario .flatpickr-day { max-width: none !important; flex-basis: calc(100% / 7) !important; width: calc(100% / 7) !important; height: auto !important; aspect-ratio: 1 / .82; line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; position: relative; }
.cine-dot { position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--foco); }
.flatpickr-day.selected .cine-dot { background: var(--tinta-foco); }
.cine-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 10px 6px; font-size: .84rem; color: var(--luna-3); }
.cine-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.cine-legend-swatch { width: 9px; height: 9px; border-radius: 50%; }
.cine-legend-swatch.free { background: var(--luna-2); }
.cine-legend-swatch.partial { background: var(--foco); }
.cine-legend-swatch.blocked { background: var(--luna-3); opacity: .45; }

.slot-group { display: grid; gap: 12px; }
.slot-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.slot-option { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot-label { position: relative; display: grid; gap: 2px; padding: 20px; border-radius: 22px; background: var(--noche-2); box-shadow: inset 0 0 0 1.5px var(--hilo); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .25s ease, background-color .25s ease, transform .35s var(--salida); }
.slot-label:active { transform: scale(.98); transition-duration: 90ms; }
.slot-time { font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-weight: 600; font-size: 2.1rem; line-height: 1.1; }
.slot-end { color: var(--luna-2); }
.slot-hint { margin-top: 8px; font-size: .9rem; color: var(--luna-3); }
.slot-tag { position: absolute; right: 18px; top: 18px; font-size: .82rem; color: var(--luna-3); }
.slot-option:checked + .slot-label { background: var(--foco-suave); box-shadow: inset 0 0 0 2px var(--foco); }
.slot-option:focus-visible + .slot-label { outline: 2px solid var(--foco); outline-offset: 3px; }
.slot-label-disabled { opacity: .38; cursor: not-allowed; }
.slot-label-disabled .slot-time { text-decoration: line-through; }

.pkg-cards { display: grid; gap: 12px; }
.pkg-card-pick { position: relative; display: grid; grid-template-columns: 124px 1fr; border-radius: 22px; overflow: hidden; background: var(--noche-2); box-shadow: inset 0 0 0 1.5px var(--hilo); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .25s ease, background-color .25s ease, transform .35s var(--salida); }
.pkg-card-pick:active { transform: scale(.985); transition-duration: 90ms; }
.pkg-card-pick input { position: absolute; opacity: 0; pointer-events: none; }
.pkg-card-media { position: relative; }
.pkg-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pkg-card-body { display: grid; gap: 6px; padding: 16px 18px 16px; }
.pkg-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 30px; }
.pkg-card-name { font-weight: 650; font-size: 1.12rem; }
.pkg-card-price { font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-weight: 600; font-size: 1.55rem; line-height: 1; white-space: nowrap; }
.pkg-card-price small { font-family: var(--texto); font-size: .8rem; font-weight: 500; color: var(--luna-3); }
.pkg-card-desc { font-size: .94rem; color: var(--luna-2); }
.pkg-card-meta { font-size: .86rem; color: var(--luna-3); }
.pkg-card-ribbon, .pkg-card-badge { position: absolute; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; }
.pkg-card-ribbon { left: 8px; top: 8px; background: var(--foco); color: var(--tinta-foco); }
.pkg-card-badge { left: 8px; bottom: 8px; background: oklch(0.12 0.04 355 / .75); color: var(--luna); }
.pkg-card-pick::after { content: ''; position: absolute; right: 16px; top: 18px; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hilo-2); transition: box-shadow .3s var(--salida); }
.pkg-card-pick.selected { background: var(--foco-suave); box-shadow: inset 0 0 0 2px var(--foco); }
.pkg-card-pick.selected::after { box-shadow: inset 0 0 0 7px var(--foco); }
.pkg-cards-err { display: none; }
.pkg-cards-err.show { display: block; }
.micro-chips { display: grid; gap: 8px; margin-top: 8px; }
.micro-chips-tit { font-size: .86rem; font-weight: 600; color: var(--luna-3); }
.micro-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.micro-chip { padding: 5px 12px; border-radius: 999px; background: var(--noche-2); font-size: .88rem; color: var(--luna-2); }
.micro-chip b { color: var(--foco); }

.bloque-opcion { display: grid; gap: 10px; }
/* Paso 4: la salida rápida va arriba y a todo lo ancho, para que se vea
   antes que las opciones. */
.saltar-extras { width: 100%; }
.letras-card, .hab-card { display: grid; grid-template-columns: 132px 1fr; border-radius: 22px; overflow: hidden; background: var(--noche-2); box-shadow: inset 0 0 0 1.5px var(--hilo); transition: box-shadow .25s ease, background-color .25s ease, opacity .3s ease; }
.letras-media img, .hab-card-media img { width: 100%; height: 100%; object-fit: cover; }
.letras-body, .hab-card-body { display: grid; gap: 8px; padding: 16px 18px; }
.letras-title, .hab-card-title { margin: 0; font-weight: 650; font-size: 1.08rem; line-height: 1.3; }
.letras-desc, .hab-card-desc { font-size: .94rem; color: var(--luna-2); }
.letras-foot, .hab-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.letras-precio { font-weight: 600; color: var(--musgo); }
.letras-card.added, .hab-card.added { background: var(--foco-suave); box-shadow: inset 0 0 0 2px var(--foco); }
.hab-card-eyebrow { font-size: .86rem; font-weight: 600; color: var(--foco); }
.hab-card-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .86rem; color: var(--luna-3); }
.hab-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.hab-price-antes { color: var(--luna-3); text-decoration: line-through; }
.hab-price-now { font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-weight: 600; font-size: 1.6rem; line-height: 1; }
.hab-price-unit { font-size: .86rem; color: var(--luna-3); }
.hab-price-promo { padding: 3px 9px; border-radius: 999px; background: var(--musgo-fondo); color: var(--musgo); font-size: .78rem; font-weight: 650; }
.hab-status { font-size: .9rem; font-weight: 600; color: var(--luna-3); }
.hab-card.unavailable { opacity: .6; }
.hab-card.unavailable .hab-card-media img { filter: grayscale(.8); }
.hab-note { font-size: .9rem; color: var(--luna-3); }
.hab-note strong { color: var(--luna-2); }

.addon-collapsible { border-radius: 22px; background: var(--noche-2); box-shadow: inset 0 0 0 1.5px var(--hilo); }
.addon-summary { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 20px; cursor: pointer; list-style: none; font-weight: 600; }
.addon-summary::-webkit-details-marker { display: none; }
.addon-summary small { color: var(--luna-3); font-weight: 400; font-size: .88rem; }
.addon-summary::after { content: ''; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid var(--luna-2); border-bottom: 1.5px solid var(--luna-2); transform: rotate(45deg) translateY(-3px); transition: transform .35s var(--salida); }
.addon-collapsible[open] .addon-summary::after { transform: rotate(-135deg); }
.addon-count { display: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--foco); color: var(--tinta-foco); font-size: .8rem; font-weight: 700; place-items: center; }
.addon-count.visible { display: inline-grid; }
.addon-body { padding: 0 20px 14px; }
.addon-nota { font-size: .92rem; color: var(--luna-2); }
.addon-cat { margin: 18px 0 2px; font-size: .9rem; font-weight: 650; color: var(--foco); }
.addon-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hilo); }
.addon-item:last-child { border-bottom: 0; }
.addon-item-name { font-weight: 600; }
.addon-item-desc { font-size: .88rem; color: var(--luna-3); }
.addon-item-price { grid-column: 1; grid-row: 2; font-size: .92rem; font-variant-numeric: tabular-nums; color: var(--luna-2); }
.addon-item-price.active { color: var(--foco); font-weight: 600; }
.qty-ctrl { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--noche-3); }
.qty-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--luna); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background-color .2s ease, transform .3s var(--salida); }
.qty-btn:hover:not(:disabled) { background: var(--hilo-2); }
.qty-btn:active:not(:disabled) { transform: scale(.9); }
.qty-btn:disabled { opacity: .3; cursor: default; }
.qty-num { min-width: 22px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; }
.form-total-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 22px; background: var(--noche-2); }
.ftb-left { display: grid; gap: 2px; }
.ftb-label { font-weight: 650; }
.ftb-breakdown { font-size: .86rem; color: var(--luna-3); }
.ftb-total { font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-weight: 600; font-size: 2rem; line-height: 1; white-space: nowrap; }
.ftb-currency { margin-left: 4px; font-size: .86rem; color: var(--luna-3); }
.submit-urgency { text-align: center; font-size: .92rem; color: var(--luna-3); }
.submit-urgency strong { color: var(--luna); }
.pay-options { display: grid; gap: 10px; }
.btn-pay-opt { display: grid; justify-items: center; gap: 2px; min-height: 70px; padding: 12px 22px; border-radius: 24px; white-space: normal; text-align: center; }
.btn-pay-main { font-weight: 650; font-size: 1.05rem; }
.btn-pay-sub { font-size: .86rem; font-weight: 450; opacity: .8; }
.fl-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.fl-nav .fl-next { min-width: 170px; }

.pay-panel { display: none; }
.pay-panel.visible { display: grid; gap: 18px; animation: panel-entra .55s var(--salida) both; }
.pay-summary { padding: 6px 20px; border-radius: 22px; background: var(--noche-2); }
.pay-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hilo); font-size: .96rem; }
.pay-row-label { color: var(--luna-2); }
.pay-row-value { font-weight: 600; text-align: right; }
.pay-divider { height: 1px; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 12px; }
.pay-total-label { font-weight: 650; }
.pay-total-amount { font-family: var(--display); font-optical-sizing: none; font-variation-settings: 'opsz' 30; font-weight: 600; font-size: 2rem; }
.pay-total-currency { margin-left: 4px; font-size: .86rem; color: var(--luna-3); }
.aviso-anticipo { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; background: var(--foco-suave); font-size: .9rem; line-height: 1.5; }
.btn-mp svg { width: 26px; height: 26px; flex: none; }
.pay-secure { text-align: center; font-size: .9rem; color: var(--luna-3); }
.pay-error { display: none; }
.pay-error.visible { display: block; }
.pay-error a { color: inherit; font-weight: 650; }

.recuerdo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 18px 20px; border-radius: 22px; background: var(--foco-suave); box-shadow: inset 0 0 0 1px oklch(0.87 0.06 85 / .3); }
.recuerdo-txt strong { display: block; font-weight: 650; }
.recuerdo-txt span { font-size: .94rem; color: var(--luna-2); }
.recuerdo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sello-promo { position: fixed; left: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: var(--musgo-fondo); color: var(--musgo); font-size: .88rem; font-weight: 600; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* ═════════ BARRAS Y PIE ═════════ */
.barra { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 999px; background: oklch(0.21 0.04 355 / .84); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: inset 0 0 0 1px var(--hilo), 0 18px 50px oklch(0.06 0.04 355 / .5); transform: translateY(160%); transition: transform .6s var(--salida); }
.barra.visible { transform: none; }
.barra-texto { line-height: 1.2; }
.barra-texto strong { display: block; font-weight: 650; }
.barra-texto span { font-size: .82rem; color: var(--luna-3); }
.barra-acciones { display: flex; align-items: center; gap: 6px; }
.barra .redondo { width: 46px; height: 46px; color: var(--musgo); }
.barra .boton { min-height: 46px; }
.barra-total { transform: translateY(160%); transition: transform .6s var(--salida); }
.barra-total.visible { transform: none; }
@media (max-width: 899px) { .barra { display: flex; } .barra-total { display: flex; } }
@media (min-width: 900px) { .barra-total { display: none !important; } }
.wa-flota { position: fixed; z-index: 30; right: 22px; bottom: 22px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; color: var(--musgo); background: var(--noche-2); box-shadow: inset 0 0 0 1px var(--hilo-2), 0 16px 40px oklch(0.06 0.04 355 / .5); opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .4s ease, transform .5s var(--salida); }
.wa-flota.visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-flota svg, .barra .redondo svg.wa { width: 24px; height: 24px; fill: currentColor; stroke: none; }
@media (max-width: 899px) { .wa-flota { display: none; } }

.pie { padding-block: 72px calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hilo); background: var(--noche-1); }
.pie-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.pie .marca-logo { height: 30px; margin-bottom: 16px; }
.pie p { color: var(--luna-3); max-width: 40ch; }
.pie h4 { margin: 0 0 12px; font-size: .95rem; font-weight: 650; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie ul a { color: var(--luna-2); text-decoration: none; }
.pie ul a:hover { color: var(--luna); }
.pie-final { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hilo); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .88rem; color: var(--luna-3); }
.pie-final a { color: var(--luna-2); }

/* ═════════ CELULAR ═════════ */
@media (max-width: 900px) {
  .velada, .carta-grid, .dudas-grid, .llegar, .dormir, .voces, .reserva-grid { grid-template-columns: minmax(0, 1fr); }
  .velada-texto, .carta-grid .cabeza, .dudas-grid .cabeza, .reserva-lado { position: static; }
  .acto:nth-child(2) { margin-left: 0; }
  .acto-foto { margin-inline: calc(-1 * var(--margen)); border-radius: 0; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      @keyframes destapa { from { clip-path: inset(8% 6% 0 6% round 24px); } to { clip-path: inset(0 round 0); } }
    }
  }
  .acto-pie { padding-inline: 0; }
  .paquetes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(84vw, 360px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--margen)); padding: 8px var(--margen) 28px; scroll-padding-inline: var(--margen); }
  .paquetes::-webkit-scrollbar { display: none; }
  .paquete { scroll-snap-align: center; }
  .incluye { grid-template-columns: minmax(0, 1fr); }
  .pedida-seccion { min-height: 100svh; }
  /* El texto cae sobre las letras encendidas: la foto sube y el velo de abajo se cierra. */
  .pedida-seccion img { object-position: 50% 30%; }
  .pedida-seccion::after { background: linear-gradient(180deg, var(--noche) 0%, transparent 16%, transparent 38%, oklch(0.13 0.04 355 / .8) 60%, oklch(0.13 0.04 355 / .94) 100%); }
  .dormir figure { order: -1; margin-inline: calc(-1 * var(--margen)); border-radius: 0; aspect-ratio: 4 / 4.4; }
  .carta { grid-template-columns: minmax(0, 1fr); }
  .galeria-cabeza { align-items: start; flex-direction: column; }
  .tira-controles { display: none; }
  .tira figure { height: clamp(360px, 66svh, 560px); }
  .pasos-tres { grid-template-columns: minmax(0, 1fr); }
  .reserva-lado figure, .reserva-lado .resumen { display: none; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .pie-grid > :first-child { grid-column: 1 / -1; }
  .pie { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .forma-marco { padding: 0; margin-inline: calc(-1 * var(--margen) + 8px); border-radius: 30px; background: none; box-shadow: none; }
  .reserva-form { padding: 22px 16px; border-radius: 28px; background: var(--noche); box-shadow: inset 0 0 0 1px var(--hilo); }
  .slot-options, .form-row { grid-template-columns: minmax(0, 1fr); }
  .pedida-box { flex-direction: column; align-items: stretch; }
  .pkg-card-pick, .letras-card { grid-template-columns: 96px 1fr; }
  .hab-card { grid-template-columns: minmax(0, 1fr); }
  .hab-card-media { aspect-ratio: 16 / 9; }
  .fl-nav .fl-next { min-width: 0; flex: 1; }
  .respuesta p { padding-right: 0; }
}

/* Modo ?captura de la vista previa: alturas fijas para capturas largas. */
.captura .portada { min-height: 860px; }
.captura .pedida-seccion { min-height: 760px; }
.captura .isla { position: absolute; }
.captura .barra, .captura .barra-total, .captura .wa-flota { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js .aparece, .js .enciende, .js .portada picture img { opacity: 1; transform: none; filter: none; animation: none; transition: none; }
  .step-panel.active, .pay-panel.visible { animation: none; }
  .hoja-menu, .hoja-menu a { transition: opacity .2s ease, visibility 0s; transform: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .isla.solida .isla-in, .hoja-menu, .barra { background: var(--noche-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ═════════ FORMULARIO: AJUSTES POR DATOS DEL PIXEL (septiembre) ═════════ */
.slot-tag--destacada { padding: 3px 10px; border-radius: 999px; background: var(--foco); color: var(--tinta-foco); font-weight: 650; }
.hab-pago { padding: 10px 12px; border-radius: 12px; background: var(--foco-suave); font-size: .9rem; color: var(--luna-2); }
.dispo-real { text-align: center; font-size: .94rem; font-weight: 600; color: var(--rosa); }
.confianza { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: .9rem; color: var(--luna-2); }
.confianza li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.confianza li::before {
  content: ''; width: 16px; height: 16px; margin-top: 3px; background: var(--musgo);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
#payTransfer { display: inline; color: inherit; font-weight: 650; }
.step-h:focus { outline: none; }
.hoja-resumen { text-align: left; }
.hoja-resumen h2 { margin-top: 0; }
.resumen-filas div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--hilo); }
.resumen-filas span { color: var(--luna-3); }
.resumen-filas b { font-weight: 600; text-align: right; }
.resumen-filas .cifra { font-size: 1.6rem; line-height: 1; }
.barra-total .boton { border: 0; }
/* La ayuda bajo el WhatsApp hace más alta esa columna; sin esto el campo del
   nombre repartía el espacio sobrante y quedaba desalineado. */
.form-row .field { align-content: start; }

/* ═════════ RENDIMIENTO EN CELULAR ═════════
   En el teléfono las animaciones se veían a saltos. Le pesaban tres cosas
   a la vez: el vidrio esmerilado (backdrop-filter) de la cabecera y las
   barras, que se recalcula en cada cuadro del scroll; los textos y pasos
   que entran desenfocándose (filter: blur), que se repintan completos; y
   las fotos que se destapan con un recorte (clip-path) atado al scroll.
   Solo en pantallas táctiles: fondos casi opacos y entradas con opacidad
   y movimiento, que el celular anima sin repintar. En la compu, igual. */
@media (hover: none) and (pointer: coarse) {
  .isla.solida .isla-in { background: oklch(0.19 0.04 355 / .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hoja-menu { background: var(--noche-1); -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; }
  .barra { background: oklch(0.21 0.04 355 / .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sello-promo { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .aparece { filter: none; transition: opacity .9s var(--salida), transform 1.1s var(--salida); }
  .js .enciende { filter: none; }
  @keyframes panel-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
  @keyframes panel-atras { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
  @keyframes destapa { from { opacity: .35; transform: scale(.92); } to { opacity: 1; transform: none; } }

  /* Botones redondos: misma curva pareja que .boton (estilo-flujo.css). */
  .redondo { will-change: transform; transition: transform .26s cubic-bezier(.25, .8, .35, 1), background-color .2s ease; }
  .redondo:active { transform: scale(.92); transition-duration: .14s; }
}