/* ============================================
   LUR COMUNICACIÓN — VARIABLES MAESTRAS
   Edita aquí para cambiar toda la web
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&display=swap');   /* NUEVO: titulares home 2 */


:root {

  /* --- COLORES DE MARCA --- */
  --color-brand:          #2d6b6b;   /* Verde teal principal — sidebar, acentos */
  --color-brand-dark:     #1e4a4a;   /* Teal oscuro — hover, fondos hero */
  --color-brand-light:    #3d8b8b;   /* Teal claro — hover botón colapsar */
  --color-brand-accent:   #8fcac4;   /* Acento suave — detalles, iconos */
  --color-brand-tostado:   #b17f49;   /* tostado  */
  --color-brand-tostadoclaro:   #c8b89a;   /* tostado claro  */
  --color-brand-black:   #000000;   /* negro  */
  /*Subrayados*/
  --color-brand-accent-subra:   rgba(143, 202, 196, 0.8);
  --color-brand-tostadoclaro-subra:   rgba(200, 184, 154, 0.8);
  


  /* --- TEXTOS SOBRE FONDO DE MARCA --- */
  --color-on-brand:       #ffffff;
  --color-on-brand-muted: rgba(255, 255, 255, 0.55);
  --color-on-brand-soft:  rgba(255, 255, 255, 0.78);

  /* --- FONDOS GENERALES --- */
  --color-bg-page:        #ffffff;
  --color-bg-surface:     #f4f6f6;
  --color-bg-card:        rgba(235,240,239,0.15);
  --color-bg-soft:        #f6f2ea;   /* Crema suave — fondos de sección */
 --color-bg-soft-2: rgba(215,209,197,1.00);

  /* --- TEXTOS GENERALES --- */
  --color-text-primary:   #000000;
  --color-text-secondary: #171717;
  --color-text-muted:     #444646;
  --color-text-faint:     #8a8a8a;   /* NUEVO: gris claro, solo para titulares grandes (parte apagada del h1) */

  /* --- BORDES --- */
  --color-border:         rgba(45, 107, 107, 0.15);
  --color-border-dark:    rgba(45, 107, 107, 0.3);
  --color-border-sidebar: rgba(255, 255, 255, 0.15);
  --color-border-neutral: rgba(0, 0, 0, 0.15);   /* NUEVO: filete gris neutro (listas sobre blanco) */

  /* --- TIPOGRAFÍA --- */
  --font-primary:         'Montserrat', sans-serif;
  --font-secundaria:         'Fraunces', serif;
  --font-display:         'Inter Tight', 'Montserrat', sans-serif;   /* NUEVO: titulares sin serifa (home 2) */

  --font-size-xs:         10px;
  --font-size-sm:         12px;
  --font-size-base:       14px;
  --font-size-md:         16px;
  --font-size-lg:         21px;
  --font-size-ld:         26px;
  --font-size-h3:         16px;
  --font-size-h2:         38px;
  --font-size-h1:         42px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-base:     1.7;
  --letter-spacing-caps:  1.5px;
  --letter-spacing-wide:  3px;

  /* --- LAYOUT --- */
  --sidebar-width:            320px;
  --sidebar-width-collapsed:  56px;
  --sidebar-transition:       0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;

  --spacing-xs:   8px;
  --spacing-sm:   12px;
  --spacing-md:   20px;
  --spacing-lg:   32px;
  --spacing-xl:   60px;
  --spacing-gutter: 16px;   /* NUEVO: aire entre piezas de una retícula (hero home 2) */
  
   /* --- BOTONES  --- */
  --btn-brand:          #2d6b6b;   /* Verde teal principal — sidebar, acentos */
  --btn--brand-light:    #3d8b8b;   /* Teal claro — hover botón colapsar */
  --btn--brand-accent:   #8fcac4;   /* Acento suave — detalles, iconos */
  --btn--brand-tostado:   #b17f49;   /* tostado  */
  --btn--brand-tostadoclaro:   #c8b89a;   /* tostado claro  */
  --btn--brand-black:   #000000;   /* negro  */

  /* --- SOMBRAS --- */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.08);

}