/* ============================================================
   BarLab Rural — Hoja de estilos principal
   Versión: 1.0 · Mayo 2026
   Breakpoints:
     Mobile:         max-width: 767px
     Tablet:         768px – 1023px
     Desktop small:  1024px – 1279px
     Desktop:        1280px+  (base de diseño: 1440px)
   ============================================================ */

/* ─────────────────────────────────────
   1. VARIABLES (Design Tokens)
   ───────────────────────────────────── */
:root {
  /* Tipografía */
  --font-family-base: 'Inter', sans-serif;
  /* Fluid type: clamp(min@1024px, vw-formula, max@1440px)
     Escalan suavemente de 1440px → 1024px.
     El bloque mobile :root los sobreescribe con valores fijos a ≤767px. */
  --font-size-5xl:    clamp(48px, calc(3.85vw + 8.6px),  64px);
  --font-size-4xl:    clamp(36px, calc(3.13vw + 4px),    49px);
  --font-size-3xl:    39px;
  --font-size-2xl:    clamp(24px, calc(1.68vw + 6.8px),  31px);
  --font-size-xl:     25px;
  --font-size-lg:     20px;
  --font-size-m:      18px;
  --font-size-base:   16px;
  --font-size-sm:     14px;
  --font-size-xs1:    13px;
  --font-size-xs2:    12px;

  --line-height-5xl:   clamp(54px, calc(3.37vw + 19.5px), 68px);
  --line-height-4xl:   clamp(48px, calc(2.88vw + 18.4px), 60px);
  --line-height-3xl:   58.5px;
  --line-height-2xl:   clamp(32px, calc(1.92vw + 12.3px), 40px);
  --line-height-xl:    37.5px;
  --line-height-lg:    30px;
  --line-height-m:     27px;
  --line-height-base:  24px;
  --line-height-sm:    19.6px;

  /* Colores – Primary */
  --primary-0:   #FDF2F3;
  --primary-50:  #FBE5E8;
  --primary-100: #F8CCD1;
  --primary-200: #F199A3;
  --primary-300: #EA6675;
  --primary-400: #E33347;
  --primary-500: #DC0019;
  --primary-600: #B00014;
  --primary-700: #84000F;

  /* Colores – Golden */
  --golden-0:   #FDFCFC;
  --golden-100: #F7F5F2;
  --golden-200: #E3DDD3;
  --golden-300: #C0B39F;
  --golden-500: #A18D70;
  --golden-700: #6B5F4C;
  --golden-900: #40382B;

  /* Colores – Neutrals */
  --neutrals-0:   #FBFBFB;
  --neutrals-25:  #F2F2F2;
  --neutrals-50:  #E5E5E5;
  --neutrals-100: #CCCCCC;
  --neutrals-200: #999999;
  --neutrals-300: #666666;
  --neutrals-800: #333333;
  --neutrals-900: #000000;

  /* Error (UI KIT Figma — estados de formulario) */
  --error-500: #CB3C3F;
  --error-900: #701012;

  /* Success (resultado "Apto" del formulario de inscripción) */
  --success-500: #4BA63B;

  /* Espaciado */
  --s-0:   0px;
  --s-4:   4px;
  --s-8:   8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-24:  24px;
  --s-32:  32px;
  --s-40:  40px;
  --s-48:  48px;
  --s-64:  64px;
  --s-80:  80px;
  --s-104: 104px;
  --s-124: 124px;

  /* Layout */
  --layout-max:       1440px;
  --layout-pad-x:     64px;
  --layout-content:   1312px;
  --section-pt:       104px;
  --section-pb:       124px;

  /* Border radius */
  --radius-pill:  100px;
  --radius-check: 62px;

  /* Sombra navbar (scroll) */
  --shadow-nav: 0 2px 8px rgba(0,0,0,0.12);
}

/* ─────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Salto instantáneo (sin animación) al volver del pre-registro; ver header.php. */
html.no-smooth { scroll-behavior: auto; }

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--neutrals-900);
  background-color: var(--golden-100);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ─────────────────────────────────────
   3. TIPOGRAFÍA UTILITARIA
   ───────────────────────────────────── */
.text-primary  { color: var(--primary-600); }
.text-golden   { color: var(--golden-500); }
.text-white    { color: var(--neutrals-0); }
.uppercase     { text-transform: uppercase; }

/* Saltos de línea responsive (los inyecta barlab_rich):
   .br-d = salto solo en ESCRITORIO; .br-m = salto solo en MÓVIL.
   Así un titular puede romper en puntos distintos según el tamaño. */
.br-m { display: none; }
@media (max-width: 767px) {
  .br-d { display: none; }
  .br-m { display: inline; }
}

/* ─────────────────────────────────────
   4. LAYOUT
   ───────────────────────────────────── */
.container {
  max-width: var(--layout-max);
  padding-left:  var(--layout-pad-x);
  padding-right: var(--layout-pad-x);
  margin: 0 auto;
}

/* Sección estándar (fondo golden/100 por defecto) */
.section {
  width: 100%;
  padding-top:    var(--section-pt);
  padding-bottom: var(--section-pb);
}

/* Secciones full-bleed (el bloque ocupa 100vw) */
.section--dark   { background-color: var(--neutrals-800); color: var(--neutrals-0); }
.section--red    { background-color: var(--primary-600);  color: var(--neutrals-0); }
.section--arena  { background-color: var(--golden-200);   color: var(--neutrals-900); }
.section--cream  { background-color: var(--golden-100);   color: var(--neutrals-900); }

/* Overlay fotográfico (golden 30% multiply) */
.photo-wrap            { position: relative; overflow: hidden; }
.photo-wrap img        { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Parallax: hero + img-mercado — imagen más alta que el contenedor para permitir desplazamiento */
.hero__photo img,
.img-full-bleed .photo-wrap img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.photo-wrap::after     {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(161, 141, 112, 0.3);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ─────────────────────────────────────
   5. BOTONES
   ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border-radius: var(--radius-pill);
  padding: 14px 24px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  /* Necesario para el efecto hover */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color .35s ease;
}
/* El display de .btn (inline-flex) pisa al [hidden] de UA; esto lo respeta
   (p. ej. "Anterior" oculto en el paso 1 del wizard). */
.btn[hidden] { display: none; }

/* Fill que sube de abajo a arriba */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateY(101%);
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.btn:hover::before { transform: translateY(0); }

.btn-primary {
  background-color: var(--primary-500);
  border-color:     var(--primary-500);
  color:            var(--neutrals-0);
}
.btn-primary::before { background-color: var(--primary-600); }
.btn-primary:hover   { border-color: var(--primary-600); }

.btn-secondary {
  background-color: var(--neutrals-0);
  border-color:     var(--primary-600);
  color:            var(--primary-600);
}
.btn-secondary::before { background-color: var(--primary-50); }

/* Variante XS (navbar mobile) */
.btn-xs { padding: 4px 16px 8px; font-size: var(--font-size-base); }

/* Botón primario sobre fondo oscuro/rojo */
.btn-primary--white {
  background-color: var(--neutrals-0);
  border-color:     var(--neutrals-0);
  color:            var(--primary-600);
}
.btn-primary--white::before { background-color: var(--golden-200); }

/* Aviso de edad (plugin Age Gate). Sus botones no admiten clases, así que se les
   da aquí el aspecto de .btn-primary ("Sí") y .btn-secondary ("No"). */
/* Por encima del banner de CookieYes (z-index 9999999): primero la edad y luego
   las cookies. Si no, en móvil el banner tapa la pregunta y los botones. */
.age-gate__wrapper { z-index: 100000000; }
.age-gate .age-gate__heading-title--logo { width: 252px; height: auto; } /* el SVG no trae tamaño y salía a 0×0 */
.age-gate .age-gate__challenge { font-size: var(--font-size-lg); line-height: var(--line-height-lg); margin-bottom: var(--s-16); }
.age-gate .age-gate__buttons { gap: var(--s-12); }
.age-gate .age-gate__submit {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  border: 1px solid var(--primary-600);
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  transition: background-color .35s ease, border-color .35s ease;
}
.age-gate .age-gate__submit--yes       { background-color: var(--primary-500); border-color: var(--primary-500); color: var(--neutrals-0); }
.age-gate .age-gate__submit--yes:hover { background-color: var(--primary-600); border-color: var(--primary-600); }
.age-gate .age-gate__submit--no        { background-color: var(--neutrals-0); color: var(--primary-600); }
.age-gate .age-gate__submit--no:hover  { background-color: var(--primary-50); }

/* Icono flecha en botón secundario */
.btn-arrow {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────
   INPUT DE TEXTO (sistema de diseño · UI KIT Figma)
   Clase reutilizable para cualquier formulario.
   Estados: Default · Focus · Filled · Error · Disabled.
   ───────────────────────────────────── */
.bl-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);      /* 16/24 Inter Regular */
  line-height: var(--line-height-base);
  color: var(--neutrals-900);
  background-color: var(--neutrals-0);   /* Default: #fbfbfb */
  border: 1px solid var(--golden-300);   /* #c0b39f */
  border-radius: 0;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bl-input::placeholder { color: var(--neutrals-200); opacity: 1; }   /* #999 */

/* Filled: con contenido → fondo crema */
.bl-input:not(:placeholder-shown) { background-color: var(--golden-100); }   /* #f7f5f2 */

/* Error: tras interacción inválida → borde rojo + fondo crema */
.bl-input:user-invalid {
  background-color: var(--golden-100);
  border-color: var(--error-500);        /* #cb3c3f */
}

/* Focus (mientras se escribe gana sobre filled/error): borde marrón 2px + halo */
.bl-input:focus {
  outline: none;
  background-color: var(--neutrals-0);
  border-width: 2px;
  border-color: var(--golden-700);       /* #6b5f4c */
  box-shadow: 0 0 3px 1px var(--golden-300);   /* #c0b39f */
}

/* Disabled */
.bl-input:disabled {
  background-color: var(--neutrals-25);  /* #f2f2f2 */
  border-color: var(--neutrals-200);
  opacity: 0.6;
  cursor: not-allowed;
}
/* Solo lectura (p. ej. Provincia, que se rellena sola): aspecto desactivado
   pero con el valor legible y enviable. */
.bl-input[readonly] {
  background-color: var(--neutrals-25);
  border-color: var(--neutrals-200);
  cursor: default;
}
.bl-input[readonly]:focus { border-width: 1px; border-color: var(--neutrals-200); box-shadow: none; }

/* Checkbox del sistema de diseño (UI KIT Figma): 18px, radio 4px.
   Sin marcar: blanco con borde gris. Marcado: rojo con check blanco. */
.bl-checkbox {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--neutrals-200);   /* #999 */
  border-radius: 4px;
  background-color: var(--neutrals-0);      /* #fbfbfb */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.bl-checkbox:checked {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 4.8 8.6 9.5 3.4' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bl-checkbox:focus-visible {
  outline: none;
  border-color: var(--golden-700);
  box-shadow: 0 0 3px 1px var(--golden-300);
}
.bl-checkbox:user-invalid { border-color: var(--error-500); }

/* ─────────────────────────────────────
   RADIO PILL (sistema de diseño · UI KIT Figma)
   Estados: Default · Hover · Selected · Disabled.
   ───────────────────────────────────── */
.bl-radios { display: flex; flex-wrap: wrap; gap: var(--s-12); }
.bl-radio {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--golden-300);      /* Default */
  border-radius: 100px;
  background-color: var(--neutrals-0);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--neutrals-900);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* Hover: se mantiene el borde en 1px para no encoger el área interior (evita el
   "salto"); el aspecto de borde de 2px se simula con una sombra interior, que
   no ocupa espacio ni desplaza el contenido. */
