/* =====================================================================
   INCANTO · Hoja de estilos principal
   Diseño basado en la plantilla Spectral (html5up.net), rediseñada.
   ---------------------------------------------------------------------
   Para cambiar colores o tipografías de todo el sitio, edita las
   variables de la sección 1 (":root").
   ===================================================================== */

/* 1. VARIABLES ------------------------------------------------------- */
:root {
	--ebano: #1b1714;        /* negro cálido (piano lacado) */
	--ebano-2: #262019;
	--ebano-3: #120f0d;      /* pie de página */
	--ocre: #d8912a;         /* dorado exacto del logo */
	--ocre-claro: #ebc88a;   /* dorado para texto sobre fondo oscuro */
	--ocre-texto: #8e5a12;   /* dorado legible sobre fondo claro */
	--burdeos: #6d4a50;      /* vino suave (antes #561722) */
	--burdeos-2: #6a1f2c;
	--piedra: #eeeae3;       /* fondo claro alternativo */
	--blanco: #ffffff;
	--tinta: #2b2520;        /* texto principal */
	--gris: #6b6158;         /* texto secundario */
	--linea: #ddd5c8;        /* bordes suaves */

	--f-titulo: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--f-texto: "Jost", "Century Gothic", "Segoe UI", Arial, sans-serif;

	--ancho: 1180px;
	--ancho-texto: 760px;
	--radio: 3px;
	--alto-menu: 76px;
}

/* 2. BASE ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--blanco);
	color: var(--tinta);
	font-family: var(--f-texto);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ocre-texto); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
a:hover { color: var(--ocre); }
p { margin: 0 0 1.1em; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--ocre); outline-offset: 3px; }
::selection { background: var(--ocre-claro); color: var(--ebano); }

h1, h2, h3, h4 {
	font-family: var(--f-titulo);
	font-weight: 500;
	line-height: 1.15;
	color: var(--ebano);
	margin: 0 0 .6em;
	letter-spacing: -.005em;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 5rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.2rem; }

.contenedor { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }
.contenedor-texto { width: min(var(--ancho-texto), 100% - 2.5rem); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ocre); color: var(--ebano); padding: .6em 1em; }
.saltar:focus { left: 1rem; top: 1rem; }

/* 3. MENÚ ------------------------------------------------------------ */
.cabecera {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--alto-menu);
	display: flex; align-items: center;
	transition: background-color .35s, box-shadow .35s, height .35s;
}
.cabecera.solida, .menu-abierto .cabecera {
	background: rgba(27, 23, 20, .96);
	box-shadow: 0 1px 0 rgba(216, 145, 42, .25);
	--alto-menu: 64px;
}
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.marca img { height: 50px; width: auto; transition: height .35s; }
.cabecera.solida .marca img { height: 42px; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav > ul { display: flex; align-items: center; gap: .2rem; }
.nav a, .nav button {
	font-family: var(--f-texto);
	font-size: .95rem;
	font-weight: 400;
	color: #f3ede4;
	text-decoration: none;
	background: none; border: 0; cursor: pointer;
	padding: .5em .75em;
	display: inline-flex; align-items: center; gap: .4em;
	letter-spacing: .01em;
}
.nav a:hover, .nav button:hover, .nav a[aria-current="page"], .nav .activo > button { color: var(--ocre-claro); }
.nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--ocre); }
.nav .fa-chevron-down { font-size: .65em; transition: transform .25s; }
.nav .desplegable { position: relative; }
.nav .submenu {
	position: absolute; top: calc(100% + 8px); left: 0;
	min-width: 240px;
	background: var(--ebano);
	border-top: 2px solid var(--ocre);
	padding: .5rem 0;
	box-shadow: 0 18px 40px rgba(0,0,0,.35);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.nav .submenu a { display: block; padding: .6em 1.2em; }
.nav .desplegable.abierto .submenu,
.nav .desplegable:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1101px) {
	.nav .desplegable:hover .submenu { opacity: 1; visibility: visible; transform: none; }
}
.nav .desplegable.abierto .fa-chevron-down { transform: rotate(180deg); }
.nav .boton-menu-contacto {
	margin-left: .6rem;
	border: 1px solid var(--ocre);
	color: var(--ocre-claro);
	padding: .45em 1.1em;
}
.nav .boton-menu-contacto:hover { background: var(--ocre); color: var(--ebano); }

.hamburguesa {
	display: none;
	width: 44px; height: 44px;
	background: none; border: 1px solid rgba(235,200,138,.5); border-radius: var(--radio);
	color: var(--ocre-claro); font-size: 1.15rem; cursor: pointer;
}

@media (max-width: 1100px) {
	.hamburguesa { display: inline-flex; align-items: center; justify-content: center; }
	.nav {
		position: fixed; inset: var(--alto-menu) 0 0 0;
		background: var(--ebano);
		overflow-y: auto;
		padding: 1.5rem 1.5rem 3rem;
		transform: translateX(100%);
		transition: transform .35s ease;
	}
	.menu-abierto .nav { transform: none; }
	.menu-abierto { overflow: hidden; }
	.nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav > ul > li { border-bottom: 1px solid rgba(235,200,138,.15); }
	.nav a, .nav button { font-size: 1.15rem; width: 100%; padding: .85em .25em; justify-content: space-between; }
	.nav a[aria-current="page"] { box-shadow: none; color: var(--ocre); }
	.nav .submenu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; background: transparent; padding: 0 0 .6rem 1rem;
		display: none;
	}
	.nav .desplegable.abierto .submenu { display: block; }
	.nav .submenu a { font-size: 1.05rem; padding: .55em .25em; color: #d9cfc2; }
	.nav .boton-menu-contacto { margin: 1.5rem 0 0; justify-content: center; border: 1px solid var(--ocre); }
	.nav > ul > li:last-child { border-bottom: 0; }
}

