/* ============================================================
   RESERVA PAGE — TU PRÓXIMA ESTANCIA EMPIEZA AQUÍ
   Solicitud de disponibilidad editorial, no un motor de reservas.
   Dark luxury: negro profundo, marfil, dorado tenue, mucho espacio
   negativo, composición asimétrica (izquierda la promesa, derecha
   el formulario), líneas finas, focus en dorado. Sin cards SaaS,
   sin panel blanco, sin precios ficticios.

   Estructura de revelado: el contenedor .rsv usa .is-loaded para su
   entrada; los elementos [data-rv] se revelan escalonadamente. Los
   pasos del formulario se cambian por JS; cada elemento sigue siendo
   accesible.

   Composición:
   LADO IZQUIERDO (.rsv__aside) — la promesa: overline, titular,
   lede, detalle editorial (línea dorada + frase) y nota honesta.
   LADO DERECHO (.rsv__panel) — progreso (01-04), formulario por
   pasos, resumen dinámico y estado de éxito.
   ============================================================ */

.rsv {
  position: relative;
  width: 100%;
  background-color: #080808;
  overflow-x: clip;
  /* Fondo: negro + textura papel sutil heredada de la marca */
}

.rsv__inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--grid-container);
  margin: 0 auto;
  box-sizing: border-box;
  padding: calc(var(--navbar-height) + clamp(64px, 10vh, 112px)) var(--grid-page-margin) clamp(96px, 13vh, 144px);
}

/* ===========================
   DISPOSICIÓN — dos columnas
   =========================== */

.rsv__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* ===========================
   LADO IZQUIERDO — la promesa
   =========================== */

.rsv__aside {
  position: sticky;
  top: calc(var(--navbar-height) + 32px);
}

.rsv__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
}

.rsv__overline {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-body-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.rsv__index {
  font-family: var(--font-body);
  font-size: 0.5rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ivory);
  opacity: 0.35;
}

.rsv__promise {
  margin-top: clamp(48px, 8vh, 96px);
}

.rsv__title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.8vw, 4rem);
  font-weight: var(--weight-heading-light);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-ivory);
}

.rsv__title-line {
  display: block;
}

.rsv__title-line--em {
  color: var(--color-gold);
}

.rsv__lede {
  margin: clamp(28px, 4vh, 44px) 0 0;
  max-width: 40ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: var(--color-gray-warm);
}

.rsv__detail {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: clamp(36px, 5vh, 56px);
}

.rsv__detail-mark {
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.85;
}

.rsv__detail-text {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-heading-light);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  letter-spacing: 0.01em;
  color: #C0AE83;
}

.rsv__note {
  margin: clamp(40px, 6vh, 64px) 0 0;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-body-light);
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: rgba(166, 162, 155, 0.75);
}

/* Elemento de confianza: sin pago en este paso */
.rsv__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: clamp(28px, 4vh, 40px) 0 0;
  max-width: 26ch;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: rgba(166, 162, 155, 0.7);
}

.rsv__trust-strong {
  font-size: 0.75rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.02em;
  color: rgba(246, 242, 235, 0.85);
}

.rsv__trust::before {
  content: '';
  flex: none;
  width: 20px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.6;
  margin-bottom: var(--space-8);
}

/* ===========================
   LADO DERECHO — el formulario
   =========================== */

.rsv__panel {
  position: relative;
  border-top: 1px solid var(--color-divider);
}

/* --- Progreso editorial --- */

.rsv__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-divider);
}

.rsv__stepnav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: clamp(18px, 3vh, 24px) 0;
  color: rgba(246, 242, 235, 0.35);
  transition: color 450ms var(--ease-out);
}

.rsv__stepnav::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}

.rsv__stepnav.is-active {
  color: var(--color-gold);
}

.rsv__stepnav.is-active::after,
.rsv__stepnav.is-done::after {
  transform: scaleX(1);
}

.rsv__stepnav-num {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.2em;
}

.rsv__stepnav-label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Formulario --- */

.rsv__form {
  padding-top: clamp(40px, 6vh, 64px);
}

