/* === GRUPO FRONTERA — ConDolor (corrección) === */
/* Aplicado desde Figma: node 15457:15 (GRUPO FRONTERA · CON DOLOR) */
/* Nodos analizados: 15457:22 (mobile form), 15457:239 (desktop form), */
/*                  15458:559 (mobile TY), 15457:338 (desktop email hero) */
/* Fecha: 2026-05-25 */

/* ── Google Fonts ──────────────────────────────────────────── */
/*
  Tipografías del diseño Figma (verificadas en el código generado):
  - "Big Caslon:Medium"     — fuente de pago. Headings / títulos de sección.
                              Alternativa Google Fonts: Cormorant Garamond SemiBold (serif elegante).
  - "Nugros:Medium"         — fuente de pago / custom. Botón "Siguiente" (mobile).
                              Alternativa Google Fonts: Cormorant Garamond Medium.
  - "Akkurat Pro:Regular"   — fuente de pago (Lineto). Labels de inputs, checkboxes.
                              Alternativa Google Fonts: Inter Regular.
  - "Actor:Regular"         — fuente de pago / libre. Texto de checkboxes.
                              Alternativa Google Fonts: Inter Regular (similar sin serif).
  - "Roboto:Regular"        — disponible en Google Fonts. Placeholders e inputs.
  NOTA: Tipografía medieval "Con dolor" (blackletter/fraktur) está embebida en la imagen
        de fondo — no se requiere fuente web para ese texto.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=Roboto:wght@400;500&display=swap');

/* ── Variables CSS ──────────────────────────────────────────── */
:root {
  /* Paleta extraída directamente del diseño Figma — Grupo Frontera ConDolor */
  /* Estética: marrón oscuro cálido (cuero envejecido) + crema/marfil dorado */

  /* Fondos — marrón oscuro muy profundo (base bajo la textura de cuero) */
  --color-bg-primary:     #22170f;   /* bg-[#22170f] — exacto Figma, fondo mobile form */
  --color-bg-secondary:   #22170f;   /* mismo marrón oscuro para sección form */
  --color-bg-ty:          #000000;   /* bg-black — exacto Figma TY desktop (con textura encima) */

  /* Acento — crema/marfil cálido (el "dorado" del diseño) */
  --color-accent:         #d6c9b6;   /* #d6c9b6 — exacto Figma, borders, labels, btn bg */
  --color-accent-hover:   #c4b5a0;   /* versión ligeramente más oscura para hover */

  /* Botones — fondo crema, texto marrón oscuro */
  /* Mobile: bg-[#d6c9b6], text-[#22170f], rounded-[16px] */
  /* Desktop: bg-[#d6c9b6], text-black, rounded-[7px] */
  --color-btn-primary:      #d6c9b6;   /* exacto Figma */
  --color-btn-primary-text: #22170f;   /* exacto Figma mobile / negro en desktop */
  --color-btn-ty:           #d6c9b6;   /* TY mobile: bg-[#d6c9b6] */
  --color-btn-ty-text:      #000000;   /* TY mobile: text-black */

  /* Textos — crema cálido (label color en Figma) */
  --color-text-primary:   #d6c9b6;   /* #d6c9b6 — exacto Figma para labels e inputs */
  --color-text-secondary: #d6c9b6;   /* igual — diseño monocromo crema sobre marrón */
  --color-text-label:     #d6c9b6;   /* "Nombre *", "Correo *" etc. */

  /* Bordes e inputs */
  /* Figma: "border border-[#d6c9b6] border-solid" en todos los inputs */
  --color-border:         #d6c9b6;              /* exacto Figma */
  --color-input-bg:       transparent;           /* inputs transparentes sobre fondo oscuro */
  --color-input-border:   #d6c9b6;              /* exacto Figma */
  --color-input-focus:    #d6c9b6;              /* mismo crema al hacer focus */

  /* Overlay — el fondo de cuero es suficientemente oscuro, overlay muy sutil */
  --color-overlay:        rgba(0, 0, 0, 0.15);

  /* Steps (progress bar)
     No explícitos en ConDolor — usamos crema activo / crema semitransparente inactivo */
  --color-step-active:    #d6c9b6;              /* crema cálida — acorde al diseño */
  --color-step-inactive:  rgba(214, 201, 182, 0.4);

  /* Checkbox border: #aba192 — exacto Figma (un crema más apagado) */
  --color-checkbox-border: #aba192;

  /* Placeholder text: rgba(214,201,182,0.5) — exacto Figma desktop */
  --color-placeholder:    rgba(214, 201, 182, 0.5);

  /* Color de éxito/aprobación (password validation): #22B07D — extraído de Figma */
  --color-success:        #22b07d;

  /* Tipografías */
  --font-heading: 'Cormorant Garamond', Georgia, serif;   /* Big Caslon Medium → Cormorant Garamond */
  --font-btn:     'Nugros', 'Roboto', sans-serif;          /* Nugros (template Stoyco) → fallback Roboto */
  --font-body:    'Inter', 'Roboto', sans-serif;           /* Akkurat Pro / Actor → Inter */
  --font-ui:      'Roboto', 'Inter', sans-serif;           /* Roboto para inputs */

  /* Radios — extraídos de Figma */
  --radius-btn:    16px;   /* rounded-[16px] mobile btn / rounded-[15px] TY */
  --radius-input:   7px;   /* rounded-[7px] todos los inputs — exacto Figma */
  --radius-card:    8px;

  /* Transiciones */
  --transition-fast: 0.2s ease;
}

