/* =============================================================================
   El Gauchito — Tokens de marca
   -----------------------------------------------------------------------------
   Paleta, tipografías, radios y sombras del sitio, como variables CSS.

   ESTE ES EL ÚNICO ARCHIVO QUE DEFINE COLORES. El resto del tema los consume
   por variable: cambiar la marca acá se propaga a todas las páginas, y una
   página nueva arranca coherente sin copiar hex de ningún lado.

   Se carga en TODAS las páginas, incluidas las de WooCommerce, aunque el resto
   del CSS del sitio no se cargue. Es liviano y es la base de todo lo demás.
   ========================================================================== */

/* ---------- Tipografías de marca -------------------------------------------
   Los archivos viven en el tema (assets/fonts), no en la biblioteca de medios:
   así viajan con el código y no dependen de que alguien las suba a cada
   entorno. `font-display:swap` evita el texto invisible mientras cargan.

   Nota: el HTML original también declaraba "Bionix", pero ninguna regla la
   usaba. El archivo quedó en assets/fonts por si hace falta; no se declara
   acá para no descargar 20 KB que nadie pinta.
   ------------------------------------------------------------------------ */

@font-face {
	font-family: "Wosker";                    /* Titulares */
	src: url("../fonts/wosker.otf") format("opentype");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Boldonse";                  /* Subtítulos y etiquetas */
	src: url("../fonts/boldonse.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "CocoaDelight";              /* Acento manuscrito */
	src: url("../fonts/cocoadelight.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sonny";                     /* Texto general */
	src: url("../fonts/sonny-400.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Sonny";
	src: url("../fonts/sonny-700.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---------- Paleta: primarios vívidos ---------------------------------
	   Cada color tiene su variante `-deep` para bordes, hovers y gradientes.
	   -------------------------------------------------------------------- */
	--eg-red:          #ED2024;
	--eg-red-deep:     #C8161B;
	--eg-orange:       #F47C1B;
	--eg-orange-deep:  #D9650C;
	--eg-green:        #1FA437;
	--eg-green-deep:   #15792A;
	--eg-purple:       #9D5CE0;
	--eg-purple-deep:  #7E3FC9;
	--eg-yellow:       #FFD400;
	--eg-yellow-deep:  #E6B400;

	/* ---------- Soporte --------------------------------------------------- */
	--eg-cream:        #FBF6E9;   /* Fondo del sitio */
	--eg-cream-2:      #F4ECCF;   /* Fondo alternativo, placeholders */
	--eg-ink:          #0F0F12;   /* Off-black: contornos y texto */
	--eg-ink-soft:     #3a3a40;
	--eg-paper:        #FFFFFF;

	/* Texto sobre cream, en tres pesos. Antes eran rgba() sueltas repetidas
	   en 20 reglas; centralizarlas evita que se desalineen al retocar. */
	--eg-text:         rgba(15, 15, 18, .78);
	--eg-text-soft:    rgba(15, 15, 18, .65);
	--eg-text-faint:   rgba(15, 15, 18, .5);
	--eg-line:         rgba(15, 15, 18, .2);   /* Separadores punteados */

	/* ---------- Tipografías ----------------------------------------------- */
	--eg-font-display: "Wosker", "Boldonse", "Arial Black", system-ui, sans-serif;
	--eg-font-tech:    "Boldonse", "Arial Black", system-ui, sans-serif;
	--eg-font-script:  "CocoaDelight", "Caveat", cursive;
	--eg-font-body:    "Sonny", "Inter", "Segoe UI", system-ui, sans-serif;

	/* ---------- Formas ---------------------------------------------------- */
	--eg-r-pill:       999px;
	--eg-r-card:       22px;
	--eg-r-tile:       18px;

	/* ---------- Sombras ---------------------------------------------------
	   El sistema visual es "sticker": contorno negro + sombra dura abajo, sin
	   difuminar. La sombra dura es la que da el efecto de relieve recortado.
	   -------------------------------------------------------------------- */
	--eg-shadow-hard:  0 8px 0 var(--eg-ink);
	--eg-shadow-pop:   0 12px 30px rgba(15, 15, 18, .18);
	--eg-shadow-glow:  0 0 60px rgba(242, 198, 17, .35);

	/* Ancho del contenido y aire lateral. El aire cambia por breakpoint y hay
	   componentes que se salen del margen (el carrusel sangra a pantalla
	   completa): leerlo de una variable evita repetir el número en cada media
	   query y que se desincronicen. */
	--eg-max:          1440px;
	--eg-gutter:       48px;
}

@media (max-width: 1180px) { :root { --eg-gutter: 32px; } }
@media (max-width:  880px) { :root { --eg-gutter: 22px; } }
@media (max-width:  520px) { :root { --eg-gutter: 16px; } }