/* Los Diaz · tramas.css — tramas de fondo (rediseño 2026-10-14, dirección "Líneas del
   Riñihue"). Las SVG salen de scripts/tramas.py (assets/img/tramas/).

   Un solo sistema de línea fina: las curvas de nivel son el lago y los cerros (secciones
   de productos, tienda, blog, páginas); las tramas botánicas, una especie cada una y
   tupidas como papel tapiz, van donde se cuenta la marca: parra en "Nosotros" y
   "Relacionados", copihue en el footer (pedido del cliente, 17-10; antes helecho). Nunca dos tramas en una sección.

   - Cada trama es una máscara (SVG en negro) cruzada con un degradado radial: nace en una
     esquina de la sección y se disuelve hacia el contenido. Tokens: --cc-trama-img y
     --cc-trama-tam (qué trama), --cc-trama-color y --cc-trama-op (tinta), --cc-trama-forma
     (esquina) y --cc-trama-desfase (qué trozo del mosaico).
   - Paisaje del lago con los volcanes (paisaje.svg): no se repite; es una banda al pie de la
     última sección antes del footer (blog de la portada, tienda y listado del blog), que
     se disuelve hacia arriba.

   El ::before va con z-index -1 dentro de la sección aislada: queda sobre el color de
   fondo que pone Divi y bajo todo el contenido. */

:root {
	--cc-trama-curvas: url("../img/tramas/curvas.svg");
	--cc-trama-copihue: url("../img/tramas/trama-copihue.svg");
	--cc-trama-parra: url("../img/tramas/trama-parra.svg");
	--cc-trama-helecho: url("../img/tramas/trama-helecho.svg");
	--cc-trama-paisaje: url("../img/tramas/paisaje.svg");
	--cc-trama-hojas-sup: url("../img/hojas/hojas-sup-der.webp");
	--cc-trama-hojas-inf: url("../img/hojas/hojas-inf-izq.webp");
	--cc-trama-copihue-colgante: url("../img/hojas/copihue-colgante.webp");
}

#page-container #et-boc :is(.cc-seccion-quesos, .cc-seccion-blog, .cc-catalogo, .cc-contenido-pagina, .cc-blog-listado, .cc-nosotros, .cc-relacionados),
#page-container .cc-footer {
	position: relative;
	isolation: isolate;
}

#page-container #et-boc :is(.cc-seccion-quesos, .cc-seccion-blog, .cc-catalogo, .cc-contenido-pagina, .cc-blog-listado, .cc-nosotros, .cc-relacionados)::before,
#page-container .cc-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: var(--cc-trama-color, var(--cc-texto));
	opacity: var(--cc-trama-op, 0.15);
	pointer-events: none;
	-webkit-mask:
		var(--cc-trama-img, var(--cc-trama-curvas)) var(--cc-trama-desfase, 0 0) / var(--cc-trama-tam, 900px) repeat,
		radial-gradient(var(--cc-trama-forma, 110% 85% at 100% 0%), #000 0 30%, transparent 72%);
	-webkit-mask-composite: source-in;
	mask:
		var(--cc-trama-img, var(--cc-trama-curvas)) var(--cc-trama-desfase, 0 0) / var(--cc-trama-tam, 900px) repeat,
		radial-gradient(var(--cc-trama-forma, 110% 85% at 100% 0%), #000 0 30%, transparent 72%);
	mask-composite: intersect;
}

/* Cada sección toma la trama desde otra esquina y otro trozo del mosaico. */
#page-container #et-boc .cc-seccion-quesos-vaca {
	--cc-trama-forma: 110% 85% at 0% 0%;
	--cc-trama-desfase: 380px 220px;
}

#page-container #et-boc .cc-seccion-blog,
#page-container #et-boc .cc-blog-listado {
	--cc-trama-forma: 100% 80% at 100% 100%;
	--cc-trama-desfase: 160px 520px;
}

#page-container #et-boc .cc-contenido-pagina {
	--cc-trama-forma: 70% 70% at 100% 0%;
}

/* ---- Tramas botánicas: una especie por sección ---- */

#page-container #et-boc :is(.cc-nosotros, .cc-relacionados),
#page-container .cc-footer {
	--cc-trama-tam: 420px;
}

#page-container #et-boc :is(.cc-nosotros, .cc-relacionados) {
	--cc-trama-img: var(--cc-trama-parra);
}

#page-container .cc-footer {
	--cc-trama-img: var(--cc-trama-copihue);
}

#page-container #et-boc .cc-nosotros {
	--cc-trama-op: 0.2;
	--cc-trama-forma: 85% 110% at 100% 100%;
}