/* 4. PORTADA (HERO) -------------------------------------------------- */
.portada {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	text-align: center;
	color: #fff;
	overflow: hidden;
	background: var(--ebano);
	isolation: isolate;
}
.portada__foto {
	position: absolute; inset: 0; z-index: -2;
	background-size: cover; background-position: center;
	animation: acercar 18s ease-out both;
}
.portada::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(18,15,13,.72) 0%, rgba(18,15,13,.45) 40%, rgba(18,15,13,.55) 70%, rgba(18,15,13,.88) 100%);
}
.portada__contenido { position: relative; width: min(980px, 100% - 2.5rem); padding: calc(var(--alto-menu) + 2rem) 0 6rem; }

.portada h1 {
	color: #fff;
	font-weight: 500;
	margin: 0;
	text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.portada h1 .palabra {
	display: inline-block;
	animation: subir 1s cubic-bezier(.2,.7,.2,1) both;
	animation-delay: calc(.35s + var(--i, 0) * .11s);
}
.portada__bajada {
	font-family: var(--f-titulo);
	font-style: italic;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	color: var(--ocre-claro);
	margin: 1.4rem auto 0;
	max-width: 40ch;
	animation: aparecer 1s ease both 1.4s;
}
.portada__texto {
	max-width: 52ch; margin: 1rem auto 0;
	color: rgba(255,255,255,.88);
	font-size: 1.05rem;
	animation: aparecer 1s ease both 1.6s;
}
.portada__logo { width: clamp(170px, 24vw, 260px); margin: 0 auto; animation: subir 1.1s cubic-bezier(.2,.7,.2,1) .2s both; }
.portada__frase {
	font-family: var(--f-titulo);
	font-size: clamp(1.45rem, 3.4vw, 2.5rem);
	line-height: 1.25;
	color: #fff;
	margin: 1.8rem auto 0;
	max-width: 24ch;
	font-weight: 400;
	text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.portada__frase .palabra { display: inline-block; animation: subir 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.7s + var(--i, 0) * .07s); }

.mas-info {
	position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
	color: #fff; text-decoration: none;
	font-size: .9rem; letter-spacing: .08em;
	display: flex; flex-direction: column; align-items: center; gap: .4rem;
	animation: aparecer 1s ease both 2s;
}
.mas-info i { color: var(--ocre); animation: flotar 2.4s ease-in-out infinite 3s; }
.mas-info:hover { color: var(--ocre-claro); }

/* Portada corta: páginas internas */
.portada--corta { min-height: 0; height: auto; }
.portada--corta .portada__contenido { padding: calc(var(--alto-menu) + 3.2rem) 0 3.4rem; }
.portada--corta h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); }
.portada--corta .portada__bajada { margin-top: 1rem; font-size: clamp(1.05rem, 1.9vw, 1.35rem); }
.migas { font-size: .85rem; margin-top: 1.4rem; color: rgba(255,255,255,.7); animation: aparecer 1s ease both 1.7s; }
.migas a { color: rgba(255,255,255,.85); }
.migas a:hover { color: var(--ocre-claro); }

