/* ===========================================================
   TEMA EDITABLE — Cuatrohojas
   Cambia aquí los colores, tipografías y formas de todo el sitio.
   Estas mismas variables son las que expone el editor visual
   (botón "Editar" abajo a la derecha → pestaña Tema).
   =========================================================== */

:root {
  /* ---- Color de marca ---------------------------------- */
  --color-coral:        #FF6361;   /* Acento principal (botones, iconos) */
  --color-coral-dark:   #E84A48;   /* Hover del acento */
  --color-purple:       #493B93;   /* Morado profundo del degradado */
  --color-orange:       #FF7A5C;   /* Naranja del degradado */
  --color-magenta:      #8173A8;   /* Rosa intermedio del degradado */

  /* ---- Superficies ------------------------------------- */
  --color-nav:          #2A0F14;   /* Barra de navegación */
  --color-lavender:     #D8D6EA;   /* Fondo Servicios / Portafolio */
  --color-cream:        #F3EFE2;   /* Franja crema bajo Nosotros */
  --color-surface:      #FFFFFF;   /* Tarjetas y campos */
  --pill-bg:            #100A0C;   /* Etiqueta de sección */
  --pill-ink:           #FFFFFF;   /* Texto de la etiqueta */
  --logo-color:         #FFFFFF;   /* Isotipo de las cuatro hojas */

  /* ---- Texto ------------------------------------------- */
  --color-ink:          #100A0C;   /* Titulares */
  --color-body:         #241B20;   /* Texto corrido */
  --color-on-dark:      #FFFFFF;   /* Texto sobre fondos oscuros */
  --color-accent-text:  var(--color-purple);   /* Acento en texto: enlaces y etiquetas de los casos */
  /* Derivados del color de texto: si una variante cambia --color-body, estos
     lo siguen solos y no quedan textos oscuros sobre fondos oscuros. Se pueden
     fijar a mano igual, desde el editor o aquí. */
  --color-body-soft:    color-mix(in srgb, var(--color-body) 82%, transparent);
  --color-hairline:     color-mix(in srgb, var(--color-body) 35%, transparent);

  /* ---- Tipografía -------------------------------------- */
  --font-heading: "Montserrat", "Helvetica Neue", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --weight-heading: 800;
  --tracking-heading: -0.03em;

  /* Escala fluida de titulares */
  --size-h1: clamp(2.6rem, 5.4vw, 5.2rem);
  --size-h2: clamp(2.1rem, 4.2vw, 4rem);
  --size-lead: clamp(0.95rem, 1.1vw, 1.05rem);

  /* ---- Formas y ritmo ---------------------------------- */
  --radius-card: 28px;
  --radius-field: 10px;
  --radius-pill: 999px;
  --radius-hero: 180px;          /* Curva grande del bloque coral del hero */
  --section-padding: clamp(72px, 9vw, 140px);
  --container: 1440px;
  --shadow-card: 0 24px 60px -32px rgba(16, 10, 12, .45);

  /* ---- Degradados derivados ---------------------------- */
  --gradient-hero:
      radial-gradient(120% 120% at 0% 0%,   var(--color-orange) 0%, transparent 55%),
      radial-gradient(120% 110% at 100% 100%, var(--color-purple) 0%, transparent 60%),
      linear-gradient(120deg, var(--color-coral) 0%, var(--color-magenta) 52%, var(--color-purple) 100%);
  --gradient-about:
      linear-gradient(170deg,
        color-mix(in srgb, var(--color-magenta) 38%, var(--color-lavender)) 0%,
        var(--color-lavender) 30%,
        color-mix(in srgb, var(--color-lavender) 45%, var(--color-cream)) 62%,
        var(--color-cream) 100%);
  --gradient-contact:
      radial-gradient(110% 120% at 0% 0%, var(--color-orange) 0%, transparent 52%),
      linear-gradient(115deg, var(--color-coral) 0%, var(--color-magenta) 48%, var(--color-purple) 100%);
}