.bl-radio:hover { border-color: var(--golden-700); box-shadow: inset 0 0 0 1px var(--golden-700), 0 0 1.5px 0 var(--golden-300); }
.bl-radio__input {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--neutrals-200);
  border-radius: 50%;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.bl-radio__input::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--golden-700);
  transform: scale(0);
  transition: transform .12s ease;
}
.bl-radio__input:checked { border-color: var(--golden-700); }
.bl-radio__input:checked::before { transform: scale(1); }
/* Selected: la pastilla entera cambia */
.bl-radio:has(.bl-radio__input:checked) {
  background-color: var(--golden-200);
  border-color: var(--golden-700);
  color: var(--golden-700);
  font-weight: 700;
}
.bl-radio:has(.bl-radio__input:focus-visible) { border-color: var(--golden-700); box-shadow: 0 0 0 3px var(--golden-300); }
/* Disabled */
.bl-radio:has(.bl-radio__input:disabled) {
  background-color: var(--neutrals-25);
  border-color: var(--neutrals-200);
  color: var(--neutrals-200);
  cursor: not-allowed;
}

/* ─────────────────────────────────────
   FORMULARIO DE INSCRIPCIÓN (wizard de 4 pasos)
   ───────────────────────────────────── */
/* Esta página (formulario de inscripción) usa un contenido más estrecho: 980px
   máx. en vez de los 1440px del resto del sitio. Se hereda al .container. */
.inscripcion { --layout-max: 980px; }

.req { color: var(--primary-500); }

/* Hero del formulario */
.form-hero { max-width: 820px; }
.form-hero .badge { margin-bottom: var(--s-24); }
.form-hero__title {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-4xl);
  font-weight: 700;
  color: var(--neutrals-900);
  margin-bottom: var(--s-16);
}
.form-hero__desc { font-size: var(--font-size-m); line-height: var(--line-height-m); color: var(--neutrals-800); }
.form-hero__desc strong { font-weight: 700; } /* negrita, mismo color que el texto */
.form-hero__note { margin-top: var(--s-24); font-size: var(--font-size-xs1); color: var(--neutrals-300); }

/* Stepper */
.wizard-steps { margin: var(--s-40) 0 var(--s-24); }
.wizard-stepper { display: flex; align-items: center; gap: var(--s-12); }
/* Texto "PASO X DE 4 · etiqueta" (solo tablet/móvil) */
.wizard-stepper__status { display: none; }
.wizard-stepper__status-num { color: var(--golden-500); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.wizard-stepper__status-label { color: var(--neutrals-900); }
.wizard-step { display: flex; align-items: center; gap: var(--s-8); flex-shrink: 0; }
.wizard-stepper__line {
  position: relative;
  flex: 1 1 0;
  min-width: 16px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--neutrals-100);
  overflow: hidden;
}
/* La parte golden se rellena de izquierda a derecha al completar el paso */
.wizard-stepper__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--golden-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s ease;
}
.wizard-stepper__line.is-done::after { transform: scaleX(1); }
.wizard-step__circle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-size-base);
  background-color: var(--neutrals-0);
  border: 1px solid var(--neutrals-200);
  color: var(--neutrals-300);
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.wizard-step__check { display: none; }
.wizard-step__label { font-size: var(--font-size-xs1); line-height: var(--line-height-sm); color: var(--neutrals-300); }
.wizard-step.is-active .wizard-step__circle,
.wizard-step.is-completed .wizard-step__circle {
  background-color: var(--golden-500);
  border-color: var(--golden-500);
  color: var(--neutrals-0);
}
.wizard-step.is-active .wizard-step__label,
.wizard-step.is-completed .wizard-step__label { color: var(--neutrals-900); }
.wizard-step.is-completed .wizard-step__num { display: none; }
.wizard-step.is-completed .wizard-step__check { display: block; animation: wizard-check-in .3s ease both; }
@keyframes wizard-check-in {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Accesibilidad: sin movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .wizard-block.is-current { animation: none; }
  .wizard-step__circle,
  .wizard-stepper__line::after { transition: none; }
  .wizard-step.is-completed .wizard-step__check { animation: none; }
}

/* Tarjeta de cada paso */
.wizard-block {
  background-color: var(--neutrals-0);
  border: 1px solid var(--golden-200);
  border-radius: 8px;
  padding: 40px;
}
.wizard-block__head { display: flex; align-items: center; gap: var(--s-16); margin-bottom: var(--s-32); }
.wizard-block__num { font-size: 40px; line-height: 1; font-weight: 800; color: var(--golden-500); }
.wizard-block__title { font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); font-weight: 700; color: var(--neutrals-900); }

/* Rejilla de campos (12 columnas; los inputs se alinean por abajo) */
.wizard-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-24); align-items: end; }
.field { display: flex; flex-direction: column; gap: var(--s-8); min-width: 0; }
.field__label { font-size: var(--font-size-base); font-weight: 700; color: var(--neutrals-900); }
.field__help { margin-top: calc(-1 * var(--s-4)); font-size: var(--font-size-xs1); line-height: var(--line-height-sm); color: var(--neutrals-300); }
.field--nombre    { grid-column: span 4; }
.field--cp        { grid-column: span 3; }
.field--provincia { grid-column: span 5; }
.field--municipio { grid-column: span 4; }
.field--direccion { grid-column: span 8; }
.field--poblacion { grid-column: 1 / -1; }
/* Paso 2 */
.field--tipologia  { grid-column: 1 / -1; }
.field--superficie { grid-column: span 3; }
.field--estado     { grid-column: span 9; }
.field--reformas   { grid-column: 1 / -1; }
/* "¿Qué reformas necesita?" solo aparece si Estado del local = "Necesita reformas".
   Al pasar de display:none a visible se revela con un fundido + deslizamiento
   suave (ver @keyframes field-reveal más abajo). */
