/* ============================================================
   Reserva de visitas · Museu Valencià del Joguet
   ============================================================ */

:root {
  --amarillo: #E7A23E;   /* mostaza de la entrada */
  --amarillo-2: #F0B358;
  --amarillo-suave: #FBEBCD;
  --tinta: #24323A;       /* marino */
  --rojo: #D24826;       /* rojo del vinilo de la entrada */
  --rojo-2: #B83C1F;
  --pizarra: #518082;    /* azul de la banda inferior */
  --muro: #FBF9F4;
  --tinta-2: #3E4A50;
  --gris: #6B6963;
  --gris-2: #9C998F;
  --linea: #E4DFD3;
  --linea-2: #EFEBE1;
  --fondo: #F7F4EC;
  --blanco: #FFFFFF;
  --ok: #1D7A46;
  --error: #B42318;
  --error-suave: #FDECEA;
  --radio: 16px;
  --radio-s: 10px;
  --sombra: 0 1px 2px rgba(31,30,27,.05), 0 8px 28px -10px rgba(31,30,27,.14);
  --serif: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
button, a, label, select, summary { touch-action: manipulation; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }

.saltar { position: absolute; left: 16px; top: -60px; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 10; text-decoration: none; }
.saltar:focus { top: 12px; }

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

/* ---------- Cabecera ---------- */
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); position: relative; z-index: 2; }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marca img { border-radius: 3px; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca__texto strong { font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.marca__texto span { font-size: 12.5px; color: var(--gris); }
.cabecera__acciones { display: flex; align-items: center; gap: 18px; }
.idioma { display: inline-flex; background: var(--fondo); border: 1px solid var(--linea); border-radius: 999px; padding: 3px; }
.idioma button { border: 0; background: none; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; cursor: pointer; color: var(--gris); }
.idioma button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.enlace-web { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--tinta-2); }
.enlace-web:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Portada ---------- */
.portada { background: var(--muro); position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.portada__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 16px; padding-top: 22px; padding-bottom: 18px; position: relative; }
.antetitulo { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.portada .antetitulo { color: var(--pizarra); display: flex; align-items: center; gap: 10px; }
.portada .antetitulo::before { content: ""; width: 0; height: 0; border-left: 14px solid var(--rojo); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.portada h1 {
  position: relative; margin: 0; font-family: var(--serif); font-weight: 400; color: var(--tinta);
  font-size: clamp(52px, 6.3vw, 96px); line-height: .92; letter-spacing: .005em; text-transform: uppercase;
}
.portada h1 em { font-style: normal; color: var(--rojo); }
.h1-forma { position: absolute; z-index: 0; left: -.18em; top: -.12em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--amarillo); opacity: .9; }
.portada h1 > span:last-child { position: relative; z-index: 1; }
.entradilla { margin: 22px 0 0; max-width: 31em; font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.55; color: var(--tinta-2); }
.portada__cta { margin-top: 28px; }
/* Escena de la entrada (piezas del original vectorial, capas independientes) */
.escena { position: relative; width: 100%; aspect-ratio: 1000 / 936; }
.escena__formas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.f--rojo { fill: var(--rojo); }
.f--mostaza { fill: var(--amarillo); }
.f--azul { fill: var(--pizarra); }
.pieza { position: absolute; height: auto; max-width: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 6px 10px rgba(36,50,58,.10)); }
.pieza--edificio, .pieza--logo { filter: none; }
.pieza--muneca, .pieza--oca { z-index: 2; }
/* entrada escalonada */
.escena .f, .escena .pieza { animation: entrar .7s cubic-bezier(.2,.7,.2,1) both; }
.escena .f { transform-box: fill-box; transform-origin: center; animation-name: crecer; }
.escena .f:nth-child(2) { animation-delay: .08s } .escena .f:nth-child(3) { animation-delay: .14s } .escena .f:nth-child(4) { animation-delay: .2s } .escena .f:nth-child(5) { animation-delay: .26s }
.pieza--edificio { animation-delay: .1s } .pieza--logo { animation-delay: .25s }
.pieza--zeppelin { animation-delay: .3s } .pieza--avion { animation-delay: .35s } .pieza--carro { animation-delay: .4s }
.pieza--llave { animation-delay: .45s } .pieza--maquina { animation-delay: .5s } .pieza--senor { animation-delay: .55s }
.pieza--heladero { animation-delay: .6s } .pieza--coche { animation-delay: .65s } .pieza--oca { animation-delay: .7s } .pieza--muneca { animation-delay: .75s }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
@keyframes crecer { from { opacity: 0; transform: scale(.6); } }
/* movimiento suave de los que vuelan */
.pieza--zeppelin { animation: entrar .7s .3s cubic-bezier(.2,.7,.2,1) both, flotar 7s 1.2s ease-in-out infinite; }
.pieza--avion { animation: entrar .7s .35s cubic-bezier(.2,.7,.2,1) both, flotar 5.5s 1.4s ease-in-out infinite reverse; }
.pieza--llave { transform-origin: 70% 30%; animation: entrar .7s .45s cubic-bezier(.2,.7,.2,1) both, cuerda 9s 2s ease-in-out infinite; }
@keyframes flotar { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-2.2%) } }
@keyframes cuerda { 0%,80%,100% { transform: rotate(0) } 86% { transform: rotate(-14deg) } 92% { transform: rotate(6deg) } }

