/* variables.css · Landing Machine · base layer
   Tokens reemplazados por el builder al generar. No editar manualmente.
   ──────────────────────────────────────────────────────────────────── */

:root {

  /* ── Paleta ── */
  --color-fondo:        #f7f5f3;
  --color-fondo-rgb:    247,245,243;      /* sin rgb(), solo "245,234,208" */
  --color-texto:        #302317;
  --color-texto-rgb:    48,35,23;
  --color-texto-2:      #262321;        /* texto secundario/cuerpo (independiente de acento-2) */
  --color-texto-3:      #807648;        /* texto de eyebrow (independiente de acento) */
  --color-subtitulo:    #806348;      /* color propio de .subtitulo, independiente de texto-3 */
  --color-acento:       #cc701e;
  --color-acento-2:     #a5a923;
  --color-acento-3:     #d53444;
  --color-superficie:   #ede8e3;
  --color-borde:        #dacbbe;
  --color-borde-rgb:    218,203,190;
  --color-verde:        #7A9E6A;          /* para botón WA y acentos positivos */
  --color-contraste:    #000000;       /* texto (blanco/negro) que mejor lee sobre --color-acento */
  --color-contraste-2:  #000000;     /* ídem, sobre --color-acento-2 */
  --color-contraste-3:  #ffffff;     /* ídem, sobre --color-acento-3 */

  /* ── Paleta Tienda (mod-tienda) ──
     Independiente de los acentos generales pero con default tomado de
     ahí (acento-2/3/1) — editable aparte solo si el proyecto lo pisa en
     Identidad → Paleta Tienda. */
  --color-tienda-activo:     #a5a923;     /* categoría activa (cat-grid/sidebar) */
  --color-tienda-destacado:  #d53444;  /* badge cantidad, selector en-carrito, FAB "Ver carrito" */
  --color-tienda-cerrar:     #cc701e;     /* fondo del botón cerrar del overlay */

  /* ── Tipografía ── */
  --fuente-display:     'Fraunces', serif;
  --fuente-cuerpo:      'Outfit', sans-serif;
  --fuente-subtitulo:   'Outfit', sans-serif;   /* alias a fuente-display o fuente-cuerpo, elegible en Apariencia */

  /* Ajuste global de tamaño (Apariencia → selector +/- junto a cada fuente).
     Se suma con calc() a cada título/cuerpo del sitio — no reemplaza el
     clamp() fluido de cada Hero, lo desplaza entero. Guardado por familia
     tipográfica, no es un valor fijo. */
  --ajuste-titulo:      0rem;
  --ajuste-cuerpo:      0.2rem;
  --ajuste-eyebrow:         0rem;
  --ajuste-espacio-eyebrow: -1rem;
  --ajuste-subtitulo:       0.3rem;

  /* Mayúsculas/Itálica por rol — editable en Identidad → Tipografía */
  --eyebrow-transform:      uppercase;    /* none | uppercase */
  --eyebrow-style:          normal;        /* normal | italic */
  --titulo-transform:       none;
  --titulo-style:           italic;
  --subtitulo-transform:    uppercase;
  --subtitulo-style:        normal;
  --cuerpo-transform:       none;
  --cuerpo-style:           normal;

  /* ── Escala tipográfica (fija, no token) ── */
  --texto-xs:   0.6875rem;   /* 11px */
  --texto-sm:   0.8125rem;   /* 13px */
  --texto-md:   1.0625rem;   /* 17px */
  --texto-lg:   1.25rem;     /* 20px */
  --texto-xl:   1.75rem;     /* 28px */
  --texto-2xl:  2.5rem;      /* 40px */

  /* ── Espaciado (fijo, no token) ── */
  --espacio-xs:   8px;
  --espacio-sm:   16px;
  --espacio-md:   24px;
  --espacio-lg:   48px;
  --espacio-xl:   80px;
  --espacio-2xl:  120px;

  /* ── Secciones ── */
  --sec-v:  52px;   /* padding vertical de secciones */
  --sec-h:  24px;   /* padding horizontal mobile */

  /* ── Layout: contenedor de contenido ──
     Ancho máximo y padding lateral estándar para nav, secciones y footer.
     Fuente única: cambiar acá afecta todo el sitio, módulos actuales y futuros. */
  --ancho-contenido: 1100px;
  --contenedor-pad:  var(--sec-h);

  /* ── Componentes ── */
  --radio:       2px;    /* e.g. "2px", "8px", "0px" */
  --transicion:  0.25s ease;
  --sombra-box:  0 8px 40px rgba(var(--color-texto-rgb), 0.10);
  --nav-h:       80px;     /* e.g. "80px" */

  /* ── Texturas SVG (inyectadas por base/texturas.js en runtime) ── */
  /* --t6-h, --t6-v, --t8-h, --t8-v, --t2 se definen por JS */

}

/* --contenedor-pad por breakpoint — único lugar donde se define el padding
   lateral estándar de tablet y desktop para cualquier módulo. */
@media (min-width: 768px)  { :root { --contenedor-pad: var(--espacio-lg);  } }
@media (min-width: 1024px) { :root { --contenedor-pad: var(--espacio-2xl); } }


/* reset.css · Landing Machine · base layer */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:focus:not(:focus-visible) { outline: none; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

body {
  background:    var(--color-fondo);
  color:         var(--color-texto);
  font-family:   var(--fuente-cuerpo);
  font-weight:   300;
  font-size:     calc(var(--texto-md) + var(--ajuste-cuerpo, 0rem));
  line-height:   1.7;
  overflow-x:    hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Carga suave */
html       { opacity: 0; }
html.listo { opacity: 1; transition: opacity 0.25s ease; }

img    { display: block; max-width: 100%; height: auto; object-fit: cover; }
a      { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; }
input  { font-family: inherit; font-size: inherit; }

/* Scrollbar oculta — navegación por ruedita/teclado/touch */
html {
  scrollbar-width: none;
}
html::-webkit-scrollbar {
  display: none;
}

/* Contenedor estándar — usar en todo módulo (nav, secciones, footer) para que
   su ancho quede alineado con el resto del sitio. Aplicar .lm-contenedor-pad
   al elemento externo (fondo/full-bleed) y .lm-contenedor al interno
   (contenido). Cambiar ancho o padding se hace en una sola línea en
   base/variables.css — nunca hardcodear estos valores en un módulo. */
.lm-contenedor-pad { padding-inline: var(--contenedor-pad); }
.lm-contenedor      { max-width: var(--ancho-contenido); margin-inline: auto; }


/* tipografia.css · Landing Machine · base layer */

h1, h2, h3 {
  font-family:    var(--fuente-display);
  font-weight:    500;
  font-style:     var(--titulo-style, italic);
  text-transform: var(--titulo-transform, none);
  line-height:    1.05;
  color:          inherit;
}

/* Etiqueta de sección: "El espacio", "Las clases", etc. */
.seccion-label {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-eyebrow, 0rem));
  font-weight:    500;
  letter-spacing: 0.28em;
  text-transform: var(--eyebrow-transform, uppercase);
  font-style:     var(--eyebrow-style, normal);
  color:          var(--color-texto-3);
  opacity:        0.60;
  display:        flex;
  align-items:    center;
  gap:            var(--espacio-sm);
  margin-bottom:  calc(var(--espacio-md) + var(--ajuste-espacio-eyebrow, 0rem));
}

.seccion-label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--color-borde);
}

