/* =========================================
   PALETA CON CONTRASTE REAL
   Fondo salvia medio (no blanco), superficies
   crema-verdoso, textos oscuros. Sin deslumbrar.
   ========================================= */
:root {
  /* Verdes base */
  --sage-base: #CFE1D6;         /* Fondo general: salvia medio */
  --sage-deep: #B8D0C0;         /* Aún más oscuro para bandas */
  --mint-soft: #A8E6CF;
  --jade: #029A4D;              /* Acento principal, más oscuro que antes */
  --jade-dark: #017C3E;
  --jade-bright: #06B85D;       /* Solo para el botón CTA */

  /* Superficies (tarjetas) */
  --surface: #E9F2EC;           /* Crema-verdoso (NO blanco) */
  --surface-elevated: #F2F8F4;  /* Ligeramente más claro para foco */
  --surface-input: #DFEBE3;     /* Inputs: ligeramente más oscuro que la tarjeta */

  /* Texto */
  --ink: #17261E;               /* Casi negro con tinte verde: máximo contraste */
  --ink-soft: #465C50;          /* Secundario, aún legible */

  /* Bordes */
  --border-soft: #A9C2B4;
  --border-strong: #86A896;

  /* Sombras */
  --shadow-soft: 0 6px 18px -4px rgba(23, 38, 30, 0.10), 0 2px 6px rgba(23, 38, 30, 0.06);
  --shadow-hover: 0 14px 32px -8px rgba(23, 38, 30, 0.18), 0 4px 10px rgba(23, 38, 30, 0.08);

  --radius-card: 24px;
  --radius-input: 14px;
  --radius-pill: 999px;

  --ease-boing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Lora', Georgia, serif;
}

/* Modo oscuro: bosque profundo, sin blanco puro */
[data-theme="dark"] {
  --sage-base: #0B1812;
  --sage-deep: #0A120E;
  --mint-soft: #2E5A44;
  --jade: #4ADE80;
  --jade-dark: #22C55E;
  --jade-bright: #4ADE80;

  --surface: #15251C;
  --surface-elevated: #1C3125;
  --surface-input: #0F1E16;

  --ink: #E4F2E9;
  --ink-soft: #9CB6A7;

  --border-soft: #284434;
  --border-strong: #3A5E48;

  --shadow-soft: 0 6px 18px -4px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 14px 32px -8px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* ========== Reset ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background-color: var(--sage-base);
  color: var(--ink);
  line-height: 1.65;
  transition: background-color 0.5s var(--ease-smooth), color 0.5s var(--ease-smooth);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 0 1.25rem 4rem;
  position: relative;
  overflow-x: hidden;
}

/* =========================================
   FONDO ANIMADO: frutas y verduras difuminadas cayendo
   ========================================= */
.falling-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.falling-bg span {
  position: absolute;
  top: -12vh;
  font-size: 3rem;
  opacity: 0.15;
  filter: blur(2.5px) saturate(0.7);
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
  user-select: none;
}