.field--reformas { display: none; animation: field-reveal .3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wizard-fields:has( input[name="estado_local"][value="reformas"]:checked ) .field--reformas { display: flex; }
/* Paso 3 */
.field--disponibilidad { grid-column: span 9; }
.field--alquiler       { grid-column: span 3; }
.field--traspaso       { grid-column: span 3; }
.field--importe        { grid-column: span 3; }
.field--nota           { grid-column: 1 / -1; }
/* Paso 4 (los inputs van en 2×2 alineados a la izquierda, como en Figma) */
.field--titularidad { grid-column: 1 / -1; }
.field--persona     { grid-column: span 5; }
.field--cargo       { grid-column: span 5; }
.field--telefono    { grid-column: span 5; }
.field--email       { grid-column: span 5; }
/* "Importe del traspaso" y la nota solo aparecen si ¿Existe traspaso? = "Sí".
   Se revelan con el mismo fundido + deslizamiento que "reformas". */
.field--importe, .field--nota { display: none; animation: field-reveal .3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wizard-fields:has( input[name="traspaso"][value="si"]:checked ) .field--importe { display: flex; }
.wizard-fields:has( input[name="traspaso"][value="si"]:checked ) .field--nota    { display: block; }

/* Formulario privado (fase 2). Las preguntas son provisionales, así que en vez
   de un modificador por campo van todas a ancho completo; solo el importe se
   estrecha. Cuando el cliente cierre las preguntas se maqueta como el de
   inscripción, con su .field--x y su grid-column. */
.wizard-fields--fase2 > .field { grid-column: 1 / -1; }
.wizard-fields--fase2 > .field--inversion { grid-column: span 3; }

/* Aparición suave de los campos condicionales (pasos 2 y 3). La animación solo
   se dispara cuando el campo pasa de display:none a visible (al marcar la opción
   correspondiente), igual que la entrada de cada paso del wizard. */
@keyframes field-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Sin movimiento si el usuario lo prefiere. Va después de las reglas de arriba
   (misma especificidad) para ganar en la cascada cuando el media query aplica. */
@media (prefers-reduced-motion: reduce) {
  .field--reformas,
  .field--importe,
  .field--nota { animation: none; }
}

/* Nota informativa (caja crema) del paso 3 */
.wizard-note {
  padding: var(--s-16) var(--s-24);
  background-color: #F8F5E9;
  border-radius: 8px;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--neutrals-800);
}

/* Textarea (reutiliza .bl-input; más alta y redimensionable en vertical) */
.bl-textarea {
  min-height: 96px;
  height: auto;
  padding: 12px 16px;
  line-height: var(--line-height-base);
  resize: vertical;
}

/* Input con sufijo (p. ej. "m²") */
.input-suffix { position: relative; }
.input-suffix .bl-input { padding-right: 46px; }
.input-suffix__unit {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
  color: var(--neutrals-300);
  pointer-events: none;
}

/* Wizard: solo se ve el paso activo, con entrada suave (fade + deslizamiento) */
.wizard-block { display: none; }
.wizard-block.is-current {
  display: block;
  animation: wizard-step-in .35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes wizard-step-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Consentimiento RGPD del wizard (checkbox + texto). Va fuera de las tarjetas y
   solo se muestra en el último paso (cuando su bloque tiene .is-current). */
.wizard-consent {
  display: none;
  align-items: flex-start;
  gap: var(--s-12);
  margin-top: var(--s-24);
}
.wizard-form:has( .wizard-block[data-step="4"].is-current ) .wizard-consent { display: flex; }
.wizard-consent .bl-checkbox { margin-top: 3px; } /* alinea con la 1ª línea del texto */
.wizard-consent label {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--neutrals-800);
}
.wizard-consent a { color: var(--primary-600); text-decoration: underline; }

/* Navegación del wizard */
.wizard-nav { display: flex; gap: var(--s-16); margin-top: var(--s-32); }

/* Mensaje de error de envío del wizard (oculto hasta que falla el guardado) */
.wizard-error {
  margin-top: var(--s-16);
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #fdecec;
  color: var(--error-900);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* ===== Pantallas de resultado (Apto / No apto), se muestran al enviar ===== */
.wizard-result { animation: wizard-step-in .4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wizard-result__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 40px;
  background-color: var(--neutrals-0);
  border: 1px solid var(--golden-200);
  border-radius: 8px;
  text-align: center;
}
.wizard-result__icon { display: block; width: 64px; height: 64px; }
.wizard-result__icon--success { color: var(--success-500); }
.wizard-result__icon--warning { color: var(--golden-500); }
.wizard-result__icon--error   { color: var(--error-500); }
.wizard-result__title { margin: 0; font-size: var(--font-size-2xl); line-height: var(--line-height-2xl); font-weight: 700; color: var(--neutrals-900); }
.wizard-result__text { margin: 0; max-width: 680px; font-size: var(--font-size-m); line-height: var(--line-height-m); color: var(--neutrals-800); }
.wizard-result .btn { margin-top: var(--s-8); }
@media (prefers-reduced-motion: reduce) {
  .wizard-result { animation: none; }
}
@media (max-width: 767px) {
  .wizard-result__card { padding: 32px 24px; }
  .wizard-result__icon { width: 56px; height: 56px; }
}

/* Tablet/móvil: stepper compacto = texto "PASO X DE 4 · etiqueta" + puntos */
@media (max-width: 1023px) {
  .wizard-step__label { display: none; }
  .wizard-stepper__status {
    display: block;
    margin-bottom: var(--s-16);
    font-size: var(--font-size-xs1);
    line-height: var(--line-height-sm);
  }
}
/* Mobile: campos apilados */
@media (max-width: 767px) {
  .form-hero__title { font-size: 32px; line-height: 36px; }
  .wizard-block { padding: 24px; }
  .wizard-fields { grid-template-columns: 1fr; align-items: stretch; }
  .wizard-fields > .field { grid-column: 1 / -1; }
  /* CP, Superficie e importes no ocupan todo el ancho en móvil (input estrecho) */
  .field--cp .bl-input,
  .field--superficie .input-suffix,
  .field--alquiler .input-suffix,
  .field--importe .input-suffix { max-width: 160px; }
  .wizard-block__num { font-size: 32px; }
  /* Número y título en líneas separadas (cada uno en su línea) */
  .wizard-block__head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

/* Mensaje de error (icono + texto), oculto hasta que el campo es inválido.
   El "cuándo mostrarlo" lo decide cada formulario (ver :has más abajo). */
.bl-input-error {
  display: none;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--s-8);
  font-size: var(--font-size-xs1);       /* 13/19.5 */
  line-height: var(--line-height-sm);
  color: var(--error-900);               /* #701012 */
}
.bl-input-error::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23CB3C3F' stroke-width='1.5'/%3E%3Cline x1='8' y1='4.5' x2='8' y2='8.7' stroke='%23CB3C3F' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.4' r='.95' fill='%23CB3C3F'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ─────────────────────────────────────
   6. BADGE / TAG
   ───────────────────────────────────── */
.badge {
  display: inline-block;
  background-color: var(--golden-500);
  color: var(--neutrals-0);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-base);
  text-transform: uppercase;
  padding: var(--s-8) var(--s-16);
  letter-spacing: 0.02em;
}

.badge--red     { background-color: var(--primary-400); }
.badge--white   { background-color: var(--neutrals-0); color: var(--primary-600); }
.badge--success { background-color: var(--success-500); }

/* ─────────────────────────────────────
   7. NAVBAR
   ───────────────────────────────────── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--golden-100);
  transition: box-shadow .2s ease, transform .35s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}
.navbar.scrolled    { box-shadow: var(--shadow-nav); }
.navbar--hidden     { transform: translateY(-100%); }

.nav-container {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--s-24) var(--layout-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img { height: 32px; width: auto; }

/* Grupo derecho: enlaces + CTA + hamburguesa */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--s-16);
}

.nav-links {
  display: flex;
  align-items: center;
}

.nav-link {
  padding: var(--s-8) var(--s-12);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--neutrals-900);
  position: relative;
  white-space: nowrap;
}
/* Subrayado: aparece deslizando de abajo a arriba */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: var(--s-12);
  right: var(--s-12);
  height: 1px;
  background-color: var(--neutrals-900);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.nav-link:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  color: var(--neutrals-900);
  flex-shrink: 0;
}

/* ── Hamburger icon — animación burger → X ── */
.hamburger-icon { display: block; }

.hamburger-line {
  transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1),
              opacity   0.25s ease;
  transform-box:    fill-box;
  transform-origin: center;
}

/* Estado abierto: line 1 baja + rota 45°, line 2 desaparece, line 3 sube + rota -45° */
.hamburger-btn[aria-expanded="true"] .hamburger-line--1 {
  transform: translateY(6px) rotate(45deg);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line--2 {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn[aria-expanded="true"] .hamburger-line--3 {
  transform: translateY(-6px) rotate(-45deg);
}

/* ── Mobile menu — drop-down de arriba a abajo ── */
.mobile-menu {
  display: grid;
  grid-template-rows: 0fr;                           /* colapsado */
  background-color: var(--golden-100);
  transition: grid-template-rows 0.42s cubic-bezier(0.76, 0, 0.24, 1);
  overflow: hidden;
}
.mobile-menu.open {
  grid-template-rows: 1fr;                           /* expandido */
}

/* Wrapper interno: gestiona el overflow para clipar el contenido al colapsar */
.mobile-menu__inner {
  overflow:   hidden;
  padding:    0 var(--layout-pad-x);
  transition: padding 0.42s cubic-bezier(0.76, 0, 0.24, 1);
}
.mobile-menu.open .mobile-menu__inner {
  padding: var(--s-8) var(--layout-pad-x) var(--s-24);
}

.mobile-menu__link {
  display:     block;
  padding:     var(--s-8) 0;
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  color:       var(--neutrals-900);
  opacity:     0;
  transform:   translateY(-6px);
  transition:  opacity 0.28s ease, transform 0.28s ease;
}

/* Links aparecen en cascada al abrir */
.mobile-menu.open .mobile-menu__link            { opacity: 1; transform: translateY(0); }
.mobile-menu.open .mobile-menu__link:nth-child(1) { transition-delay: 0.14s; }
.mobile-menu.open .mobile-menu__link:nth-child(2) { transition-delay: 0.20s; }
.mobile-menu.open .mobile-menu__link:nth-child(3) { transition-delay: 0.26s; }

/* Overlay de fondo del menú mobile */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;                       /* por debajo del navbar (z-index 200) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.mobile-menu-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

/* ─────────────────────────────────────
   8. HERO
   Estructura: flex column
   · hero__content  → bloque crema (texto sobre fondo golden-100)
   · hero__photo    → fotografía debajo, sin texto encima
   ───────────────────────────────────── */
.hero {
  display: flex;
  flex-direction: column;
  background-color: var(--golden-100);
}

/* Fila superior: crema con texto */
.hero__content {
  background-color: var(--golden-100);
  padding-top: var(--s-40);
  padding-bottom: var(--s-48);
}

.hero__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-pad-x);
  display: flex;
  gap: var(--s-64);
  align-items: flex-start;
}