/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;   /* elimina scroll horizontal global */
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;   /* elimina scroll horizontal en body */
  max-width: 100vw;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── SECCIÓN HERO / EMAIL (section-email) ──────────────────── */
/* Base: propiedades comunes a mobile y desktop.
   height / padding definidos en cada media query. */
.section-email {
  width: 100%;
  background-color: var(--color-bg-primary);
  background-image: url('../img/bg-movil.webp');  /* mobile default; desktop override en @media */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Overlay muy sutil — el cuero ya tiene suficiente oscuridad */
.section-email::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  z-index: 0;
}

/* Logo Grupo Frontera centrado en la parte inferior del hero (mobile) */
.section-email::after {
  content: '';
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 140px;
  background-image: url('../img/layer_1_title.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 2;
}

.section-email > * {
  position: relative;
  z-index: 1;
}

/* Contenedor del formulario de email — medidas por media query */
.section-email-form-container {
  width: 100%;
}

/* Imagen lateral (artista/logo) — siempre oculta (el fondo bg-desktop.webp ya incluye el arte) */
.illustration-side {
  display: none !important;
}

.illustration-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Logo / lettering del artista en hero:
   La imagen layer_1_title.svg no existe (se guardó como .png),
   el logo se muestra via ::after pseudo-elemento. Ocultamos el img roto. */
.illustration-side-title {
  display: none !important;
}

.illustration-side-title img {
  display: none !important;
}

/* ── Email form: ancho completo en todos los breakpoints ─────── */
/* Bootstrap pone align-items: center !important via clase "align-items-center".
   Usamos stretch + !important para que input y botón igualen el ancho del contenedor. */
#email-form {
  width: 100% !important;
  align-items: stretch !important;
}

#email-form > div {
  width: 100% !important;
}

/* Botón igual de ancho que el input — anula max-width: 330px del estilo base */
#email-form .btn-registro {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;        /* permite que se estreche si el contenedor es pequeño */
}

/* ── Steps / Progress bar ───────────────────────────────────── */
.steps-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 1.25rem;
}

.step-segment {
  height: 5px;
  border-radius: 10px;
  background-color: var(--color-step-inactive);
  flex: 1;
}

