/* ============================================================================
   FUNNEL v3 — reskin del multistep de inscripción (FASE 3 rediseño 2026)
   Port de layoscamp-redesign/pages/inscripcion.css sobre el wizard REAL
   (10 pasos, CheckoutFormCamperMultiStep + twig del módulo shopping_camper).

   TODO scopeado a body.funnel-wizard (clase server-side, frontend.theme).
   multistep-camper.css NO se toca (repo va por delante del server con el
   glassmorphism WIP): donde su §12 o la capa v2 usan !important, aquí se
   vence con overrides scopeados + !important (patrón anti-§22 canónico).
   Carga: library frontend/funnel-2026 (attach en el twig del módulo).
   ============================================================================ */

/* ============================================================================
   §0 · TOKENS v3 (scopeados; hoy resuelven igual desde el :root legacy de
   multistep-camper.css — este bloque los blinda si aquel :root se scopea)
   ============================================================================ */
body.funnel-wizard {
  --crema:        #FDF8EE;
  --crema-2:      #F8EFDC;
  --arena:        #F0E0C3;
  --terracota:    #D2603A;
  --agua:         #2A9D8F;
  --bosque:       #31562D;
  --bosque-2:     #026936;
  --bosque-deep:  #22401F;
  --sol:          #FBBB0E;
  --sol-glow:     rgba(251,187,14,.35);
  --ink:          #272725;
  --blanco:       #FFFFFF;
  --funnel-error: #A84A28; /* terracota oscurecido, contraste AA */
  --funnel-h:     76px;

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

  --radius-xs: 8px; --radius-sm: 14px; --radius-md: 22px; --radius-full: 999px;
  --sombra-suave: 0 22px 54px -18px rgba(49,86,45,.26), 0 8px 20px -8px rgba(39,39,37,.14);
  --spring:    cubic-bezier(.34,1.56,.64,1);
  --ease-zoom: cubic-bezier(.22,1,.36,1);
}

/* ============================================================================
   §1 · LIENZO — fondo crema (vence al blanco !important sin scope de
   multistep-camper.css por especificidad) + fuera el hueco del header-spacer
   ============================================================================ */
body.funnel-wizard main,
body.funnel-wizard .region.region-content {
  background: var(--crema) !important;
}
body.funnel-wizard { background: var(--crema) !important; }
body.funnel-wizard .header-spacer { display: none; }
body.funnel-wizard main { padding-top: var(--funnel-h); }
body.funnel-wizard .E-espacio-cabecera.G-fondo--blanco { background: transparent; }

/* ============================================================================
   §2 · TOPBAR mínima (logo + SSL + volver) — markup en el twig del módulo
   ============================================================================ */
body.funnel-wizard .funnel-topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  background: rgba(253,248,238,.88);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(49,86,45,.1);
}
body.funnel-wizard .funnel-topbar__inner {
  width: min(1120px, 94vw); margin-inline: auto;
  height: var(--funnel-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
body.funnel-wizard .funnel-topbar__logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
body.funnel-wizard .funnel-topbar__logo img { height: 46px; width: auto; display: block; }
body.funnel-wizard .funnel-topbar__name {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--bosque-deep);
}
body.funnel-wizard .funnel-topbar__tagline {
  display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--terracota);
}
body.funnel-wizard .funnel-topbar__actions { display: flex; align-items: center; gap: 18px; }
body.funnel-wizard .ssl-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-full);
  background: rgba(2,105,54,.09);
  box-shadow: inset 0 0 0 1px rgba(2,105,54,.22);
  font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--bosque-2);
  white-space: nowrap;
}
body.funnel-wizard .ssl-badge .material-icons-round { font-size: 1rem; }
body.funnel-wizard .funnel-topbar__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--bosque);
  padding: 10px 4px; border-radius: var(--radius-xs);
  text-decoration: none;
  transition: color .2s ease, gap .25s var(--ease-zoom);
}
body.funnel-wizard .funnel-topbar__back:hover { color: var(--terracota); gap: 9px; }
body.funnel-wizard .funnel-topbar__back .material-icons-round { font-size: 1.1rem; }

/* ============================================================================
   §3 · STEPPER — look mockup sobre el markup real (.funnel-step intactas)
   ============================================================================ */