/* Cada emoji con su posición, velocidad, retraso y blur */
.falling-bg span:nth-child(1)  { left: 3%;  font-size: 3.2rem; animation-duration: 22s; animation-delay: 0s;   opacity: 0.13; filter: blur(3px) saturate(0.6); }
.falling-bg span:nth-child(2)  { left: 12%; font-size: 2.4rem; animation-duration: 28s; animation-delay: -4s;  opacity: 0.16; filter: blur(2px) saturate(0.7); }
.falling-bg span:nth-child(3)  { left: 20%; font-size: 2.8rem; animation-duration: 25s; animation-delay: -9s;  opacity: 0.12; filter: blur(4px) saturate(0.5); }
.falling-bg span:nth-child(4)  { left: 28%; font-size: 2.2rem; animation-duration: 30s; animation-delay: -2s;  opacity: 0.18; filter: blur(1.5px) saturate(0.8); }
.falling-bg span:nth-child(5)  { left: 36%; font-size: 3.5rem; animation-duration: 26s; animation-delay: -12s; opacity: 0.10; filter: blur(5px) saturate(0.5); }
.falling-bg span:nth-child(6)  { left: 44%; font-size: 2.6rem; animation-duration: 24s; animation-delay: -6s;  opacity: 0.15; filter: blur(2.5px) saturate(0.65); }
.falling-bg span:nth-child(7)  { left: 52%; font-size: 3rem;   animation-duration: 27s; animation-delay: -15s; opacity: 0.13; filter: blur(3px) saturate(0.6); }
.falling-bg span:nth-child(8)  { left: 60%; font-size: 2.5rem; animation-duration: 23s; animation-delay: -1s;  opacity: 0.17; filter: blur(2px) saturate(0.75); }
.falling-bg span:nth-child(9)  { left: 68%; font-size: 2.9rem; animation-duration: 29s; animation-delay: -10s; opacity: 0.12; filter: blur(4px) saturate(0.55); }
.falling-bg span:nth-child(10) { left: 76%; font-size: 3.1rem; animation-duration: 21s; animation-delay: -3s;  opacity: 0.16; filter: blur(2.5px) saturate(0.7); }
.falling-bg span:nth-child(11) { left: 84%; font-size: 2.3rem; animation-duration: 26s; animation-delay: -14s; opacity: 0.14; filter: blur(3px) saturate(0.6); }
.falling-bg span:nth-child(12) { left: 92%; font-size: 2.7rem; animation-duration: 24s; animation-delay: -7s;  opacity: 0.15; filter: blur(2px) saturate(0.7); }
.falling-bg span:nth-child(13) { left: 8%;  font-size: 2rem;   animation-duration: 31s; animation-delay: -18s; opacity: 0.11; filter: blur(4.5px) saturate(0.5); }
.falling-bg span:nth-child(14) { left: 40%; font-size: 2.4rem; animation-duration: 33s; animation-delay: -22s; opacity: 0.10; filter: blur(5px) saturate(0.5); }
.falling-bg span:nth-child(15) { left: 64%; font-size: 3.3rem; animation-duration: 20s; animation-delay: -5s;  opacity: 0.14; filter: blur(3px) saturate(0.6); }
.falling-bg span:nth-child(16) { left: 88%; font-size: 2.6rem; animation-duration: 28s; animation-delay: -16s; opacity: 0.13; filter: blur(2.5px) saturate(0.65); }

[data-theme="dark"] .falling-bg span {
  opacity: 0.09;
  filter: blur(4px) saturate(0.4) brightness(1.3);
}

@keyframes fall {
  0% {
    transform: translateY(-12vh) translateX(0) rotate(0deg);
  }
  50% {
    transform: translateY(50vh) translateX(20px) rotate(180deg);
  }
  100% {
    transform: translateY(115vh) translateX(-20px) rotate(360deg);
  }
}

/* Contenedor por encima del fondo animado */
.container {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* =========================================
   HERO
   ========================================= */
/* =========================================
   HERO: Impacto visual, identidad vibrante
   ========================================= */
.hero {
  position: relative;
  padding: 3rem 1.5rem 2.5rem;
  margin: 1.5rem 0 2rem;
  text-align: center;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 2.5px solid var(--border-strong);
  box-shadow: var(--shadow-soft);
}

/* --- Decoraciones flotantes --- */
.hero-decos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hero-deco {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: 2.4rem;
  opacity: 0.25;
  filter: blur(1px) saturate(0.8);
  transform: rotate(var(--r));
  animation: floatDeco 6s var(--ease-boing) infinite alternate;
  animation-delay: var(--d);
  user-select: none;
}

[data-theme="dark"] .hero-deco {
  opacity: 0.15;
}

@keyframes floatDeco {
  0%   { transform: translateY(0) rotate(var(--r)) scale(1); }
  100% { transform: translateY(-18px) rotate(calc(var(--r) + 8deg)) scale(1.08); }
}

/* --- Contenido central --- */
.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jade-dark);
  background: var(--surface-elevated);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-strong);
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-soft);
}

.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jade);
  animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.6; }
}

[data-theme="dark"] .hero-badge {
  color: var(--jade);
}

/* --- Título principal --- */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 9vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
}

.hero-title-line {
  color: var(--ink);
  display: inline-block;
}

/* El resaltado con gradiente animado (efecto "shimmer") */
.hero-title-hl {
  display: inline-block;
  background: linear-gradient(
    95deg,
    var(--jade) 0%,
    var(--jade-bright) 30%,
    #B8F5D0 50%,
    var(--jade-bright) 70%,
    var(--jade) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerTitle 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(2, 154, 77, 0.25));
}