.step-segment.active {
  background-color: var(--color-step-active);
  flex: 0 0 auto;
  width: 94px;
}

/* ── Labels de formulario ───────────────────────────────────── */
/* Figma: Roboto Regular 14px, color #d6c9b6, uppercase en section-form */
#email-form .form-label {
  color: var(--color-text-label);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;    /* Correo * — sin mayúsculas */
  margin-bottom: 0.375rem;
}

#registration-form .form-label {
  color: var(--color-text-label);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  margin-bottom: 0.375rem;
}

/* ── Inputs en section-form (fondo oscuro) — refuerzo de legibilidad ── */
.section-form .form-control,
.section-form .form-select {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-input-border);   /* #d6c9b6 — borde arena */
  color: var(--color-text-primary);              /* #d6c9b6 — texto arena */
}

.section-form .form-control:focus,
.section-form .form-select:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--color-input-focus);
  color: var(--color-text-primary);
}

/* ── Inputs ─────────────────────────────────────────────────── */
/* Figma: border border-[#d6c9b6] border-solid, rounded-[7px], bg transparente */
.form-control,
.form-select {
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-input);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 0.875rem;     /* 14px — exacto según Figma */
  padding: 0.625rem 0.875rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--color-input-bg);
  border-color: var(--color-input-focus);
  box-shadow: 0 0 0 3px rgba(214, 201, 182, 0.2);
  color: var(--color-text-primary);
  outline: none;
}

.form-control::placeholder {
  color: var(--color-placeholder);   /* rgba(214,201,182,0.5) — exacto Figma */
}

/* Input con error */
.form-control.input-error,
.form-select.input-error {
  border-color: #ff4d4d;
  box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.2);
}

/* ── Checkboxes ─────────────────────────────────────────────── */
/* Figma: border border-[#aba192] border-solid, rounded-[2px], 14x14px */
.form-check-input {
  background-color: transparent;
  border: 1px solid var(--color-checkbox-border);   /* #aba192 — exacto Figma */
  border-radius: 2px;   /* rounded-[2px] — exacto Figma */
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Figma: Actor Regular, text-[#d6c9b6], underline, 12px */
.form-check-label,
.form-check-label .link-register {
  color: var(--color-text-secondary);
  font-size: 0.75rem;     /* 12px — exacto Figma */
  font-family: var(--font-body);
  text-decoration: underline;
}

.link-register {
  color: var(--color-accent);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.link-register:hover {
  color: var(--color-accent-hover);
}

/* ── Textarea ────────────────────────────────────────────────── */
.form-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}

/* ── File upload ─────────────────────────────────────────────── */
.file-upload-container {
  display: flex;
  align-items: center;
}

.btn-file-upload {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding: 0.6rem 1.25rem;
  background-color: rgba(214, 201, 182, 0.08);
  border: 1.5px solid var(--color-input-border);
  border-radius: 7px;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background-color 0.2s, border-color 0.2s;
  max-width: 100%;
  gap: 6px;
}

.btn-file-upload:hover {
  background-color: rgba(214, 201, 182, 0.15);
  border-color: var(--color-accent);
}

.btn-file-upload.has-file {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: rgba(214, 201, 182, 0.12);
}

.file-upload-hint {
  color: var(--color-placeholder);
  font-family: var(--font-body);
  font-size: 0.75rem;
  margin-top: 0.375rem;
  margin-bottom: 0;
}

/* ── Botón principal (btn-registro) ──────────────────────────── */
/* Dimensiones y fuente según template Stoyco */
.btn-registro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  border: none;
  border-radius: 7px;
  font-family: var(--font-btn);        /* 'Nugros', 'Roboto', sans-serif */
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  letter-spacing: normal;
  padding: 0 24px;
  height: 46.9px;
  min-height: 46.9px;
  min-width: 240px;
  width: 100%;
  max-width: 330px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-registro:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-btn-primary-text);
  transform: translateY(-1px);
}

