/**
 * C-47 — negro sobre blanco con Stage Grotesk (la letra del sitio).
 *
 * Entradas: el original cargaba GSAP desde una CDN; aquí son animaciones CSS.
 * Cada bloque lleva data-kzn-visible="medio" (noyol.js le pone .es-visible
 * cuando sube del 70 % de la pantalla) y dentro:
 *   .c4-a              entra según --c4-anim (por defecto sube) tras --retraso
 *   .kzn-linea__texto  línea de título que sube desde su recorte
 *   .kzn-sigla > span  «C-47» letra a letra
 * Con «reducir movimiento» todo se ve quieto desde el principio.
 */

.kzn-desarrollo--c47 {
	--c4-curva: cubic-bezier(.22, 1, .36, 1);
	--c4-arriba: 92px; /* aire para la cabecera fija en las secciones de pantalla completa */
	background: #fff;
	color: #111;
	font-family: var(--kzn-fuente);
}

/* ---------- Entradas ---------- */

.kzn-linea { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.kzn-linea__texto { display: block; }
.kzn-sigla { display: inline-flex; align-items: baseline; margin: 0; font-weight: 400; line-height: 1.1; letter-spacing: .02em; perspective: 1200px; }
.kzn-sigla > span { display: inline-block; transform-style: preserve-3d; }
.kzn-sigla__guion { margin: 0 .05em; }
.kzn-sigla__num { backface-visibility: hidden; }

@media (prefers-reduced-motion: no-preference) {
	.kzn-js [data-kzn-visible]:not(.es-visible) :is(.c4-a, .kzn-linea__texto, .kzn-sigla > span) { opacity: 0; }
	.es-visible .c4-a { animation: var(--c4-anim, c4-sube) .8s var(--c4-curva) var(--retraso, 0ms) backwards; }
	.es-visible .kzn-linea__texto { animation: c4-linea .9s var(--c4-curva) var(--retraso, 0ms) backwards; }
	.es-visible .kzn-sigla__letra { animation: c4-sigla-letra .5s ease-out backwards; }
	.es-visible .kzn-sigla__guion { animation: c4-sigla-guion .35s ease-out .35s backwards; }
	.es-visible .kzn-sigla__num--abajo { animation: c4-sigla-abajo .85s cubic-bezier(.34, 1.56, .64, 1) .6s backwards; }
	.es-visible .kzn-sigla__num--arriba { animation: c4-sigla-arriba .85s cubic-bezier(.34, 1.56, .64, 1) .8s backwards; }
	/* Fotos y videos que se acercan despacio al entrar. */
	.c4-zoom, .c4-lotes__video { transform: scale(1.08); transition: transform 2.4s var(--c4-curva) .1s; }
	.c4-lotes__video { transform: scale(1.04); transition-duration: 1.4s; }
	.es-visible :is(.c4-zoom, .c4-lotes__video) { transform: none; }
}

@keyframes c4-sube { from { opacity: 0; transform: translateY(22px); } }
@keyframes c4-baja { from { opacity: 0; transform: translateY(-8px); } }
@keyframes c4-linea { from { opacity: 0; transform: translateY(110%); } }
@keyframes c4-marco { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes c4-acerca { from { opacity: 0; transform: scale(1.04); } }
@keyframes c4-crece { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes c4-desliza { from { opacity: 0; transform: translateX(-24px); } }
@keyframes c4-raya { from { opacity: 0; transform: scaleX(0); } }
@keyframes c4-boton { from { opacity: 0; transform: translateY(16px) scale(.96); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } }
@keyframes c4-sigla-letra { from { opacity: 0; transform: translateX(-18px); } }
@keyframes c4-sigla-guion { from { opacity: 0; transform: scaleX(0); } }
@keyframes c4-sigla-abajo { from { opacity: 0; transform: translateY(120%) rotateX(-90deg); } }
@keyframes c4-sigla-arriba { from { opacity: 0; transform: translateY(-120%) rotateX(90deg); } }

/* ---------- Piezas comunes ---------- */

.c4-cubre { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.c4-titulo { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.c4-parrafo { max-width: 460px; color: #3a3a3a; font-size: clamp(.9375rem, 1vw, 1rem); font-weight: 300; line-height: 1.65; }

.c4-boton {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	width: fit-content;
	padding: 14px 28px;
	border-radius: 999px;
	background: #0a0a0a;
	color: #fff;
	font-size: .9375rem;
	line-height: 1;
	text-decoration: none;
	transition: transform .25s ease, background .25s ease, box-shadow .35s ease;
}
.c4-boton:hover { background: #2a2a2a; transform: translateY(-1px); }
.c4-boton:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.c4-boton svg { width: 16px; height: 16px; fill: currentColor; }
.c4-boton--sombra { padding: .85rem 1.6rem; font-weight: 500; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.c4-boton--sombra:hover { background: #1d1d1d; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }

/* ---------- Portada: video de YouTube de fondo ---------- */

.c4-portada { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #111; container-type: size; }
.c4-portada__fondo, .c4-portada__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c4-portada__fondo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 177.78cqh); /* 16:9 que siempre cubre */
	height: max(100cqh, 56.25cqw);
	border: 0;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity 1.2s ease;
}
.c4-portada__fondo.es-listo iframe { opacity: 1; }

/* ---------- Marca ---------- */

.c4-marca { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 80px 24px; text-align: center; }
.c4-marca__dentro { display: flex; flex-direction: column; align-items: center; gap: 80px; width: 100%; max-width: 900px; }
.c4-marca__nombre { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.c4-marca__sigla { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.c4-marca__subtitulo { font-size: clamp(1rem, 1.4vw, 1.125rem); font-weight: 300; line-height: 1.3; }
.c4-marca__descripcion { max-width: 780px; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.c4-marca__subtitulo.c4-a { --c4-anim: c4-sube; }
.es-visible .c4-marca__descripcion { animation-duration: .95s; }
@media (min-height: 1000px) and (min-width: 1024px) { .c4-marca__dentro { gap: 100px; } }
@media (max-width: 1024px) { .c4-marca { min-height: 90vh; padding: 72px 32px; } .c4-marca__dentro { gap: 64px; } }
@media (max-width: 768px) {
	.c4-marca { min-height: 80vh; padding: 64px 24px; }
	.c4-marca__dentro { gap: 48px; }
	.c4-marca__sigla { font-size: 1.95rem; }
	.c4-marca__descripcion { font-size: 1.375rem; line-height: 1.4; }
}
@media (max-width: 480px) {
	.c4-marca { min-height: 75vh; padding: 56px 20px; }
	.c4-marca__dentro { gap: 40px; }
	.c4-marca__sigla { font-size: 1.8rem; }
	.c4-marca__subtitulo { font-size: .9375rem; }
	.c4-marca__descripcion { font-size: 1.1875rem; line-height: 1.45; }
}

/* ---------- Dos propiedades ---------- */

.c4-lotes { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding: var(--c4-arriba) 32px 60px; }
.c4-lotes__rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 70px; align-items: center; width: 100%; max-width: 1240px; margin: 0 auto; }
.c4-lotes__mapa { position: relative; aspect-ratio: 800 / 420; overflow: hidden; border: 1px solid #5a5a5a; background: #fff; }
.c4-lotes__mapa.c4-a { --c4-anim: c4-acerca; }
.c4-lotes__video { width: 100%; height: 100%; object-fit: cover; }
.c4-lotes__texto { display: flex; flex-direction: column; gap: 26px; }
.c4-lotes__raya { display: block; width: 100%; max-width: 460px; height: 1px; margin: 4px 0; background: #d1d5db; transform-origin: left center; }
.c4-lotes__raya.c4-a { --c4-anim: c4-raya; }
.c4-lotes__lema { font-size: clamp(.9375rem, 1vw, 1rem); line-height: 1.4; }
.c4-lotes .c4-boton { margin-top: 8px; }
.c4-lotes .c4-boton.c4-a { --c4-anim: c4-boton; }
@media (max-width: 960px) {
	.c4-lotes { min-height: 0; padding: 72px 24px; }
	.c4-lotes__rejilla { grid-template-columns: 1fr; gap: 48px; }
	.c4-lotes__texto { max-width: 560px; }
	.c4-parrafo, .c4-lotes__raya { max-width: 100%; }
}
@media (max-width: 560px) {
	.c4-lotes { padding: 56px 20px; }
	.c4-lotes__rejilla { gap: 40px; }
	.c4-lotes__texto { gap: 22px; }
	.c4-lotes .c4-titulo br { display: none; } /* en el móvil el título corre seguido */
}

/* ---------- Ubicación ---------- */

.c4-ubicacion { padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 5rem); }
.c4-ubicacion__dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 1280px; margin: 0 auto; }
.c4-ubicacion__texto { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 2.5vw, 2.25rem); max-width: 460px; }
.c4-ubicacion__titulo { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
.c4-ubicacion__copia { display: flex; flex-direction: column; gap: 1rem; }
.c4-ubicacion__parrafo { color: #555; font-size: clamp(.95rem, 1vw, 1.0625rem); line-height: 1.6; }
.c4-ubicacion .c4-boton { margin-top: .5rem; }
.c4-ubicacion__marco {
	position: relative;
	justify-self: center;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 24px;
	background: #f2f1eb;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .2), 0 10px 30px -10px rgba(0, 0, 0, .08);
}
.es-visible .c4-ubicacion__marco { animation-duration: 1.1s; }
@media (max-width: 900px) {
	.c4-ubicacion__dentro { grid-template-columns: 1fr; gap: 2.5rem; }
	.c4-ubicacion__texto, .c4-ubicacion__marco { max-width: none; }
}
@media (max-width: 600px) {
	.c4-ubicacion { padding: 3.5rem 1.25rem; }
	.c4-ubicacion__titulo { font-size: clamp(1.75rem, 7vw, 2.25rem); }
	.c4-ubicacion__marco { aspect-ratio: 4 / 3.2; border-radius: 20px; }
}

/* ---------- Concepto comercial (rotador) ---------- */

.c4-concepto { display: flex; align-items: center; justify-content: center; height: 100vh; height: 100svh; min-height: 560px; padding: var(--c4-arriba) clamp(1.25rem, 5vw, 5rem) clamp(1rem, 3vh, 2.5rem); }
.c4-concepto__dentro { display: flex; flex-direction: column; justify-content: center; gap: clamp(.75rem, 2.2vh, 1.75rem); width: 100%; max-width: 1180px; height: 100%; max-height: 80vh; max-height: 80svh; }
.c4-concepto__titulo { align-self: center; max-width: 720px; text-align: center; font-size: clamp(1.05rem, 1.8vw, 1.55rem); font-weight: 500; line-height: 1.3; letter-spacing: -.005em; }
.c4-concepto__marco {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 6px;
	background: #1a1a1a;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35), 0 10px 30px -10px rgba(0, 0, 0, .12);
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}
.c4-concepto__marco.es-arrastre { cursor: grabbing; }
.es-visible .c4-concepto__marco { animation-duration: 1.1s; }
.c4-concepto__medio { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .65s ease, transform 1.2s ease; }
.c4-concepto__medio.es-activa { opacity: 1; transform: none; }
.c4-concepto__velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 28%), linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 45%); }
.c4-concepto__etiqueta { position: absolute; top: clamp(.9rem, 2vw, 1.5rem); right: clamp(1rem, 2.2vw, 1.75rem); z-index: 2; color: #fff; font-size: clamp(.8rem, 1vw, .95rem); line-height: 1.2; letter-spacing: .01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); pointer-events: none; }
.c4-concepto__textos { position: absolute; left: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2.25rem); z-index: 2; min-height: 2.4em; color: #fff; font-size: clamp(1.2rem, 2.1vw, 1.8rem); line-height: 1.15; letter-spacing: -.005em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); pointer-events: none; }
.c4-concepto__texto { position: absolute; left: 0; bottom: 0; white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
.c4-concepto__texto.es-activa { opacity: 1; transform: none; }
.c4-concepto__puntos { position: absolute; right: clamp(1rem, 2.2vw, 1.75rem); bottom: clamp(1rem, 3vw, 2.25rem); z-index: 3; display: flex; align-items: center; gap: 10px; }
.c4-concepto__punto { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .45); cursor: pointer; transition: background .25s ease, width .3s ease, border-radius .3s ease; }
.c4-concepto__punto::before { content: ""; position: absolute; inset: -10px; } /* zona táctil más grande */
.c4-concepto__punto:hover { background: rgba(255, 255, 255, .85); }
.c4-concepto__punto:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.c4-concepto__punto[aria-selected="true"] { width: 24px; border-radius: 6px; background: #fff; }
.c4-concepto__pie { display: flex; align-items: center; gap: 1.25rem; }
.c4-concepto__raya { flex: 1 1 auto; height: 1px; background: rgba(0, 0, 0, .15); transform-origin: left center; }
.c4-concepto__raya.c4-a { --c4-anim: c4-raya; }
.c4-concepto__leyenda { color: #3a3a3a; font-size: clamp(.85rem, 1vw, 1rem); letter-spacing: .005em; }
@media (max-width: 768px) {
	.c4-concepto__titulo { max-width: 560px; text-wrap: balance; }
	.c4-concepto__titulo :is(.kzn-linea, .kzn-linea__texto) { display: inline; }
}
@media (max-width: 600px) {
	.c4-concepto { padding: 84px 1rem clamp(1rem, 3vh, 1.5rem); }
	.c4-concepto__dentro { gap: 1rem; max-height: 82svh; }
	.c4-concepto__marco { border-radius: 4px; }
	.c4-concepto__titulo { max-width: 420px; font-size: clamp(.95rem, 4vw, 1.2rem); line-height: 1.35; }
	.c4-concepto__textos { left: 1rem; bottom: 1rem; font-size: clamp(1rem, 4.6vw, 1.3rem); }
	.c4-concepto__etiqueta { top: .75rem; right: .85rem; max-width: 45%; text-align: right; font-size: .68rem; line-height: 1.25; }
	.c4-concepto__puntos { right: 1rem; bottom: 1rem; }
	.c4-concepto__pie { flex-direction: column; align-items: flex-end; gap: .4rem; }
	.c4-concepto__raya { width: 100%; }
	.c4-concepto__leyenda { text-align: right; font-size: .76rem; }
}

/* ---------- Refugio (borde que se dibuja) ---------- */

.c4-refugio { display: flex; align-items: center; justify-content: center; height: 100vh; height: 100svh; min-height: 560px; padding: var(--c4-arriba) clamp(1rem, 4vw, 3.5rem) clamp(1rem, 3vw, 3rem); }
.c4-refugio__dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1rem, 2.5vw, 2.5rem); width: 100%; max-width: 1440px; height: 100%; }
.c4-refugio__tarjeta { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: 18px; background: #fff; }
/* Sin JS (o antes de medir) el borde es una línea normal. */
.c4-refugio__tarjeta:not(.tiene-borde) { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .22); }
.c4-refugio__borde { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.c4-refugio__borde path { fill: none; stroke: rgba(17, 17, 17, .22); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
	.c4-refugio__borde path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.65, 0, .35, 1); }
	.es-visible .c4-refugio__borde path { stroke-dashoffset: 0; }
}
.c4-refugio__titulo { position: relative; max-width: 440px; font-size: clamp(1.5rem, 2.3vw, 2.1rem); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
.c4-refugio__textos { position: relative; display: flex; flex-direction: column; gap: .75rem; max-width: 380px; color: #555; font-size: clamp(.82rem, .95vw, .95rem); line-height: 1.55; }
.c4-refugio__foto { position: relative; height: 100%; overflow: hidden; border-radius: 18px; background: #e9e4dc; }
.es-visible .c4-refugio__foto { animation-duration: 1.2s; }
@media (max-width: 1024px) {
	.c4-refugio__dentro { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
	.c4-refugio__titulo { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
}
@media (max-width: 768px) {
	.c4-refugio { min-height: 520px; padding: 84px clamp(.75rem, 3vw, 1.25rem) clamp(.75rem, 3vw, 1.25rem); }
	.c4-refugio__dentro { grid-template-columns: 1fr; grid-template-rows: minmax(0, 48%) minmax(0, 52%); gap: .75rem; }
	.c4-refugio__foto { order: -1; border-radius: 14px; }
	.c4-refugio__tarjeta { justify-content: flex-start; gap: .9rem; padding: 1.25rem; border-radius: 14px; }
	.c4-refugio__titulo { max-width: 100%; font-size: clamp(1.15rem, 5vw, 1.5rem); }
	.c4-refugio__titulo :is(.kzn-linea, .kzn-linea__texto) { display: inline; }
	.c4-refugio__textos { gap: .5rem; max-width: 100%; font-size: clamp(.78rem, 3vw, .88rem); line-height: 1.5; }
}
@media (max-width: 420px) {
	.c4-refugio { min-height: 480px; }
	.c4-refugio__dentro { grid-template-rows: minmax(0, 42%) minmax(0, 58%); }
	.c4-refugio__textos { font-size: .8rem; }
}

/* ---------- Amplitud, luz y atmósfera (galería) ---------- */

.c4-espacios { display: flex; align-items: center; justify-content: center; height: 100vh; height: 100svh; min-height: 560px; padding: var(--c4-arriba) clamp(1rem, 4vw, 4rem) clamp(1rem, 3vh, 2.5rem); }
.c4-espacios__dentro { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vh, 2rem); width: 100%; max-width: 1280px; height: 100%; }
.c4-espacios__cabeza { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.c4-espacios__titulo { font-size: clamp(1.5rem, 2.8vw, 2.4rem); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.c4-espacios__texto { max-width: 620px; color: #555; font-size: clamp(.82rem, 1vw, .98rem); line-height: 1.55; }
.c4-espacios__rejilla { display: grid; flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(.5rem, 1vw, 1rem); min-height: 0; margin: 0; padding: 0; list-style: none; }
.c4-espacios__rejilla li { min-width: 0; min-height: 0; }
.es-visible .c4-espacios__rejilla .c4-a { animation-duration: .6s; }
.c4-espacios__foto { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 14px; background: #f2efe9; transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.c4-espacios__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.c4-espacios__foto:hover, .c4-espacios__foto:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(17, 17, 17, .25); }
.c4-espacios__foto:hover img { transform: scale(1.06); }
.c4-espacios__foto:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 768px) {
	.c4-espacios { min-height: 540px; padding: 84px clamp(.75rem, 3vw, 1.5rem) clamp(.75rem, 2vh, 1.5rem); }
	.c4-espacios__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
	.c4-espacios__foto { border-radius: 10px; }
	.c4-espacios__titulo { font-size: clamp(1.2rem, 5.5vw, 1.6rem); }
	.c4-espacios__texto { padding: 0 .5rem; font-size: clamp(.75rem, 3.2vw, .88rem); }
}
@media (max-width: 420px) {
	.c4-espacios__dentro { gap: .9rem; }
	.c4-espacios__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Visor a pantalla completa con flechas y contador. */
.c4-visor[open] { display: flex; align-items: center; justify-content: center; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: clamp(1rem, 4vw, 3rem); border-radius: 0; background: rgba(10, 10, 10, .92); }
.c4-visor::backdrop { background: rgba(10, 10, 10, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.c4-visor .dz-visor__figura { display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: min(1400px, 94vw); margin: 0; }
.c4-visor .dz-visor__img { max-width: 100%; max-height: 82vh; max-height: 82dvh; border-radius: 10px; box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .6); }
.c4-visor .dz-visor__cerrar { top: clamp(.75rem, 2vh, 1.25rem); right: clamp(.75rem, 2vw, 1.25rem); width: 44px; height: 44px; background: rgba(255, 255, 255, .12); }

/* ---------- Ficha técnica ---------- */

.c4-ficha { display: flex; justify-content: center; padding: clamp(3rem, 8vh, 6rem) clamp(1rem, 4vw, 4rem); }
.c4-ficha__dentro { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 2.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; width: 100%; max-width: 1200px; }
/* La sigla se queda a la vista mientras se recorre la lista. */
.c4-ficha__cabeza { position: sticky; top: 110px; display: flex; flex-direction: column; gap: .35rem; padding-top: clamp(.5rem, 1vh, 1rem); }
.c4-ficha__sigla { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.c4-ficha__subtitulo { color: #444; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.3; }
.c4-ficha__lista { display: flex; flex-direction: column; gap: clamp(.45rem, .9vw, .75rem); margin: 0; padding: 0; list-style: none; }
.c4-ficha__fila {
	display: grid;
	grid-template-columns: auto 1fr minmax(140px, 28%);
	align-items: center;
	gap: clamp(.75rem, 1.4vw, 1.25rem);
	padding: clamp(.65rem, .9vw, .9rem) clamp(.75rem, 1.4vw, 1rem);
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08);
	transition: box-shadow .35s ease, transform .35s ease;
}
.c4-ficha__fila:hover { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14), 0 10px 26px -14px rgba(17, 17, 17, .18); transform: translateY(-1px); }
.es-visible .c4-ficha__fila { animation-duration: .65s; }
.c4-ficha__icono { display: inline-flex; align-items: center; justify-content: center; width: clamp(38px, 3vw, 46px); height: clamp(38px, 3vw, 46px); border-radius: 10px; background: #111; color: #fff; }
.c4-ficha__icono svg { width: 56%; height: 56%; }
.c4-ficha__dato { font-size: clamp(.85rem, 1vw, 1rem); line-height: 1.3; }
.c4-ficha__cifra { display: inline-block; font-variant-numeric: tabular-nums; }
.c4-ficha__foto { width: 100%; height: clamp(48px, 4vw, 64px); border-radius: 10px; background: #f2efe9; object-fit: cover; }
@media (max-width: 1024px) {
	.c4-ficha__dentro { grid-template-columns: minmax(180px, .8fr) minmax(0, 2.4fr); gap: 2rem; }
	.c4-ficha__fila { grid-template-columns: auto 1fr minmax(110px, 26%); }
}
@media (max-width: 768px) {
	.c4-ficha { padding: 3rem clamp(.75rem, 3vw, 1.25rem); }
	.c4-ficha__dentro { grid-template-columns: 1fr; gap: .9rem; }
	.c4-ficha__cabeza { position: static; padding-top: 0; }
	.c4-ficha__sigla { font-size: clamp(1.4rem, 6vw, 2rem); }
	.c4-ficha__subtitulo { font-size: clamp(.9rem, 3.6vw, 1.05rem); }
	.c4-ficha__lista { gap: .5rem; }
	.c4-ficha__fila { grid-template-columns: auto 1fr minmax(110px, 32%); gap: .7rem; padding: .6rem .75rem; border-radius: 10px; }
	.c4-ficha__icono { width: 32px; height: 32px; border-radius: 8px; }
	.c4-ficha__dato { font-size: .82rem; }
	.c4-ficha__foto { height: clamp(48px, 6.5vh, 64px); border-radius: 8px; }
}
@media (max-width: 420px) {
	.c4-ficha__fila { grid-template-columns: auto 1fr minmax(92px, 34%); gap: .5rem; }
	.c4-ficha__dato { font-size: .78rem; }
	.c4-ficha__foto { height: clamp(44px, 6vh, 56px); }
}

/* ---------- Cierre + cita por WhatsApp ---------- */

.c4-cierre { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: var(--c4-arriba) clamp(1rem, 4vw, 4rem) 48px; }
.c4-cierre__dentro { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vh, 3rem); width: 100%; max-width: 1200px; }
.c4-cierre__raya { display: block; height: 1px; background: rgba(17, 17, 17, .2); transform-origin: left center; }
.c4-cierre__raya.c4-a { --c4-anim: c4-raya; }
.es-visible .c4-cierre__raya { animation-duration: 1.1s; }
.c4-cierre__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.c4-cierre__texto { max-width: 520px; font-size: clamp(1.15rem, 2.2vw, 1.9rem); line-height: 1.35; letter-spacing: -.005em; }
.c4-cierre__visual { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(.75rem, 1.5vh, 1.25rem); }
.c4-cierre__marco { position: relative; width: 100%; max-height: 60vh; max-height: 60svh; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; background: #f2efe9; }
.es-visible .c4-cierre__marco { animation-duration: 1.1s; }
.c4-cierre__boton { padding: .7rem 1.2rem; border: 0; border-radius: 10px; background: #111; color: #fff; font: inherit; font-size: clamp(.82rem, .95vw, .95rem); font-weight: 500; cursor: pointer; transition: background .25s ease, transform .25s ease; }
.c4-cierre__boton:hover { background: #000; transform: translateY(-1px); }
.c4-cierre__boton:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
@media (max-width: 900px) {
	.c4-cierre__rejilla { grid-template-columns: 1fr; gap: 1.25rem; }
	.c4-cierre__texto { max-width: 100%; }
	.c4-cierre__visual { align-items: stretch; }
	.c4-cierre__boton { padding: .85rem 1rem; }
}
@media (max-width: 768px) {
	.c4-cierre { min-height: 0; padding: 84px clamp(.75rem, 3vw, 1.5rem) 48px; }
	.c4-cierre__texto { font-size: clamp(1rem, 4.4vw, 1.25rem); line-height: 1.4; }
	.c4-cierre__marco { max-height: 44svh; aspect-ratio: 4 / 3; border-radius: 14px; }
}

.c4-cita { width: min(460px, calc(100vw - 2rem)); padding: clamp(1.5rem, 3vw, 2rem); border: 0; border-radius: 18px; background: #fff; color: #111; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35); }
.c4-cita[open] { animation: c4-cita-entra .35s cubic-bezier(.2, .8, .2, 1); }
.c4-cita::backdrop { background: rgba(10, 10, 10, .55); }
@keyframes c4-cita-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
/* Sin JS no hay ventana: el formulario se muestra en la página. */
html:not(.kzn-js) .c4-cita { position: static; display: block; margin: 0 auto 48px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .1); }
html:not(.kzn-js) .c4-cita > form[method="dialog"], html:not(.kzn-js) .c4-cierre__boton { display: none; }
.c4-cita__cerrar { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .06); color: #111; cursor: pointer; transition: background .2s ease; }
.c4-cita__cerrar:hover, .c4-cita__cerrar:focus-visible { background: rgba(17, 17, 17, .12); }
.c4-cita__cerrar svg { width: 18px; height: 18px; fill: currentColor; }
.c4-cita__titulo { padding-right: 2.5rem; font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 500; line-height: 1.2; }
.c4-cita__intro { margin-top: .4rem; color: #555; font-size: .88rem; line-height: 1.45; }
.c4-cita__form { display: flex; flex-direction: column; gap: .85rem; margin-top: 1.25rem; }
.c4-cita__campo { display: flex; flex-direction: column; gap: .35rem; }
.c4-cita__campo span { color: #444; font-size: .78rem; letter-spacing: .02em; }
.c4-cita__campo input { width: 100%; padding: .7rem .85rem; border: 0; border-radius: 10px; background: #f7f5f0; color: #111; font: inherit; font-size: .95rem; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .06); transition: box-shadow .2s ease, background .2s ease; }
.c4-cita__campo input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1.5px #111; }
.c4-cita__campo input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #b3261e; }
.c4-cita__aviso { color: #b3261e; font-size: .82rem; line-height: 1.4; }
/* Verde de WhatsApp con texto oscuro (el blanco sobre este verde no se lee bien). */
.c4-cita__enviar { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .9rem 1rem; border: 0; border-radius: 10px; background: #25d366; color: #052e16; font: inherit; font-size: .95rem; font-weight: 500; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.c4-cita__enviar:hover { background: #1ebe57; transform: translateY(-1px); }
.c4-cita__enviar:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.c4-cita__enviar svg { width: 18px; height: 18px; }
.c4-cita__legal { color: #777; font-size: .72rem; line-height: 1.4; text-align: center; }
.c4-cita__listo { padding: .7rem .85rem; border-radius: 10px; background: #effaf3; color: #14532d; font-size: .82rem; line-height: 1.45; }
.c4-cita__listo a { color: inherit; font-weight: 500; }
html:has(dialog[open]) { overflow: hidden; }