/* =========================================================
   Nuestro Lienzo — Graphica Custom Theme
   Sistema de marca + Home (Hero + Servicios), Header y Footer
   ========================================================= */

/* ---------- Tokens de marca ---------- */
:root {
	--ink:        #413232; /* negro principal (negrito de marca) */
	--gold:       #A98A5B; /* acento (dorado/arena) */
	--muted:      #747474; /* bajadas, textos de apoyo, párrafos largos */
	--bg:         #1e1f21; /* Fondo negro de todo el sitio (mismo tono que footer/CTA). */
	--text:       #413232; /* Texto principal (mismo negro de marca). */
	--text-muted: rgba(0,0,0,.5); /* párrafos largos / textos de apoyo */
	--cream:      #f6f3ee; /* fondo suave derivado del dorado (para secciones claras puntuales) */
	--band:       #f4f1eb; /* banda beige (p. ej. bloque de Adicionales) */
	--line:       #e7e2d9;
	--line-dark:  rgba(255,255,255,.12); /* bordes sutiles sobre fondo oscuro */
	--white:      #ffffff;

	--font-base:  "Google Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-alt:   "Rubik", "Segoe UI", system-ui, sans-serif;
	--font-display: "larken", Georgia, "Times New Roman", serif; /* títulos serif (Adobe Fonts) */

	--maxw:       1550px;
	--gutter:     clamp(1.25rem, 4vw, 3rem);
	--radius:     0; /* Nuestro Lienzo: sin border-radius en ningún elemento (web elegante, esquinas rectas). */
	--header-h:   84px;

	--ease:       cubic-bezier(0.22, 1, 0.36, 1);
	--hover-speed: 0.6s; /* Velocidad única para TODOS los efectos de hover (lentos). */
}

/* ---------- Accesibilidad ---------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
	background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 var(--radius) var(--radius);
	z-index: 200; transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	color: var(--text);
	/* Fondo global del sitio: gradiente radial CLARO fijo al viewport. Las secciones van transparentes. */
	background-color: #eef0f2;
	background-image: radial-gradient(circle at 50% 50%, #ffffff 0%, #f4f1eb 100%);
	background-attachment: fixed;
	overflow-x: hidden; /* evita cualquier scroll horizontal en móvil */
	line-height: 1.65;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }

/* Cursor personalizado: circulito de 8px (negro de marca) con efecto negativo. */
.cursor-dot {
	position: fixed; top: 0; left: 0; z-index: 99999;
	width: 8px; height: 8px; border-radius: 50%;
	background: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	will-change: transform;
}
@media (pointer: fine) {
	.cursor-active, .cursor-active * { cursor: none !important; }
}
a { color: inherit; text-decoration: none; transition: color var(--hover-speed) var(--ease); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -0.01em; }
/* Tamaño único para todos los H1 del sitio (fuente serif de --font-display). */
h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
/* Todos los H2 al mismo tamaño que "Paquetes". */
h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 7vw, 5rem); }
/* H3: estilo global (tomado de las tarjetas de Momentos). */
h3 {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 5vw, 2rem); font-weight: 300; letter-spacing: 0;
	color: var(--ink); line-height: 1.2; margin: 0;
}
/* Párrafo general: Rubik Light (300 real), 18px, mismo color para todos. */
p { margin: 0 0 1.1em; font-family: var(--font-alt); font-size: 18px; font-weight: 300; line-height: 1.45; color: var(--text-muted); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Utilidades ---------- */
/* Wrapper interno que restringe el ancho del contenido dentro de cada section/header/footer. */
.wrapper { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
	display: inline-block;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1rem;
}
.lead { color: rgba(255,255,255,.7); font-size: 1.1rem; max-width: 60ch; }
.section { padding-block: clamp(3.05rem, 6.9vw, 5.75rem); }
.section--cream { background: var(--cream); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Botones */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .95rem 1.9rem;
	font-family: var(--font-base);
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .02em;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--hover-speed) var(--ease);
	white-space: nowrap;
}
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--gold); color: var(--white); }
.btn--gold { background: var(--gold); color: var(--white); }
.btn--gold:hover { background: var(--ink); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn--light:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* Títulos de sección */
.section-head { max-width: 62ch; }
.section-head.text-center { margin-inline: auto; }
.section-title { /* tamaño: h2 global */ }
.section-title .accent { color: var(--gold); }

/* =========================================================
   HEADER (minimal) + DRAWER (panel lateral off-canvas)
   ========================================================= */
.site-header {
	position: absolute; /* NO sticky: el header (con el logo) se va con el scroll. */
	top: 0; left: 0; right: 0;
	z-index: 90;
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--header-h);
}
/* Variante sólida (páginas internas): fondo sin backdrop-filter para no crear
   un contenedor de posicionamiento que atrape al ícono fijo. */
.site-header--solid {
	background: rgba(30,31,33,.95);
}
.site-brand { display: inline-flex; align-items: center; }
/* Sitio oscuro: el logo va siempre en blanco. */
.site-brand img { height: 26px; width: auto; filter: brightness(0) invert(1); }

/* Iconos de redes en el header, al lado del botón del menú (fijo). */
.header-social { margin-left: auto; display: flex; align-items: center; gap: .9rem; padding-right: 68px; }
.header-social a { display: inline-flex; color: var(--white); transition: color var(--hover-speed) var(--ease); }
.header-social svg { width: 18px; height: 18px; display: block; }
.header-social a:hover { color: var(--gold); }
@media (max-width: 560px) { .header-social { display: none; } }

/* Botón hamburguesa: FIJO — se queda al hacer scroll aunque el header se vaya —
   con su propio fondo (chip). */
