/* ====================================================================
   Club emprenYA — Landing webinar
   Estilo según la referencia: hero navy con collage de fotos,
   secciones claras alternadas, formulario sobre bloque navy.
   Mobile-first.
==================================================================== */

/* ---------- Variables ---------- */
:root {
  /* Azules navy (bloques oscuros) */
  --navy-900: #0a1c33;
  --navy-800: #0d2440;
  --navy-700: #123158;
  --navy-600: #1a4173;

  /* Acentos */
  --gold: #f5b820;
  --gold-light: #ffd34d;
  --blue: #2f7ee3;
  --blue-light: #5ea0f0;
  --green: #3eb96a;
  --purple: #8b5cf6;
  --pink: #ec6a9c;

  /* Secciones claras */
  --light-bg: #ffffff;
  --grey-bg: #f3f6fb;
  --softblue-bg: #e7eff9;
  --ink: #182335;
  --ink-soft: #4a586e;
  --ink-muted: #7b8aa0;

  /* Texto sobre navy */
  --text: #eef2f9;
  --text-soft: #b7c3d8;
  --text-muted: #8294b0;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-dark: 0 20px 50px rgba(0, 0, 0, 0.35);
  --shadow-light: 0 14px 36px rgba(24, 47, 84, 0.1);

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--light-bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
figure { margin: 0; }

.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Tipografía de titulares (Fraunces) ----------
   Solo los titulares grandes llevan la serif de display.
   El cuerpo, la UI y los formularios siguen en Plus Jakarta Sans. */
.hero__title,
.section-title,
.register__title,
.register__lead,
.register__question,
.calm__title,
.form-card__title,
.thanks__title,
.legal-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

/* ---------- Secciones y títulos ---------- */
.section { padding: 70px 0; }
.section--light { background: var(--light-bg); }
.section--grey { background: var(--grey-bg); }

.section-title {
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 14px;
}

/* Subrayado dorado bajo los títulos (como la referencia) */
.title-underline {
  display: block;
  width: 64px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 2px;
  background: var(--gold);
}

.section-subtitle {
  color: var(--ink-soft);
  text-align: center;
  max-width: 560px;
  margin: 0 auto 36px;
}

.accent { color: var(--gold); }
.accent-blue { color: var(--blue); }

/* Palabra destacada con subrayado dorado ("para ti") */
.accent-underline {
  color: var(--blue);
  position: relative;
  white-space: nowrap;
}
.accent-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 4px;
  border-radius: 2px;
  background: var(--gold);
}

.section-cta { text-align: center; margin-top: 40px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation; /* sin retardo de doble-tap en móvil */
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn svg { width: 18px; height: 18px; }

.btn--primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #1d2433;
  padding: 16px 30px;
  box-shadow: 0 10px 30px rgba(245, 184, 32, 0.35);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(245, 184, 32, 0.45);
  filter: brightness(1.05);
}
.btn--primary:active { transform: translateY(0); }

.btn--lg { padding: 18px 36px; font-size: 1rem; }
.btn--block { width: 100%; }

/* Spinner del botón (estado de carga) */
.btn__spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.25);
  border-top-color: #1d2433;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn.is-loading { pointer-events: none; filter: saturate(0.8); }