.seccion__titulo {
  font-size: calc(var(--texto-2xl) - 2px + var(--ajuste-titulo, 0rem));
}

.seccion__intro {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:    1.80;
  color:          var(--color-texto-2);
  margin-top:     var(--espacio-sm);
  text-transform: var(--cuerpo-transform, none);
  font-style:     var(--cuerpo-style, normal);
}

.eyebrow {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-eyebrow, 0rem));
  font-weight:    500;
  letter-spacing: 0.28em;
  text-transform: var(--eyebrow-transform, uppercase);
  font-style:     var(--eyebrow-style, normal);
  display:        block;
}

/* Subtítulo: tipo propio (Apariencia → Subtítulo), reusable por cualquier
   módulo. Fuente/tamaño/mayúsculas/color independientes de título, cuerpo
   y eyebrow — agregar esta clase alcanza para heredar los 4 controles. */
.subtitulo {
  font-family:    var(--fuente-subtitulo, var(--fuente-display));
  font-style:     var(--subtitulo-style, italic);
  font-weight:    400;
  font-size:      calc(var(--texto-lg) + var(--ajuste-subtitulo, 0rem));
  line-height:    1.3;
  text-transform: var(--subtitulo-transform, none);
  color:          var(--color-subtitulo);
}

/* Secciones */
.seccion { padding: 32px var(--sec-h) var(--sec-v); }

@media (min-width: 768px) {
  .seccion { min-height: 100vh; min-height: 100svh; }
}


/* botones.css · Landing Machine · base layer
   Todos los estilos de botones van acá. Los módulos NO definen botones propios. */

.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--espacio-xs);
  font-family:     var(--fuente-cuerpo);
  font-size:       calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:     500;
  letter-spacing:  0.16em;
  text-transform:  uppercase;
  padding:         13px 26px;
  border-radius:   var(--radio);
  transition:      opacity var(--transicion), background var(--transicion), border-color var(--transicion);
  white-space:     nowrap;
  line-height:     1;
  cursor:          pointer;
  border:          1px solid transparent;
}

/* Sólido — color acento */
.btn--primario {
  background: var(--color-acento);
  color:      var(--color-contraste);
}
.btn--primario:hover { opacity: 0.85; }

/* Ghost — sobre fotos oscuras */
.btn--ghost {
  font-family:  var(--fuente-display);
  font-style:   italic;
  font-weight:  600;
  font-size:    calc(1.05rem + var(--ajuste-cuerpo, 0rem));
  letter-spacing: 0.01em;
  text-transform: none;
  padding:      11px 28px;
  background:   transparent;
  color:        #fff;
  border-color: rgba(255,255,255,0.45);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,0.80);
  background:   rgba(255,255,255,0.08);
  opacity:      1;
}

/* Outline — sobre fondos claros */
.btn--outline {
  background:  transparent;
  color:       var(--color-acento);
  border-color: var(--color-acento);
}
.btn--outline:hover { background: var(--color-acento); color: var(--color-contraste); opacity: 1; }

/* Enviar formulario */
.btn--enviar {
  width:      100%;
  background: var(--color-acento);
  color:      var(--color-contraste);
  padding:    15px 24px;
  font-size:  calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  letter-spacing: 0.10em;
}
.btn--enviar:hover   { opacity: 0.85; }
.btn--enviar:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}


/* Modal genérico — usado por privacidad (form y footer) */

.privacidad-trigger {
  font-size:             calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:                 var(--color-acento);
  text-decoration:       underline;
  text-underline-offset: 2px;
  cursor:                pointer;
}

.modal {
  position:        fixed;
  inset:           0;
  z-index:         500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--espacio-sm);
  visibility:      hidden;
  opacity:         0;
  transition:      opacity 0.22s ease, visibility 0s linear 0.22s;
}
.modal--visible {
  visibility: visible;
  opacity:    1;
  transition: opacity 0.22s ease;
}

.modal__overlay {
  position:                    absolute;
  inset:                       0;
  background:                  rgba(0,0,0,0.55);
  backdrop-filter:             blur(4px);
  -webkit-backdrop-filter:     blur(4px);
}

.modal__card {
  position:       relative;
  z-index:        1;
  background:     var(--color-fondo);
  width:          100%;
  max-width:      640px;
  max-height:     84vh;
  display:        flex;
  flex-direction: column;
  border-radius:  calc(var(--radio) + 4px);
  overflow:       hidden;
  box-shadow:     0 24px 64px rgba(0,0,0,0.22);
  transform:      translateY(12px);
  transition:     transform 0.22s ease;
}
.modal--visible .modal__card { transform: translateY(0); }

.modal__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--espacio-md);
  padding:         var(--espacio-md) var(--espacio-md) var(--espacio-sm);
  border-bottom:   1px solid rgba(var(--color-borde-rgb), 0.10);
  flex-shrink:     0;
  background:      var(--color-fondo);
}

.modal__titulo {
  font-family: var(--fuente-display);
  font-size:   calc(var(--texto-xl) + var(--ajuste-titulo, 0rem));
  font-weight: 500;
  font-style:  italic;
  color:       var(--color-acento);
}

.modal__cerrar {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       32px;
  height:      32px;
  flex-shrink: 0;
  color:       var(--color-texto);
  opacity:     0.50;
  transition:  opacity var(--transicion);
}
.modal__cerrar:hover { opacity: 1; }

.modal__cuerpo {
  overflow-y:                    auto;
  padding:                       var(--espacio-md);
  scrollbar-width:               none;
  -webkit-overflow-scrolling:    touch;
}
.modal__cuerpo::-webkit-scrollbar { display: none; }

.modal__intro {
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:    1.75;
  color:          var(--color-texto);
  margin-bottom:  var(--espacio-md);
  padding-bottom: var(--espacio-sm);
  border-bottom:  1px solid rgba(var(--color-borde-rgb), 0.08);
}

.modal__seccion            { margin-bottom: var(--espacio-sm); }
.modal__seccion:last-child { margin-bottom: 0; }

.modal__seccion-titulo {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-acento);
  margin-bottom:  6px;
}

.modal__texto {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.75;
  color:       var(--color-texto);
}

.modal__lista {
  font-size:    calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:  1.75;
  color:        var(--color-texto);
  margin-top:   4px;
  padding-left: var(--espacio-sm);
  list-style:   disc;
}

.modal__campo-vacio { font-style: italic; opacity: 0.45; }

.modal__pie {
  font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:       var(--color-texto);
  opacity:     0.55;
  margin-top:  var(--espacio-md);
  padding-top: var(--espacio-sm);
  border-top:  1px solid rgba(var(--color-borde-rgb), 0.08);
  line-height: 1.6;
}
.modal__pie a { color: var(--color-acento); }


/* mod-formulario · styles-base.css
   Estilos compartidos por todos los layouts de formulario.
   El Generator los incluye una sola vez cuando hay al menos un mod-formulario. */

/* ── Campos ── */
.lm-honeypot { display: none !important; }

.lm-campo-wrap { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--espacio-sm); }

.lm-campo-label {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:    500;
  letter-spacing: 0.04em;
  color:          var(--color-texto-2);
}

.lm-req { color: var(--color-acento); font-weight: 400; }

.lm-check-label {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  cursor:      pointer;
}