.nav-toggle {
	position: fixed;
	top: 1.1rem; right: var(--gutter);
	z-index: 110;
	display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
	width: 52px; height: 52px; padding: 0;
	background: rgba(30,31,33,.35);
	backdrop-filter: blur(8px) saturate(140%);
	border: 1px solid var(--white);
	cursor: pointer;
	transition: background var(--hover-speed) var(--ease), backdrop-filter var(--hover-speed) var(--ease), border-color var(--hover-speed) var(--ease);
}
.nav-toggle:hover { background: transparent; backdrop-filter: none; border-color: transparent; }
/* Esquinas de enfoque: 4 <i>, cada uno un cuadrante con 2 bordes en L. */
.nav-toggle__corner {
	position: absolute;
	width: 8px; height: 8px;
	border-color: var(--white);
	border-style: solid;
	pointer-events: none;
	opacity: 0;
	transition: transform var(--hover-speed) var(--ease), opacity var(--hover-speed) var(--ease);
}
.nav-toggle__corner--tl { top: 0; left: 0;  border-width: 1px 0 0 1px; }
.nav-toggle__corner--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.nav-toggle__corner--bl { bottom: 0; left: 0;  border-width: 0 0 1px 1px; }
.nav-toggle__corner--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.nav-toggle span {
	display: block; width: 26px; height: 2px; margin: 4px 0;
	background: var(--white);
	transition: background var(--hover-speed) var(--ease), width var(--hover-speed) var(--ease);
}
.nav-toggle:hover .nav-toggle__corner { opacity: 1; }
/* Además, cada esquina se acerca ~2px al centro. */
.nav-toggle:hover .nav-toggle__corner--tl { transform: translate(4px, 4px); }
.nav-toggle:hover .nav-toggle__corner--tr { transform: translate(-4px, 4px); }
.nav-toggle:hover .nav-toggle__corner--bl { transform: translate(4px, -4px); }
.nav-toggle:hover .nav-toggle__corner--br { transform: translate(-4px, -4px); }

/* Entrada lenta de logo y botón de menú: inician desenfocados y se aclaran. */
.site-brand,
.nav-toggle {
	animation: fadeInBlur 1.4s var(--ease) both;
}
.nav-toggle { animation-delay: .12s; }
@keyframes fadeInBlur {
	from { opacity: 0; filter: blur(12px); }
	to   { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
	.site-brand, .nav-toggle, .hero__kicker, .hero__text { animation: none; }
}

/* Overlay tras el panel: totalmente transparente y solo captura el clic para cerrar
   (no oscurece ni bloquea el scroll; la página se desplaza detrás del panel fijo). */
.drawer-overlay {
	position: fixed; inset: 0; z-index: 120;
	background: transparent;
	visibility: hidden;
	transition: visibility .4s var(--ease);
}
.drawer-open .drawer-overlay { visibility: visible; }

/* Panel lateral */
.site-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 130;
	width: min(420px, 86vw);
	background: #fafafa;
	transform: translateX(100%);
	transition: transform .45s var(--ease);
	display: flex;
}
.drawer-open .site-drawer { transform: translateX(0); }
.site-drawer__inner {
	display: flex; flex-direction: column; width: 100%;
	align-items: flex-start; text-align: left;
	padding: clamp(2rem, 5vh, 3.4rem) clamp(2rem, 5vw, 3.4rem);
}
.drawer-close {
	align-self: flex-start;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; margin: 0 0 0 -6px; padding: 0;
	background: none; border: 0; cursor: pointer; color: var(--ink);
	transform-origin: center;
	transition: transform var(--hover-speed) var(--ease), color var(--hover-speed) var(--ease);
}
.drawer-close svg { width: 26px; height: 26px; }
.drawer-close:hover { color: var(--gold); transform: rotate(90deg); }
.drawer-brand { display: inline-block; margin: clamp(2rem, 6vh, 3.4rem) 0 0; }
.drawer-brand img { height: 23px; width: auto; opacity: 0.8; }

/* Grupo superior anclado arriba (X → logo → nav → copyright → redes), con espacio vacío debajo. */
.drawer-nav { display: flex; flex-direction: column; align-items: flex-start; margin: clamp(2rem, 6vh, 3.4rem) 0 0; }
.drawer-nav__list { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.drawer-nav__list a {
	display: inline-block; position: relative;
	font-family: var(--font-alt);
	font-size: 14px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
	color: var(--ink);
	padding: .3rem 0;
}
/* Hover: línea corta que crece al lado IZQUIERDO del enlace (como la referencia). */
.drawer-nav__list a::after {
	content: ""; position: absolute; right: 100%; top: 50%;
	transform: translateY(-50%);
	width: 0; height: 1px; margin-right: .6rem;
	background: var(--gold);
	transition: width 1s var(--ease);
}
.drawer-nav__list a:hover,
.drawer-nav__list .current-menu-item > a { color: var(--gold); }
.drawer-nav__list a:hover::after,
.drawer-nav__list .current-menu-item > a::after { width: 24px; }

.drawer-foot { margin: clamp(2rem, 5vh, 3rem) 0 0; }
.drawer-copy { font-size: .82rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.1rem; }
.drawer-social { display: flex; justify-content: flex-start; gap: .55rem; }
.drawer-social a {
	width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); color: var(--ink);
	transition: all var(--hover-speed) var(--ease);
}
.drawer-social a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.drawer-social svg { width: 17px; height: 17px; }

/* Nota: NO se bloquea el scroll con el panel abierto; el menú (fixed) queda fijo
   y la página se desplaza detrás. */

/* =========================================================
   HERO (slider a pantalla completa)
   ========================================================= */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	color: var(--white);
	overflow: hidden;
	background: #1e1f21;
}
.hero__video {
	position: absolute; inset: 0; z-index: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}