.btn.is-loading .btn__label { opacity: 0.6; }
.btn.is-loading .btn__spinner { display: inline-block; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Animación de aparición al hacer scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ====================================================================
   HEADER (dentro del hero)
==================================================================== */
.header { position: relative; z-index: 5; padding: 22px 0 10px; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.logo { display: inline-flex; flex-direction: column; line-height: 1; }
.logo__img { height: 52px; width: auto; }
.logo__text { font-size: 1.5rem; font-weight: 800; color: #fff; }
.logo__ya { color: var(--gold); }
.logo__club {
  font-size: 0.6rem;
  letter-spacing: 0.45em;
  color: var(--gold);
  margin-top: 4px;
  font-weight: 700;
}

.header__brands { display: flex; align-items: center; gap: 18px; }
.header__brands img { width: auto; opacity: 0.95; }
/* Altura individual por logo para igualar su tamaño óptico:
   las letras de los tres quedan a una altura visual similar */
.header__brands img[src*="naturkin"] { height: 22px; }
.header__brands img[src*="viajaya"]  { height: 26px; }
.header__brands img[src*="tomaya"]   { height: 20px; }

.brand-logo {
  display: inline-flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.2;
}
.brand-logo b { display: contents; color: var(--gold); }
.brand-logo small {
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.brand-divider {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.18);
}

@media (max-width: 640px) {
  .header__brands { display: none; } /* en móvil solo el logo principal */
}

/* ====================================================================
   HERO
==================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(900px 480px at 90% 10%, rgba(47, 126, 227, 0.22), transparent 60%),
    linear-gradient(155deg, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
  color: var(--text);
  overflow: hidden;
}

/* Resplandor azul decorativo del lateral derecho (solo móvil;
   en escritorio lo sustituye el banner). Sin bordes: un borde aquí
   se veía como una línea partiendo la pantalla. */
.hero__blob {
  position: absolute;
  top: -10%;
  right: -35%;
  width: 90%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 126, 227, 0.22), rgba(13, 36, 64, 0) 75%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  gap: 46px;
  padding: 30px 20px 70px;
  align-items: center;
}

.hero__title {
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 18px;
}

.hero__subtitle {
  color: var(--text-soft);
  font-size: 1.02rem;
  max-width: 480px;
  margin-bottom: 26px;
}
.hero__subtitle strong { color: var(--gold); font-weight: 700; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 28px;
}
.meta-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.meta-chip svg { width: 26px; height: 26px; color: var(--gold); flex-shrink: 0; }
.meta-chip small {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.meta-chip strong { font-size: 0.95rem; }

.meta-chip__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Bandera de España dibujada con CSS (los emojis de bandera no se
   muestran en Windows, por eso no se usa 🇪🇸) */
.flag-es {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    #c60b1e 0% 25%,
    #ffc400 25% 75%,
    #c60b1e 75% 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.hero__note {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* --- Columna visual del hero ---
   Vacía a propósito: el presentador y las fotos van dentro del
   banner de fondo. Solo reserva el espacio y da altura al hero. */
.hero__visual {
  position: relative;
  display: none; /* móvil: se prioriza el texto y el CTA */
  min-height: 480px;
}

@media (min-width: 900px) {
  /* Banner anclado a la derecha, ajustado a la altura del hero
     (sin estirar: las formas conservan su tamaño natural).
     En anchuras intermedias (900-1250px) el banner invade la zona del
     texto, así que el degradado navy es más ancho e intenso: el texto
     flota sobre fondo limpio y las formas asoman solo por la derecha. */
  .hero {
    background:
      linear-gradient(90deg,
        var(--navy-900) 0%,
        rgba(10, 28, 51, 0.96) 34%,
        rgba(10, 28, 51, 0.6) 54%,
        rgba(10, 28, 51, 0) 78%),
      url("../assets/images/hero-banner.jpg") right center / auto 100% no-repeat var(--navy-900);
  }
  .hero__blob { display: none; } /* el banner ya trae sus propias curvas */

  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    padding-top: 50px;
    padding-bottom: 0;
  }
  .hero__visual { display: block; }
  .hero__content { padding-bottom: 70px; }
}

@media (min-width: 1250px) {
  /* Pantalla ancha: el banner cabe entero, degradado mucho más suave */
  .hero {
    background:
      linear-gradient(90deg,
        var(--navy-900) 0%,
        rgba(10, 28, 51, 0.55) 22%,
        rgba(10, 28, 51, 0) 42%),
      url("../assets/images/hero-banner.jpg") right center / auto 100% no-repeat var(--navy-900);
  }
}

/* ====================================================================
   CONTADOR REGRESIVO (franja navy bajo el hero)
==================================================================== */
.countdown {
  padding: clamp(34px, 5vw, 48px) 0;
  background: var(--navy-900);
  color: var(--text);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.countdown__label {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
/* 4 columnas iguales que ocupan la línea completa (hasta 780px)
   y se encogen solas en móvil */
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2.5vw, 20px);
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
}
.countdown__box {
  padding: clamp(14px, 3vw, 26px) 6px;
  text-align: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.countdown__box span {
  display: block;
  font-size: clamp(1.9rem, 7.5vw, 3.4rem);
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.countdown__box small {
  display: block;
  margin-top: 4px;
  font-size: clamp(0.58rem, 1.6vw, 0.74rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.countdown.is-live .countdown__label { color: var(--gold); font-weight: 700; }

/* ====================================================================
   VIDEO (fondo blanco)
==================================================================== */
.video-wrapper {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-light);
  background: var(--navy-900);
}
.video-wrapper iframe,
.video-wrapper video,
.video-wrapper wistia-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ====================================================================
   QUÉ VAS A DESCUBRIR (fondo gris claro, tarjetas blancas con foto)
==================================================================== */
.discover__grid {
  display: grid;
  gap: 22px;
  margin-top: 44px;
}

.discover-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 18px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-light);
  text-align: center;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.discover-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(24, 47, 84, 0.16);
}

.discover-card__title {
  padding-top: 28px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.discover-card__title--green  { color: var(--green); }
.discover-card__title--blue   { color: var(--blue); }
.discover-card__title--yellow { color: #d99e0b; }

.discover-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  padding: 0 24px;
  margin-bottom: 20px;
}
.discover-card p strong { color: var(--ink); }

/* Contenedor de la mascota: fondo suave del color de cada pilar */
.discover-card__img {
  margin: auto 18px 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: end center;
  padding: 16px 16px 0;
}
.discover-card__img img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(24, 47, 84, 0.18));
}
.discover-card__img--green {
  background: radial-gradient(circle at 50% 115%, rgba(62, 185, 106, 0.28), rgba(62, 185, 106, 0.07));
}
.discover-card__img--blue {
  background: radial-gradient(circle at 50% 115%, rgba(47, 126, 227, 0.26), rgba(47, 126, 227, 0.07));
}
.discover-card__img--yellow {
  background: radial-gradient(circle at 50% 115%, rgba(245, 184, 32, 0.3), rgba(245, 184, 32, 0.08));
}

@media (min-width: 760px) {
  .discover__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ====================================================================
   BLOQUE CENTRAL + FORMULARIO (fondo navy)
==================================================================== */
.register {
  position: relative;
  padding: 80px 0;
  background:
    radial-gradient(700px 420px at 10% 90%, rgba(47, 126, 227, 0.14), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: var(--text);
  overflow: hidden;
}

/* Icono decorativo de persona (lateral izquierdo, como la referencia) */
.register__deco {
  position: absolute;
  left: -60px;
  bottom: -40px;
  width: 340px;
  height: 340px;
  color: rgba(94, 160, 240, 0.12);
  pointer-events: none;
}
.register__deco svg { width: 100%; height: 100%; }

.register__inner {
  position: relative;
  display: grid;
  gap: 44px;
  align-items: center;
}

.register__title {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
}
.register__lead {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 18px;
  line-height: 1.35;
}
.register__text p { color: var(--text-soft); margin-bottom: 12px; }

.register__question-label { margin-bottom: 2px !important; }
.register__question {
  color: var(--gold) !important;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.4;
  margin-bottom: 18px !important;
}

/* Tarjeta del formulario (blanca, como la referencia) */
.form-card {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-dark);
  scroll-margin-top: 16px; /* respiro al hacer scroll al formulario */
}
.form-card__title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy-700);
  text-align: center;
}
.form-card__subtitle {
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 6px 0 22px;
}

.form-field { position: relative; margin-bottom: 14px; }

.form-field input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 0.95rem;
  border: 1.5px solid #dde3ee;
  border-radius: var(--radius-sm);
  background: #f7f9fc;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-field input::placeholder { color: #93a0b8; }
.form-field input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 184, 32, 0.18);
}

