/* ============================================================
   Amaura Eventos · estilos
   Los colores y tipografías salen de las gráficas de la marca:
   negro cálido, oro en tres tonos y marfil.
   ============================================================ */

:root {
  /* Color */
  --negro: #0b0806;          /* fondo */
  --carbon: #15100c;         /* superficies */
  --nogal: #241811;          /* madera, paneles */
  --terciopelo: #1a110c;     /* telón */
  --oro-claro: #f2dc9f;
  --oro: #cfa45a;
  --oro-hondo: #8e6a2c;
  --marfil: #f3e9d6;         /* texto */
  --marfil-suave: #cbbda3;   /* texto secundario */
  --error: #f0907c;

  --filete: color-mix(in srgb, var(--oro) 45%, transparent);
  --filete-suave: color-mix(in srgb, var(--oro) 22%, transparent);

  /* Tipografía */
  --f-marca: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-titulo: "Cormorant Garamond", Garamond, Georgia, serif;
  --f-manuscrita: "Allura", "Segoe Script", cursive;
  --f-texto: "Jost", "Segoe UI", system-ui, sans-serif;

  /* Medidas */
  --ancho: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --radio: 3px;
  --curva: cubic-bezier(.65, .02, .2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.telon-activo, html.telon-activo body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--negro);
  color: var(--marfil);
  font: 400 1.0625rem/1.6 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--oro-claro); }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, label { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

.manuscrita {
  font-family: var(--f-manuscrita);
  color: var(--oro);
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0;
}

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--oro); color: var(--negro); padding: 10px 16px;
  text-decoration: none; border-radius: var(--radio);
}
.saltar:focus { top: 16px; }

.sin-js { max-width: 640px; margin: 120px auto; padding: 0 var(--gutter); text-align: center; }

/* ------------------------------------------------------------
   Botones
   ------------------------------------------------------------ */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px;
  border-radius: var(--radio);
  font: 500 0.95rem/1 var(--f-texto);
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .25s, color .25s, border-color .25s;
}
.boton--oro {
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, #b98c42);
  color: #1a1209;
  border-color: #f6e6b6;
  font-weight: 600;
}
.boton--oro:hover { background: linear-gradient(180deg, #fff0c4, var(--oro-claro) 60%, var(--oro)); }
.boton--linea {
  background: transparent;
  color: var(--oro-claro);
  border-color: var(--filete);
}
.boton--linea:hover { border-color: var(--oro-claro); background: color-mix(in srgb, var(--oro) 10%, transparent); }

/* ============================================================
   TELÓN
   ============================================================ */
.telon {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  overflow: hidden;
  background: #050302;
}
.telon[hidden] { display: none; }

.telon__pano {
  position: absolute; top: 0; bottom: 0; width: 50.6%;
  /* Pliegues de terciopelo: el degradado repetido hace los surcos,
     la luz cenital y la sombra al piso dan el volumen. */
  background:
    linear-gradient(180deg, rgba(255, 214, 150, .07) 0%, transparent 28%, transparent 70%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(90deg,
      #0a0605 0px, #170e0a 14px, #2c1d14 30px, #3a281c 38px, #2a1b13 46px, #120b07 62px, #0a0605 78px);
  transition: transform 1.5s var(--curva), filter 1.5s var(--curva);
  will-change: transform;
}
.telon__pano--izq { left: 0; transform-origin: 0 50%; }
.telon__pano--der { right: 0; transform-origin: 100% 50%; }

/* Galón dorado al borde de cada paño y fleco al pie */
.telon__pano::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(90deg, var(--oro-hondo), var(--oro-claro) 45%, var(--oro) 60%, var(--oro-hondo));
  box-shadow: 0 0 18px rgba(207, 164, 90, .25);
}
.telon__pano--izq::before { right: 0; }
.telon__pano--der::before { left: 0; }
.telon__pano::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: repeating-linear-gradient(90deg, var(--oro) 0 1.5px, transparent 1.5px 5px);
  -webkit-mask: linear-gradient(180deg, #000 0 8px, rgba(0,0,0,.85) 9px, rgba(0,0,0,.2));
          mask: linear-gradient(180deg, #000 0 8px, rgba(0,0,0,.85) 9px, rgba(0,0,0,.2));
  opacity: .8;
}

/* Cenefa: la franja de arriba con las caídas en arco */
.telon__cenefa {
  position: absolute; left: 0; right: 0; top: 0; height: clamp(70px, 13vh, 130px); z-index: 2;
  /* Franja recta arriba + caídas en arco abajo, con pliegues finos */
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 9px, rgba(255,220,170,.05) 9px 12px, transparent 12px 18px) 0 0 / 100% 58% no-repeat,
    linear-gradient(180deg, #1c120c, #33231a) 0 0 / 100% 58% no-repeat,
    radial-gradient(ellipse 51% 100% at 50% 0, #33231a 0 60%, #241810 80%, transparent 81%) 0 100% / clamp(170px, 24vw, 320px) 44% repeat-x;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .75));
  transition: transform 1.2s var(--curva);
}
.telon__cenefa::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro) 20%, var(--oro-claro) 50%, var(--oro) 80%, transparent);
}

/* Foco de luz sobre el centro */
.telon::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 42% 48% at 50% 52%, rgba(255, 210, 140, .16), transparent 70%);
  transition: opacity .6s;
}

.telon__centro {
  position: relative; z-index: 3;
  display: grid; justify-items: center; gap: 18px;
  padding: 40px var(--gutter);
  text-align: center;
  transition: opacity .5s, transform .8s var(--curva);
}
.telon__centro::before {   /* medallón oscuro: tapa el galón central detrás del logo */
  content: ""; position: absolute; inset: -12% -18%; z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 6, 4, .92) 55%, rgba(10, 6, 4, .6) 78%, transparent);
}
.telon__logo { margin: 0 0 4px; }
.telon__logo img {
  width: min(520px, 80vw); height: auto;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .8));
}
.telon__frase {
  font-family: var(--f-manuscrita);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: var(--oro-claro);
  margin: 0;
}

