/* Design System Advance Skin Center v1 · hereda de Design System Base v3 · 2026-10-22 */
/* Fuente: Resumen del Moodboard (aprobado 2026-10-22) · Brief de actualización D9 */
/* Fuentes web: DM Serif Display (400 + Italic), DM Serif Text (400), Source Sans 3 (400/600/700) */

:root{
  /* ---------- [CLIENTE · express] ---------- */
  --marca:    #8CAB67;   /* [CLIENTE · express] verde marca: logo, íconos, ilustración, fondo de oferta y credenciales. Nunca texto ni botón */
  --acento:   #536440;   /* [CLIENTE · express] oliva bosque: enlaces, viñetas, citas (6,0:1 sobre crema) */
  --card:     #2C3824;   /* [CLIENTE · express] musgo profundo: bandas y tarjetas oscuras */
  --lavanda:       #A6493A;   /* [CLIENTE · express] color de acción (terracota rosada). Solo CTA y formularios */
  --lavanda-hover: #8F3F32;   /* [CLIENTE · express] acción en hover */
  --lavanda-suave: #F7EBE9;   /* [CLIENTE · express] anillo de foco en formularios (rosa piel) */
  --grad-lavanda:  linear-gradient(135deg, #A6493A, #8F3F32);  /* [CLIENTE · express] */
  --texto-accion:  #FFFFFF;   /* [CLIENTE · express] texto sobre el color de acción: 5,78:1 AA */
  --fuente-titulo: "DM Serif Display", Georgia, "Times New Roman", serif;          /* [CLIENTE · express] H1 / H2 */
  --fuente-titulo-h3: "DM Serif Text", Georgia, "Times New Roman", serif;          /* [CLIENTE · express] H3 */
  --fuente-cuerpo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* [CLIENTE · express] */
  --r-card:  16px;   /* [CLIENTE · express] sin cambios respecto del Base (el moodboard no los cambia) */
  --r-media: 12px;   /* [CLIENTE · express] sin cambios respecto del Base */

  /* ---------- [CLIENTE · personalización] ---------- */
  --fondo:      #F9F7F1;   /* [CLIENTE · personalización] crema: fondo principal */
  --superficie: #FFFFFF;   /* [CLIENTE · personalización] tarjetas y formulario */
  --fondo-alterno: #EEEFEC; /* [CLIENTE · personalización] gris niebla */
  --negro:    #2C3824;     /* sin negro puro: textos y títulos en musgo */
  --gris-800: #2C3824;
  --gris-600: #676C60;     /* gris salvia: texto secundario (5,04:1 sobre crema) */
  --gris-400: #9A9E93;
  --gris-200: #D9DCD4;
  --blanco:   #FFFFFF;
  --linea:    #E1E9D8;     /* salvia clara: líneas, fondos suaves, contenedores de íconos */
  --marcador: #EEEFEC;
  --footer:   #536440;     /* opcional: footer o trazo botánico */
  --sobre-oscuro:   rgba(249,247,241,.92);
  --sobre-oscuro-2: rgba(249,247,241,.70);
  --grad-claro:  linear-gradient(160deg, #FFFFFF, #F9F7F1);
  --grad-oscuro: linear-gradient(160deg, #2C3824, #536440);   /* sigue a --card */
  --grad-medio:  linear-gradient(160deg, #E1E9D8, #F9F7F1);
  --fuente-mono: ui-monospace, "SF Mono", Consolas, monospace;  /* [CLIENTE · personalización] */
  --r-boton: 999px;        /* [CLIENTE · personalización] sin cambios respecto del Base */

  /* ---------- Acentos de marca ---------- */
  --rosa-polvo: #D7ACA7;   /* acento Home: etiquetas y detalles. Nunca domina una sección grande */
  --rosa-piel:  #F7EBE9;   /* fondo de empatía o testimonios */
  --miel:       #CCAD66;   /* estrellas y cifras. Nunca texto sobre crema ni sobre verde */

  /* ---------- Acentos por protocolo (claro · medio · oscuro) ---------- */
  /* Proporción: 60 % neutros · 25 % verdes · 10 % acento · 5 % CTA. El acento nunca va en CTA, logo, párrafos, oferta ni credenciales */
  --luminex-claro:   #F7EBE9; --luminex-medio:   #D7ACA7; --luminex-oscuro:   #78403A;
  --cellulift-claro: #F6F0DF; --cellulift-medio: #CCAD66; --cellulift-oscuro: #685427;
  --acnefree-claro:  #E8EEF3; --acnefree-medio:  #86A2B6; --acnefree-oscuro:  #324B5D;
  --reserva-medio:   #B3A5C0; /* lavanda gris: claro y oscuro por definir */

  /* ---------- [FIRMA TSF] · PROVISORIO ----------
     Reemplazar este bloque por el de Design System Base v3 (tokens.css) cuando esté disponible.
     Escala áurea (φ = 1,618, pasos de √φ), cuerpo 18 px, medida de lectura 66ch. */
  --t-cuerpo: 1.125rem;   /* 18 px */
  --t-chico:  0.889rem;   /* 16 px */
  --t-h3:     1.431rem;   /* ≈ 23 px (20–26 px) */
  --t-h2:     clamp(2rem, 1.6rem + 1.6vw, 2.618rem);   /* 32–42 px */
  --t-h1:     clamp(2.2rem, 1.6rem + 2.6vw, 3.5rem);   /* 35–56 px */
  --interlineado-cuerpo: 1.6;
  --interlineado-titulo: 1.1;
  --esp-1: 0.5rem; --esp-2: 0.809rem; --esp-3: 1.309rem; --esp-4: 2.118rem; --esp-5: 3.427rem; --esp-6: 5.545rem;
  --medida: 66ch;
  --ancho-max: 1180px;
}