/* Silere · layout.css — base de página y utilidades de layout.
   Prefijo cc-. Sin selectores autogenerados de Divi. Sin !important.
   Los valores salen de las variables de Divi (--gvid-cc-*) y de los colores globales
   publicados por functions.php (--cc-*): cambiar un valor = cambiarlo en Divi.

   Fase 2 (sistema de diseño): solo lo que ya se ve igual hoy. Los tamaños de títulos
   y el color de enlaces se aplican con Presets al rehacer cada sección (Fase 3), para
   no alterar las páginas actuales. */

body,
#page-container,
#main-content {
	background-color: var(--cc-fondo);
}

body {
	color: var(--cc-texto-suave);
	-webkit-font-smoothing: antialiased;
}

/* Contenedor del ancho de contenido con margen lateral fluido. */
.cc-container {
	width: min(100% - 2 * var(--gvid-cc-margen-lateral), var(--gvid-cc-ancho-contenido));
	margin-inline: auto;
}

/* ---- Anchos únicos del sitio ------------------------------------------------------------ */
/* Tres medidas y nada más: contenido (--gvid-cc-ancho-contenido) para cabecera, secciones,
   tienda, producto, compra y pie; lectura (--gvid-cc-ancho-lectura) para bloques de solo
   texto (.cc-fila-angosta); y ancho completo solo para el banner de la portada.
   Así el logo, el contenido y el pie arrancan en la misma línea en todas las páginas.
   Divi da a cada fila 80 % y su propio máximo; (2,2,0) le gana a sus reglas por fila
   (".et-db #et-boc .et-l .et_pb_row_1_tb_body", 1,3,0). #main-content cubre el checkout,
   que usa la plantilla en blanco y no tiene #et-boc. */
#page-container :is(#et-boc, #main-content) .et_pb_row:not(.cc-fila-angosta, :has(.cc-h1-portada)),
#page-container #main-content > .container {
	width: min(100% - 2 * var(--gvid-cc-margen-lateral), var(--gvid-cc-ancho-contenido));
	max-width: none;
	margin-inline: auto;
}

#page-container :is(#et-boc, #main-content) .et_pb_row.cc-fila-angosta {
	width: min(100% - 2 * var(--gvid-cc-margen-lateral), var(--gvid-cc-ancho-lectura));
	max-width: none;
	margin-inline: auto;
}

/* Etiqueta pequeña sobre títulos ("eyebrow"): Quicksand espaciada, como en el sitio. */
.cc-etiqueta {
	font-size: var(--gvid-cc-texto-etiqueta);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--cc-eucalipto-texto);
}

/* Títulos H3–H6 en Quicksand (los H1–H2 usan la caligrafía de Divi). Antes lo fijaba
   Custom CSS & JS con !important; ver también el preset por defecto del módulo Texto. */
#page-container #et-boc :is(h3, h4, h5, h6) {
	font-family: "Quicksand", sans-serif;
}

/* Texto solo para lectores de pantalla y buscadores (p. ej. el H1 de la portada). */
.cc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

#page-container #et-boc .cc-h1-portada {
	margin: 0;
	padding: 0;
}