/* Ishiku Lemu · layout.css — sistema compartido de las secciones nuevas.
   Norma: proyecto/ishiku-lemu-brandbook-claude-design.md (paleta cerrada, radio 20px en
   todo, botones píldora, SIN sombras ni degradados, H2/H3 Raleway 800 en caja normal,
   cuerpo en Quicksand, barrita de acento 46×3 como separador).
   Excepciones decididas:
   - Fondo: nunca blanco puro (Felipe, 2026-10-04). Papel #faf8f2 donde el brandbook dice
     blanco, superficie #fffdf8 para tarjetas, crema para secciones alternas.
   - Texto verde chico sobre claro: #557320 (acento-texto) en vez de #7fa42f, que da 2,9:1
     y no cumple WCAG AA. Resaltes en H2 sobre claro: #6e9028 (3,5:1). Sobre oscuro se usa
     el acento de marca #7fa42f (5:1).
   Prefijo cc-. Tokens --cc-* (colores) y --gvid-cc-* (medidas) publicados por functions.php;
   valores en scripts/sistema-diseno.php. */

/* ---------- Fondo del sitio -------------------------------------------------------- */

/* Divi pinta body, #main-content y .et_pb_section de #fff por defecto. Las secciones con
   color propio en el builder usan selectores más específicos y no cambian. */
body,
#main-content,
.et_pb_section {
	background-color: var(--cc-papel);
}

/* Tarjetas de otras páginas cuyo CSS vive en módulos Code / CSS de página (fuera de Git):
   de #fff a superficie. "body" suma especificidad porque ese CSS se imprime después.
   Se van cuando esas páginas se rehagan con módulos nativos (Fase 2–3). */
body .et_pb_tabs .et_pb_all_tabs,
body .et_pb_blurb.cc-card-edu,
body .et_pb_blurb.cc-paso,
body .et_pb_text.cc-modalidad,
body .ishiku-light-icon,
body .fauna-card,
body #ishiku-weather-widget .iw-day:not(.iw-closed) {
	background-color: var(--cc-superficie);
}

/* ---------- Secciones -------------------------------------------------------------- */

/* Ritmo del brandbook: papel → crema → oscuro o foto a sangre, nunca dos oscuras juntas. */
.et_pb_section.cc-seccion {
	padding-block: var(--gvid-cc-espacio-seccion);
}

.et_pb_section.cc-seccion--crema {
	background-color: var(--cc-crema);
}

.et_pb_section.cc-seccion--noche {
	padding-block: calc(var(--gvid-cc-espacio-seccion) * 1.12);
	background-color: var(--cc-noche);
}

.et_pb_section.cc-seccion--tinta {
	background-color: var(--cc-tinta);
}

.et_pb_section.cc-seccion--bosque {
	background-color: var(--cc-bosque);
}

.et_pb_section.cc-seccion--compacta {
	padding-block: calc(var(--gvid-cc-espacio-seccion) * 0.55);
}

/* ---------- Transiciones entre fondos (opción A) ----------------------------------- */

/* Ondas (cc-onda + forma): una silueta plana del color de la sección que sigue, pintada
   con máscara. Formas: --suave, --amplia, --doble; una distinta en cada cambio de fondo.
   Color por defecto papel; --a-noche para entrar a una sección oscura. --colgante la
   cuelga sobre la sección siguiente (para entrar a una foto sin franja de color).
   --espejo la invierte. La silueta va en el relleno inferior.
   Las ilustraciones del hualve como divisor (cc-divisor-helechos, cc-divisor-rio) se
   retiraron el 10-10-2026: solo ondas. Las plantas SVG van solo en el Inicio. */
:root {
	--cc-alto-onda: clamp(28px, 100vw / 20, 72px);
}

.et_pb_section.cc-onda {
	--cc-alto-divisor: var(--cc-alto-onda);
	position: relative;
	padding-bottom: calc(var(--gvid-cc-espacio-seccion) + var(--cc-alto-divisor));
}

.et_pb_section.cc-onda::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	height: var(--cc-alto-divisor);
	pointer-events: none;
}

.et_pb_section.cc-onda::after {
	background-color: var(--cc-onda-color, var(--cc-papel));
	-webkit-mask: var(--cc-onda-forma) center bottom / 100% 100% no-repeat;
	mask: var(--cc-onda-forma) center bottom / 100% 100% no-repeat;
}

.et_pb_section.cc-onda--suave { --cc-onda-forma: url("../img/onda-suave.svg"); }
.et_pb_section.cc-onda--amplia { --cc-onda-forma: url("../img/onda-amplia.svg"); }
.et_pb_section.cc-onda--doble { --cc-onda-forma: url("../img/onda-doble.svg"); }
.et_pb_section.cc-onda--a-noche { --cc-onda-color: var(--cc-noche); }

/* Colgante: la onda baja desde el borde inferior sobre la sección siguiente, que
   reserva su alto arriba con cc-tras-colgante. */
.et_pb_section.cc-onda--colgante {
	padding-bottom: var(--gvid-cc-espacio-seccion);
}

.et_pb_section.cc-onda--colgante::after {
	top: calc(100% - 1px);
	bottom: auto;
	transform: scaleY(-1);
}

