/**
 * DR. EVERT HAIR INSTITUTE — Estilos base
 * ============================================================================
 * Aplica los tokens de marca a los elementos HTML fundamentales. Todo lo que
 * hay aquí consume variables de tokens.css: no hay ni un valor de marca escrito
 * a mano.
 *
 * Fase 0: base tipográfica y utilidades mínimas.
 * Fase 1 añadirá: header, footer, botón WhatsApp flotante y patrones de bloques.
 * ============================================================================
 */

/* --------------------------------------------------------------------------
   0. Puente con Kadence
   --------------------------------------------------------------------------
   Kadence pinta TODO (cabecera, tarjetas, pie, botones) con su propia paleta
   interna de 9 colores, que por defecto es clara. Si solo cambiáramos el color
   del texto, quedaría texto hueso sobre tarjetas blancas: ilegible.

   Aquí traducimos esa paleta a nuestros tokens de marca, de una vez y para todo
   el tema padre. Los roles los define Kadence:
       1-2 acentos · 3-6 textos (de más fuerte a más sutil) · 7-9 fondos

   Se declara sobre `body` y no sobre `:root` a propósito: Kadence imprime sus
   variables en un <style> dentro del <head>, y no podemos garantizar quién va
   después. Como las variables CSS se heredan, definirlas en `body` gana siempre
   para todo lo que hay dentro de la página, sin depender del orden de carga.
   -------------------------------------------------------------------------- */

body {
  /* Acentos */
  --global-palette1: var(--dr-oro);
  --global-palette2: var(--dr-arena);

  /* Textos, de más fuerte a más sutil */
  --global-palette3: var(--dr-blanco);
  --global-palette4: var(--dr-hueso);
  --global-palette5: #C0B6A4; /* intermedio entre hueso y gris */
  --global-palette6: var(--dr-gris);

  /* Fondos. Invertidos respecto al original: donde Kadence ponía blanco,
     ponemos negro. El sitio es dark-first (CLAUDE.md §2). */
  --global-palette7: var(--dr-negro-700);
  --global-palette8: var(--dr-negro-800);
  --global-palette9: var(--dr-negro);

  /*
   * Kadence tiene, ADEMÁS de la paleta de 9, un juego aparte de variables solo
   * para botones. Es fácil pasarlas por alto: se traducen los 9 colores, todo
   * parece bien, y los botones siguen saliendo con el azul por defecto de
   * Kadence (#2B6CB0) porque leen de aquí, no de la paleta.
   */
  --global-palette-btn:            var(--dr-negro);  /* texto del botón sólido  */
  --global-palette-btn-bg:         var(--dr-oro);    /* fondo del botón sólido  */
  --global-palette-btn-hover:      var(--dr-negro);
  --global-palette-btn-bg-hover:   var(--dr-arena);

  --global-palette-btn-out:        var(--dr-texto);  /* texto del botón de contorno */
  --global-palette-btn-out-hover:  var(--dr-negro);

  --global-palette-btn-sec:        var(--dr-texto);  /* botón secundario */
  --global-palette-btn-sec-bg:     transparent;
  --global-palette-btn-sec-hover:  var(--dr-negro);
  --global-palette-btn-sec-bg-hover: var(--dr-arena);
}

/*
 * Nota histórica: aquí hubo dos parches para la cabecera y los submenús de
 * Kadence, porque su fondo blanco venía con el color fijo y su desplegable usaba
 * el color 3 (texto más fuerte) como fondo. Se eliminaron al sustituir la
 * cabecera y el pie por los nuestros (inc/cabecera.php e inc/pie.php): ese
 * marcado de Kadence ya no se imprime.
 *
 * Si algún día se reactiva la cabecera de Kadence, habrá que recuperarlos.
 */

/* --------------------------------------------------------------------------
   1. Base del documento
   -------------------------------------------------------------------------- */