#page-container #et-boc .cc-relacionados {
	--cc-trama-op: 0.2;
	--cc-trama-forma: 70% 120% at 100% 0%;
	--cc-trama-desfase: 260px 0;
}

#page-container .cc-footer {
	--cc-trama-color: var(--cc-texto-sobre-oscuro);
	--cc-trama-op: 0.12;
	--cc-trama-forma: 90% 130% at 0% 100%;
	--cc-trama-desfase: 120px 300px;
}

/* ---- Sombras de hojas (pedido del cliente, 2026-10-17) ----
   Las del fondo de los posts de Rocío (assets/img/hojas/, sombra separada del papel y
   agrandada): racimo arriba a la derecha y copihue abajo a la izquierda. Reemplazan a las
   curvas y la parra en las secciones claras; las secciones con paisaje y el footer siguen
   igual. Son WebP con transparencia usados como máscara, así que se tiñen con el café. */
#page-container #et-boc :is(.cc-seccion-quesos, .cc-contenido-pagina, .cc-nosotros, .cc-relacionados)::before {
	opacity: var(--cc-hojas-op, 0.13);
	-webkit-mask:
		var(--cc-trama-hojas-sup) right top / var(--cc-hojas-tam, min(520px, 40vw)) auto no-repeat,
		var(--cc-trama-hojas-inf) left bottom / calc(var(--cc-hojas-tam, min(520px, 40vw)) * 0.85) auto no-repeat;
	-webkit-mask-composite: source-over;
	mask:
		var(--cc-trama-hojas-sup) right top / var(--cc-hojas-tam, min(520px, 40vw)) auto no-repeat,
		var(--cc-trama-hojas-inf) left bottom / calc(var(--cc-hojas-tam, min(520px, 40vw)) * 0.85) auto no-repeat;
	mask-composite: add;
}

/* Para variar, arriba a la derecha la rama de copihue colgando (scripts/sombra_copihue.py,
   como el post "Cada queso tiene su tiempo", 2026-10-17) en vez del racimo: quesos de vaca
   (va justo después de la de cabra) y páginas de texto. Mismo tamaño que el racimo y un
   poco más de tinta, porque es más fina. */
#page-container #et-boc :is(.cc-seccion-quesos-vaca, .cc-contenido-pagina) {
	--cc-trama-hojas-sup: var(--cc-trama-copihue-colgante);
	--cc-hojas-op: 0.17;
}

@media (max-width: 767px) {
	#page-container #et-boc :is(.cc-seccion-quesos, .cc-contenido-pagina, .cc-nosotros, .cc-relacionados) {
		--cc-hojas-tam: 62vw;
		--cc-hojas-op: 0.1;
	}
}

/* ---- Paisaje del Riñihue: banda al pie de la última sección (portada, tienda, blog) ---- */

/* Espacio extra abajo: la banda mide lo que el dibujo (1600×460, a todo el ancho), así el
   lago y los volcanes quedan enteros bajo las notas. */
#page-container #et-boc :is(.cc-seccion-blog, .cc-catalogo, .cc-blog-listado) {
	padding-bottom: calc(100vw * 460 / 1600);
}

#page-container #et-boc :is(.cc-seccion-blog, .cc-catalogo, .cc-blog-listado)::before {
	opacity: 0.34;
	-webkit-mask:
		var(--cc-trama-paisaje) center bottom / 100% auto no-repeat,
		linear-gradient(to top, #000 55%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask:
		var(--cc-trama-paisaje) center bottom / 100% auto no-repeat,
		linear-gradient(to top, #000 55%, transparent 100%);
	mask-composite: intersect;
}

/* En el teléfono, el doble de ancho y centrado: se recortan los costados y los volcanes
   siguen mandando. */
@media (max-width: 767px) {
	#page-container #et-boc :is(.cc-seccion-blog, .cc-catalogo, .cc-blog-listado) {
		padding-bottom: calc(200vw * 460 / 1600);
	}

	#page-container #et-boc :is(.cc-seccion-blog, .cc-catalogo, .cc-blog-listado)::before {
		-webkit-mask-size: 200% auto, auto;
		mask-size: 200% auto, auto;
	}
}

/* En el teléfono la trama baja: el texto ocupa todo el ancho. */
@media (max-width: 767px) {
	#page-container #et-boc :is(.cc-seccion-quesos, .cc-seccion-blog, .cc-catalogo, .cc-contenido-pagina, .cc-blog-listado, .cc-nosotros, .cc-relacionados),
	#page-container .cc-footer {
		--cc-trama-op: 0.1;
	}
}