.hero__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.hero__title {
  font-size: var(--font-size-5xl);
  font-weight: 600;
  line-height: 68px;
  color: var(--neutrals-900);
}
.hero__title .text-primary { color: var(--primary-600); }

.hero__desc {
  flex: 0 0 519px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-24);
  padding-top: var(--s-48);
}
.hero__desc p {
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  color: var(--neutrals-900);
}

/* Fila inferior: fotografía full-bleed */
.hero__photo {
  width: 100%;
  height: 654px;
  flex-shrink: 0;
}

/* ─────────────────────────────────────
   9. SECCIÓN ¿QUÉ ES BARLAB RURAL?
   ───────────────────────────────────── */
.que-es__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-48);
}

.que-es__header {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.que-es__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-40);
}

.que-es__header h2 {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  line-height: var(--line-height-4xl);
  letter-spacing: -0.98px;
}
.que-es__header h2 strong {
  color: var(--primary-600);
  font-weight: inherit;
}
.que-es__header p {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: var(--line-height-2xl);
  color: var(--neutrals-900);
  max-width: 1113px;
}
.que-es__aliados { flex-shrink: 0; }
.que-es__aliados img { height: 65px; width: auto; }

.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-24) var(--s-32);
}

.checklist-item {
  display: flex;
  gap: var(--s-16);
  align-items: flex-start;
}

.check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--primary-600);
  background-color: var(--golden-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}
.check-icon svg { width: 12px; height: 12px; stroke: var(--primary-600); }

.checklist-item__text { display: flex; flex-direction: column; gap: 4px; }
.checklist-item__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: var(--line-height-xl);
}
.checklist-item__desc {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  color: var(--neutrals-800);
}

/* ─────────────────────────────────────
   10. IMAGEN FULL-BLEED
   ───────────────────────────────────── */
.img-full-bleed {
  width: 100%;
  height: 547px;
  position: relative;
  overflow: visible;
  z-index: 3;
}
.img-full-bleed .photo-wrap { height: 100%; overflow: hidden; }

.full-bleed__sello {
  position: absolute;
  width: 264px;
  height: 264px;
  top: -71px;
  left: 271px;
  z-index: 1;
  pointer-events: none;
}

/* ─────────────────────────────────────
   11. SECCIÓN ¿A QUIÉN VA DIRIGIDO? (dark)
   ───────────────────────────────────── */
#a-quien { padding-top: 104px; padding-bottom: 104px; }
#como-funciona {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  scroll-margin-top: 80px;
}
#como-funciona .container { position: relative; z-index: 1; }
#como-funciona .section-title strong { color: var(--primary-600); font-weight: inherit; }
#a-quien .section-title strong { color: var(--primary-600); font-weight: 600; }

.a-quien__inner { display: flex; flex-direction: column; gap: var(--s-40); }

.section-title {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  line-height: var(--line-height-4xl);
  letter-spacing: -0.98px;
}
.section-title strong { font-weight: 600; }

/* ─────────────────────────────────────
   404 — Página no encontrada (sistema de diseño de la home)
   ───────────────────────────────────── */
.error-404 {
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.error-404__inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
}
.error-404__sello { width: 72px; height: 72px; margin-bottom: var(--s-8); }
.error-404__code {
  font-size: clamp(96px, 20vw, 200px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2px;
  color: var(--primary-500);
}
.error-404__title {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-4xl);
  font-weight: 700;
  color: var(--neutrals-900);
}
.error-404__text {
  max-width: 46ch;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  color: var(--neutrals-800);
}
.error-404 .btn { margin-top: var(--s-8); }

/* ─────────────────────────────────────
   PÁGINAS DE CONTENIDO (aviso legal, privacidad, cookies…)
   ───────────────────────────────────── */
.page-article__title { margin-bottom: var(--s-32); }
.page-content {
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  color: var(--neutrals-800);
}
.page-content > *:first-child { margin-top: 0; }
.page-content h2 {
  margin: var(--s-40) 0 var(--s-12);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-2xl);
  font-weight: 700;
  color: var(--neutrals-900);
}
.page-content h3 {
  margin: var(--s-32) 0 var(--s-8);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--neutrals-900);
}
.page-content p { margin: 0 0 var(--s-16); }
.page-content ul,
.page-content ol { margin: 0 0 var(--s-16); }
.page-content li { margin-bottom: var(--s-8); }
.page-content li::marker { color: var(--primary-500); }
.page-content a { color: var(--primary-600); text-decoration: underline; }
.page-content strong { font-weight: 700; color: var(--neutrals-900); }
/* Tablas (listado de cookies de la política de cookies). La <figure> que las
   envuelve se desplaza en horizontal en móvil; la página no. */
.page-content .wp-block-table { margin: 0 0 var(--s-24); overflow-x: auto; }
.page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.page-content th,
.page-content td {
  border: 1px solid var(--golden-300);
  padding: var(--s-8) var(--s-12);
  text-align: left;
  vertical-align: top;
}
.page-content th { background-color: var(--golden-200); font-weight: 700; }

/* Texto blanco en secciones rojas */
.section--red .section-title,
.section--red .section-subtitle { color: var(--neutrals-0); }

/* ─── Acordeón ─── */
.accordion-group {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}

.accordion {
  flex: 1;
  background-color: var(--neutrals-800);
  border-bottom: 1px solid var(--golden-500);
  display: flex;
  flex-direction: column;
  transition: background-color .2s;
}
.accordion:hover          { background-color: var(--neutrals-900); }
.accordion.open           { background-color: var(--neutrals-800); }
/* Tarjeta fija (sin puntos): no despliega → sin hover ni cursor de clic */
.accordion--static:hover  { background-color: var(--neutrals-800); }
.accordion--static .accordion__header { cursor: default; }

.accordion__header {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  padding: var(--s-40);
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  color: var(--neutrals-0);
}
.accordion__header:hover  { background: none; } /* el hover lo gestiona .accordion */

.accordion__icon { width: 100px; height: 100px; flex-shrink: 0; }

.accordion__title-wrap {
  width: 100%;
}
.accordion__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: var(--line-height-2xl);
  color: var(--neutrals-0);
}
.accordion__title strong { font-weight: 600; text-transform: uppercase; }

/* Fila CTA: "Con garantías para ti" + icono. Pegada al fondo del header
   (que se iguala por JS) → las 3 cards tienen la misma altura y los CTA
   quedan alineados. El separador viaja con el CTA, no con el título. */
.accordion__cta {
  display: flex;
  align-items: flex-start;
  gap: var(--s-16);
  width: 100%;
  margin-top: auto;
  border-top: 1px solid var(--golden-300);
  padding-top: var(--s-24);
}
.accordion__cta-label {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: var(--line-height-base);
  text-transform: uppercase;
  color: var(--neutrals-0);
}
.accordion__cta-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform .3s;
}
.accordion.open .accordion__cta-icon { transform: rotate(45deg); }

/* Cuerpo expandido */
.accordion__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s ease, padding .4s ease;
  padding: 0 var(--s-40);
}
.accordion.open .accordion__body {
  max-height: 400px;
  padding-bottom: var(--s-40);
}

/* Checklist */
.accordion__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}
.accordion__list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-8);
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
  color: var(--neutrals-0);
}
/* Círculo check */
.accordion__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background-color: var(--neutrals-0);
  border: 1px solid var(--golden-500);
  flex-shrink: 0;
  margin-top: 2px;
}
.accordion__check::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--golden-500);
  border-bottom: 1.5px solid var(--golden-500);
  /* El "tick" se dibuja en la esquina inferior-derecha del cuadrito, no en su
     centro. translateY (en espacio de pantalla, ANTES del rotate) lo sube para
     centrarlo verticalmente dentro del círculo; horizontal ya queda centrado. */
  transform: translateY(-2px) rotate(45deg);
}

/* ─────────────────────────────────────
   12. SECCIÓN ¿QUÉ OFRECEMOS?
   ───────────────────────────────────── */
.que-ofrecemos__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-64);
}

