/* ============================================================
   Sistema Virginia — paleta
   Aplicado a ropaamericana.manjolabz.com

   Principios (del documento de implementación):
   · Crema como protagonista: 85–90 % del espacio visual
   · Acentos estratégicos: rosa para tienda, azul para academia
   · Minimalismo intencional
   · Accesibilidad primero

   ⚠ PENDIENTE: los valores de rosa y azul son PROVISIONALES.
   Sustituir por los del Excel de la clienta. No hace falta tocar
   nada más: todo el sitio lee estas variables.
   ============================================================ */

:root{
  /* --- confirmados en el documento --- */
  --color-cream:      #FBF9F6;   /* fondo protagonista */
  --color-gray:       #6B6B6B;   /* texto secundario sobre crema (AA) */
  --color-border:     #E8E8E8;   /* bordes de tarjeta */
  --color-white:      #FFFFFF;

  /* --- derivados, ajustables --- */
  --color-cream-2:    #F4F0EA;   /* crema un punto más profundo, para bandas */
  --color-ink:        #2B2A28;   /* texto principal */

  /* --- PROVISIONALES: sustituir con el Excel --- */
  --color-pink:       #C4808C;   /* acento TIENDA */
  --color-pink-ink:   #92505C;   /* rosa oscurecido, para texto sobre crema (AA) */
  --color-pink-soft:  #F7EDEE;   /* fondo rosa muy tenue */
  --color-blue:       #7695B4;   /* acento ACADEMIA */
  --color-blue-ink:   #3D5C7C;   /* azul oscurecido, para texto sobre crema (AA) */
  --color-blue-soft:  #EDF1F6;   /* fondo azul muy tenue */

  /* --- tipografía --- */
  --font-serif: Georgia, "Times New Roman", Garamond, serif;
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* --- espaciado y forma --- */
  --radius:   4px;
  --pad-sm:   14px;
  --pad-md:   24px;
  --pad-lg:   40px;
  --pad-xl:   72px;
}

/* Tarjeta de curso, tal como la define el documento */
.course-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-blue);
  border-radius: var(--radius);
  padding: var(--pad-md);
}

/* Su equivalente para la tienda */
.shop-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-pink);
  border-radius: var(--radius);
  padding: var(--pad-md);
}