.btn-registro:active {
  transform: translateY(0);
}

.btn-registro:disabled {
  background-color: rgba(214, 201, 182, 0.35);
  color: rgba(34, 23, 15, 0.5);
  cursor: not-allowed;
  transform: none;
}

/* ── Heading / Títulos ─────────────────────────────────────── */
/* Figma mobile: Big Caslon Medium, 25px, leading-[1.14], uppercase, tracking-[1.5px], text-[#d6c9b6] */
/* Figma desktop: Big Caslon Medium, 35px, leading-[1.23], uppercase, tracking-[2.1px], text-[#d6c9b6] */
.section-heading {
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text-primary);
  text-align: center;
  font-size: 1.5625rem;    /* 25px mobile Figma */
  line-height: 1.14;
  letter-spacing: 0.06em;  /* tracking-[1.5px] sobre 25px ≈ 0.06em */
  margin-bottom: 1.25rem;
}

/* ── Validación de contraseña ───────────────────────────────── */
/* Figma: Roboto 10px, text-[#d6c9b6], con íconos check-outline */
.pswd-validation-label {
  font-family: var(--font-ui);
  font-size: 0.625rem;     /* 10px — exacto Figma */
  color: var(--color-text-secondary);
  line-height: 16px;
}

.pswd-validation-label.valid {
  color: var(--color-success);   /* #22b07d — color de aprobación en Figma */
}

/* ── SECCIÓN FORMULARIO (section-form) ───────────────────────── */
.section-form {
  background-color: var(--color-bg-secondary);   /* #22170f — marrón oscuro sólido */
  background-image: none;
  color: var(--color-text-primary);
}

.section-form .container-fluid {
  padding: 0 !important;
  max-width: 100% !important;
}

/* Eliminar margin-top: 3rem que Bootstrap mt-5 agrega */
.section-form #form-container {
  margin-top: 0 !important;
}

.form-container {
  width: 100%;
}

/* Layout: Bootstrap .row — mobile = columna única */
.section-form .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
}

/* Ocultar img de la columna izquierda — se usa CSS background-image */
.section-form .col-md-6 img,
.section-form .illustration-side-data-form img {
  display: none !important;
}

/* Columna formulario — ocupa todo el ancho en mobile */
.section-form .col-md-4 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 2.5rem 1.5rem 3rem !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Desktop: dos columnas lado a lado */
@media (min-width: 768px) {
  /* Fondo desktop: marrón oscuro sólido — mismo que mobile */
  .section-form {
    background-image: none !important;
    background-color: var(--color-bg-secondary) !important;
  }

  .section-form .row {
    flex-direction: row !important;
    align-items: stretch !important;
  }

  /* Columna izquierda: col-md-6 — lat-form.webp centrado como fondo */
  .section-form .col-md-6 {
    flex: 0 0 45% !important;
    width: 45% !important;
    max-width: 45% !important;
    padding: 0 !important;
    min-height: 100vh;
    background-image: url('../img/lat-form.webp') !important;
    background-size: 88% !important;
    background-repeat: no-repeat !important;
    background-position: 75% center !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Anular estilos del inner-div y figure de la columna izquierda */
  .section-form .col-md-6 > div,
  .section-form .col-md-6 figure {
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Columna derecha: col-md-4 — vence Bootstrap (33.33%) → 55% */
  .section-form .col-md-4 {
    flex: 0 0 55% !important;
    width: 55% !important;
    max-width: 55% !important;
    min-height: 100vh;
    padding: 4rem 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Formulario de registro: ancho acotado dentro de la columna derecha */
  #registration-form {
    width: 100% !important;
    max-width: 420px !important;
  }
}

/* Título / descripción del formulario de registro */
/* El HTML tiene texto placeholder ("SECH") — se oculta con font-size:0
   e inyectamos el texto correcto de Figma vía ::before */
.form-text {
  font-size: 0 !important;           /* oculta el texto placeholder */
  margin-bottom: 0 !important;
  display: block;
}

/* Texto inyectado — mobile */
#registration-form .form-text::before {
  content: 'Regístrate en la comunidad de Grupo Frontera para obtener acceso exclusivo a su nuevo EP "Con Dolor"';
  display: block;
  font-family: var(--font-heading);  /* Cormorant Garamond = Big Caslon Medium Figma */
  font-size: 1.125rem;               /* 18px mobile */
  font-weight: 500;
  color: var(--color-text-primary);  /* #d6c9b6 */
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-bottom: 2rem;
}

/* Texto inyectado — desktop */
@media (min-width: 768px) {
  #registration-form .form-text::before {
    font-size: 2.125rem !important;  /* ~34px — Big Caslon Medium Figma desktop aumentado */
    line-height: 1.15 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 2.5rem !important;
    text-align: left !important;
  }
}