/* Header: 2 columnas — título izquierda, subtítulo derecha */
.section-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-32);
  width: 100%;
}
.section-header h2 {
  flex: 0 0 auto;
  max-width: 492px;
  font-size: var(--font-size-4xl);
  font-weight: 600;
  line-height: var(--line-height-4xl);
  letter-spacing: -0.98px;
}
/* "ofrecemos" en primary/600 */
#que-ofrecemos .section-header h2 strong { color: var(--primary-600); font-weight: 600; }

.section-subtitle {
  flex: 0 0 auto;
  max-width: 524px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  color: var(--neutrals-800);
}

/* 3 pilares */
.pilares-grid {
  display: flex;
  justify-content: space-between;
  gap: var(--s-24);
}

.pilar       { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.pilar__top  { display: flex; flex-direction: column; gap: 24px; }
.pilar__img  { height: 419px; }
.pilar__img img { width: 100%; height: 100%; object-fit: cover; }
.pilar__title { font-size: var(--font-size-xl); font-weight: 700; line-height: var(--line-height-xl); }
.pilar__desc  { font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--neutrals-800); }

/* ─────────────────────────────────────
   13. CASOS REALES
   ───────────────────────────────────── */
#casos { padding-top: var(--s-64); }

.casos__inner { display: flex; flex-direction: column; gap: var(--s-48); }

.casos__header { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-40); }
.casos__headline { max-width: 731px; font-size: var(--font-size-4xl); font-weight: 600; line-height: var(--line-height-4xl); letter-spacing: -0.98px; }
.casos__headline strong { font-weight: 600; }
.casos__desc { max-width: 524px; }
.casos__desc p { font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--neutrals-800); margin-bottom: var(--s-8); }

.casos-slider { display: flex; flex-direction: column; gap: var(--s-32); }
.casos-track {
  display: flex;
  gap: var(--s-24);
  padding-bottom: var(--s-8);
  /* Slider continuo: las cards conservan su ancho base y, cuando ya no caben,
     el track se desplaza en horizontal. Sin breakpoint: depende de si caben. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.casos-track::-webkit-scrollbar { display: none; }
/* Cursor de arrastre sólo cuando el track realmente desborda
   (JS añade .is-scrollable — ver initSliderDots() en main.js). */
.casos-slider.is-scrollable .casos-track { cursor: grab; }
.casos-slider.is-scrollable .casos-track:active,
.casos-slider.is-scrollable .casos-track.is-dragging { cursor: grabbing; }

/* Recipe Card */
.recipe-card {
  /* grow:1 → las 5 cards llenan el ancho cuando caben; shrink:0 + base fija
     → nunca se deforman: por debajo de ese ancho el track pasa a slider.    */
  flex: 1 0 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  scroll-snap-align: start;
}

.recipe-card__img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;   /* siempre cuadrado, a cualquier ancho */
  overflow: hidden;
}
.recipe-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-card__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(161,141,112,0.3);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.recipe-card__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: var(--primary-400);
  padding: 8px 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.recipe-card__tag img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.recipe-card__tag span {
  font-size: var(--font-size-xs2);
  font-weight: 700;
  line-height: 16.8px;
  text-transform: uppercase;
  color: var(--primary-0);
}

.recipe-card__num {
  position: absolute;
  bottom: var(--s-12);
  right: var(--s-12);
  z-index: 1;
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: var(--neutrals-0);
  line-height: var(--line-height-3xl);
  opacity: 0.9;
}

/* min-height = 2 líneas: reserva el alto del nombre más largo (2 líneas) en
   todas las tarjetas, así la localidad y el enlace quedan alineados aunque el
   nombre ocupe solo una línea. */
.recipe-card__name     { font-size: var(--font-size-base); font-weight: 700; text-transform: uppercase; color: var(--neutrals-900); line-height: var(--line-height-base); min-height: calc(var(--line-height-base) * 2); }
.recipe-card__location { font-size: var(--font-size-sm); font-weight: 600; color: var(--neutrals-800); }
.recipe-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--primary-500);
  position: relative;
  align-self: flex-start;
}
.recipe-card__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 12px; /* excluye el gap (4px) + flecha (8px) */
  height: 1px;
  background-color: var(--primary-500);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.recipe-card__link:hover { color: var(--primary-500); }
.recipe-card__link:hover::after { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────
   MAPA — "pastilla" del pin (popup Leaflet)
   Al clicar un pin, este se convierte en una pastilla con el nombre, la
   localidad y un enlace que abre la ficha lateral. Se quita el estilo por
   defecto del popup de Leaflet (burbuja blanca, pico, sombra, cerrar).
   ───────────────────────────────────── */
.map-pill-popup .leaflet-popup-content-wrapper {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}
.map-pill-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
  line-height: inherit;
}
/* Anula el margin: 18px 0 que Leaflet pone a los <p> del popup (más específico
   que la clase, por eso hay que subir la especificidad aquí). */
.map-pill-popup .leaflet-popup-content p { margin: 0; }
.map-pill-popup .leaflet-popup-tip-container,
.map-pill-popup .leaflet-popup-tip { display: none; }

.map-pill {
  display: flex;
  align-items: flex-start;   /* el sello se alinea arriba, no centrado */
  gap: 10px;
  background: var(--neutrals-900);
  border-radius: 14px;
  padding: 10px 16px 10px 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
.map-pill__sello {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) invert(1); /* sello en blanco sobre fondo oscuro */
}
.map-pill__info { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.map-pill__name {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--neutrals-0);
}
.map-pill__location {
  font-size: var(--font-size-xs1);
  font-weight: 600;
  color: var(--neutrals-100);
}
.map-pill__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-xs2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  color: var(--primary-200); /* #F199A3 */
}
.map-pill__link .link-arrow { color: var(--primary-200); }
.link-arrow { flex-shrink: 0; }

/* Dots — sólo visibles en mobile */
.slider-dots {
  display: none;
  justify-content: center;
  gap: var(--s-4);
  align-items: center;
}
/* Dots visibles sólo cuando el track desborda (lo añade JS) */
.casos-slider.is-scrollable .slider-dots { display: flex; }
.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background-color: var(--golden-300);
  transition: width .25s, background-color .25s;
  cursor: pointer;
  border: none;
}
.slider-dot.active {
  width: 48px;
  background-color: var(--golden-500);
}

/* ─────────────────────────────────────
   14. MAPA (dentro de #casos)
   ───────────────────────────────────── */
.casos-mapa { position: relative; width: 100%; margin-top: var(--s-48); isolation: isolate; }

#map { width: 100%; height: 560px; }

/* Override Leaflet para la marca */
.leaflet-control-attribution {
  font-family: var(--font-family-base);
  font-size: 10px;
  background: rgba(247,245,242,0.85) !important;
  color: var(--neutrals-300);
}
.leaflet-control-zoom a {
  color: var(--neutrals-900) !important;
  background-color: var(--golden-100) !important;
  border-color: var(--golden-300) !important;
}
.leaflet-control-zoom a:hover { background-color: var(--golden-200) !important; }

/* ─────────────────────────────────────
   15. BOTTOM SHEET (mobile)
   ───────────────────────────────────── */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 90vh;
  background-color: var(--neutrals-0);
  border-radius: 16px 16px 0 0;
  overflow-y: auto;
  z-index: 400;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.32,.72,0,1);
}
.bottom-sheet.open { transform: translateY(0); }

/* Cabecera sticky: handle pill + botón cerrar siempre visibles al hacer scroll */
.bottom-sheet__header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--neutrals-0);
  border-radius: 16px 16px 0 0;   /* replica las esquinas del sheet */
  overflow: visible;               /* permite que el botón se extienda sobre la imagen */
}