.rsv [hidden] {
  display: none !important;
}

.rsv__notice {
  margin-top: clamp(28px, 4vh, 40px);
  padding: clamp(20px, 3vh, 28px);
  border: 1px solid rgba(224, 122, 92, 0.35);
  background: rgba(224, 122, 92, 0.06);
}

.rsv__notice-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E07A5C;
}

.rsv__notice-copy {
  margin-top: var(--space-8);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(246, 242, 235, 0.72);
}

.rsv__notice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-12);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(246, 242, 235, 0.86);
}

.rsv__notice-list li::before {
  content: '· ';
  color: #E07A5C;
}

.rsv__submit--disabled,
.rsv__submit--disabled:hover,
.rsv__submit--disabled:focus-visible {
  cursor: not-allowed;
  color: rgba(246, 242, 235, 0.35);
  border-color: rgba(196, 168, 110, 0.25);
  background: transparent;
}

.rsv__step {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.rsv__step-legend {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: clamp(32px, 5vh, 48px);
  padding: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--color-ivory);
}

.rsv__step-legend::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.6;
  margin-top: var(--space-16);
}

.rsv__step-legend-text {
  display: block;
  margin-top: var(--space-8);
  font-size: inherit;
}

.rsv__step-legend-num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin: 0;
}

/* --- Campos --- */

.rsv__fieldgroup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 2.5vw, 40px);
}

.rsv__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-bottom: clamp(28px, 4vh, 40px);
  min-width: 0;
}

.rsv__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(246, 242, 235, 0.75);
}

.rsv__label--block {
  margin-bottom: var(--space-8);
}

.rsv__req {
  color: var(--color-gold);
}

.rsv__optional {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.1em;
  text-transform: none;
  color: rgba(166, 162, 155, 0.52);
}

.rsv__input {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(14px, 2vh, 18px) 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-regular);
  letter-spacing: 0.01em;
  color: var(--color-ivory);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-divider);
  border-radius: 0;
  transition: border-color 400ms var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.rsv__input::placeholder {
  color: rgba(166, 162, 155, 0.5);
}

.rsv__input:focus {
  outline: none;
  border-bottom-color: var(--color-gold);
}

.rsv__input--invalid {
  border-bottom-color: rgba(196, 92, 62, 0.7);
}

.rsv__input::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.4) saturate(2);
  cursor: pointer;
  opacity: 0.7;
}

.rsv__select {
  cursor: pointer;
}

.rsv__textarea {
  resize: vertical;
  min-height: 76px;
  line-height: 1.8;
  color: var(--color-ivory);
}

/* --- Resumen vivo bajo las fechas (paso 01) --- */
.rsv__live {
  margin: clamp(16px, 3vh, 28px) 0 clamp(32px, 5vh, 48px);
  padding: 0;
}

.rsv__live-line {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.02em;
  color: var(--color-gold);
  opacity: 0.85;
  min-height: 1.2em;
}

/* --- Steppers de adultos / niños (paso 01) --- */

.rsv__fieldgroup--counts .rsv__field {
  margin-bottom: clamp(32px, 5vh, 48px);
}

.rsv__stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 220px;
  border-bottom: 1px solid var(--color-divider);
}

.rsv__stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: var(--weight-heading-light);
  color: var(--color-gray-warm);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 400ms var(--ease-out);
}

.rsv__stepper-btn:hover,
.rsv__stepper-btn:focus-visible {
  color: var(--color-gold);
}

.rsv__stepper-btn:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 2px;
}

.rsv__stepper-input {
  width: 3ch;
  text-align: center;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: var(--weight-heading-light);
  color: var(--color-ivory);
  background: transparent;
  border: none;
  padding: var(--space-12) 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --- Select de motivo de viaje con flecha (paso 01) --- */

.rsv__select-wrap {
  position: relative;
}

.rsv__select-wrap .rsv__select {
  padding-right: 32px;
  cursor: pointer;
}

.rsv__select-arrow {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  color: var(--color-gold);
  pointer-events: none;
  opacity: 0.8;
}

/* --- Teléfono: indicativo + número (paso 02) --- */

.rsv__telgroup {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--color-divider);
  transition: border-color 400ms var(--ease-out);
}