.et_pb_section.cc-tras-colgante {
	padding-top: calc(var(--gvid-cc-espacio-seccion) + var(--cc-alto-onda));
}

.et_pb_section.cc-divisor--espejo::after {
	transform: scaleX(-1);
}

.et_pb_section.cc-onda--colgante.cc-divisor--espejo::after {
	transform: scale(-1, -1);
}

/* Hojas nativas en trazo de línea (helecho, brote, nalca, canelo, arrayán; dibujadas por
   scripts/hojas.py). La sección pide su hoja y su lugar con clases:
     cc-hojas  cc-hojas--<hoja>  cc-hojas-pos--<lugar>
   main.js inserta el SVG en línea (.cc-hoja) para que movimiento.css pueda dibujar el
   trazo con el scroll. Una planta distinta por sección, alternando el lado. Todas nacen
   abajo al centro de su lienzo y crecen hacia arriba, enteras (nada asomado). Verde bosque
   tenue sobre claro, salvia sobre oscuro. overflow-x: clip recorta lo que sale por el
   costado sin crear desplazamiento lateral ni romper el sticky. */
.et_pb_section.cc-hojas {
	position: relative;
	overflow-x: clip;
}

.et_pb_section.cc-hojas > .et_pb_row {
	position: relative;
	z-index: 1;
}

.cc-hoja {
	--cc-hoja-tam: clamp(220px, 30vw, 440px);
	position: absolute;
	z-index: 0;
	width: var(--cc-hoja-tam);
	height: var(--cc-hoja-tam);
	--cc-hoja-op: 0.13;
	--cc-cartel-op: 0.24;
	color: var(--cc-bosque);
	pointer-events: none;
}

.cc-sobre-oscuro .cc-hoja {
	--cc-hoja-op: 0.17;
	--cc-cartel-op: 0.28;
	color: #acc08f;
}

/* Los cruces pasan detrás del texto: un punto más tenues para no cortar la lectura. */
.cc-hoja.cc-hoja--cruce {
	--cc-hoja-op: 0.1;
}

.cc-sobre-oscuro .cc-hoja.cc-hoja--cruce {
	--cc-hoja-op: 0.13;
}

/* El dibujo va tenue; su cartel (nombre común y científico), apenas más presente. */
.cc-hoja svg > g:not(.cc-cartel) {
	opacity: var(--cc-hoja-op);
}

.cc-hoja .cc-cartel {
	opacity: var(--cc-cartel-op);
	font-family: "Quicksand", sans-serif;
	letter-spacing: 0.02em;
}

/* Copas en capas (arrayán): cada mata se rellena con el color de la sección y tapa lo que
   queda detrás. El relleno aparece junto con su trazo (movimiento.css). */
.cc-hoja path.cc-relleno {
	fill: var(--cc-papel);
}

.cc-sobre-oscuro .cc-hoja path.cc-relleno {
	fill: var(--cc-noche);
}

/* El fondo del cartel tiene el color de la sección: tapa las ramas que pasan detrás. */
.cc-hoja .cc-cartel-fondo {
	fill: var(--cc-papel);
	stroke: none;
}

.cc-sobre-oscuro .cc-hoja .cc-cartel-fondo {
	fill: var(--cc-noche);
}

/* En las plantas espejadas, el cartel se vuelve a dar vuelta para que se lea. */
.cc-hojas-pos--abajo-der .cc-hoja:not(.cc-hoja--cruce):not(.cc-hoja--esquina) .cc-cartel {
	transform: scaleX(-1);
	transform-box: fill-box;
	transform-origin: center;
}

.cc-hoja svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Las plantas crecen desde abajo, enteras: el pie queda apenas detrás de la transición de
   la sección (que va encima, z 2). Se alternan los lados entre secciones. La última fila
   deja una franja libre para que la planta se vea crecer y no quede tapada por el
   contenido. */
.et_pb_section.cc-hojas:not(.cc-hojas-pos--esquina-arriba-der) > .et_pb_row:last-of-type {
	margin-bottom: clamp(96px, 100vw * 170 / 1440, 190px);
}

/* La nalca es alta y su cartel va arriba: en Cómo llegar la franja libre cubre casi toda
   la planta (72 % de su alto, que es clamp(220px, 30vw, 440px)) para que los botones del
   mapa no tapen el cartel. */
.et_pb_section.cc-hojas--nalca:not(.cc-hojas-pos--esquina-arriba-der) > .et_pb_row:last-of-type {
	margin-bottom: clamp(160px, 21.6vw, 316px);
}

/* La espiga de la nalca nace en la base: la planta sube sobre la onda para que se vea
   entera (la onda amplia es más alta a los lados). */
.et_pb_section.cc-hojas--nalca .cc-hoja:not(.cc-hoja--cruce) {
	bottom: calc(var(--cc-alto-divisor, 0px) * 0.95);
}

.cc-hojas-pos--abajo-izq .cc-hoja:not(.cc-hoja--cruce),
.cc-hojas-pos--abajo-der .cc-hoja:not(.cc-hoja--cruce) {
	bottom: calc(var(--cc-alto-divisor, 0px) * 0.3);
}

.cc-hojas-pos--abajo-izq .cc-hoja:not(.cc-hoja--cruce) {
	left: clamp(0px, 2vw, 40px);
}