.title-mobile {
  font-size: 0 !important;   /* heredado de .form-text — el ::before ya lo maneja */
}

/* Phone input container */
.phone-input-container {
  gap: 0.5rem;
  align-items: stretch;
}

.phone-input-container .elementor-field {
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-input);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  padding: 0.625rem 0.5rem;
  min-width: 80px;
}

/* ── Choices.js — tema cálido cuero ─────────────────────────── */
.choices {
  margin-bottom: 0;
}

.choices__inner {
  background-color: var(--color-input-bg) !important;
  border: 1px solid var(--color-input-border) !important;   /* #d6c9b6 */
  border-radius: var(--radius-input) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.875rem !important;
  min-height: unset !important;
  padding: 0.5rem 0.875rem !important;
}

.choices__list--dropdown {
  background-color: #2d1e10 !important;   /* marrón oscuro — variante del bg principal */
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-input) !important;
}

.choices__list--dropdown .choices__item {
  color: var(--color-text-secondary) !important;
  font-family: var(--font-ui) !important;
  font-size: 0.875rem !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: rgba(214, 201, 182, 0.15) !important;
  color: var(--color-accent) !important;
}

.choices__placeholder {
  color: var(--color-placeholder) !important;   /* rgba(214,201,182,0.5) */
}

.choices__input {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-ui) !important;
}

.choices[data-type*="select-one"] .choices__button {
  filter: sepia(1) hue-rotate(15deg) brightness(0.8);
  opacity: 0.6;
}

.choices[data-type*="select-one"]::after {
  border-color: var(--color-accent) transparent transparent !important;
}

/* ── SECCIÓN THANK YOU (section-ty) ──────────────────────────── */
/* Figma TY mobile: textura cuero marrón cálido bg
   Texto "¡Gracias por registrarte!" Big Caslon Medium 38px, color rgba(214,201,182,0.71)
   Botón: bg-[#d6c9b6], text-black, rounded-[15px] */