.rsv__telgroup:focus-within {
  border-bottom-color: var(--color-gold);
}

.rsv__telgroup .rsv__input {
  border-bottom: none;
}

.rsv__telgroup-code {
  position: relative;
  flex: none;
  width: auto;
  min-width: 88px;
  max-width: 132px;
  display: inline-flex;
  align-items: center;
}

.rsv__telgroup-code::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-divider);
}

.rsv__telgroup-select {
  width: auto;
  min-width: 0;
  max-width: 100%;
  padding-right: 24px;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.rsv__telgroup-arrow {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gold);
  pointer-events: none;
  opacity: 0.8;
}

.rsv__telgroup-num {
  flex: 1;
  min-width: 0;
}

/* --- Buscador de países (paso 02) --- */

.rsv__country {
  position: relative;
}

.rsv__country-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: #0E0D0B;
  border: 1px solid rgba(196, 168, 110, 0.25);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}

.rsv__country-opt {
  padding: var(--space-12) var(--space-16);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: rgba(246, 242, 235, 0.85);
  cursor: pointer;
}

.rsv__country-opt:hover,
.rsv__country-opt:focus-visible {
  background: rgba(196, 168, 110, 0.12);
  color: var(--color-ivory);
}

.rsv__country-empty {
  padding: var(--space-12) var(--space-16);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(166, 162, 155, 0.7);
}

/* --- Nota de privacidad (paso 02) --- */

.rsv__privacy {
  margin: 0 0 clamp(20px, 3vh, 28px);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-body-regular);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(180, 176, 168, 0.82);
}

/* --- Navegación paso 02 --- */

.rsv__navbtns--step2 .rsv__btn--back {
  color: var(--color-gray-warm);
}

.rsv__navbtns--step2 {
  margin-top: clamp(8px, 1.5vh, 16px);
  padding-top: clamp(24px, 3.5vh, 32px);
}

.rsv__btn--disabled,
.rsv__btn--disabled:hover,
.rsv__btn--disabled:focus-visible {
  color: rgba(246, 242, 235, 0.25);
  cursor: not-allowed;
  outline: none;
}

.rsv__btn--disabled::after {
  opacity: 0;
  transform: scaleX(0);
}

/* --- CTA del paso 01 visible + confianza (paso 04) --- */

.rsv__step1-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-16);
}

.rsv__step1-trust {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(166, 162, 155, 0.7);
  text-align: right;
}

.rsv__error {
  min-height: 1em;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.04em;
  color: rgba(224, 122, 92, 0.9);
}

/* --- Checks (necesidades) --- */

.rsv__checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: var(--space-8);
}

.rsv__check {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 350ms var(--ease-out);
}

/* Área completa clicable con feedback sutil al pasar/hover */
.rsv__check:hover {
  background: rgba(196, 168, 110, 0.06);
}

.rsv__check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.rsv__check-box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-divider);
  transition: border-color 400ms var(--ease-out), background-color 400ms var(--ease-out);
}

/* Marca interna (checkbox) */
.rsv__check-box::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--color-ivory);
  border-bottom: 1.5px solid var(--color-ivory);
  transform: translate(-50%, -50%) rotate(-45deg) scale(0);
  opacity: 0;
  transition: transform 250ms cubic-bezier(.4,0,.2,1), opacity 250ms;
}

.rsv__check input:checked + .rsv__check-box {
  border-color: var(--color-gold);
  background: rgba(196, 168, 110, 0.15);
}

.rsv__check input:checked + .rsv__check-box::after {
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
  opacity: 1;
}

.rsv__check input:focus-visible + .rsv__check-box {
  outline: 1px solid var(--color-gold);
  outline-offset: 2px;
}

.rsv__check-text {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-body-light);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(246, 242, 235, 0.62);
  transition: color 400ms var(--ease-out);
}