.lm-campo,
.lm-select,
.lm-textarea {
  font-family:   var(--fuente-cuerpo);
  font-size:     calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  padding:       9px var(--espacio-sm);
  border:        1px solid rgba(var(--color-borde-rgb), 0.38);
  border-radius: var(--radio);
  background:    rgba(var(--color-fondo-rgb), 0.60);
  color:         var(--color-texto);
  transition:    border-color var(--transicion), background var(--transicion);
  width:         100%;
}

.lm-campo:focus,
.lm-select:focus,
.lm-textarea:focus {
  outline:      none;
  border-color: var(--color-acento);
  background:   rgba(var(--color-fondo-rgb), 0.90);
}

.lm-campo--error,
.lm-campo--error:focus { border-color: #c0392b; }

.lm-textarea { resize: vertical; min-height: 100px; }

.lm-select { display: none; }

/* ── Campo de fecha segmentado (día/mes/año) — ver tipo 'fecha' en
   campos.php. Barras fijas entre segmentos, avance automático por JS. ── */
.lm-fecha {
  display:     flex;
  align-items: center;
  gap:         6px;
}
.lm-fecha__seg {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  text-align:     center;
  padding:        12px 4px;
  border:         1px solid rgba(var(--color-borde-rgb), 0.38);
  border-radius:  var(--radio);
  background:     rgba(var(--color-fondo-rgb), 0.60);
  color:          var(--color-texto);
  transition:     border-color var(--transicion), background var(--transicion);
}
.lm-fecha__seg[data-seg="dia"],
.lm-fecha__seg[data-seg="mes"] { width: 44px; flex: 0 0 44px; }
.lm-fecha__seg[data-seg="ano"] { width: 68px; flex: 0 0 68px; }
.lm-fecha__seg:focus {
  outline:      none;
  border-color: var(--color-acento);
  background:   rgba(var(--color-fondo-rgb), 0.90);
}
.lm-fecha__barra {
  font-size: calc(var(--texto-md) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto-2);
  opacity:   0.5;
}
.lm-fecha--error .lm-fecha__seg { border-color: #c0392b; }

/* ── Select custom ── */
.lm-csel {
  position:   relative;
  outline:    none;
  cursor:     pointer;
  user-select: none;
}

.lm-csel__trigger {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         9px var(--espacio-sm);
  border:          1px solid rgba(var(--color-borde-rgb), 0.22);
  border-radius:   var(--radio);
  background:      rgba(var(--color-fondo-rgb), 0.60);
  color:           var(--color-texto);
  font-family:     var(--fuente-cuerpo);
  font-size:       calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  transition:      border-color var(--transicion), background var(--transicion);
}

.lm-csel:focus .lm-csel__trigger,
.lm-csel--abierto .lm-csel__trigger {
  border-color: var(--color-acento);
  background:   rgba(var(--color-fondo-rgb), 0.90);
}

/* Flecha CSS — sin elemento extra */
.lm-csel__trigger::after {
  content:       '';
  width:         0;
  height:        0;
  border-left:   4px solid transparent;
  border-right:  4px solid transparent;
  border-top:    5px solid currentColor;
  opacity:       0.5;
  flex-shrink:   0;
  margin-left:   8px;
  transition:    transform var(--transicion);
}

.lm-csel--abierto .lm-csel__trigger::after {
  transform: rotate(180deg);
}

/* Error: se aplica cuando el select oculto hermano tiene --error */
.lm-campo--error + .lm-csel .lm-csel__trigger { border-color: #c0392b; }

.lm-csel__lista {
  display:       none;
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  background:    var(--color-fondo);
  border:        1px solid rgba(var(--color-borde-rgb), 0.25);
  border-radius: var(--radio);
  box-shadow:    0 8px 24px rgba(0,0,0,0.10);
  z-index:       200;
  max-height:    240px;
  overflow-y:    auto;
  padding:       4px 0;
  list-style:    none;
  margin:        0;
}

.lm-csel--abierto .lm-csel__lista { display: block; }

.lm-csel__opt {
  padding:     10px var(--espacio-sm);
  font-family: var(--fuente-cuerpo);
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:       var(--color-texto);
  transition:  background var(--transicion);
}

.lm-csel__opt:hover             { background: rgba(var(--color-borde-rgb), 0.10); }
.lm-csel__opt--placeholder      { color: rgba(var(--color-texto-rgb, 0,0,0), 0.40); }
.lm-csel__opt--sel              { color: var(--color-acento); font-weight: 500; }
.lm-csel__valor--placeholder    { color: rgba(var(--color-texto-rgb, 0,0,0), 0.40); }

/* ── Errores inline ── */
.lm-error {
  font-size:  calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:      #c0392b;
  margin-top: 4px;
  display:    none;
}
.lm-error--visible { display: block; }

/* ── Privacidad ── */
.lm-privacidad {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-sm);
  flex-wrap:   wrap;
}

.lm-privacidad__label {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  cursor:      pointer;
}

.lm-check { width: auto; }


/* ── Fila privacidad dentro del form ── */
.lm-form-privacidad {
  display:     flex;
  align-items: center;
  flex-wrap:   nowrap;
  gap:         6px;
  margin-bottom: 6px;
}
.lm-form-privacidad__label {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  cursor:      pointer;
  white-space: nowrap;
}

/* ── Swap form / gracias ── */
.lm-form--oculto { display: none; }

.lm-form__gracias {
  display:    none;
  text-align: center;
  padding:    var(--espacio-xl) var(--espacio-md);
}
.lm-form__gracias--visible { display: block; }

.lm-gracias__titulo {
  font-family:   var(--fuente-display);
  font-style:    italic;
  font-size:     calc(var(--texto-xl) + var(--ajuste-titulo, 0rem));
  color:         var(--color-texto);
  margin-bottom: var(--espacio-sm);
}

.lm-gracias__texto {
  font-size: calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto-2);
}


/* nav-01 · Nav fija superior · hamburguesa izquierda mobile */

body { padding-top: var(--nav-h); }

nav#nav {
  position:         fixed;
  top: 0; left: 0; right: 0;
  z-index:          100;
  height:           var(--nav-h);
  background-color: rgba(var(--nav-fondo-rgb, var(--color-fondo-rgb)), var(--nav-fondo-opacidad, 0.94));
  background-image: var(--t6-h), var(--t6-v);
  backdrop-filter:        blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.07);
}