/* Campo de teléfono internacional (intl-tel-input) */
.form-field--tel .iti { width: 100%; display: block; }
.form-field--tel .iti__tel-input { width: 100%; }
/* "+34" centrado verticalmente y con un "+" alineado con los dígitos */
.form-field--tel .iti__selected-dial-code {
  color: var(--ink);
  font-family: Arial, "Helvetica Neue", system-ui, sans-serif;
  line-height: 1;
}
.form-field--tel .iti__selected-country,
.form-field--tel .iti__selected-country-primary { display: flex; align-items: center; }
.form-field--tel.has-error .iti { border-radius: var(--radius-sm); }
/* Banderita un poco más grande y visible */
.form-field--tel .iti__flag { transform: scale(1.45); transform-origin: center; margin: 0 6px 0 2px; }
.form-field--tel .iti__selected-country { padding-left: 4px; }

/* Errores de validación */
.form-error {
  display: none;
  font-size: 0.78rem;
  color: #d93838;
  margin: 4px 4px 0;
}
.form-field.has-error input { border-color: #d93838; background: #fff5f5; }
.form-field.has-error .form-error { display: block; }

/* --- Consentimiento de privacidad --- */
.form-acepto { margin: 2px 2px 14px; }

.form-acepto__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.form-acepto__label input {
  /* checkbox nativo oculto pero accesible */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Casilla dibujada */
.form-acepto__box {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 2px solid #c4cddd;
  background: #f7f9fc;
  color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.form-acepto__box svg { width: 13px; height: 13px; }

.form-acepto__label input:checked + .form-acepto__box {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: var(--gold);
  color: #1d2433;
}
.form-acepto__label input:focus-visible + .form-acepto__box {
  box-shadow: 0 0 0 3px rgba(245, 184, 32, 0.25);
}

.form-acepto__text {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.form-acepto__text a { color: var(--blue); font-weight: 700; }
.form-acepto__text a:hover { text-decoration: underline; }

/* Mensaje amigable cuando falta marcar la casilla */
.form-acepto__error {
  display: none;
  margin: 8px 0 0 31px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #b3661a;
  background: rgba(245, 184, 32, 0.14);
  border-radius: 8px;
  padding: 8px 12px;
}
.form-acepto.has-error .form-acepto__error { display: block; }
.form-acepto.has-error .form-acepto__box { border-color: #e09f10; }

.form-acepto.is-shaking { animation: consent-shake 0.4s ease; }
@keyframes consent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.form-card .btn--primary { margin-top: 6px; }

.form-card__privacy {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 16px;
}

@media (min-width: 900px) {
  .register__inner { grid-template-columns: 1fr 440px; gap: 70px; }
}

/* ====================================================================
   PARA QUIÉN ES (fondo blanco, 6 iconos)
==================================================================== */
.audience__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 18px;
  max-width: 1000px;
  margin: 50px auto 0;
}

.audience-item { text-align: center; }
.audience-item p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.audience-item p strong { color: var(--ink); }

/* Badges premium: "squircle" con degradado del color, borde sutil,
   sombra de color y brillo interior. El color base de cada uno se
   define como --c (r,g,b) en su modificador. */
.audience-item__icon {
  --c: 139, 92, 246;
  width: 78px; height: 78px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  color: rgb(var(--c));
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, rgba(var(--c), 0.22), rgba(var(--c), 0.08));
  border: 1px solid rgba(var(--c), 0.28);
  box-shadow:
    0 14px 26px -10px rgba(var(--c), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.audience-item__icon svg {
  width: 34px; height: 34px;
  filter: drop-shadow(0 3px 4px rgba(var(--c), 0.35));
}
.audience-item:hover .audience-item__icon {
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    0 20px 32px -10px rgba(var(--c), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.audience-item__icon--purple { --c: 139, 92, 246; }
.audience-item__icon--pink   { --c: 233, 78, 138; }
.audience-item__icon--blue   { --c: 47, 126, 227; }
.audience-item__icon--green  { --c: 38, 169, 92; }
.audience-item__icon--yellow { --c: 224, 159, 16; }
.audience-item__icon--indigo { --c: 79, 100, 229; }

@media (min-width: 760px) {
  .audience__grid { grid-template-columns: repeat(6, 1fr); }
}

/* ====================================================================
   Y LO MÁS IMPORTANTE… (fondo azul claro)
==================================================================== */
.calm {
  padding: 70px 0;
  background: var(--softblue-bg);
}

.calm__inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

/* Persona recortada (PNG sin fondo) sobre un degradado suave */
.calm__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 340px;
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Arco de color detrás de la persona: cúpula arriba y base plana,
   para que el corte inferior de la foto coincida con la forma */
.calm__photo::before {
  content: "";
  position: absolute;
  inset: 13% 3% 0;
  border-radius: 175px 175px 22px 22px;
  background:
    radial-gradient(circle at 50% 18%, rgba(47, 126, 227, 0.22), rgba(47, 126, 227, 0.07) 72%),
    #d8e4f2;
}
.calm__photo img,
.calm__photo picture {
  position: relative;
  width: 100%;
  height: 100%;
}
.calm__photo img {
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 26px rgba(24, 47, 84, 0.22));
}

.calm__title {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 800;
  color: var(--navy-700);
  margin-bottom: 22px;
}

.calm__list { display: grid; gap: 14px; }
.calm__list li {
  position: relative;
  padding-left: 36px;
  color: var(--ink-soft);
  font-weight: 500;
}
.calm__list li strong { color: var(--ink); }
.calm__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

/* Tarjeta navy premium con el "camino" dorado de fondo */
.calm__aside {
  position: relative;
  overflow: hidden;
  padding: 36px 28px;
  border-radius: var(--radius);
  text-align: center;
  background:
    radial-gradient(220px 160px at 85% 0%, rgba(47, 126, 227, 0.25), transparent 70%),
    linear-gradient(160deg, var(--navy-700), var(--navy-900));
  border: 1px solid rgba(245, 184, 32, 0.3);
  box-shadow: 0 24px 48px -16px rgba(13, 36, 64, 0.45);
}
.calm__aside p {
  position: relative;
  color: var(--text-soft);
}
.calm__aside p strong { color: #fff; }

.calm__aside-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
}

.calm__aside-icon {
  position: relative;
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-900);
  box-shadow: 0 10px 24px rgba(245, 184, 32, 0.35);
}
.calm__aside-icon svg { width: 28px; height: 28px; }

/* Rejilla de 2 columnas idénticas: los chips miden EXACTAMENTE igual,
   independientemente de la longitud de su texto */
.calm__aside-options {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 280px;
  margin: 18px auto 14px;
}
.calm__aside-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.calm__aside-chip svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--gold);
}
.calm__aside-highlight {
  margin-top: 4px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--gold) !important;
}

@media (min-width: 900px) {
  .calm__inner { grid-template-columns: 320px 1fr 300px; gap: 50px; }
}

/* ====================================================================
   FAQ (fondo blanco, dos columnas)
==================================================================== */
.faq__grid {
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin: 44px auto 0;
}

.faq-item {
  border-radius: var(--radius-sm);
  background: var(--grey-bg);
  border: 1px solid #e4eaf3;
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

/* Icono en tile navy (coherente con los iconos premium de la variante) */
.faq-item__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color: var(--blue-light);
}
.faq-item__icon svg { width: 18px; height: 18px; }

.faq-item__chevron {
  flex-shrink: 0;
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-item__chevron { transform: rotate(225deg); }

.faq-item p {
  padding: 0 20px 16px 66px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

@media (min-width: 760px) {
  .faq__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ====================================================================
   FOOTER (navy)
==================================================================== */
.footer {
  position: relative;
  background:
    radial-gradient(600px 280px at 85% 0%, rgba(47, 126, 227, 0.1), transparent 65%),
    var(--navy-900);
  color: var(--text);
  padding-top: 44px;
}

/* Línea dorada de remate en el borde superior */
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  opacity: 0.85;
}

.footer__inner {
  display: grid;
  gap: 28px;
  padding-bottom: 36px;
}

.footer__brand { display: flex; flex-direction: column; }
.footer__pillars {
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
}
.footer__tagline {
  margin-top: 4px;
  font-size: 0.85rem;
  max-width: 340px;
  color: var(--text-muted);
}

.footer__partners small,
.footer__social small {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 18px;
}

/* Logos colaboradores: SIEMPRE en una sola línea */
.footer__partner-logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
}
.footer__partner-logos img {
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.footer__partner-logos img:hover { opacity: 1; }
/* Altura individual por logo para igualar su tamaño óptico
   (cada wordmark tiene proporciones distintas de origen) */
.footer__partner-logos img[src*="naturkin"] { height: 18px; }
.footer__partner-logos img[src*="viajaya"]  { height: 22px; }
.footer__partner-logos img[src*="tomaya"]   { height: 17px; }
.footer__brand .logo__img { height: 56px; align-self: flex-start; }

/* Iconos sociales: SIEMPRE en fila */
.footer__social-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
}
.footer__social-icons a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-soft);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.footer__social-icons a:hover {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent;
  color: var(--navy-900);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(245, 184, 32, 0.3);
}
.footer__social-icons svg { width: 18px; height: 18px; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
}

/* Descargo de Meta/Google (requisito al anunciarse en sus plataformas) */
.footer__disclaimer {
  font-size: 0.7rem;
  line-height: 1.5;
  color: rgba(130, 148, 176, 0.75);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__legal a:hover { color: var(--gold); }

@media (min-width: 860px) {
  /* Marcas en el CENTRO exacto de la página; la marca propia y las
     redes cubren los laterales (1fr a cada lado las equilibra) */
  .footer__inner {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
  }
  .footer__brand { justify-self: start; }
  .footer__partners { justify-self: center; }
  .footer__social { justify-self: end; text-align: center; }
  .footer__social small { margin-bottom: 12px; }

  /* Footer sin logos ni redes (cabecera inferior): solo queda el bloque de
     texto → una sola columna centrada, anulando el 1fr auto 1fr y el
     justify-self:start de la base que lo dejaban descentrado */
  .footer--lean .footer__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .footer--lean .footer__brand { justify-self: center; align-items: center; }
}

/* ====================================================================
   PÁGINA DE GRACIAS (mantiene el estilo navy premium)
==================================================================== */
.thanks {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 60px 0;
  color: var(--text);
  background:
    radial-gradient(800px 480px at 50% -10%, rgba(47, 126, 227, 0.18), transparent 60%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 70%);
}

.thanks__card {
  max-width: 560px;
  margin: 0 20px;
  padding: 46px 32px;
  text-align: center;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-dark);
}

.thanks__check {
  position: relative;
  width: 76px; height: 76px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(62, 185, 106, 0.18);
  color: #4ade80;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.thanks__check svg { width: 38px; height: 38px; }

/* Anillo pulsante alrededor del check */
.thanks__check::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(74, 222, 128, 0.5);
  animation: anillo 2s ease-out 0.5s infinite;
}
@keyframes anillo {
  0%   { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Pasos "qué sigue ahora" */
.thanks__pasos {
  display: grid;
  gap: 14px;
  margin: 24px 0 28px;
  text-align: left;
}
.thanks__paso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.thanks__paso p {
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}
.thanks__paso p strong { color: #fff; }
.thanks__paso .flag-es { vertical-align: -2px; margin-left: 2px; }

.thanks__paso-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--navy-900);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}

/* Confeti de celebración */
.confeti {
  position: fixed;
  top: -14px;
  z-index: 99;
  border-radius: 2px;
  pointer-events: none;
  animation: confeti-cae linear forwards;
}
@keyframes confeti-cae {
  to {
    transform: translateY(105vh) rotate(var(--giro, 540deg));
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .confeti { display: none; }
  .thanks__check::after { animation: none; opacity: 0; }
}

@keyframes pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.thanks__title {
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 800;
  margin-bottom: 16px;
}
.thanks__text {
  color: var(--text-soft);
  margin-bottom: 30px;
}

.btn--whatsapp {
  background: linear-gradient(135deg, #2ee06f, #25d366);
  color: #07351c;
  padding: 18px 32px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3);
  animation: wa-latido 1.9s ease-in-out infinite; /* resalta para captar el clic */
}
@keyframes wa-latido {
  0%, 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.3); transform: translateY(0); }
  50%      { box-shadow: 0 14px 44px rgba(37, 211, 102, 0.55), 0 0 0 8px rgba(37, 211, 102, 0.10); transform: translateY(-2px); }
}
.btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(37, 211, 102, 0.45);
  animation: none; /* al pasar el ratón, quieto */
}
.btn--whatsapp svg { width: 22px; height: 22px; }

.thanks__disclaimer {
  margin-top: 20px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.thanks__logo { margin-bottom: 30px; }
.thanks__logo .logo__img { margin-inline: auto; }

/* Wordmark neutro (sin logo de marca): se usa en el footer de la variante y
   en la cabecera de las dos páginas de gracias */
.brand-neutral {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--text);
}
.brand-neutral b { color: var(--gold); font-weight: 700; }

/* Móvil: compactar para que el botón de WhatsApp se vea al llegar */
@media (max-width: 560px) {
  .thanks { padding: 22px 0; align-items: start; }
  .thanks__card { padding: 26px 20px; margin: 0 14px; }
  .thanks__logo { margin-bottom: 16px; }
  .thanks__check { width: 54px; height: 54px; margin-bottom: 12px; }
  .thanks__check svg { width: 26px; height: 26px; }
  .thanks__title { margin-bottom: 8px; }
  .thanks__text { margin-bottom: 14px; font-size: 0.9rem; }
  .thanks__pasos { gap: 8px; margin: 12px 0 16px; }
  .thanks__paso { padding: 9px 12px; }
  .thanks__paso p { font-size: 0.82rem; }
  .thanks__paso-num { width: 22px; height: 22px; font-size: 0.72rem; }
  .btn--whatsapp { padding: 15px 20px; }
  .thanks__disclaimer { margin-top: 12px; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--whatsapp { animation: none; }
}

/* ---------- Gracias: botón con subtítulo + reseña social ---------- */
.btn--whatsapp.btn--stack { flex-direction: column; gap: 2px; line-height: 1.15; padding: 16px 28px; }
.btn--whatsapp .btn__main { display: inline-flex; align-items: center; gap: 9px; font-size: 1.06rem; font-weight: 800; }
.btn--whatsapp .btn__sub { font-size: 0.82rem; font-weight: 600; opacity: 0.82; }

.thanks__social {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 22px; padding: 13px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-sm);
}
.thanks__avatars { display: flex; flex-shrink: 0; }
.thanks__avatars .av {
  width: 38px; height: 38px; border-radius: 50%; margin-left: -11px;
  border: 2px solid #0d2440; display: grid; place-items: center;
  font-size: 0.74rem; font-weight: 800; color: #fff;
}
.thanks__avatars .av:first-child { margin-left: 0; }
/* Fotos de personas reales. Si la imagen aún no existe, el navegador muestra
   el degradado de la 2ª capa como respaldo (sin icono de imagen rota).
   La letra se oculta (color transparent) para no verse sobre la foto. */
.thanks__avatars .av--1 { background: url('../assets/images/avatares/persona-1.jpg') center/cover no-repeat, linear-gradient(135deg, #f5b820, #e09f10); color: transparent; }
.thanks__avatars .av--2 { background: url('../assets/images/avatares/persona-2.jpg') center/cover no-repeat, linear-gradient(135deg, #2f7ee3, #5ea0f0); color: transparent; }
.thanks__avatars .av--3 { background: url('../assets/images/avatares/persona-3.jpg') center/cover no-repeat, linear-gradient(135deg, #8b5cf6, #ec6a9c); color: transparent; }
.thanks__avatars .av--count { background: linear-gradient(135deg, #3eb96a, #2ea358); }
.thanks__social-txt { text-align: left; }
.thanks__stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 2px; }
.thanks__social-txt p { font-size: 0.82rem; color: var(--text-soft); margin: 2px 0 0; }
.thanks__social-txt p strong { color: #fff; }
@media (max-width: 560px) {
  /* Botón: que "Me uno a la comunidad" quede en UNA línea a lo ancho del
     botón (antes se apilaba en dos líneas y se veía apretado) */
  .btn--whatsapp.btn--stack { padding: 13px 16px; gap: 1px; }
  .btn--whatsapp .btn__main { font-size: 0.95rem; gap: 7px; white-space: nowrap; }
  .btn--whatsapp .btn__main svg { width: 18px; height: 18px; }

  /* Prueba social: más aire entre los avatares/"+1000" y el texto */
  .thanks__social { gap: 16px; padding: 11px 13px; margin-top: 16px; }
  .thanks__avatars .av { width: 32px; height: 32px; }
  .thanks__social-txt p { font-size: 0.76rem; }
}

/* ====================================================================
   PRUEBA SOCIAL — aviso "X se ha registrado desde..."
   (clases neutras "rt-": evitar palabras que filtren los adblockers)
==================================================================== */
.rt-toast {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(330px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 14px 36px rgba(24, 47, 84, 0.25);
  border: 1px solid #e4eaf3;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.21, 1.02, 0.73, 1), opacity 0.45s ease;
  pointer-events: none;
}
.rt-toast.is-on { transform: none; opacity: 1; }

.rt-toast__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
}
.rt-toast__body { display: flex; flex-direction: column; }
.rt-toast__text { font-size: 0.84rem; line-height: 1.35; }
.rt-toast__text strong { color: var(--ink); }

.rt-toast__meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--ink-muted);
}
.rt-toast__check {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.rt-toast__check svg { width: 8px; height: 8px; }

@media (prefers-reduced-motion: reduce) {
  .rt-toast { transition: opacity 0.3s ease; transform: none; }
}

/* ====================================================================
   PÁGINAS LEGALES (privacidad, aviso legal, cookies)
==================================================================== */
.legal-header {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  padding: 26px 0 60px;
}
.legal-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.legal-header .logo__img { height: 44px; }

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.2s ease, color 0.2s ease;
}
.legal-back:hover { background: var(--gold); border-color: transparent; color: var(--navy-900); }
.legal-back svg { width: 15px; height: 15px; }

.legal-title {
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  margin-top: 34px;
}
.legal-updated {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 6px;
}

/* Menú de interconexión entre las tres páginas */
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.legal-nav a {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background 0.2s ease, color 0.2s ease;
}
.legal-nav a:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.legal-nav a.is-active {
  background: var(--gold);
  border-color: transparent;
  color: var(--navy-900);
}

/* Cuerpo del documento */
.legal-body {
  background: var(--grey-bg);
  padding: 0 0 70px;
}
.legal-card {
  max-width: 860px;
  margin: -30px auto 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  padding: clamp(28px, 5vw, 52px);
  color: var(--ink-soft);
}
.legal-card h2 {
  color: var(--navy-700);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 30px 0 10px;
}
.legal-card h2:first-child { margin-top: 0; }
.legal-card p { margin-bottom: 12px; font-size: 0.95rem; }
.legal-card ul { margin: 0 0 12px 20px; list-style: disc; font-size: 0.95rem; }
.legal-card li { margin-bottom: 6px; }
.legal-card strong { color: var(--ink); }
.legal-card a { color: var(--blue); font-weight: 600; }
.legal-card a:hover { text-decoration: underline; }

/* Aviso de datos pendientes de completar */
.legal-placeholder {
  background: rgba(245, 184, 32, 0.12);
  border: 1px dashed rgba(217, 158, 11, 0.5);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.85rem;
  margin-bottom: 24px;
}

/* Pie sencillo de las páginas legales */
.legal-footer {
  background: var(--navy-900);
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 18px 0;
}
.legal-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.legal-footer a { color: var(--text-soft); }
.legal-footer a:hover { color: var(--gold); }