.rsv__check input:checked ~ .rsv__check-text {
  color: rgba(246, 242, 235, 0.95);
}

.rsv__hint {
  margin: clamp(16px, 2.5vh, 24px) 0 0;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(180, 176, 168, 0.72);
}

/* --- Botones de navegación de pasos --- */

.rsv__navbtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(28px, 4vh, 40px);
  border-top: 1px solid var(--color-divider);
}

.rsv__btn {
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-warm);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-16) 0;
  transition: color 400ms var(--ease-out);
}

.rsv__btn:hover,
.rsv__btn:focus-visible {
  color: var(--color-ivory);
}

.rsv__btn:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.rsv__btn--next {
  position: relative;
  color: var(--color-gold);
  cursor: pointer;
}

.rsv__btn--next::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(196, 168, 110, 0.5);
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 450ms var(--ease-out);
}

.rsv__btn--next:hover,
.rsv__btn--next:focus-visible {
  color: var(--color-gold);
}

.rsv__btn--next:hover::after {
  transform: scaleX(1);
}

/* --- Botón final de envío --- */

.rsv__navbtns--final {
  align-items: flex-end;
}

.rsv__submit {
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ivory);
  background: transparent;
  border: 1px solid rgba(196, 168, 110, 0.7);
  padding: clamp(16px, 2.4vh, 22px) clamp(28px, 3.5vw, 44px);
  cursor: pointer;
  transition: background-color 450ms var(--ease-out), color 450ms var(--ease-out), border-color 450ms var(--ease-out);
}

.rsv__submit:hover,
.rsv__submit:focus-visible {
  background-color: rgba(196, 168, 110, 0.9);
  border-color: var(--color-gold);
  color: #16130F;
}

.rsv__submit:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* --- Resumen --- */

.rsv__summary {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 44px);
}

.rsv__summary-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.rsv__summary-title {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.rsv__summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin: 0;
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.rsv__summary-line span {
  color: rgba(246, 242, 235, 0.6);
}

.rsv__summary-line em {
  font-style: normal;
  color: var(--color-ivory);
  text-align: right;
  word-break: break-word;
}

.rsv__summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-body-light);
  line-height: 1.7;
}

.rsv__summary-sol {
  color: rgba(246, 242, 235, 0.85);
}

.rsv__disclaimer {
  margin: clamp(32px, 5vh, 48px) 0 0;
  max-width: 48ch;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-light);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: rgba(166, 162, 155, 0.8);
}

.rsv__payment {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: clamp(28px, 4vh, 40px);
  padding-top: clamp(24px, 3.5vh, 32px);
  border-top: 1px solid var(--color-divider);
}

.rsv__payment-copy {
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.8;
  color: rgba(166, 162, 155, 0.82);
}

.rsv__payment-qr {
  width: min(220px, 100%);
  height: auto;
  border: 1px solid rgba(196, 168, 110, 0.35);
}

.rsv__payment-copy--note {
  color: rgba(196, 168, 110, 0.72);
}

.rsv__payment-cta {
  align-self: flex-start;
  margin-top: var(--space-8);
  text-align: left;
}

.rsv__success-title:focus {
  outline: none;
}

.rsv__legal-link {
  color: var(--color-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 168, 110, 0.35);
  transition: color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}

.rsv__legal-link:hover,
.rsv__legal-link:focus-visible {
  color: var(--color-ivory);
  border-bottom-color: rgba(246, 242, 235, 0.45);
}

.rsv__legal-link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 3px;
}

.rsv__payment-data {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 46ch;
}

.rsv__payment-data div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
}

.rsv__payment-data dt {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(166, 162, 155, 0.8);
}

.rsv__payment-data dd {
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-ivory);
}

/* --- Enlace alternativo a WhatsApp --- */

.rsv__alt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  margin-top: clamp(40px, 6vh, 64px);
  padding-top: clamp(32px, 4vh, 40px);
  border-top: 1px solid var(--color-divider);
}

.rsv__alt-q {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.02em;
  color: var(--color-gray-warm);
}

