/* ============================================================================
   LAYOSCAMP · MULTISTEP CAMPER — restyle formulario inscripción (9 pasos)
   ----------------------------------------------------------------------------
   Piloto Santander · D3 · 2026-06-13
   Fuente UX:  projects/web-drupal/docs/design/mezcla-index-variantb-2026-06-13.md
               · §2     MULTISTEP (header, resumen-compra, accordion, inputs, botones)
               · §3     Escala tipográfica (AA computado)
               · §4     Asset-map (omite check_step.png, separador-tipi.svg)
               · §5     BEM canónico (.resumen-compra, .step-accordion, .progress-hairline)
   Twig:       shopping_camper · CheckoutFormCamperMultiStep
               (NO modificado — CSS-only sobre el markup existente; funcionalidad
                de pago T2a-T2o intacta)
   Hace pareja con: ficha-detalle-campamento.css + bridge-cta-quincena.css.
               Mismo patrón v3 scopeado al raíz autosuficiente.
   ----------------------------------------------------------------------------
   WRAPPER RAÍZ (DOM real, verificado con Playwright):
     body.page-route-camper-checkout
   Es estable, único, no se reusa fuera del multistep y permite scopear los
   tokens v3 sin atachar la library design-system-v3 sitewide (eso es C2).
   Cuando v3 vaya global, este :root local queda redundante y se elimina sin
   tocar más del archivo.
   ----------------------------------------------------------------------------
   DEPENDENCIA DEL DIFF DE LIBRARIES (ver report):
   Para mantener este archivo SIN !important, frontend.libraries.yml debe
   retirar form-premium.css e inscription-form.css de global-styling. Ambos
   restilan EL MISMO multistep con valores legacy (verde plano #8BA841 lleno,
   círculos dorados PNG, btn gradient, etc.) usando !important en cascada;
   conviven mal con el lenguaje v3 (banda noche en resumen-compra, terracota
   en numerales, sol como CTA único). Mientras esos archivos sigan adjuntos,
   este restyle no rinde su intención visual aunque cargue después.
   ----------------------------------------------------------------------------
   CERO !important. prefers-reduced-motion respetado.
   ============================================================================ */


/* ============================================================================
   1 · TOKENS V3 SCOPEADOS — raíz del multistep
   ============================================================================ */
:root {
  --crema:        #FDF8EE;
  --crema-2:      #F8EFDC;
  --arena:        #F0E0C3;
  --terracota:    #D2603A;
  --bosque:       #31562D;
  --bosque-2:     #026936;
  --bosque-deep:  #22401F;
  --sol:          #FBBB0E;
  --sol-glow:     rgba(251, 187, 14, .35);
  --ink:          #272725;
  --blanco:       #FFFFFF;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Outfit", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:      clamp(2.95rem, 4.5vw, 4rem);
  --fs-h1:        clamp(2.1rem,  4.6vw, 2.9rem);
  --fs-h3:        clamp(1.45rem, 2.4vw, 1.95rem);
  --fs-body:      clamp(.98rem,  1.35vw, 1.1rem);
  --fs-small:     .92rem;
  --fs-eyebrow:   clamp(.72rem,  1vw, .82rem);

  --lh-body:      1.55;
  --ls-display:  -.02em;
  --ls-eyebrow:   .22em;

  --radius-sm:    14px;
  --radius-md:    22px;
  --radius-lg:    30px;
  --radius-full:  999px;

  --sombra-suave: 0 22px 54px -18px rgba(49,86,45,.26), 0 8px 20px -8px rgba(39,39,37,.14);
  --sombra-card:  0 12px 28px -16px rgba(49,86,45,.22), 0 4px 10px -6px rgba(39,39,37,.10);
  --spring:       cubic-bezier(.34, 1.56, .64, 1);
  --ease-zoom:    cubic-bezier(.22, 1, .36, 1);

  /* base de página: ultra-minimalist white */
  background: var(--blanco) !important;
}

main,
.region.region-content {
  background: var(--blanco) !important;
}