/* Degradado para legibilidad del texto */
.hero::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(20,20,22,.12) 0%, rgba(20,20,22,.2) 45%, rgba(20,20,22,.82) 100%);
}
/* Malla de encuadre de cámara sobre el video (líneas a 1/6, 1/2, 5/6). */
.hero__grid {
	position: absolute; inset: 0; z-index: 2; pointer-events: none;
	--gl: rgba(255,255,255,.18);
	background-image:
		linear-gradient(var(--gl) 0 0),
		linear-gradient(var(--gl) 0 0),
		linear-gradient(var(--gl) 0 0),
		linear-gradient(var(--gl) 0 0),
		linear-gradient(var(--gl) 0 0),
		linear-gradient(var(--gl) 0 0);
	background-repeat: no-repeat;
	background-size: 1px 100%, 1px 100%, 1px 100%, 100% 1px, 100% 1px, 100% 1px;
	background-position: 16.666% 0, 50% 0, 83.333% 0, 0 16.666%, 0 50%, 0 83.333%;
}
/* Esquinas del encuadre: en las 4 intersecciones de las primeras líneas (1/6 y 5/6). */
.hero__grid-corner {
	position: absolute; width: 16px; height: 16px;
	border-color: rgba(255,255,255,.55); border-style: solid;
}
.hero__grid-corner--tl { left: 16.666%; top: 16.666%; border-width: 1px 0 0 1px; }
.hero__grid-corner--tr { right: 16.666%; top: 16.666%; border-width: 1px 1px 0 0; }
.hero__grid-corner--bl { left: 16.666%; bottom: 16.666%; border-width: 0 0 1px 1px; }
.hero__grid-corner--br { right: 16.666%; bottom: 16.666%; border-width: 0 1px 1px 0; }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(3rem, 8vh, 6rem); }
.hero__content { max-width: 820px; margin-inline: auto; text-align: center; }
/* Título del hero: centrado, sin mayúsculas y grande (~88px). */
.hero__title {
	font-size: clamp(2.6rem, 8vw, 88px);
	font-weight: 300; letter-spacing: 0; line-height: 1.1;
	margin-bottom: 1.2rem;
	color: #fff; /* sobre el video, siempre blanco */
}
/* Animación de entrada letra por letra (cada .char lleva su animation-delay inline) */
.hero__word { display: inline-block; }
.hero__title .char {
	display: inline-block;
	opacity: 0;
	transform: translateY(.5em);
	filter: blur(8px);
	animation: heroCharIn .7s var(--ease) forwards;
}
@keyframes heroCharIn {
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
	.hero__title .char { opacity: 1; transform: none; filter: none; animation: none; }
}
/* Mismo efecto letra por letra para los títulos de sección (h2), al entrar en viewport. */
.section-header__title .char-word { display: inline-block; }
.section-header__title .char { display: inline-block; opacity: 0; transform: translateY(.5em); filter: blur(8px); }
.section-header__title.is-visible .char { animation: heroCharIn .7s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) {
	.section-header__title .char { opacity: 1; transform: none; filter: none; animation: none; }
}
/* Párrafo bajo el título (fuente de párrafo del sitio, 20px, blanco). */
.hero__text {
	color: #fff;
	font-size: 20px;
	max-width: 58ch; margin: 0 auto;
	animation: fadeInBlur 1.4s var(--ease) both;
	animation-delay: 1.5s; /* entra al final, tras la cascada del título */
}
/* Primera línea de la bajada: Rubik como los enlaces (mayúsculas, 14px, ls 2px, light), pero NO es enlace. */
.hero__kicker {
	font-family: var(--font-alt);
	font-size: 16px; font-weight: 300; letter-spacing: 2px; text-transform: uppercase;
	color: #fff;
	line-height: 1.7; max-width: 60ch;
	margin: 0 auto 1.1rem;
	animation: fadeInBlur 1.4s var(--ease) both;
	animation-delay: .1s;
}

/* Indicador de scroll */
.hero__scroll { position: absolute; left: 50%; bottom: 1.6rem; z-index: 3; transform: translateX(-50%); }
.hero__scroll-line {
	display: block; width: 1px; height: 46px;
	background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.9));
	animation: heroScroll 2.2s var(--ease) infinite;
}
@keyframes heroScroll {
	0%   { transform: scaleY(.15); transform-origin: top; }
	45%  { transform: scaleY(1);   transform-origin: top; }
	50%  { transform: scaleY(1);   transform-origin: bottom; }
	100% { transform: scaleY(.15); transform-origin: bottom; }
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.services__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	margin-top: 3.5rem;
}
.service-card {
	position: relative;
	background: #2b2b2b;
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	padding: 2.4rem 2rem;
	transition: transform var(--hover-speed) var(--ease), border-color var(--hover-speed) var(--ease);
	overflow: hidden;
}
.service-card::before {
	content: "";
	position: absolute; left: 0; top: 0;
	width: 100%; height: 3px;
	background: var(--gold);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--hover-speed) var(--ease);
}
.service-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255,255,255,.22);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
	width: 46px; height: 46px;
	color: var(--gold);
	margin-bottom: 1.4rem;
}
.service-card__icon svg { width: 100%; height: 100%; }
.service-card h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.service-card p { color: rgba(255,255,255,.6); font-size: .98rem; margin-bottom: 0; }
.service-card__tag {
	display: inline-block; margin-top: 1.1rem;
	font-size: .78rem; font-weight: 500; letter-spacing: .04em;
	color: var(--gold);
}

/* =========================================================
   MOMENTOS DE LA BODA (slider horizontal, info bajo la foto)
   Fondo radial oscuro: #1e1f21 al centro → #000 a los bordes.
   ========================================================= */
.momentos { background: transparent; } /* el fondo lo pone el body (gradiente radial) */

/* Encabezado ESTÁNDAR de sección: <header> alineado a la izquierda con línea inferior.
   (Convención: así deben ser todos los encabezados de sección.) */
.section-header {
	display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.5rem);
	border-bottom: 1px solid rgba(0,0,0,.12);
	padding-bottom: clamp(1rem, 2.5vw, 1.8rem);
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-header__title {
	font-family: var(--font-display);
	font-weight: 300; line-height: 1; margin: 0; /* tamaño: h2 global */
}
/* Texto de introducción al lado del título (mismo patrón para todos los encabezados). */
.section-header__intro { max-width: 32ch; margin: 0 0 .4rem; }
@media (max-width: 640px) { .section-header__intro { margin-bottom: 0; } }