.rsv__alt-link {
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-decoration: none;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid transparent;
  transition: color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

.rsv__alt-link:hover,
.rsv__alt-link:focus-visible {
  color: var(--color-ivory);
  border-bottom-color: rgba(196, 168, 110, 0.4);
}

.rsv__alt-link:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.rsv__alt-link--disabled,
.rsv__alt-link--disabled:hover {
  color: rgba(166, 162, 155, 0.55);
  border-bottom-color: transparent;
  cursor: not-allowed;
}

/* ===========================
   ESTADO DE ÉXITO
   =========================== */

.rsv__success {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: clamp(40px, 5vw, 88px);
  row-gap: clamp(40px, 6vh, 64px);
  align-items: start;
  padding: clamp(48px, 8vh, 80px) 0;
  text-align: left;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.rsv__success.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.rsv__success-mark {
  display: block;
  width: 40px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.85;
  margin-bottom: var(--space-32);
}

.rsv__success-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  letter-spacing: -0.01em;
  color: var(--color-ivory);
  margin: 0 0 var(--space-16);
}

.rsv__success-nombre {
  margin: 0 0 var(--space-24);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  color: var(--color-gray-warm);
}

.rsv__success-nombre em {
  font-style: italic;
  font-family: var(--font-heading);
  font-size: 1.15em;
  color: #C0AE83;
}

.rsv__success-copy {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.9;
  color: var(--color-gray-warm);
}

/* Nota de "sin pago" — pequeña y discreta bajo el copy */
.rsv__success-nopay {
  margin: var(--space-16) 0 0;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  color: rgba(166, 162, 155, 0.62);
}

/* Confirmación final de confianza (puede llevar margen superior) */
.rsv__success-confirm {
  margin: clamp(28px, 4vh, 40px) 0 0;
  color: rgba(196, 168, 110, 0.8);
}

/* --- Pago dentro del estado de éxito --- */

.rsv__success-payment {
  grid-column: 1;
  max-width: 420px;
}

.rsv__success-payment .rsv__payment-qr {
  width: min(160px, 60%);
}

/* --- Resumen editorial de la solicitud (columna derecha) --- */
.rsv__success-summary {
  grid-column: 2;
  grid-row: 1;
  max-width: 340px;
  border-top: 1px solid rgba(196, 168, 110, 0.35);
  padding-top: var(--space-20);
}

.rsv__success-summary-title {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-24);
}

.rsv__success-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-16);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-divider);
}

.rsv__success-summary-date {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-ivory);
  text-transform: uppercase;
}

.rsv__success-summary-value {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading-light);
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-ivory);
  text-transform: capitalize;
}

.rsv__success-summary-tag {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--weight-body-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-warm);
}

.rsv__success-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-24);
  margin-top: clamp(40px, 6vh, 56px);
  grid-column: 1;
}

/* Frase opcional encima del botón WhatsApp */
.rsv__success-prompt {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body-light);
  line-height: 1.7;
  color: var(--color-gray-warm);
}

.rsv__success-wa {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #16130F;
  background-color: #C4A86E;
  padding: clamp(16px, 2.4vh, 22px) clamp(28px, 3.5vw, 44px);
  text-decoration: none;
  border: 1px solid #C4A86E;
  transition: background-color 450ms var(--ease-out), color 450ms var(--ease-out);
}

.rsv__success-wa:hover,
.rsv__success-wa:focus-visible {
  background-color: transparent;
  color: var(--color-gold);
}