.bottom-sheet__handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
}
.bottom-sheet__handle-pill {
  width: 82px;
  height: 4px;
  background-color: var(--neutrals-300);
  border-radius: 100px;
}
.bottom-sheet__image { width: 100%; height: 223px; object-fit: cover; }
.bottom-sheet__content      { padding: 32px 16px; display: flex; flex-direction: column; gap: var(--s-24); }
.bottom-sheet__story        { font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--neutrals-800); white-space: pre-line; }
.bottom-sheet__quote        { border-left: 2px solid var(--primary-400); padding: 10px 16px; font-style: italic; font-size: var(--font-size-m); line-height: var(--line-height-m); color: var(--primary-600); white-space: pre-line; }
.bottom-sheet__attribution        { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-12); }
.bottom-sheet__attribution-text  { display: flex; flex-direction: column; align-items: flex-end; }
.bottom-sheet__person       { font-size: var(--font-size-base); font-weight: 700; line-height: var(--line-height-base); color: var(--neutrals-800); text-align: right; }
.bottom-sheet__bar-name     { font-size: var(--font-size-base); font-weight: 700; line-height: var(--line-height-base); color: var(--neutrals-800); text-align: right; text-transform: uppercase; }
.bottom-sheet__link         { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-base); font-weight: 700; text-transform: uppercase; color: var(--primary-500); position: relative; }
.bottom-sheet__link::after  { content: ''; position: absolute; bottom: -2px; left: 0; right: 12px; height: 1px; background-color: var(--primary-500); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.bottom-sheet__link:hover::after { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────
   16. SIDE SHEET (desktop)
   ───────────────────────────────────── */
.side-sheet-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.side-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.side-sheet {
  position: fixed;
  top: 0;
  right: 0;
  width: 790px;
  height: 100vh;
  background-color: var(--neutrals-0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 400;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(0.25, 1, 0.5, 1);
}
.side-sheet.open { transform: translateX(0); }

.side-sheet__close {
  position: absolute;
  top: var(--s-24);
  left: var(--s-24);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  z-index: 1;
  color: var(--neutrals-0);
  transition: opacity .2s ease;
}
.side-sheet__close:hover { opacity: 0.5; }
.side-sheet__close img   { width: 32px; height: 32px; }

/* Botón cerrar del bottom sheet (mobile) — esquina superior derecha sobre la imagen */
.bottom-sheet__close {
  position: absolute;
  top:   var(--s-24);
  right: var(--s-16);
  width:  48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  cursor: pointer;
  z-index: 2;
  color: var(--neutrals-0);
  transition: opacity .2s ease;
}
.bottom-sheet__close:hover { opacity: 0.6; }
.bottom-sheet__close img   { width: 32px; height: 32px; }

.side-sheet__image-wrap   { position: relative; flex-shrink: 0; }
.side-sheet__image        { display: block; width: 100%; height: 431px; object-fit: cover; }
/* Tag reutiliza el estilo de .recipe-card__tag, pero anclado abajo-izquierda. */
.side-sheet__tag          { top: auto; bottom: 0; }
.side-sheet__content      { flex: 1; min-height: 0; overflow-y: auto; padding: 48px 64px; display: flex; flex-direction: column; gap: var(--s-24); }
.side-sheet__story        { font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--neutrals-800); white-space: pre-line; }
.side-sheet__quote        { border-left: 2px solid var(--primary-400); padding: 10px 16px; font-style: italic; font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--primary-600); white-space: pre-line; }
.side-sheet__attribution        { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-12); }
.side-sheet__attribution-text  { display: flex; flex-direction: column; align-items: flex-end; }
.side-sheet__person       { font-size: var(--font-size-lg); font-weight: 700; line-height: var(--line-height-lg); color: var(--neutrals-800); text-align: right; }
.side-sheet__bar-name     { font-size: var(--font-size-lg); font-weight: 700; line-height: var(--line-height-lg); color: var(--neutrals-800); text-align: right; text-transform: uppercase; letter-spacing: 0.8px; }
.side-sheet__link         { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-base); font-weight: 700; text-transform: uppercase; color: var(--primary-500); position: relative; }
.side-sheet__link::after  { content: ''; position: absolute; bottom: -2px; left: 0; right: 12px; height: 1px; background-color: var(--primary-500); opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.side-sheet__link:hover::after { opacity: 1; transform: translateY(0); }

/* ─────────────────────────────────────
   17. CÓMO FUNCIONA / PASOS
   ───────────────────────────────────── */
.pasos__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
/* Sello decorativo de fondo */
.pasos__sello {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 700px;
  height: 700px;
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.paso {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-40);
  align-items: start;
  padding: var(--s-48) 0;
  border-bottom: 1px solid var(--golden-300);
  position: relative;
}
.paso:first-of-type { border-top: 1px solid var(--golden-300); }

.paso__number {
  font-size: 60px;
  font-weight: 900;
  line-height: 60px;
  color: var(--golden-500);
  font-family: var(--font-family-base);
  flex-shrink: 0;
}

.paso__content { display: flex; flex-direction: column; gap: var(--s-12); }
.paso__title   { font-size: var(--font-size-2xl); font-weight: 700; line-height: var(--line-height-2xl); text-transform: uppercase; }
.paso__desc    { font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--neutrals-800); max-width: 820px; }

/* ─────────────────────────────────────
   18. INSCRIPCIÓN PROPIETARIOS (fondo rojo)
   ───────────────────────────────────── */
/* Figma: el padding inferior es 104px, no los 124px de .section */
#inscripcion { padding-bottom: var(--s-104); }

/* 594 + 718 = ancho de contenido a 1440px; por debajo se reparte en proporción */
.inscripcion__inner {
  display: grid;
  grid-template-columns: minmax(0, 594fr) minmax(0, 718fr);
}

.inscripcion__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--neutrals-0);
  color: var(--neutrals-900);
  padding: var(--s-40);
}
.inscripcion__logo {
  width: 189.4px;
  height: 142.8px;
  margin-bottom: var(--s-32);
}
.inscripcion__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: var(--line-height-lg);
  margin-bottom: var(--s-8);
}
.inscripcion__desc {
  font-size: var(--font-size-m);
  line-height: var(--line-height-m);
}

/* La foto no marca la altura: rellena la de la tarjeta (en ≤1023px la da el aspect-ratio) */
.inscripcion__image-wrap { position: relative; }
.inscripcion__image-wrap .photo-wrap { position: absolute; inset: 0; }
/* Encuadre de Figma: la barra y los dos, con la cabeza de ella entera */
.inscripcion__image-wrap img { object-position: 50% 24%; }

/* ─────────────────────────────────────
   19. PRE-REGISTRO EMPRENDEDORES (arena)
   ───────────────────────────────────── */
#emprendedores { padding-bottom: var(--s-64); }

.emprendedores__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-16);
  max-width: 1000px;
}
.emprendedores__title {
  font-size: var(--font-size-4xl);
  font-weight: 600;
  line-height: var(--line-height-4xl);
  letter-spacing: -0.98px;
}
.emprendedores__desc {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  color: var(--neutrals-800);
}
.emprendedores__desc strong { font-weight: 700; }
.emprendedores__desc p + p  { margin-top: var(--s-8); }

/* Formulario de pre-registro: label arriba + (input | botón) en línea */
.emprendedores__form {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-top: var(--s-8);
}
.emprendedores__label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--neutrals-900);
}
.emprendedores__req { color: var(--primary-500); }
.emprendedores__form-row {
  display: flex;
  align-items: stretch;
  gap: var(--s-12);
}
/* El email solo aporta el layout en la fila; el aspecto lo da .bl-input. */
.emprendedores__email { flex: 1 1 auto; min-width: 0; }
.emprendedores__form-row .btn { flex: 0 0 auto; }
/* Muestra el mensaje de error cuando el email es inválido (tras interacción). */
.emprendedores__form:has(.emprendedores__email:user-invalid) .bl-input-error { display: flex; }
/* Honeypot antispam: fuera de pantalla (oculto también para lectores). */
.bl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Mensaje de éxito del pre-registro (sustituye al formulario) */
.emprendedores__success {
  max-width: 620px;
  margin-top: var(--s-8);
  padding: 16px 20px;
  background-color: var(--neutrals-0);
  border: 1px solid var(--golden-300);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--neutrals-900);
}
/* Mensaje de error del envío (validación en servidor) */
.emprendedores__error-msg {
  margin-top: var(--s-4);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--error-900);
}
/* Consentimiento RGPD: checkbox + texto con enlace a la política */
.emprendedores__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  max-width: 620px;
  margin-top: var(--s-16);
}
.emprendedores__consent .bl-checkbox { margin-top: 3px; } /* alinea con la 1ª línea del texto */
.emprendedores__consent label {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--neutrals-800);
}
.emprendedores__consent a {
  color: var(--primary-600);
  text-decoration: underline;
}

/* ─────────────────────────────────────
   20. FOOTER
   ───────────────────────────────────── */
.footer { width: 100%; }

.footer-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding-left:  var(--layout-pad-x);
  padding-right: var(--layout-pad-x);
}

/* Top: fondo crema */
.footer-top { background-color: var(--golden-100); color: var(--neutrals-900); width: 100%; }
.footer-top .footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-64);
  padding-top: var(--s-64);
  padding-bottom: var(--s-64);
  align-items: start;
}

.footer-brand { display: flex; flex-direction: column; gap: var(--s-16); max-width: 420px; }
.footer-brand img { height: 32px; width: auto; align-self: flex-start; }
.footer-brand p   { font-size: var(--font-size-lg); line-height: var(--line-height-lg); color: var(--neutrals-800); }

.footer-nav { display: flex; flex-direction: column; gap: var(--s-16); align-items: flex-start; }
.footer-nav a {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--neutrals-900);
  position: relative;
}
.footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--neutrals-900);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}
.footer-nav a:hover::after { opacity: 1; transform: translateY(0); }

.footer-aliados { display: flex; flex-direction: column; gap: var(--s-12); align-items: flex-start; }
.footer-aliados__label {
  font-size: var(--font-size-xs1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--golden-700);
}
.footer-aliados img { height: 65px; width: auto; }

/* Bottom: fondo negro */
.footer-bottom { background-color: var(--neutrals-900); color: var(--neutrals-0); width: 100%; }
.footer-bottom .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-32);
  padding-bottom: var(--s-32);
  gap: var(--s-24);
}
.footer-copy { font-size: var(--font-size-sm); color: var(--neutrals-200); }

.footer-legal { display: flex; gap: var(--s-24); }
.footer-legal a {
  font-size: var(--font-size-sm);
  color: var(--neutrals-200);
  transition: color .2s;
}
.footer-legal a:hover { color: var(--neutrals-0); }