.nav__inner {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Mobile: padding propio, más angosto que el estándar .lm-contenedor-pad
   (sin tocar — layout mobile ya validado) */
@media (max-width: 767px) {
  nav#nav { padding-inline: 14px; }
}

.nav__logo {
  display:     flex;
  align-items: center;
  height:      100%;
  flex:        1;
  padding-left: var(--espacio-xs);
}

.logo-img {
  height: 44px;
  width:  auto;
  display: block;
}

/* Links: ocultos en mobile, visibles desde tablet */
.nav__links { display: none; }

.nav__social {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.nav__social .footer__icon-link { width: 30px; height: 30px; }

/* Hamburguesa: va primero (izquierda) en mobile */
.nav__toggle {
  width:           40px;
  height:          40px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  flex-shrink:     0;
  order:           -1;
}

.nav__toggle-icon { display: block; color: var(--color-texto); }

.nav__toggle .bar {
  transition:      transform var(--transicion), opacity var(--transicion);
  transform-box:   fill-box;
  transform-origin: center;
}

.nav--abierto .nav__toggle .bar--1 { transform: translateY(6px)  rotate(45deg); }
.nav--abierto .nav__toggle .bar--2 { opacity: 0; }
.nav--abierto .nav__toggle .bar--3 { transform: translateY(-6px) rotate(-45deg); }

/* Menú mobile: panel desde esquina superior izquierda */
.nav__menu-mobile {
  position:         fixed;
  top:              var(--nav-h);
  left:             14px;
  width:            190px;
  background-color: rgba(var(--nav-fondo-rgb, var(--color-fondo-rgb)), var(--nav-fondo-opacidad, 0.98));
  backdrop-filter:        blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right:  1px solid rgba(var(--color-borde-rgb), 0.07);
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.07);
  border-radius: 0 0 var(--radio) var(--radio);
  padding:        var(--espacio-sm) var(--espacio-md) var(--espacio-md);
  flex-direction: column;
  z-index:        99;
  display:        flex;
  visibility:     hidden;
  opacity:        0;
  transform:      translateY(-8px);
  transition:     opacity var(--transicion), transform var(--transicion), visibility 0s linear 0.25s;
  pointer-events: none;
}

.nav__menu-mobile a {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.2;
  font-weight: 400;
  text-align:  center;
  padding:     10px 0;
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.08);
  transition:  opacity var(--transicion), color var(--transicion);
}

.nav__menu-mobile a.activo {
  color:       var(--color-acento);
  font-weight: 600;
}

.nav__menu-mobile a:last-child { border-bottom: none; }
.nav__menu-mobile a:hover      { opacity: 0.65; }

/* Link destacado (ej. Tienda) — misma mancha de acuarela que en desktop.
   display:inline-block para que el blob abrace el texto, no todo el ancho
   del panel (que es angosto, 220px, y quedaría un rectángulo pegado). */
.nav__menu-mobile a.nav__link--destacado {
  display:     inline-block;
  position:    relative;
  font-weight: 700;
  border-bottom: none;
}
.nav__menu-mobile a.nav__link--destacado::before {
  content:       '';
  position:      absolute;
  inset:         -2px -10px;
  z-index:       -1;
  background:    radial-gradient(ellipse at 38% 42%,
                    color-mix(in srgb, var(--color-acento) 55%, transparent) 0%,
                    color-mix(in srgb, var(--color-acento) 28%, transparent) 45%,
                    transparent 72%);
  border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
  filter:        blur(1px);
  transform:     rotate(-3deg);
}

.nav--abierto   .nav__menu-mobile,
.nav--cerrando  .nav__menu-mobile {
  visibility:     visible;
  pointer-events: auto;
  transition:     opacity var(--transicion), transform var(--transicion);
}

.nav--abierto .nav__menu-mobile {
  opacity:   1;
  transform: translateY(0);
}

.nav--cerrando .nav__menu-mobile {
  opacity:   0;
  transform: translateY(-8px);
}

/* Íconos sociales (compartidos con footer) */
.footer__icon-link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  transition:      opacity var(--transicion);
  color:           var(--color-texto);
}

.footer__icon-link:hover { opacity: 0.65; }

.footer__icon-share { margin-left: -4px; }

/* Modo "con color" (toggle desde el builder) — cada red usa su color de marca
   en vez de heredar currentColor. Compartir queda siempre neutro. */