body.funnel-wizard .funnel-stepper__dots { gap: 2px; justify-content: space-between; }
body.funnel-wizard .funnel-step__c {
  width: 40px; height: 40px; font-size: .95rem; font-weight: 700;
  background: var(--blanco); color: rgba(39,39,37,.55);
  border: 0; box-shadow: inset 0 0 0 1.5px rgba(49,86,45,.25);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s var(--spring);
}
body.funnel-wizard .funnel-step.is-done .funnel-step__c {
  background: var(--agua); color: var(--blanco); box-shadow: none;
}
body.funnel-wizard .funnel-step.is-done:hover .funnel-step__c { transform: scale(1.08); }
body.funnel-wizard .funnel-step.is-active .funnel-step__c {
  background: var(--bosque); color: var(--crema);
  border: 0; box-shadow: 0 0 0 5px rgba(49,86,45,.14);
  transform: scale(1.06);
}
body.funnel-wizard .funnel-step__l { font-size: .7rem; max-width: 64px; }
body.funnel-wizard .funnel-step.is-active .funnel-step__l { color: var(--bosque-deep); }
body.funnel-wizard .funnel-stepper__fill { background: var(--bosque); }
body.funnel-wizard .funnel-stepper__label { color: var(--terracota); }

/* ============================================================================
   §4 · INPUTS: focus bosque (mockup) + errores AA con mensaje
   (§12.3 y la capa v2 usan !important → mismos aquí, scopeados)
   ============================================================================ */
body.funnel-wizard form input:focus,
body.funnel-wizard form select:focus,
body.funnel-wizard form textarea:focus {
  border-color: var(--bosque) !important;
  box-shadow: 0 0 0 4px rgba(49,86,45,.13) !important;
  outline: none !important;
}
body.funnel-wizard form input.error,
body.funnel-wizard form select.error,
body.funnel-wizard form textarea.error {
  border-color: var(--funnel-error) !important;
  background: #FDF6F2 !important;
}
body.funnel-wizard .form-item--error-message,
body.funnel-wizard .form-item--error-message strong {
  color: var(--funnel-error) !important;
  font-family: var(--font-body) !important;
  font-size: .82rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
body.funnel-wizard .form-item--error-message {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 7px;
}
body.funnel-wizard .form-item--error-message::before {
  content: "error";
  font-family: "Material Icons Round";
  font-size: 1rem; line-height: 1; letter-spacing: normal;
  -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  flex-shrink: 0; margin-top: 1px;
}
body.funnel-wizard .messages--error {
  background: #FDF6F2 !important;
  color: var(--funnel-error) !important;
  border: 1.5px solid rgba(210,96,58,.45) !important;
  border-radius: var(--radius-sm) !important;
}
/* Ayudas de campo */
body.funnel-wizard form .description,
body.funnel-wizard form .form-item .description {
  font-family: var(--font-body); font-size: .8rem; line-height: 1.45;
  color: rgba(39,39,37,.58); margin-top: 6px;
}

/* ============================================================================
   §5 · TARJETA RESUMEN + "Cambiar turno" real
   ============================================================================ */
/* El pseudo "Cambiar turno" legacy (::after no navegable) cede al enlace real */
body.funnel-wizard .E-espacio-cabecera .G-flex.G-flex-h--cen:not(.checkout-card-plus2)::after {
  content: none;
}
body.funnel-wizard .funnel-cambiar-turno-wrap { text-align: center; margin: 8px 0 0; }
body.funnel-wizard .funnel-cambiar-turno {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: .85rem; font-weight: 700;
  color: var(--bosque);
  text-decoration: underline; text-underline-offset: 4px;
  padding: 8px 4px; border-radius: var(--radius-xs);
  transition: color .2s ease, gap .25s var(--ease-zoom);
}
body.funnel-wizard .funnel-cambiar-turno:hover { color: var(--terracota); gap: 9px; }
body.funnel-wizard .funnel-cambiar-turno .material-icons-round { font-size: 1.05rem; }

/* ============================================================================
   §6 · CARRITO STICKY — precio en Fraunces (resto del look ya en §12.5)
   ============================================================================ */
body.funnel-wizard .funnel-cart__total {
  font-family: var(--font-display); font-weight: 600;
}

/* ============================================================================
   §7 · TRUST ROW (markup nuevo en el twig)
   ============================================================================ */
body.funnel-wizard .funnel-trust {
  display: flex; justify-content: center; gap: clamp(18px, 4vw, 44px); flex-wrap: wrap;
  list-style: none;
  max-width: 800px;
  margin: 30px auto 0; padding: 18px 10px 4px;
  border-top: 1px solid rgba(49,86,45,.12);
}
body.funnel-wizard .funnel-trust li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  color: rgba(39,39,37,.68);
  white-space: nowrap;
}
body.funnel-wizard .funnel-trust .material-icons-outlined { color: var(--bosque); font-size: 1.25rem; }

