/* =========================================================================
   THEME.CSS - Sistema de Diseño, Marca y Variables
   ========================================================================= */

@font-face {
  font-family: 'Comfortaa';
  src: url('/static/fonts/Comfortaa/Comfortaa-VariableFont_wght.woff2') format('woff2'),
       url('/static/fonts/Comfortaa/Comfortaa-VariableFont_wght.woff') format('woff'),
       url('/static/fonts/Comfortaa/Comfortaa-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ── Paleta de Colores Base ── */
  --color-purple-dark: #4B0082;
  --color-purple-deep: #320652;
  --color-purple-medium: #7A45A7;
  --color-purple-light: #C89EFF;
  --color-purple-muted: #BEB3CC;
  --color-pink-bg: #FFDDFF;
  --color-pink-highlight: #E673E0;
  --color-pink-strong: #FF77FF;
  --color-pink-soft: #FFAAFF;
  --color-pink-softer: #FFCCFF;
  --color-beige-base: #F5F5F5;
  --color-white: #FFFFFF;
  --color-error: #EF4444;
  --shadow-default: rgba(0, 0, 0, 0.08);

  /* ── Bloque de Compatibilidad Semántica Sematizada ── */
  --brand-dark-purple: var(--color-purple-dark);
  --brand-very-dark-purple-navbar: var(--color-purple-deep);
  --brand-header-text: var(--color-purple-medium);
  --brand-light-purple: var(--color-purple-light);
  --brand-very-light-purple: var(--color-purple-muted);
  --brand-body-bg: var(--color-pink-bg);
  --brand-highlight: var(--color-pink-highlight);
  --brand-highlight-strong: var(--color-pink-strong);
  --brand-highlight-soft: var(--color-pink-soft);
  --brand-highlight-softer: var(--color-pink-softer);
  --base-beige: var(--color-beige-base);
  --pure-white: var(--color-white);
  --shadow: var(--shadow-default);

  /* ── Paleta de Colores Oscura / Alternativa ── */
  --c-bg: #0d0b14;
  --c-surface: #1e1930;
  --c-surface-2: #261f3e;
  --c-border: rgba(148, 103, 255, 0.15);
  --c-border-2: rgba(148, 103, 255, 0.3);
  --c-primary: #9467ff;
  --c-primary-h: #b08aff;
  --c-primary-d: #6b3dd6;
  --c-accent: #e040fb;
  --c-text: #f0ecff;
  --c-text-2: #c4b8e8;
  --c-text-3: #8b7bb8;
  --c-error: #f87171;

  /* ── Espaciado (Tokens de Diseño) ── */

  /*
    ── Guía de Buenas Prácticas ──

    📐 Espaciados (padding, margin, gap) ➡️ Usa rem
      Los márgenes y rellenos deben mantener una proporción con el texto que rodean. 
      Si el texto de un botón crece porque el usuario aumentó la fuente, 
      el padding del botón debe crecer en consecuencia para que el texto no se desborde.

      Mal: padding: 12px 24px;

      Bien: padding: 0.75rem 1.5rem; (Equivale a 12px y 24px si la base es 16px).
  */

  /*  Estos valores permiten mantener una consistencia visual en el diseño, facilitando la creación de interfaces equilibradas y armoniosas. */
  --space-xs:  0.5rem;  /* (8px) para pequeños márgenes y rellenos. */
  --space-sm:  1rem;    /* (16px) para márgenes y rellenos estándar. */
  --space-md:  1.5rem;  /* (24px) para separación media entre elementos. */
  --space-lg:  2.5rem;  /* (40px) para separación amplia entre secciones. */
  --space-xl:  4rem;    /* (64px) para márgenes grandes y espacios generosos. */
  --space-2xl: 6rem;    /* (96px) para márgenes muy grandes y espacios destacados. */

  /* ── Radios de Borde ── */

  /*
    ── Guía de Buenas Prácticas ──

    ⭕ Radios de borde (border-radius) ➡️ Usa rem (o px en elementos pequeños)
Aquí hay un poco más de flexibilidad, pero la tendencia actual en sistemas de diseño escalables es usar rem.

Usa rem si quieres que las esquinas redondeadas de tus tarjetas (card) o secciones escalen visualmente de acuerdo al tamaño general de la pantalla o del componente.

Usa px solo si buscas un radio diminuto y fijo que no deba cambiar nunca (por ejemplo, un borde de 2px o 4px en un checkbox o un elemento UI rígido).

Para botones píldora: Se suele usar un valor exagerado en píxeles como border-radius: 9999px; porque el navegador automáticamente lo calcula para que sea un óvalo perfecto, sin importar el tamaño.

    Mal: border-radius: 12px;

    Bien: border-radius: 0.75rem; (Equivale a 12px si la base es 16px).
  */

/*  --r-ssm: 0.25rem;*/  /* ~4px - Curvatura muy leve (para checkboxes, inputs pequeños) */
/*  --r-sm:  0.5rem;*/   /* ~8px - Curvatura estándar (ideal para la mayoría de botones) */
/*  --r-md:  1rem;*/ 
/*  --r-lg:  1.5rem;*/ 
/*  --r-xl:  2rem;*/ 
/*  --r-full: 9999px;*/  /* Para crear botones o elementos con forma de "píldora" (completamente ovalados en los extremos) */

/* Radios de curvatura estandarizados */
  --r-sm: 0.25rem; /* ~4px - Curvatura muy leve (para checkboxes, inputs pequeños) */
  --r-md: 0.5rem;  /* ~8px - Curvatura estándar (ideal para la mayoría de botones) */
  --r-lg: 0.75rem; /* ~12px - Curvatura pronunciada (para botones grandes o tarjetas) */
  --r-xl: 1rem;    /* ~16px - Para componentes grandes (tarjetas principales, modales) */
  --r-xxl: 1.5rem; /* ~24px - Para componentes muy grandes (modales amplios, secciones principales) */
  --r-xxxl: 2rem;    /* ~32px - Para componentes destacados (tarjetas hero, secciones destacadas) */
  --r-pill: 9999px; /* Para crear botones o elementos con forma de "píldora" (completamente ovalados en los extremos) */

  /* ── Sombras de Componentes ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,.3);
  --shadow-md:  0 8px 32px rgba(0,0,0,.4);
  --shadow-glow: 0 0 40px rgba(148,103,255,.25);
  --shadow-glow-sm: 0 0 16px rgba(148,103,255,.2);

  /* ── Curvas de Animación ── */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:   180ms;
  --t-mid:    320ms;
  --t-slow:   500ms;

  /* ── Layout Maestro ── */
  --max-w: 1200px;
  --header-h: 72px;
  --section-midnight-violet: #12101c;
  --section-soft-neon-violet: rgba(148, 103, 255, 0.15);
  
  /* ── Tipografía (Escritorio) ── */
  --font-size-badge: 13px;
  --font-size-close-button: 20px;
  --font-size-company-name: 20px;
  --font-size-cta-button: 20px;
  --font-size-card-h3: 18px;
  --font-size-card-p: 15px;
  --font-size-hero-h1: 32px;
  --font-size-hero-p: 17px;
  --font-size-modal-header-h2: 18px;
  --font-size-footer-note: 16px;
  
  /* ── Tipografía (Móvil de Referencia) ── */
  --font-size-company-name-mobile: 14px;
  --font-size-cta-button-mobile: 16px;
  --font-size-hero-h1-mobile: 20px;
  --font-size-hero-p-mobile: 15px;
  --font-size-footer-note-mobile: 14px;
  --font-size-badge-mobile: 13px;
  --font-size-card-h3-mobile: 18px;
  --font-size-card-p-mobile: 15px;
  --font-size-modal-header-h2-mobile: 18px;

    /* ── Tamaños cuadrado LOGO ── */
  --logo-size-desktop: 48px;
  --logo-size-tablet: 44px;
  --logo-size-mobile: 40px;
  /*--logo-size: 48px;*/ /* Valor base para fallback, se ajustará con media queries */

}