/* =============================================================================
   Say Notary v2 — BASE (reset + tipografía + utilidades de sistema)
   Depende de tokens.css. No hay colores/medidas literales aquí: todo var(--sn-*).
   ============================================================================= */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sn-font-body);
  font-weight: var(--sn-fw-body);
  font-size: var(--sn-fs-body);
  line-height: var(--sn-lh-body);
  color: var(--sn-text);
  background: var(--sn-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Titulares: Cormorant, aire por defecto */
h1, h2, h3, h4 {
  font-family: var(--sn-font-display);
  font-weight: var(--sn-fw-display-air);
  line-height: var(--sn-lh-tight);
  letter-spacing: var(--sn-tracking-display);
  color: var(--sn-heading);
  text-wrap: balance;
}

/* Palabra/acento en ITÁLICA Cormorant — el "movimiento" sobre la estructura Inter.
   Úsala en la palabra clave de un titular: <h1>El futuro de la <em class="sn-em">firma</em></h1> */
.sn-em {
  font-family: var(--sn-font-accent);
  font-style: italic;
  font-weight: var(--sn-fw-display-emphasis);
  letter-spacing: var(--sn-tracking-accent);
}

/* --- Layout --- */
.sn-container {
  width: 100%;
  max-width: var(--sn-container);
  margin-inline: auto;
  padding-inline: var(--sn-gutter);
}
.sn-container--narrow { max-width: var(--sn-container-narrow); }
.sn-section { padding-block: clamp(var(--sn-space-8), 10vw, var(--sn-space-10)); }

/* --- Superficies claro / oscuro --- */
.sn-section--dark {
  background: var(--sn-wine-night);
  color: var(--sn-on-dark-body);
}
.sn-section--dark h1,
.sn-section--dark h2,
.sn-section--dark h3 { color: var(--sn-on-dark-heading); }

/* --- Eyebrow (etiqueta superior) --- */
.sn-eyebrow {
  font-family: var(--sn-font-body);
  font-size: var(--sn-fs-eyebrow);
  font-weight: var(--sn-fw-body-medium);
  letter-spacing: var(--sn-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sn-burgundy);
}
.sn-section--dark .sn-eyebrow { color: var(--sn-champagne); }

/* --- Botones (base del sistema; variantes por sección en Fase 2) --- */
.sn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sn-space-2);
  padding: 0.9em 1.6em;
  font-weight: var(--sn-fw-body-medium);
  border: 1px solid transparent;
  border-radius: var(--sn-radius-sm);
  cursor: pointer;
  transition: transform var(--sn-dur-micro) var(--sn-ease-out),
              background-color var(--sn-dur-micro) var(--sn-ease-out),
              box-shadow var(--sn-dur-micro) var(--sn-ease-out),
              border-color var(--sn-dur-micro) var(--sn-ease-out);
}
.sn-btn:hover { transform: translateY(-2px); }

/* Primario: rosa con glow suave (con moderación — es el CTA fuerte) */
.sn-btn--primary {
  background: var(--sn-rose);
  color: #fff;
}
.sn-btn--primary:hover { box-shadow: var(--sn-glow-rose); }

/* Secundario: borde champán (brilla sobre oscuro) */
.sn-btn--champagne {
  background: transparent;
  border-color: var(--sn-champagne);
  color: var(--sn-champagne);
}
.sn-btn--champagne:hover { background: rgba(231, 201, 163, 0.10); }

/* Terciario en claro: fill borgoña */
.sn-btn--burgundy {
  background: var(--sn-burgundy);
  color: var(--sn-cream);
}

/* --- Foco accesible visible (global) --- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--sn-rose);
  outline-offset: 2px;
  border-radius: var(--sn-radius-sm);
}

/* --- prefers-reduced-motion (global, obligatorio) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Regla de seguridad: NADA se oculta con opacity:0 en el CSS base.
   Los reveals los aplica el JS añadiendo .sn-animate al <html>. Si el JS no
   corre, el contenido se ve entero. */
.sn-js .sn-reveal { opacity: 0; transform: translateY(12px); }