.footer__icon-link--color.footer__icon-wa       { color: #25D366; }
.footer__icon-link--color.footer__icon-ig       { color: #E1306C; }
.footer__icon-link--color.footer__icon-fb       { color: #1877F2; }
.footer__icon-link--color.footer__icon-tiktok   { color: #000000; }
.footer__icon-link--color.footer__icon-yt       { color: #FF0000; }
.footer__icon-link--color.footer__icon-linkedin { color: #0A66C2; }

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .nav__toggle      { display: none; }
  .nav__menu-mobile { display: none !important; }

  .nav__logo { flex: none; }

  .nav__links {
    display:     flex;
    align-items: center;
    gap:         var(--espacio-md);
    flex:        1;
    justify-content: center;
  }

  .nav__links a {
    font-size:   calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:     4px 0;
    transition:  opacity var(--transicion);
    position:    relative;
  }

  .nav__links a::after {
    content:    '';
    position:   absolute;
    bottom:     -2px;
    left:       0;
    width:      0;
    height:     1px;
    background: var(--color-acento);
    transition: width var(--transicion);
  }

  .nav__links a:hover::after,
  .nav__links a.activo::after { width: 100%; }
  .nav__links a:hover         { opacity: 0.75; }
  .nav__links a.activo        { color: var(--color-acento); opacity: 1; }

  /* Link destacado (ej. Tienda) — mancha de acuarela en vez del subrayado */
  .nav__links a.nav__link--destacado {
    font-weight: 700;
    padding:     5px 14px;
  }
  .nav__links a.nav__link--destacado::before {
    content:       '';
    position:      absolute;
    inset:         -5px -8px;
    z-index:       -1;
    background:    radial-gradient(ellipse at 38% 42%,
                      color-mix(in srgb, var(--color-acento) 55%, transparent) 0%,
                      color-mix(in srgb, var(--color-acento) 28%, transparent) 45%,
                      transparent 72%);
    border-radius: 60% 40% 55% 45% / 45% 60% 40% 55%;
    filter:        blur(1px);
    transform:     rotate(-3deg);
  }
  .nav__links a.nav__link--destacado::after { display: none; }
  .nav__links a.nav__link--destacado.activo { color: var(--color-texto); }
}

/* ── Desktop (1024px) ── */
@media (min-width: 1024px) {
  .logo-img { height: 50px; }
}


/* separador · sep-01 — carrusel de fotos continuo, edge-to-edge en
   cualquier breakpoint (sin padding lateral, toca los bordes de pantalla,
   a diferencia del resto de los módulos que usan --contenedor-pad).
   Alto fijo (--separador-alto, inline por PHP); cada foto se ajusta a ese
   alto (height:100%) y el ancho sale solo de su relación de aspecto
   (width:auto, sin recorte). Auto-scroll + loop infinito + drag manual,
   ver script.js. */

.separador {
  overflow: hidden;
}
.separador--claro      { background-color: var(--color-fondo); }
.separador--superficie { background-color: var(--color-superficie); }
.separador--oscuro     { background-color: var(--color-texto); }

.separador__encabezado {
  text-align:     center;
  padding-inline: var(--contenedor-pad);
  margin-bottom:  var(--espacio-md);
}
.separador__eyebrow { margin-bottom: 4px; }
.separador__titulo  { font-size: calc(clamp(1.5rem, 4vw, 2.25rem) + var(--ajuste-titulo, 0rem)); }
.separador--oscuro .separador__titulo,
.separador--oscuro .separador__eyebrow { color: var(--color-fondo); }

.separador__carrusel {
  position:     relative;
  width:        100%;
  height:       var(--separador-alto, 40vh);
  overflow:     hidden;
  cursor:       grab;
  touch-action: pan-y; /* deja el scroll vertical de la página; el horizontal lo maneja el JS */
}
.separador__carrusel:active { cursor: grabbing; }

.separador__track {
  display:     flex;
  align-items: stretch;
  height:      100%;
  width:       max-content;
  will-change: transform;
}

.separador__foto {
  height:            100%;
  width:             auto;
  flex-shrink:       0;
  display:           block;
  -webkit-user-drag: none;
  user-select:       none;
  pointer-events:    none; /* el drag lo captura .separador__carrusel entero */
}


/* sec-01 · Texto + imagen 2 columnas */

.sec-01 { padding-block: var(--sec-v); padding-inline: var(--contenedor-pad); }

.sec-01.con-textura { background-image: var(--t6-h), var(--t6-v); }

/* Fondos */
.sec-01--claro      { background-color: var(--color-fondo); }
.sec-01--superficie { background-color: var(--color-superficie); }
.sec-01--oscuro     { background-color: var(--color-texto); color: var(--color-fondo); }
.sec-01--oscuro .seccion__titulo,
.sec-01--oscuro .seccion-label { color: var(--color-fondo); }
.sec-01--oscuro .seccion__intro { color: rgba(var(--color-fondo-rgb), 0.75); }

.sec-01__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--espacio-lg);
  max-width:      var(--ancho-contenido);
  margin:         0 auto;
}

/* Mobile: texto arriba, imagen abajo */
.sec-01__col-texto { order: 1; }
.sec-01__col-media { order: 2; }

.sec-01__foto {
  width:         100%;
  aspect-ratio:  4 / 3;
  border-radius: calc(var(--radio) + 2px);
}

/* Carrusel opcional — mismo tamaño que la foto única, pero con capas
   apiladas que se cruzan en fade. Orientación al revés que en tienda:
   mobile horizontal (ocupa menos alto), desktop vertical (va al lado del texto). */
.sec-01__carrusel {
  position:      relative;
  width:         100%;
  aspect-ratio:  4 / 3;
  border-radius: calc(var(--radio) + 2px);
  overflow:      hidden;
}

.sec-01__carrusel .sec-01__foto {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  aspect-ratio:  auto;
  object-fit:    cover;
  opacity:       0;
  border-radius: 0;
  transition:    opacity 1.2s ease;
}

.sec-01__carrusel .sec-01__foto--activo  { opacity: 1; }
.sec-01__carrusel .sec-01__foto--desktop { display: none; }

/* Si el proyecto cargó fotos solo para desktop, en mobile la columna entera
   desaparece (mobile-first: oculta por default acá abajo) — así no queda
   una caja vacía con aspect-ratio reservando alto de más. Se reactiva en
   el breakpoint 1024px (mismo corte del swap mobile→desktop de abajo). */
.sec-01__col-media--sin-mobile { display: none; }

.sec-01__extras {
  margin-top: var(--espacio-md);
  display:    flex;
  flex-direction: column;
  gap:        var(--espacio-xs);
}

.sec-01__extra {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-sm);
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:       var(--color-texto-2);
}

.sec-01__extra-icono { flex-shrink: 0; }

.sec-01__cta { margin-top: var(--espacio-lg); }

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .sec-01 { padding-block: var(--espacio-xl); }
  .sec-01__foto,
  .sec-01__carrusel { aspect-ratio: 16 / 10; }
}

/* ── Desktop (1024px): lado a lado ── */
@media (min-width: 1024px) {
  .sec-01__inner {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           start;
    gap:                   var(--espacio-2xl);
  }

  /* Texto siempre col 1, imagen col 2 */
  .sec-01__col-texto { order: 1; }
  .sec-01__col-media { order: 2; }

  /* Invertido: imagen izquierda */
  .sec-01--invertido .sec-01__col-texto { order: 2; }
  .sec-01--invertido .sec-01__col-media { order: 1; }

  .sec-01__foto,
  .sec-01__carrusel {
    aspect-ratio:  3 / 4;
    max-height:    560px;
    width:         100%;
  }

  .sec-01__carrusel .sec-01__foto--mobile  { display: none; }
  .sec-01__carrusel .sec-01__foto--desktop { display: block; }

  .sec-01__col-media--sin-mobile  { display: block; }
  .sec-01__col-media--sin-desktop { display: none; }
}

/* ── Wide (1440px) ── */
@media (min-width: 1440px) {
  .sec-01__inner { grid-template-columns: 5fr 4fr; }
  .sec-01--invertido .sec-01__inner { grid-template-columns: 4fr 5fr; }
}


/* mod-divisor / div-01 · Cinta orgánica
   La sección no ocupa alto (height: 0) — su borde superior es la costura
   real entre el módulo de arriba y el de abajo. La imagen se centra
   verticalmente sobre ese punto (translateY -50%) y --divisor-ajuste (var
   inline desde template.php, en % del alto de la imagen) corrige ese
   centro a mano para imágenes no simétricas arriba/abajo. Mobile-first:
   por ahora solo se validó a tamaño celular, ver nota en template.php. */

.divisor {
  position: relative;
  height:   0;
}

.divisor__media {
  position:      absolute;
  top:           0;
  left:          50%;
  transform:     translate(-50%, calc(-50% + var(--divisor-ajuste, 0%)));
  width:         100%;
  pointer-events: none;
  z-index:       2;
}

.divisor__media img,
.divisor__media svg {
  display: block;
  width:   100%;
  height:  auto;
}

/* El degradé entre --divisor-color-tope y --divisor-color-base (ambas
   var() a un rol de la paleta, ver template.php) ya no se resuelve acá:
   cada <path> del SVG inline trae su propio fill calculado en PHP
   (lmDivisorRecolorSvg en template.php), porque la cantidad de capas
   varía según el archivo subido, no es siempre 5. */


/* form-04 · Inscripción con pago recurrente (wizard Niño/Adulto + Asaas)
   Específico de Balafon por ahora — ver comentario en template.php.
   El shell del modal (.modal/.modal__overlay/.modal__card) viene de
   base/modal.css, acá solo el contenido propio del wizard. */

.form-04 {
  padding-block:  var(--sec-v);
  padding-inline: var(--contenedor-pad);
}

.form-04__inner {
  max-width: var(--ancho-contenido);
  margin:    0 auto;
  text-align: center;
}

.form-04__eyebrow  { margin-bottom: calc(var(--espacio-md) + var(--ajuste-espacio-eyebrow, 0rem)); }
.form-04__titulo   { font-size: calc(clamp(2rem, 6vw, 3.5rem) + var(--ajuste-titulo, 0rem)); margin-bottom: var(--espacio-sm); }
.form-04__intro    { font-size: calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem)); line-height: 1.7; color: var(--color-texto-2); max-width: 640px; margin: 0 auto; }
.form-04__intro + .form-04__intro { margin-top: var(--espacio-sm); }

/* ── Precios/condiciones — lista de texto plano, en tono con
   .form-04__intro (mismo tamaño/color base). Sin cajas, sin grillas de
   alineación: cada fila es simplemente párrafos apilados, así se
   centran solos sin trucos de layout. Mensalidade es la única fila con
   énfasis (subtítulo + valor en negrita) por ser el dato principal;
   el resto va corrido, sin resaltar nada. Las notas van pegadas
   (2px) a la línea que aclaran — el aire normal (--espacio-sm) queda
   reservado para separar una fila de la siguiente, no para las notas.
   Layout de desktop sin definir todavía — queda igual hasta que se
   decida aparte. ── */
.form-04__precios {
  max-width:  480px;
  margin:     var(--espacio-md) auto 0;
  padding:    var(--espacio-sm) 0;
  border-top:    1px solid rgba(var(--color-borde-rgb), 0.30);
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.30);
}

/* Divisor entre filas — cada fila es dueña de su propio padding + el borde
   de abajo (en vez de margin entre una fila y la siguiente), así un fondo
   de color aplicado a una fila (ver --verde) llega a tocar las dos líneas
   que la encierran, arriba y abajo, sin hueco. Aire reducido (--espacio-xs)
   respecto a la versión anterior. */