body {
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-md);
  font-weight: var(--dr-peso-normal);
  line-height: var(--dr-interlineado-normal);
  background-color: var(--dr-fondo);
  color: var(--dr-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   2. Títulos — Optima Nova, el gesto del logo
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
.dr-display {
  font-family: var(--dr-fuente-display);
  font-weight: var(--dr-peso-ligero);
  line-height: var(--dr-interlineado-titulo);
  color: var(--dr-texto-fuerte);
  text-wrap: balance; /* evita títulos con una palabra huérfana */
}

h1 { font-size: var(--dr-texto-3xl); line-height: var(--dr-interlineado-apretado); }
h2 { font-size: var(--dr-texto-2xl); }
h3 { font-size: var(--dr-texto-xl); }
h4 { font-size: var(--dr-texto-lg); }
h5, h6 {
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-eyebrow);
  text-transform: uppercase;
}

/* Título de hero: mayúsculas muy espaciadas, como el logo. */
.dr-titulo-hero {
  font-size: var(--dr-texto-4xl);
  letter-spacing: var(--dr-tracking-display);
  line-height: var(--dr-interlineado-apretado);
  text-transform: uppercase;
}

/* Antetítulo de sección ("PROCEDIMIENTOS", "RESULTADOS"...) en oro. */
.dr-antetitulo {
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-xs);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dr-acento);
  margin-bottom: var(--dr-esp-2xs);
}

/* --------------------------------------------------------------------------
   3. Texto e enlaces
   -------------------------------------------------------------------------- */

p { margin-block: 0 var(--dr-esp-sm); }

.dr-texto-tenue { color: var(--dr-texto-tenue); }

.dr-medida { max-width: var(--dr-ancho-texto); } /* lectura larga: blog */

a {
  color: var(--dr-acento);
  text-underline-offset: 0.2em;
  transition: color var(--dr-transicion-rapida);
}
a:hover { color: var(--dr-acento-hover); }

/* Foco visible en todo el sitio: accesibilidad no negociable. */
:focus-visible {
  outline: 2px solid var(--dr-acento);
  outline-offset: 3px;
  border-radius: var(--dr-radio-sm);
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.dr-contenedor {
  width: 100%;
  max-width: var(--dr-ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--dr-margen-lateral);
}

.dr-seccion {
  padding-block: var(--dr-seccion-y);
}

/* Separador fino en oro — recurso gráfico recurrente de la marca. */
.dr-separador {
  border: 0;
  height: 1px;
  width: 64px;
  background: var(--dr-degradado-oro);
  margin: var(--dr-esp-md) 0;
}

/* --------------------------------------------------------------------------
   5. Botones
   -------------------------------------------------------------------------- */

.dr-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dr-esp-2xs);
  font-family: var(--dr-fuente-cuerpo);
  font-size: var(--dr-texto-sm);
  font-weight: var(--dr-peso-semi);
  letter-spacing: var(--dr-tracking-boton);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap; /* "Cotiza ahora" nunca debe partirse en dos líneas. */
  padding: var(--dr-esp-xs) var(--dr-esp-md);
  min-height: 48px; /* objetivo táctil cómodo en móvil */
  border-radius: var(--dr-radio-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--dr-transicion),
              color var(--dr-transicion),
              border-color var(--dr-transicion);
}

/* Primario: oro sólido. El CTA principal del sitio ("Cotiza ahora"). */
.dr-boton--primario {
  background-color: var(--dr-acento);
  color: var(--dr-sobre-acento);
}
.dr-boton--primario:hover {
  background-color: var(--dr-acento-hover);
  color: var(--dr-sobre-acento);
}

/* Secundario: contorno. Acompaña al primario en los CTA dobles. */
.dr-boton--secundario {
  background-color: transparent;
  color: var(--dr-texto);
  border-color: var(--dr-acento);
}
.dr-boton--secundario:hover {
  background-color: var(--dr-acento);
  color: var(--dr-sobre-acento);
}

/* --------------------------------------------------------------------------
   6. Utilidades
   -------------------------------------------------------------------------- */

/* Visible solo para lectores de pantalla. */
.dr-solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

img, svg, video { max-width: 100%; height: auto; }