/* ============================================================================
   §8 · RESPONSIVE — compensación de la topbar fija
   §13.1 de multistep-camper.css fija el stepper a top:0 y compensa el
   acordeón con 142px asumiendo que no hay header; con la topbar de 64px
   ambos valores se desplazan (misma especificidad + carga posterior).
   ============================================================================ */
@media (max-width: 640px) {
  body.funnel-wizard { --funnel-h: 64px; }
  body.funnel-wizard .funnel-topbar__logo img { height: 38px; }
  body.funnel-wizard .funnel-topbar__tagline { display: none; }
  body.funnel-wizard .funnel-topbar__actions { gap: 10px; }
  body.funnel-wizard .ssl-badge { padding: 8px 10px; }
  body.funnel-wizard .ssl-badge__text { display: none; }
  body.funnel-wizard .ssl-badge::after { content: "SSL"; font-size: .78rem; }
  body.funnel-wizard .funnel-topbar__back-text { display: none; }
  body.funnel-wizard .funnel-topbar__back { padding: 10px; }

  body.funnel-wizard .funnel-stepper { top: var(--funnel-h); }
  /* La compensación del stepper FIJO va en la CABECERA (lo primero del
     flujo, donde vive el título que el stepper tapaba), NO en el acordeón
     (creaba un hueco gigante entre la tarjeta del programa y el form). */
  body.funnel-wizard .E-espacio-cabecera { padding-top: 150px; }
  body.funnel-wizard.page-route-camper-checkout #accordionCheckout { padding-top: 12px; }

  body.funnel-wizard .funnel-step__c { width: 34px; height: 34px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.funnel-wizard .funnel-step__c,
  body.funnel-wizard .funnel-topbar__back,
  body.funnel-wizard .funnel-cambiar-turno { transition: none; }
  body.funnel-wizard .funnel-step.is-done:hover .funnel-step__c,
  body.funnel-wizard .funnel-step.is-active .funnel-step__c { transform: none; }
}

/* ============================================================================
   v3fix B3 (2026-07-22) — RESKIN REAL del wizard en desktop y móvil.
   Todo scopeado a body.funnel-wizard (no tocar G-* fuera del funnel).
   Problemas resueltos: stepper fuera del viewport, layout 1 columna con
   resumen suelto al final, checkboxes desalineados, "Siguiente" lima/negro,
   recuadros dentro de recuadros.
   ============================================================================ */

/* ---------- Base de página: fondo crema, sin la tarjeta gigante exterior ---------- */
body.funnel-wizard .E-espacio-cabecera.G-fondo--blanco {
  background: var(--crema) !important;
}
body.funnel-wizard .funnel-topbar { position: sticky; top: 0; z-index: 90; }

/* Eyebrow + título contenidos; el icono montaña sobra */
body.funnel-wizard .E-espacio-cabecera img.G-size--h--xxsupergigante { display: none; }
body.funnel-wizard .E-espacio-cabecera h3.G-txt-head--title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  color: var(--bosque-deep) !important;
  margin-bottom: 18px !important;
}
body.funnel-wizard .funnel-eyebrow { text-align: center; }

/* ---------- LAYOUT 2 COLUMNAS (≥1024px): form | resumen sticky ---------- */
@media (min-width: 1024px) {
  body.funnel-wizard .E-espacio-cabecera .G-padding.G-max--720 {
    max-width: 1180px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px 48px;
    align-items: start;
  }
  /* Todos los hijos a la columna del form por defecto */
  body.funnel-wizard .E-espacio-cabecera .G-padding.G-max--720 > * { grid-column: 1; }
  /* La tarjeta-resumen a la derecha, sticky, desde la fila 2 */
  body.funnel-wizard .E-espacio-cabecera .G-padding.G-max--720 > .funnel-summary {
    grid-column: 2;
    grid-row: 2 / span 20;
    position: sticky;
    top: 96px;
    margin: 0 !important;
    align-self: start;
    width: 100%;
  }
  /* El carrito sticky inferior sobra en desktop (ya hay resumen) */
  body.funnel-wizard .funnel-cart { display: none; }
}