.section-ty {
  min-height: 100vh;
  background-color: var(--color-bg-ty);
  background-image: url('../img/bg-ty-movil.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.section-ty::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);   /* overlay mínimo — el cuero es suficientemente oscuro */
  z-index: 0;
}

/* Medallón / sello Grupo Frontera en esquina superior derecha */
.section-ty::after {
  content: '';
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 115px;
  height: 115px;
  background-image: url('../img/metaImg.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 2;
}

.section-ty > * {
  position: relative;
  z-index: 1;
}

/* Texto de thank-you */
/* Figma mobile: Big Caslon Medium, 38px, leading-[1.02], uppercase, color rgba(214,201,182,0.71) */
.ty-text {
  color: #D6C9B6;   /* exacto Figma TY mobile */
  font-family: var(--font-heading);
  font-size: 2.625rem;                 /* 42px Figma */
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.02;   /* exacto Figma TY mobile */
  margin-bottom: 1rem;
}

.ty-text-container {
  padding: 0.5rem 2rem;
}

.ty-text-container-mobile {
  padding: 0.5rem 1rem;
}

/* ── Imagen lateral en thank-you: reproponer para logo Grupo Frontera ── */
/* Ocultar img rota (layer_1_title.svg no existe) */
.illustration-button-ty img {
  display: none !important;
}

/* Desktop: logo script Grupo Frontera en esquina inferior derecha */
.illustration-button-ty {
  position: absolute !important;
  bottom: 2rem !important;
  right: 2.5rem !important;
  width: 220px !important;
  height: 110px !important;
  background-image: url('../img/lat-form.webp') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center right !important;
  z-index: 2;
}

/* Mobile: logo Grupo Frontera al fondo de section-ty */
@media (max-width: 767px) {
  /* Medallón: esquina superior derecha — base ~360px (Samsung G) */
  .section-ty::after {
    width: 86px;
    height: 86px;
    top: 1rem;
    right: 0.75rem;
    bottom: auto;
  }

  /* Layout mobile: columna, contenido empujado debajo de "Con Dolor" */
  #section-ty {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding-top: 52vh !important;        /* empuja el bloque texto+botón bajo "Con Dolor" */
    padding-bottom: 7rem !important;     /* espacio para el logo fijo abajo */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    gap: 0 !important;
  }

  /* Orden: 1→gracias, 2→botón */
  .ty-text-container-mobile {
    order: 1;
    padding: 0;
    margin-bottom: 0 !important;
    width: 100%;
    text-align: center;
  }

  /* Reducir margen inferior del título TY en mobile */
  .ty-text-container-mobile .ty-text {
    margin-bottom: 0.5rem !important;
  }

  .ty-text-container {
    order: 2;
    padding: 0;
    margin-top: 0 !important;
    min-height: unset !important;
    width: 100%;
  }

  /* illustration-side-title en TY: logo Grupo Frontera fijo al fondo de la pantalla */
  #section-ty .illustration-side-title {
    display: block !important;
    position: fixed !important;
    bottom: 1.75rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 180px !important;
    height: 80px !important;
    margin: 0 !important;
    background-image: url('../img/lat-form.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
  }

  #section-ty .illustration-side-title img {
    display: none !important;
  }
}

/* Medallón — 360-399px width-constrained (ej. iPhone SE 375×667) */
/* min-aspect-ratio: 1/2 = 0.5 — excluye iPhone 12 Pro (390×844 = 0.462) y Samsung G (0.45) */
@media (max-width: 399px) and (min-width: 360px) and (min-aspect-ratio: 1/2) {
  .section-ty::after {
    width: 65px;
    height: 65px;
    top: 0.5rem;
    right: 0.75rem;
    bottom: auto;
  }
}

/* Medallón — pantallas muy pequeñas (<360px, ej. 313px, 352px) */
@media (max-width: 359px) {
  .section-ty::after {
    width: 50px;
    height: 50px;
    top: 0.5rem;
    right: 0.5rem;
    bottom: auto;
  }
}

/* Medallón — 400-767px width-constrained (ej. 424×771, 567×972) */
/* min-aspect-ratio: 1/2 = 0.5 — excluye Samsung A51 (412×914 = 0.45), Pixel 7 (0.45), iPhone 12 Pro (0.46) */
@media (max-width: 767px) and (min-width: 400px) and (min-aspect-ratio: 1/2) {
  .section-ty::after {
    width: 75px;
    height: 75px;
    top: 0.5rem;
    right: 0.75rem;
    bottom: auto;
  }
}