.boton-telon {
  position: relative;
  margin-top: 8px;
  padding: 18px 42px;
  background: rgba(10, 6, 4, .55);
  border: 1px solid var(--oro);
  outline-offset: 6px;
  color: var(--oro-claro);
  font: 500 .95rem/1 var(--f-marca);
  letter-spacing: .32em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.boton-telon::before {   /* segundo filete, como los marcos de las gráficas */
  content: ""; position: absolute; inset: 4px;
  border: 1px solid var(--filete-suave);
  pointer-events: none;
}
.boton-telon:hover { background: var(--oro); color: #1a1209; }
.boton-telon span { position: relative; margin-right: -.32em; }

.telon__directo {
  color: var(--marfil-suave);
  font-size: .9rem;
  text-underline-offset: 4px;
}

/* --- Apertura --- */
.telon.abriendo .telon__centro { opacity: 0; transform: translateY(-14px) scale(.98); }
.telon.abriendo::before { opacity: 0; }
.telon.abriendo { background: transparent; pointer-events: none; transition: background-color .4s .3s; }
.telon.abriendo .telon__pano--izq { transform: scaleX(.12) skewY(-2deg); filter: brightness(.75); }
.telon.abriendo .telon__pano--der { transform: scaleX(.12) skewY(2deg); filter: brightness(.75); }
.telon.abriendo .telon__cenefa { transform: translateY(-15%); }
.telon.abierto .telon__pano--izq { transform: translateX(-102%) scaleX(.12); }
.telon.abierto .telon__pano--der { transform: translateX(102%) scaleX(.12); }
.telon.abierto .telon__cenefa { transform: translateY(-110%); }
.telon.abierto { opacity: 0; transition: opacity .7s .5s; }

@media (prefers-reduced-motion: reduce) {
  .telon__pano, .telon__cenefa, .telon__centro { transition: none; }
  .telon.abriendo { opacity: 0; transition: opacity .4s; }
}

/* ============================================================
   BARRA SUPERIOR
   ============================================================ */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  background: linear-gradient(180deg, rgba(11, 8, 6, .92), rgba(11, 8, 6, .0));
  transition: background-color .3s;
}
.barra.solida { background: rgba(11, 8, 6, .96); box-shadow: 0 1px 0 var(--filete-suave); }
.barra__marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.barra__marca img { width: 40px; height: auto; }
.barra__nombre {
  display: grid; line-height: 1;
  font: 500 1.25rem/1 var(--f-marca); letter-spacing: .08em; color: var(--oro-claro);
  text-transform: uppercase;
}
.barra__nombre small { font-size: .55rem; letter-spacing: .5em; color: var(--oro); margin-top: 5px; }
.barra__nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); }
.barra__nav a {
  color: var(--marfil); text-decoration: none; font-size: .92rem; letter-spacing: .03em;
}
.barra__nav a:hover { color: var(--oro-claro); }
.barra__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 1px solid var(--filete); border-radius: var(--radio);
}
.contador {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--oro); color: #1a1209; border-radius: 11px; font-size: .78rem; font-weight: 600;
}
.contador[hidden] { display: none; }

@media (max-width: 640px) {
  .barra__nav a:not(.barra__cta) { display: none; }
  .barra__nombre { font-size: 1.05rem; }
}

/* ============================================================
   PASILLO 3D
   La escena queda fija mientras la sección hace scroll; el
   script mueve el "mundo" hacia la cámara según el avance.
   ============================================================ */
.pasillo { position: relative; height: 400vh; /* el script ajusta el alto real */ }