/* ============================================================================
   2 · HEADER — fondo crema plano, fuera la banda verde clara con tipi gigante
   ----------------------------------------------------------------------------
   Markup real:
     section.E-espacio-cabecera.G-fondo--blanco
       div.G-padding.G-max--720.G-margen--auto
         img.G-size--h--xxsupergigante     ← tipi PNG, lo ocultamos visualmente
         h3.G-txt-head--title.G-color--primario-2 "Formulario de inscripción"
         p.G-color--gris-secundario        ← "Completa el formulario para…"
         div.G-flex.G-flex-h--cen
           div.G-fondo--primario.G-sombra-box--si-l   ← RESUMEN-COMPRA
   ============================================================================ */

.E-espacio-cabecera {
  background: var(--blanco) !important;
  border-bottom: 1px solid #ebebeb;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

/* Tipi PNG fuera — decorativo, no aporta jerarquía; se sustituye por sec-num */
.E-espacio-cabecera img.G-size--h--xxsupergigante {
  display: none;
}

/* sec-num editorial generado por CSS (no toca Twig). 7.94:1 sobre crema ✅ */
.E-espacio-cabecera .G-padding.G-max--720 {
  position: relative;
  padding-top: clamp(28px, 3.5vw, 44px);
  text-align: center;
}
/* Eyebrow genérico: el nombre del campamento viene del Twig ({{ campamento.nombre }}),
   ya no hardcodeado a "Santander". 2026-06-15. */
.E-espacio-cabecera .funnel-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--bosque);
  padding-bottom: 10px;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid rgba(49, 86, 45, .22);
}

/* H1 contenido: Fraunces 900, --bosque sobre --crema → 7.94:1 ✅ AAA.
   Markup real es <h3> pero conserva tamaño de display por contenido. */
.E-espacio-cabecera h3.G-txt-head--title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  color: var(--bosque);
  margin: 0 0 clamp(8px, 1vw, 14px);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

/* Subtítulo "Completa el formulario para inscribir a tu camper en:" */
.E-espacio-cabecera p.G-color--gris-secundario {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);          /* 14.14:1 ✅ AAA */
  opacity: .78;               /* efectivo ≥ 7:1 ✅ */
  max-width: 48ch;
  margin: 0 auto clamp(18px, 2.4vw, 28px);
}


/* ============================================================================
   3 · RESUMEN-COMPRA (card programa + precio + turno) — única superficie oscura
   ----------------------------------------------------------------------------
   Marco real:
     div.G-flex.G-flex-h--cen               ← wrapper de centrado
       div.G-fondo--primario.G-sombra-box--si-l.G-borde--redondeado--xxs.G-padding--xxs   ← LA CARD
         p.G-txt-head--title.G-color--blanco   ← "LayosCamp Santander"
         p.precio-campamento-global            ← "2,700.00 €"
         p.G-txt-head--subtitle--1             ← "3 al 17 de julio"
   ============================================================================ */

.E-espacio-cabecera .G-fondo--primario.G-sombra-box--si-l {
  background: var(--blanco) !important;
  border: 1px solid #ebebeb !important;
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
  max-width: 360px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.E-espacio-cabecera .G-fondo--primario.G-sombra-box--si-l .G-fondo--blanco {
  background: transparent;
}
.E-espacio-cabecera .G-fondo--primario.G-sombra-box--si-l .G-fondo--blanco .G-color--auxiliar {
  color: #222;
}

.E-espacio-cabecera .G-fondo--primario.G-sombra-box--si-l p.G-txt-head--title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  color: #222 !important;
  line-height: 1.15;
  margin: 0 0 6px;
}

.E-espacio-cabecera .precio-campamento-global {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.2rem);
  color: #222 !important;
  line-height: 1;
  margin: 0;
}

.E-espacio-cabecera .G-fondo--primario.G-sombra-box--si-l p.G-txt-head--subtitle--1 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: #666 !important;
  margin: 6px 0 0;
}

/* "Cambiar turno": link decorativo via ::after del wrapper. No requiere Twig.
   :not(.checkout-card-plus2) — el "+" de la card "Añadir camper" también lleva
   .G-flex.G-flex-h--cen y heredaba este ::after (2026-06-15). */
.E-espacio-cabecera .G-flex.G-flex-h--cen:not(.checkout-card-plus2) {
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}
.E-espacio-cabecera .G-flex.G-flex-h--cen:not(.checkout-card-plus2)::after {
  content: "↩  Cambiar turno";
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--bosque);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: 8px;
  cursor: pointer;
}


