/*
 * ─────────────────────────────────────────────────────────────────────────────
 *  CUIDADORAS BARCELONA — Brand CSS
 *  Versión 2026
 *  Uso: añade este archivo a tu proyecto y utiliza las variables en tu CSS.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ═══════════════════ GOOGLE FONTS ═══════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ═══════════════════ TOKENS DE COLOR ═══════════════════ */
:root {
  /* Colores principales */
  --cb-azul-noche:       #0F1E46;   /* Color principal */
  --cb-coral:            #D4654A;   /* Acento de marca */

  /* Colores de apoyo */
  --cb-melocoton:        #EFBAA0;   /* Acento suave */
  --cb-oro:              #C9A96E;   /* Detalle premium */
  --cb-crema:            #FAF6F1;   /* Fondo claro */

  /* Variantes oscuras */
  --cb-azul-profundo:    #1C1C2E;   /* Fondo oscuro alternativo */
  --cb-coral-dark:       #B85540;   /* Coral oscurecido (hover) */

  /* Neutros */
  --cb-gris-1:           #E5DDD5;   /* Bordes y separadores */
  --cb-gris-2:           #B8B0A8;   /* Texto secundario */
  --cb-gris-3:           #8B8099;   /* Texto terciario / placeholders */

  /* ═══════════════════ TIPOGRAFÍA ═══════════════════ */
  --cb-font-display:     'Cormorant Garamond', Georgia, serif;
  --cb-font-body:        'DM Sans', system-ui, sans-serif;

  /* Pesos */
  --cb-weight-light:     300;
  --cb-weight-regular:   400;
  --cb-weight-medium:    500;
  --cb-weight-semibold:  600;

  /* Escala tipográfica */
  --cb-size-display:     clamp(40px, 6vw, 72px);
  --cb-size-h1:          clamp(28px, 4vw, 48px);
  --cb-size-h2:          clamp(22px, 3vw, 32px);
  --cb-size-h3:          clamp(18px, 2.5vw, 24px);
  --cb-size-body-lg:     18px;
  --cb-size-body:        16px;
  --cb-size-body-sm:     14px;
  --cb-size-caption:     12px;
  --cb-size-label:       10px;

  /* Interlineado */
  --cb-leading-tight:    1.1;
  --cb-leading-normal:   1.5;
  --cb-leading-loose:    1.75;

  /* Espacio entre letras */
  --cb-tracking-wide:    0.12em;
  --cb-tracking-wider:   0.22em;
  --cb-tracking-widest:  0.38em;

  /* ═══════════════════ ESPACIADO ═══════════════════ */
  --cb-space-xs:    8px;
  --cb-space-sm:    16px;
  --cb-space-md:    24px;
  --cb-space-lg:    40px;
  --cb-space-xl:    64px;
  --cb-space-2xl:   100px;

  /* ═══════════════════ BORDES ═══════════════════ */
  --cb-radius-sm:   4px;
  --cb-radius-md:   8px;
  --cb-radius-lg:   12px;

  /* ═══════════════════ SOMBRAS ═══════════════════ */
  --cb-shadow-sm:   0 2px 12px rgba(15, 30, 70, 0.08);
  --cb-shadow-md:   0 8px 32px rgba(15, 30, 70, 0.12);
  --cb-shadow-lg:   0 24px 64px rgba(15, 30, 70, 0.18);
}

/* ═══════════════════ CLASES DE UTILIDAD ═══════════════════ */

/* Fondos */
.cb-bg-navy   { background-color: var(--cb-azul-noche); }
.cb-bg-coral  { background-color: var(--cb-coral); }
.cb-bg-crema  { background-color: var(--cb-crema); }
.cb-bg-dark   { background-color: var(--cb-azul-profundo); }

/* Textos */
.cb-text-navy  { color: var(--cb-azul-noche); }
.cb-text-coral { color: var(--cb-coral); }
.cb-text-crema { color: var(--cb-crema); }
.cb-text-muted { color: var(--cb-gris-2); }

/* Tipografía */
.cb-display {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-light);
  font-size: var(--cb-size-display);
  line-height: var(--cb-leading-tight);
  letter-spacing: 0.02em;
}

.cb-heading-1 {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-regular);
  font-size: var(--cb-size-h1);
  line-height: var(--cb-leading-tight);
}

.cb-heading-2 {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-weight-semibold);
  font-size: var(--cb-size-h2);
  line-height: 1.25;
}

.cb-body {
  font-family: var(--cb-font-body);
  font-weight: var(--cb-weight-regular);
  font-size: var(--cb-size-body);
  line-height: var(--cb-leading-normal);
}

.cb-label {
  font-family: var(--cb-font-body);
  font-weight: var(--cb-weight-light);
  font-size: var(--cb-size-label);
  letter-spacing: var(--cb-tracking-widest);
  text-transform: uppercase;
}

/* Botón principal */
.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cb-coral);
  color: var(--cb-crema);
  font-family: var(--cb-font-body);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-size-body-sm);
  letter-spacing: var(--cb-tracking-wide);
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--cb-radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}
.cb-btn:hover { background: var(--cb-coral-dark); }

/* Botón outline */
.cb-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--cb-azul-noche);
  font-family: var(--cb-font-body);
  font-weight: var(--cb-weight-medium);
  font-size: var(--cb-size-body-sm);
  letter-spacing: var(--cb-tracking-wide);
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--cb-radius-sm);
  border: 1.5px solid var(--cb-azul-noche);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.cb-btn-outline:hover {
  background: var(--cb-azul-noche);
  color: var(--cb-crema);
}

/* Separador de marca */
.cb-divider {
  width: 32px;
  height: 1px;
  background: var(--cb-coral);
  border: none;
  margin: 20px 0;
}

/* Card base */
.cb-card {
  background: var(--cb-crema);
  border: 1px solid var(--cb-gris-1);
  border-radius: var(--cb-radius-md);
  padding: var(--cb-space-lg);
  box-shadow: var(--cb-shadow-sm);
}