.rsv__success-wa:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.rsv__success-home {
  font-family: var(--font-body);
  font-size: var(--text-cta);
  font-weight: var(--weight-body-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gray-warm);
  text-decoration: none;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid transparent;
  transition: color 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

.rsv__success-home:hover,
.rsv__success-home:focus-visible {
  color: var(--color-ivory);
  border-bottom-color: rgba(196, 168, 110, 0.4);
}

.rsv__success-home:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

/* ===========================
   ENTRADA ESCALONADA — [data-rv]
   Visible por defecto; la animación solo embellece el arranque.
   =========================== */

.rsv [data-rv] {
  opacity: 1;
  transform: none;
}

.rsv.is-loaded [data-rv] {
  opacity: 0;
  transform: translateY(18px);
  animation-name: rsvReveal;
  animation-duration: 1.2s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: forwards;
  animation-delay: var(--rv-delay, 0s);
}

@keyframes rsvReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.rsv [data-rv="0"] { --rv-delay: 0.05s; }
.rsv [data-rv="1"] { --rv-delay: 0.15s; }
.rsv [data-rv="2"] { --rv-delay: 0.25s; }
.rsv [data-rv="3"] { --rv-delay: 0.45s; }
.rsv [data-rv="4"] { --rv-delay: 0.65s; }
.rsv [data-rv="5"] { --rv-delay: 0.85s; }
.rsv [data-rv="6"] { --rv-delay: 0.6s; }

/* ===========================
   TABLET — 768–1024px
   =========================== */

@media (max-width: 1024px) {
  .rsv__inner {
    padding-top: calc(var(--navbar-height) + clamp(56px, 8vh, 88px));
  }

  .rsv__layout {
    grid-template-columns: 1fr;
    gap: clamp(48px, 7vh, 72px);
  }

  .rsv__aside {
    position: static;
  }

  .rsv__promise {
    margin-top: clamp(32px, 5vh, 56px);
  }

  .rsv__note {
    margin-top: clamp(28px, 4vh, 44px);
  }
}

/* ===========================
   MÓVIL — ≤640px (experiencia móvil propia)
   =========================== */

@media (max-width: 640px) {
  .rsv__inner {
    padding: calc(var(--navbar-height) + 40px) clamp(20px, 6vw, 28px) clamp(80px, 12vh, 112px);
  }

  .rsv__head {
    flex-direction: column;
    gap: var(--space-12);
  }

  .rsv__title {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }

  .rsv__lede {
    margin-top: clamp(20px, 3.5vh, 32px);
  }

  .rsv__steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .rsv__stepnav {
    padding: var(--space-16) 0;
  }

  .rsv__stepnav-label {
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }

  .rsv__stepnav-num {
    font-size: 0.5625rem;
  }

  .rsv__fieldgroup {
    grid-template-columns: 1fr;
  }

  .rsv__checks {
    grid-template-columns: 1fr;
  }

  /* Teléfono y país en móvil */
  .rsv__telgroup-code {
    min-width: 0;
    width: 38%;
  }

  .rsv__country-list {
    max-height: 200px;
  }

  .rsv__privacy {
    text-align: left;
  }

  /* Inputs táctiles: altura y área de toque cómodas */
  .rsv__input {
    min-height: 48px;
    font-size: 1rem;
  }

  .rsv__btn,
  .rsv__submit {
    min-height: 48px;
  }

  .rsv__navbtns {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .rsv__navbtns .rsv__btn,
  .rsv__navbtns .rsv__submit {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .rsv__navbtns .rsv__btn--back {
    text-align: center;
  }

  .rsv__step1-cta {
    align-items: stretch;
  }

  .rsv__step1-trust {
    text-align: center;
  }

  /* Estado de éxito: pila en una columna en móvil */
  .rsv__success {
    grid-template-columns: 1fr;
  }

  .rsv__success-summary {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
    order: 0;
  }

  .rsv__success-actions {
    grid-column: 1;
  }

  .rsv__success-actions,
  .rsv__success-wa,
  .rsv__success-home {
    width: 100%;
  }

  .rsv__success-wa {
    justify-content: center;
    text-align: center;
  }
}

/* ===========================
   REDUCED MOTION
   =========================== */

@media (prefers-reduced-motion: reduce) {
  .rsv [data-rv] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .rsv__submit,
  .rsv__btn,
  .rsv__success-wa,
  .rsv__success-home,
  .rsv__alt-link,
  .rsv__input,
  .rsv__stepnav::after {
    transition: none !important;
  }

  .rsv__success {
    transition: none !important;
    transform: none !important;
  }
}