.form-04__precios-fila {
  padding-block: var(--espacio-xs);
}
.form-04__precios-fila:first-child { padding-top: 0; }
.form-04__precios-fila:last-child  { padding-bottom: 0; }
.form-04__precios-fila:not(:last-child) {
  border-bottom: 1px solid rgba(var(--color-borde-rgb), 0.30);
}

/* Mensalidade usa la clase compartida .subtitulo (Apariencia → Subtítulo)
   en vez de un tamaño propio — así hereda el mismo tamaño/fuente que el
   resto del sitio usa para subtítulos, sin duplicar el valor acá. */
.form-04__precios-subtitulo {
  margin: 0 0 2px;
}

.form-04__precios-linea {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.5;
  color:       var(--color-texto-2);
  margin:      0;
}
.form-04__precios-linea strong { font-weight: 700; color: var(--color-acento); }

/* Líneas de Mensalidade (1/2 cursos) — más peso y un poco más de tamaño
   que el resto de la lista, siguen siendo el dato principal. */
.form-04__precios-linea--mensalidade {
  font-weight: 700;
  font-size:   calc(var(--texto-md) + var(--ajuste-cuerpo, 0rem));
  color:       var(--color-texto);
}

.form-04__precios-nota {
  font-size: calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto-2);
  opacity:   0.65;
  margin:    0;
}

/* Fondo suave en la primera fila secundaria (Sem matrícula por default) —
   --color-verde es el token de acentos positivos del sistema. Solo suma
   padding horizontal (el vertical ya lo da la regla base de la fila,
   así el fondo llega hasta las líneas divisoras de arriba y abajo). */
.form-04__precios-fila--verde {
  padding-inline: var(--espacio-sm);
  border-radius:  var(--radio);
  background:     color-mix(in srgb, var(--color-verde) 14%, transparent);
}
.form-04__precios-fila--verde .form-04__precios-linea {
  font-size: calc(var(--texto-sm) + 3px + var(--ajuste-cuerpo, 0rem));
}

/* ── Bloque CTA — subtítulo editable + botones, una sola unidad visual.
   La línea de cierre ahora es el border-bottom de .form-04__precios (ver
   arriba) — acá solo el conector chico hasta el subtítulo, sin línea
   propia, así el subtítulo/botones quedan donde estaban. ── */
.form-04__cta {
  margin-top: var(--espacio-sm);
}

.form-04__cta-subtitulo {
  text-align: center;
  margin:     0 0 var(--espacio-sm);
}

/* Cuerpo de texto opcional entre el subtítulo y los botones — mismo
   lenguaje que .form-04__intro (texto de cuerpo estándar). */
.form-04__cta-texto {
  font-size:   calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height: 1.7;
  color:       var(--color-texto-2);
  max-width:   520px;
  margin:      0 auto var(--espacio-sm);
  text-align:  center;
}
.form-04__cta-texto + .form-04__cta-texto { margin-top: var(--espacio-sm); }

/* Simetría: el aire entre el texto y los botones iguala al aire de arriba
   (margin-top de .form-04__cta, antes del subtítulo). */
.form-04__cta-texto:last-of-type {
  margin-bottom: var(--espacio-sm);
}

.form-04__botones {
  display:        flex;
  flex-wrap:      nowrap;
  justify-content: center;
  align-items:    stretch;
  gap:            var(--espacio-sm);
}

.form-04__boton-wrap {
  flex:            1 1 0;
  min-width:       0;
  max-width:       320px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
}

