/*
INFO: Variables CSS globales para manejar estilos comunes como tamaños de fuente y escalas de color.
*/

/* ============================================================================================================================= */
/* ===================================================================================== ROOT CSS VARIABLES ==================== */
/* ============================================================================================================================= */

/*html{font-size:16px; font-size:100%;}*/

:root{	
	/* --------------------------------------------- FUENTES ----------------------- */
	--font-title: "Roboto Condensed", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";	
	--font-body: "Inter", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--font-numbers: "Inter", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--font-code:"Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;

	/* Escala tipográfica - interfaz */
	--font-size-base: 1rem; /* 16px: Texto base normal, lectura */
	--font-size-secondary: 0.9375rem; /* 15px: Texto base secundario: carruseles y cards informativas, info orientativa en formularios...) */

	--font-size-description-title: 0.8125rem; /* 13px: Pequeño título para encabezar descripciones */
	--font-size-description: 0.75rem; /* 12px: Descripciones secundarias, lectura ligera */

	--font-size-micro: 0.625rem; /* 10px: Información excepcionalmente pequeña y prescindible */
    

	/* Escala tipográfica - destacados y títulos */
	--font-size-inc-100: 1.125rem;
    --font-size-inc-200: 1.375rem;
    --font-size-inc-300: 1.75rem;

	/* Escala tipográfica - elementos concretos */
	--font-size-btn_box:0.95rem;

	
}

@media (min-width: 768px){
	/*html{font-size:16px; font-size:100%;}*/
	
	:root{
		/* Escala tipográfica - interfaz */
		--font-size-base: 1rem; /* 16px */
		--font-size-secondary: 0.9375rem; /* 15px */		

		--font-size-description-title: 0.875rem; /* 14px */
		--font-size-description: 0.8125rem; /* 13px */

		--font-size-micro: 0.625rem; /* 10px */		


		/* Escala tipográfica - destacados y títulos */
		--font-size-inc-100: 1.125rem;  /* 18px: Títulos pequeños o elementos destacados */
		--font-size-inc-200: 1.375rem;  /* 22px: Títulos de apartados */
		--font-size-inc-300: 1.75rem;  /* 28px: Títulos principales de sección */

		/* Escala tipográfica - elementos concretos */
	    --font-size-btn_box: 1rem;

	}
}




:root{
	/* --------------------------------------------- SUPERFICIES ------------------- */
	--surface-card-border: color-mix(in srgb, var(--base-4) 42%, white);
    --surface-card-radius: 18px;
    --surface-card-shadow: 0 14px 34px rgba(29, 36, 55, 0.08);
    --surface-card-shadow-soft: 0 8px 20px rgba(29, 36, 55, 0.06);

	/* --------------------------------------------- MAPA COLOR -------------------- */

	/*https://uicolors.app/create*/

	/* PIEDRA */
	/*
	--base-1: #fafaf9;
	--base-2: #f5f5f4;
	--base-3: #e7e5e4;
	--base-4: #d6d3d1;
	--base-5: #a8a29e;
	--base-6: #78716c;
	--base-7: #57534e;
	--base-8: #44403c;
	--base-9: #292524;
	--base-10: #1c1917;
	--base-11: #0c0a09;*/

	/* TIERRA */

	/* BASE */
	--base-1: #F3F3FF;
	--base-2: #D9D9EC;
	--base-3: #C2C2DB;
	--base-4: #ABACCB;
	--base-5: #9496BA;
	--base-6: #7E81AA;
	--base-7: #686D92;
	--base-8: #545A7A;
	--base-9: #404763;
	--base-10: #2E354C;
	--base-11: #1D2437;

	/*VERDES*/
	--color-verde-1: #F6F9F2;
	--color-verde-2: #D7E1CB;
	--color-verde-3: #BFCFAB;
	--color-verde-4: #A6BD8B;
	--color-verde-5: #8EAB6B;
	--color-verde-6: #76994A; /*Base*/
	--color-verde-7: #517330;
	--color-verde-8: #2F4F17;
	--color-verde-9: #102D00;

	--color-verde-6-overdark: #7bc52e;

	/*VIOLETAS*/
	--color-violeta-1: #EBE4FF;
	--color-violeta-2: #CEC4ED;
	--color-violeta-3: #AF9FDA;
	--color-violeta-4: #907BC6;
	--color-violeta-5: #7456B2;
	--color-violeta-6: #642fc1; /*Base*/
	--color-violeta-7: #3D1F7E;
	--color-violeta-8: #250E5E;
	--color-violeta-9: #100040;

	/*ROSALETA*/
	--color-rosaleta-5: #ac57db;
	
	/*AMARILLOS/NARANJAS*/
	--color-amanja-1: #FFF6D4;
	--color-amanja-2: #F4DFA0;
	--color-amanja-3: #F3C77B;
	--color-amanja-4: #F3AD58;
	--color-amanja-5: #E49447;
	--color-amanja-6: #D47C39; /*Base*/
	--color-amanja-7: #C3642D;
	--color-amanja-8: #B14C25;
	--color-amanja-9: #9E341F;

	/*AZULES*/
	--color-azul-1: #E5F0F7;
	--color-azul-2: #BFDDF2;
	--color-azul-3: #9ACAEC;
	--color-azul-4: #75B6E7;
	--color-azul-5: #4EA1E1;
	--color-azul-6: #1D8BDB; /*Base*/
	--color-azul-7: #1B64B0;
	--color-azul-8: #144085;
	--color-azul-9: #0C1E5C;

	/*ROJOS*/
	--color-rojo-1: #F0E0DB;
	--color-rojo-2: #CFB7AF;
	--color-rojo-3: #E0916B;
	--color-rojo-4: #CD624B;
	--color-rojo-5: #B62C39;
	--color-rojo-6: #93212F; /*Base*/
	--color-rojo-7: #711724;
	--color-rojo-8: #510E19;
	--color-rojo-9: #33060E;    
}