.escena {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  perspective: var(--persp, 1000px);
  perspective-origin: 50% 46%;
  background: radial-gradient(ellipse at 50% 46%, #1a120d, #070504 70%);
}

.mundo {
  position: absolute; left: 50%; top: 46%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}
.mundo > * {
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  transform-origin: 0 0;
}

/* Muros con boiserie: zócalo, moldura dorada y paneles */
.muro {
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 18%),
    linear-gradient(180deg, transparent 0 63%, var(--oro) 63% calc(63% + 3px), transparent calc(63% + 3px) 66%, #1d140d 66%, #120c08),
    repeating-linear-gradient(90deg,
      transparent 0 34px,
      rgba(207, 164, 90, .16) 34px 35px,
      transparent 35px calc(var(--panel, 380px) - 35px),
      rgba(207, 164, 90, .16) calc(var(--panel, 380px) - 35px) calc(var(--panel, 380px) - 34px),
      transparent calc(var(--panel, 380px) - 34px) var(--panel, 380px)),
    linear-gradient(180deg, #2c1e15, #24180f 60%, #171009);
}
.muro--der { filter: brightness(.92); }

/* Piso de madera encerada: tablones a lo largo y un brillo al centro */
.piso {
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 2px, transparent 2px 120px),
    repeating-linear-gradient(0deg, transparent 0 420px, rgba(0,0,0,.35) 420px 422px),
    linear-gradient(90deg, #2a1a10, #4a301d 30%, #5a3b24 50%, #4a301d 70%, #2a1a10);
}
/* Alfombra de terciopelo negro con doble galón dorado */
.alfombra {
  background:
    repeating-linear-gradient(0deg, transparent 0 60px, rgba(207,164,90,.07) 60px 62px),
    linear-gradient(90deg,
      var(--oro) 0 10px, #140c08 10px 26px, var(--oro-hondo) 26px 32px, #1e130c 32px calc(100% - 32px),
      var(--oro-hondo) calc(100% - 32px) calc(100% - 26px), #140c08 calc(100% - 26px) calc(100% - 10px), var(--oro) calc(100% - 10px));
}
.cielo {
  background:
    repeating-linear-gradient(0deg, rgba(207,164,90,.08) 0 1px, transparent 1px var(--panel, 380px)),
    #0c0806;
}

/* Arco de entrada */
/* El hueco del arco: la sombra de expansión tapa las esquinas del pasillo
   que quedan fuera de la curva. Fuera del pasillo no hay nada que tapar
   (el fondo ya es oscuro), así que basta una franja corta: una sombra
   gigante obliga al celular a redibujar una superficie enorme en cada
   cuadro de la animación y el primer cuadro del pasillo aparecía tarde. */
.arco {
  border: 12px solid var(--oro);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
  box-shadow: 0 0 0 320px #070504, inset 0 0 0 2px var(--oro-claro), inset 0 0 70px rgba(0,0,0,.7);
  pointer-events: none;
}

/* Apliques de luz entre cuadros */
.aplique {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(255, 196, 120, .38) 0, rgba(255, 180, 100, .12) 35%, transparent 68%);
  pointer-events: none;
}
.aplique::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #fff3d0, var(--oro) 60%, var(--oro-hondo));
  box-shadow: 0 0 22px 8px rgba(255, 200, 120, .45);
}

/* Puerta del fondo */
.puerta {
  display: grid; place-items: center; align-content: center; gap: 22px;
  text-align: center;
  padding: 40px;
  border: 3px solid var(--oro);
  border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 210, 140, .35), rgba(60, 38, 22, .9) 60%, #120c08);
  box-shadow: 0 0 120px 30px rgba(255, 190, 110, .18), inset 0 0 0 10px #0d0907, inset 0 0 0 11px var(--filete);
}
.puerta h3 {
  font: 600 clamp(2.4rem, 4vw, 3.4rem)/1.05 var(--f-titulo);
  color: var(--marfil);
}
.puerta .manuscrita { font-size: 2.2rem; }

/* --- Cuadros (cada estación) --- */
.cuadro {
  width: var(--cuadro-w, 300px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  /* niebla según distancia: el script ajusta --niebla entre 0 y 1 */
}
.cuadro__marco {
  position: relative;
  display: block;
  padding: 12px;
  background:
    linear-gradient(135deg, var(--oro-claro), var(--oro) 30%, var(--oro-hondo) 55%, var(--oro) 75%, var(--oro-claro));
  box-shadow: 0 30px 50px rgba(0, 0, 0, .65), 0 0 0 1px #0a0604;
}
.cuadro__marco::before {   /* paspartú negro con filete */
  content: ""; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(242, 220, 159, .5), inset 0 0 22px rgba(0,0,0,.55);
}
.cuadro img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: #120c08;
}
.cuadro__placa {
  display: block;
  margin: 18px auto 0;
  width: 88%;
  padding: 12px 10px 13px;
  background: linear-gradient(180deg, #2a1c12, #150e09);
  border: 1px solid var(--filete);
  box-shadow: 0 10px 20px rgba(0,0,0,.5);
}
.cuadro__nombre {
  display: block;
  font: 600 1.45rem/1.08 var(--f-titulo);
  color: var(--marfil);
}
.cuadro__precio {
  display: block; margin-top: 6px;
  font: 500 .76rem/1.2 var(--f-marca); letter-spacing: .14em;
  color: var(--oro-claro);
}
.cuadro::after {   /* niebla */
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background: #070504;
  opacity: var(--niebla, 0);
}
.cuadro:hover .cuadro__marco,
.cuadro:focus-visible .cuadro__marco {
  box-shadow: 0 30px 50px rgba(0, 0, 0, .65), 0 0 0 1px #0a0604, 0 0 50px rgba(242, 210, 140, .35);
}
.cuadro:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 8px; }

/* Vista de cada cuadro con más luz cuando está cerca */
.cuadro.cerca .cuadro__placa { border-color: var(--oro-claro); }

.escena__niebla {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 22% 26% at 50% 46%, rgba(7,5,4,.6), rgba(7,5,4,.2) 55%, transparent 100%),
    linear-gradient(180deg, rgba(7,5,4,.55), transparent 18%, transparent 80%, rgba(7,5,4,.75));
}