/* ============================================================================
   4 · PROGRESS HAIRLINE — "Paso X de 9" bajo el resumen-compra
   ----------------------------------------------------------------------------
   Sin marca en el DOM. Lo generamos por CSS sobre el wrapper del header,
   en el espacio entre la card y el accordion (no toca markup ni JS).
   ============================================================================ */
.E-espacio-cabecera::after {
  content: "";
  display: block;
  width: min(360px, 80%);
  height: 2px;
  margin: clamp(20px, 2.4vw, 28px) auto 0;
  background: linear-gradient(to right, var(--terracota) 0%, var(--sol) 100%);
  border-radius: 2px;
  opacity: .85;
}


/* ============================================================================
   5 · ACCORDION 9 PASOS — glass claro luminoso sobre crema, numerales Fraunces
   ----------------------------------------------------------------------------
   Markup real (Bootstrap 5):
     #accordionCheckout.accordion.accordion-flush
       .accordion-item                 ← 9 items (#accordion-item-1..10, salta 5)
         h3.accordion-header.form-responsable-camper-accordion-header
           button.accordion-button(.collapsed)
         .accordion-collapse.collapse(.show)
   ============================================================================ */

#accordionCheckout {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 14px);
  counter-reset: paso-counter;
  padding: clamp(20px, 3vw, 32px) 0;
  background: transparent;
}

#accordionCheckout .accordion-item {
  background: var(--blanco) !important;
  border: 1px solid #ebebeb !important;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  overflow: hidden;
  counter-increment: paso-counter;
}

/* item activo: borde oscuro fuerte (estilo Apple) */
#accordionCheckout .accordion-item:has(.accordion-collapse.show),
#accordionCheckout .accordion-item:has(.container-step-form-enabled) {
  border-color: #222 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* item completado: borde suave */
#accordionCheckout .accordion-item.closed,
#accordionCheckout .accordion-item.accordion-step-form-prev {
  border-color: #ebebeb !important;
  background: var(--blanco) !important;
  box-shadow: none;
}

/* item bloqueado */
#accordionCheckout .accordion-item:has(.container-step-form-disabled) {
  background: #fafafa !important;
  border-color: #f0f0f0 !important;
}

/* Header: Fraunces eyebrow + título Outfit + numeral Fraunces itálica grande */
#accordionCheckout .accordion-button {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
  background: transparent;
  border: none;
  color: var(--bosque);          /* 7.94:1 sobre glass crema ✅ */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.3;
  letter-spacing: -.005em;
  box-shadow: none;
  white-space: normal;
  text-align: left;
}

#accordionCheckout .accordion-button:not(.collapsed) {
  color: var(--bosque-deep);
  background: rgba(251, 187, 14, .08);   /* halo sol muy suave */
}

/* Numeral Fraunces itálica --terracota ≥24px = AA large ✅ (3.62:1 large). */
#accordionCheckout .accordion-item .accordion-button::before {
  content: counter(paso-counter, decimal-leading-zero);
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-shrink: 0;
  width: auto;
  min-width: 2.6ch;
  height: auto;
  border-radius: 0;             /* mata el círculo dorado */
  background: transparent;       /* mata el fill dorado */
  color: var(--terracota);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.6rem, 2.6vw, 2rem);   /* ≥24px → AA large */
  line-height: 1;
  letter-spacing: -.02em;
}

/* Paso completado: numeral --bosque-2 + check */
#accordionCheckout .accordion-item.closed .accordion-button::before,
#accordionCheckout .accordion-item.accordion-step-form-prev .accordion-button::before {
  content: "✓";
  color: var(--bosque-2);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-style: normal;
}

/* Chevron del accordion (existe el ::after legacy de Bootstrap): tinte --bosque */
#accordionCheckout .accordion-button::after {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: none;
  border-right: 2px solid var(--bosque);
  border-bottom: 2px solid var(--bosque);
  transform: rotate(45deg);
  transition: transform .25s var(--spring);
  margin-left: auto;
  flex-shrink: 0;
}
#accordionCheckout .accordion-button:not(.collapsed)::after {
  transform: rotate(-135deg);
}

/* Focus ring spec §9.3 — sol sobre glass crema */
#accordionCheckout .accordion-button:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}

/* Hairline entre header y panel */
#accordionCheckout .accordion-collapse.show {
  border-top: 1px solid #ebebeb;
}