/* Cintas (banda roja superior y azul inferior, como en la entrada) */
.cinta { overflow: hidden; white-space: nowrap; font-family: var(--serif); color: #FBF6EC; line-height: 1; user-select: none; }
.cinta--roja { background: var(--rojo); height: clamp(40px, 3.9vw, 56px); display: flex; align-items: center; }
.cinta--roja .cinta__pista { height: 100%; gap: 0; padding-right: 0; animation-duration: 95s; }
.cinta--roja img { height: 100%; width: auto; flex: none; margin-right: clamp(7px, .7vw, 11px); }
.cinta--roja .cinta__llave { margin: 0 clamp(10px, 1vw, 16px) 0 clamp(4px, .4vw, 6px); }
.cinta--azul { background: var(--pizarra); height: clamp(32px, 3vw, 44px); display: flex; align-items: center; }
.cinta--azul .cinta__pista { height: 100%; gap: 0; padding-right: 0; animation-duration: 110s; }
.cinta--azul img { height: 100%; width: auto; flex: none; margin-right: clamp(9px, .85vw, 12px); }
.cinta__pista { display: inline-flex; align-items: center; gap: .7em; padding-right: .7em; animation: cinta 70s linear infinite; }
.cinta__pista--inversa { animation-name: cinta-inv; animation-duration: 90s; }
@keyframes cinta { to { transform: translateX(-50%); } }
@keyframes cinta-inv { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Datos clave ---------- */
.datos-clave { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; position: relative; z-index: 2; }
.dato { background: var(--blanco); border-radius: var(--radio); padding: 22px 22px 20px; box-shadow: var(--sombra); border: 1px solid rgba(31,30,27,.04); }
.dato__icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--amarillo-suave); margin-bottom: 14px; }
.dato__icono svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dato h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.dato__precio { margin: 4px 0 8px; font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.dato__precio small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--gris); letter-spacing: 0; }
.dato p:last-child { margin: 0; color: var(--gris); font-size: 14.5px; }
.dato--nota { background: var(--pizarra); color: #F3F0E6; }
.dato--nota .dato__icono { background: rgba(255,255,255,.12); }
.dato--nota .dato__icono svg { stroke: var(--amarillo); }
.dato--nota p:last-child { color: #DCE4E6; margin-top: 8px; }
.dato--nota strong { color: var(--amarillo); font-weight: 600; }

/* ---------- Layout principal ---------- */
.principal { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; padding-top: 40px; padding-bottom: 72px; }
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); border: 1px solid rgba(31,30,27,.04); }
.formulario { padding: 0; overflow: hidden; scroll-margin-top: 16px; }
#form { padding: 32px 36px 32px; }