/* Desktop: margin-top: auto empuja el contenido al fondo del flex container */
@media (min-width: 768px) {
  /* Contenedor: 100vh exacto, flex columna, sin scroll
     NO sobreescribir display — Bootstrap d-flex / d-none lo gestiona via JS */
  #section-ty {
    height: 100vh !important;
    min-height: unset !important;
    overflow: hidden !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-position: center top !important;
    padding: 0 2rem 0 !important;
  }

  /* Medallón: posición base desktop */
  .section-ty::after {
    width: 150px;
    height: 150px;
    right: 3%;
    top: 3vh;
  }

  /* Ocultar elementos que no van en desktop */
  #section-ty .illustration-side-title,
  #section-ty .ty-text-container-mobile,
  #section-ty .illustration-side,
  #section-ty .illustration-button-ty {
    display: none !important;
  }

  /* margin-top explícito empuja el bloque hacia el tercio inferior */
  #section-ty .ty-text-container {
    margin-top: 19vh !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* Texto ¡GRACIAS! desktop */
  #section-ty .ty-text-container .ty-text {
    font-size: 2.625rem !important;    /* 42px Figma */
    margin-bottom: 0.75rem !important;
  }
}

/* Medallón — desktop pequeño/tablet (768-1023px, ej. 852px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .section-ty::after {
    width: 110px;
    height: 110px;
    right: 3%;
    top: 8vh;
  }
}

/* Ajuste fino del medallón en pantallas medianas (1024—1279px) */
/* top: 4vh aleja el medallón del texto “Con dolor” en pantallas cortas como Nest Hub (1024×600) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .section-ty::after {
    right: 8%;
    top: 4vh;
    width: 110px;
    height: 110px;
  }
}

/* Ajuste fino del medallón en pantallas grandes (1280–1439px) — referencia correcta */
@media (min-width: 1280px) and (max-width: 1439px) {
  .section-ty::after {
    right: 10%;
    top: 8vh;   /* bajado un poco desde 5vh */
    width: 140px;
    height: 140px;
  }
}

/* Pantallas muy grandes (1440px+) */
@media (min-width: 1440px) {
  .section-ty::after {
    right: 13%;
    top: 8vh;
    width: 175px;
    height: 175px;
  }
}

/* Pantallas ultra-anchas (1920px+) */
@media (min-width: 1920px) {
  .section-ty::after {
    right: 14%;
    top: 8vh;
    width: 185px;
    height: 185px;
  }
}

/* ── Botón Thank-You / Pre-save (#btn-presave / .btn-link-ty) ── */
/* Figma TY mobile: bg-[#d6c9b6], text-black, rounded-[15px], Big Caslon Medium 18px */
#btn-presave,
.btn-link-ty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-btn-ty);
  color: var(--color-btn-ty-text);
  border: none;
  border-radius: 15px;   /* rounded-[15px] — exacto Figma TY mobile */
  font-family: var(--font-heading);   /* Big Caslon Medium → Cormorant Garamond */
  font-size: 1.125rem;   /* 18px — exacto Figma TY mobile */
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  padding: 0.75rem 2rem;   /* padding compacto — ancho justo al texto */
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  min-width: auto;         /* sin ancho mínimo forzado — se ajusta al contenido */
  width: auto;
}

#btn-presave:hover,
.btn-link-ty:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-btn-ty-text);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Alias Bootstrap si se usa .btn-primary-stoyco */
.btn-primary-stoyco {
  background-color: var(--color-btn-primary);
  color: var(--color-btn-primary-text);
  border: none;
  border-radius: var(--radius-input);
  font-family: var(--font-btn);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.btn-primary-stoyco:hover {
  background-color: var(--color-accent-hover);
}

/* ── Loader overlay ─────────────────────────────────────────── */
#custom-loader {
  font-family: var(--font-ui);
}

/* ── Responsive ─────────────────────────────────────────────── */