#accordionCheckout .accordion-body {
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--blanco) !important;
}


/* ============================================================================
   6 · INPUTS — fondo blanco sobre card glass, borde verde, label visible
   ============================================================================ */

body.path-panel form .form-item {
  margin: 0 0 clamp(14px, 1.8vw, 20px);
}

/* Label Outfit 600 --ink SIEMPRE visible (no placeholder-only) — 14.14:1 ✅ */
body.path-panel form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0;
}

/* Asterisco required: --terracota decorativo */
body.path-panel form label.form-required::after,
body.path-panel form label.js-form-required::after {
  color: var(--terracota);
  margin-left: 3px;
}

/* Inputs base */
body.path-panel form input[type="text"],
body.path-panel form input[type="email"],
body.path-panel form input[type="tel"],
body.path-panel form input[type="password"],
body.path-panel form input[type="number"],
body.path-panel form input[type="date"],
body.path-panel form select,
body.path-panel form textarea {
  width: 100%;
  background: var(--blanco);
  border: 1px solid rgba(49, 86, 45, .18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
  box-shadow: none;
  transition: border-color .2s var(--spring), box-shadow .2s var(--spring), background .2s var(--spring);
}

body.path-panel form input:hover,
body.path-panel form select:hover,
body.path-panel form textarea:hover {
  border-color: rgba(49, 86, 45, .36);
}

/* Focus ring spec §9.3 — --sol + halo */
body.path-panel form input:focus-visible,
body.path-panel form select:focus-visible,
body.path-panel form textarea:focus-visible {
  outline: none;
  border-color: var(--sol);
  box-shadow: 0 0 0 3px var(--sol-glow);
}

/* Error: borde --terracota + mensaje en --ink (NO terracota a 12px — sería 3.62:1 ✗) */
body.path-panel form input.error,
body.path-panel form input[aria-invalid="true"],
body.path-panel form .form-item--error-message ~ input,
body.path-panel form select.error,
body.path-panel form textarea.error {
  border-color: var(--terracota);
  background: rgba(210, 96, 58, .04);
}

body.path-panel form .form-item--error-message,
body.path-panel form .messages--error,
body.path-panel form .messages.error,
body.path-panel form .form-error-message {
  color: var(--ink);            /* texto legible: 14.14:1 ✅ */
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-top: 6px;
  padding-left: 18px;
  position: relative;
}

/* Icono ⚠ terracota como marca de color (no carga AA en texto) */
body.path-panel form .form-item--error-message::before,
body.path-panel form .messages--error::before,
body.path-panel form .form-error-message::before {
  content: "⚠";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--terracota);
  font-weight: 900;
}

/* Pista "El pasaporte es obligatorio para países no españoles" en --ink (no rojo small) */
body.path-panel form .description {
  color: var(--ink);
  opacity: .78;                /* ≥7:1 efectivo ✅ */
  font-size: var(--fs-small);
  margin-top: 4px;
  line-height: 1.45;
}

/* Checkbox / radio: cuadrados / círculos con tinte --bosque */
body.path-panel form input[type="checkbox"],
body.path-panel form input[type="radio"] {
  accent-color: var(--bosque);
  width: 18px;
  height: 18px;
  margin-right: 8px;
}


/* ============================================================================
   7 · BOTONES NAVEGACIÓN — .btn--sol "Siguiente"/"Pagar" único por viewport
   ----------------------------------------------------------------------------
   Markup real: <input.btn.btn-secondary value="Siguiente">.
   El Twig usa value="Anterior" para el ghost.
   ============================================================================ */

body.path-panel form .container_actions,
body.path-panel form .form-actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 28px);
  padding-top: 16px;
  border-top: 1px solid rgba(49, 86, 45, .14);
  clear: both;
}