/* ─────────────────────────────────────
   SCROLL-OVER — foto hero sticky, #que-es desliza encima
   ───────────────────────────────────── */
.scroll-over-group { position: relative; background-color: var(--golden-100); }

/* Texto del hero: z-index alto para quedar encima de la foto mientras es visible */
#inicio {
  position: relative;
  z-index: 2;
}

/* Foto sticky: se queda pegada al top cuando el texto se desplaza */
.hero-photo-sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Bloque 2: mismo z-index que el texto del hero, se desliza encima de la foto */
#que-es {
  position: relative;
  z-index: 2;
  margin-top: -96px;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.10);
}

/* Mobile: scroll-over activado con overlap reducido */
@media (max-width: 767px) {
  #que-es { margin-top: -56px; }
}

/* Boost de velocidad: #que-es sube un poco más rápido que el scroll natural.
   Técnica: scroll-driven animation con view() — el bloque parte 40px por
   debajo de su posición natural y los "recupera" durante el primer 50 % de
   su entrada en el viewport. CLAVE: ese arranque (40px) es MENOR que el
   solape de margin-top (-96px desktop / -56px mobile), así que el bloque
   nunca destapa la foto sticky → no se abre hueco gris debajo. Y al terminar
   en translateY(0) vuelve a su posición maquetada, sin desplazar lo que va
   debajo (img-mercado). Si se reduce el margin-top por debajo de 40px,
   volvería el hueco.
   Fallback (browsers sin soporte): sticky normal sin boost.            */
@supports (animation-timeline: scroll()) {
  @keyframes que-es-boost {
    from { transform: translateY(40px); }
    to   { transform: translateY(0);    }
  }

  #que-es {
    animation: que-es-boost linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  @media (prefers-reduced-motion: reduce) {
    #que-es { animation: none; }
  }
}


/* ─────────────────────────────────────
   ANIMACIONES DE ENTRADA — Reveal al scroll
   ───────────────────────────────────── */

/* Contenedor del reveal: necesita position y overflow para clipar el overlay */
.reveal-img {
  position: relative;
  overflow: hidden;
}

/* Overlay que cubre el contenido y se desliza hacia abajo al revelar */
.reveal-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--golden-100);
  z-index: 10;
  transform: translateY(0%);
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}
.reveal-overlay--primary { background-color: var(--primary-600); }