/* Track del slider (scroll-snap horizontal, scrollbar oculta) */
.momentos-slider {
	display: flex;
	gap: clamp(1.2rem, 2.5vw, 2rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .3rem;
	cursor: grab;
}
.momentos-slider::-webkit-scrollbar { display: none; }
.momentos-slider.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}
.momento-card {
	flex: 0 0 auto;
	width: clamp(260px, calc((100% - 4rem) / 2.5), 520px); /* ~2.5 columnas: se asoma la 3ª */
	scroll-snap-align: start;
	position: relative; /* la etiqueta se posiciona sobre la imagen */
}
.momento-card__media { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.momento-card__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.4s var(--ease);
	-webkit-user-drag: none; user-select: none;
}
.momento-card:hover .momento-card__img { transform: scale(1.06); }

/* Info bajo la foto: número a la izq, título/enlace a la der. */
/* Etiqueta blanca sobre la esquina inferior derecha, cortando la imagen. */
.momento-card__caption {
	position: absolute; right: 0; bottom: clamp(1.2rem, 6%, 2.4rem); z-index: 2;
	max-width: 80%;
	/* Mismo fondo que el sitio, fijo al viewport: la caja "revela" el fondo de la página. */
	background-color: #eef0f2;
	background-image: radial-gradient(circle at 50% 50%, #ffffff 0%, #f4f1eb 100%);
	background-attachment: fixed;
	padding: clamp(1rem, 2vw, 1.5rem) clamp(1.2rem, 2.5vw, 2rem);
	display: flex; flex-direction: column; align-items: flex-end;
	text-align: right;
}
.momento-card__num {
	font-family: var(--font-alt);
	font-size: 13px; font-weight: 300; letter-spacing: 2px; color: var(--gold); /* acento secundario */
	margin-bottom: .3rem; /* encima del título */
}
/* .momento-card__title usa el estilo global de h3 (ver regla h3). */
.momento-card__link { margin-top: .5rem; } /* base visual: .link-arrow */

/* Controles: barra de progreso + flechas */
.momentos__controls {
	display: flex; align-items: center; justify-content: space-between; gap: 2rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}
.momentos__progress { position: relative; height: 2px; width: min(220px, 45%); background: rgba(0,0,0,.14); }
.momentos__progress-thumb {
	position: absolute; left: 0; top: 0; height: 100%; width: 30%;
	background: var(--gold); /* acento secundario */
	transition: left .25s var(--ease), width .25s var(--ease);
}
.momentos__nav { display: flex; gap: .6rem; }
.momentos__arrow {
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 1px solid rgba(0,0,0,.18); color: var(--text); cursor: pointer;
	transition: background var(--hover-speed) var(--ease), color var(--hover-speed) var(--ease), border-color var(--hover-speed) var(--ease);
}
.momentos__arrow svg { width: 22px; height: 22px; }
.momentos__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.momentos__arrow:disabled { opacity: .3; cursor: default; }
.momentos__arrow:disabled:hover { background: none; border-color: rgba(0,0,0,.18); color: var(--text); }

@media (max-width: 800px) { .momento-card { width: clamp(220px, calc((100% - 2rem) / 2), 360px); } }
@media (max-width: 520px) { .momento-card { width: 80%; } }

/* =========================================================
   PAQUETES (showcase editorial: galería + texto + imagen grande)
   ========================================================= */
.paquete {
	display: grid;
	grid-template-columns: 0.85fr 1fr 1.15fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}
/* Item invertido (imagen grande a la izquierda, galería a la derecha). */
.paquete--reverse { grid-template-columns: 1.15fr 1fr 0.85fr; }
.paquete + .paquete { margin-top: clamp(3rem, 7vw, 6rem); }
.paquete__gallery { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 700px) { .paquete__gallery { display: none; } }
.paquete__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.paquete__gallery .paquete__img { aspect-ratio: 4 / 3; }
.paquete__feature { overflow: hidden; } /* contiene el zoom del reveal-img */
.paquete__feature .paquete__img { aspect-ratio: 4 / 5; }
.paquete__content { padding: 0 clamp(.5rem, 2vw, 1.5rem); }
.paquete__name { margin: 0 0 1.1rem; }
.paquete__name-prefix {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 300; line-height: 1.1;
	color: var(--ink);
}
.paquete__name-main {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300; line-height: 1; /* mayor que antes, menor que un H2 */
	color: var(--ink);
}
.paquete__num {
	font-family: var(--font-alt);
	font-size: .7em; font-weight: 400; letter-spacing: 1px; color: var(--gold);
	margin-right: .3em;
}
.paquete__rule { display: block; width: 64px; height: 1px; background: rgba(0,0,0,.3); margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.paquete__content p { color: var(--text-muted); }
/* Resumen de lo incluido (solo etiquetas): checklist compacta con guion dorado. */
.paquete__specs { list-style: none; margin: 1.6rem 0; padding: 0; }
.paquete__spec {
	position: relative;
	padding: .2rem 0;
	font-family: var(--font-alt);
	font-size: 18px; font-weight: 300; color: var(--text-muted); /* mismo estilo que los párrafos */
}
.paquete__spec::before { /* viñeta cuadrada dorada, detrás del texto */
	content: ""; position: absolute; left: -5px; top: 56%;
	width: 10px; height: 10px; background: #a98a5b30;
	transform: translateY(-50%); z-index: -1;
}
.paquete__cta { margin-top: 1.6rem; }
.paquete__cta-label {
	display: block;
	font-family: var(--font-alt);
	font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
	margin-bottom: .9rem;
}

/* =========================================================
   Enlace estándar del sitio (.link-arrow) — NO aplica al menú.
   Etiqueta + flecha + subrayado (border-bottom) que se anima en hover.
   ========================================================= */
.link-arrow {
	position: relative;
	display: inline-flex; align-items: center; gap: .55rem;
	padding-bottom: 6px;
	font-family: var(--font-alt);
	font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
	transition: color var(--hover-speed) var(--ease);
}
/* Línea base (siempre visible). */
.link-arrow::before {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px; background: rgba(0,0,0,.28);
}
/* Línea dorada que se anima (barre desde la izquierda) en hover. */
.link-arrow::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px; background: var(--gold);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--hover-speed) var(--ease);
}
.link-arrow:hover { color: var(--gold); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow__icon { display: inline-flex; transition: transform var(--hover-speed) var(--ease); }
.link-arrow__icon svg { display: block; width: 16px; height: 16px; }
.link-arrow:hover .link-arrow__icon { transform: translateX(6px); }

/* Móvil/tablet: todas las colecciones se apilan IGUAL (misma grilla), con divisor entre ellas. */
@media (max-width: 900px) {
	.paquete, .paquete--reverse {
		display: flex; flex-direction: column;
		gap: clamp(1.2rem, 3vw, 2rem);
	}
	.paquete__feature { order: 1; }
	.paquete__content { order: 2; }
	.paquete__gallery { order: 3; }
	.paquete__feature .paquete__img { aspect-ratio: 16 / 10; }
	.paquete + .paquete {
		margin-top: clamp(2.5rem, 8vw, 4rem);
		padding-top: clamp(2.5rem, 8vw, 4rem);
		border-top: 1px solid rgba(0,0,0,.15); /* divisor entre colecciones */
	}
}

/* =========================================================
   PAQUETES — tiers por horas + tabla comparativa
   ========================================================= */
.paquetes__intro { max-width: 60ch; margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--text-muted); }
.planes {
	display: flex;
	gap: clamp(1.2rem, 2.5vw, 2rem);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
.planes::-webkit-scrollbar { display: none; }
.planes.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
/* Cada card crece para llenar cuando cabe y, cuando no cabe, aparece scroll horizontal. */
.plan { flex: 1 0 250px; min-width: 0; display: flex; flex-direction: column; }
.plan__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; margin-bottom: 1.4rem; }
.plan__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 1.2s var(--ease); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.plan:hover .plan__media img { transform: scale(1.06); }
/* Caja de horas sobre la imagen, estilo .momento-card__caption (a la izquierda, label arriba). */
.plan__head {
	position: absolute; right: 0; bottom: clamp(1rem, 5%, 1.8rem); z-index: 2;
	max-width: 85%;
	background-color: #eef0f2;
	background-image: radial-gradient(circle at 50% 50%, #ffffff 0%, #f4f1eb 100%);
	background-attachment: fixed;
	padding: clamp(.7rem, 1.5vw, 1.1rem) clamp(1rem, 2vw, 1.4rem);
	display: flex; flex-direction: column-reverse; align-items: flex-start; text-align: left;
}
.plan__hours {
	font-family: var(--font-display); font-weight: 300; line-height: .85;
	font-size: 55px; color: var(--ink);
}
.plan__hours-label {
	font-family: var(--font-alt); font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase;
	color: var(--text-muted); max-width: 9ch; line-height: 1.3;
}
/* Horas en un círculo blanco con borde negro, a la derecha del nombre, pisando la foto derecha. */
.paquete__head-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: 1.2rem; }
.paquete__head-row .paquete__name { margin: 0; }
.paquete__content { position: relative; z-index: 2; } /* el círculo va por encima de la foto derecha */
.paquete__hours {
	order: 2; flex: 0 0 auto;
	width: clamp(90px, 8vw, 116px); aspect-ratio: 1; border-radius: 50%;
	background: #fff; border: 2px solid var(--ink); color: var(--ink);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	margin-right: -5rem; /* pisa ligeramente la foto de la derecha (ajustable) */
	position: relative; z-index: 3;
}
.paquete__hours .plan__hours { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--ink); line-height: 1; }
.paquete__hours .plan__hours-label { font-size: 8px; letter-spacing: 1px; color: rgba(0,0,0,.55); max-width: 8ch; line-height: 1.2; margin-top: 3px; }
@media (max-width: 900px) {
	.paquete__hours { margin-right: 0; } /* apilado: no hay foto al costado */
}
.plan__name {
	color: var(--gold); margin: 0 0 1.1rem;
}
.plan__name-prefix { color: var(--ink); }
/* Reemplazo del listado: etiqueta (estilo plan__hours-label) + párrafo con negritas. */
.plan__pitch-label { display: block; max-width: none; margin-bottom: .7rem; }
.plan__pitch { margin: 0 0 1.4rem; }
.plan__pitch strong { font-weight: 300; border-bottom: 1px solid #41323226; }
/* CTA "Solicitar info" (sin wrapper): al fondo de la card. */
.plan > .link-arrow { margin-top: auto; align-self: flex-start; }
.plan__specs { margin: 0 0 1.4rem; }
.plan__specs .paquete__spec { font-size: 15px; }
.plan__cta { margin-top: auto; }

/* Botón + tabla comparativa */
.paquetes__compare { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.btn-compare {
	position: relative;
	display: inline-flex; align-items: center; gap: .6rem;
	background: transparent; color: var(--ink);
	border: 1px solid var(--ink);
	padding: .9rem 1.6rem;
	font-family: var(--font-alt); font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
	cursor: pointer;
	transition: background var(--hover-speed) var(--ease), color var(--hover-speed) var(--ease), border-color var(--hover-speed) var(--ease);
}
.btn-compare:hover { border-color: transparent; }
/* Chevron de desplegar: rota al abrir la tabla. */
.btn-compare__chevron { transition: transform var(--hover-speed) var(--ease); }
.btn-compare[aria-expanded="true"] .btn-compare__chevron { transform: rotate(180deg); }
/* Mismo hover que el menú: esquinas de visor que se encogen y se acercan al centro. */
.btn-compare__corner {
	position: absolute;
	width: 8px; height: 8px;
	border-color: var(--ink);
	border-style: solid;
	pointer-events: none;
	opacity: 0;
	transition: transform var(--hover-speed) var(--ease), opacity var(--hover-speed) var(--ease);
}
.btn-compare__corner--tl { top: 0; left: 0;  border-width: 1px 0 0 1px; }
.btn-compare__corner--tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.btn-compare__corner--bl { bottom: 0; left: 0;  border-width: 0 0 1px 1px; }
.btn-compare__corner--br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.btn-compare:hover .btn-compare__corner { opacity: 1; }
.btn-compare:hover .btn-compare__corner--tl { transform: translate(4px, 4px); }
.btn-compare:hover .btn-compare__corner--tr { transform: translate(-4px, 4px); }
.btn-compare:hover .btn-compare__corner--bl { transform: translate(4px, -4px); }
.btn-compare:hover .btn-compare__corner--br { transform: translate(-4px, -4px); }
.compare {
	width: 100%; max-width: 950px;
	margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
	padding: 20px;
	background: var(--white);
}
.compare[hidden] { display: none; }
/* Pie de tabla: botón "Cotizar" por columna. */
.compare__cta-row td { border-bottom: 0; padding-top: 1.4rem; text-align: left; }
.compare__cta-row .link-arrow { font-size: 12px; }
.compare__scroll { overflow-x: auto; }
.compare__table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare__table th, .compare__table td {
	text-align: left; padding: .85rem 1rem; border-bottom: 1px solid rgba(0,0,0,.12);
	font-family: var(--font-alt); font-weight: 300; font-size: 15px; color: rgba(0,0,0,.72);
}
.compare__table thead th {
	font-weight: 500; letter-spacing: 1px; text-transform: uppercase; font-size: 12px;
	color: var(--ink); border-bottom: 2px solid var(--ink);
}
.compare__table tbody th { font-weight: 500; color: var(--ink); line-height: 1em; }
.compare__table td.is-check { color: var(--gold); font-size: 18px; }
.compare__table tbody tr:hover td, .compare__table tbody tr:hover th { background: rgba(0,0,0,.03); }


/* =========================================================
   BODAS CIVILES  (un solo article editorial con 2 opciones)
   ========================================================= */
.civil-options { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); margin-top: clamp(1.4rem, 3vw, 2rem); }
.civil-opt { padding-top: 1.1rem; }
.civil-opt__title { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 300; }
.civil-opt__num { font-family: var(--font-alt); font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.civil-opt__main { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.1; }
.civil-opt__desc { margin: 0 0 .8rem; }
.civil-opt .paquete__specs { margin: .8rem 0 1rem; }

/* =========================================================
   SERVICIOS ADICIONALES (EXTRAS) — sub-bloque dentro de Paquetes
   ========================================================= */
.paquetes__extras {
	margin-top: clamp(3.5rem, 7vw, 6rem);
	display: flex; align-items: stretch; gap: clamp(1rem, 2.5vw, 2rem);
	background: var(--band);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* Columna izquierda: "Adicionales" vertical sobre la banda. */
.extras__label {
	flex: 0 0 auto; margin: 0 0 0 -56px;
	display: flex; align-items: center; justify-content: center;
	padding: 0;
}
.extras__label-text {
	writing-mode: vertical-rl; transform: rotate(180deg);
	font-family: var(--font-display); font-weight: 300;
	font-size: 30px; letter-spacing: .5px;
	color: var(--ink);
}
/* Mobile: "Adicionales" horizontal, arriba de las cards. */
@media (max-width: 700px) {
	.paquetes__extras {
		flex-direction: column;
		position: relative;
		margin-left: -20px; margin-right: -20px;
	}
	.extras__label { margin: 0 0 1rem; justify-content: flex-start; }
	.extras__label-text { writing-mode: horizontal-tb; transform: none; }
}
.extras__track { position: relative; flex: 1 1 auto; min-width: 0; }
.extras__heading { margin: 0 0 .4rem; } /* h3, sin la línea de section-header */
.extras__intro { max-width: 60ch; margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--text-muted); }
.extras__grid {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}
.extras__grid::-webkit-scrollbar { display: none; }
.extras__grid.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
/* Cada card crece para llenar cuando cabe y, cuando no cabe, aparece scroll horizontal. */
.extra {
	flex: 1 0 250px; min-width: 0;
	background: #fff;
	padding: clamp(1.4rem, 2.2vw, 2rem);
}
/* Peek: en cuanto hay scroll, siempre se asoma parte de la siguiente card.
   Anchos fraccionarios (nunca dividen 100% exacto) => siempre queda un pedazo visible. */
@media (max-width: 1100px) {
	.plan, .extra { flex: 0 0 42%; }
}
@media (max-width: 640px) {
	.plan, .extra { flex: 0 0 82%; }
}
.extra__num { display: block; font-family: var(--font-alt); font-size: 13px; font-weight: 300; letter-spacing: 2px; color: var(--gold); margin-bottom: .5rem; }
.extra__title {
	font-family: var(--font-display); font-weight: 300;
	font-size: clamp(1.6rem, 4.5vw, 1.8rem); line-height: 1.15; margin: 0 0 .5rem;
}
.extra__text { color: var(--text-muted); margin: 0; }

/* Diferenciadores de entrega */
.extras__delivery { border-top: 1px solid rgba(0,0,0,.16); padding-top: clamp(1.5rem, 3vw, 2.2rem); }
.extras__delivery-title {
	font-family: var(--font-alt);
	font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
	margin: 0 0 1.2rem;
}
.extras__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; }
.extras__perks li {
	position: relative; padding-left: 1.3rem;
	font-family: var(--font-alt); font-weight: 300; font-size: 18px; color: rgba(0,0,0,.72);
}
.extras__perks li::before {
	content: ""; position: absolute; left: 0; top: .8em;
	width: 6px; height: 6px; background: var(--gold); transform: translateY(-50%);
}

/* =========================================================
   SOBRE NOSOTROS
   ========================================================= */
.nosotros__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.nosotros__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
}
.nosotros__subtitle {
	margin: 0 0 .8rem;
}
.nosotros__col p { color: var(--text-muted); }
.nosotros__divider { display: block; width: 90px; height: 1px; background: rgba(0,0,0,.25); margin: clamp(1.6rem, 3vw, 2.6rem) 0; }
.nosotros__col--wide { max-width: 62ch; }