@media (min-width: 768px) {
  body.path-panel form .container_actions,
  body.path-panel form .form-actions {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* "Siguiente" / "Pagar" / "Guardar y continuar" → Apple/Airbnb minimal black */
body.path-panel form input.form-submit[value="Siguiente"],
body.path-panel form input.form-submit[value="Guardar y continuar"],
body.path-panel form input.form-submit[value="Pagar"],
body.path-panel form input.btn-secondary[value="Siguiente"] {
  background: #222 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-family: var(--f-base, 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

body.path-panel form input.form-submit[value="Siguiente"]:hover,
body.path-panel form input.form-submit[value="Guardar y continuar"]:hover,
body.path-panel form input.form-submit[value="Pagar"]:hover {
  background: #000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

body.path-panel form input.form-submit:focus-visible {
  outline: 2px solid #222 !important;
  outline-offset: 3px !important;
}

/* "Anterior" → Apple/Airbnb minimal ghost */
body.path-panel form input.form-submit[value="Anterior"] {
  background: transparent !important;
  color: #222 !important;
  border: 1px solid #ebebeb !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-family: var(--f-base, 'Inter', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

body.path-panel form input.form-submit[value="Anterior"]:hover {
  background: #f8f9fa !important;
  border-color: #ddd !important;
}


/* ============================================================================
   8 · AVISO STICKY INFERIOR — banda --arena + texto --ink (no amarillo --sol)
   ----------------------------------------------------------------------------
   Markup variable según paso: .messages--warning, .messages.warning,
   [role="alert"], o div con texto "Completa correctamente todos los campos…".
   Reglas para los casos conocidos.
   ============================================================================ */

.messages--warning,
.messages.warning,
div[role="alert"],
body.path-panel form .messages-list,
.form-warning-message {
  background: var(--arena);
  color: var(--ink);             /* 11.51:1 sobre arena ✅ AAA */
  border: 1px solid rgba(49, 86, 45, .18);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.45;
}


/* ============================================================================
   9 · LISTAS DE EXTRAS / UNIFORMES — armoniza color sin cambiar layout
   ----------------------------------------------------------------------------
   form-premium.css hoy las tiñe verde-marca (#8BA841) con !important. Cuando
   ese archivo salga del library (ver report), estos overrides limpios entran.
   ============================================================================ */

body.path-panel form .list-group.list-group-horizontal-lg {
  border-color: rgba(49, 86, 45, .14);
  border-radius: var(--radius-sm);
  background: var(--blanco);
}

body.path-panel form .list-group.list-group-horizontal-lg > .list-group-item.right {
  color: var(--bosque-deep);    /* 12.7:1 sobre blanco ✅ */
  font-weight: 700;
}

body.path-panel form .form-type-checkbox:has(input:checked) .list-group.list-group-horizontal-lg {
  border-color: var(--sol);
  background: rgba(251, 187, 14, .06);
  box-shadow: 0 0 0 1px var(--sol-glow);
}


/* ============================================================================
   10 · RESPONSIVE — mobile-first overrides puntuales
   ============================================================================ */

@media (max-width: 767px) {
  #accordionCheckout .accordion-button {
    gap: 14px;
    padding: 14px 16px;
  }
  #accordionCheckout .accordion-item .accordion-button::before {
    font-size: 1.5rem;          /* ≥24px = AA large ✅ */
    min-width: 2ch;
  }
  .E-espacio-cabecera {
    padding-top: 32px;
    padding-bottom: 28px;
  }
  .E-espacio-cabecera .G-fondo--primario.G-sombra-box--si-l {
    max-width: 100%;
  }
}


/* ============================================================================
   11 · prefers-reduced-motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  #accordionCheckout .accordion-button::after,
  body.path-panel form input.form-submit,
  body.path-panel form input.form-submit:hover {
    transition: none;
    transform: none;
  }
}


/* ============================================================================
   12 · WIZARD PREMIUM — 2026-06-14 (rediseño total funnel inscripción)
   ----------------------------------------------------------------------------
   Convierte el acordeón de 10 pasos en un WIZARD paso-a-paso premium
   ("claridad Apple sobre marca LayosCamp"). Spec:
   docs/specs/2026-06-14-funnel-inscripcion-wizard-redesign-design.md
   Mockup: previews/funnel-wizard-premium-mockup.html
   ----------------------------------------------------------------------------
   ⚠️ EXCEPCIÓN al "CERO !important" del resto del archivo: design-system-v2.css
   L2575-2768 estila el funnel con !important VÍA body.path-panel (el body es
   "page-route-camper-checkout path-panel" → ambas matchean) y path-panel cubre
   OTRAS páginas del panel. Desacoplar esa sección era arriesgado, así que esta
   capa la sobreescribe con !important (carga después). Cuando se retire esa
   sección §camper de v2, estos !important se pueden relajar.
   ============================================================================ */

/* --- 12.0 Ocultar navbar de marketing SOLO en la ruta del funnel (checkout enfocado) ---
   T1 fix 2026-07-21: los selectores estaban SIN scopear → el header desaparecía
   en TODAS las páginas donde carga global-styling (verano, colegios, equipo,
   contacto, empresas). Añadimos `body.funnel-wizard ...` a cada uno; la clase
   la pone `frontend_preprocess_html()` cuando route == camper.checkout, y
   además el <script> del twig del multistep la reafirma (fallback JS). */
body.funnel-wizard header.site-header,
body.funnel-wizard .region-primary-menu,
body.funnel-wizard nav.main-navigation,
body.funnel-wizard .header-actions,
body.funnel-wizard .header-lang,
body.funnel-wizard .navbar .navbar-nav {
  display: none !important;
}

/* --- 12.1 WIZARD: solo el paso activo visible, como tarjeta premium centrada --- */
#accordionCheckout > .accordion-item {
  display: none !important;
}
#accordionCheckout > .accordion-item:has(> .accordion-collapse.show),
#accordionCheckout > .accordion-item.is-active-step {
  display: block !important;
  max-width: 800px;
  margin: 0 auto !important;
  background: var(--blanco) !important;
  border: 1px solid rgba(49, 86, 45, .10) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--sombra-card) !important;
  overflow: hidden;
}
/* el header del paso activo = título grande (no botón colapsable); sin chevron */
#accordionCheckout .accordion-button {
  pointer-events: none !important;
  background: transparent !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important;
  color: var(--bosque) !important;
  letter-spacing: -.01em !important;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 32px) 4px !important;
  box-shadow: none !important;
}
#accordionCheckout .accordion-button::after,
#accordionCheckout .accordion-button::before {
  display: none !important;
}
#accordionCheckout .accordion-body {
  padding: 8px clamp(22px, 3vw, 32px) clamp(24px, 3vw, 32px) !important;
}