/* ── SOLO MOBILE (< 768px) ──────────────────────────────────── */
@media (max-width: 767px) {
  .section-email {
    height: 100vh;
    min-height: unset;
    overflow: hidden;
    /* padding-top empuja el form hacia abajo; padding-bottom da espacio al logo */
    padding: 48vh 1.5rem 6rem;
    justify-content: flex-start;
  }

  /* El form container ya no necesita margin-top: se posiciona por el padding del padre */
  .section-email-form-container {
    width: 100%;
    max-width: 340px;
    padding: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* Botón mobile: ancho completo, igual que el input */
  #email-form .btn-registro {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── section-form mobile: logo Grupo Frontera ─────────────────
     .illustration-side-title está oculto globalmente (display:none !important)
     para section-email. Lo reactivamos solo en section-form mobile.
     Alta especificidad (#section-form + media query) + !important vence la regla global. */
  #section-form .illustration-side-title {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 140px;
    margin-bottom: 0.5rem;
    background-image: url('../img/lat-form.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }

  /* Ocultar img rota (layer_1_title.svg no existe) */
  #section-form .illustration-side-title img {
    display: none !important;
  }

  /* Título del formulario mobile: tamaño Figma */
  #registration-form .form-text::before {
    font-size: 1.625rem !important;   /* ~26px — Big Caslon Medium Figma mobile aumentado */
    line-height: 1.2 !important;
    margin-bottom: 1.75rem !important;
  }
}

/* ── DESKTOP (>= 768px) ─────────────────────────────────────── */
@media (min-width: 768px) {
  /* Hero desktop: bg-desktop.webp, form en la mitad inferior, altura fija */
  .section-email {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 4rem 1rem 7rem;
    height: 100vh;
    min-height: unset;
    overflow: hidden;
    background-image: url('../img/bg-desktop.webp');
    background-size: cover;
    background-position: center center;
    background-color: var(--color-bg-primary);
  }

  .section-email::before {
    background: rgba(0, 0, 0, 0.10);
  }

  /* Logo desktop: esquina inferior-izquierda */
  .section-email::after {
    bottom: 1.5rem;
    left: 2.5rem;
    transform: none;
    width: 200px;
    height: 100px;
    background-position: left bottom;
  }

  .illustration-side {
    display: none !important;
  }

  /* Formulario desktop: ancho acotado, sin margin-top */
  .section-email-form-container {
    flex: none;
    width: 100%;
    max-width: 380px;
    margin-top: 0;
    padding: 1.5rem;
    background-color: transparent;
    background-image: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  /* Form email desktop: ancho completo del contenedor */
  #email-form {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    gap: 1rem;
  }

  #email-form > div {
    width: 100% !important;
  }

  #email-form .btn-registro {
    width: 100% !important;
  }

  /* Heading desktop */
  .section-heading {
    font-size: 2.1875rem;
    line-height: 1.23;
    letter-spacing: 0.06em;
    text-align: left;
  }

  /* Form section desktop — bg-form.webp definido en el bloque .section-form de arriba */

  /* TY section desktop */
  .section-ty {
    min-height: 100vh;
    background-image: url('../img/bg-ty.webp');
  }

  .ty-text-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 4rem;
  }

  /* Botón Siguiente desktop */
  .btn-registro {
    font-size: 0.875rem;
    border-radius: var(--radius-input);
  }

  /* Botón TY desktop */
  #btn-presave,
  .btn-link-ty {
    font-size: 1.125rem;
    border-radius: 15px;
    min-width: auto;     /* compacto — se ajusta al texto */
    min-height: 46px;
    padding: 0.75rem 2.5rem;
  }

  /* Steps desktop */
  .step-segment {
    background-color: rgba(214, 201, 182, 0.4);
    height: 8px;
  }

  .step-segment.active {
    background-color: var(--color-step-active);
    width: 224px;
  }

  .ty-text {
    font-size: 2.625rem;   /* 42px Figma */
  }
}

/* ── Utilidades ─────────────────────────────────────────────── */

/* NOTA: NO redefinir .d-none aquí — Bootstrap ya la incluye.
   Redefinirla después de Bootstrap cancela las clases responsivas
   como d-none d-md-block (que usa el título del formulario de registro). */