/* ============================================
   UpYourself — Design tokens (mismos que la app)
   ============================================ */
:root{
  --bg-deep: #080808;
  --bg: #0D0E09;
  --surface: #14150E;
  --surface-2: #1A1B12;
  --border: #2A2C1D;

  --green: #4A5224;
  --green-mid: #7A8A36;
  --green-light: #C8D08A;

  --gold: #C9A84C;

  --text: #EDEDE6;
  --text-dim: #9A9B8C;

  --danger: #C05B4D;

  --font-head: "Sora", sans-serif;
  --font-body: "Inter", sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --container: 1180px;
}

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  font-family: var(--font-head);
  color: var(--text);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 700;
}

p{ color: var(--text-dim); margin: 0 0 1em; }

a{ color: inherit; text-decoration: none; }

img{ max-width: 100%; display: block; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  display: inline-block;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

/* ============ Buttons ============ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--green);
  color: var(--green-light);
  border-color: var(--green-mid);
}
.btn-primary:hover{ background: var(--green-mid); color: var(--bg-deep); }

.btn-outline{
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-outline:hover{ border-color: var(--green-mid); color: var(--green-light); }

.btn-ghost{
  background: transparent;
  color: var(--gold);
  border-color: transparent;
  padding: 12px 16px;
}
.btn-ghost:hover{ color: var(--green-light); }

.btn-lg{ padding: 15px 28px; font-size: 16px; }

/* ============ Header ============ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,8,8,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  flex-shrink: 0;
}
.brand-logo{ height: 32px; width: auto; }

.main-nav{
  display: flex;
  gap: 32px;
  margin: 0 auto;
}
.main-nav a{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
  transition: color .2s ease;
}
.main-nav a:hover{ color: var(--green-light); }

.header-actions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Selector de idioma */
.lang-switcher{
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  flex-shrink: 0;
}
.lang-switcher button{
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
  padding: 6px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.lang-switcher button:hover{ color: var(--text); }
.lang-switcher button.is-active{
  background: var(--green);
  color: var(--green-light);
}

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span{
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* ============ Hero ============ */
.hero{
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
}

.hero-glow{
  position: absolute;
  top: -200px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(122,138,54,0.35) 0%, rgba(122,138,54,0) 70%);
  filter: blur(20px);
  pointer-events: none;
}

.hero-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}

.hero-lead{ font-size: 18px; max-width: 520px; }

h1{ font-size: clamp(34px, 4.2vw, 54px); max-width: 620px; }

.hero-actions{
  display: flex;
  gap: 14px;
  margin: 28px 0 44px;
  flex-wrap: wrap;
}

.hero-stats{
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.stat{ display: flex; flex-direction: column; }
.stat-number{
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 800;
  color: var(--green-light);
}
.stat-label{
  font-size: 13px;
  color: var(--text-dim);
}

.hero-media{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.hero-media img{ width: 100%; height: 100%; object-fit: cover; }

/* ============ Trust bar ============ */
.trust-bar{
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 22px 0;
}
.trust-inner{
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.trust-label{
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  flex-shrink: 0;
}
.trust-items{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.trust-items span{
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--text-dim);
  font-size: 14.5px;
  opacity: .85;
}

/* ============ Sections ============ */
.section{ padding: 96px 0; }
.section-alt{ background: var(--bg-deep); }

.section-head{
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2{ font-size: clamp(26px, 3vw, 36px); }
.section-head .eyebrow{ display: block; }

.grid{ display: grid; gap: 24px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color: var(--green-mid); transform: translateY(-3px); }
.card h3{ font-size: 18px; }
.card p{ margin-bottom: 0; font-size: 14.5px; }

.card-icon{ font-size: 26px; margin-bottom: 14px; }

.card-flat{
  background: var(--surface-2);
  display: flex;
  align-items: center;
}
.card-flat p{ color: var(--text); font-size: 15.5px; margin: 0; }

/* ============ Qué recibes ============ */
.recibes-layout{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
.recibes-video{
  position: sticky;
  top: 110px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.recibes-video video{ width: 100%; display: block; }

.recibes-list{ display: flex; flex-direction: column; gap: 28px; }

.list-item{
  display: flex;
  gap: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.list-item:last-child{ border-bottom: none; padding-bottom: 0; }

.list-mark{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--bg-deep);
  background: var(--green-light);
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-item h3{ font-size: 16.5px; margin-bottom: 6px; }
.list-item p{ font-size: 14.5px; margin-bottom: 0; }
.list-item strong{ color: var(--text); }

/* ============ Timeline ============ */
.timeline{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.timeline-step{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  position: relative;
}
.timeline-number{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green);
  color: var(--green-light);
  font-family: var(--font-head);
  font-weight: 800;
  margin-bottom: 16px;
  border: 1px solid var(--green-mid);
}
.timeline-step h3{ font-size: 16.5px; }
.timeline-step p{ font-size: 14px; margin-bottom: 0; }

/* ============ FAQ ============ */
.faq-list{ max-width: 780px; margin: 0 auto; }

.faq-item{
  border-bottom: 1px solid var(--border);
}

.faq-question{
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 16px;
}
.faq-question:hover{ color: var(--green-light); }

.faq-icon{
  flex-shrink: 0;
  font-size: 20px;
  color: var(--gold);
  transition: transform .2s ease;
}
.faq-question[aria-expanded="true"] .faq-icon{ transform: rotate(45deg); }

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-answer p{
  padding: 0 4px 22px;
  font-size: 14.5px;
  margin: 0;
}

/* ============ CTA final ============ */
.cta-final{
  padding: 100px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border);
}
.cta-final-inner{
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.cta-final-inner h2{ font-size: clamp(26px, 3.4vw, 38px); }
.cta-final .hero-actions{ justify-content: center; margin-top: 28px; margin-bottom: 0; }

/* ============ Footer ============ */
.site-footer{
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding: 32px 0;
}
.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-logo{ height: 26px; opacity: .85; }
.footer-nav{ display: flex; gap: 24px; }
.footer-nav a{
  font-size: 14px;
  color: var(--text-dim);
}
.footer-nav a:hover{ color: var(--green-light); }
.footer-copy{ font-size: 13px; color: var(--text-dim); }

/* ============ Reveal animation ============ */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============ Wizard (reservar.html) ============ */
.wizard-section{ padding: 64px 0 100px; }
.wizard-container{ max-width: 760px; }

.wizard-progress{
  display: flex;
  align-items: center;
  margin-bottom: 48px;
}
.wizard-progress-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.wizard-progress-dot{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  transition: all .2s ease;
}
.wizard-progress-step.is-active .wizard-progress-dot{
  background: var(--green);
  border-color: var(--green-mid);
  color: var(--green-light);
}
.wizard-progress-step.is-done .wizard-progress-dot{
  background: var(--green-light);
  border-color: var(--green-light);
  color: var(--bg-deep);
}
.wizard-progress-label{
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.wizard-progress-step.is-active .wizard-progress-label{ color: var(--text); }
.wizard-progress-line{
  flex: 1;
  height: 1px;
  background: var(--border);
  margin: 0 8px 24px;
}

.wizard-step{ display: none; }
.wizard-step.is-active{ display: block; animation: fadeIn .35s ease; }

@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.wizard-subtitle{ margin-bottom: 32px; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-field{ display: flex; flex-direction: column; gap: 6px; }
.form-field.span-2{ grid-column: 1 / -1; }

.form-field label{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-dim);
}

.form-field input,
.form-field select,
.form-field textarea{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14.5px;
  outline: none;
  transition: border-color .2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{ border-color: var(--green-mid); }
.form-field textarea{ resize: vertical; }

.field-note{
  font-size: 12.5px;
  color: var(--text-dim);
  margin: -2px 0 10px;
}

.radio-group, .checkbox-group{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.radio-option, .checkbox-option{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color .2s ease;
}
.radio-option:hover, .checkbox-option:hover{ border-color: var(--green-mid); }
.radio-option input, .checkbox-option input{ accent-color: var(--green-light); width: 16px; height: 16px; flex-shrink: 0; }

.scale-field{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.scale-label{ font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }

.scale-options{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.scale-field .scale-options{ flex: 1; justify-content: space-between; }

.scale-btn{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.scale-btn:hover{ border-color: var(--green-mid); color: var(--text); }
.scale-btn.is-selected{
  background: var(--green);
  border-color: var(--green-mid);
  color: var(--green-light);
}

.condicional{
  display: none;
}
.condicional.is-visible{
  display: flex;
}

.checkbox-field label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 400;
  cursor: pointer;
}
.checkbox-field input{ margin-top: 3px; }

.wizard-actions{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
}

.wizard-error{
  color: var(--danger);
  font-size: 14px;
  margin: 16px 0 0;
}

/* Tarjetas de pack */
.pack-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pack-card{
  position: relative;
  display: block;
  cursor: pointer;
}
.pack-card input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pack-card-inner{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  height: 100%;
  transition: border-color .2s ease, transform .2s ease;
}
.pack-card:hover .pack-card-inner{ transform: translateY(-3px); border-color: var(--green-mid); }
.pack-card input:checked + .pack-card-inner{
  border-color: var(--green-light);
  box-shadow: 0 0 0 1px var(--green-light);
}
.pack-card.is-featured .pack-card-inner{ border-color: var(--gold); }

.pack-badge{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--bg-deep);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  z-index: 2;
  white-space: nowrap;
}
.pack-badge-alt{ background: var(--green-light); }

.pack-card h3{ font-size: 19px; text-align: center; }
.pack-desc{ font-size: 13px; text-align: center; min-height: 52px; }

.pack-price{
  text-align: center;
  margin: 16px 0 2px;
  color: var(--text);
  font-size: 14px;
}
.pack-amount{
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 800;
  color: var(--gold);
}
.pack-permonth{
  text-align: center;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.pack-features{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pack-features li{
  font-size: 13.5px;
  color: var(--text-dim);
  padding-left: 20px;
  position: relative;
}
.pack-features li::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-light);
  font-weight: 700;
}

/* Resumen paso 3 */
.summary-box{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 24px;
  margin-bottom: 24px;
}
.summary-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14.5px;
}
.summary-row:last-child{ border-bottom: none; }
.summary-row span{ color: var(--text-dim); }
.summary-row strong{ color: var(--text); font-family: var(--font-head); }
.summary-row-highlight strong{ color: var(--green-light); }

/* Páginas de resultado de pago */
.result-section{ padding: 100px 0; }
.result-box{
  max-width: 560px;
  text-align: center;
}
.result-icon{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  margin: 0 auto 24px;
}
.result-icon-ok{ background: var(--green); color: var(--green-light); border: 1px solid var(--green-mid); }
.result-icon-error{ background: rgba(192,91,77,0.15); color: var(--danger); border: 1px solid var(--danger); }
.result-box .btn{ margin-top: 8px; }

/* ============ Responsive ============ */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-media{ order: -1; }
  .recibes-layout{ grid-template-columns: 1fr; }
  .recibes-video{ position: static; }
  .timeline{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .main-nav{ display: none; }
  .header-actions .btn-ghost{ display: none; }
  .nav-toggle{ display: flex; }

  .site-header.nav-open .main-nav{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    padding: 20px 24px;
    gap: 18px;
  }
  .site-header.nav-open .header-actions .btn-ghost{
    display: inline-flex;
  }

  .grid-3{ grid-template-columns: 1fr; }
  .timeline{ grid-template-columns: 1fr; }
  .trust-inner{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-inner{ flex-direction: column; text-align: center; }

  .form-grid{ grid-template-columns: 1fr; }
  .pack-grid{ grid-template-columns: 1fr; }
  .wizard-progress-label{ display: none; }
  .wizard-actions{ flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 480px){
  .header-inner{ height: auto; padding: 12px 20px; flex-wrap: wrap; row-gap: 10px; }
  .brand span{ display: none; }
  .lang-switcher button{ padding: 5px 7px; font-size: 11px; }
}

/* ============================================
   AÑADIDOS PARA reservar.html
   Lo de arriba es la hoja tal cual la escribiste. Aquí abajo va solo lo
   que el asistente necesita y que allí no estaba. Si algún día unificas
   esta hoja con la landing, este bloque se queda igual.
   ============================================ */

/* La página se carga oculta si hay que traducirla, para que un portugués no
   vea el español un instante. i18n.js la destapa al acabar y el <head> tiene
   un failsafe de 2,5 s. Sin esta regla, la clase no haría nada. */
.i18n-loading body{ visibility: hidden; }

/* --------------------------------------------
   BOTONES IGUALES QUE LA LANDING
   index.html lleva sus botones en píldora, verde claro con texto oscuro.
   Aquí se replican tal cual para que la página de reserva no parezca de
   otra web. Si algún día unificas las dos hojas, esto sustituye al bloque
   de botones de arriba en vez de sumarse.
   -------------------------------------------- */
:root{
  /* tokens que usan los botones de la landing y que no estaban aquí */
  --green-light-glow: rgba(200,208,138,.40);
  --green-veil: rgba(200,208,138,.09);
  --white-veil: rgba(237,237,230,.05);
}

.btn{
  gap: .5em;
  padding: .72em 1.35em;
  border-radius: 999px;
  font-size: .92rem;
  letter-spacing: -.01em;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn[disabled]{ opacity: .55; pointer-events: none; transform: none; }

.btn-primary{
  background: var(--green-light);
  color: var(--bg-deep);
  border-color: transparent;
  box-shadow: 0 8px 26px -10px var(--green-light-glow);
}
.btn-primary:hover{
  background: #D9E0A4;
  color: var(--bg-deep);
  box-shadow: 0 16px 38px -10px var(--green-light-glow);
}

.btn-outline{
  border-color: var(--border);
  color: var(--text);
  background: transparent;
}
.btn-outline:hover{
  border-color: var(--green-mid);
  color: var(--green-light);
  background: var(--green-veil);
}

.btn-ghost{ color: var(--text-dim); }
.btn-ghost:hover{ color: var(--text); background: var(--white-veil); }

.btn-lg{ padding: .95em 1.9em; font-size: 1rem; }

/* El selector de idioma también: en la landing el activo va en verde claro */
.lang-switcher button.is-active{
  background: var(--green-light);
  color: var(--bg-deep);
}

/* El selector nativo de fecha se pinta blanco sobre blanco en modo oscuro */
.form-field input[type="date"]{ color-scheme: dark; }

/* Campo con error: lo marca reservar.js al validar un paso.
   Con 26 preguntas, un aviso genérico obliga a rebuscar. */
.form-field.has-error input,
.form-field.has-error textarea,
.form-field.has-error .radio-option,
.form-field.has-error .checkbox-option,
.form-field.has-error .scale-btn{
  border-color: var(--danger);
}
.field-error{
  font-size: 12.5px;
  color: var(--danger);
}

/* El aviso de error va al principio del formulario, donde aterriza la vista
   en cada paso. Con recuadro, porque suelto sobre el fondo pasa inadvertido. */
.wizard-error{
  padding: 12px 16px;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  background: rgba(192,91,77,0.12);
  margin: 0 0 24px;
}
.wizard-error[hidden]{ display: none; }

/* Barra de progreso de móvil.
   Tus ocho puntos aguantan bien hasta unos 560px; por debajo suman 384px de
   ancho mínimo y se salen de la pantalla. Ahí entra el contador compacto. */
.wizard-progress-mini{
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.wizard-progress-mini-bar{
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.wizard-progress-mini-fill{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--green-light);
  transition: width .35s ease;
}
.wizard-progress-mini-text{
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
}

@media (max-width: 560px){
  .wizard-progress{ display: none; }
  .wizard-progress-mini{ display: flex; }
}

/* Pantalla de confirmación (paso 9). Usa tus clases .result-*, que estaban
   pensadas para una página aparte; aquí van dentro del mismo formulario
   porque Redsys devuelve a reservar.html?pago=ok. */
.wizard-step .result-box{ margin: 0 auto; padding: 24px 0; }
.wizard-step .result-box p{ margin-inline: auto; max-width: 46ch; }
.result-box .hero-actions{ justify-content: center; margin: 28px 0 0; }

@media (max-width: 560px){
  /* La cabecera se salía 17px entre 481 y 560: marca + cuatro idiomas +
     "Volver a la web" piden 517px. Se adelanta a 560 lo que ya hacías a 480. */
  .header-inner{ height: auto; padding: 12px 20px; flex-wrap: wrap; row-gap: 10px; }
  .brand span{ display: none; }
  .lang-switcher button{ padding: 5px 7px; font-size: 11px; }

  /* En el paso 8 los botones quedan uno a cada lado; en móvil, apilados y
     anchos, con el de continuar arriba. */
  .wizard-actions{ flex-direction: column-reverse; align-items: stretch; }
  .wizard-actions .btn{ width: 100%; }
  .wizard-actions > span{ display: none; }
}

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