/* --- 12.2 STEPPER de progreso (markup nuevo en el Twig) --- */
.funnel-stepper {
  max-width: 640px;
  margin: 0 auto clamp(20px, 3vw, 30px);
  padding: 0 4px;
}
.funnel-stepper__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.funnel-stepper__label {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.05rem; color: var(--terracota);
}
.funnel-stepper__count {
  font-family: var(--font-body); font-size: .8rem; color: var(--ink);
  opacity: .65; letter-spacing: .03em;
}
.funnel-stepper__bar {
  height: 6px; border-radius: var(--radius-full); background: var(--crema-2);
  overflow: hidden;
}
.funnel-stepper__fill {
  height: 100%; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--terracota), var(--sol));
  transition: width .6s var(--ease-zoom);
}
.funnel-stepper__dots {
  display: flex; gap: 4px; margin-top: 14px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.funnel-stepper__dots::-webkit-scrollbar { display: none; }
.funnel-step {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 2px 6px; cursor: default;
  font-family: var(--font-body);
}
.funnel-step__c {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 600; background: var(--crema-2); color: var(--ink);
  border: 1.5px solid transparent; transition: all .3s var(--spring);
}
.funnel-step__l {
  font-size: .64rem; color: var(--ink); opacity: .55; max-width: 58px;
  text-align: center; line-height: 1.15;
}
.funnel-step.is-done { cursor: pointer; }
.funnel-step.is-done .funnel-step__c { background: var(--bosque); color: #fff; }
.funnel-step.is-done .funnel-step__l { color: var(--bosque); opacity: 1; }
.funnel-step.is-active .funnel-step__c {
  background: var(--sol); color: var(--bosque-deep);
  border-color: rgba(251,187,14,.45); box-shadow: 0 0 0 5px rgba(251,187,14,.18);
}
.funnel-step.is-active .funnel-step__l { opacity: 1; font-weight: 600; }

/* --- 12.3 INPUTS / SELECT / TEXTAREA premium (gana a la capa v2 !important) --- */
body.path-panel form input.form-control,
body.path-panel form input[type="text"],
body.path-panel form input[type="email"],
body.path-panel form input[type="tel"],
body.path-panel form input[type="number"],
body.path-panel form input[type="date"],
body.path-panel form input[type="password"],
body.path-panel form select,
body.path-panel form select.form-select,
body.path-panel form textarea {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  min-height: 54px !important;
  height: auto !important;
  padding: 14px 16px !important;
  border: 1.5px solid rgba(49, 86, 45, .18) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--blanco) !important;
  box-shadow: none !important;
  transition: border-color .2s var(--ease-zoom), box-shadow .2s var(--ease-zoom) !important;
}
body.path-panel form textarea {
  min-height: 110px !important; line-height: 1.5 !important;
}
body.path-panel form input:focus,
body.path-panel form select:focus,
body.path-panel form textarea:focus {
  border-color: var(--sol) !important;
  box-shadow: 0 0 0 4px rgba(251, 187, 14, .18) !important;
  outline: none !important;
}
/* Labels premium */
body.path-panel form label {
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  margin-bottom: 7px !important;
}
body.path-panel form label.form-required::after,
body.path-panel form label.js-form-required::after {
  color: var(--terracota) !important;
}
/* Checkboxes / radios premium */
body.path-panel form input[type="checkbox"],
body.path-panel form input[type="radio"] {
  width: 22px !important; height: 22px !important; min-height: 22px !important;
  accent-color: var(--bosque) !important;
  border: 1.5px solid rgba(49, 86, 45, .35) !important;
  cursor: pointer !important;
}

/* --- 12.4 BOTONERA: primario sol pill, anterior ghost (gana al gold v2) --- */
body.path-panel form .container_actions {
  display: flex; gap: 12px; flex-direction: column-reverse; margin-top: 22px;
}
body.path-panel form .container_actions input.form-submit,
body.path-panel form input.form-submit {
  background: var(--sol) !important;
  background-image: none !important;
  color: var(--bosque-deep) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  min-height: 54px !important;
  padding: 0 26px !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 6px 18px rgba(251, 187, 14, .30) !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: transform .2s var(--ease-zoom), box-shadow .2s var(--ease-zoom) !important;
}
body.path-panel form input.form-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 9px 24px rgba(251, 187, 14, .40) !important;
}
/* "Anterior" = ghost */
body.path-panel form input.form-submit[value*="Anterior"],
body.path-panel form input.form-submit[value*="Atrás"],
body.path-panel form input.form-submit[value*="Atras"] {
  background: transparent !important;
  color: var(--bosque) !important;
  border: 1.5px solid rgba(49, 86, 45, .22) !important;
  box-shadow: none !important;
}
@media (min-width: 640px) {
  body.path-panel form .container_actions { flex-direction: row; }
  body.path-panel form input.form-submit[value*="Anterior"] { width: auto !important; }
}

