/* src/css/base.css */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-dark);
  background-color: var(--color-white);
}

/* ── Tipografía ──────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  font-weight: 700; }

p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted-dk);
  max-width: 65ch;
  overflow-wrap: break-word;
  word-break: break-word;
}

li {
  overflow-wrap: break-word;
}

/* Sobre fondos oscuros — clase utilitaria */
.theme-dark p {
  color: var(--color-text-muted);
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4 {
  color: var(--color-text-primary);
}

/* ── Selección de texto ──────────────────── */

::selection {
  background-color: var(--color-yellow);
  color: var(--color-dark);
}

/* ── Focus visible — accesibilidad ──────── */
/*
  Anillo de foco visible sólo en navegación por teclado.
  :focus-visible evita mostrar el anillo en clics de ratón/touch.
  Aplica a todos los elementos interactivos como baseline;
  componentes individuales pueden sobreescribir si necesario.
*/

:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Suprimir outline en foco por mouse / touch */
:focus:not(:focus-visible) {
  outline: none;
}

/* Ajuste de outline para botones */
.hs-btn:focus-visible {
  outline-offset: 4px;
}

/* Ajuste para el logo del header */
.header-logo:focus-visible {
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

/* Skip nav al recibir foco ya tiene position/left gestionados en header.css */
.skip-nav:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

/* ── Sticky CTA bar (mobile) ─────────────── */

.sticky-cta-bar {
  display: none;
}

@media (max-width: 768px) {
  .sticky-cta-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-3) var(--space-6);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    z-index: 90;
  }

  .sticky-cta-bar .hs-btn {
    flex: 1;
    justify-content: center;
  }

  body.has-sticky-cta main {
    padding-bottom: 72px;
  }
}