@keyframes shimmerTitle {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Subtítulo --- */
.hero-sub {
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto;
  font-weight: 400;
  line-height: 1.6;
}

/* --- Toggle de tema (sin cambios de posición) --- */
.theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  background: var(--surface-elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.35s var(--ease-boing);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  flex-shrink: 0;
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(15deg);
  border-color: var(--jade);
}

.icon-sun, .icon-moon {
  position: absolute;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-boing);
}

[data-theme="light"] .icon-moon { opacity: 0; transform: translateY(20px) rotate(-90deg); }
[data-theme="light"] .icon-sun  { opacity: 1; transform: translateY(0) rotate(0); }
[data-theme="dark"]  .icon-sun  { opacity: 0; transform: translateY(-20px) rotate(90deg); }
[data-theme="dark"]  .icon-moon { opacity: 1; transform: translateY(0) rotate(0); }

/* ========== Barra de progreso ========== */
.progress-wrapper {
  margin-bottom: 2rem;
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-input);
  padding: 1rem 1.2rem;
  box-shadow: var(--shadow-soft);
}

.progress-bar-container {
  width: 100%;
  height: 10px;
  background: var(--surface-input);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--mint-soft), var(--jade));
  border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-boing);
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
  text-align: right;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* =========================================
   TARJETAS DE PREGUNTA
   ========================================= */
.question {
  background: var(--surface);
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius-card);
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-soft);
  border: 1.5px solid var(--border-soft);
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s var(--ease-boing),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.5s ease;
}

.question.visible { opacity: 1; transform: translateY(0); }

.question:focus-within {
  border-color: var(--jade);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.question-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.question-icon {
  font-size: 1.25rem;
  line-height: 1.4;
  flex-shrink: 0;
  opacity: 0.9;
}

.question-label {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.45;
  transition: color 0.5s ease;
}

.required {
  color: #C53030;
  font-weight: 800;
  margin-left: 2px;
}

[data-theme="dark"] .required { color: #FC8181; }

.hint {
  display: block;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
  margin-left: 2rem;
  line-height: 1.55;
  transition: color 0.5s ease;
}

/* ========== Inputs ========== */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 0.95rem 1.15rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-input);
  background: var(--surface-input);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.25s var(--ease-boing),
    background-color 0.5s ease,
    color 0.5s ease;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-soft);
  opacity: 0.7;
}

input:focus,
textarea:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 4px rgba(2, 154, 77, 0.18);
  transform: scale(1.008);
  background: var(--surface-elevated);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
}

textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
}

/* =========================================
   RADIO BUTTONS
   ========================================= */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.radio-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-input);
  cursor: pointer;
  background: var(--surface-input);
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s var(--ease-boing),
    box-shadow 0.25s ease;
  user-select: none;
}

.radio-option:hover {
  border-color: var(--jade);
  background: var(--surface-elevated);
  transform: translateX(4px);
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-dot {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  margin-right: 0.9rem;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s var(--ease-boing);
  background: var(--surface);
}

.radio-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--jade);
  transition: transform 0.3s var(--ease-boing);
}

.radio-option input[type="radio"]:checked + .radio-dot {
  border-color: var(--jade);
}

.radio-option input[type="radio"]:checked + .radio-dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.radio-text {
  flex: 1;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
  transition: color 0.3s ease;
}

.radio-option:has(input[type="radio"]:checked) {
  border-color: var(--jade);
  background: var(--surface-elevated);
  box-shadow: 0 4px 14px rgba(2, 154, 77, 0.18);
  animation: boingSoft 0.5s var(--ease-boing);
}

@keyframes boingSoft {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  70%  { transform: scale(0.995); }
  100% { transform: scale(1); }
}

/* ========== Checkbox ========== */
.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  margin-left: 2rem;
}

.requirements-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.requirements-list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 0;
  color: var(--jade);
  font-weight: 800;
}

.accept-label {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-input);
  cursor: pointer;
  background: var(--surface-input);
  transition: all 0.3s ease;
  user-select: none;
}

.accept-label:hover {
  border-color: var(--jade);
  background: var(--surface-elevated);
}