/* .reveal-fill: solo las fotos hacen zoom (no el contenido de cards sin imagen) */
.reveal-fill {
  transform: scale3d(1.15, 1.15, 1);
  transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

/* Estado revelado: overlay sale por abajo, foto se asienta */
.reveal-img.is-revealed .reveal-overlay {
  transform: translateY(100%);
}
.reveal-img.is-revealed .reveal-fill {
  transform: scale3d(1, 1, 1);
}

/* Hover zoom sutil en fotos (solo tras haber revelado) */
.reveal-img.is-revealed:hover .reveal-fill {
  transform: scale3d(1.07, 1.07, 1);
  transition-duration: 0.45s;
  transition-delay: 0s;
}

/* Entrada de card: fade-in + slide-up (acordeones sin imagen) */
.reveal-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Pasos y Hero: animación exagerada — de abajo hacia arriba */
#como-funciona .reveal-card,
#inicio .reveal-card {
  transform: translateY(140px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
#como-funciona .reveal-card.is-revealed,
#inicio .reveal-card.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* CTA reveal: scale pop + pulso posterior */
.reveal-cta {
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-cta.is-revealed {
  opacity: 1;
  transform: scale(1);
  animation: cta-pulse 0.38s ease-in-out 0.6s 2;
}
@keyframes cta-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Respeta la preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .reveal-overlay,
  .reveal-fill,
  .reveal-card,
  .reveal-cta {
    transition: none !important;
    animation: none !important;
  }
  .reveal-overlay { transform: translateY(100%) !important; }
  .reveal-fill    { transform: scale3d(1, 1, 1) !important; }
  .reveal-card    { opacity: 1 !important; transform: none !important; }
  .reveal-cta     { opacity: 1 !important; transform: none !important; }
}


/* ============================================================
   RESPONSIVE — TABLET (768px – 1023px)
   ============================================================ */
@media (max-width: 1023px) {
  :root {
    --layout-pad-x: 40px;
    --section-pt:   80px;
    --section-pb:   80px;
  }

  /* Hero */
  .hero__inner  { flex-direction: column; gap: var(--s-32); }
  .hero__title  { font-size: 48px; line-height: 54px; }
  .hero__text   { flex: 0 0 auto; width: 100%; }
  .hero__desc   { flex: 0 0 auto; width: 100%; padding-top: 0; }
  .hero__photo  { height: 440px; }

  /* Parallax buffer: imágenes más pequeñas en tablet necesitan más margen
     para que el translateY no exponga el fondo del contenedor             */
  .hero__photo img { height: 140%; top: -20%; }

  /* Imagen full-bleed: versión compacta desde tablet (≤1023px). Antes el
     contenedor pasaba a 207px solo en móvil (≤767); ahora también en tablet,
     con el buffer de parallax emparejado (170%) a esa altura.            */
  .img-full-bleed { height: 207px; }
  .img-full-bleed .photo-wrap img { height: 170%; top: -35%; }

  /* ¿Qué es? */
  .checklist         { grid-template-columns: 1fr; }

  /* Pilares */
  .pilares-grid      { flex-direction: column; gap: var(--s-40); }
  .pilar__img        { aspect-ratio: 16 / 7; height: auto; }
  .section-header    { flex-direction: column; align-items: flex-start; gap: var(--s-24); }
  .section-header h2 { max-width: 100%; }
  .section-subtitle  { max-width: 100%; }

  /* Casos header */
  .casos__header     { flex-direction: column; align-items: flex-start; }
  /* El slider de casos ya no depende de breakpoint: ver reglas base
     de .casos-track / .recipe-card / .recipe-card__img-wrap. */

  /* Inscripción: la foto pasa debajo, con el mismo encuadre que en escritorio */
  .inscripcion__inner      { grid-template-columns: 1fr; }
  .inscripcion__image-wrap { aspect-ratio: 718 / 374; }

  /* Pasos */
  .paso { grid-template-columns: 80px 1fr; gap: var(--s-24); }
  .paso__number { font-size: 48px; line-height: 48px; }
  .pasos__sello { display: none; }

  /* Navbar: switch to burger at tablet */
  .nav-links       { display: none; }
  .hamburger-btn   { display: flex; }
  .nav-container   { padding: var(--s-16) var(--layout-pad-x); }
  .nav-right       { gap: var(--s-16); }
  .nav-logo img    { width: 103px; height: 20px; }
  .navbar .btn     { padding: 4px 16px 8px; font-size: var(--font-size-base); }

  /* Acordeones: pila vertical en tablet con spacing de 24px.
     align-items: stretch → en columna el eje transversal es el ancho, así que
     cada .accordion ocupa todo el ancho disponible (anula el flex-start base). */
  .accordion-group { flex-direction: column; gap: var(--s-24); align-items: stretch; }
  .accordion { flex: none; }

  /* ¿Qué es? — logos encima del titular en tablet (igual que mobile) */
  .que-es__title-row { flex-direction: column-reverse; gap: var(--s-24); }

  /* Footer */
  .footer-top .footer-inner { grid-template-columns: 1fr 1fr; padding-bottom: var(--s-48); }
  .footer-aliados { grid-column: 1 / -1; }
  .footer-bottom .footer-inner { flex-direction: column; align-items: flex-start; }

  /* Sello img-mercado: izquierda en tablet */
  .full-bleed__sello {
    width: 160px;
    height: 160px;
    top: -48px;
    left: var(--layout-pad-x);
    transform: none;
  }

  /* Side sheet: en tablet muestra bottom sheet */
  .side-sheet { width: 100%; }
}


/* ============================================================
   RESPONSIVE — MOBILE (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --layout-pad-x: 16px;
    --section-pt:   48px;
    --section-pb:   64px;
    --font-size-5xl:  36px;
    --font-size-4xl:  25px;     /* títulos de sección + emprendedores: 25px (Figma) */
    --font-size-3xl:  28px;
    --font-size-2xl:  20px;     /* paso__title: 20px (Figma) */
    --font-size-xl:   20px;
    --line-height-5xl: 42px;
    --line-height-4xl: 32px;    /* títulos de sección: 32px (Figma) */
    --line-height-2xl: 30px;    /* paso__title: 30px (Figma) */
    --line-height-xl:  28px;
  }

  /* Navbar */
  .nav-container { padding: var(--s-16); }

  /* Hero */
  .hero__content  { padding-top: var(--s-24); padding-bottom: var(--s-32); }
  .hero__inner    { flex-direction: column; gap: var(--s-24); }
  .hero__text     { flex: 0 0 auto; width: 100%; }
  .hero__desc     { flex: 0 0 auto; width: 100%; padding-top: 0; }
  .hero__photo    { height: 300px; }

  /* Parallax buffer mobile: imágenes pequeñas (300px, 207px) con viewport
     alto generan offsets de ~65px; height 170% da ~105px de margen        */
  .hero__photo img,
  .img-full-bleed .photo-wrap img { height: 170%; top: -35%; }
  /* H1: 39px/42px SemiBold (Figma) */
  .hero__title    { font-size: 39px; line-height: 42px; }
  /* Body: 16px/24px en mobile (Figma) */
  .hero__desc p   { font-size: var(--font-size-base); line-height: var(--line-height-base); }
  /* En mobile solo se muestra el CTA secundario (Figma) */
  .hero__desc .btn-primary { display: none; }

  /* Imagen full-bleed (la altura del contenedor se fija ya en ≤1023px) */
  .full-bleed__sello { width: 140px; height: 140px; top: -40px; left: var(--s-24); transform: none; }

  /* ¿Qué es? */
  .checklist { grid-template-columns: 1fr; gap: var(--s-24); }
  .que-es__aliados img { height: 50px; }
  /* Logos encima del título en mobile (column-reverse invierte el orden visual h2 / aliados) */
  .que-es__title-row { flex-direction: column-reverse; gap: var(--s-24); }
  /* Spacing titular → párrafo: 16px; párrafo → bullets: 24px */
  .que-es__header  { gap: var(--s-16); }
  .que-es__inner   { gap: var(--s-24); }
  /* Titular: xl/semibold/25 (Figma) — valor explícito para no heredar override mobile de --font-size-xl */
  .que-es__header h2 { font-size: 25px; line-height: 32px; font-weight: 600; }
  /* Párrafo intro: base/regular/16 (Figma) */
  .que-es__header p  { font-size: var(--font-size-base); line-height: var(--line-height-base); font-weight: 400; }
  /* Bullet titles: lg/semibold/20 (Figma) */
  .checklist-item__title { font-size: var(--font-size-lg); line-height: var(--line-height-lg); font-weight: 600; }
  /* Bullet text: base/regular/16 (Figma) */
  .checklist-item__desc  { font-size: var(--font-size-base); line-height: var(--line-height-base); }

  /* A quién buscamos — padding-top 48px (pisa el 104px explícito del desktop), gap título→cards 24px */
  #a-quien            { padding-top: var(--s-48); padding-bottom: 0; }
  .a-quien__inner     { gap: var(--s-24); }

  /* Acordeones mobile — gap 16px entre cards (Figma) */
  .accordion-group     { gap: var(--s-16); }
  .accordion__header   { padding: var(--s-32) var(--s-24); gap: var(--s-16); }
  .accordion__title    { font-size: var(--font-size-lg); line-height: var(--line-height-lg); }
  .accordion__cta-label { font-size: var(--font-size-xs1); line-height: 19.5px; }
  .accordion__body     { padding: 0 var(--s-24); }
  .accordion.open .accordion__body { padding-bottom: var(--s-32); }

  /* Qué ofrecemos — padding-top ya hereda --section-pt: 48px; sin padding-bottom; gap header→pilares 24px */
  #que-ofrecemos         { padding-bottom: 0; }
  .que-ofrecemos__inner  { gap: var(--s-24); }
  /* Titular: xl/semibold/25 (Figma) */
  .section-header h2     { font-size: 25px; line-height: 32px; font-weight: 600; }
  /* Párrafo: base/regular/16 (Figma) */
  .section-subtitle      { font-size: var(--font-size-base); line-height: var(--line-height-base); font-weight: 400; }
  /* Spacing titular → párrafo: 16px (pisa el 24px del bloque tablet) */
  .section-header        { gap: var(--s-16); }
  /* Pilar título: lg/bold/20 — line-height 30px en lugar de 28px (Figma) */
  .pilar__title { font-size: var(--font-size-lg); line-height: var(--line-height-lg); font-weight: 700; }
  /* Pilar párrafo: base/regular/16 (Figma) */
  .pilar__desc  { font-size: var(--font-size-base); line-height: var(--line-height-base); font-weight: 400; }

  /* Pilares — gap 32px entre pilares, imágenes cuadradas 1:1 (Figma) */
  .pilares-grid { flex-direction: column; gap: var(--s-32); }
  .pilar__img   { aspect-ratio: 1 / 1; height: auto; }
  /* Spacing interno del pilar: imagen→título 12px, título-bloque→descripción 8px (Figma) */
  .pilar__top   { gap: var(--s-12); }
  .pilar        { gap: var(--s-8); }

  /* Casos — padding-top 48px (pisa el 64px explícito), gaps y tipografía (Figma) */
  #casos              { padding-top: var(--s-48); }
  .casos__inner       { gap: var(--s-24); }           /* header → slider */
  .casos__header      { flex-direction: column; gap: var(--s-16); } /* titular → desc */
  /* Titular: xl/semibold/25 (Figma) */
  .casos__headline    { font-size: 25px; line-height: 32px; font-weight: 600; }
  /* Descripción: base/regular/16 (Figma) */
  .casos__desc p      { font-size: var(--font-size-base); line-height: var(--line-height-base); font-weight: 400; }
  /* Casos: gap más compacto en mobile (el ancho de card sale de la base) */
  .casos-track { gap: var(--s-16); }
  /* Número de card: 39px/58.5px/Black — --font-size-3xl queda en 28px en mobile, override explícito (Figma) */
  .recipe-card__num { font-size: 39px; line-height: 58.5px; }
  /* Nombre del bar: line-height explícito (Figma: 24px) */
  .recipe-card__name { line-height: var(--line-height-base); }

  /* Mapa */
  #map { height: 281px; }
  /* En mobile, cerrar side sheet — usar bottom sheet */
  .side-sheet { display: none !important; }

  /* Pasos — sin spacing bajo el titular en mobile */
  #pasos-title        { margin-bottom: 0 !important; }
  /* Sin divider encima del primer paso (bajo el titular) */
  .paso:first-of-type { border-top: none; }

  /* Pasos — layout vertical (Figma), número 39px Black, título letter-spacing 0.8px */
  .paso {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
    padding: var(--s-24) 0;
  }
  .paso__number { font-size: 39px; line-height: 58.5px; font-weight: 900; }
  .paso__title  { letter-spacing: 0.8px; }
  .pasos__sello { display: none; }

  /* Inscripción (Figma) ─────────────────────────────────────────── */
  #inscripcion               { padding-top: var(--s-40); padding-bottom: var(--s-40); }
  /* En mobile la tarjeta es golden/100 (en escritorio, neutrals/0) */
  .inscripcion__content      { padding: var(--s-32) var(--s-24); background-color: var(--golden-100); }
  .inscripcion__logo         { width: 144.5px; height: 109px; margin-bottom: var(--s-24); }
  .inscripcion__title        { font-size: var(--font-size-m); font-weight: 600; line-height: var(--line-height-m); }
  .inscripcion__desc         { font-size: var(--font-size-base); line-height: var(--line-height-base); }
  /* Foto cuadrada debajo, con el encuadre de Figma */
  .inscripcion__image-wrap     { aspect-ratio: 1 / 1; }
  .inscripcion__image-wrap img { object-position: 57% 50%; }

  /* Emprendedores (Figma) ─────────────────────────────────────────── */
  /* Padding-bottom 48px (pisa el var(--s-64) explícito del desktop) */
  #emprendedores              { padding-bottom: var(--s-48); }
  /* Párrafos: base/regular/16 (Figma; desktop usaba --font-size-lg/20px) */
  .emprendedores__desc p      { font-size: var(--font-size-base); line-height: var(--line-height-base); }
  /* Gap entre los dos párrafos del desc: 16px (Figma; desktop tenía 8px) */
  .emprendedores__desc p + p  { margin-top: var(--s-16); }
  /* Formulario: input y botón apilados y a ancho completo */
  .emprendedores__form-row { flex-direction: column; }
  #emprendedores .btn-secondary { width: 100%; justify-content: center; }

  /* Footer Top (Figma) ─────────────────────────────────────────── */
  .footer-top .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--s-24);          /* brand→nav: 24px */
    padding-top: var(--s-40);  /* era 48px */
    padding-bottom: var(--s-24); /* era 48px */
  }
  /* Aliados: 40px desde la nav (24px gap + 16px extra margin) */
  .footer-aliados        { margin-top: var(--s-16); }
  /* Brand: gap 20px entre logo y descripción */
  .footer-brand          { gap: 20px; }
  /* Descripción: xs-1/regular/13 (Figma) */
  .footer-brand p        { font-size: var(--font-size-xs1); line-height: 19.5px; font-weight: 400; }
  /* Nav links: base/regular/16 con line-height explícito */
  .footer-nav a          { font-size: var(--font-size-base); line-height: var(--line-height-base); }

  /* Footer Bottom (Figma) ─────────────────────────────────────────── */
  .footer-bottom .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-40);          /* legal→copyright: 40px */
    padding-top: var(--s-32);
    padding-bottom: var(--s-48); /* era 32px */
  }
  /* Orden: legal links primero, copyright debajo (HTML inverso) */
  .footer-legal          { order: 1; flex-direction: column; gap: var(--s-24); }
  .footer-copy           { order: 2; }
  /* Textos: base/regular/16 / neutrals-50 (era sm/14px / neutrals-200) */
  .footer-copy           { font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--neutrals-50); }
  .footer-legal a        { font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--neutrals-50); }
}