.cc-hojas-pos--abajo-der .cc-hoja:not(.cc-hoja--cruce) {
	right: clamp(0px, 2vw, 40px);
	transform: scaleX(-1);
}

/* Plantas de más (cc-hojas-extra--<hoja>, main.js): la misma especie repetida como mata,
   más chica, en otros puntos del borde inferior. Sin cartel. El selector largo le gana a
   las posiciones de arriba, que también las alcanzan. */
.et_pb_section.cc-hojas .cc-hoja.cc-hoja--extra .cc-cartel,
.et_pb_section.cc-hojas .cc-hoja.cc-hoja--extra .cc-cartel-fondo {
	display: none;
}

.et_pb_section.cc-hojas .cc-hoja.cc-hoja--extra.cc-hoja--extra-1 {
	--cc-hoja-tam: clamp(180px, 24vw, 360px);
	left: auto;
	right: clamp(0px, 3vw, 56px);
	transform: scaleX(-1);
}

.et_pb_section.cc-hojas .cc-hoja.cc-hoja--extra.cc-hoja--extra-2 {
	--cc-hoja-tam: clamp(130px, 16vw, 240px);
	left: clamp(220px, 34vw, 540px); /* a la derecha de la principal (30vw desde ~2vw) */
	right: auto;
	transform: none;
}

@media (max-width: 767px) {
	.et_pb_section.cc-hojas .cc-hoja.cc-hoja--extra.cc-hoja--extra-2 {
		display: none;
	}
}

/* Desde la esquina de arriba a la derecha: la planta (chilco) nace en la esquina y sus
   ramas se abren hacia la izquierda y caen. */
.cc-hojas-pos--esquina-arriba-der .cc-hoja:not(.cc-hoja--cruce) {
	--cc-hoja-tam: clamp(280px, 36vw, 540px);
	top: 0;
	right: 0;
}

/* Segunda planta de una sección, en la esquina de arriba a la derecha (cc-esquina--<planta>).
   Gana a las posiciones de la planta principal de la sección. */
.et_pb_section .cc-hoja.cc-hoja--esquina:not(.cc-hoja--cruce) {
	--cc-hoja-tam: clamp(300px, 40vw, 620px);
	top: 0;
	right: 0;
	bottom: auto;
	left: auto;
	transform: none;
}

/* Cruces: una enredadera de copihue o una rama de coigüe que atraviesa la pantalla de
   borde a borde (cc-cruce cc-cruce--<cruce> cc-cruce-pos--arriba|abajo). Mismo trazo y
   color que las hojas; crece de un costado al otro con el scroll y se retuerce en una
   banda alta (1440×320), así que puede pasar detrás del contenido. En móvil se recorta
   por los lados (preserveAspectRatio slice) para no quedar diminuta. */
.et_pb_section.cc-cruce {
	position: relative;
	overflow-x: clip;
}

.et_pb_section.cc-cruce > .et_pb_row {
	position: relative;
	z-index: 1;
}

.cc-hoja.cc-hoja--cruce {
	left: 0;
	right: 0;
	width: auto;
	height: clamp(170px, 100vw * 320 / 1440, 340px);
}

.cc-cruce-pos--arriba .cc-hoja--cruce {
	top: clamp(8px, 1.5vw, 24px);
}

.cc-cruce-pos--abajo .cc-hoja--cruce {
	bottom: calc(var(--cc-alto-divisor, 0px) * 0.4 - clamp(16px, 3vw, 48px));
}

/* Con la onda colgante (que cae sobre la sección siguiente) no hay transición dentro:
   el cruce se apoya en el borde para que la sección de abajo no lo corte. */
.cc-onda--colgante.cc-cruce-pos--abajo .cc-hoja--cruce:not(.cc-hoja--arriba) {
	bottom: 0;
}

/* Colgante: cc-cruce-arriba--<cruce> cuelga una liana desde el borde superior de la
   sección (además del cruce de abajo, si lo hay). Sus guías bajan detrás del título. */
.cc-hoja.cc-hoja--cruce.cc-hoja--arriba {
	top: 0;
	bottom: auto;
}

/* El copihue sigue un trazo dibujado, más alto (1440×560): sube por detrás de las
   tarjetas y se ve entero en la franja de abajo. */
.cc-cruce--copihue .cc-hoja.cc-hoja--cruce {
	height: calc(100vw * 560 / 1440);
	min-height: 300px;
}

/* Naturaleza: las tarjetas son opacas; el copihue tiene una franja amplia bajo ellas
   para verse entero. */
.et_pb_section.cc-naturaleza.cc-cruce-pos--abajo > .et_pb_row:last-of-type {
	margin-bottom: clamp(150px, 100vw * 220 / 1440, 260px);
}

/* El cruce de abajo tiene una franja corta propia; el resto de su banda pasa detrás del
   contenido, como una enredadera real. */
.et_pb_section.cc-cruce-pos--abajo > .et_pb_row:last-of-type {
	margin-bottom: clamp(48px, 100vw * 80 / 1440, 96px);
}

/* Sección con foto a sangre y velo plano (brandbook § 1). La foto la pone cada sección. */
.et_pb_section.cc-seccion-foto {
	position: relative;
	isolation: isolate;
	background-color: var(--cc-noche);
	background-position: center;
	background-size: cover;
}