.escena__titulo {
  position: absolute; left: 0; right: 0; top: 17%;
  text-align: center; pointer-events: none;
  padding: 0 var(--gutter);
  transition: opacity .3s;
}
.escena__titulo h2 {
  font: 600 clamp(2.6rem, 6.4vw, 5.2rem)/1 var(--f-titulo);
  color: var(--marfil);
  text-shadow: 0 4px 30px rgba(0,0,0,.9);
}
.escena__titulo .manuscrita { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: 6px; text-shadow: 0 2px 18px #000; }

.escena__pista {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 4px; margin: 0;
  color: var(--marfil-suave); font-size: .85rem; letter-spacing: .08em;
  pointer-events: none;
  transition: opacity .3s;
}
.escena__pista svg { animation: pista 1.8s ease-in-out infinite; }
@keyframes pista { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .escena__pista svg { animation: none; } }

/* Índice de placas al pie del pasillo */
.placas {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: 6px; justify-content: center;
  padding: 18px var(--gutter) 22px;
  background: linear-gradient(180deg, transparent, rgba(7,5,4,.9) 40%);
  overflow-x: auto;
  scrollbar-width: none;
}
.placas::-webkit-scrollbar { display: none; }
.placas button {
  flex: none;
  padding: 8px 12px;
  background: rgba(21, 16, 12, .8);
  border: 1px solid var(--filete-suave);
  border-radius: var(--radio);
  color: var(--marfil-suave);
  font-size: .8rem; letter-spacing: .02em;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.placas button:hover { color: var(--marfil); border-color: var(--filete); }
.placas button[aria-current="true"] { color: #1a1209; background: var(--oro); border-color: var(--oro-claro); }

@media (max-width: 900px) {
  .placas { justify-content: flex-start; }
}

/* --- Versión plana: movimiento reducido o navegador sin 3D --- */
.pasillo--plano { height: auto !important; padding: 120px var(--gutter) 60px; }
.pasillo--plano .escena {
  position: static; height: auto; overflow: visible; perspective: none; background: none;
}
.pasillo--plano .mundo {
  position: static; width: auto; height: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 28px;
  max-width: var(--ancho); margin: 0 auto;
}
.pasillo--plano .mundo > * { position: static; transform: none !important; }
.pasillo--plano .mundo > :not(.cuadro) { display: none; }
.pasillo--plano .cuadro { width: auto; }
.pasillo--plano .cuadro::after { display: none; }
.pasillo--plano .escena__niebla,
.pasillo--plano .escena__pista,
.pasillo--plano .placas { display: none; }
.pasillo--plano .escena__titulo { position: static; margin-bottom: 48px; }

/* ============================================================
   CÓMO FUNCIONA
   ============================================================ */
.como {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(80px, 12vw, 150px) var(--gutter) clamp(60px, 8vw, 100px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 100px);
  align-items: start;
}
.como__intro h2 {
  margin-top: 10px;
  font: 600 clamp(2.1rem, 4.2vw, 3.3rem)/1.06 var(--f-titulo);
  color: var(--marfil);
}
.como__para {
  margin: 26px 0 0;
  font: 500 1.25rem/1.5 var(--f-titulo); font-style: italic;
  color: var(--oro-claro);
}
.como__para i { font-style: normal; color: var(--oro-hondo); padding: 0 2px; }

.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; }
.pasos li {
  counter-increment: paso;
  position: relative;
  padding: 0 0 30px 74px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--filete-suave);
}
.pasos li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.pasos li::before {
  content: counter(paso);
  position: absolute; left: 0; top: -6px;
  width: 50px; height: 50px; display: grid; place-items: center;
  border: 1px solid var(--filete); border-radius: 50%;
  font: 500 1.3rem/1 var(--f-marca); color: var(--oro-claro);
}
.pasos h3 { font: 600 1.6rem/1.15 var(--f-titulo); color: var(--marfil); }
.pasos p { margin: 8px 0 0; color: var(--marfil-suave); }

@media (max-width: 860px) {
  .como { grid-template-columns: 1fr; }
}

/* ============================================================
   COTIZADOR
   ============================================================ */
.cotizar {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(60px, 9vw, 110px) var(--gutter) clamp(80px, 10vw, 130px);
  border-top: 1px solid var(--filete-suave);
}
.cotizar__cabeza { max-width: 620px; margin-bottom: 48px; }
.cotizar__cabeza h2 {
  margin-top: 6px;
  font: 600 clamp(2.6rem, 5.4vw, 4rem)/1 var(--f-titulo);
  color: var(--marfil);
}
.cotizar__cabeza p:last-child { color: var(--marfil-suave); margin: 14px 0 0; }

.cotizador {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 960px) {
  .cotizador { grid-template-columns: 1fr; }
}

.grupo {
  margin: 0 0 34px; padding: 0; border: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
}
.grupo legend {
  padding: 0 0 14px; margin-bottom: 4px; width: 100%;
  font: 600 1.7rem/1.1 var(--f-titulo); color: var(--oro-claro);
  border-bottom: 1px solid var(--filete-suave);
}
.grupo > :not(legend) { min-width: 0; }
.campo { display: grid; gap: 7px; align-content: start; }
.campo--ancho, .grupo > .items, .grupo > .items__vacio, .grupo > .agregar { grid-column: 1 / -1; }
.campo__etiqueta { font-size: .9rem; font-weight: 500; color: var(--marfil); }
.campo__etiqueta em { font-style: normal; font-weight: 400; color: var(--marfil-suave); font-size: .82rem; margin-left: 4px; }

input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--carbon);
  border: 1px solid #3a2c1e;
  border-radius: var(--radio);
  color: var(--marfil);
  font-size: 1rem;
  transition: border-color .2s;
}
textarea { resize: vertical; min-height: 96px; }
input::placeholder, textarea::placeholder { color: #8d806c; }
input:hover, select:hover, textarea:hover { border-color: var(--oro-hondo); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--oro); outline-offset: 1px; border-color: transparent; }
input[type="date"], input[type="time"] { color-scheme: dark; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23cfa45a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}
select option, select optgroup { background: var(--carbon); color: var(--marfil); }
.invalido { border-color: var(--error) !important; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.chips span {
  display: inline-block; padding: 10px 16px;
  border: 1px solid #3a2c1e; border-radius: 999px;
  font-size: .92rem; color: var(--marfil-suave);
  transition: border-color .2s, color .2s, background-color .2s;
}
.chips label:hover span { border-color: var(--oro-hondo); color: var(--marfil); }
.chips input:checked + span { background: var(--oro); border-color: var(--oro-claro); color: #1a1209; font-weight: 500; }
.chips input:focus-visible + span { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.chips.invalido span { border-color: var(--error); }

/* Lista de estaciones elegidas */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.items:empty { display: none; }
.item {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 12px 10px 10px;
  background: var(--carbon);
  border: 1px solid #2f2318;
  border-radius: var(--radio);
}
.item img { width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.item__nombre { font: 600 1.2rem/1.1 var(--f-titulo); color: var(--marfil); }
.item__detalle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.item__detalle select { min-height: 36px; padding: 4px 34px 4px 10px; font-size: .88rem; width: auto; }
.item__sub { font-size: .9rem; color: var(--oro-claro); font-variant-numeric: tabular-nums; }
.paso-cant { display: inline-flex; align-items: center; border: 1px solid #3a2c1e; border-radius: var(--radio); }
.paso-cant button {
  width: 34px; height: 34px; border: 0; background: none; color: var(--oro-claro); cursor: pointer; font-size: 1.1rem;
}
.paso-cant output { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.item__quitar {
  border: 0; background: none; color: var(--marfil-suave); cursor: pointer;
  font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; padding: 6px;
}
.item__quitar:hover { color: var(--error); }

.items__vacio {
  margin: 0; padding: 18px; text-align: center;
  border: 1px dashed #3a2c1e; border-radius: var(--radio);
  color: var(--marfil-suave); font-size: .95rem;
}
.items__vacio[hidden] { display: none; }
.items__vacio.invalido { border-color: var(--error); color: var(--error); }

.agregar {
  display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: end;
  padding-top: 6px;
}
.agregar .boton { min-height: 48px; }
#campo-variante[hidden] { display: none; }
@media (max-width: 640px) {
  .grupo { grid-template-columns: 1fr; }
  .agregar { grid-template-columns: 1fr; }
  .item { grid-template-columns: 52px minmax(0, 1fr); }
  .item img { width: 52px; height: 52px; }
  .item__quitar { grid-column: 2; justify-self: start; padding-left: 0; }
}

/* Boleta: la carta con el total */
.boleta { position: sticky; top: 90px; }
.boleta__marco {
  position: relative;
  padding: 34px 28px 28px;
  background: linear-gradient(180deg, #1a130d, #110c08);
  border: 1px solid var(--filete);
  outline: 1px solid var(--filete-suave);
  outline-offset: -8px;
  text-align: center;
}
.boleta__loto { width: 46px; margin: 0 auto 8px; }
.boleta h3 { font: 600 2rem/1 var(--f-titulo); color: var(--marfil); }
.boleta__evento { margin: 8px 0 18px; font: italic 500 1.08rem/1.35 var(--f-titulo); color: var(--oro-claro); }

.boleta__lineas { list-style: none; margin: 0 0 14px; padding: 0; text-align: left; display: grid; gap: 10px; }
.boleta__lineas li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: .95rem;
}
.boleta__lineas li span:first-child { flex: 0 1 auto; }
.boleta__lineas li::after { content: none; }
.boleta__lineas .puntos { flex: 1 1 20px; border-bottom: 1px dotted var(--oro-hondo); transform: translateY(-4px); min-width: 20px; }
.boleta__lineas .monto { flex: none; color: var(--oro-claro); font-variant-numeric: tabular-nums; }
.boleta__lineas .vacia { color: var(--marfil-suave); font-style: italic; justify-content: center; }

.boleta__resumen { margin: 0; padding-top: 14px; border-top: 1px solid var(--filete-suave); display: grid; gap: 6px; }
.boleta__resumen div { display: flex; justify-content: space-between; align-items: baseline; }
.boleta__resumen dt { color: var(--marfil-suave); font-size: .92rem; }
.boleta__resumen dd { margin: 0; font-variant-numeric: tabular-nums; }
.boleta__total { margin-top: 6px; }
.boleta__total dt { font: 500 .85rem/1 var(--f-marca); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-claro); }
.boleta__total dd { font: 700 2.3rem/1 var(--f-titulo); color: var(--marfil); }

.boleta__aviso {
  margin: 14px 0 0; padding: 10px 12px; text-align: left;
  font-size: .88rem; line-height: 1.45;
  background: color-mix(in srgb, var(--oro) 9%, transparent);
  border-radius: var(--radio);
  color: var(--marfil);
}
.boleta__aviso[hidden] { display: none; }
.boleta__nota { margin: 14px 0 18px; font-size: .8rem; line-height: 1.45; color: var(--marfil-suave); }
.boleta .boton { width: 100%; }
.boleta .boton + .boton { margin-top: 10px; }
.boleta .boton[hidden] { display: none; }

.error {
  margin: 0 0 14px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--error); border-radius: var(--radio);
  color: var(--error); font-size: .9rem;
}
.error[hidden] { display: none; }

@media (max-width: 960px) {
  .boleta { position: static; }
}

/* ============================================================
   FICHA (diálogo)
   ============================================================ */
.ficha {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0;
  background: transparent; color: var(--marfil);
  overflow: visible;
}
/* Sin desenfoque: en celulares, desenfocar en vivo el pasillo 3D atasca la
   tarjeta gráfica y la ficha tardaba muchos segundos en dibujarse. */
.ficha::backdrop { background: rgba(5, 3, 2, .9); }
/* Mientras la ficha está abierta el pasillo no se dibuja (queda tapado). */
html.ficha-abierta .mundo { visibility: hidden; }
.ficha[open] { animation: ficha-entra .45s var(--curva); }
.ficha[open]::backdrop { animation: fundido .35s ease; }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes fundido { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ficha[open], .ficha[open]::backdrop { animation: none; }
}

.ficha__caja {
  position: relative;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: linear-gradient(180deg, #19120c, #0f0a07);
  border: 1px solid var(--filete);
  overflow: hidden;
}
.ficha__foto { margin: 0; position: relative; min-height: 100%; }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ficha__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 70%, #19120c);
}
.ficha__cuerpo { padding: 40px 38px 34px; overflow-y: auto; }
.ficha__cuerpo h3 {
  margin-top: 4px;
  font: 700 clamp(2.1rem, 4vw, 3rem)/1 var(--f-titulo); color: var(--marfil);
}
.ficha__descripcion { margin: 14px 0 0; color: var(--marfil-suave); }
.ficha__descripcion:empty { display: none; }
.ficha__datos {
  list-style: none; margin: 20px 0 0; padding: 14px 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  border-top: 1px solid var(--filete-suave); border-bottom: 1px solid var(--filete-suave);
}
.ficha__datos li { font-size: .93rem; color: var(--marfil); }
.ficha__datos strong { font: 700 1.35rem/1 var(--f-titulo); color: var(--oro-claro); margin-right: 5px; }
.ficha h4 {
  margin: 22px 0 10px;
  font: 500 .78rem/1 var(--f-marca); letter-spacing: .24em; text-transform: uppercase; color: var(--oro);
}
.ficha__incluye { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ficha__incluye li { position: relative; padding-left: 20px; font-size: .97rem; }
.ficha__incluye li::before {
  content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px;
  background: var(--oro); transform: rotate(45deg);
}

.ficha__variantes { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.ficha__variantes legend { padding: 0; }
.variante { position: relative; display: block; cursor: pointer; }
.variante input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.variante__caja {
  display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline;
  padding: 12px 14px;
  border: 1px solid #3a2c1e; border-radius: var(--radio);
  transition: border-color .2s, background-color .2s;
}
.variante__caja::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--oro); align-self: center;
}
.variante__nombre { font: 600 1.25rem/1.1 var(--f-titulo); }
.variante__precio { color: var(--oro-claro); font-variant-numeric: tabular-nums; font-weight: 500; }
.variante__detalle { grid-column: 2 / -1; font-size: .88rem; color: var(--marfil-suave); }
.variante:hover .variante__caja { border-color: var(--oro-hondo); }
.variante input:checked + .variante__caja { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 8%, transparent); }
.variante input:checked + .variante__caja::before { background: radial-gradient(circle, var(--oro-claro) 0 4px, transparent 5px); }
.variante input:focus-visible + .variante__caja { outline: 2px solid var(--oro-claro); outline-offset: 2px; }

.ficha__precio-unico {
  margin: 22px 0 0;
  display: flex; align-items: baseline; gap: 12px;
}
.ficha__precio-unico strong { font: 700 2.5rem/1 var(--f-titulo); color: var(--oro-claro); }
.ficha__precio-unico span { color: var(--marfil-suave); font-size: .9rem; }

.ficha__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ficha__acciones .boton { flex: 1 1 200px; }

.ficha__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(11, 8, 6, .75); border: 1px solid var(--filete); border-radius: 50%;
  color: var(--oro-claro); cursor: pointer;
}
.ficha__cerrar:hover { background: var(--oro); color: #1a1209; }

@media (max-width: 760px) {
  .ficha__caja { grid-template-columns: 1fr; overflow-y: auto; }
  .ficha__foto { min-height: 0; }
  .ficha__foto img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
  .ficha__foto::after { background: linear-gradient(180deg, transparent 60%, #19120c); }
  .ficha__cuerpo { padding: 8px 20px 24px; overflow: visible; }
}

/* ============================================================
   AVISO FLOTANTE
   ============================================================ */
.aviso-flotante {
  position: fixed; left: 50%; bottom: 22px; z-index: 40;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 20px;
  background: #1c140d; border: 1px solid var(--oro);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  font-size: .92rem;
  animation: fundido .3s ease;
}
.aviso-flotante[hidden] { display: none; }
.aviso-flotante a { flex: none; color: var(--oro-claro); font-weight: 500; }

/* ============================================================
   PIE
   ============================================================ */
.pie {
  padding: 80px var(--gutter) 40px;
  text-align: center;
  border-top: 1px solid var(--filete-suave);
  background: radial-gradient(ellipse at 50% 0, #1a120c, var(--negro) 70%);
}
.pie__logo { width: min(300px, 70vw); height: auto; margin: 0 auto; }
.pie .manuscrita { margin-top: 14px; }
.pie__contacto {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px;
  color: var(--marfil-suave);
}
.pie__contacto a { color: var(--marfil); text-underline-offset: 4px; }
.pie__contacto a:hover { color: var(--oro-claro); }
.pie__legal { margin: 40px 0 0; font-size: .82rem; color: #8d806c; }
.pie__telon {
  margin-left: 14px; padding: 4px; border: 0; background: none; cursor: pointer;
  color: var(--marfil-suave); text-decoration: underline; text-underline-offset: 3px; font-size: .82rem;
}

/* ============================================================
   PÁGINA DE POLÍTICAS DE RESERVA
   ============================================================ */
.pol-portada {
  max-width: 760px; margin: 0 auto;
  padding: clamp(120px, 16vw, 170px) var(--gutter) 56px;
  text-align: center;
}
.pol-portada__loto { width: 72px; height: auto; margin: 0 auto 14px; }
.pol-portada h1 {
  margin-top: 6px;
  font: 700 clamp(3rem, 8vw, 5.4rem)/0.98 var(--f-titulo);
  color: var(--marfil);
}
.pol-portada__sub { margin: 18px auto 0; max-width: 560px; color: var(--marfil-suave); font-size: 1.08rem; }
.pol-portada__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* Resumen: tarjeta con doble filete, como la carta del cotizador */
.pol-resumen {
  max-width: 1000px; margin: 0 auto clamp(60px, 9vw, 100px);
  padding: 34px clamp(20px, 4vw, 44px) 28px;
  background: linear-gradient(180deg, #1a130d, #110c08);
  border: 1px solid var(--filete);
  outline: 1px solid var(--filete-suave);
  outline-offset: -8px;
}
@media (max-width: 1040px) { .pol-resumen { margin-left: var(--gutter); margin-right: var(--gutter); } }
.pol-resumen h2 {
  text-align: center;
  font: 600 2rem/1 var(--f-titulo); color: var(--oro-claro);
}
.pol-cifras {
  margin: 26px 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pol-cifras div {
  padding: 18px 16px;
  text-align: center;
  border-top: 1px solid var(--filete-suave);
}
.pol-cifras div:nth-child(3n + 2) { border-left: 1px solid var(--filete-suave); border-right: 1px solid var(--filete-suave); }
.pol-cifras dt {
  font: 500 .74rem/1 var(--f-marca); letter-spacing: .2em; text-transform: uppercase;
  color: var(--oro);
}
.pol-cifras dd { margin: 10px 0 0; font: 500 1.15rem/1.3 var(--f-titulo); color: var(--marfil); }
.pol-cifras strong { font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--oro-claro); }
.pol-resumen__iva { margin: 18px 0 0; text-align: center; font-size: .9rem; color: var(--marfil-suave); }

@media (max-width: 700px) {
  .pol-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pol-cifras div:nth-child(3n + 2) { border-left: 0; border-right: 0; }
  .pol-cifras div:nth-child(odd) { border-right: 1px solid var(--filete-suave); }
  .pol-cifras strong { font-size: 1.75rem; }
}

/* Cuerpo: índice fijo al costado + cláusulas */
.pol-cuerpo {
  max-width: var(--ancho); margin: 0 auto;
  padding: 0 var(--gutter) clamp(70px, 10vw, 120px);
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(30px, 6vw, 80px);
  align-items: start;
}
.pol-indice { position: sticky; top: 100px; }
.pol-indice__titulo {
  margin: 0 0 14px;
  font: 500 .74rem/1 var(--f-marca); letter-spacing: .24em; text-transform: uppercase; color: var(--oro);
}
.pol-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pol-indice a {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radio);
  color: var(--marfil-suave); text-decoration: none; font-size: .93rem; line-height: 1.3;
  transition: color .2s, background-color .2s;
}
.pol-indice a span { flex: none; color: var(--oro-hondo); font-variant-numeric: tabular-nums; font-size: .8rem; padding-top: 2px; }
.pol-indice a:hover { color: var(--marfil); background: color-mix(in srgb, var(--oro) 7%, transparent); }
.pol-indice a[aria-current] { color: #1a1209; background: var(--oro); }
.pol-indice a[aria-current] span { color: #4a3615; }

.pol-tema { margin-bottom: 64px; scroll-margin-top: 96px; }
.pol-tema h2 {
  padding-bottom: 14px;
  font: 600 clamp(1.9rem, 3.4vw, 2.5rem)/1.1 var(--f-titulo); color: var(--oro-claro);
  border-bottom: 1px solid var(--filete);
}
.clausulas { list-style: none; margin: 0; padding: 0; counter-reset: clausula var(--desde, 0); }
.clausulas li {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--filete-suave);
}
.clausulas li { counter-increment: clausula; }
.clausulas li::before {   /* número real de la cláusula (el tema parte en --desde + 1) */
  content: counter(clausula);
  grid-row: span 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--filete); border-radius: 50%;
  font: 500 1rem/1 var(--f-marca); color: var(--oro-claro);
  font-variant-numeric: lining-nums;
}
.clausulas h3 { font: 600 1.5rem/1.15 var(--f-titulo); color: var(--marfil); padding-top: 6px; }
.clausulas p { margin: 8px 0 0; max-width: 68ch; color: #e2d7c3; line-height: 1.7; }

.pol-cierre {
  margin-top: 20px; padding: 36px 24px;
  text-align: center;
  border: 1px solid var(--filete);
  outline: 1px solid var(--filete-suave); outline-offset: -8px;
  background: radial-gradient(ellipse at 50% 0, #21170f, #110c08 70%);
}
.pol-cierre p:not(.manuscrita) { margin: 8px 0 0; color: var(--marfil-suave); }

@media (max-width: 860px) {
  .pol-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pol-indice { min-width: 0; }
  /* El índice pasa a ser una fila deslizable pegada bajo la barra */
  .pol-indice {
    top: 64px; z-index: 5;
    margin: 0 calc(-1 * var(--gutter));
    padding: 10px var(--gutter);
    background: rgba(11, 8, 6, .97);
    border-bottom: 1px solid var(--filete-suave);
  }
  .pol-indice__titulo { display: none; }
  .pol-indice ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .pol-indice ol::-webkit-scrollbar { display: none; }
  .pol-indice a { flex: none; white-space: nowrap; border: 1px solid var(--filete-suave); padding: 7px 12px; }
  .pol-indice a span { display: none; }
  .pol-tema { scroll-margin-top: 140px; }
  .clausulas li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .clausulas li::before { width: 34px; height: 34px; font-size: .88rem; }
}

/* Impresión: hoja blanca, sin navegación */
@media print {
  body { background: #fff; color: #111; }
  .barra, .pol-indice, .pol-portada__acciones, .pol-cierre, .pie, .saltar { display: none !important; }
  .pol-portada { padding: 0 0 20px; }
  .pol-portada h1, .clausulas h3 { color: #111; }
  .pol-portada__sub, .clausulas p, .pol-resumen__iva { color: #333; }
  .pol-resumen { background: #fff; border-color: #b8893f; outline: 0; margin: 0 0 30px; }
  .pol-cuerpo { display: block; padding: 0; }
  .pol-tema h2, .pol-resumen h2, .pol-cifras strong, .pol-cifras dt { color: #8e6a2c; }
  .pol-cifras dd { color: #111; }
  .clausulas li { break-inside: avoid; }
}

/* ============================================================
   CÁLCULO POR PERSONAS
   ============================================================ */
.ficha__variantes:empty { display: none; }

.ficha__calculo {
  margin-top: 22px;
  padding: 18px 18px 16px;
  border: 1px solid var(--filete);
  background: color-mix(in srgb, var(--oro) 5%, transparent);
}
.ficha__calculo-titulo {
  display: block;
  font: 600 1.35rem/1.1 var(--f-titulo); color: var(--marfil);
}
.personas-control {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 16px; align-items: center;
  margin-top: 12px;
}
.personas-control input[type="number"] {
  min-height: 44px; padding: 8px 10px; text-align: center;
  font: 600 1.2rem/1 var(--f-texto); font-variant-numeric: tabular-nums;
}

/* Barra dorada: el tramo recorrido se pinta con --lleno */
.rango {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 0; height: 30px;
  padding: 0; border: 0; background: transparent;
  cursor: pointer;
}
.rango:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 4px; border-radius: 4px; }
.rango::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--oro) var(--lleno, 0%), #3a2c1e var(--lleno, 0%));
}
.rango::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3cf, var(--oro) 60%, var(--oro-hondo));
  border: 2px solid #1a1209; box-shadow: 0 0 0 1px var(--oro-claro), 0 4px 10px rgba(0,0,0,.5);
}
.rango::-moz-range-track { height: 6px; border-radius: 3px; background: #3a2c1e; }
.rango::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--oro); }
.rango::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff3cf, var(--oro) 60%, var(--oro-hondo));
  border: 2px solid #1a1209; box-shadow: 0 0 0 1px var(--oro-claro);
}

.ficha__minimo { margin: 8px 0 0; font-size: .84rem; color: var(--marfil-suave); line-height: 1.45; }
.ficha__total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--filete-suave);
}
.ficha__total span { font-size: .9rem; color: var(--marfil); }
.ficha__total strong {
  font: 700 2.4rem/1 var(--f-titulo); color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
}

/* Fila del cotizador: − personas + */
.paso-cant input {
  width: 58px; min-height: 34px; padding: 0 2px;
  border: 0; background: transparent; text-align: center;
  font-size: .95rem; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.paso-cant input::-webkit-outer-spin-button,
.paso-cant input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paso-cant button:disabled { opacity: .3; cursor: default; }
.item__pers { font-size: .82rem; color: var(--marfil-suave); }

.boleta__ajustar {
  display: inline-block; margin-top: 8px; padding: 7px 12px;
  border: 1px solid var(--oro); border-radius: var(--radio);
  background: var(--oro); color: #1a1209; font-weight: 600; font-size: .85rem;
  cursor: pointer;
}
.boleta__ajustar:hover { background: var(--oro-claro); }

.agregar { grid-template-columns: 1.4fr 1fr .7fr auto; }
@media (max-width: 640px) {
  .agregar { grid-template-columns: 1fr; }
}

/* Fila "Agregar estación": flexible, porque la variedad aparece y desaparece */
.agregar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.agregar > .campo:nth-child(1) { flex: 2 1 220px; }
.agregar > #campo-variante { flex: 1 1 150px; }
.agregar > .campo:nth-child(3) { flex: 0 1 110px; }
.agregar > .boton { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .agregar > .campo:nth-child(3) { flex: 1 1 110px; }
  .agregar > .boton { flex: 1 1 100%; }
}

/* ============================================================
   PAGO CON WEBPAY
   ============================================================ */
.boleta__abono { margin-top: 4px; }
.boleta__abono dt { font-size: .88rem; color: var(--oro-claro); }
.boleta__abono dd { font: 600 1.25rem/1 var(--f-titulo); color: var(--oro-claro); }
.boleta__abono[hidden] { display: none !important; }

.pago { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filete-suave); text-align: left; }
.pago[hidden] { display: none; }
.pago__prueba {
  margin: 0 0 12px; padding: 8px 10px;
  border: 1px dashed var(--oro); border-radius: var(--radio);
  font-size: .82rem; color: var(--oro-claro); text-align: center;
}
.pago__prueba[hidden] { display: none; }
.acepto { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; font-size: .88rem; color: var(--marfil); cursor: pointer; }
.acepto input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; flex: none; accent-color: var(--oro); }
.acepto.invalido { color: var(--error); }
.acepto.invalido input { outline: 2px solid var(--error); outline-offset: 2px; }
.pago__nota { margin: 10px 0 0; font-size: .78rem; line-height: 1.45; color: var(--marfil-suave); }
.boleta .boton:disabled { opacity: .6; cursor: progress; }

/* Comprobante */
.comprobante {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: 110px var(--gutter) 60px;
  background: radial-gradient(ellipse at 50% 20%, #1f160f, var(--negro) 65%);
}
.comprobante__marco {
  width: min(560px, 100%);
  padding: 40px clamp(20px, 5vw, 44px) 32px;
  text-align: center;
  background: linear-gradient(180deg, #1a130d, #110c08);
  border: 1px solid var(--filete);
  outline: 1px solid var(--filete-suave); outline-offset: -8px;
}
.comprobante__loto { width: 60px; height: auto; margin: 0 auto 10px; }
.comprobante h1 { margin-top: 4px; font: 700 clamp(2.2rem, 6vw, 3rem)/1.02 var(--f-titulo); color: var(--marfil); }
.comprobante__texto { margin: 14px auto 0; max-width: 42ch; color: var(--marfil-suave); }
.comprobante__datos {
  margin: 26px 0 0; padding: 4px 0;
  display: grid; grid-template-columns: auto 1fr; gap: 0 16px; text-align: left;
  border-top: 1px solid var(--filete-suave);
}
.comprobante__datos[hidden] { display: none; }
.comprobante__datos dt, .comprobante__datos dd { padding: 9px 0; border-bottom: 1px solid var(--filete-suave); margin: 0; }
.comprobante__datos dt { font-size: .86rem; color: var(--marfil-suave); }
.comprobante__datos dd { text-align: right; font-weight: 500; color: var(--marfil); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.comprobante__acciones { display: grid; gap: 10px; margin-top: 26px; }
.comprobante__nota { margin: 16px 0 0; font-size: .82rem; color: var(--marfil-suave); }
.comprobante__nota:empty { display: none; }