.form-04__btn-tipo {
  width:           100%;
  flex:            1;
  padding:         var(--espacio-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  line-height:     1.15;
  font-family:     var(--fuente-display);
  font-style:      italic;
  font-weight:     700;
  font-size:       calc(clamp(1.1rem, 4vw, 1.5rem) + var(--ajuste-titulo, 0rem));
  border:          none;
  border-radius:   calc(var(--radio) + 4px);
  box-shadow:      var(--sombra-box);
  transition:      transform var(--transicion), opacity var(--transicion);
}
.form-04__btn-tipo:hover { transform: translateY(-2px); opacity: 0.92; }

.form-04__btn-tipo--nino   { background: var(--color-acento);   color: var(--color-contraste);   animation: form-04-glow-nino   3.6s ease-in-out infinite; font-size: calc(clamp(1.1rem, 4vw, 1.5rem) + var(--ajuste-titulo, 0rem) + 4px); }
.form-04__btn-tipo--adulto { background: var(--color-acento-2); color: var(--color-contraste-2); animation: form-04-glow-adulto 3.6s ease-in-out infinite; animation-delay: 1.8s; }

@keyframes form-04-glow-nino {
  0%, 100% { box-shadow: var(--sombra-box); }
  50%      { box-shadow: 0 8px 32px color-mix(in srgb, var(--color-acento) 45%, transparent); }
}
@keyframes form-04-glow-adulto {
  0%, 100% { box-shadow: var(--sombra-box); }
  50%      { box-shadow: 0 8px 32px color-mix(in srgb, var(--color-acento-2) 45%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .form-04__btn-tipo--nino,
  .form-04__btn-tipo--adulto { animation: none; box-shadow: var(--sombra-box); }
}

/* ── Color activo del modal — todo lo que resalta adentro (borde, textos
   acento, botones, relleno de avance, foco de inputs) usa esta variable en
   vez de --color-acento fijo. JS define su valor real (--color-acento para
   Crianças, --color-acento-2 para Adolescentes/Adultos) agregando la clase
   --nino/--adulto a .form-04__modal en abrirModal(). ── */
.form-04__modal--nino {
  --form-04-activo:    var(--color-acento);
  --form-04-contraste: var(--color-contraste);
}
.form-04__modal--adulto {
  --form-04-activo:    var(--color-acento-2);
  --form-04-contraste: var(--color-contraste-2);
}

/* ── Modal a tela cheia — 20/8/2026, era limitado (640px) e Pablo pediu
   que ocupasse o viewport inteiro (a grade de grupos precisa do espaço).
   Zera o padding do .modal base (que deixava uma faixa do overlay visível
   ao redor) e o max-width/max-height/border-radius do .modal__card. ── */
/* width/height 100% (não 100vw/100vh) — o pai .form-04__modal já é
   position:fixed + inset:0, que segue o viewport VISÍVEL de verdade no
   celular; 100vh conta o viewport "grande" (como se a barra do navegador
   estivesse escondida), então em mobile o card ficava mais alto que a
   área realmente clicável e empurrava a X e o botão Avançar pra fora.
   20/8/2026, bug real reportado por Pablo. */
.form-04__modal { padding: 0; }
.form-04__modal-card {
  max-width:     none;
  width:         100%;
  height:        100%;
  max-height:    none;
  border-radius: 0;
  border:        none;
}

/* Foco de inputs/fecha adentro del modal — pisa el color fijo del sistema
   base (styles-base.css) con el activo del form. Más específico, sin !important. */
.form-04__modal-card .lm-campo:focus,
.form-04__modal-card .lm-select:focus,
.form-04__modal-card .lm-textarea:focus,
.form-04__modal-card .lm-fecha__seg:focus {
  border-color: var(--form-04-activo, var(--color-acento));
}

/* ── Header — logo Balafon centrado, X de cerrar a la derecha, todo en
   una fila. El logo no reacciona al color nino/adulto (marca fija). ── */
.form-04__modal-header {
  position:      relative;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  padding:       var(--espacio-sm) var(--espacio-sm) 0;
}
.form-04__modal-logo {
  height:     28px;
  width:      auto;
}
.form-04__cerrar {
  position:    absolute;
  right:       var(--espacio-sm);
  top:         var(--espacio-sm);
  width:       40px;
  height:      40px;
  font-size:   1.5rem;
  flex-shrink: 0;
}

/* ── Indicador de avance — círculos numerados conectados por una línea,
   en vez de una barra fina. Track siempre visible (--color-borde sólido);
   el relleno (línea + círculos completados/actual) usa el color activo del
   form con --form-04-contraste para que el número se lea bien encima.
   Cantidad de círculos armada en JS según los pasos reales de cada form
   (ver renderProgreso() en script.js). ── */
.form-04__progreso {
  position:        relative;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin:          var(--espacio-md) var(--espacio-md) var(--espacio-md);
  flex-shrink:     0;
}

.form-04__progreso-track,
.form-04__progreso-linea-fill {
  position:  absolute;
  top:       50%;
  left:      15px;
  height:    3px;
  transform: translateY(-50%);
}
.form-04__progreso-track {
  right:         15px;
  background:    var(--color-borde);
  border-radius: 2px;
}
.form-04__progreso-linea-fill {
  width:      0%;
  background: var(--form-04-activo, var(--color-acento));
  transition: width 0.25s ease;
}

.form-04__progreso-paso {
  position:        relative;
  z-index:         1;
  flex-shrink:     0;
  width:           28px;
  height:          28px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--fuente-cuerpo);
  font-size:       calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:     700;
  background:      var(--color-borde);
  color:           var(--color-texto-2);
  transition:      background var(--transicion), color var(--transicion);
}
.form-04__progreso-paso--hecho,
.form-04__progreso-paso--activo {
  background: var(--form-04-activo, var(--color-acento));
  color:      var(--form-04-contraste, var(--color-contraste));
}

/* ── Encabezado del form — eyebrow + título + textito de ayuda, todo
   pegado (2px) entre sí como una sola unidad, con el aire normal después
   antes del paso 1. ── */
.form-04__form-eyebrow {
  color:      var(--color-texto-3);
  text-align: center;
  margin:     0 0 2px;
}
.form-04__form-titulo {
  text-align: center;
  margin:     0 0 2px;
}
.form-04__form-ayuda {
  font-size:  calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:      var(--color-texto-2);
  opacity:    0.65;
  text-align: center;
  margin:     0 0 var(--espacio-md);
}

/* Barra de scroll invisible — se sigue scrolleando con el dedo/mouse,
   solo se oculta el indicador visual (mismo patrón que .modal__cuerpo
   en base/modal.css). */
.form-04__form {
  padding:                    0 var(--espacio-md) var(--espacio-md);
  overflow-y:                 auto;
  scrollbar-width:             none;
  -webkit-overflow-scrolling: touch;
}
.form-04__form::-webkit-scrollbar { display: none; }

.form-04__paso-titulo {
  font-family:   var(--fuente-display);
  font-style:    italic;
  font-size:     calc(var(--texto-lg) + var(--ajuste-titulo, 0rem));
  color:         var(--form-04-activo, var(--color-acento));
  margin-bottom: var(--espacio-sm);
}

/* ── Título/ajuda centrados — só o passo de grid usa (o resto fica à
   esquerda, padrão do wizard). ── */
.form-04__paso-titulo--centro { text-align: center; }
.form-04__paso-ayuda {
  font-size:     calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:         var(--color-texto-2);
  opacity:       0.65;
  text-align:    center;
  margin:        -4px 0 var(--espacio-sm);
}

/* ── Grade de grupos — 5 colunas fixas (Segunda a Sexta), cada uma um
   calendário semanal real. Dentro de cada coluna os grupos desse dia
   ficam empilhados em ordem de horário. Sem scroll horizontal — as 5
   colunas SEMPRE entram no viewport (repeat(5,1fr), sem largura mínima
   que force overflow); margem negativa cancela o padding lateral do
   form pra deixar o mínimo de ar nas bordas da tela. 20/8/2026. */
.form-04__grupos {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   4px;
  margin:                0 calc(var(--espacio-md) * -1) var(--espacio-sm);
  padding:               0 6px;
}

.form-04__dia-col {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0; /* deixa o texto quebrar linha em vez de forçar a coluna a crescer */
}

.form-04__dia-col-header {
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) - 2px + var(--ajuste-cuerpo, 0rem));
  font-weight:    700;
  text-align:     center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color:          var(--color-texto-2);
  opacity:        0.7;
  padding-bottom: 1px;
}

.form-04__grupo-card {
  position:          relative;
  aspect-ratio:      2 / 3;
  border:            none;
  border-radius:     6px;
  overflow:          hidden;
  background-color:  rgba(var(--color-borde-rgb), 0.10);
  background-size:   cover;
  background-position: center;
  cursor:            pointer;
  padding:           0;
  width:             100%;
  box-shadow:        0 0 0 2px transparent;
  transition:        box-shadow var(--transicion), filter var(--transicion), opacity var(--transicion);
}
.form-04__grupo-card--sel {
  box-shadow: 0 0 0 2px var(--form-04-activo, var(--color-acento)),
              0 0 16px 2px color-mix(in srgb, var(--form-04-activo, var(--color-acento)) 55%, transparent);
}
.form-04__grupo-card--sel .form-04__grupo-card-placa {
  background: color-mix(in srgb, var(--form-04-activo, var(--color-acento)) 88%, transparent);
}
.form-04__grupo-card--lleno {
  filter:        grayscale(0.8);
  opacity:       0.4;
  cursor:        not-allowed;
}

.form-04__grupo-card-placa {
  position:       absolute;
  left: 0; right: 0; bottom: 0;
  display:        flex;
  flex-direction: column;
  gap:            0;
  padding:        4px 3px 4px;
  background:     rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition:     background var(--transicion);
}
.form-04__grupo-card-nombre {
  font-size:   calc(var(--texto-xs) - 2px + var(--ajuste-cuerpo, 0rem));
  font-weight: 600;
  color:       #fff;
  line-height: 1.05;
}
.form-04__grupo-card-curso {
  font-size:   calc(var(--texto-xs) - 3px + var(--ajuste-cuerpo, 0rem));
  color:       rgba(255,255,255,0.85);
  line-height: 1.05;
}
.form-04__grupo-card-hora {
  font-family: var(--fuente-mono, var(--fuente-cuerpo));
  font-size:   calc(var(--texto-xs) - 3px + var(--ajuste-cuerpo, 0rem));
  color:       rgba(255,255,255,0.7);
  line-height: 1.05;
}

.form-04__excecao {
  display:       flex;
  flex-direction: column;
  gap:           8px;
  margin-top:    var(--espacio-sm);
  padding-top:   var(--espacio-sm);
  border-top:    1px dashed rgba(var(--color-borde-rgb), 0.22);
}