.et_pb_section.cc-seccion-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: rgba(26, 46, 26, 0.55);
	pointer-events: none;
}

.et_pb_section.cc-seccion-foto > .et_pb_row {
	position: relative;
	z-index: 1;
}

/* ---------- Filas ------------------------------------------------------------------ */

/* 1200px (notas-diseno.md § 2); margen lateral fluido (24px en móvil). Todas las filas
   del Inicio usan este contenedor: es el eje izquierdo común. */
.et_pb_row.cc-fila {
	width: min(100% - 2 * var(--gvid-cc-margen-lateral), var(--gvid-cc-ancho-contenido));
	max-width: none;
	margin-inline: auto;
	padding-block: 0;
}

.et_pb_row.cc-fila + .et_pb_row.cc-fila {
	margin-top: var(--gvid-cc-espacio-bloque);
}

/* Las filas del conversor son de bloque (columnas flotantes): en escritorio pasan a flex
   para alinear y estirar columnas. Bajo 981px Divi las apila. */
@media (min-width: 981px) {
	.et_pb_row.cc-fila:not(.et_grid_row) {
		display: flex;
		flex-wrap: wrap;
	}

	.et_pb_row.cc-fila:not(.et_grid_row)::after {
		display: none;
	}
}

/* ---------- Cabecera de sección: eyebrow → H2 → bajada --------------------------- */

/* Opción A (2026-10-04): etiqueta + título a la izquierda (3/5) y bajada a la derecha
   (2/5), alineada abajo. Una sola forma en todas las secciones. */
.et_pb_row.cc-fila--cabecera {
	align-items: flex-end;
}

.cc-fila--cabecera .cc-bajada,
.cc-fila--cabecera .et_pb_text .cc-bajada {
	margin: 0;
	padding-bottom: 0.35rem;
}

@media (max-width: 980px) {
	.cc-fila--cabecera .cc-bajada,
	.cc-fila--cabecera .et_pb_text .cc-bajada {
		margin-top: 1.25rem;
	}
}

.cc-cabecera {
	max-width: 54rem;
}

.cc-cabecera--ancha {
	max-width: none;
}

/* Eyebrow: Raleway 500, 13px, MAYÚSCULAS, 2px de tracking. */
.cc-etiqueta,
.et_pb_text .cc-etiqueta {
	margin: 0 0 0.75rem;
	padding: 0;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: var(--gvid-cc-texto-etiqueta);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cc-acento-texto);
}

/* H2: Raleway 800, caja normal, verde casi negro. */
.cc-cabecera h2,
.et_pb_text .cc-cabecera h2 {
	margin: 0;
	padding: 0;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: var(--gvid-cc-texto-h2);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: normal;
	text-wrap: balance;
	color: var(--cc-noche);
}

.cc-resalte {
	color: var(--cc-acento-titulo);
}

/* Bajada: Quicksand 19px, máx. 62 caracteres. */
.cc-bajada,
.et_pb_text .cc-bajada {
	max-width: 62ch;
	margin: 1.25rem 0 0;
	padding: 0;
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-size: var(--gvid-cc-texto-bajada);
	font-weight: 500;
	line-height: 1.7;
	text-wrap: pretty;
	color: var(--cc-tinta);
}

/* Bajada a la derecha de una cabecera a dos columnas: filo de acento a la izquierda. */
.cc-bajada--filete,
.et_pb_text .cc-bajada--filete {
	margin-top: 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--cc-acento);
}

/* ---------- Sobre fondo oscuro ----------------------------------------------------- */

.cc-sobre-oscuro .cc-cabecera h2 {
	color: var(--cc-blanco);
}

.cc-sobre-oscuro .cc-etiqueta,
.et_pb_text .cc-sobre-oscuro .cc-etiqueta,
.cc-sobre-oscuro .et_pb_text .cc-etiqueta {
	color: var(--cc-salvia);
}

.cc-sobre-oscuro .cc-resalte {
	color: var(--cc-acento);
}

/* Sobre verde bosque el acento no llega a 3:1: el resalte va en verde suave (3,9:1). */
.cc-seccion--bosque.cc-sobre-oscuro .cc-resalte {
	color: var(--cc-salvia);
}

/* Texto chico sobre bosque: crema (el suave da 4,4:1, bajo el 4,5 de AA). */
.cc-seccion--bosque.cc-sobre-oscuro .cc-etiqueta,
.cc-seccion--bosque.cc-sobre-oscuro .et_pb_text .cc-etiqueta {
	color: rgba(245, 243, 234, 0.85);
}

.cc-sobre-oscuro .cc-bajada,
.cc-sobre-oscuro .et_pb_text .cc-bajada {
	color: rgba(245, 243, 234, 0.82);
}

/* ---------- Tarjetas ------------------------------------------------------------- */

/* H3: Raleway 800 24px, verde bosque, seguido de la barrita de acento 46×3. */
.cc-tarjeta-titulo,
.et_pb_text .cc-tarjeta-titulo {
	margin: 0;
	padding: 0;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: var(--gvid-cc-texto-h3);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--cc-bosque);
}