/* ============================================================= DEFINICIONES DE COLOR ============================ */
/* ----------------- Extras text -------- */
.txt_muted-light{color:#37474f !important;}
.txt_muted-dark{color:#9aa7b8 !important;}

/* ----------------- Black/White --------------- */
.txt_white{color:white !important;}
.bg_white{background-color:white;}

.txt_black{color:black !important;}
.bg_black{background-color:white;}

/* ----------------- Base --------------- */
.txt_base-1{color:var(--base-1) !important;}
.txt_base-2{color:var(--base-2) !important;}
.txt_base-3{color:var(--base-3) !important;}
.txt_base-4{color:var(--base-4) !important;}
.txt_base-5{color:var(--base-5) !important;}
.txt_base-6{color:var(--base-6) !important;}
.txt_base-7{color:var(--base-7) !important;}
.txt_base-8{color:var(--base-8) !important;}
.txt_base-9{color:var(--base-9) !important;}
.txt_base-10{color:var(--base-10) !important;}
.txt_base-11{color:var(--base-11) !important;}

.bg_base-1{background-color:var(--base-1) !important;}
.bg_base-2{background-color:var(--base-2) !important;}
.bg_base-3{background-color:var(--base-3) !important;}
.bg_base-4{background-color:var(--base-4) !important;}
.bg_base-5{background-color:var(--base-5) !important;}
.bg_base-6{background-color:var(--base-6) !important;}
.bg_base-7{background-color:var(--base-7) !important;}
.bg_base-8{background-color:var(--base-8) !important;}
.bg_base-9{background-color:var(--base-9) !important;}
.bg_base-10{background-color:var(--base-10) !important;}
.bg_base-11{background-color:var(--base-11) !important;}


/* ----------------- VERDES --------------- */
.txt_color-verde-1{color:var(--color-verde-1);}
.txt_color-verde-2{color:var(--color-verde-2);}
.txt_color-verde-3{color:var(--color-verde-3);}
.txt_color-verde-4{color:var(--color-verde-4);}
.txt_color-verde-5{color:var(--color-verde-5);}
.txt_color-verde-6{color:var(--color-verde-6);}
.txt_color-verde-7{color:var(--color-verde-7);}
.txt_color-verde-8{color:var(--color-verde-8);}
.txt_color-verde-9{color:var(--color-verde-9);}

.bg_color-verde-1{background-color:var(--color-verde-1) !important;}
.bg_color-verde-2{background-color:var(--color-verde-2) !important;}
.bg_color-verde-3{background-color:var(--color-verde-3) !important;}
.bg_color-verde-4{background-color:var(--color-verde-4) !important;}
.bg_color-verde-5{background-color:var(--color-verde-5) !important;}
.bg_color-verde-6{background-color:var(--color-verde-6) !important;}
.bg_color-verde-7{background-color:var(--color-verde-7) !important;}
.bg_color-verde-8{background-color:var(--color-verde-8) !important;}
.bg_color-verde-9{background-color:var(--color-verde-9) !important;}

.bg_degradado_horizontal-verde{
	background-image: linear-gradient(to right, var(--color-verde-6), var(--color-verde-4));
}
.bg_degradado_vertical-verde{
	background-image: linear-gradient(to bottom, var(--color-verde-6), var(--color-verde-4));
}
.bg_degradado_text-verde{
	background: linear-gradient(135deg, var(--color-verde-4), var(--color-verde-6));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}


/* ----------------- VIOLETAS --------------- */
.txt_color-violeta-1{color:var(--color-violeta-1) !important;}
.txt_color-violeta-2{color:var(--color-violeta-2) !important;}
.txt_color-violeta-3{color:var(--color-violeta-3) !important;}
.txt_color-violeta-4{color:var(--color-violeta-4) !important;}
.txt_color-violeta-5{color:var(--color-violeta-5) !important;}
.txt_color-violeta-6{color:var(--color-violeta-6) !important;}
.txt_color-violeta-7{color:var(--color-violeta-7) !important;}
.txt_color-violeta-8{color:var(--color-violeta-8) !important;}
.txt_color-violeta-9{color:var(--color-violeta-9) !important;}

.bg_color-violeta-1{background-color:var(--color-violeta-1) !important;}
.bg_color-violeta-2{background-color:var(--color-violeta-2) !important;}
.bg_color-violeta-3{background-color:var(--color-violeta-3) !important;}
.bg_color-violeta-4{background-color:var(--color-violeta-4) !important;}
.bg_color-violeta-5{background-color:var(--color-violeta-5) !important;}
.bg_color-violeta-6{background-color:var(--color-violeta-6) !important;}
.bg_color-violeta-7{background-color:var(--color-violeta-7) !important;}
.bg_color-violeta-8{background-color:var(--color-violeta-8) !important;}
.bg_color-violeta-9{background-color:var(--color-violeta-9) !important;}

.bg_degradado_horizontal-violeta{
	background-image: linear-gradient(to right, var(--color-violeta-6), #763db2)
}
.bg_degradado_vertical-violeta{
	background-image: linear-gradient(to bottom, var(--color-violeta-6), #763db2);
}
.bg_degradado_text-violeta{
	background: linear-gradient(135deg, var(--color-violeta-4), var(--color-violeta-6));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ----------------- ROSALETAS --------------- */
.bg_color-rosaleta-5{background-color:var(--color-rosaleta-5) !important;}

/* ----------------- AZULES --------------- */
.txt_color-azul-1{color:var(--color-azul-1) !important;}
.txt_color-azul-2{color:var(--color-azul-2) !important;}
.txt_color-azul-3{color:var(--color-azul-3) !important;}
.txt_color-azul-4{color:var(--color-azul-4) !important;}
.txt_color-azul-5{color:var(--color-azul-5) !important;}
.txt_color-azul-6{color:var(--color-azul-6) !important;}
.txt_color-azul-7{color:var(--color-azul-7) !important;}
.txt_color-azul-8{color:var(--color-azul-8) !important;}
.txt_color-azul-9{color:var(--color-azul-9) !important;}

.bg_color-azul-1{background-color:var(--color-azul-1) !important;}
.bg_color-azul-2{background-color:var(--color-azul-2) !important;}
.bg_color-azul-3{background-color:var(--color-azul-3) !important;}
.bg_color-azul-4{background-color:var(--color-azul-4) !important;}
.bg_color-azul-5{background-color:var(--color-azul-5) !important;}
.bg_color-azul-6{background-color:var(--color-azul-6) !important;}
.bg_color-azul-7{background-color:var(--color-azul-7) !important;}
.bg_color-azul-8{background-color:var(--color-azul-8) !important;}
.bg_color-azul-9{background-color:var(--color-azul-9) !important;}