.accept-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.accept-box {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-strong);
  border-radius: 7px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s var(--ease-boing);
  background: var(--surface);
  margin-top: 2px;
}

.accept-box::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(-45deg);
  color: white;
  font-weight: 900;
  font-size: 14px;
  transition: transform 0.3s var(--ease-boing);
}

.accept-label:has(input[type="checkbox"]:checked) .accept-box {
  background: var(--jade);
  border-color: var(--jade);
}

.accept-label:has(input[type="checkbox"]:checked) .accept-box::after {
  transform: translate(-50%, -50%) scale(1) rotate(0);
}

.accept-label:has(input[type="checkbox"]:checked) {
  border-color: var(--jade);
  background: var(--surface-elevated);
  animation: boingSoft 0.5s var(--ease-boing);
}

.accept-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ========== Teléfono ========== */
.phone-input-group {
  display: flex;
  gap: 0.6rem;
  margin-left: 2rem;
}

.phone-input-group select {
  flex: 0 0 170px;
  padding: 0.95rem 0.75rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-input);
  background: var(--surface-input);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.93rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.5s ease, color 0.5s ease;
}

.phone-input-group select:focus {
  border-color: var(--jade);
  box-shadow: 0 0 0 4px rgba(2, 154, 77, 0.18);
}

.phone-input-group input { flex: 1; min-width: 0; }

.phone-preview {
  color: var(--jade-dark);
  font-weight: 700;
  margin-top: 0.6rem;
  margin-bottom: 0;
  min-height: 1.2em;
  margin-left: 2rem;
  transition: color 0.5s ease;
}

[data-theme="dark"] .phone-preview { color: var(--jade); }

/* =========================================
   BOTÓN DE ENVÍO
   ========================================= */
.btn-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 1.2rem;
  margin-top: 2.2rem;
  background: var(--jade-bright);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 800;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: 0 8px 24px -4px rgba(2, 154, 77, 0.5);
  transition: transform 0.3s var(--ease-boing), box-shadow 0.3s ease, filter 0.3s ease, background-color 0.5s ease;
  letter-spacing: 0.01em;
}

.btn-submit:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 16px 32px -6px rgba(2, 154, 77, 0.6);
  filter: brightness(1.06);
  background: var(--jade-dark);
}

.btn-submit:active { transform: translateY(0) scale(0.98); }

.btn-emoji {
  font-size: 1.25rem;
  transition: transform 0.4s var(--ease-boing);
}

.btn-submit:hover .btn-emoji {
  transform: rotate(20deg) scale(1.2);
}

/* ========== Mensaje de éxito ========== */
.success-message {
  text-align: center;
  padding: 3.5rem 1.8rem;
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1.5px solid var(--border-strong);
  animation: popIn 0.7s var(--ease-boing);
  margin-top: 1rem;
}

.success-icon {
  font-size: 3.8rem;
  margin-bottom: 1rem;
  display: inline-block;
  animation: bounce 1.2s var(--ease-boing) infinite alternate;
}

.success-message h2 {
  font-family: var(--font-display);
  color: var(--jade-dark);
  margin-bottom: 0.6rem;
  font-size: 1.7rem;
  font-weight: 600;
}

[data-theme="dark"] .success-message h2 { color: var(--jade); }

.success-sub {
  color: var(--ink-soft);
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

.hidden { display: none !important; }

/* ========== Responsive ========== */
@media (max-width: 540px) {
  body { padding: 0 0.9rem 3rem; }
  .hero { padding: 1.8rem 1rem 1.5rem; margin-top: 0.8rem; }
  .title { font-size: 2rem; }
  .question { padding: 1.3rem 1.2rem; }
  .phone-input-group { flex-direction: column; margin-left: 0; }
  .phone-input-group select { flex: 1 1 auto; }
  .hint, .phone-preview { margin-left: 0; }
  .requirements-list { margin-left: 0; }
  .radio-option { padding: 0.8rem 0.95rem; }
  .radio-text { font-size: 0.94rem; }
  .theme-toggle { width: 40px; height: 40px; top: 0.7rem; right: 0.7rem; }
  .falling-bg span { font-size: 2rem !important; }
}

/* ========== Accesibilidad ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .question { opacity: 1; transform: none; }
  .hero-organic-shape, .falling-bg span { animation: none; }
  .falling-bg { display: none; }
}