/* --- 12.5 CARRITO sticky (markup nuevo en el Twig) --- */
.funnel-cart {
  position: sticky; bottom: 0; z-index: 30;
  max-width: 640px; margin: 18px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--blanco);
  border: 1px solid rgba(49, 86, 45, .12);
  border-radius: var(--radius-md);
  box-shadow: var(--sombra-card);
  padding: 14px 18px;
}
.funnel-cart__info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.funnel-cart__ico { color: var(--bosque); font-size: 22px; }
.funnel-cart__name { font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.funnel-cart__right { text-align: right; flex: 0 0 auto; }
.funnel-cart__total { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--bosque); line-height: 1.1; }
.funnel-cart__note { font-size: .68rem; color: var(--ink); opacity: .6; }

/* --- 12.6 Tarjeta de acción "Añadir camper" + listas premium --- */
body.path-panel form a.button,
body.path-panel form .btn-anadir-camper {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-full); font-weight: 600;
}
/* cards de uniformes / list-groups: aire + hairline + radio premium */
body.path-panel form .container-uniformes-product,
body.path-panel form .list-group {
  border: 1px solid rgba(49, 86, 45, .14) !important;
  border-radius: var(--radius-md) !important;
  background: var(--blanco) !important;
  overflow: hidden;
}

/* "Añadir camper" = card primaria GRANDE (dashed + "+" prominente). 2026-06-15.
   Antes era un botón pequeño raro (estilos inline del PHP) que no parecía obligatorio
   → causa del atasco mudo en "Seleccionar camper". */