.cc-tarjeta-titulo::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin: 0.875rem 0 1.125rem;
	border-radius: 3px;
	background-color: var(--cc-acento);
}

.cc-tarjeta-texto,
.et_pb_text .cc-tarjeta-texto {
	margin: 0;
	padding: 0;
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-size: var(--gvid-cc-texto-base);
	font-weight: 500;
	line-height: 1.7;
	color: var(--cc-tinta);
}

/* ---------- Botones de acción (brandbook § 5) ---------------------------------------- */

.cc-acciones,
.et_pb_text .cc-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
	padding: 0;
}

.cc-boton,
.et_pb_text a.cc-boton {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 14px 30px;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 1.5px;
	text-decoration: none;
	text-transform: uppercase;
	border: 1px solid transparent;
	border-radius: 50px;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Sólido sobre claro: bosque con blanco; hover al verde de texto (acento sobre blanco
   no alcanzaría AA con texto blanco). */
.et_pb_text a.cc-boton--solido {
	color: var(--cc-blanco);
	background-color: var(--cc-bosque);
}

.et_pb_text a.cc-boton--solido:hover {
	background-color: var(--cc-acento-texto);
}

/* Fantasma: borde salvia, texto bosque. */
.et_pb_text a.cc-boton--fantasma {
	color: var(--cc-bosque);
	background-color: transparent;
	border-color: var(--cc-salvia);
}

.et_pb_text a.cc-boton--fantasma:hover {
	border-color: var(--cc-acento);
	background-color: rgba(127, 164, 47, 0.08);
}

/* Sobre fondos oscuros: claro (crema con texto #101a10, el primario del brandbook) y
   fantasma claro (borde suave, texto crema). */
.et_pb_text a.cc-boton--claro {
	color: #101a10;
	background-color: var(--cc-crema);
	border-color: var(--cc-salvia);
}

.et_pb_text a.cc-boton--claro:hover {
	background-color: var(--cc-superficie);
	border-color: var(--cc-acento);
}

.et_pb_text a.cc-boton--fantasma-claro {
	color: var(--cc-crema);
	background-color: transparent;
	border-color: rgba(172, 192, 143, 0.6);
}

.et_pb_text a.cc-boton--fantasma-claro:hover {
	background-color: rgba(245, 243, 234, 0.08);
	border-color: var(--cc-salvia);
}

/* ---------- Header (Theme Builder #6742: scripts/cabecera.php) ------------------------ */

/* Filas a todo el ancho (su fondo llega a los bordes) y contenido en el eje de 1200 px:
   el relleno lateral es el margen que deja el contenedor común. */
.et-l--header .et_pb_row.cc-cab-fila {
	width: 100%;
	max-width: none;
	padding-left: max(var(--gvid-cc-margen-lateral), calc((100% - var(--gvid-cc-ancho-contenido)) / 2));
	padding-right: max(var(--gvid-cc-margen-lateral), calc((100% - var(--gvid-cc-ancho-contenido)) / 2));
}

/* Barra del menú: velo plano sobre la foto del hero (brandbook § 1) en vez del vidrio
   desenfocado del CSS adicional (#ishiku-header-fixed > div:nth-child(2), que se iguala
   y supera con body). Al bajar, verde noche sólido: sobre contenido claro el velo se veía
   turbio. */
body #ishiku-header-fixed > div.cc-cab-menu {
	background-color: rgba(26, 46, 26, 0.55);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color 0.35s ease;
}

html.cc-desplazado body #ishiku-header-fixed > div.cc-cab-menu {
	background-color: var(--cc-noche);
}

/* Logo con su ancho; el menú toma el resto y se alinea a la derecha (el builder les
   daba anchos fijos y el menú se partía en dos líneas). */
@media (min-width: 981px) {
	.et-l--header .et_pb_row.cc-cab-menu {
		align-items: center;
		gap: 2rem;
	}

	/* El CSS adicional del Customizer fija 25% / 75% con !important
	   (#ishiku-header-fixed > div:nth-child(2) > div:…): solo otro !important con más
	   especificidad lo reemplaza. Lo correcto a futuro: borrar esas reglas del Customizer
	   al migrar el header (Fase 2–3). */
	body #ishiku-header-fixed > div.cc-cab-menu > div.et_pb_column:first-child {
		flex: 0 0 auto !important;
		width: auto !important;
		margin-right: 0;
	}

	body #ishiku-header-fixed > div.cc-cab-menu > div.et_pb_column:last-child {
		flex: 1 1 auto !important;
		width: auto !important;
	}

	body #ishiku-header-fixed > div.cc-cab-menu .et_pb_image {
		text-align: left;
	}

	.et-l--header .cc-cab-menu .et_pb_menu .et_pb_menu__menu,
	.et-l--header .cc-cab-menu .et-menu {
		justify-content: flex-end;
	}

	/* El módulo usa el estilo «centrado»: con el menú agrupado (menos ítems) quedaba al
	   medio; va a la derecha, con el botón de compra en el borde. */
	.et-l--header .cc-cab-menu .et_pb_menu_inner_container,
	.et-l--header .cc-cab-menu .et_pb_menu__wrap {
		justify-content: flex-end;
	}

	/* Divi corre el menú 11 px a cada lado (margen negativo): el botón quedaba fuera del
	   eje de 1200 px. */
	.et-l--header .cc-cab-menu .et-menu {
		margin-right: 0;
	}
}