/* ---------- Pasos ---------- */
.pasos { border-bottom: 1px solid var(--linea-2); padding: 18px 36px 0; }
.pasos ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 6px; }
.pasos li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--gris-2); font-weight: 500; padding-bottom: 16px; white-space: nowrap; }
.pasos__num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--linea); font-size: 12.5px; font-weight: 600; transition: .2s; }
.pasos li.activo { color: var(--tinta); }
.pasos li.activo .pasos__num { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); }
.pasos li.hecho { color: var(--tinta-2); cursor: pointer; }
.pasos li.hecho .pasos__num { background: var(--tinta); border-color: var(--tinta); color: transparent; position: relative; }
.pasos li.hecho .pasos__num::after { content: ""; position: absolute; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.pasos__barra { height: 3px; background: transparent; margin: 0 -36px; }
.pasos__barra span { display: block; height: 100%; width: 20%; background: var(--tinta); transition: width .35s ease; }

/* ---------- Paso ---------- */
.paso { animation: aparecer .35s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.paso__cab { margin-bottom: 24px; }
.paso__num { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.paso__cab h2 { margin: 0; font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; font-weight: 560; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.paso__sub { margin: 8px 0 0; color: var(--gris); }

/* ---------- Campos ---------- */
.campo { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
fieldset.campo { margin-bottom: 24px; }
.campo label, .campo legend, .rejilla-dir label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; padding: 0; }
.opcional { font-weight: 400; color: var(--gris-2); font-size: 13px; }
.ayuda { margin: 6px 0 0; font-size: 13px; color: var(--gris); }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.campo--ancho { grid-column: 1 / -1; }
.rejilla-dir { display: grid; grid-template-columns: 1fr 110px; gap: 18px; }

input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; background: var(--blanco);
  border: 1.5px solid var(--linea); border-radius: var(--radio-s); font-size: 16px;
  transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #B3AFA4; }
input:hover, select:hover, textarea:hover { border-color: #CFC9BA; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(231,162,62,.42); }
.mayus { text-transform: uppercase; }
.mayus::placeholder { text-transform: none; }
.campo.con-error input, .campo.con-error select, .con-error > input, .con-error textarea { border-color: var(--error); }
.error { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: var(--error); min-height: 0; }
.error:empty { display: none; }
.error::before { content: "! "; font-weight: 700; }

.select { position: relative; }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
select { padding-right: 40px; cursor: pointer; }

/* Contador */
.contador { display: grid; grid-template-columns: 50px 1fr 50px; border: 1.5px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; background: #fff; transition: border-color .15s, box-shadow .15s; }
.contador:focus-within { border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(231,162,62,.42); }
.contador input { border: 0; border-radius: 0; text-align: center; font-weight: 600; font-size: 18px; box-shadow: none !important; -moz-appearance: textfield; }
.contador input::-webkit-inner-spin-button, .contador input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.contador button { border: 0; background: var(--fondo); font-size: 22px; line-height: 1; cursor: pointer; color: var(--tinta); }
.contador button:hover { background: var(--amarillo-suave); }
.con-error .contador { border-color: var(--error); }

/* Tipo de visita */
.opciones-tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opcion-tipo { position: relative; cursor: pointer; margin: 0 !important; }
.opcion-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-tipo__caja { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 18px 18px 18px 52px; border: 1.5px solid var(--linea); border-radius: 14px; transition: .15s; position: relative; background: #fff; }
.opcion-tipo__caja strong { font-size: 17px; font-weight: 600; }
.opcion-tipo__meta { font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.opcion-tipo__desc { font-size: 13.5px; color: var(--gris); font-weight: 400; margin-top: 4px; line-height: 1.45; }
.opcion-tipo__check { position: absolute; left: 18px; top: 20px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #C9C3B4; transition: .15s; }
.opcion-tipo:hover .opcion-tipo__caja { border-color: #CFC9BA; }
.opcion-tipo input:checked + .opcion-tipo__caja { border-color: var(--tinta); background: #FDF5E6; box-shadow: inset 0 0 0 1px var(--tinta); }
.opcion-tipo input:checked + .opcion-tipo__caja .opcion-tipo__check { border: 6px solid var(--tinta); background: var(--amarillo); }
.opcion-tipo input:focus-visible + .opcion-tipo__caja { box-shadow: 0 0 0 4px rgba(231,162,62,.55); }

/* Segmentado */
.segmentado { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.segmentado label { margin: 0; font-weight: 500; }
.segmentado input { position: absolute; opacity: 0; }
.segmentado span { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--linea); border-radius: 999px; cursor: pointer; font-size: 14.5px; transition: .15s; }
.segmentado input:checked + span { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.segmentado input:focus-visible + span { box-shadow: 0 0 0 4px rgba(231,162,62,.55); }

/* Interruptor */
.interruptor { display: flex !important; align-items: center; gap: 12px; font-weight: 500 !important; cursor: pointer; font-size: 15px !important; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor__pista { flex: none; width: 44px; height: 26px; border-radius: 999px; background: #D9D4C7; position: relative; transition: .2s; }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: .2s; }
.interruptor input:checked + .interruptor__pista { background: var(--tinta); }
.interruptor input:checked + .interruptor__pista::after { left: 21px; background: var(--amarillo); }
.interruptor input:focus-visible + .interruptor__pista { box-shadow: 0 0 0 4px rgba(231,162,62,.55); }
.interruptor--caja { background: var(--fondo); border-radius: 12px; padding: 14px 16px; margin-bottom: 22px; }
#acces-detalle { margin-top: 12px; }

/* Casilla */
.casilla { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin: 12px 0; font-size: 15px; }
.casilla input { position: absolute; opacity: 0; }
.casilla__marca { flex: none; width: 22px; height: 22px; border: 1.5px solid #BDB7A8; border-radius: 6px; margin-top: 1px; position: relative; background: #fff; transition: .15s; }
.casilla input:checked + .casilla__marca { background: var(--tinta); border-color: var(--tinta); }
.casilla input:checked + .casilla__marca::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--amarillo); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.casilla input:focus-visible + .casilla__marca { box-shadow: 0 0 0 4px rgba(231,162,62,.55); }

/* Aviso */
.aviso { display: flex; gap: 10px; background: var(--amarillo-suave); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: -4px 0 22px; color: var(--tinta-2); }
.aviso::before { content: "i"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--tinta); color: var(--amarillo); font-size: 12px; font-weight: 700; font-family: var(--serif); margin-top: 1px; }

/* ---------- Calendario ---------- */
.bloque-fecha { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; margin-top: 6px; }
.calendario { position: relative; border: 1.5px solid var(--linea); border-radius: 14px; padding: 16px 16px 12px; }
.calendario__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendario__titulo { margin: 0; font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 36; font-size: 21px; font-weight: 560; text-transform: capitalize; letter-spacing: -.01em; }
.calendario__nav { display: flex; gap: 6px; }
.calendario__nav button { width: 36px; height: 36px; display: grid; place-items: center; border: 1.5px solid var(--linea); background: #fff; border-radius: 10px; cursor: pointer; }
.calendario__nav button:hover:not(:disabled) { border-color: var(--tinta); }
.calendario__nav button:disabled { opacity: .35; cursor: default; }
.calendario__nav svg, .boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calendario__semana, .calendario__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario__semana span { text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris-2); padding: 4px 0 6px; }
.dia { position: relative; aspect-ratio: 1 / .92; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; font-size: 15px; font-weight: 500; cursor: pointer; color: var(--tinta); transition: background .12s, color .12s; }
.dia::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; }
.dia--disp { background: #FAF8F2; }
.dia--disp::after { background: var(--ok); }
.dia--pocas::after { background: #E08A00; }
.dia--disp:hover { background: var(--amarillo-suave); }
.dia--comp { color: var(--gris-2); text-decoration: line-through; cursor: not-allowed; }
.dia--comp::after { background: var(--error); opacity: .6; }
.dia--no { color: #C9C4B7; cursor: default; }
.dia--vacio { visibility: hidden; }
.dia--hoy { box-shadow: inset 0 0 0 1.5px var(--linea); }
.dia--sel, .dia--sel:hover { background: var(--tinta); color: #fff; }
.dia--sel::after { background: var(--amarillo); }
.calendario__velo { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255,255,255,.82); backdrop-filter: blur(1.5px); border-radius: 14px; font-weight: 600; font-size: 15px; transition: opacity .2s; }
.calendario__velo span { background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 999px; }
.calendario__velo.oculto { opacity: 0; pointer-events: none; }
.calendario__velo.cargando span { background: none; color: var(--gris); }
.leyenda { list-style: none; margin: 12px 0 0; padding: 10px 2px 0; border-top: 1px solid var(--linea-2); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--gris); }
.leyenda li { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 8px; height: 8px; border-radius: 50%; }
.l-disp { background: var(--ok); } .l-pocas { background: #E08A00; } .l-comp { background: var(--error); opacity: .6; } .l-cerr { background: #D7D2C5; }

/* Horas */
.horas { display: flex; flex-direction: column; }
.horas__titulo { margin: 4px 0 4px; font-size: 15px; font-weight: 600; }
.horas__fecha { display: block; font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 560; font-size: 21px; letter-spacing: -.01em; margin-top: 2px; }
.horas__fecha::first-letter { text-transform: uppercase; }
.horas__vacio { margin: 6px 0 0; color: var(--gris); font-size: 14.5px; padding: 18px; border: 1.5px dashed var(--linea); border-radius: 12px; }
.horas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.hora { position: relative; padding: 12px 6px; border: 1.5px solid var(--linea); border-radius: 10px; background: #fff; font-weight: 600; font-size: 15px; cursor: pointer; text-align: center; transition: .12s; font-variant-numeric: tabular-nums; }
.hora small { display: block; font-size: 11px; font-weight: 500; color: var(--gris-2); margin-top: 1px; }
.hora:hover:not(:disabled) { border-color: var(--tinta); }
.hora[aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.hora:disabled { color: #BDB8AB; background: var(--fondo); border-style: dashed; cursor: not-allowed; }
.horas__grupo { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-2); margin-top: 4px; }
.horas__nota { margin: auto 0 0; padding-top: 18px; font-size: 13px; color: var(--gris); }
.horas__nota a { color: var(--tinta); font-weight: 600; }

/* ---------- Revisión ---------- */
.revision { display: grid; gap: 12px; }
.rev { border: 1.5px solid var(--linea-2); border-radius: 14px; padding: 16px 18px; }
.rev__cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.rev__cab h3 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rev__editar { border: 0; background: none; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px; }
.rev dl { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: 14.5px; }
.rev dt { color: var(--gris); }
.rev dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.rev--destacada { background: #FDF5E6; border-color: var(--amarillo); }

.condiciones { margin-top: 22px; padding: 20px 20px 10px; background: var(--fondo); border-radius: 14px; }
.condiciones h3 { margin: 0 0 8px; font-size: 15px; }
.condiciones ul { margin: 0 0 14px; padding-left: 18px; font-size: 14px; color: var(--tinta-2); }
.condiciones li { margin: 4px 0; }
.privacidad { margin: 6px 0 10px; font-size: 13.5px; }
.privacidad summary { cursor: pointer; font-weight: 600; color: var(--tinta-2); padding: 4px 0; }
.privacidad dl { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; margin: 10px 0 6px; color: var(--gris); }
.privacidad dt { font-weight: 600; color: var(--tinta-2); }
.privacidad dd { margin: 0; }

/* ---------- Navegación ---------- */
.navegacion { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linea-2); }
.navegacion > :only-child, #btn-atras[hidden] + .boton { margin-left: auto; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-size: 15.5px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1.5px solid var(--tinta); transition: transform .1s, background .15s, color .15s; white-space: nowrap; }
.boton:active { transform: translateY(1px); }
.boton--principal { background: var(--tinta); color: #fff; }
.boton--principal:hover { background: #000; }
.boton--principal svg { stroke: var(--amarillo); }
.boton--secundario { background: #fff; color: var(--tinta); }
.boton--secundario:hover { background: var(--fondo); }
.boton--enviar, .boton--rojo { min-width: 210px; background: var(--rojo); color: #fff; border-color: var(--rojo); box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.boton--rojo svg { stroke: #fff; }
.boton--enviar:hover, .boton--rojo:hover { background: var(--rojo-2); border-color: var(--rojo-2); }
.girar { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; }
.enviando .girar { display: inline-block; }
.enviando { pointer-events: none; opacity: .85; }
@keyframes girar { to { transform: rotate(360deg); } }
.error-global { margin-top: 18px; padding: 12px 16px; background: var(--error-suave); color: var(--error); border-radius: 10px; font-weight: 500; font-size: 14.5px; }

/* ---------- Lateral ---------- */
.lateral { position: sticky; top: 20px; display: grid; gap: 16px; }
.resumen { padding: 22px 22px 18px; }
.resumen h2 { margin: 0 0 14px; font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 36; font-size: 22px; font-weight: 560; letter-spacing: -.01em; }
.resumen dl { margin: 0; }
.resumen dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea-2); font-size: 14.5px; }
.resumen dt { color: var(--gris); flex: none; }
.resumen dd { margin: 0; font-weight: 600; text-align: right; }
.resumen dd.vacio { color: #C2BDB0; font-weight: 400; }
.resumen__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding: 14px 16px; background: var(--amarillo); border-radius: 12px; font-size: 14px; font-weight: 600; }
.resumen__total strong { font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.resumen__nota { margin: 10px 0 0; font-size: 12.5px; color: var(--gris); line-height: 1.45; }
.ayuda-contacto { padding: 20px 22px; border-radius: var(--radio); border: 1.5px solid var(--linea); }
.ayuda-contacto h3 { margin: 0 0 4px; font-size: 15px; }
.ayuda-contacto p { margin: 0 0 12px; font-size: 13.5px; color: var(--gris); }
.contacto-linea { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.contacto-linea:hover { text-decoration: underline; text-underline-offset: 3px; }
.contacto-linea svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Éxito ---------- */
.exito { padding: 48px 40px 40px; text-align: center; animation: aparecer .4s ease both; outline: none; }
.exito__icono svg { width: 68px; height: 68px; margin: 0 auto 18px; fill: var(--amarillo); stroke: var(--tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.exito__icono circle { stroke: none; }
.exito__icono path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trazo .5s .25s ease forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.exito h2 { margin: 0; font-family: var(--serif); font-variation-settings: "SOFT" 100, "opsz" 72; font-weight: 560; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.02em; }
.exito__ref { display: inline-flex; gap: 10px; align-items: center; margin: 18px 0 6px; padding: 8px 16px; background: var(--fondo); border-radius: 999px; font-size: 14px; color: var(--gris); }
.exito__ref strong { color: var(--tinta); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.exito__texto { max-width: 34em; margin: 10px auto 0; color: var(--tinta-2); }
.linea-tiempo { list-style: none; padding: 0; margin: 30px auto 0; max-width: 640px; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: lt; }
.linea-tiempo li { position: relative; padding-top: 34px; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; color: var(--gris); }
.linea-tiempo li strong { color: var(--tinta); font-size: 14px; }
.linea-tiempo li::before { counter-increment: lt; content: counter(lt); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1.5px solid var(--linea); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--gris); z-index: 1; }
.linea-tiempo li::after { content: ""; position: absolute; top: 12px; left: 50%; width: 100%; height: 2px; background: var(--linea); }
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo li.hecho::before { background: var(--tinta); border-color: var(--tinta); color: var(--amarillo); }
.exito__resumen { text-align: left; margin: 30px auto 0; max-width: 560px; }
.exito__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); background: var(--blanco); font-size: 13.5px; color: var(--gris); }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.pie__fila > div:first-child { display: flex; flex-direction: column; }
.pie strong { color: var(--tinta); font-weight: 600; }
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pie__enlaces a { text-decoration: none; }
.pie__enlaces a:hover { color: var(--tinta); text-decoration: underline; }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .principal { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; grid-template-columns: 1fr 1fr; }
  .bloque-fecha { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .contenedor { padding-inline: 16px; }
  .cabecera__fila { min-height: 64px; }
  .marca__texto span, .enlace-web span:first-child { display: none; }
  .enlace-web { font-size: 18px; }
  .cabecera__acciones { gap: 10px; }
  .portada__grid { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 8px; gap: 8px; }
  .portada h1 { font-size: clamp(54px, 16vw, 76px); }
  .portada__cta { width: 100%; }
  .escena { margin: 4px -4px 0; }
  .datos-clave { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .dato { padding: 16px 18px; display: grid; grid-template-columns: 40px 1fr auto; column-gap: 14px; align-items: center; }
  .dato__icono { margin: 0; grid-row: span 2; align-self: start; }
  .dato h2 { grid-column: 2; }
  .dato__precio { grid-column: 3; grid-row: 1; margin: 0; font-size: 22px; }
  .dato p:last-child { grid-column: 2 / -1; margin-top: 4px; }
  .dato--nota { grid-template-columns: 40px 1fr; }
  .principal { padding-top: 24px; padding-bottom: 40px; gap: 16px; }
  .lateral { grid-template-columns: 1fr; }
  #form { padding: 24px 18px; }
  .pasos { padding: 14px 18px 0; }
  .pasos__barra { margin: 0 -18px; }
  .pasos li { padding-bottom: 12px; }
  .pasos__txt { display: none; }
  .pasos li.activo .pasos__txt { display: inline; }
  .rejilla, .opciones-tipo { grid-template-columns: 1fr; }
  .rejilla-dir { grid-template-columns: 1fr 90px; gap: 12px; }
  .calendario { padding: 12px 10px 10px; }
  .dia { font-size: 14.5px; }
  .rev dl { grid-template-columns: 1fr; gap: 0; }
  .rev dt { font-size: 12.5px; margin-top: 8px; }
  .privacidad dl { grid-template-columns: 1fr; }
  .navegacion { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); margin: 24px -18px -24px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); z-index: 3; }
  .navegacion .boton { flex: 1; padding: 0 16px; }
  .boton--enviar { min-width: 0; }
  .exito { padding: 36px 18px 28px; }
  .linea-tiempo { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .linea-tiempo li { padding: 0 0 0 40px; }
  .linea-tiempo li::before { left: 0; transform: none; }
  .linea-tiempo li::after { display: none; }
  .exito__acciones .boton { width: 100%; }
}

/* ---------- Impresión ---------- */
@media print {
  .cabecera__acciones, .portada, .datos-clave, .lateral, .pasos, .navegacion, .exito__acciones, .linea-tiempo, .saltar, .pie__enlaces { display: none !important; }
  body { background: #fff; }
  .principal { display: block; padding: 0; }
  .tarjeta { box-shadow: none; border: 0; }
  .exito { padding: 10px 0; }
  .exito__icono path { stroke-dashoffset: 0; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.principal.enviado .resumen { display: none; }

/* Elementos solo para móvil */
.mini-resumen, .resumen__cerrar, .velo-hoja { display: none; }
.resumen__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.resumen__cab h2 { margin-bottom: 14px; }


/* ---------- Tipografía condensada (Bebas Neue, como la rotulación del museo) ---------- */
.paso__cab h2, .calendario__titulo, .horas__fecha, .resumen h2, .exito h2, .dato__precio, .resumen__total strong {
  font-weight: 400; letter-spacing: .015em; font-variation-settings: normal;
}
.paso__cab h2 { font-size: clamp(34px, 3.8vw, 46px); line-height: 1; text-transform: uppercase; }
.calendario__titulo { font-size: 28px; }
.horas__fecha { font-size: 26px; text-transform: uppercase; }
.resumen h2 { font-size: 30px; text-transform: uppercase; }
.exito h2 { font-size: clamp(38px, 4.4vw, 54px); line-height: .98; text-transform: uppercase; }
.dato__precio { font-size: 36px; }
.resumen__total strong { font-size: 34px; }
.aviso::before { font-family: var(--sans); }
.dato h2 { font-weight: 700; }
.resumen__total { background: var(--amarillo); }
@media (prefers-reduced-motion: reduce) { .cinta__pista, .escena .f, .escena .pieza { animation: none !important; } }

/* ============================================================
   MÓVIL — experiencia optimizada (≤ 760 px)
   ============================================================ */
@media (max-width: 760px) {
  /* que el foco y los saltos no dejen campos tapados por las barras fijas */
  html { scroll-padding-top: 64px; scroll-padding-bottom: 150px; }
  body { font-size: 15.5px; }
  .cabecera__fila { min-height: 58px; gap: 10px; }
  .marca { gap: 10px; min-width: 0; }
  .marca img { width: 30px; height: 40px; }
  .marca__texto { min-width: 0; }
  .marca__texto strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .idioma button { padding: 6px 11px; }
  .enlace-web { font-size: 20px; padding: 6px 2px; }

  /* Portada más compacta */
  .portada__grid { padding-top: 22px; padding-bottom: 4px; }
  .portada .antetitulo { font-size: 11.5px; margin-bottom: 10px; }
  .portada h1 { font-size: clamp(50px, 14.6vw, 70px); }
  .entradilla { margin-top: 14px; font-size: 16px; }
  .portada__cta { margin-top: 20px; min-height: 54px; font-size: 16px; }
  .escena { margin: 6px auto 0; width: 100%; max-width: 440px; }
  .pieza { filter: none; }

  /* Datos clave: precio y duración ya están en el paso 1; solo queda el aviso */
  .datos-clave { margin-top: 16px; }
  .datos-clave .dato:not(.dato--nota) { display: none; }
  .dato--nota { padding: 14px 16px; column-gap: 12px; }
  .dato--nota .dato__icono { width: 36px; height: 36px; }
  .dato--nota h2 { font-size: 15px; }
  .dato--nota p:last-child { font-size: 14px; margin-top: 2px; }

  /* Formulario: barra de pasos fija arriba y acciones fijas abajo */
  .principal { padding-top: 16px; padding-bottom: 28px; gap: 12px; }
  .formulario { overflow: visible; }
  .pasos { position: sticky; top: 0; z-index: 6; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: var(--radio) var(--radio) 0 0; padding: 12px 16px 0; }
  .pasos__barra { margin: 0 -16px; }
  .pasos li { padding-bottom: 10px; font-size: 13.5px; }
  .pasos__num { width: 24px; height: 24px; font-size: 12px; }
  #form { padding: 20px 16px 24px; }
  .paso__num { display: none; }
  .paso__cab { margin-bottom: 18px; }
  .paso__cab h2 { font-size: 31px; }
  .paso__sub { font-size: 14.5px; margin-top: 4px; }
  .campo { margin-bottom: 16px; }
  .campo label, .campo legend, .rejilla-dir label { font-size: 14px; margin-bottom: 6px; }
  input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea { min-height: 50px; }
  .rejilla { column-gap: 12px; }
  .rejilla > .campo:not(.campo--ancho) { min-width: 0; }

  .opciones-tipo { gap: 10px; }
  .opcion-tipo__caja { padding: 14px 14px 14px 46px; }
  .opcion-tipo__check { left: 16px; top: 16px; }
  .opcion-tipo__desc { font-size: 13px; }

  .bloque-fecha { gap: 18px; }
  .calendario { padding: 12px 8px 8px; border-radius: 12px; }
  .calendario__cab { padding: 0 4px; }
  .calendario__nav button { width: 40px; height: 40px; }
  .calendario__semana, .calendario__dias { gap: 3px; }
  .dia { font-size: 15.5px; aspect-ratio: 1 / .96; border-radius: 9px; }
  .leyenda { font-size: 12px; gap: 4px 12px; padding: 8px 4px 0; }
  .horas { scroll-margin-top: 64px; }
  .horas__lista { grid-template-columns: repeat(3, 1fr); }
  .hora { padding: 13px 4px; font-size: 16px; }
  .horas__nota { padding-top: 12px; }
  #campo-idioma .segmentado { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  #campo-idioma .segmentado span { display: block; text-align: center; padding: 11px 6px; }
  .interruptor { align-items: flex-start !important; }
  .interruptor__pista { margin-top: 1px; }

  .navegacion { position: sticky; bottom: 0; z-index: 7; flex-wrap: wrap; gap: 8px 10px; margin: 22px -16px -24px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--linea-2); border-radius: 0 0 var(--radio) var(--radio); box-shadow: 0 -8px 20px -12px rgba(36,50,58,.25); }
  .navegacion .boton { flex: 1; min-height: 50px; padding: 0 14px; }
  #btn-atras { flex: 0 0 auto; width: 54px; padding: 0; }
  #btn-atras span { display: none; }
  .boton--enviar { min-width: 0; }
  .mini-resumen { display: flex; flex-basis: 100%; min-width: 0; max-width: 100%; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: var(--fondo); border-radius: 12px; padding: 8px 10px 8px 12px; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--tinta-2); }
  .mini-resumen__txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mini-resumen__imp { display: flex; align-items: center; gap: 6px; flex: none; }
  .mini-resumen__imp strong { font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: .015em; line-height: 1; color: var(--tinta); }
  .mini-resumen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
  .mini-resumen[aria-expanded="true"] svg { transform: rotate(180deg); }

  /* Resumen como hoja inferior */
  .lateral { gap: 12px; }
  .resumen { display: none; }
  body.hoja-abierta { overflow: hidden; }
  body.hoja-abierta .resumen { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 82vh; overflow: auto; border-radius: 22px 22px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 40px rgba(20,28,32,.25); animation: subir .28s cubic-bezier(.2,.8,.2,1); }
  body.hoja-abierta .resumen::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--linea); margin: 0 auto 10px; }
  .resumen__cerrar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fondo); cursor: pointer; margin-top: -6px; }
  .resumen__cerrar svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; }
  .velo-hoja { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(20,28,32,.45); animation: aparecer-velo .2s ease; }
  @keyframes subir { from { transform: translateY(100%); } }
  @keyframes aparecer-velo { from { opacity: 0; } }

  .ayuda-contacto { padding: 18px; }
  .contacto-linea { padding: 10px 0; }
  .rev { padding: 14px; }
  .condiciones { padding: 16px 14px 8px; }
  .casilla { font-size: 14.5px; }
  .pie__fila { padding-top: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 370px) {
  .marca__texto { display: none; }
  .portada h1 { font-size: 48px; }
  .dia { font-size: 14px; }
  .hora { font-size: 15px; }
}

/* Crédito del estudio */
.pie__credito { flex-basis: 100%; padding-top: 14px; margin-top: 2px; border-top: 1px solid var(--linea-2); font-size: 12.5px; color: var(--gris); }
.pie__credito a { color: var(--tinta-2); font-weight: 600; text-decoration: none; }
.pie__credito a:hover { color: var(--rojo); text-decoration: underline; text-underline-offset: 3px; }