.container-items-form-camper-select {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch;
}
.container-form-camper-select:has(.add-new-camper-form) {
  flex: 1 1 220px; max-width: 320px;
  height: 100% !important;
}
.container-form-camper-select:has(.add-new-camper-form) .checkout-card {
  border: 2px dashed #ccc !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 100% !important;
  min-height: 250px !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 26px 20px !important; cursor: pointer;
  transition: all .2s ease;
}
.container-form-camper-select:has(.add-new-camper-form) .checkout-card:hover {
  border-color: #222 !important; background: #fafafa !important; transform: translateY(-2px);
}
.container-form-camper-select:has(.add-new-camper-form) .G-pos--relativo {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.checkout-card-plus2 {
  position: static !important; inset: auto !important;
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important; background: #222 !important; color: #fff !important;
  font-size: 1.8rem !important; font-weight: 300 !important; line-height: 1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto !important;
}
.checkout-card-plus2::after,
.checkout-card-plus2::before { content: none !important; }
/* Normalizar diseño de Añadir camper y Seleccionar para que sean como Siguiente/Anterior */
.checkout-card .add-new-camper-form,
.checkout-card .camper-item-seleccionar {
  display: block !important;
  background: transparent !important;
  color: #222 !important;
  font-family: var(--f-base, 'Inter', sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  border: 1px solid #222 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  transition: all 0.2s ease !important;
  margin-top: 16px !important;
}

.checkout-card:hover .add-new-camper-form,
.checkout-card:hover .camper-item-seleccionar {
  background: #f4f4f4 !important;
}

.form-type-radio input:checked ~ label .checkout-card .add-new-camper-form,
.form-type-radio input:checked ~ label .checkout-card .camper-item-seleccionar,
.form-type-radio:has(input:checked) .checkout-card .add-new-camper-form,
.form-type-radio:has(input:checked) .checkout-card .camper-item-seleccionar {
  background: #222 !important;
  color: #fff !important;
  border-color: #222 !important;
}

/* --- 12.7 oculta la banda "resumen-compra" duplicada del header (ya está el carrito sticky) --- */
body.page-route-camper-checkout.funnel-wizard .E-espacio-cabecera .G-fondo--primario {
  border-radius: var(--radius-md);
}

/* ============================================================================
   13 · RESPONSIVE MÓVIL — 2026-06-15 (feedback operador)
   13.1 Stepper de progreso sticky (ver siempre dónde estás y cuánto queda)
   13.2 Paso "Protección de datos": la caja "Autorización de imágenes" era
        flex-row y su contenido (589px) forzaba la tarjeta a 481px > viewport
        390 → overflow horizontal (texto cortado). Apilar en móvil.
   ============================================================================ */
/* 13.0 (base): la caja "Autorización de imágenes" en fila medía ~628px y desbordaba
   la tarjeta del paso también en desktop → permitir envolver. */
.container-items-form-radios-redessociales {
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  /* 13.1 stepper SIEMPRE visible. NOTA: position:sticky NO funciona aquí porque el
     <body> tiene overflow:hidden auto (layout del panel) y rompe el sticky-to-viewport
     (verificado: el stepper se iba con el scroll). Solución: position:fixed al top +
     padding-top en el acordeón para compensar la altura del stepper fijo (~129px). */
  .funnel-stepper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--crema);
    margin: 0;
    padding: 10px 16px 12px;
    box-shadow: 0 6px 14px rgba(31, 58, 28, .12);
    max-width: 100%;
  }
  .funnel-stepper__dots { margin-top: 8px; }
  /* compensar el stepper fijo: el contenido del paso empieza por debajo de él */
  body.page-route-camper-checkout.funnel-wizard #accordionCheckout { padding-top: 142px; }

  /* 13.2 paso Protección: apilar la caja de redes sociales + permitir encoger */
  .container-items-form-radios-redessociales {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .container-items-form-radios-redessociales .form-radios {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }
  .container-items-form-radios-redessociales .me-5 {
    margin-right: 0 !important;
  }
  .container-items-form-radios-redessociales * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* red de seguridad: la tarjeta del paso activo nunca excede el viewport */
  body.page-route-camper-checkout.funnel-wizard #accordionCheckout > .accordion-item:has(> .accordion-collapse.show) {
    max-width: 100% !important;
  }
}

/* Nombre del alumno por línea en el resumen (multi-hijo). 2026-06-15. */
.order-summary__item-camper {
  display: block;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  color: var(--bosque);
  opacity: .85;
  margin-top: 2px;
}