/* ---------- TARJETA-RESUMEN v3 (antes caja verde) ---------- */
body.funnel-wizard .funnel-summary__card {
  background: var(--blanco) !important;
  border: 1px solid rgba(49,86,45,.14) !important;
  border-radius: 22px !important;
  box-shadow: 0 22px 54px -18px rgba(49,86,45,.26), 0 8px 20px -8px rgba(39,39,37,.14) !important;
  padding: 26px 24px !important;
  width: min(360px, 100%);
  text-align: left;
}
body.funnel-wizard .funnel-summary__name {
  margin: 0 0 6px;
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: 1.3rem; color: var(--bosque-deep);
}
body.funnel-wizard .funnel-summary__price {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.1rem; line-height: 1.05; color: var(--bosque-deep);
}
body.funnel-wizard .funnel-summary__date {
  margin: 6px 0 16px;
  font-family: var(--font-body); font-size: .92rem; color: rgba(39,39,37,.7);
}
body.funnel-wizard .funnel-summary__trust {
  list-style: none; margin: 0 0 16px; padding: 14px 0;
  border-top: 1px solid rgba(49,86,45,.12);
  border-bottom: 1px solid rgba(49,86,45,.12);
  display: grid; gap: 9px;
}
body.funnel-wizard .funnel-summary__trust li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: .86rem; font-weight: 600; color: var(--bosque-deep);
}
body.funnel-wizard .funnel-summary__trust .material-icons-round { font-size: 1.1rem; color: var(--agua); }
body.funnel-wizard .funnel-cambiar-turno {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  color: var(--bosque); text-decoration: none;
  transition: color .2s ease, gap .25s var(--ease-zoom);
}
body.funnel-wizard .funnel-cambiar-turno:hover { color: var(--terracota); gap: 9px; }
body.funnel-wizard .funnel-cambiar-turno .material-icons-round { font-size: 1.05rem; }

/* ---------- STEPPER: visible y sticky bajo la topbar ---------- */
@media (min-width: 1024px) {
  body.funnel-wizard .funnel-stepper {
    position: sticky; top: 76px; z-index: 70;
    background: var(--crema);
    padding: 14px 8px 12px;
    border-radius: 16px;
    margin-bottom: 18px;
  }
}
body.funnel-wizard .funnel-step__l { font-size: .68rem; max-width: 74px; text-align: center; }

/* ---------- ACORDEÓN: tarjetas limpias (adiós cajas dentro de cajas) ---------- */
body.funnel-wizard #accordionCheckout .accordion-item {
  background: var(--blanco);
  border: 1px solid rgba(49,86,45,.13) !important;
  border-radius: 18px !important;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 10px 34px -16px rgba(49,86,45,.22);
}
body.funnel-wizard #accordionCheckout .accordion-button {
  font-family: var(--font-display) !important;
  font-size: 1.12rem !important; font-weight: 600 !important;
  color: var(--bosque-deep) !important;
  background: var(--blanco) !important;
  padding: 18px 22px !important;
  box-shadow: none !important;
}
body.funnel-wizard #accordionCheckout .accordion-button:not(.collapsed) {
  background: var(--crema-2) !important;
  border-bottom: 1px solid rgba(49,86,45,.12);
}
body.funnel-wizard #accordionCheckout .accordion-button:focus { box-shadow: inset 0 0 0 2px var(--bosque) !important; }
body.funnel-wizard #accordionCheckout .accordion-body { padding: 22px 22px 24px; background: var(--blanco); }

/* ---------- FORMULARIOS: labels, inputs, checkboxes ---------- */
body.funnel-wizard .accordion-body label {
  font-family: var(--font-body); font-size: .88rem; font-weight: 600; color: var(--bosque-deep);
}
body.funnel-wizard .accordion-body .form-check {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  text-align: left !important; padding-left: 0 !important;
  margin: 10px 0 !important;
}
body.funnel-wizard .accordion-body .form-check .form-check-input {
  margin: 3px 0 0 !important; flex-shrink: 0;
  width: 18px !important; height: 18px !important;
}
body.funnel-wizard .accordion-body .form-check .form-check-label,
body.funnel-wizard .accordion-body .form-check label {
  font-size: .88rem !important; font-weight: 500 !important;
  color: rgba(39,39,37,.85) !important; text-align: left !important;
  line-height: 1.45 !important;
}
body.funnel-wizard .accordion-body .form-radios .form-check { margin: 6px 0 !important; }

