/* ============================================================
   PALETA v1.0b "ESMERALDA VIVO" (v0.3) — PALETA DE PRODUCCIÓN
   ============================================================
   ADOPTADA en el .com el 2026-07-07 tras la validación de José en
   el canary .org (SEM-346). Override de color sobre la v1.0a
   (salvia): se encola SIEMPRE y EL ÚLTIMO (después de style.css y
   del CSS de página) para ganar la cascada a los :root de página.
   Origen: bloque override de design/mockups/rediseño-vivo/*.html,
   con el coral ajustado (Joserra 2026-07-02) y los tokens de
   contraste AA de la auditoría SEM-325. Fuente de verdad del color
   de producción: ESTE archivo + DESIGN.md §2.1.
   Deuda registrada (SEM-347): fusión in-place en las 7 hojas y
   retirada de esta capa, a ejecutar tras el 301 del .org (SEM-348).
   ============================================================ */

:root {
  /* --- Verde de marca: MISMO tono (H≈162), saturación viva (jade/esmeralda) --- */
  --brand-700: #13694f; /* antes #2f5d50 */
  --brand-600: #1c8567; /* antes #3b7263 */
  --brand-500: #22a07b; /* antes #4e8c7a */
  --brand-100: #d6efe5; /* antes #dceae4 */
  --brand-050: #eef8f3; /* antes #f1f7f4 */

  /* --- Acento coral cálido NUEVO ---
     Tono ajustado (H 15°→9°, menos naranja, misma viveza) por decisión
     de Joserra 2026-07-02; difiere deliberadamente del mockup. --- */
  --coral-700: #af402c;
  --coral-600: #d9523a;
  --coral-500: #e86b54;
  --coral-100: #fbdfdb;

  /* --- Cálidos / dorado (un punto más vivos) --- */
  --warm-600: #c6612f;
  --warm-300: #f0cbb0;
  --warm-100: #faeee2;
  --accent-500: #aa7d17;

  /* --- Neutros: fondo con tinte cálido/verde perceptible --- */
  --ink-900: #15241e;
  --ink-700: #34453d;
  --ink-500: #5d6c65;
  --line-200: #d8e6df;
  --ground: #ffffff;
  --ground-alt: #f1f8f4;

  --success-600: #1a7c50;
  --info-600: #1c8567;

  /* gradiente de marca (verde profundo → jade vivo) */
  --grad-brand: linear-gradient(135deg, #0f4d3a 0%, #13694f 48%, #1c8567 100%);
}

/* ---------- HERO (home y hydro): wash de color sobre el fondo ----------
   La web usa foto + overlay; añadimos un tinte de marca al fondo base
   y un toque cálido, sin tapar la imagen. */
.hero-home,
.hydro {
  background:
    radial-gradient(
      1100px 460px at 6% -10%,
      rgba(34, 160, 123, 0.18),
      transparent 60%
    ),
    radial-gradient(
      900px 420px at 100% 0%,
      rgba(232, 107, 84, 0.1),
      transparent 55%
    ),
    var(--ground-alt) !important;
}
.hero-home__badge,
.hydro__badge {
  background: var(--brand-050);
  border-color: var(--brand-100);
  color: var(--brand-700);
}
.hero-home__badge-dot,
.hydro__badge-dot {
  background: var(--coral-500);
}

/* ---------- BOTÓN PRIMARIO: coral cálido, tinta oscura (AA 5.8:1) ----------
   Incluye .page-hero--image .btn-primary: terapias-avanzadas.css lo pintaba
   BLANCO con especificidad 0,2,0 (ganaba a esta capa) — cazado en la
   iteración de coherencia de CTAs (SEM-346): el CTA de cita es coral SIEMPRE. */
.btn-primary,
.page-hero--image .btn-primary {
  background: var(--coral-500);
  color: var(--ink-900);
  border-color: var(--coral-500);
  font-weight: 700;
}
.btn-primary:hover,
.page-hero--image .btn-primary:hover {
  background: var(--coral-600);
  border-color: var(--coral-600);
  color: #fff;
}

/* ---------- BANDAS antes verde plano → gradiente de marca vivo ---------- */
.trust-bar,
.cta-band,
.sintomas {
  background: var(--grad-brand) !important;
}

/* ---------- NÚMEROS / acentos cálidos ---------- */
.hero-home__float-number,
[class*="float-number"] {
  color: var(--coral-600);
}

/* ---------- CARDS DIFERENCIALES (home): borde superior coral + icono cálido ---------- */
.service-card--featured {
  border-top: 3px solid var(--coral-500);
}
.service-card--featured .service-card__icon-wrap {
  background: var(--coral-100);
  border-color: var(--coral-100);
  color: var(--coral-700);
}
/* iconos de cards normales: verde vivo */
.service-card__icon-wrap {
  color: var(--brand-600);
}
/* chip "Diferencial": coral */
.service-card__tag {
  background: var(--coral-100);
  color: var(--coral-700);
}

/* ---------- CARDS BENEFICIO (hidroterapia): icono coral cálido ---------- */
.beneficio-card__icon {
  background: var(--coral-100) !important;
  color: var(--coral-700) !important;
}
.beneficio-card:hover {
  border-color: var(--coral-500);
}

/* síntomas: dentro de la banda verde, los iconos en cálido para destacar */
.sintoma-item__icon {
  color: var(--coral-100) !important;
}

/* ---------- estrellas reseñas: dorado vivo ---------- */
.hero-home__trust-stars svg,
.hydro__trust-stars svg,
[class*="stars"] svg,
[class*="stars"] {
  color: var(--accent-500);
}

/* ---------- secciones alternas: tinte verde perceptible ---------- */
.why-us,
[class*="--alt"] {
  background: var(--brand-050);
}

/* ---------- foco visible con el nuevo acento ---------- */
:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 2px;
}

/* ── Contraste AA del look vivo (auditoría axe SEM-346, 2026-07-07) ──
   brand-600 vivo (#1c8567) como TEXTO pequeño sobre fondos claros da
   3.99-4.23 (< 4.5). Mismo tratamiento que recibió la salvia en SEM-325:
   los kickers/labels/citas bajan un paso a brand-700 (#13694f = 6.64
   sobre blanco, 6.16 sobre ground-alt, 5.8 sobre crema). El brand-600
   como icono/hover/fondo (≥3:1) no se toca. */
.section-label,
.why-us__quote-side .section-label,
.about-quote__role,
.sobre-jose__badge-role,
.blockquote__cite,
.sleep-terapia-card__evidence--mechanism {
  color: var(--brand-700);
}