@keyframes subir { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes acercar { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* 5. SECCIONES ------------------------------------------------------- */
.seccion { padding: clamp(4rem, 8vw, 7rem) 0; }
.seccion--piedra { background: var(--piedra); }
.seccion--burdeos { background: var(--burdeos); color: #efe3d6; }
.seccion--ebano { background: var(--ebano); color: #e9e1d6; }
.seccion--burdeos h2, .seccion--burdeos h3, .seccion--ebano h2, .seccion--ebano h3 { color: #fff; }
.seccion--burdeos a, .seccion--ebano a { color: var(--ocre-claro); }
.seccion--burdeos a:hover, .seccion--ebano a:hover { color: #fff; }
.seccion--corta { padding: clamp(3rem, 6vw, 4.5rem) 0; }

.encabezado-seccion { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.encabezado-seccion.centrado { margin-inline: auto; text-align: center; }
.encabezado-seccion p { color: var(--gris); font-size: 1.1rem; }
.seccion--burdeos .encabezado-seccion p, .seccion--ebano .encabezado-seccion p { color: #d9ccbd; }
.subtitulo {
	font-family: var(--f-titulo);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--ocre-texto);
	margin: 0 0 .5rem;
}
.seccion--burdeos .subtitulo, .seccion--ebano .subtitulo { color: var(--ocre-claro); }

.intro {
	font-size: clamp(1.1rem, 1.6vw, 1.28rem);
	line-height: 1.75;
	color: var(--tinta);
}
.intro p:last-child { margin-bottom: 0; }

/* Botones */
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	font-family: var(--f-texto);
	font-size: 1rem; font-weight: 500;
	letter-spacing: .02em;
	text-decoration: none;
	padding: .95em 1.8em;
	border: 1px solid var(--ocre);
	border-radius: var(--radio);
	background: var(--ocre);
	color: var(--ebano);
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.boton:hover { background: var(--ocre-claro); border-color: var(--ocre-claro); color: var(--ebano); }
.boton--borde { background: transparent; color: var(--ocre-texto); }
.boton--borde:hover { background: var(--ocre); color: var(--ebano); }
.seccion--ebano .boton--borde, .seccion--burdeos .boton--borde, .llamado .boton--borde { color: #f3ede4; border-color: rgba(235,200,138,.6); }
.seccion--ebano .boton--borde:hover, .llamado .boton--borde:hover { background: transparent; color: var(--ocre-claro); border-color: var(--ocre-claro); }
.grupo-botones { display: flex; flex-wrap: wrap; gap: .8rem; }

.enlace-mas {
	display: inline-flex; align-items: center; gap: .5em;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.enlace-mas i { font-size: .8em; transition: transform .2s; }
.enlace-mas:hover i { transform: translateX(3px); }

/* 6. SERVICIOS (inicio y matrimonios) -------------------------------- */
.servicio {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.servicio + .servicio { margin-top: clamp(4rem, 8vw, 6.5rem); }
.servicio:nth-child(even) { grid-template-columns: 5fr 7fr; }
.servicio:nth-child(even) .servicio__foto { order: 2; }
.servicio__foto { position: relative; display: block; }
.servicio__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; position: relative; z-index: 1; }
.servicio__foto::after {
	content: ""; position: absolute; inset: 18px -18px -18px 18px;
	border: 1px solid var(--ocre);
	z-index: 0;
}
.servicio:nth-child(even) .servicio__foto::after { inset: 18px 18px -18px -18px; }
.servicio__texto h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: .5em; }
.servicio__texto h3 a { color: inherit; text-decoration: none; }
.servicio__texto h3 a:hover { color: var(--ocre-texto); }
.servicio__texto p { color: #4a423b; }
.servicio__texto .grupo-botones { margin-top: 1.6rem; }
.servicio__texto .enlace-mas { margin-top: .6rem; }

@media (max-width: 820px) {
	.servicio, .servicio:nth-child(even) { grid-template-columns: 1fr; }
	.servicio:nth-child(even) .servicio__foto { order: 0; }
	.servicio__foto::after { inset: 12px -12px -12px 12px !important; }
}

/* 7. TRAYECTORIA (ex sección azul) ----------------------------------- */
.trayectoria__intro {
	display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem);
	align-items: end;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-bottom: 1px solid rgba(235,200,138,.25);
}
.trayectoria__intro h2 { margin: 0; font-size: clamp(2.1rem, 4.2vw, 3.4rem); }
.trayectoria__intro p { margin: 0; font-size: 1.12rem; color: #e6d9ca; }
.cifras {
	display: grid; grid-template-columns: repeat(3, 1fr);
	border-bottom: 1px solid rgba(235,200,138,.25);
}
.cifra { padding: 2rem 1rem 2rem 0; }
.cifra + .cifra { padding-left: clamp(1rem, 3vw, 2.5rem); border-left: 1px solid rgba(235,200,138,.25); }
.cifra strong { display: block; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--ocre-claro); }
.cifra span { display: block; margin-top: .6rem; color: #d9ccbd; font-size: .98rem; }

.temas {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 0;
}
.tema {
	padding: clamp(2rem, 3.5vw, 2.8rem) clamp(1.2rem, 2.5vw, 2.2rem) clamp(2rem, 3.5vw, 2.8rem) 0;
	border-bottom: 1px solid rgba(235,200,138,.18);
	display: flex; flex-direction: column;
}
.tema:not(:nth-child(3n+1)) { padding-left: clamp(1.2rem, 2.5vw, 2.2rem); border-left: 1px solid rgba(235,200,138,.18); }
.tema i.icono { color: var(--ocre); font-size: 1.35rem; margin-bottom: 1.1rem; }
.tema h3 { font-size: 1.55rem; margin-bottom: .55em; }
.tema p { color: #e2d5c6; font-size: 1rem; }
.tema .enlace-mas { margin-top: auto; align-self: flex-start; }
.tema__premios { display: flex; gap: .8rem; align-items: center; margin: .4rem 0 1.4rem; flex-wrap: wrap; }
.tema__premios img { height: 74px; width: auto; border-radius: 2px; background: #fff; }
.tema__datos { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.tema__datos li { display: flex; gap: .7rem; align-items: baseline; padding: .3rem 0; }
.tema__datos i { color: var(--ocre); width: 1.1em; text-align: center; }
.boton-youtube {
	display: inline-flex; align-items: center; gap: .55em;
	background: #fff; color: #1b1714 !important;
	padding: .55em 1.1em; border-radius: var(--radio);
	text-decoration: none; font-weight: 500; font-size: .95rem;
	margin: .2rem 0 1rem; align-self: flex-start;
}
.boton-youtube i { color: #e62117; font-size: 1.2em; }
.boton-youtube:hover { background: var(--ocre-claro); }

@media (max-width: 980px) {
	.trayectoria__intro { grid-template-columns: 1fr; align-items: start; }
	.temas { grid-template-columns: repeat(2, 1fr); }
	.tema:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
	.tema:nth-child(even) { padding-left: clamp(1.2rem, 2.5vw, 2.2rem); border-left: 1px solid rgba(235,200,138,.18); }
}
@media (max-width: 640px) {
	.temas { grid-template-columns: 1fr; }
	.tema:nth-child(even) { padding-left: 0; border-left: 0; }
	.cifras { grid-template-columns: 1fr; }
	.cifra, .cifra + .cifra { padding: 1.3rem 0; border-left: 0; }
	.cifra + .cifra { border-top: 1px solid rgba(235,200,138,.25); }
}

/* 8. LLAMADO FINAL (Incanto músicos profesionales) ------------------- */
.llamado {
	position: relative;
	background: var(--ebano);
	color: #e2d8cb;
	padding: clamp(4rem, 7vw, 6rem) 0;
	overflow: hidden;
}
.llamado .contenedor { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.llamado h2 { color: #fff; margin-bottom: .45em; }
.llamado p { font-size: 1.12rem; margin: 0; max-width: 58ch; }
.llamado .acciones { display: flex; flex-direction: column; gap: .9rem; }
.llamado .boton { width: 100%; padding: 1.05em 1.5em; }
@media (max-width: 820px) {
	.llamado .contenedor { grid-template-columns: 1fr; text-align: center; }
	.llamado p { margin-inline: auto; }
	.llamado .acciones { max-width: 360px; margin-inline: auto; width: 100%; }
}

/* 9. PIE DE PÁGINA --------------------------------------------------- */
.pie { background: var(--ebano-3); color: #a99c8d; text-align: center; padding: 3.2rem 0 2.6rem; }
.pie__logo { width: 120px; margin: 0 auto 1.6rem; opacity: .95; }
.pie .iconos { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; justify-content: center; gap: .9rem; }
.pie .iconos a {
	width: 46px; height: 46px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(235,200,138,.4);
	color: var(--ocre-claro); font-size: 1.15rem; text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}
.pie .iconos a:hover { background: var(--ocre); border-color: var(--ocre); color: var(--ebano); }
.pie__copy { font-size: .85rem; letter-spacing: .04em; margin: 0; }

/* 10. BOTÓN FLOTANTE DE WHATSAPP ------------------------------------- */
.whatsapp-flotante {
	position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 90;
	width: 60px; height: 60px; border-radius: 50%;
	background: #25d366; color: #fff !important;
	display: flex; align-items: center; justify-content: center;
	font-size: 2rem; text-decoration: none;
	box-shadow: 0 8px 24px rgba(0,0,0,.28);
	transition: transform .2s, box-shadow .2s;
	animation: aparecer .6s ease both 1.2s;
}
.whatsapp-flotante::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid #25d366;
	animation: pulso 2.8s ease-out infinite 2s;
}
.whatsapp-flotante:hover { transform: scale(1.07); box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.whatsapp-flotante .etiqueta {
	position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
	background: #fff; color: var(--tinta);
	font-size: .9rem; white-space: nowrap;
	padding: .45em .9em; border-radius: var(--radio);
	box-shadow: 0 4px 16px rgba(0,0,0,.18);
	opacity: 0; pointer-events: none; transition: opacity .2s;
}
.whatsapp-flotante:hover .etiqueta, .whatsapp-flotante:focus-visible .etiqueta { opacity: 1; }
@keyframes pulso { 0% { transform: scale(1); opacity: .7; } 70%,100% { transform: scale(1.55); opacity: 0; } }

/* 11. CONJUNTOS ------------------------------------------------------ */
.conjuntos { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.conjunto {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.8rem, 4.5vw, 4.5rem); align-items: start;
	padding-top: clamp(3rem, 6vw, 5rem);
	border-top: 1px solid var(--linea);
}
.conjunto:first-child { padding-top: 0; border-top: 0; }
.conjunto:nth-child(even) .conjunto__foto { order: 2; }
.conjunto__foto { position: relative; margin: 0; }
.conjunto__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.conjunto__foto figcaption { font-size: .88rem; color: var(--gris); margin-top: .6rem; font-style: italic; }
.conjunto__cantidad {
	position: absolute; left: 0; top: 0;
	background: var(--ebano); color: var(--ocre-claro);
	font-family: var(--f-titulo); font-size: 1rem;
	padding: .55em 1em; line-height: 1;
	display: flex; align-items: baseline; gap: .4em;
}
.conjunto__cantidad b { font-size: 1.9rem; font-weight: 500; color: #fff; }
.conjunto__foto--sin-imagen {
	aspect-ratio: 4 / 3; background: var(--ebano);
	display: grid; place-items: center; text-align: center;
	color: var(--ocre-claro); padding: 2rem; position: relative;
}
.conjunto__foto--sin-imagen > div { position: relative; padding: .4rem 1.6rem; }
.conjunto__foto--sin-imagen .gran-numero { font-family: var(--f-titulo); font-size: 6rem; line-height: 1; color: #fff; display: block; }
.conjunto__texto h3 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); margin-bottom: .3em; }
.conjunto__texto .formacion { color: var(--gris); margin-bottom: 1.2rem; }
.conjunto__texto h4 { font-family: var(--f-texto); font-size: .98rem; font-weight: 600; color: var(--tinta); margin: 1.4rem 0 .4rem; }
.ejemplos { list-style: none; margin: 0 0 .5rem; padding: 0; }
.ejemplos li {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: .6rem 0; border-bottom: 1px dotted #cfc5b6;
}
.ejemplos li span { flex: 1; }
@media (max-width: 820px) {
	.conjunto { grid-template-columns: 1fr; }
	.conjunto:nth-child(even) .conjunto__foto { order: 0; }
}

/* Enlace a video (píldora) — se usa en repertorios y conjuntos */
.vid, .rep-lista a, .ejemplos a {
	display: inline-flex; align-items: center; gap: .4em;
	font-size: .82rem; font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	color: var(--ocre-texto);
	border: 1px solid rgba(216,145,42,.55);
	border-radius: 999px;
	padding: .3em .8em .3em .65em;
	margin: .12rem .1rem;
	transition: background-color .2s, color .2s, border-color .2s;
	vertical-align: baseline;
}
.rep-lista a::before, .ejemplos a::before, .vid::before {
	content: "\f04b"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: .72em;
}
.rep-lista a[href^="#"]::before { content: "\f063"; }
.rep-lista a[href$=".mp3"]::before { content: "\f028"; }
.vid:hover, .rep-lista a:hover, .ejemplos a:hover { background: var(--ocre); border-color: var(--ocre); color: var(--ebano); }

/* 12. REPERTORIOS ---------------------------------------------------- */
.rep-intro { max-width: var(--ancho-texto); }
.rep-nota {
	border-left: 3px solid var(--ocre);
	background: var(--piedra);
	padding: 1.2rem 1.4rem;
	margin: 1.6rem 0 0;
	font-size: 1rem;
}
.rep-nota p:last-child { margin: 0; }
.rep-nota ul { margin: 0; padding-left: 1.2rem; }

.rep-diseno {
	display: grid; grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.rep-indice {
	position: sticky; top: calc(var(--alto-menu) + 1.5rem);
	max-height: calc(100vh - var(--alto-menu) - 3rem); overflow-y: auto;
	font-size: .95rem;
	padding-right: .5rem;
}
.rep-indice p { font-family: var(--f-titulo); font-style: italic; font-size: 1.15rem; color: var(--ocre-texto); margin-bottom: .6rem; }
.rep-indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linea); }
.rep-indice a {
	display: block; padding: .38rem 0 .38rem 1rem; margin-left: -1px;
	color: var(--gris); text-decoration: none; line-height: 1.35;
	border-left: 2px solid transparent;
}
.rep-indice a:hover { color: var(--tinta); }
.rep-indice a.actual { color: var(--ebano); border-left-color: var(--ocre); font-weight: 500; }

.rep-bloque { scroll-margin-top: calc(var(--alto-menu) + 1.5rem); padding-bottom: 2.6rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--linea); }
.rep-bloque:last-child { border-bottom: 0; margin-bottom: 0; }
.rep-bloque > h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); display: flex; gap: .55em; align-items: baseline; }
.rep-bloque > h2 .num { font-style: italic; color: var(--ocre); font-size: .8em; min-width: 1.4em; }
.rep-bloque > p, .rep-bloque > .rep-desc { color: #4a423b; max-width: 68ch; }
.rep-bloque h3 {
	font-family: var(--f-texto); font-size: 1.02rem; font-weight: 600;
	color: var(--ebano); margin: 1.8rem 0 .6rem;
	padding-bottom: .4rem; border-bottom: 1px solid var(--ocre);
	display: inline-block;
}
.rep-lista { list-style: none; margin: 0 0 1rem; padding: 0; }
.rep-lista li {
	padding: .7rem 0 .75rem;
	border-bottom: 1px dotted #d4cabb;
	line-height: 1.55;
}
.rep-lista li:last-child { border-bottom: 0; }
.rep-lista .tema-musical { display: block; color: var(--ebano); font-weight: 500; margin-bottom: .25rem; }
.rep-lista .inst { color: var(--gris); font-size: .86rem; margin-right: .5rem; }
.rep-lista li > em, .rep-lista li > strong { font-style: normal; }

/* Repertorio de eventos (categorías con foto) */
.categoria { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
.categoria + .categoria { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--linea); }
.categoria__foto { position: sticky; top: calc(var(--alto-menu) + 1.5rem); }
.categoria__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.categoria h2 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); }

@media (max-width: 900px) {
	.rep-diseno { grid-template-columns: minmax(0, 1fr); }
	.rep-indice {
		min-width: 0;
		position: sticky; top: var(--alto-menu); z-index: 5;
		max-height: none; overflow: visible;
		background: #fff; margin: 0 -1.25rem; padding: .7rem 1.25rem;
		border-bottom: 1px solid var(--linea);
	}
	.rep-indice p { display: none; }
	.rep-indice ol { display: flex; gap: .45rem; overflow-x: auto; border: 0; scrollbar-width: none; padding-bottom: 2px; }
	.rep-indice ol::-webkit-scrollbar { display: none; }
	.rep-indice a { white-space: nowrap; border: 1px solid var(--linea); border-radius: 999px; padding: .35rem .9rem; margin: 0; font-size: .88rem; }
	.rep-indice a.actual { border-color: var(--ocre); background: var(--ocre); color: var(--ebano); }
	.rep-bloque { scroll-margin-top: calc(var(--alto-menu) + 4.5rem); }
	.categoria { grid-template-columns: 1fr; }
	.categoria__foto { position: static; }
	.categoria__foto img { aspect-ratio: 16 / 9; }
}

/* 13. PASO A PASO ---------------------------------------------------- */
.pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; position: relative; }
.pasos::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--ocre); opacity: .5; }
.paso { position: relative; padding: 0 0 2.6rem 88px; counter-increment: paso; }
.paso:last-child { padding-bottom: 0; }
.paso::before {
	content: counter(paso);
	position: absolute; left: 0; top: -4px;
	width: 55px; height: 55px; border-radius: 50%;
	background: var(--ebano); color: var(--ocre-claro);
	font-family: var(--f-titulo); font-size: 1.6rem;
	display: grid; place-items: center;
	box-shadow: 0 0 0 6px #fff;
}
.paso h3 { font-size: 1.55rem; margin-bottom: .35em; }
.paso p { color: #4a423b; margin: 0; }

.preguntas { border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	padding: 1.2rem 0;
	font-family: var(--f-titulo); font-size: 1.25rem; color: var(--ebano); line-height: 1.35;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--f-texto); font-weight: 300; font-size: 1.8rem; color: var(--ocre); line-height: 1; transition: transform .25s; }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details > div { padding: 0 0 1.4rem; color: #4a423b; max-width: 68ch; }

/* 14. QUIÉNES SOMOS -------------------------------------------------- */
.directores { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.director img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; margin-bottom: 1.6rem; }
.director h3 { font-size: 2rem; margin-bottom: .1em; }
.director .cargo { font-family: var(--f-titulo); font-style: italic; color: var(--ocre-texto); font-size: 1.15rem; margin-bottom: 1rem; }
.director p { color: #4a423b; }
@media (max-width: 760px) { .directores { grid-template-columns: 1fr; } }

/* 15. TARJETAS DE ENLACE (repertorio, videos) ------------------------ */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.tarjeta { background: #fff; display: flex; flex-direction: column; border: 1px solid var(--linea); }
.tarjeta__foto { display: block; overflow: hidden; }
.tarjeta__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
.tarjeta__foto:hover img { transform: scale(1.03); }
.tarjeta__texto { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__texto h2, .tarjeta__texto h3 { font-size: 1.65rem; margin-bottom: .45em; }
.tarjeta__texto p { color: #4a423b; font-size: 1rem; }
.tarjeta__enlaces { list-style: none; padding: 0; margin: .2rem 0 0; }
.tarjeta__enlaces li { border-top: 1px solid var(--linea); }
.tarjeta__enlaces a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; text-decoration: none; color: var(--tinta); font-weight: 500; }
.tarjeta__enlaces a i { color: var(--ocre); font-size: .8em; transition: transform .2s; }
.tarjeta__enlaces a:hover { color: var(--ocre-texto); }
.tarjeta__enlaces a:hover i { transform: translateX(3px); }
.tarjeta__enlaces small { display: block; font-weight: 400; color: var(--gris); }
@media (max-width: 900px) { .tarjetas { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* Video destacado */
.video-destacado { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video-destacado button { all: unset; cursor: pointer; position: absolute; inset: 0; display: block; }
.video-destacado img { width: 100%; height: 100%; object-fit: cover; }
.video-destacado .play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 92px; height: 92px; border-radius: 50%;
	background: rgba(27,23,20,.75); border: 1px solid var(--ocre-claro);
	color: var(--ocre-claro); display: grid; place-items: center; font-size: 1.8rem;
	transition: background-color .2s, color .2s;
}
.video-destacado .play i { margin-left: 6px; }
.video-destacado button:hover .play, .video-destacado button:focus-visible .play { background: var(--ocre); color: var(--ebano); }
.video-destacado iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 16. RECOMENDACIONES ------------------------------------------------ */
.premios { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); }
.premio { background: #fff; border: 1px solid var(--linea); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1rem; }
.premio__logos { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; min-height: 105px; }
.premio__logos img { height: 105px; width: auto; }
.premio h2 { font-size: 1.7rem; margin: 0; }
.premio p { margin: 0; color: #4a423b; }
.premio .enlace-mas { align-self: flex-start; margin-top: auto; }
@media (max-width: 820px) { .premios { grid-template-columns: 1fr; } }

.galeria { columns: 2; column-gap: clamp(1rem, 2.5vw, 2rem); }
.galeria a { display: block; break-inside: avoid; margin-bottom: clamp(1rem, 2.5vw, 2rem); border: 1px solid var(--linea); background: #fff; padding: 8px; cursor: zoom-in; }
.galeria a:hover { border-color: var(--ocre); }
.galeria img { width: 100%; }
@media (max-width: 700px) { .galeria { columns: 1; } }

.visor {
	position: fixed; inset: 0; z-index: 300;
	background: rgba(18,15,13,.94);
	display: none; align-items: center; justify-content: center; padding: 4rem 1rem 1rem;
}
.visor.abierto { display: flex; }
.visor img { max-width: min(1000px, 100%); max-height: 100%; width: auto; background: #fff; }
.visor button { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ocre-claro); background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; }

/* 17. CONTACTO ------------------------------------------------------- */
.contacto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.contacto__info h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.contacto__info > p { color: #4a423b; }
.datos-contacto { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--linea); }
.datos-contacto li { border-bottom: 1px solid var(--linea); }
.datos-contacto a { display: flex; gap: 1rem; align-items: center; padding: 1.05rem 0; text-decoration: none; color: var(--tinta); }
.datos-contacto i { width: 44px; height: 44px; border-radius: 50%; background: var(--piedra); color: var(--ocre-texto); display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.datos-contacto small { display: block; color: var(--gris); font-size: .85rem; }
.datos-contacto strong { font-weight: 500; }
.datos-contacto a:hover strong { color: var(--ocre-texto); }

.formulario { background: var(--piedra); padding: clamp(1.6rem, 4vw, 3rem); }
.formulario h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: .3em; }
.formulario .nota-obligatorio { color: var(--gris); font-size: .92rem; margin-bottom: 1.8rem; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem 1.2rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label, .campo legend { font-weight: 500; font-size: .95rem; color: var(--tinta); padding: 0; }
.campo label .req, .campo legend .req { color: #a3361f; margin-left: .15em; }
.campo label .opc, .campo legend .opc { color: var(--gris); font-weight: 400; font-size: .85rem; margin-left: .3em; }
.campo input, .campo textarea {
	font: inherit; font-size: 1rem; color: var(--tinta);
	background: #fff;
	border: 1px solid #cfc5b6; border-radius: var(--radio);
	padding: .8em .9em;
	width: 100%;
	transition: border-color .2s, box-shadow .2s;
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--ocre); box-shadow: 0 0 0 3px rgba(216,145,42,.22); }
.campo.con-error input, .campo.con-error textarea { border-color: #a3361f; }
.campo .error { color: #a3361f; font-size: .86rem; display: none; }
.campo.con-error .error { display: block; }
fieldset.campo { border: 0; margin: 0; padding: 0; }
.opciones-evento { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .2rem; }
.opciones-evento label { position: relative; cursor: pointer; font-weight: 400; }
.opciones-evento input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opciones-evento span {
	display: inline-flex; align-items: center; gap: .5em;
	padding: .6em 1.1em; border: 1px solid #cfc5b6; border-radius: 999px; background: #fff;
	transition: background-color .2s, border-color .2s, color .2s;
}
.opciones-evento span::before { content: ""; width: .7em; height: .7em; border-radius: 50%; border: 1px solid #b3a796; }
.opciones-evento input:checked + span { background: var(--ebano); border-color: var(--ebano); color: #fff; }
.opciones-evento input:checked + span::before { background: var(--ocre); border-color: var(--ocre); }
.opciones-evento input:focus-visible + span { outline: 2px solid var(--ocre); outline-offset: 2px; }
.campo-trampa { position: absolute; left: -5000px; }
.formulario .boton { margin-top: 1.8rem; min-width: 220px; }
.formulario .boton[disabled] { opacity: .65; cursor: wait; }
.mensaje-form { margin-top: 1.4rem; padding: 1rem 1.2rem; border-left: 3px solid; display: none; }
.mensaje-form.ok { display: block; border-color: #3f7a4a; background: #e8f1e8; }
.mensaje-form.mal { display: block; border-color: #a3361f; background: #f6e6e1; }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }

/* 18. MOVIMIENTO REDUCIDO ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* 19. AJUSTES ADICIONALES ------------------------------------------- */
.saltos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.saltos a {
	text-decoration: none; color: var(--tinta);
	border: 1px solid #cfc5b6; border-radius: 999px;
	padding: .4em 1em; font-size: .92rem; background: #fff;
	transition: background-color .2s, border-color .2s;
}
.saltos a:hover { border-color: var(--ocre); background: var(--ocre); color: var(--ebano); }
.conjunto { scroll-margin-top: calc(var(--alto-menu) + 1.5rem); }
.tarjetas--2 { grid-template-columns: repeat(2, 1fr); }
.tarjetas--2 .tarjeta__foto img { aspect-ratio: 16 / 9; }
@media (max-width: 900px) { .tarjetas--2 { grid-template-columns: 1fr; } }
.rep-diseno--eventos { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 900px) { .rep-diseno--eventos { grid-template-columns: minmax(0, 1fr); } }
.categoria.rep-bloque { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* 20. PORTADA CLÁSICA (inicio, matrimonios, misas y funerales, eventos)
   Estilo del diseño original Spectral: título entre dos líneas que se
   extienden y foto de fondo que aparece de a poco. */
.portada--clasica .portada__foto { animation: none; }
.portada--clasica::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--ebano);
	pointer-events: none;
	animation: revelar 3s ease-in-out 1.25s both;
}
.portada--clasica h1,
.portada--clasica .marco-logo {
	position: relative;
	display: inline-block;
	font-family: var(--f-texto);
	font-weight: 600;
	font-size: clamp(1.35rem, 2.9vw, 2.3rem);
	line-height: 1.25;
	letter-spacing: .225em;
	text-transform: uppercase;
	color: #fff;
	padding: .5em 1.1em .5em 1.325em; /* compensa el espaciado de la última letra */
	margin: 0;
	text-shadow: 0 2px 18px rgba(0,0,0,.35);
	animation: aparecer-escala .5s ease .1s both;
}
.portada--clasica .marco-logo { padding: 1.1rem 1.6rem; letter-spacing: 0; }
.portada--clasica .marco-logo img { width: clamp(150px, 20vw, 220px); }
.portada--clasica h1::before, .portada--clasica h1::after,
.portada--clasica .marco-logo::before, .portada--clasica .marco-logo::after {
	content: ""; position: absolute; height: 2px; background: #fff; width: 100%;
	animation: linea .85s ease .35s both;
}
.portada--clasica h1::before, .portada--clasica .marco-logo::before { top: 0; left: 0; }
.portada--clasica h1::after, .portada--clasica .marco-logo::after { bottom: 0; right: 0; }
.portada--clasica .portada__bajada {
	font-family: var(--f-texto); font-style: normal; font-weight: 600;
	font-size: clamp(.85rem, 1.3vw, 1rem);
	letter-spacing: .225em; text-transform: uppercase;
	color: #fff; max-width: 52ch; line-height: 1.7;
	margin-top: 1.8rem;
	animation: aparecer 1s ease 1s both;
}
.portada--clasica .portada__texto {
	font-size: .85rem; letter-spacing: .15em; text-transform: uppercase;
	color: rgba(255,255,255,.85); max-width: 60ch; line-height: 1.8;
	animation: aparecer 1s ease 1.2s both;
}
.portada--clasica .portada__frase {
	font-style: italic; font-weight: 600; color: #e0dbd3;
	margin-top: 2rem;
	animation: aparecer 1s ease 1s both;
}
.portada--clasica .mas-info {
	text-transform: uppercase; letter-spacing: .225em; font-size: .8rem;
	animation: subir-desde-abajo .75s ease 3.5s both;
}
@keyframes revelar { from { opacity: 1; } to { opacity: 0; } }
@keyframes linea { from { width: 0; } to { width: 100%; } }
@keyframes aparecer-escala { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes subir-desde-abajo { from { opacity: 0; transform: translate(-50%, 4rem); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 736px) {
	.portada--clasica h1 { font-size: 1.2rem; letter-spacing: .18em; padding: .5em .8em .5em .98em; }
}

/* Portadas cortas (páginas internas) con el mismo título entre dos líneas */
.portada--clasica.portada--corta h1 { font-size: clamp(1.25rem, 2.4vw, 1.9rem); }
.portada--clasica.portada--corta .portada__bajada { margin-top: 1.4rem; }
.portada--clasica.portada--corta::after { animation-duration: 2s; animation-delay: .6s; }
@media (max-width: 736px) { .portada--clasica.portada--corta h1 { font-size: 1.1rem; } }

/* Fotos de los directores (quiénes somos): tamaño reducido */
.director img { width: min(100%, 300px); }

/* Fotos de conjuntos completas, sin recortar los costados */
.conjunto__foto img { aspect-ratio: auto; height: auto; }

/* Inicio: logo central más pequeño */
.portada--clasica .marco-logo img { width: clamp(110px, 12vw, 160px); }
.portada--clasica .marco-logo { padding: .9rem 1.3rem; }

/* Inicio: título "Nuestros servicios" en una franja dorada */
.banda-titulo { background: var(--ocre); text-align: center; padding: clamp(2rem, 4vw, 2.8rem) 1.25rem; scroll-margin-top: var(--alto-menu); }
.banda-titulo h2 {
	position: relative; display: inline-block; margin: 0;
	font-family: var(--f-texto); font-weight: 600;
	font-size: clamp(1.15rem, 2.3vw, 1.7rem); line-height: 1.25;
	letter-spacing: .225em; text-transform: uppercase; color: var(--ebano);
	padding: .5em 1.1em .5em 1.325em;
}
.banda-titulo h2::before, .banda-titulo h2::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--ebano); }
.banda-titulo h2::before { top: 0; }
.banda-titulo h2::after { bottom: 0; }

/* Inicio: fotos de servicios más pequeñas */
.servicios-inicio .contenedor { width: min(1040px, 100% - 2.5rem); }
.servicios-inicio .servicio { grid-template-columns: 6fr 4fr; }
.servicios-inicio .servicio .servicio__foto { order: 2; }
.servicios-inicio .servicio:nth-child(even) { grid-template-columns: 4fr 6fr; }
.servicios-inicio .servicio:nth-child(even) .servicio__foto { order: 0; }
.servicios-inicio .servicio .servicio__foto::after { inset: 14px 14px -14px -14px; }
.servicios-inicio .servicio:nth-child(even) .servicio__foto::after { inset: 14px -14px -14px 14px; }
@media (max-width: 820px) {
	.servicios-inicio .servicio, .servicios-inicio .servicio:nth-child(even) { grid-template-columns: 1fr; }
	.servicios-inicio .servicio .servicio__foto { order: 0; max-width: 520px; }
}

/* Quiénes somos: texto de cada director del mismo ancho que su foto */
.directores { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; column-gap: clamp(3rem, 8vw, 7rem); }
.director img { width: 100%; }
@media (max-width: 760px) { .directores { grid-template-columns: minmax(0, 300px); } }

/* Inicio: cifras destacadas con un fondo propio */
.cifras {
	background: var(--ebano);
	border: 1px solid rgba(235,200,138,.35);
	margin: clamp(2.5rem, 5vw, 3.5rem) 0;
	text-align: center;
}
.cifra, .cifra + .cifra { padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1rem, 2.5vw, 2rem); }
.cifra + .cifra { border-left: 1px solid rgba(235,200,138,.25); }
.trayectoria__intro { border-bottom: 0; padding-bottom: 0; }
.temas { border-top: 1px solid rgba(235,200,138,.18); }
@media (max-width: 640px) {
	.cifra + .cifra { border-left: 0; border-top: 1px solid rgba(235,200,138,.25); }
}

/* Títulos en Bodoni Moda más legibles: se usa la versión de la letra
   diseñada para tamaños pequeños, que tiene los trazos finos más gruesos.
   (Para volver a los trazos muy finos, borra este bloque.) */
body { font-variation-settings: "opsz" 14; }
.servicio__texto h3 { font-weight: 600; }

/* Quiénes somos: reseñas una debajo de la otra (foto a la izquierda, texto a la derecha) */
.directores { grid-template-columns: minmax(0, 860px); justify-content: center; row-gap: clamp(3rem, 6vw, 4.5rem); }
.director { display: grid; grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(1.8rem, 4vw, 3.2rem); align-items: start; }
.director img { grid-row: 1 / 4; width: 100%; margin: 0; }
.director h3 { margin-top: .2rem; }
.director + .director { padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--linea); }
@media (max-width: 640px) {
	.director { grid-template-columns: 1fr; }
	.director img { grid-row: auto; width: min(100%, 300px); margin-bottom: 1.4rem; }
}

/* Inicio: la foto de portada comienza bajo la barra del menú,
   para que las cabezas de los músicos no queden tapadas */
.portada--inicio .portada__foto { top: var(--alto-menu); }

/* Video de presentación: enlace directo a YouTube */
.video-destacado a { position: absolute; inset: 0; display: block; }
.video-destacado a:hover .play, .video-destacado a:focus-visible .play { background: var(--ocre); color: var(--ebano); }

/* Conjuntos: texto centrado verticalmente junto a cada foto y espaciado parejo */
.conjunto { align-items: center; }
.conjunto__texto h3 { margin-bottom: .35em; }
.conjunto__texto h3 + h4 {
margin-top: .9rem
}
.conjunto__texto .formacion { margin-bottom: .4rem; }
.conjunto__texto .formacion + .ejemplos { margin-top: .6rem; }
.conjunto__texto .ejemplos:last-child { margin-bottom: 0; }

/* Eventos varios: fotos completas, sin recortar */
.categoria__foto img { aspect-ratio: auto; height: auto; }
@media (max-width: 900px) { .categoria__foto img { aspect-ratio: auto; } }

/* Eventos varios: foto de ópera recortada por la izquierda para ver más grandes a los tres músicos */
.categoria__foto img[src*="IMG-20200110-WA0000"] { aspect-ratio: 4 / 5; object-fit: cover; object-position: 95% center; }
@media (max-width: 900px) { .categoria__foto img[src*="IMG-20200110-WA0000"] { aspect-ratio: 4 / 3; object-position: 92% 40%; } }