/* ==========================================================================
   Tokens de marca Chogus

   La paleta son cuatro colores de marca y tres fondos. Cualquier color del
   sitio sale de aquí; si hace falta uno nuevo, se añade a esta lista y no
   suelto dentro de una hoja de estilos.
   ========================================================================== */

:root {
	/* --- Marca ---------------------------------------------------------
	   La terracota es el color principal (desde el 30/09/2026 sustituye al
	   verde); su variante oscura es el hover y el fondo de la segunda fila
	   del header y del pie. El amarillo es el acento.
	   ------------------------------------------------------------------ */
	--c-terracota:        #C56742;
	/* La terracota un 20% más oscura: hover y variante de contraste. */
	--c-terracota-oscuro: #9E5235;
	--c-terracota-oscuro: color-mix(in srgb, var(--c-terracota) 80%, #000000);
	--c-amarillo:         #FABE1F;

	/* --- Fondos --------------------------------------------------------
	   Versiones muy diluidas, para fondos de sección y de tarjeta. Llevan
	   el hex a pelo primero, por si el navegador no entiende color-mix, y
	   debajo la mezcla, que es la que manda cuando sí lo entiende.
	   ------------------------------------------------------------------ */
	--bg-amarillo:        #FBF7ED;
	--bg-amarillo:        color-mix(in srgb, #D9B24B 10%, #FFFFFF);

	--bg-verde:           #EFFBF9;
	--bg-verde:           color-mix(in srgb, #63D2C4 10%, #FFFFFF);

	--bg-terracota:       #F9F0EC;
	--bg-terracota:       color-mix(in srgb, var(--c-terracota) 10%, #FFFFFF);

	/* Gris de fondo de la portada: apenas se separa del blanco. */
	--bg-gris:            #FBFBFB;

	/* Variante algo más presente, para formas decorativas. */
	--bg-terracota-20:    #F3E1D9;
	--bg-terracota-20:    color-mix(in srgb, var(--c-terracota) 20%, #FFFFFF);

	--bg-verde-20:        #DFF6F3;
	--bg-verde-20:        color-mix(in srgb, #63D2C4 20%, #FFFFFF);

	/* --- Neutros -------------------------------------------------------- */
	--c-negro:            #242424; /* títulos y enlaces */
	--c-texto:            #7A7FA3; /* párrafos */
	--c-blanco:           #FFFFFF;
	--c-borde:            #EFF2EF; /* líneas, separadores y bordes de campo */
	--c-borde-card:       #EBEBEB; /* contorno de la tarjeta de producto */
	--c-borde-calido:     #EBE8E2; /* línea sobre fondos cálidos (garantías) */

	/* --- Estado ---------------------------------------------------------- */
	/* Nada que ver con la paleta de marca: aqui el color es el mensaje. */
	--c-error:            #B3261E; /* rojo oscuro */
	--bg-error:           #F9EBEA;
	--bg-error:           color-mix(in srgb, #B3261E 8%, #FFFFFF);

	--c-exito:            #1E7E45; /* verde de exito */
	--bg-exito:           #ECF5EF;
	--bg-exito:           color-mix(in srgb, #1E7E45 8%, #FFFFFF);

	/* --- Tipografías --------------------------------------------------- */
	--f-titulo: "Truculenta", sans-serif;
	--f-texto:  "Varta", sans-serif;

	/* Display (H1 grande) — Truculenta 800 */
	--fz-display:      90px;
	--lh-display:      1em;
	/* Display secundario */
	--fz-display-2:    80px;
	--lh-display-2:    0.8em;
	/* H2 — Truculenta 400 */
	--fz-h2:           40px;
	--lh-h2:           45px;
	/* H3 — Truculenta 800 */
	--fz-h3:           38px;
	--lh-h3:           1em;
	/* H4 — Truculenta bold */
	--fz-h4:           28px;
	--lh-h4:           1.5em;
	/* Cuerpo — Varta 400 */
	--fz-texto:        18px;
	--lh-texto:        1.5em;
	/* Párrafo L — Varta */
	--fz-parrafo-l:    22px;
	--lh-parrafo-l:    1.2em;
	/* Párrafo XS — Varta */
	--fz-parrafo-xs:   16px;
	--lh-parrafo-xs:   1.2em;
	/* Botones — Truculenta 700 */
	--fz-boton:        24px;
	--lh-boton:        1.1em;
	/* Tag — Truculenta 800 uppercase */
	--fz-tag:          15px;
	--lh-tag:          1.5em;
	--ls-tag:          0.5px;
	/* Números / pasos — Truculenta 800 */
	--fz-numero:       41px;

	/* Las dos unicas sombras del sitio. Fuera de estos dos usos no se pone
	   box-shadow en ningun sitio. */
	--sombra-flotante: 0 12px 32px rgba(36, 36, 36, .12); /* desplegables del header */
	/* Flecha de los desplegables (se quita la del navegador). */
	--flecha-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237A7FA3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");

	/* Tic de las casillas marcadas (checkout). */
	--tic-marca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23C56742' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");

	--sombra-card:     0 6px 24px rgba(36, 36, 36, .06);  /* tarjeta del carrito */

	/* --- Layout -------------------------------------------------------- */
	--wrapper-max:     1140px;
	--wrapper-pad:     20px;
	--radio-boton:     40px;
	--radio-card:      20px;
	--z-header:        999;
	--transicion:      .3s ease;
}

/* Tablet — breakpoint de Elementor: 1024px */
@media (max-width: 1024px) {
	:root {
		--fz-display:   70px;
		--fz-display-2: 70px;
		--wrapper-max:  1024px;
	}
}

/* Móvil — breakpoint de Elementor: 767px */
@media (max-width: 767px) {
	:root {
		--fz-display:     67px;
		--fz-display-2:   55px;
		--lh-display-2:   0.9em;
		--lh-texto:       1.3em;
		--fz-h2:          40px;
		--lh-h2:          1.1em;
		--fz-h3:          30px;
		--fz-h4:          24px;
		--fz-parrafo-xs:  15px;
		--lh-parrafo-xs:  1.1em;
		--wrapper-max:    767px;
		--wrapper-pad:    16px;
	}
}