/* Media: etiqueta vertical + dos imágenes escalonadas */
.nosotros__media { display: flex; gap: clamp(1rem, 2vw, 1.8rem); align-items: flex-start; }
.nosotros__label {
	writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
	font-family: var(--font-alt); font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
	color: rgba(0,0,0,.4); margin-top: .5rem;
}
.nosotros__images { position: relative; flex: 1; }
.nosotros__img { display: block; object-fit: cover; }
.nosotros__img--1 { width: 78%; margin-left: auto; aspect-ratio: 3 / 4; }
.nosotros__img--2 { width: 66%; aspect-ratio: 4 / 3; margin-top: -40%; position: relative; z-index: 2; }

@media (max-width: 900px) {
	.nosotros__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.nosotros__cols { grid-template-columns: 1fr; }
	.nosotros__media { flex-direction: column; }
	.nosotros__label { writing-mode: horizontal-tb; transform: none; margin: 0 0 .9rem; }
	.nosotros__img--1 { width: 86%; }
	.nosotros__img--2 { width: 72%; margin-top: -16%; }
}

/* =========================================================
   CTA (banda de contacto)
   ========================================================= */
.cta-band {
	background: transparent; /* muestra el fondo del body */
	color: var(--ink);
	text-align: center;
}
.cta-band .wrapper { max-width: 900px; }
.cta-band .section-title { color: var(--ink); }
/* Contenedor de la sección CTA enmarcado con esquinas de 8px (negro de marca). */
.cta-band__frame {
	position: relative;
	padding: clamp(2rem, 5vw, 3.5rem);
}
.frame-corner { position: absolute; width: 8px; height: 8px; border: 0 solid var(--ink); pointer-events: none; }
.frame-corner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.frame-corner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.frame-corner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.frame-corner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.cta-band p { max-width: 54ch; margin-inline: auto; }
.cta-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: #2c2825; color: rgba(255,255,255,.65); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.site-footer a:hover { color: var(--gold); }
.footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__brand img {
	height: 30px; width: auto;
	/* Footer oscuro: el logo va en blanco. */
	filter: brightness(0) invert(1);
	margin-bottom: 1.2rem;
}
.footer__brand p { max-width: 34ch; font-size: .95rem; color: rgba(255,255,255,.6); }
.footer__col h4 {
	color: var(--white);
	font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
	margin-bottom: 1.2rem;
}
.footer__col ul li { margin-bottom: .7rem; }
.footer__col a { font-size: .96rem; }
.footer__social { display: flex; gap: .9rem; margin-top: 1.4rem; }
.footer__social a {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,.2);
	transition: all var(--hover-speed) var(--ease);
}
.footer__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
	padding-block: 1.8rem;
	font-size: .85rem;
	color: rgba(255,255,255,.45);
}

/* =========================================================
   Página "Quiénes somos"
   ========================================================= */
.qs { padding-top: clamp(6rem, 12vh, 9rem); }

/* Hero */
.qs-hero { text-align: center; }
.qs-hero__inner { max-width: 600px; margin-inline: auto; }
.qs-hero__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.08; color: var(--ink); margin: .6rem 0 1.6rem; }
.qs-hero__lead { font-size: 18px; }
.qs-hero__lead p { margin: 0 0 1.1em; }
.qs-hero__lead p:last-child { margin-bottom: 0; }
.qs-hero__lead strong { font-weight: 500; color: var(--ink); }
.qs-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem; margin-top: 2.2rem; }

/* Marquee de adjetivos (scroll infinito derecha → izquierda) */
.qs-marquee { overflow: hidden; width: 100%; }
.qs-marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: qsMarquee 30s linear infinite; }
.qs-marquee__word { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 5.5vw, 4.5rem); color: var(--ink); line-height: 1; }
.qs-marquee__i { font-style: italic; }
.qs-marquee__sep { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 5.5vw, 4.5rem); color: var(--gold); margin: 0 clamp(1rem, 2.5vw, 2rem); line-height: 1; }
@keyframes qsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .qs-marquee__track { animation: none; } }

/* Historia */
.qs-historia__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.qs-historia__media { overflow: hidden; }
.qs-historia__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; }
.qs-historia__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.12; color: var(--ink); margin: .4rem 0 1.2rem; }

/* Cita */
.qs-quote { text-align: center; }
/* Divisores arriba y abajo de la cita. */
.qs-quote .wrapper { border-top: 1px solid rgba(65,50,50,.18); border-bottom: 1px solid rgba(65,50,50,.18); padding-block: clamp(3rem, 7vw, 5rem); }
.qs-quote__text { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.25; color: var(--ink); max-width: 28ch; margin: 0 auto; }
.qs-quote__text::before { content: "“"; }
.qs-quote__text::after { content: "”"; }

/* Header dividido: título izq, texto der (estilo editorial) */
.qs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.qs-split__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; color: var(--ink); margin: 0; }
.qs-split__text { font-size: 18px; margin: 0; }
/* Encabezado de sección centrado (título arriba, intro abajo). */
.qs-section-head { text-align: center; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.qs-section-head .qs-split__title { margin: 0 0 1rem; }
.qs-section-head .qs-split__text { max-width: 55ch; margin-inline: auto; }

/* Filas alternadas: imagen + texto (zig-zag) */
.qs-rows { display: flex; flex-direction: column; gap: clamp(3rem, 8vw, 6.5rem); }
.qs-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.qs-row__media { overflow: hidden; }
.qs-row__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.qs-row--reverse .qs-row__media { order: 2; }
.qs-row__num { display: block; font-family: var(--font-alt); font-size: 13px; letter-spacing: 2px; color: var(--gold); margin-bottom: .8rem; }
.qs-row__title { margin: 0 0 .8rem; }
/* Anchos acotados en Quiénes somos. */
.qs-pilares .qs-row { max-width: 1000px; margin-inline: auto; }
@media (max-width: 800px) {
	.qs-split, .qs-row { grid-template-columns: 1fr; gap: clamp(1.2rem, 4vw, 2rem); }
	.qs-section-head { margin-bottom: 2rem; }
	.qs-row--reverse .qs-row__media { order: 0; }
}

/* Servicios (banda + label vertical, reutiliza .paquetes__extras) */
.qs-servicios__grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(.6rem, 1.5vw, 1rem); }
.qs-serv-card { background: var(--white); padding: clamp(1rem, 2vw, 1.4rem); font-family: var(--font-display); font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink); line-height: 1.2; }

/* Disciplinas (Foto / Cine / Películas) */
.qs-disciplinas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
.qs-disc__num { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 4rem); color: rgba(65,50,50,.25); line-height: 1; margin-bottom: .8rem; }
.qs-disc__title { margin: 0 0 .8rem; }
.qs-disc__text { margin: 0; }
.qs-disc__text strong { font-weight: 300; border-bottom: 1px solid #41323226; }

/* Banner del hero (full-width) */
.qs-hero__banner { margin-top: clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.qs-hero__banner img { width: 100%; height: auto; display: block; }

/* Fotos de disciplinas */
.qs-disc__media { overflow: hidden; margin-bottom: 1.4rem; }
.qs-disc__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; }
.qs-disciplinas__grid .qs-disc:nth-child(1) .qs-disc__media img { height: 350px; aspect-ratio: auto; }
.qs-disciplinas__grid .qs-disc:nth-child(2) .qs-disc__media img { height: 450px; aspect-ratio: auto; }
.qs-disciplinas__grid .qs-disc:nth-child(3) .qs-disc__media img { height: 550px; aspect-ratio: auto; }

/* Cierre + Servicios + Disciplinas (una sola sección) */
.qs-closing-sec .wrapper + .wrapper { margin-top: clamp(3rem, 7vw, 5.5rem); }
.qs-closing { text-align: center; max-width: 64ch; margin-inline: auto; }
.qs-closing__lead { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.2; color: var(--ink); margin: 0 0 1.2rem; }

/* Banner antes del CTA */
.qs-banner__img { width: 100%; height: auto; display: block; }

/* CTA */
.qs-cta__social { margin: 1.6rem 0 0; font-family: var(--font-alt); font-size: 13px; letter-spacing: 1px; color: var(--muted); }

@media (max-width: 860px) {
	.qs-historia__grid { grid-template-columns: 1fr; }
	.qs-cards, .qs-enfoque__grid, .qs-disciplinas__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Ficha de Sesión (interna)
   ========================================================= */
.sesion { padding-top: clamp(6rem, 12vh, 9rem); }
.sesion__single .wrapper > * + * { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.sesion__head { text-align: center; }
.sesion__label { display: block; font-family: var(--font-alt); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.sesion__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; max-width: 22ch; margin-inline: auto; color: var(--ink); }
.sesion__hero-img, .sesion__foto2 img { width: 100%; height: auto; display: block; }
.sesion__items { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid rgba(65,50,50,.15); border-bottom: 1px solid rgba(65,50,50,.15); padding: clamp(1.4rem, 3vw, 2rem) 0; }
.sesion__item { display: flex; flex-direction: column; gap: .35rem; }
.sesion__item-label { font-family: var(--font-alt); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.sesion__item-value { font-size: 16px; color: var(--ink); }
.sesion__body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sesion__intro { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.2; margin: 0; color: var(--ink); }
.sesion__content { color: var(--text-muted); }
/* Galería masonry: 2 columnas (desktop/tablet), 1 en mobile. */
.sesion__gallery { column-count: 2; column-gap: clamp(1rem, 2vw, 1.5rem); }
.sesion__g-img { width: 100%; height: auto; display: block; break-inside: avoid; margin-bottom: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 560px) { .sesion__gallery { column-count: 1; } }
@media (max-width: 800px) { .sesion__body-grid { grid-template-columns: 1fr; } }

/* Bloque "siguiente sesión". */
.sesion__next { margin-top: clamp(4rem, 9vw, 7rem); background: var(--band); }
.sesion__next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sesion__next-kicker { display: block; font-family: var(--font-alt); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.sesion__next-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; }
.sesion__next-title a { color: var(--ink); }
.sesion__next-title a:hover { color: var(--gold); }
.sesion__next-excerpt { margin: 0 0 1.6rem; color: var(--text-muted); max-width: 46ch; }
.sesion__next-media { display: block; overflow: hidden; }
.sesion__next-media img { width: 100%; height: clamp(280px, 34vw, 420px); object-fit: cover; object-position: center; display: block; }
@media (max-width: 800px) { .sesion__next-grid { grid-template-columns: 1fr; } }

/* =========================================================
   Animación de entrada (reveal)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Reveal de imágenes: máscara cuadrada (clip-path desde el centro) + zoom in. */
/* Máscara: oculta solo cuando el JS está activo (.has-reveal). Al entrar en vista
   espera 0.3s (animation-delay) y revela lento (1.5s). El hover no se afecta (usa su propia transición). */
.has-reveal img.reveal-img:not(.is-visible) { opacity: 0; clip-path: inset(35%); transform: scale(1.25); }
img.reveal-img.is-visible { animation: revealImg 1.5s var(--ease) 0.3s backwards; }
@keyframes revealImg {
	from { opacity: 0; clip-path: inset(35%); transform: scale(1.25); }
	to   { opacity: 1; clip-path: inset(0);   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.has-reveal img.reveal-img:not(.is-visible) { opacity: 1; clip-path: none; transform: none; }
	img.reveal-img.is-visible { animation: none; }
	html { scroll-behavior: auto; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
	.footer__top { grid-template-columns: 1fr 1fr; }
	.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
	:root { --header-h: 68px; }
}
@media (max-width: 560px) {
	.footer__top { grid-template-columns: 1fr; }
}