/* Tipografía de marca para el wordmark "BELIZE BOX" */
  @font-face {
    font-family: 'Horizon';
    src: url('../fonts/Horizon.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  /* ============ Tokens (auditoría: centralizados, antes inline) ============ */
  :root {
    --navy: #020618;          /* fondo principal */
    --navy-2: #0f172b;        /* tarjetas oscuras */
    --navy-3: #1d293d;        /* tarjetas oscuras alt */
    --yellow: #dbde54;        /* amarillo de marca (solo sobre fondos oscuros) */
    --yellow-2: #aaee17;
    --accent-on-light: #80830f; /* FIX contraste: acento de marca sobre blanco (4.1:1) */
    --muted-on-dark: #99a1af;   /* FIX contraste: antes #6a7282 (3.7:1), ahora 6.9:1 */
    --muted-on-light: #6a7282;  /* ok sobre blanco (4.8:1) */
    --ink: #0a0a0a;
    --line-dark: rgba(255,255,255,0.08);
    --radius: 6px;
    --font: "Inter", sans-serif;
    --pad-x: clamp(24px, 6vw, 120px);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  /* el atributo hidden debe ganar a display:flex/grid de los contenedores */
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
  body { font-family: var(--font); background: var(--navy); color: #fff; line-height: 1.65; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; border: 0; background: none; cursor: pointer; }
  a { color: inherit; }
  .wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 900; font-size: 14px; }
  h1, h2, h3 { text-transform: uppercase; font-weight: 900; font-style: italic; letter-spacing: -0.05em; line-height: 1.05; }
  .grad-text { background-image: linear-gradient(140deg, #dbde54 7%, #aaee17 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* FIX accesibilidad: foco visible consistente en todo el sitio */
  :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
  .on-light :focus-visible, .sec-light :focus-visible { outline-color: var(--accent-on-light); }

  /* FIX accesibilidad: skip link */
  .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--yellow); color: var(--navy); padding: 12px 20px; font-weight: 900; text-transform: uppercase; }
  .skip-link:focus { left: 12px; top: 12px; }

  .btn { display: inline-block; border-radius: var(--radius); text-transform: uppercase; font-weight: 900; letter-spacing: 0.05em; font-size: 14px; transition: background .2s, transform .15s; text-align: center; text-decoration: none; }
  body { overflow-x: hidden; }
  .btn:active { transform: scale(0.99); }
  .btn-yellow { background: var(--yellow); color: var(--navy); padding: 16px 28px; }
  .btn-yellow:hover { background: #c9cc44; }
  .btn-dark { background: var(--navy); color: #fff; padding: 16px 28px; }
  .btn-dark:hover { background: var(--navy-2); }
  .btn-wa { display: inline-flex; align-items: center; gap: 10px; }
  .btn-wa svg { width: 20px; height: 20px; flex-shrink: 0; }

  /* ============ NavBar — FIX: mismo azul de marca (antes gris #27292c) ============ */
  .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 76px; display: flex; align-items: center; background: rgba(2,6,24,0.88); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-dark); transition: background .3s; }
  .nav.scrolled { background: rgba(2,6,24,0.97); }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand img { height: 42px; width: auto; }
  /* Wordmark con la tipografía de marca Horizon */
  .brand span { color: #fff; text-transform: uppercase; letter-spacing: 0.04em; font-family: 'Horizon', 'Inter', sans-serif; font-weight: normal; font-style: normal; font-size: clamp(17px, 2vw, 21px); white-space: nowrap; }
  .nav-links { display: none; align-items: center; gap: 22px; list-style: none; height: 100%; }
  .nav-links a { color: var(--muted-on-dark); text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; font-weight: 500; transition: color .2s; white-space: nowrap; }
  .nav-links a:hover { color: #fff; }

  /* Desplegable "Centros" (solo escritorio) */
  .nav-links .has-dropdown { position: relative; align-self: stretch; display: flex; align-items: center; }
  .nav-drop-toggle { height: 100%; color: var(--muted-on-dark); background: none; border: 0; cursor: pointer; font-family: inherit; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: color .2s; }
  .nav-drop-toggle svg { transition: transform .2s; }
  .has-dropdown:hover .nav-drop-toggle, .nav-drop-toggle:focus-visible { color: #fff; }
  .has-dropdown:hover .nav-drop-toggle svg { transform: rotate(180deg); }
  .nav-dropdown { position: absolute; top: 100%; left: 0; margin: 0; padding: 8px; min-width: 170px; list-style: none; background: rgba(2,6,24,0.98); border: 1px solid var(--line-dark); border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.45); display: none; flex-direction: column; gap: 2px; z-index: 50; }
  .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown { display: flex; }
  .nav-dropdown a { display: block; padding: 9px 12px; border-radius: 4px; }
  .nav-dropdown a:hover { color: #fff; background: rgba(255,255,255,0.06); }

  .nav-cta { background: var(--yellow); border-radius: var(--radius); padding: 12px 18px; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; font-weight: 700; text-decoration: none; white-space: nowrap; }
  /* color forzado para ganar a la regla genérica .nav-links a (texto negro de marca) */
  .nav-links .nav-cta, .nav-links .nav-cta:hover { color: var(--navy); }
  .nav-cta:hover { background: #c9cc44; }
  .burger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; }
  .burger span { display: block; width: 24px; height: 2px; background: #fff; }
  @media (min-width: 1024px) {
    .nav-links { display: flex; }
    .burger { display: none; }
  }
  .mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--navy-2); border-top: 1px solid var(--line-dark); padding: 16px 24px 24px; }
  .mobile-menu.open { display: block; }
  .mobile-menu a { display: block; color: var(--muted-on-dark); text-decoration: none; text-transform: uppercase; font-size: 13px; letter-spacing: 0.05em; font-weight: 500; padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .mobile-menu a:hover { color: #fff; }
  .mobile-menu .nav-cta { display: block; margin-top: 16px; text-align: center; color: var(--navy); }
  .mobile-menu .nav-cta:hover { color: var(--navy); }

  /* ============ Hero ============ */
  .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
  .hero-bg { position: absolute; inset: 0; }
  .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; opacity: 0.6; }
  .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(2,6,24,0.85), rgba(2,6,24,0.45), transparent), rgba(0,0,0,0.25); }
  .hero-content { position: relative; z-index: 1; padding-top: 130px; padding-bottom: 90px; }
  .hero h1 { color: #fff; font-size: clamp(52px, 8vw, 96px); margin-bottom: 16px; max-width: 640px; }
  .hero h1 .grad-text { display: block; }
  .hero p { color: rgba(255,255,255,0.9); font-size: clamp(17px, 2vw, 20px); max-width: 560px; margin-bottom: 32px; }
  .stats { display: flex; flex-wrap: wrap; gap: 32px 48px; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line-dark); }
  .stats .num { color: var(--yellow); font-weight: 900; font-size: clamp(29px, 3vw, 35px); line-height: 1; }
  .stats .lbl { color: #fff; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700; margin-top: 6px; }

  /* ============ Secciones claras / oscuras ============ */
  section { scroll-margin-top: 80px; }
  .sec { padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); }
  .sec-light { background: #fff; color: var(--ink); }
  .sec-grayish { background: #f8fafc; color: var(--ink); }
  .sec-light .eyebrow, .sec-grayish .eyebrow { color: var(--muted-on-light); }
  .sec h2 { font-size: clamp(36px, 6vw, 60px); margin-bottom: 16px; }

  /* ============ About ============ */
  .about-cols { display: flex; flex-direction: column; gap: 48px; align-items: flex-start; }
  @media (min-width: 1280px) { .about-cols { flex-direction: row; gap: 64px; } }
  .about-main { flex: 1; min-width: 0; }
  /* Letras destacadas en el amarillo de marca Belize (decisión de marca sobre contraste) */
  .accent-letter { color: var(--yellow); font-style: italic; }
  .about-main > p.lead { color: #4a5565; font-size: clamp(16px, 2vw, 18px); margin-bottom: 40px; max-width: 720px; }
  .features { display: grid; grid-template-columns: 1fr; gap: 28px; }
  @media (min-width: 640px) { .features { grid-template-columns: 1fr 1fr; } }
  .feature .icon { background: var(--navy-2); border-radius: var(--radius); width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
  .feature .icon svg { stroke: var(--yellow); }
  .feature h3 { font-size: 17px; letter-spacing: -0.02em; margin-bottom: 8px; }
  .feature p { color: var(--muted-on-light); font-size: 14px; }
  /* FIX feedback: banner en vertical (foto arriba, tarjeta debajo) para que no quede desencajado */
  .about-aside { width: 100%; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; }
  @media (min-width: 1280px) { .about-aside { width: 380px; flex-shrink: 0; } }
  .about-aside img { width: 100%; height: 340px; object-fit: cover; object-position: center 30%; }
  @media (min-width: 1280px) { .about-aside img { height: 420px; } }
  .join-card { background: var(--navy); padding: 24px; display: flex; flex-direction: column; justify-content: center; text-decoration: none; cursor: pointer; transition: background .2s; }
  .join-card:hover { background: var(--navy-2); }
  .join-card .t { color: var(--yellow); text-transform: uppercase; font-style: italic; font-weight: 900; font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.05em; line-height: 1.15; margin-bottom: 8px; transition: transform .2s; }
  .join-card:hover .t { transform: translateX(2px); }
  .join-card .s { color: var(--muted-on-dark); font-size: 13px; line-height: 1.5; }

  /* ============ Activities ============ */
  .acts-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 44px; }
  @media (min-width: 768px) { .acts-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
  .acts-head .eyebrow { color: var(--yellow); margin-bottom: 12px; }
  .acts-head h2 { color: #fff; font-size: clamp(44px, 7vw, 72px); margin: 0; }
  .acts-head .side { color: #f1f5f9; font-size: 17px; max-width: 280px; }
  @media (min-width: 768px) { .acts-head .side { text-align: right; } }
  .acts-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 640px) { .acts-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .acts-grid { grid-template-columns: 1fr 1fr 1fr; } }
  /* FIX accesibilidad: la tarjeta entera es un <button> real con aria-label */
  .act-card { display: block; width: 100%; text-align: left; border-radius: var(--radius); border: 1px solid var(--line-dark); padding: 32px 32px 40px; position: relative; overflow: hidden; transition: border-color .3s, transform .2s; color: #fff; }
  .act-card:hover { border-color: rgba(219,222,84,0.35); transform: translateY(-2px); }
  .act-card .tag { color: var(--yellow); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 900; font-size: 12px; margin-bottom: 10px; }
  .act-card h3 { font-size: clamp(22px, 2.5vw, 28px); letter-spacing: -0.025em; margin-bottom: 6px; }
  .act-card .centers { color: var(--muted-on-dark); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; font-weight: 700; margin-bottom: 12px; }
  .act-card .desc { color: var(--muted-on-dark); font-size: 14px; margin-bottom: 32px; }
  .act-card .more { color: #fff; text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; transition: color .2s; }
  .act-card .more::after { content: ""; width: 24px; height: 1px; background: currentColor; }
  .act-card:hover .more { color: var(--yellow); }

  /* ============ CTA banner ============ */
  .cta-banner { background: linear-gradient(135deg, #dbde54 0%, #aaee17 100%); color: var(--navy); }
  .cta-banner .inner { padding-top: clamp(48px, 6vw, 64px); padding-bottom: clamp(48px, 6vw, 64px); display: flex; flex-direction: column; gap: 24px; }
  @media (min-width: 768px) { .cta-banner .inner { flex-direction: row; align-items: center; justify-content: space-between; } }
  .cta-banner .eyebrow { color: rgba(2,6,24,0.65); font-size: 12px; margin-bottom: 8px; }
  .cta-banner h2 { font-size: clamp(28px, 5vw, 48px); letter-spacing: -0.04em; margin: 0; }
  .cta-banner .sub { color: rgba(2,6,24,0.75); margin-top: 12px; max-width: 560px; }

  /* ============ Schedule ============ */
  /* Sección horario más compacta para que no requiera tanto scroll */
  #schedule.sec { padding-top: clamp(40px, 5vw, 56px); padding-bottom: clamp(40px, 5vw, 56px); }
  .sched-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 24px; }
  .sched-head .cal { background: var(--yellow); border-radius: var(--radius); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
  #schedule .sec h2, #schedule h2 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 10px; }
  .sched-head p.sub { color: var(--muted-on-light); max-width: 640px; font-size: clamp(15px, 2vw, 18px); }
  .toggle { background: #f1f5f9; border-radius: 999px; padding: 8px; display: inline-flex; gap: 8px; }
  .toggle button { padding: 10px 24px; border-radius: 999px; text-transform: uppercase; font-weight: 900; font-size: 16px; letter-spacing: 0.05em; color: #45556c; transition: background .2s, color .2s; }
  .toggle button:hover { color: #27292c; }
  .toggle button[aria-pressed="true"] { background: var(--yellow); color: #27292c; }
  .toggle-row { display: flex; justify-content: center; margin-bottom: 20px; }
  .sched-scroll { overflow-x: auto; border-radius: 8px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
  table.sched { min-width: 680px; width: 100%; border-collapse: collapse; }
  table.sched th { background: #f8fafc; padding: 7px 6px; font-size: 11px; letter-spacing: 0.06em; color: #2e2d2d; font-weight: 700; border-right: 1px solid #e5e7eb; text-transform: uppercase; }
  table.sched th.hora { width: 90px; text-align: left; padding-left: 12px; color: #45556c; font-weight: 500; }
  table.sched th:last-child, table.sched td:last-child { border-right: 0; }
  table.sched td { border-right: 1px solid #e5e7eb; padding: 2px 4px; text-align: center; }
  table.sched tbody tr:nth-child(even) { background: #fafafa; }
  table.sched td.time { font-size: 11px; color: #45556c; text-align: left; padding-left: 12px; white-space: nowrap; font-weight: 500; }
  /* FIX legibilidad: celdas a 12px (antes 11px) */
  .cell { border-radius: 3px; padding: 2px 6px; font-size: 11px; font-weight: 600; white-space: nowrap; margin: 1px 0; line-height: 1.15; }
  .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin-top: 14px; }
  .legend .item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-on-light); }
  .legend .swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.12); display: inline-block; }
  .sched-cta { background: var(--navy); border-radius: var(--radius); margin-top: 20px; padding: clamp(18px, 3vw, 26px); display: flex; flex-direction: column; gap: 16px; color: #fff; }
  @media (min-width: 640px) { .sched-cta { flex-direction: row; align-items: center; justify-content: space-between; } }
  .sched-cta .e { color: var(--yellow); text-transform: uppercase; font-style: italic; letter-spacing: 0.08em; font-weight: 700; font-size: 12px; margin-bottom: 4px; }

  /* ============ Pricing ============ */
  .plans { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 32px; }
  @media (min-width: 640px) { .plans { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1280px) { .plans { grid-template-columns: repeat(var(--plan-cols, 4), 1fr); } }
  .plan { background: #fff; border-radius: 8px; padding: 28px; display: flex; flex-direction: column; gap: 20px; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
  .plan.hl { border: 2px solid var(--navy); position: relative; }
  .plan .pop { background: var(--yellow); color: var(--navy); border-radius: 999px; padding: 4px 12px; text-transform: uppercase; font-weight: 900; font-size: 11px; letter-spacing: 0.05em; width: fit-content; }
  .plan h3 { font-size: 16px; letter-spacing: -0.02em; margin-bottom: 12px; }
  .plan .price { display: flex; align-items: flex-end; gap: 4px; }
  .plan .price .n { font-weight: 900; font-size: 44px; letter-spacing: -0.05em; line-height: 1; color: var(--navy); }
  .plan .price .u { color: var(--muted-on-light); font-size: 13px; font-weight: 700; padding-bottom: 4px; }
  .plan .price .pn { color: var(--muted-on-light); font-size: 13px; font-weight: 700; padding-bottom: 4px; align-self: flex-end; }
  .plan ul { list-style: none; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .plan li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted-on-light); font-size: 14px; font-weight: 500; }
  /* FIX contraste: check en oliva sobre blanco (antes amarillo 1.4:1) */
  .plan li svg { flex-shrink: 0; margin-top: 3px; stroke: var(--accent-on-light); }
  .plan .btn { width: 100%; padding: 14px; font-size: 13px; }
  .plan .btn-alt { background: #f1f5f9; color: var(--navy); }
  .plan .btn-alt:hover { background: #e2e8f0; }
  .bonos { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 768px) { .bonos { grid-template-columns: repeat(3, 1fr); } }
  .bono { background: var(--navy); border-radius: var(--radius); padding: 20px 24px; display: flex; align-items: center; gap: 16px; color: #fff; }
  .bono .ic { background: rgba(190,242,100,0.1); border-radius: 999px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .bono h3 { font-size: 15px; letter-spacing: -0.01em; }
  .bono p { color: var(--muted-on-dark); font-size: 13px; }

  /* ============ Next level ============ */
  .next-card { background: var(--navy-2); border-radius: 10px; padding: clamp(48px, 7vw, 64px) clamp(32px, 6vw, 64px); text-align: center; position: relative; overflow: hidden; }
  .next-card .glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; border-radius: 999px; filter: blur(100px); background: rgba(190,242,100,0.07); pointer-events: none; }
  .next-card .eyebrow { color: var(--yellow); margin-bottom: 16px; position: relative; }
  .next-card h2 { color: #fff; font-size: clamp(36px, 6vw, 64px); margin-bottom: 24px; position: relative; }
  /* FIX contraste: antes #6a7282 (3.7:1) */
  .next-card p.sub { color: var(--muted-on-dark); max-width: 520px; margin: 0 auto 40px; font-size: clamp(15px, 2vw, 18px); position: relative; }
  .next-card .btns { display: flex; flex-direction: column; gap: 16px; justify-content: center; position: relative; }
  @media (min-width: 640px) { .next-card .btns { flex-direction: row; } }
  .btn-ghost { border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 16px 28px; border-radius: var(--radius); text-transform: uppercase; font-weight: 900; font-size: 14px; letter-spacing: 0.05em; transition: border-color .2s, background .2s; }
  .btn-ghost:hover { border-color: var(--yellow); color: var(--yellow); }

  /* ============ Fuera del Box ============ */
  .newsletter { position: relative; overflow: hidden; background: linear-gradient(145deg, #0f172b 0%, #020618 72%); }
  .newsletter.sec { padding-top: clamp(36px,4.5vw,56px); padding-bottom: clamp(36px,4.5vw,56px); }
  .newsletter::before { content: ""; position: absolute; width: 440px; height: 440px; right: -180px; top: -200px; border-radius: 50%; background: rgba(219,222,84,.08); filter: blur(70px); pointer-events: none; }
  .newsletter-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(36px,6vw,72px); align-items: center; }
  @media (min-width: 1024px) { .newsletter-grid { grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); } }
  .newsletter-copy .eyebrow { color: var(--yellow); margin-bottom: 14px; }
  .newsletter-copy h2 { color: #fff; font-size: clamp(30px,4vw,50px); max-width: 620px; margin-bottom: 14px; }
  .newsletter-copy h2 .grad-text { display: block; }
  .newsletter-lead { color: #fff; font-size: clamp(15px,1.7vw,18px); max-width: 600px; margin-bottom: 16px; }
  .newsletter-points { list-style: none; display: grid; gap: 8px; margin-bottom: 18px; font-size: 15px; }
  .newsletter-points li { color: var(--muted-on-dark); display: flex; gap: 12px; align-items: flex-start; }
  .newsletter-points li::before { content: "\2713"; color: var(--yellow); font-weight: 900; }
  .newsletter-privacy { color: var(--muted-on-dark); font-size: 12px; line-height: 1.65; max-width: 620px; }
  .newsletter-privacy a, .newsletter-fallback a { color: var(--yellow); }
  .newsletter-form-wrap { width: 100%; min-width: 0; }
  .newsletter-frame { display: block; width: 100%; height: 720px; border: 0; background: #fff; }
  .newsletter-fallback { color: #4a5565; background: #fff; border-top: 1px solid #e5e7eb; padding: 0 24px 22px; text-align: center; font-size: 12px; }
  .newsletter-fallback a { color: #4c5100; font-weight: 700; }
  @media (max-width: 639px) { .newsletter-frame { height: 790px; } }

  /* ============ Contact ============ */
  .contact-cols { display: flex; flex-direction: column; gap: 48px; align-items: flex-start; }
  @media (min-width: 1280px) { .contact-cols { flex-direction: row; gap: 80px; } }
  .contact-info { flex: 1; min-width: 0; }
  .contact-info h2 .accent-letter { font-style: italic; }
  .contact-info p.sub { color: var(--muted-on-light); font-size: clamp(15px, 2vw, 18px); margin-bottom: 36px; max-width: 560px; }
  .c-items { display: flex; flex-direction: column; gap: 20px; }
  .c-item { display: flex; align-items: flex-start; gap: 16px; }
  .c-item .ic { background: var(--navy); border-radius: var(--radius); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .c-item .lbl { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 11px; color: var(--muted-on-light); margin-bottom: 2px; }
  .c-item .val { color: var(--ink); font-weight: 700; font-size: 15px; }
  .c-item a { color: var(--ink); text-decoration-color: rgba(2,6,24,0.3); }
  .form-card { width: 100%; background: var(--navy); border-radius: 8px; padding: clamp(24px, 4vw, 32px); display: flex; flex-direction: column; gap: 20px; }
  /* FIX: el ancho fijo va después del ancho base para que el media query no quede anulado */
  .form-wrap { width: 100%; min-width: 0; }
  @media (min-width: 1280px) { .form-wrap { width: 520px; flex-shrink: 0; } }
  .f-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 640px) { .f-row { grid-template-columns: 1fr 1fr; } }
  .f-field label { display: block; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; font-size: 11px; margin-bottom: 6px; }
  .f-field input, .f-field select, .f-field textarea {
    width: 100%; border-radius: var(--radius); padding: 14px 16px; font-family: var(--font); font-size: 15px;
    background: rgba(255,255,255,0.06); color: #fff; border: 2px solid rgba(255,255,255,0.12); outline: none; transition: border-color .2s;
  }
  /* FIX contraste: placeholders al 45% (antes 25%) */
  .f-field ::placeholder { color: rgba(255,255,255,0.45); }
  .f-field input:focus, .f-field select:focus, .f-field textarea:focus { border-color: var(--yellow); }
  .f-field input[aria-invalid="true"], .f-field select[aria-invalid="true"] { border-color: #f87171; }
  .f-field .err { color: #fca5a5; font-size: 12px; margin-top: 4px; min-height: 0; }
  .f-field select option { color: #0a0a0a; }
  .f-field textarea { resize: none; }
  .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: rgba(255,255,255,0.7); }
  .consent input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--yellow); flex-shrink: 0; }
  .consent a { color: var(--yellow); }
  .success { background: var(--yellow); border-radius: 8px; padding: 40px; text-align: center; color: var(--navy); }
  .success h3 { font-size: 28px; letter-spacing: -0.03em; margin: 12px 0; }
  .success p { color: rgba(2,6,24,0.8); margin-bottom: 24px; }

  /* ============ Footer ============ */
  footer { background: var(--navy); border-top: 1px solid var(--line-dark); padding: 56px 0 32px; }
  .f-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
  @media (min-width: 768px) { .f-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1280px) { .f-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
  .f-brand p { color: var(--muted-on-dark); font-size: 14px; max-width: 280px; margin: 16px 0 24px; }
  .socials { display: flex; gap: 12px; }
  .socials a { width: 38px; height: 38px; border: 1px solid var(--line-dark); border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--muted-on-dark); transition: color .2s, border-color .2s; }
  .socials a:hover { color: var(--yellow); border-color: var(--yellow); }
  .f-col h3 { font-style: normal; font-size: 12px; letter-spacing: 0.08em; margin-bottom: 16px; }
  .f-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  /* FIX contraste + funcionalidad: enlaces reales con #99a1af (antes botones vacíos #6a7282) */
  .f-col a { color: var(--muted-on-dark); text-decoration: none; font-size: 14px; transition: color .2s; }
  .f-col a:hover { color: #fff; }
  .f-bottom { border-top: 1px solid var(--line-dark); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; }
  @media (min-width: 640px) { .f-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
  .f-bottom p { color: var(--muted-on-dark); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

  /* ============ Modal — FIX: dialog accesible ============ */
  .modal-overlay { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2,6,24,0.85); backdrop-filter: blur(8px); }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--navy-2); border-radius: 10px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; }
  .modal-head { padding: 28px 32px; border-bottom: 1px solid var(--line-dark); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .modal-head .tag { color: var(--yellow); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 900; font-size: 12px; margin-bottom: 6px; }
  .modal-head h3 { color: #fff; font-size: clamp(24px, 5vw, 36px); letter-spacing: -0.03em; }
  .modal-close { color: var(--muted-on-dark); padding: 6px; transition: color .2s; }
  .modal-close:hover { color: #fff; }
  .modal-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 24px; }
  .modal-body .desc { color: var(--muted-on-dark); font-size: 15px; }
  .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .meta .box { background: rgba(255,255,255,0.04); border-radius: var(--radius); padding: 14px 16px; }
  .meta .k { color: var(--muted-on-dark); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 11px; margin-bottom: 4px; }
  .meta .v { color: #fff; font-weight: 700; font-size: 14px; }
  .benefits h4 { color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-style: normal; font-size: 11px; margin-bottom: 12px; }
  .benefits ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .benefits li { display: flex; align-items: center; gap: 8px; color: var(--muted-on-dark); font-size: 13px; }
  .benefits svg { flex-shrink: 0; }
  .modal .btn { width: 100%; }

  /* ============ Newsletter: tarjeta de sección + pop-up ============ */
  .newsletter-card { background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); border-radius: 12px; padding: clamp(24px,4vw,36px); display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
  .newsletter-card .nc-eyebrow { color: var(--yellow); text-transform: uppercase; letter-spacing: .1em; font-weight: 900; font-size: 12px; }
  .newsletter-card .nc-lead { color: #fff; font-size: clamp(17px,2vw,20px); }
  .newsletter-card .btn { width: 100%; }
  .newsletter-card .nc-sub { color: var(--muted-on-dark); font-size: 13px; }

  .newsletter-modal { position: relative; max-width: 460px; }
  .newsletter-modal .nl-close { position: absolute; top: 14px; right: 14px; color: var(--muted-on-dark); padding: 6px; z-index: 2; }
  .newsletter-modal .nl-close:hover { color: #fff; }
  .nl-body { padding: clamp(28px,4vw,40px); }
  .nl-body .eyebrow { color: var(--yellow); margin-bottom: 10px; font-size: 12px; }
  .nl-body h3 { color: #fff; font-size: clamp(24px,4vw,32px); margin-bottom: 12px; }
  .nl-copy { color: var(--muted-on-dark); font-size: 15px; margin-bottom: 22px; }
  #newsletterForm { display: flex; flex-direction: column; gap: 14px; }
  #newsletterForm label[for="nl-email"] { color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
  #newsletterForm input[type="email"] { width: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px 16px; font-size: 15px; font-family: inherit; color: var(--ink); }
  .nl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
  .nl-consent { display: flex; gap: 10px; align-items: flex-start; color: var(--muted-on-dark); font-size: 13px; line-height: 1.5; }
  .nl-consent input { margin-top: 3px; flex-shrink: 0; }
  .nl-consent a { color: var(--yellow); }
  #newsletterForm .btn { width: 100%; }
  .nl-note { color: var(--muted-on-dark); font-size: 12px; text-align: center; }
  .nl-err { color: #fca5a5; font-size: 13px; }
  .nl-err:empty { display: none; }
  .nl-fallback { color: var(--muted-on-dark); font-size: 12px; margin-top: 16px; text-align: center; }
  .nl-fallback a { color: var(--yellow); }
  .nl-success { text-align: center; color: var(--muted-on-dark); }
  .nl-success-title { color: #fff; font-size: 22px; font-weight: 900; margin-bottom: 8px; }
  .nl-sink { display: none; }

  /* ============ Páginas interiores (centros, horarios/tarifas, blog) ============ */
  .page-hero { background: var(--navy); padding: calc(76px + clamp(40px,6vw,80px)) 0 clamp(36px,5vw,64px); border-bottom: 1px solid var(--line-dark); }
  .page-hero .eyebrow { color: var(--yellow); margin-bottom: 14px; }
  .page-hero h1 { color: #fff; font-size: clamp(32px,6vw,58px); }
  .page-hero .lead { color: var(--muted-on-dark); font-size: clamp(16px,2vw,19px); max-width: 660px; margin-top: 18px; }
  .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted-on-dark); margin-bottom: 22px; text-transform: uppercase; letter-spacing: .06em; }
  .breadcrumb a { color: var(--muted-on-dark); text-decoration: none; }
  .breadcrumb a:hover { color: #fff; }
  .center-grid { display: grid; gap: clamp(28px,4vw,48px); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 880px){ .center-grid { grid-template-columns: 1.15fr .85fr; } }
  .info-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: clamp(22px,3vw,30px); box-shadow: 0 8px 30px rgba(2,6,24,.06); }
  .info-card h2 { font-size: 20px; margin-bottom: 18px; color: var(--ink); }
  .prose p { color: #374151; margin-bottom: 16px; font-size: 16px; }
  .prose h2 { font-size: clamp(22px,3vw,30px); margin: 32px 0 14px; }
  .prose ul { padding-left: 20px; margin-bottom: 16px; color: #374151; }
  .prose li { margin-bottom: 8px; }
  .map-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }