/* ============================================================
   base.css — reset, tipografía global y elementos compartidos
   Los valores de marca viven en tokens.css, que se carga antes.
   ============================================================ */

/* ── Reset ── */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-superficie);
  color: var(--color-texto);
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fondos de página que se apartan de la superficie base */
body.tema-salvia { background: var(--color-superficie-suave); }
body.tema-blanco { background: var(--color-superficie-alta); }

/* ── Jerarquía tipográfica (manual p. 15) ──
   Playfair Display para titulares, Poppins para todo lo demás.
   El manual solo declara Regular e Italic en la serif y Regular y
   Light en la sans, así que no hay más pesos en el sitio. */
h1, h2, h3, h4, h5, h6, blockquote {
  font-family: var(--font-titular);
  font-weight: var(--peso-titular);
}

button, input, textarea, select {
  font-family: var(--font-cuerpo);
  font-weight: var(--peso-cuerpo);
}

a {
  color: var(--color-texto);
  text-decoration: none;
}

a:hover {
  color: var(--color-acento-oscuro);
}

::selection {
  background: var(--color-vegetal);
  color: var(--color-texto);
}

/* ── Foco visible: mismo tratamiento en todo el sitio ── */
:focus-visible {
  outline: 2px solid var(--color-acento-oscuro);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sobre superficies oscuras el foco cambia a la variante clara */
.testimonios :focus-visible,
.declaracion :focus-visible,
.pie :focus-visible,
.nav.is-solido :focus-visible {
  outline-color: var(--color-vegetal);
}

/* ── Campos de formulario ── */
::placeholder {
  color: var(--color-texto-suave);
  opacity: 1;
}

:disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Barra de desplazamiento ── */
* {
  scrollbar-color: var(--color-vegetal) var(--color-superficie);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-superficie);
}

::-webkit-scrollbar-thumb {
  background: var(--color-vegetal);
  border-radius: var(--radio-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-acento-oscuro);
}

/* ── Animaciones compartidas ── */

/* El trazo del isotipo se descubre bajo la palabra destacada */
@keyframes aparecerTrazo {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Cinta infinita (marquesina) */
@keyframes marquesina {
  to { transform: translateX(-50%); }
}

/* Indicador de scroll del hero */
@keyframes lineaScroll {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Deriva suave de las manchas de color decorativas */
@keyframes derivar {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(18px, -24px); }
}

/* Pulso del botón flotante de WhatsApp */
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 var(--pulso-wa-inicio); }
  70%  { box-shadow: 0 0 0 16px var(--pulso-wa-fin); }
  100% { box-shadow: 0 0 0 0 var(--pulso-wa-fin); }
}

/* Pin del mapa pendiente */
@keyframes flotarPin {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Elementos decorativos comunes ── */

/* Manchas de color desenfocadas del fondo (hero, cabeceras) */
.mancha {
  position: absolute;
  border-radius: var(--radio-circulo);
  pointer-events: none;
}

/* Marca de agua: el isotipo ampliado, uso que el manual autoriza
   explícitamente como recurso decorativo (p. 12) y aplica en la
   papelería (p. 18). */
.marca-agua {
  position: absolute;
  pointer-events: none;
  fill: var(--color-texto);
}

/* El trazo del isotipo, reutilizado como subrayado de los titulares.
   Alto y separación en em: así escala con el titular y nunca invade
   los descendentes de la Playfair cursiva. */
.linea-vital {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.16em;
  bottom: -0.38em;
  overflow: visible;
}

/* El trazo se revela de izquierda a derecha con un recorte, porque
   el vector real es de relleno y no admite stroke-dashoffset. */
.linea-vital path {
  fill: var(--color-acento);
  animation: aparecerTrazo 1.4s var(--ease-suave) 0.5s both;
}

/* Envoltorio de la palabra subrayada por la línea vital */
.subrayado {
  display: inline-block;
  position: relative;
}

/* Énfasis en cursiva dentro de los titulares (manual p. 23) */
.enfasis {
  color: var(--color-texto-enfasis);
}

/* Sobre superficies oscuras el énfasis usa el verde claro del
   logotipo, como la "Fit" del logotipo principal (p. 10) */
.testimonios .enfasis,
.declaracion .enfasis,
.pie .enfasis {
  color: var(--color-texto-enfasis-alt);
}

/* Envoltorio de los botones magnéticos (los mueve js/magnet.js) */
.magnetico {
  display: inline-block;
}

/* Trazos sueltos que retoman la línea del isotipo sobre fondo oscuro */
.testimonios-trazo path,
.declaracion-trazo path {
  fill: var(--color-acento);
}

/* ── Etiquetas sobre la superficie Pale Silver ──
   Pale Silver es la superficie clara más oscura de la paleta: ningún
   tono cálido derivado de Camel alcanza 4.5:1 sobre ella (el máximo es
   3.01:1). Ahí la etiqueta usa el verde secundario, que sí cumple
   (4.67:1). Registrado en BRAND_AUDIT.md. */
.clinica--pendiente .clinica-etiqueta {
  color: var(--color-texto-secundario);
}

/* La barra transparente sobre una página de fondo Pale Silver */
body.tema-salvia .nav:not(.is-solido) .nav-link.is-activa,
body.tema-salvia .nav:not(.is-solido) .nav-panel-link.is-activa {
  color: var(--color-texto-secundario);
}

/* ══════════════════════════════════════════════════════════
   ALINEACIÓN DE LOS PÁRRAFOS — revisión de agosto 2026

   La clínica pidió los textos justificados «para que se vean
   alineados». Justificar sin partir palabras abre ríos de espacio en
   blanco, así que va acompañado de `hyphens: auto`, que funciona
   porque cada página declara lang="es-MX".

   Va en todos los anchos, móvil incluido: es lo que pidió, sin
   distinguir dispositivo, y en el teléfono es donde más lo va a
   revisar. El guionado es lo que lo hace viable en una columna
   estrecha; sin él, a 375px se abrirían huecos entre palabras.

   Quedan fuera a propósito: titulares, botones, notas al pie, listas
   y los textos centrados de los cierres, que no son lectura corrida.
   ══════════════════════════════════════════════════════════ */
.entrada,
.comparador-intro,
.precio-texto,
.pasos-lista p,
.ficha-bloque > p,
.ficha-bloque .diapos-par p,
.faq-respuesta-int p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Excepciones dentro de los bloques ya justificados: son remates
   cortos, no párrafos, y justificarlos los descuadra. El destacado
   además va en caja estrecha, donde el justificado abre huecos
   demasiado anchos entre palabras. */
.ficha-bloque > p.ficha-nota,
.ficha-bloque > p.ficha-destacado,
.ficha-bloque .diapos-par .ficha-experiencia p,
.ficha-cierre p,
.modelo3d-pie {
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
}