.form-04__resumen-precio {
  font-size:     calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  line-height:   1.5;
  color:         var(--color-texto);
  padding:       var(--espacio-sm);
  background:    rgba(var(--color-borde-rgb), 0.06);
  border-radius: var(--radio);
}
.form-04__resumen-linea { margin: 0 0 6px; }
.form-04__resumen-linea:last-child { margin-bottom: 0; }
.form-04__resumen-linea--precio {
  font-size: calc(var(--texto-md) + var(--ajuste-cuerpo, 0rem));
}
.form-04__resumen-linea--precio strong {
  font-weight: 700;
  color:       var(--form-04-activo, var(--color-acento));
}
.form-04__resumen-aviso {
  margin:        var(--espacio-sm) 0 0;
  padding-top:   var(--espacio-sm);
  border-top:    1px dashed rgba(var(--color-borde-rgb), 0.22);
  font-weight:   600;
  color:         var(--form-04-activo, var(--color-acento));
}

.form-04__nav {
  display:         flex;
  justify-content: space-between;
  gap:             var(--espacio-sm);
  margin-top:      var(--espacio-md);
}
.form-04__nav .form-04__btn-siguiente,
.form-04__nav .form-04__btn-enviar { margin-left: auto; }

.form-04__btn {
  padding:        13px 26px;
  font-family:    var(--fuente-cuerpo);
  font-size:      calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:    500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius:  var(--radio);
  border:         1px solid transparent;
  cursor:         pointer;
  transition:     opacity var(--transicion), background var(--transicion);
}
.form-04__btn-atras {
  background: #FFF3C4;
  border-color: rgba(var(--color-borde-rgb), 0.30);
  color:      var(--color-texto);
}
.form-04__btn-siguiente,
.form-04__btn-enviar {
  background: var(--form-04-activo, var(--color-acento));
  color:      var(--form-04-contraste, var(--color-contraste));
}
.form-04__btn-siguiente:hover,
.form-04__btn-enviar:hover { opacity: 0.85; }
.form-04__btn-siguiente:disabled,
.form-04__btn-enviar:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Resultado ── */
.form-04__gracias { display: none; text-align: center; padding: var(--espacio-xl) var(--espacio-md); }
.form-04__gracias--visible { display: block; }
.form-04__gracias-pago,
.form-04__gracias-registrado,
.form-04__gracias-erro { display: none; }
.form-04__gracias--pago .form-04__gracias-pago,
.form-04__gracias--registrado .form-04__gracias-registrado,
.form-04__gracias--erro .form-04__gracias-erro { display: block; }

.form-04__gracias-titulo {
  font-family:   var(--fuente-display);
  font-style:    italic;
  font-size:     calc(var(--texto-xl) + var(--ajuste-titulo, 0rem));
  color:         var(--color-texto);
  margin-bottom: var(--espacio-sm);
}
.form-04__gracias-texto {
  font-size:     calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:         var(--color-texto-2);
  margin-bottom: var(--espacio-md);
}
/* Atajo a WhatsApp de la pantalla de gracias — el número sale del contacto
   del proyecto (ver template.php). Va con el verde propio de WhatsApp y no
   con el color del form: se lee como "otro canal", no como un paso más del
   formulario, que ya terminó. */
.form-04__btn-wa {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              8px;
  text-decoration:  none;
  background:       #25D366;
  color:            #fff;
}
.form-04__btn-wa:hover { opacity: 0.88; }
/* Campo copia-e-cola del boleto — el alumno paga desde el app del banco sin
   salir del sitio. Mismo patrón ya probado en el checkout de Terra Tupy,
   adaptado a la nomenclatura de form-04. */
.form-04__campo-copia {
  display:       flex;
  align-items:   center;
  gap:           4px;
  width:         100%;
  max-width:     320px;
  margin:        0 auto var(--espacio-md);
  padding:       4px 4px 4px 14px;
  border:        1.5px dashed rgba(var(--color-borde-rgb), 0.6);
  border-radius: var(--radio);
}
.form-04__campo-copia-valor {
  flex:        1;
  min-width:   0;
  border:      none;
  background:  none;
  font-family: monospace;
  font-size:   var(--texto-xs);
  color:       var(--color-texto);
  padding:     8px 0;
}
.form-04__btn-copiar {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           28px;
  height:          28px;
  flex-shrink:     0;
  border:          none;
  border-radius:   50%;
  background:      none;
  color:           var(--color-texto-2);
  cursor:          pointer;
  transition:      background .15s, color .15s;
}
.form-04__btn-copiar:hover,
.form-04__btn-copiar:active { background: rgba(var(--color-borde-rgb), 0.25); }
.form-04__btn-copiar--ok    { color: var(--form-04-activo, var(--color-acento)); }

/* Espera mientras Asaas registra el boleto de la suscripción recién creada. */
.form-04__campo-copia-esperando {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  margin:          0 auto var(--espacio-md);
  font-size:       calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:           var(--color-texto-2);
}
.form-04__spinner {
  width:            14px;
  height:           14px;
  flex-shrink:      0;
  border:           2px solid rgba(var(--color-borde-rgb), 0.5);
  border-top-color: var(--form-04-activo, var(--color-acento));
  border-radius:    50%;
  animation:        form-04-girar .8s linear infinite;
}
@keyframes form-04-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .form-04__spinner { animation: none; }
}

.form-04__btn-boleto {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  padding:        13px 26px;
  background:     var(--form-04-activo, var(--color-acento));
  color:          var(--form-04-contraste, var(--color-contraste));
  border-radius:  var(--radio);
  font-size:      calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  font-weight:    500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ── Tablet (768px) ── */
@media (min-width: 768px) {
  .form-04__grupos { grid-template-columns: repeat(5, minmax(110px, 1fr)); }
}


/* footer-01 · Una fila: logo + social + dirección */

.footer-01 {
  background-color: var(--color-superficie);
  background-image: var(--t6-h), var(--t6-v);
  border-top:       1px solid rgba(var(--color-borde-rgb), 0.10);
  padding-block:    var(--espacio-lg);
}

.footer-01__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--espacio-md);
  text-align:     center;
}

.footer-01__logo-img {
  height: 36px;
  width:  auto;
}

.footer-01__dir {
  font-size: calc(var(--texto-sm) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto);
}

.footer-01__meta {
  font-size: calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:     var(--color-texto-2);
  opacity:   0.70;
}

.footer-01__meta-link {
  font-size:   inherit;
  color:       inherit;
  cursor:      pointer;
}

.footer-01__meta--priv {
  margin-top: var(--espacio-xs);
}

.footer-01__credito {
  font-size:  calc(var(--texto-xs) + var(--ajuste-cuerpo, 0rem));
  color:      var(--color-texto-2);
  opacity:    1;
  margin-top: var(--espacio-sm);
}

.footer-01__credito a {
  font-family:    var(--fuente-display);
  font-weight:    600;
  color:          #0a6e4a;
}

.footer-01__social {
  display:     flex;
  align-items: center;
  gap:         var(--espacio-sm);
}

.footer__icon-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  color:           var(--color-acento-2);
  opacity:         0.70;
  transition:      opacity var(--transicion);
}
.footer__icon-link:hover { opacity: 1; }


/* Botón flotante WhatsApp */
.flotante-wa {
  position:        fixed;
  bottom:          24px;
  right:           24px;
  z-index:         200;
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      #25D366;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(0,0,0,0.18);
  transition:      transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.flotante-wa:hover {
  transform:  scale(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}
/* Oculto mientras el banner Brote está a la vista (evita que se confunda
   con el WA del banner) — ver renderOcultarWaSobreBanner() */
.flotante-wa--oculto {
  opacity:        0;
  pointer-events: none;
}