/* =======================================================================
   COFOLA — guardas culturales sutiles + ajustes finos de maquetación.
   Todo lo "grande" (color, tipografía, espaciado) vive en theme.json.
   Este archivo solo resuelve lo que theme.json no puede: pseudo-elementos,
   SVG de fondo y comportamientos responsive puntuales.
   ======================================================================= */

/* --- Guarda geométrica inspirada en textiles mapuche (greca escalonada) ---
   Uso: añadir la clase "cofola-guarda-top" o "cofola-guarda-bottom" a un
   Grupo desde el editor (pestaña Avanzado > Clases CSS adicionales). */
.cofola-guarda-top,
.cofola-guarda-bottom {
	position: relative;
}

.cofola-guarda-top::before,
.cofola-guarda-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath fill='%238C1F3D' d='M0 14V7h7V0h7v7h7V0h7v7h7V0h7v7h7V0h7v7h7v7z'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 56px 14px;
	opacity: 0.05;
	pointer-events: none;
}

.cofola-guarda-top::before {
	top: 0;
}

.cofola-guarda-bottom::after {
	bottom: 0;
}

/* --- Marca de agua circular, inspirada en el kultrún ---
   Uso: clase "cofola-marca-kultrun" en un Grupo/Cover con position relative. */
.cofola-marca-kultrun {
	position: relative;
	overflow: hidden;
}

.cofola-marca-kultrun::after {
	content: "";
	position: absolute;
	right: -6%;
	bottom: -12%;
	width: min(46vw, 620px);
	height: min(46vw, 620px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96' fill='none' stroke='%232C8C7C' stroke-width='2'/%3E%3Ccircle cx='100' cy='100' r='70' fill='none' stroke='%232C8C7C' stroke-width='2'/%3E%3Cline x1='100' y1='4' x2='100' y2='196' stroke='%232C8C7C' stroke-width='2'/%3E%3Cline x1='4' y1='100' x2='196' y2='100' stroke='%232C8C7C' stroke-width='2'/%3E%3Cline x1='31' y1='31' x2='169' y2='169' stroke='%232C8C7C' stroke-width='1.4'/%3E%3Cline x1='169' y1='31' x2='31' y2='169' stroke='%232C8C7C' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
}

/* --- Marca de esquina, guarda romboidal pequeña ---
   Uso: clase "cofola-marca-esquina" en una sección. */
.cofola-marca-esquina {
	position: relative;
}

.cofola-marca-esquina::before {
	content: "";
	position: absolute;
	top: 2rem;
	left: 2rem;
	width: 120px;
	height: 120px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23A8C93B' stroke-width='2'%3E%3Crect x='10' y='10' width='20' height='20' transform='rotate(45 20 20)'/%3E%3Crect x='50' y='10' width='20' height='20' transform='rotate(45 60 20)'/%3E%3Crect x='10' y='50' width='20' height='20' transform='rotate(45 20 60)'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	opacity: 0.06;
	pointer-events: none;
}

/* Asegura que el contenido de las secciones con marcas de agua quede
   siempre por encima del decorado. */
.cofola-marca-kultrun > .wp-block-group__inner-container,
.cofola-marca-kultrun > * {
	position: relative;
	z-index: 1;
}

/* --- Hero: fotografía protagonista, tipografía contenida --- */
.cofola-hero {
	min-height: min(88vh, 820px);
	display: flex;
	align-items: flex-end;
}

.cofola-hero .wp-block-cover__image-background,
.cofola-hero img {
	object-fit: cover;
}

/* --- "19 AÑOS": número grande, composición editorial --- */
.cofola-numero-grande {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(5rem, 16vw, 11rem);
	line-height: 0.85;
	color: var(--wp--preset--color--burdeos);
	font-weight: 500;
}

/* --- Tarjetas de repertorio / galería: hover muy discreto --- */
.cofola-tarjeta img,
.wp-block-cover.cofola-tarjeta::before {
	transition: transform 0.6s ease;
}

.cofola-tarjeta:hover img {
	transform: scale(1.02);
}

.cofola-tarjeta {
	overflow: hidden;
}

/* --- Botones secundarios (contorno), para usarse junto al botón sólido --- */
.wp-block-button.is-style-cofola-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--burdeos);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--burdeos);
}

.wp-block-button.is-style-cofola-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--burdeos);
	color: var(--wp--preset--color--blanco);
}

/* --- Galería editorial: grid flexible, no rígida --- */
.cofola-galeria-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--wp--preset--spacing--20);
}

.cofola-galeria-grid figure {
	margin: 0;
	overflow: hidden;
}

.cofola-galeria-grid figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.cofola-galeria-grid figure:hover img {
	transform: scale(1.03);
}

.cofola-galeria-grid figure.cofola-span-2 {
	grid-column: span 2;
}

.cofola-galeria-grid figure.cofola-span-3 {
	grid-column: span 3;
}

.cofola-galeria-grid figure.cofola-alto {
	grid-row: span 2;
}

@media (max-width: 782px) {
	.cofola-galeria-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cofola-galeria-grid figure.cofola-span-3 {
		grid-column: span 2;
	}

	.cofola-numero-grande {
		font-size: clamp(4rem, 24vw, 7rem);
	}

	.cofola-marca-kultrun::after {
		width: 70vw;
		height: 70vw;
		opacity: 0.04;
	}
}

/* --- Evitar scroll horizontal en cualquier resolución --- */
html,
body {
	overflow-x: hidden;
}

/* --- Foco visible para navegación por teclado --- */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--turquesa);
	outline-offset: 2px;
}

/* --- Movimiento reducido --- */
@media (prefers-reduced-motion: reduce) {
	.cofola-tarjeta img,
	.cofola-galeria-grid figure img,
	.wp-block-button__link {
		transition: none !important;
	}
}