/* Entre 981 y 1199 px los seis enlaces no caben en una línea: menú compacto y, si aun
   así se parte, dos líneas ordenadas a la derecha (el menú desplegable de Divi solo
   tiene estilo bajo 981 px). */
@media (min-width: 981px) and (max-width: 1199px) {
	.et-l--header .cc-cab-menu .et_pb_image img {
		max-width: 160px;
		height: auto;
	}

	.et-l--header .cc-cab-menu .et-menu {
		row-gap: 0;
	}

	.et-l--header .cc-cab-menu .et-menu > li {
		padding-inline: 6px;
	}

	.et-l--header .cc-cab-menu .et-menu > li {
		margin-top: 0;
	}

	.et-l--header .cc-cab-menu .et-menu > li > a {
		padding-block: 10px;
		font-size: 14px;
	}
}

/* Menú: 15 px para que los seis enlaces quepan en una línea junto al logo. */
.et-l--header .cc-cab-menu .et-menu > li {
	padding-inline: 9px;
}

.et-l--header .cc-cab-menu .et-menu > li > a {
	position: relative;
	font-size: 15px;
	letter-spacing: normal;
}

/* Barrita de acento bajo el enlace: aparece al pasar el cursor y marca la página actual. */
.et-l--header .cc-cab-menu .et-menu > li > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(50% - 1.05em);
	height: 3px;
	border-radius: 3px;
	background-color: var(--cc-acento);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--cc-mov-curva, ease);
}

.et-l--header .cc-cab-menu .et-menu > li > a:hover::before,
.et-l--header .cc-cab-menu .et-menu > li > a:focus-visible::before,
.et-l--header .cc-cab-menu .et-menu > li.current-menu-item > a::before,
.et-l--header .cc-cab-menu .et-menu > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

/* Al bajar, el modo sticky de Divi ya esconde la barra superior. */

/* «Compra tu entrada» como botón al final del menú (ítem con clase cc-menu-entrada,
   scripts/menu-agrupado.php): se edita en Apariencia → Menús. Queda siempre a la vista,
   también al bajar, cuando la barra superior se esconde. Verde de texto con crema
   (5,7:1) y, al pasar, bosque; sin la barrita de acento de los enlaces. */
.et-l--header .cc-cab-menu .et-menu > li.cc-menu-entrada {
	align-items: center;
	padding-inline: 8px 0;
}

/* El módulo Menú del header fija «padding: 30px !important» en todos sus enlaces
   (body .et_pb_menu_0_tb_header.et_pb_menu .nav li > a): solo otro !important más
   específico lo reemplaza. Lo correcto a futuro: quitar ese relleno del módulo al migrar
   el header (Fase 3) y borrar estos !important. */
body #ishiku-header-fixed .cc-cab-menu .et-menu > li.cc-menu-entrada > a {
	padding: 12px 22px !important;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--cc-crema);
	background-color: var(--cc-acento-texto);
	border-radius: 50px;
	transition: background-color 0.3s ease;
}

body #ishiku-header-fixed .cc-cab-menu .et-menu > li.cc-menu-entrada > a:hover,
body #ishiku-header-fixed .cc-cab-menu .et-menu > li.cc-menu-entrada > a:focus-visible {
	color: var(--cc-crema);
	background-color: var(--cc-bosque);
	opacity: 1;
}

.et-l--header .cc-cab-menu .et-menu > li.cc-menu-entrada > a::before {
	display: none;
}

/* En escritorio el botón ya está en el menú: fuera el de la barra superior (en móvil el
   menú se pliega y ese sigue siendo el acceso directo). */
@media (min-width: 981px) {
	.ishiku-topbar a.ishiku-ticket {
		display: none;
	}
}

/* Menú móvil de Divi: el ítem va como botón. El CSS adicional del Customizer fija color
   y fondo de todos los enlaces con !important (#mobile_menu1.et_mobile_menu li a): solo
   otro !important con el id del header lo reemplaza (quitar al migrar el header). */
body #ishiku-header-fixed .et_mobile_menu li.cc-menu-entrada > a {
	margin: 0.75rem auto 0.25rem;
	width: fit-content;
	padding: 12px 26px !important;
	font-family: 'Raleway', Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--cc-crema) !important;
	background-color: var(--cc-acento-texto) !important;
	border-radius: 50px;
}


@media (prefers-reduced-motion: reduce) {
	body #ishiku-header-fixed > div.cc-cab-menu,
	.et-l--header .cc-cab-menu .et-menu > li > a::before {
		transition: none;
	}
}

/* ---------- Pie (Theme Builder, clase cc-pie: scripts/pie.php) ------------------------ */

/* El verde noche era el fondo de cada fila a todo el ancho; con las filas en el
   contenedor pasa a la sección. La fila de las colinas mantiene el papel detrás. */
.et_pb_section.cc-pie {
	background-color: var(--cc-noche);
}

.et_pb_section.cc-pie > .et_pb_row:first-child {
	background-color: var(--cc-papel);
}