/* Inputs: altura y radio coherentes con v3 */
body.funnel-wizard form input[type="text"],
body.funnel-wizard form input[type="email"],
body.funnel-wizard form input[type="password"],
body.funnel-wizard form input[type="tel"],
body.funnel-wizard form input[type="number"],
body.funnel-wizard form select,
body.funnel-wizard form textarea {
  border: 1.5px solid rgba(49,86,45,.22) !important;
  border-radius: 12px !important;
  padding: 13px 15px !important;
  font-family: var(--font-body) !important; font-size: .95rem !important;
  background: var(--blanco) !important;
}

/* ---------- BOTONES: "Siguiente" bosque (mata el inline lima), "Anterior" ghost ---------- */
body.funnel-wizard input#edit-next,
body.funnel-wizard input#edit-submit,
body.funnel-wizard input[data-drupal-selector="edit-next"],
body.funnel-wizard input[data-drupal-selector="edit-submit"] {
  background: var(--bosque) !important;
  color: var(--crema) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 15px 34px !important;
  font-family: var(--font-body) !important; font-size: 1rem !important; font-weight: 600 !important;
  width: auto !important; min-width: 220px;
  cursor: pointer;
  transition: background-color .2s ease, transform .3s var(--spring) !important;
}
body.funnel-wizard input#edit-next:hover,
body.funnel-wizard input#edit-submit:hover {
  background: var(--bosque-2) !important;
  transform: translateY(-2px);
}
body.funnel-wizard input#edit-prev {
  background: none !important; border: 0 !important;
  color: rgba(39,39,37,.6) !important;
  font-family: var(--font-body) !important; font-size: .9rem !important; font-weight: 600 !important;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 12px 8px !important; cursor: pointer;
}
body.funnel-wizard input#edit-prev:hover { color: var(--bosque-deep) !important; }

/* ---------- funnel-cart (barra inferior móvil) ---------- */
@media (max-width: 1023.98px) {
  body.funnel-wizard .funnel-cart {
    position: sticky; bottom: 12px; z-index: 65;
    margin: 22px 0 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px;
    background: rgba(34,64,31,.94);
    color: var(--crema);
    border-radius: 999px;
    box-shadow: 0 18px 40px -14px rgba(34,64,31,.5);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  body.funnel-wizard .funnel-cart__info { display: flex; align-items: center; gap: 8px; min-width: 0; }
  body.funnel-wizard .funnel-cart__name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.funnel-wizard .funnel-cart__total { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--sol); }
  body.funnel-wizard .funnel-cart__note { display: block; font-size: .7rem; opacity: .75; }
  body.funnel-wizard .funnel-cart__ico { color: var(--sol); }
}

/* ---------- Resumen de pedido (paso 10) coherente ---------- */
body.funnel-wizard .order-summary {
  background: var(--crema) !important;
  border: 1px solid rgba(49,86,45,.14) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 22px;
}
body.funnel-wizard .order-summary__total {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--bosque-deep);
}

/* ---------- Trust row ---------- */
body.funnel-wizard .funnel-trust {
  display: flex; justify-content: center; gap: 18px 26px; flex-wrap: wrap;
  list-style: none; margin: 26px 0 10px; padding: 0;
}
body.funnel-wizard .funnel-trust li {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: rgba(39,39,37,.6);
}
body.funnel-wizard .funnel-trust .material-icons-outlined { color: var(--bosque); font-size: 1.1rem; }

/* ---------- Móvil: stepper fijo más limpio ---------- */
@media (max-width: 640px) {
  body.funnel-wizard .funnel-stepper { box-shadow: 0 6px 16px rgba(31,58,28,.10); }
  body.funnel-wizard .funnel-step { padding: 2px 3px; }
  body.funnel-wizard .funnel-step__c { width: 32px !important; height: 32px !important; }
  body.funnel-wizard .funnel-step__l { font-size: .58rem; max-width: 56px; }
  body.funnel-wizard #accordionCheckout .accordion-body { padding: 18px 16px 20px; }
  body.funnel-wizard input#edit-next,
  body.funnel-wizard input#edit-submit { width: 100% !important; }
}

/* v3fix B3b: dots del stepper quepan en desktop (sin scroll-x) */
@media (min-width: 1024px) {
  body.funnel-wizard .funnel-stepper__dots { gap: 0; }
  body.funnel-wizard .funnel-step { padding: 2px 4px; }
  body.funnel-wizard .funnel-step__c { width: 34px; height: 34px; font-size: .85rem; }
  body.funnel-wizard .funnel-step__l { font-size: .6rem; max-width: 62px; }
}