/* Banda del pie (módulo Code de la primera fila, scripts/pie-banda.php): tres ondas
   planas que bajan del papel al verde noche. Baja y sin siluetas: cierra la página sin
   competir con el contenido. Separada de la sección anterior por un respiro de papel. */
.et_pb_section.cc-pie > .et_pb_row:first-child {
	padding-top: clamp(24px, 3vw, 48px);
	/* El borde de la fila cae en fracciones de píxel: sin esto el papel asoma como una
	   línea entre la onda y el pie. Los últimos 2 px del fondo ya son verde noche. */
	background: linear-gradient(to bottom, var(--cc-papel) calc(100% - 2px), var(--cc-noche) 0);
	/* Y se monta 1 px sobre la fila siguiente para tapar el borde suavizado del SVG. */
	position: relative;
	z-index: 1;
	margin-bottom: -1px;
}

.cc-banda-pie {
	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	line-height: 0;
}

.cc-banda-pie svg {
	display: block;
	width: 100%;
	height: clamp(44px, 5.5vw, 88px);
}

/* Sin el hueco que Divi deja bajo el módulo: la onda noche empalma con el pie. */
.et_pb_code:has(> .et_pb_code_inner > .cc-banda-pie) {
	margin-bottom: 0;
	overflow: hidden;
}

/* Filas en el contenedor común; entre columnas y legales, un solo espacio. */
.et_pb_section.cc-pie .et_pb_row.cc-fila + .et_pb_row.cc-fila {
	margin-top: 0;
}

.et_pb_section.cc-pie .et_pb_row.cc-pie-columnas {
	padding-block: 3.5rem 2.5rem;
}

.et_pb_section.cc-pie .et_pb_row.cc-pie-legal {
	padding-block: 1.25rem 1.5rem;
}

/* Títulos de columna como los del sistema: Raleway 800, caja normal. */
.cc-pie .cc-pie-columnas h3,
.cc-pie .cc-pie-columnas h4 {
	margin: 0 0 1rem;
	padding: 0;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: normal;
	color: var(--cc-blanco);
}

.cc-pie .cc-pie-columnas h3::after,
.cc-pie .cc-pie-columnas h4::after {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-top: 0.75rem;
	border-radius: 3px;
	background-color: var(--cc-acento);
}

.cc-pie .cc-pie-columnas a,
.cc-pie .cc-pie-legal a,
.cc-pie .cc-pie-columnas p,
.cc-pie .cc-pie-legal p {
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: rgba(245, 243, 234, 0.82);
	transition: color 0.3s ease;
}

.cc-pie .cc-pie-columnas a:hover,
.cc-pie .cc-pie-legal a:hover {
	color: var(--cc-acento);
}

.cc-pie .cc-pie-legal p,
.cc-pie .cc-pie-legal a {
	font-size: 0.8125rem;
	color: rgba(245, 243, 234, 0.6);
}

/* Logo del pie en el eje izquierdo (en móvil Divi lo centraba a todo el ancho). */
.cc-pie .cc-pie-columnas .et_pb_image {
	text-align: left;
}

.cc-pie .cc-pie-columnas .et_pb_image .et_pb_image_wrap {
	max-width: 220px;
}

/* ---------- Móvil ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.cc-pie .cc-pie-columnas .et_pb_image .et_pb_image_wrap {
		max-width: 170px;
	}

	.cc-etiqueta,
	.et_pb_text .cc-etiqueta {
		font-size: 0.75rem;
	}
}

/* El arrayán es un árbol: más grande que las demás plantas. */
.et_pb_section.cc-hojas--arrayan .cc-hoja:not(.cc-hoja--esquina):not(.cc-hoja--cruce) {
	--cc-hoja-tam: clamp(280px, 36vw, 560px);
}

/* Ampe de Aprender haciendo: mata a lo ancho de la franja baja, más alta que los cruces
   y algo más presente sobre el verde noche. */
.cc-cruce--ampe .cc-hoja.cc-hoja--cruce {
	height: clamp(220px, 100vw * 400 / 1440, 440px);
}

.cc-cruce-pos--abajo.cc-cruce--ampe .cc-hoja--cruce {
	bottom: calc(var(--cc-alto-divisor, 0px) * 0.25);
}

.cc-sobre-oscuro.cc-cruce--ampe .cc-hoja.cc-hoja--cruce {
	--cc-hoja-op: 0.2;
}

/* ---------- Tarjetas (blurbs cc-tarjeta) ----------------------------------------------
   Salieron de inicio.css (10-10-2026): son un componente del sistema y Planifica tu
   visita las usa (rutas y protocolo). */

/* Tarjetas (blurbs): radio 20, sin borde ni sombra; el fondo lo da cada variante. */
.et_pb_blurb.cc-tarjeta {
	height: 100%;
	overflow: hidden;
	border-radius: var(--gvid-cc-radio);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cc-tarjeta .et_pb_blurb_content {
	max-width: none;
	height: 100%;
	text-align: left;
}

/* Divi arma el blurb como columna flex centrada y con ~30px de separación propia. */
.et_pb_blurb.cc-tarjeta .et_pb_blurb_content {
	justify-content: flex-start;
	gap: 0;
}

.cc-tarjeta .et_pb_module_header,
.et_pb_blurb.cc-tarjeta h3.et_pb_module_header {
	margin: 0;
	padding: 0;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: var(--gvid-cc-texto-h3);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: normal;
	color: var(--cc-bosque);
}

.cc-tarjeta .et_pb_module_header::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin: 0.875rem 0 1.125rem;
	border-radius: 3px;
	background-color: var(--cc-acento);
}

.cc-tarjeta .et_pb_blurb_description,
.cc-tarjeta .et_pb_blurb_description p {
	font-family: 'Quicksand', Helvetica, Arial, sans-serif;
	font-size: var(--gvid-cc-texto-base);
	font-weight: 500;
	line-height: 1.7;
	color: var(--cc-tinta);
}

/* Columnas de igual alto para tarjetas en fila. */
.et_pb_row.cc-fila--tarjetas,
.et_pb_row.cc-fila--rutas,
.et_pb_row.cc-fila--pilares {
	align-items: stretch;
}

.cc-fila--tarjetas > .et_pb_column,
.cc-fila--rutas > .et_pb_column,
.cc-fila--pilares > .et_pb_column {
	display: flex;
	flex-direction: column;
}

.cc-fila--tarjetas > .et_pb_column > .et_pb_module,
.cc-fila--rutas > .et_pb_column > .et_pb_module,
.cc-fila--pilares > .et_pb_column > .et_pb_module {
	flex: 1 1 auto;
	height: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.et_pb_blurb.cc-tarjeta {
		transition: none;
	}
}

/* ---------- Plantas en tablet y móvil (10-10-2026) ------------------------------------
   En pantallas angostas el contenido ocupa todo el ancho: las plantas de esquina
   quedaban detrás de los títulos (o, el chilco, escondido sobre la sección) y los cruces
   pasaban detrás de botones y logos. */
@media (max-width: 980px) {
	/* El chilco ya no sube hasta el borde del hero (la huincha apilada es muy alta): nace
	   en la esquina de su sección, más chico. */
	.et_pb_section.cc-naturaleza.cc-hojas-pos--esquina-arriba-der .cc-hoja:not(.cc-hoja--cruce) {
		--cc-hoja-tam: clamp(200px, 32vw, 280px);
		top: 0;
	}

	.et_pb_section .cc-hoja.cc-hoja--esquina:not(.cc-hoja--cruce) {
		--cc-hoja-tam: clamp(200px, 36vw, 300px);
	}

	/* Los cruces de abajo pasan bajo el último contenido (botón, logos), no detrás. */
	.et_pb_section.cc-cruce-pos--abajo > .et_pb_row:last-of-type {
		margin-bottom: clamp(150px, 26vw, 200px);
	}
}

@media (max-width: 980px) {
	/* La rama del coigüe vive en la mitad derecha de su dibujo (1440 de ancho, de 800 en
	   adelante): con el recorte al centro solo asomaba la punta. La caja se ensancha y se
	   ancla a la derecha para que la rama entera quepa en la pantalla. */
	.et_pb_section.cc-cruce--coigue .cc-hoja.cc-hoja--cruce {
		left: auto;
		right: 0;
		width: calc(100% * 1440 / 680);
		height: clamp(170px, 100vw * 320 / 680, 340px);
	}
}

@media (max-width: 767px) {
	/* Sin espacio libre junto a los títulos: fuera las plantas de esquina. */
	.et_pb_section.cc-naturaleza.cc-hojas-pos--esquina-arriba-der .cc-hoja:not(.cc-hoja--cruce),
	.et_pb_section .cc-hoja.cc-hoja--esquina:not(.cc-hoja--cruce) {
		display: none;
	}
}

/* ---------- Páginas interiores: encabezado y tonos (10-10-2026) ---------------------- */

/* Encabezado con foto y H1 (Planifica y landings). */
.et_pb_section.cc-planifica-hero {
	padding-top: clamp(140px, 9rem + 6vw, 220px);
}

.cc-cabecera--pagina {
	max-width: 52rem;
}

.cc-cabecera--pagina h1,
.et_pb_text .cc-cabecera--pagina h1 {
	margin: 0;
	padding: 0;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: normal;
	text-wrap: balance;
	color: var(--cc-blanco);
}

/* Tonos de sección del brandbook (ritmo papel → crema → oscuro) y colores de onda. */
.et_pb_section.cc-seccion--papel {
	background-color: var(--cc-papel);
}

.et_pb_section.cc-seccion--crema {
	background-color: var(--cc-crema);
}

.et_pb_section.cc-onda--a-papel { --cc-onda-color: var(--cc-papel); }
.et_pb_section.cc-onda--a-crema { --cc-onda-color: var(--cc-crema); }
.et_pb_section.cc-onda--a-tinta { --cc-onda-color: var(--cc-tinta); }

/* Onda colgante (cae sobre una foto) del color de la propia sección. */
.et_pb_section.cc-onda-color--papel { --cc-onda-color: var(--cc-papel); }
.et_pb_section.cc-onda-color--crema { --cc-onda-color: var(--cc-crema); }
.et_pb_section.cc-onda-color--noche { --cc-onda-color: var(--cc-noche); }
.et_pb_section.cc-onda-color--tinta { --cc-onda-color: var(--cc-tinta); }