/* ==========================================================================
   Portada oscura y cinematográfica.
   Las escenas fijadas (.scene) son funciones puras de --p (0…1), que home.js
   escribe a partir de la posición de scroll. Con p = 0 cada escena ya es una
   composición completa: es también el estado estático (sin JS / movimiento
   reducido).
   ========================================================================== */

.home { display: block; }

/* Encabezados comunes ------------------------------------------------------ */
.section {
	position: relative;
	padding-block: calc(var(--header-h) + var(--safe-top) + clamp(48px, 8vw, 112px)) clamp(80px, 11vw, 150px);
}
.section__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.kicker {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 16px;
	font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--text);
}
.section__title { font-size: clamp(2rem, 4.6vw, 3.5rem); text-wrap: balance; }
.section__lead { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 60ch; }
.section__more { margin-top: 28px; }
.empty { padding: clamp(24px, 4vw, 40px); max-width: 640px; }
.empty__title { font-size: 1.25rem; font-weight: 650; }
.empty p:last-child { margin-bottom: 0; }

/* Desenfoque de salto (≈120 ms): las escenas intermedias nunca se reproducen. */
.home { transition: filter 120ms linear; }
.home.is-defocus { filter: blur(8px); }

/* --------------------------------------------------------------------------
   Escenas fijadas
   -------------------------------------------------------------------------- */
.scene { --p: 0; position: relative; }
.scene__stage {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
}
.js:not(.glo-rm) .scene--entrance { height: 280vh; }
/* 1.4.0: la Tienda ya no es una escena fijada; solo Entrada usa .scene. */
.js:not(.glo-rm) .scene__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
}

/* 02 · Entrada ------------------------------------------------------------- */
.scene--entrance { background: var(--ink); }
.entrance__video, .entrance__poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.entrance__placeholder {
	position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 50% 45%, #241f20 0%, var(--ink) 68%);
}
.entrance__rings {
	position: absolute;
	left: 50%; top: 45%;
	width: min(130vmin, 1000px);
	translate: -50% -50%;
	transform: scale(calc(1 + var(--p) * 2.4));
	opacity: calc(1 - var(--p) * 0.92);
	fill: none;
}
.entrance__rings circle { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.entrance__pupil {
	position: absolute;
	left: 50%; top: 45%;
	width: 16px; height: 16px;
	translate: -50% -50%;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 28px 8px rgba(215, 14, 22, 0.5);
	transform: scale(calc(1 + var(--p) * 5));
	opacity: calc(1 - var(--p) * 0.85);
}
.entrance__label {
	position: absolute;
	left: var(--gutter);
	bottom: calc(110px + var(--safe-bottom));
	max-width: min(460px, calc(100% - var(--gutter) * 2));
	opacity: calc(1 - var(--p) * 1.7);
}
.entrance__note { margin: 14px 0; font-size: 0.9375rem; color: var(--muted); }
.entrance__progress { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--grey); }
.entrance__bar { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.14); border-radius: 2px; overflow: hidden; }
.entrance__bar i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.scene--entrance .scene__stage::after { /* funde hacia la siguiente sección */
	content: "";
	position: absolute; inset: 0;
	background: var(--ink);
	opacity: clamp(0, calc((var(--p) - 0.82) * 5.5), 1);
	pointer-events: none;
}
.scene__cue {
	position: absolute;
	left: 50%; bottom: calc(40px + var(--safe-bottom));
	translate: -50% 0;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	margin: 0;
	font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--grey);
	opacity: clamp(0, calc(1 - var(--p) * 8), 1);
}
.scene__cue i { width: 1px; height: 28px; background: linear-gradient(var(--grey), transparent); }
@media (max-width: 860px) {
	.scene__cue { display: none; }
	.entrance__label { bottom: calc(120px + var(--safe-bottom)); }
}

/* 03 · Novedades ----------------------------------------------------------- */
/* 1.4.0 · A4: menos relleno inferior (antes clamp(80px, 11vw, 150px)) y un fundido de --ink a --ink-2 en el último
   tramo, de modo que Tienda (que empieza en --ink-2) continúa sin corte. El fundido es un pseudo-elemento y no el fondo
   de la sección: entrada.css sustituye el fondo de Novedades cuando el traspaso de Entrada está activo. */
.section--novedades {
	padding-bottom: clamp(36px, 5vw, 64px);
	background:
		radial-gradient(90% 60% at 80% 0%, rgba(215, 14, 22, 0.07), transparent 60%),
		var(--ink);
}
.section--novedades::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: clamp(160px, 18vw, 280px);
	z-index: 0;
	background: linear-gradient(180deg, rgba(19, 19, 19, 0), var(--ink-2));
	pointer-events: none;
}
.section--novedades > .container { position: relative; z-index: 1; }
/* 1.10.0 · la composición de Novedades (antes .novedades*) vive ahora en novedades.css. Se conservan solo los estilos compartidos .card* (archivo y página interior). */
.card { display: flex; flex-direction: column; padding: var(--r-pad); overflow: hidden; }
.card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--r-inner);
	overflow: hidden;
	background: #171717;
}
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card__ph {
	position: absolute; inset: 0;
	background:
		radial-gradient(circle at 28% 38%, rgba(215, 14, 22, 0.32), transparent 42%),
		repeating-radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 26px),
		#171717;
}
.card__body { padding: 20px 16px 16px; position: relative; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.card__dates { font-size: 0.8125rem; color: var(--muted); }
.card__title { font-size: 1.25rem; margin: 0 0 8px; }
.card__excerpt { color: var(--muted); margin-bottom: 14px; }
.card__title { overflow-wrap: break-word; }

/* 04 · Tienda -------------------------------------------------------------- */
/* 1.4.0 · A2/A3: sección de altura natural (antes una escena fijada de 230 vh) y sin marcadores de desarrollo.
   Empieza en --ink-2 (donde termina Novedades) y termina en --ink (donde empieza Servicios): sin cortes duros.
   El relleno superior conserva la cabecera para que el salto «Tienda» aterrice con el contenido visible. */
.section--tienda {
	padding-block: calc(var(--header-h) + var(--safe-top) + clamp(20px, 3vw, 40px)) clamp(20px, 3vw, 40px);
	background:
		radial-gradient(80% 70% at 72% 35%, rgba(255, 255, 255, 0.04), transparent 65%),
		linear-gradient(180deg, var(--ink-2) 0%, var(--ink-2) 45%, var(--ink) 100%);
}
.store {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	max-width: 880px;
	padding: clamp(28px, 5vw, 64px);
}
.store__copy > :last-child { margin-bottom: 0; }
.store__cta { margin-top: clamp(20px, 3vw, 32px); }
/* Con imagen(es) (provisionales hoy; el héroe 3D después): dos columnas a todo el ancho. */
.store--media { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.store__media { min-width: 0; }
.store__stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; align-items: center; }
.asset { margin: 0; padding: var(--r-pad); }
.asset img { width: 100%; border-radius: var(--r-inner); display: block; }
@media (max-width: 860px) {
	.store .section__title { font-size: clamp(1.5rem, 6.2vw, 2rem); }
	.store--media { grid-template-columns: minmax(0, 1fr); }
	.store__stage { gap: 12px; }
}

/* 1.4.1 · Película de marcas (inc/store-film.php). La película es 16:9 y ocupa todo el ancho bajo el texto;
   el botón «Entrar a la tienda» queda siempre arriba, fuera de la película, y no depende de ella.
   La caja reserva su proporción: sin saltos de diseño al cargar. En móvil se recorta a 4:3 desde el centro
   (object-fit: cover, sin deformar): las ocho lentes están entre el 18 % y el 80 % del ancho, dentro del 12,5–87,5 % que se conserva. */
.store--film { max-width: none; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); padding: clamp(20px, 3.4vw, 44px); }
@media (min-width: 900px) {
	.store--film .store__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(24px, 4vw, 56px); align-items: end; }
	.store--film .store__copy > :not(.store__cta) { grid-column: 1; }
	.store--film .store__cta { grid-column: 2; grid-row: 1 / span 3; margin: 0; align-self: end; }
}
.store-film { margin: 0; position: relative; }
.store-film__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-inner); background: #000; border: 1px solid var(--hair); }
.store-film__video, .store-film__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; display: block; }
.store-film__still { display: none; }
@media (max-width: 860px) { .store-film__frame { aspect-ratio: 4 / 3; } }
/* Sin JavaScript o con «reducir movimiento»: imagen final (si existe) y sin descarga del vídeo. */
.no-js .store-film--has-still .store-film__video, .glo-rm .store-film--has-still .store-film__video,
.store-film[data-mode="still"] .store-film__video { display: none; }
.no-js .store-film--has-still .store-film__still, .glo-rm .store-film--has-still .store-film__still,
.store-film[data-mode="still"] .store-film__still { display: block; }
/* Pausa/reproducción (WCAG 2.2.2): la película dura algo más de 5 s y arranca sola. */
.store-film__toggle {
	position: absolute; top: 12px; right: 12px; z-index: 1; /* arriba: con el salto de navegación a la Tienda el borde inferior de la película puede quedar bajo el pliegue */
	display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(18, 18, 18, 0.72); color: var(--white);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	cursor: pointer;
}
.store-film__toggle[hidden], .no-js .store-film__toggle, .glo-rm .store-film__toggle, .store-film[data-mode] .store-film__toggle { display: none; }
.store-film__toggle:hover { background: rgba(18, 18, 18, 0.9); border-color: rgba(255, 255, 255, 0.55); }
.store-film__toggle:focus-visible { border-radius: 999px; }
.store-film__i { display: none; width: 20px; height: 20px; fill: currentColor; }
.store-film__i--play { display: block; }
.store-film[data-state="playing"] .store-film__i--play, .store-film[data-state="ended"] .store-film__i--play { display: none; }
.store-film[data-state="playing"] .store-film__i--pause, .store-film[data-state="ended"] .store-film__i--replay { display: block; }
@media (prefers-reduced-transparency: reduce) { .store-film__toggle { background: rgb(18, 18, 18); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* 05 · Servicios — «Precisión a dos escalas» (rev. 3) -------------------------
   Optiservice → Prótesis Oculares. Sin movimiento, sin blur, sin JavaScript. Superficies neutras; el azul solo
   vive dentro de .svc-opti (neblina, resplandor, filete del kicker, flecha). El contenido ocupa hasta 1328 px
   (rejilla de 12 columnas, hueco 24): a 1440 px la placa mide 652 px y el cúmulo de fotos 765 px. */
.section--servicios { background: var(--ink); padding-block: 0; }
.svc-opti, .svc-prot { --svc-gap: 24px; }
@media (max-width: 560px) { .svc-opti, .svc-prot { --r-outer: 24px; --r-pad: 7px; --r-inner: 17px; } }
.svc-wrap { width: 100%; max-width: calc(1328px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.svc-title { font-size: clamp(2rem, 3.2vw, 2.875rem); text-wrap: balance; margin: 0 0 0.45em; }
.svc-lead { color: rgba(244, 242, 240, 0.8); max-width: 46ch; margin: 0 0 28px; }
.svc-cta { margin: 0; }
.svc-book { margin: 20px 0 0; }
.svc-book a { color: var(--text); font-weight: 600; text-underline-offset: 4px; }

/* Optiservice: placa de cristal iluminada con el logotipo oficial */
.svc-opti { --opti-blue: #15228b; --opti-lit: #7080e0; }
/* 1.6.1 · «Eje óptico»: una lente de precisión (SVG en línea, sin JS, sin filtros, sin movimiento) se apoya en el borde
   derecho de la placa; el azul viene de la lente, ya no de un resplandor bajo la placa. Las proporciones de la lente y de
   los resplandores son fracciones del ancho de la placa (el escenario mide exactamente lo que la placa). */
.svc-opti {
	padding-block: calc(var(--header-h) + var(--safe-top) + clamp(40px, 5vw, 72px)) clamp(56px, 7vw, 104px);
	background: var(--ink);
}
.svc-opti__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.svc-opti__grid > .kicker { margin-bottom: 16px; }
.svc-opti__grid > .kicker, .svc-opti__grid > .svc-title, .svc-opti__grid > .svc-lead, .svc-opti__grid > .svc-cta, .svc-opti__grid > .glo-hint { position: relative; z-index: 1; } /* el texto queda por encima de la luz de la lente */
.svc-opti__stage { position: relative; isolation: isolate; }
.svc-opti__stage::before, .svc-opti__stage::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } /* resplandores tras la placa */
.svc-lens { position: absolute; display: block; height: auto; pointer-events: none; }
.svc-plate {
	padding: var(--r-pad);
	border-radius: var(--r-outer);
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.06));
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}
.svc-plate__light {
	padding: 8%; /* espacio libre del logotipo: 8 % del ancho de la placa (también arriba y abajo) */
	border-radius: var(--r-inner);
	background: linear-gradient(180deg, #f7f8fa, #edeff2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.svc-plate__light img { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.svc-opti .btn .icon { color: var(--opti-lit); }
/* Móvil y estrecho (≤ 860 px): placa, lente tumbada bajo la placa, eje hacia abajo; el kicker queda bajo la lente (el DOM sigue empezando por el h2) */
@media (max-width: 860px) {
	.svc-opti .svc-cta .btn { width: 100%; }
	.svc-opti__stage { order: -1; margin-bottom: 33.71%; }
	.svc-lens--d { display: none; }
	.svc-lens--m { left: -5.714%; top: 100%; margin-top: -12%; width: 111.43%; aspect-ratio: 390 / 160; }
	.svc-opti__stage::before { left: -6.15%; top: 0; margin-top: 23.1%; width: 112.3%; aspect-ratio: 393 / 215; background: radial-gradient(closest-side, rgba(21, 34, 139, 0.3), rgba(21, 34, 139, 0)); }
	.svc-opti__stage::after { left: -4.57%; top: 50%; width: 109.1%; aspect-ratio: 382 / 209; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)); }
	.svc-plate__light { background: radial-gradient(80% 40% at 50% 100%, rgba(21, 34, 139, 0.08), transparent 72%), linear-gradient(180deg, #f7f8fa, #edeff2); }
}
/* ≥ 861 px: placa en las columnas 1–6, texto en 8–12, lente en posición con la placa a la izquierda */
@media (min-width: 861px) {
	.svc-opti__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--svc-gap); grid-template-rows: 1fr auto auto auto auto 1fr; }
	.svc-opti__stage { grid-column: 1 / 7; grid-row: 1 / 7; align-self: center; }
	.svc-opti__grid > .kicker, .svc-opti__grid > .svc-title, .svc-opti__grid > .svc-lead, .svc-opti__grid > .svc-cta, .svc-opti__grid > .glo-hint { grid-column: 8 / -1; }
	.svc-opti__grid > .kicker { grid-row: 2; }
	.svc-opti__grid > .svc-title { grid-row: 3; }
	.svc-opti__grid > .svc-lead { grid-row: 4; }
	.svc-opti__grid > .svc-cta, .svc-opti__grid > .glo-hint { grid-row: 5; }
	.svc-lens--m { display: none; }
	.svc-lens--d { left: 77.30%; top: 50%; width: 58.28%; aspect-ratio: 380 / 420; transform: translateY(-50%); }
	.svc-opti__stage::before { left: 84.82%; top: 50%; width: 49.39%; aspect-ratio: 322 / 302; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(21, 34, 139, 0.26), rgba(21, 34, 139, 0)); }
	.svc-opti__stage::after { left: 6.75%; top: 50%; width: 86.5%; aspect-ratio: 564 / 336; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)); }
	.svc-plate__light { background: radial-gradient(34% 80% at 100% 50%, rgba(21, 34, 139, 0.08), transparent 72%), linear-gradient(180deg, #f7f8fa, #edeff2); }
}
/* Sin la lente (alto contraste forzado / impresión) la composición es la de 1.6.0 sin el resplandor azul */
@media (forced-colors: active), print { .svc-lens, .svc-opti__stage::before, .svc-opti__stage::after { display: none; } }

/* Prótesis Oculares: marcos de cristal claro */
.svc-prot {
	padding-block: clamp(40px, 4.5vw, 64px) clamp(80px, 11vw, 150px);
	background:
		radial-gradient(45% 45% at 22% 40%, rgba(255, 255, 255, 0.05), transparent 70%),
		linear-gradient(180deg, var(--ink) 0, var(--ink-2) 240px, var(--ink-2) 78%, var(--ink) 100%);
}
.svc-axis { height: 1px; background: var(--hair); position: relative; margin-bottom: clamp(56px, 6.5vw, 96px); --axis-x: 50%; }
.svc-axis::after { content: ""; position: absolute; top: -6px; left: var(--axis-x); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: var(--ink); }
@media (min-width: 861px) { .svc-axis { --axis-x: calc((100% - 11 * var(--svc-gap)) / 4 + 2.5 * var(--svc-gap)); } }
.svc-prot__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.svc-prot__copy { min-width: 0; }
/* Retrato (1.6.0): marco de cristal 4:5. Se recorta solo con object-position (--mx/--my en móvil, --fx/--fy desde 861 px);
   el archivo nunca se altera. Mismo marco en protesis.css para la cabecera de la página. */
.pro-portrait {
	position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 5;
	padding: var(--r-pad); border-radius: var(--r-outer);
	background: linear-gradient(150deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 38%, rgba(255, 255, 255, 0.04) 100%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 36px 64px -18px rgba(0, 0, 0, 0.75);
}
.pro-portrait img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: var(--r-inner); object-position: var(--mx, 50%) var(--my, 0%); }
@media (min-width: 861px) { .pro-portrait img { object-position: var(--fx, 50%) var(--fy, 0%); } }
/* Pie: cristal oscuro tintado (sin blur); #fff sobre rgba(10,10,10,.72) ≥ 8:1 aunque la foto sea blanca. */
.pro-portrait__cap { position: absolute; left: calc(var(--r-pad) + 12px); right: calc(var(--r-pad) + 12px); bottom: calc(var(--r-pad) + 12px); width: fit-content; max-width: calc(100% - 2 * var(--r-pad) - 24px); padding: 6px 12px; border-radius: 14px; background: rgba(10, 10, 10, 0.72); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.875rem; line-height: 1.3; }
/* Sin retrato: cristal con anillos de luz (solo CSS, sin descarga) */
.pro-portrait__glass {
	height: 100%; border-radius: var(--r-inner);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 65%), repeating-radial-gradient(circle, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 22px);
	-webkit-mask-image: radial-gradient(circle, #000 35%, transparent 78%);
	mask-image: radial-gradient(circle, #000 35%, transparent 78%);
}
.svc-cta--pair { display: flex; flex-wrap: wrap; gap: 12px; }

/* Móvil y estrecho (≤ 860 px): kicker → titular → retrato → texto → botones (el DOM ya pone los botones antes del retrato) */
@media (max-width: 860px) {
	.svc-prot__copy, .svc-prot__media { display: contents; }
	.svc-prot__copy > .svc-prot__kicker { order: 1; }
	.svc-prot__copy > .svc-title { order: 2; margin-bottom: 28px; }
	.svc-prot__media > .pro-portrait { order: 3; margin: 0 0 32px; max-width: 420px; align-self: center; }
	.svc-prot__copy > .svc-lead { order: 4; }
	.svc-prot__copy > .svc-cta { order: 5; }
	.svc-prot__copy > .glo-hint { order: 6; }
	.svc-prot__grid { display: flex; flex-direction: column; align-items: stretch; }
	.svc-prot .svc-cta--pair { flex-direction: column; }
	.svc-prot .svc-cta .btn { width: 100%; }
}
/* ≥ 861 px: retrato a la izquierda (columnas 1–6), texto a la derecha, centrados en vertical */
@media (min-width: 861px) {
	.svc-prot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--svc-gap); }
	.svc-prot__copy { grid-column: 7 / -1; grid-row: 1; }
	.svc-prot__media { grid-column: 1 / 7; grid-row: 1; display: flex; justify-content: center; }
	.svc-prot__media .pro-portrait { max-width: 460px; }
}
/* ≥ 1100 px: retrato en las columnas 1–7, texto en 8–12; el punto del eje queda al centro del retrato */
@media (min-width: 1100px) {
	.svc-prot__copy { grid-column: 8 / -1; }
	.svc-prot__media { grid-column: 1 / 8; }
	.svc-axis { --axis-x: calc((100% - 11 * var(--svc-gap)) * 3.5 / 12 + 3 * var(--svc-gap)); }
}

/* 06 · Sucursales — «Atlas en foco» (v1.9.0) --------------------------------
   Aquí solo queda el terreno de la sección y la entrada del encabezado; todo el atlas (interruptor de país, escala de ciudades,
   plano, índice y ficha) vive en sucursales.css. Separación de Servicios: el relleno superior de la sección es
   cabecera + clamp(112px, 15vw, 208px). Terreno propio «carta nocturna» con los tonos que ya existen (--ink-2 y --ink).
   Con JS, home.js escribe --q (0 → 1) desde la posición de scroll: el borde superior de la sección viaja del 100 % al 35 % del
   alto de pantalla. Sin JS o con movimiento reducido, --q = 1. */
.section--sucursales {
	--q: 1;
	/* El plano parte ampliado: se recorta en horizontal para no ensanchar la pantalla en móvil (clip, no hidden: no crea contenedor de scroll). */
	overflow-x: clip;
	padding-top: calc(var(--header-h) + var(--safe-top) + clamp(112px, 15vw, 208px));
	background: radial-gradient(70% 60% at 68% 42%, var(--ink-2), var(--ink) 70%);
}
.sucursales__head {
	--h: clamp(0, calc((var(--q) - 0.5) * 2), 1);
	opacity: var(--h);
	transform: translateY(calc((1 - var(--h)) * 16px));
}

/* 07 · Nosotros · «Visor de archivo» (papel claro: calma; el visor es el único objeto oscuro) ------------------------
   Escritorio con JS (.nosotros--visor, lo pone nosotros.js): lista a la izquierda, visor fijo a la derecha.
   Móvil / sin JS: las fotografías van en línea bajo su hito. Sin desplazamientos ni paralaje: la lista no se mueve;
   en el visor solo cambian opacidad, desenfoque (enfoque) y un reflejo/anillo breves. Monocromo por CSS (el archivo
   no se toca); «Mostrar en color» (Personalizar) lo desactiva. */
.section--nosotros { background: var(--paper); color: #1a1718; }
.section--nosotros .kicker { color: #1a1718; }
.section--nosotros .section__lead { color: #4a4446; }
.section--nosotros :focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.timeline { max-width: 900px; }
.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: clamp(88px, 16vw, 180px) 1fr;
	gap: 24px;
	padding-block: 28px;
	border-top: 1px solid rgba(26, 23, 24, 0.16);
	/* Los saltos del índice (y los enlaces #hito-…) dejan el hito cerca de la línea de lectura (40 % de la altura),
	   para que el hito al que se salta sea también el activo. */
	scroll-margin-top: calc(var(--header-h) + var(--safe-top) + 24px);
	scroll-margin-top: max(calc(var(--header-h) + var(--safe-top) + 24px), 40svh);
}
.timeline__item:last-child { border-bottom: 1px solid rgba(26, 23, 24, 0.16); }
.timeline__year { margin: 0; font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.timeline__title { font-size: 1.25rem; }
.timeline__item p:not(.timeline__year) { margin: 0; color: #4a4446; max-width: 60ch; }
/* GLO-BUG-001 · O9: nada se mueve. Títulos, textos y filetes están SIEMPRE al 100 %, sin transformaciones
   ni transiciones. Solo el numeral del año responde al scroll: home.js escribe su opacidad (mínimo 55 %,
   3,76:1) como función pura de la posición; al detenerse el scroll no hay nada que siga moviéndose.
   Sin JS o con movimiento reducido: todo al 100 %. */
.timeline__year { opacity: 1; }
/* Hito activo (nosotros.js): tramo rojo de 48 × 2 px al inicio del filete; solo cambia su opacidad. */
.timeline__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--red); opacity: 0; transition: opacity var(--t-glide) var(--ease-standard); }
.timeline__item.is-active::before { opacity: 1; }

/* Fotografía en línea (móvil, tableta y sin JS): copia sobre montura oscura con vidrio y marcas de recorte. */
.print { grid-column: 1 / -1; max-width: 520px; margin: 4px 0 0; }
.print__well { position: relative; padding: 18px; background: var(--ink); border-radius: var(--r-outer); }
.print__well img, .visor__plate img { display: block; border-radius: 4px; filter: grayscale(1) contrast(1.04); }
.print__well img { width: 100%; height: auto; transition: opacity var(--t-morph) var(--ease-standard), filter var(--t-morph) var(--ease-standard); }
.nosotros--color .print__well img, .nosotros--color .visor__plate img { filter: none; }
.print__well::after, .visor__glass {
	content: ""; position: absolute; inset: var(--r-pad); border-radius: var(--r-inner); pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: linear-gradient(135deg, rgba(120, 255, 205, 0.05), transparent 28%, transparent 72%, rgba(170, 120, 255, 0.06));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Marcas de recorte (retícula de óptico): cuatro «L» de 12 px en las esquinas del cristal. */
.print__well::before, .visor__glass::before {
	content: ""; position: absolute; inset: 3px; z-index: 1; pointer-events: none;
	--mk: rgba(255, 255, 255, 0.42);
	background:
		linear-gradient(var(--mk), var(--mk)) left top / 12px 1px no-repeat,
		linear-gradient(var(--mk), var(--mk)) left top / 1px 12px no-repeat,
		linear-gradient(var(--mk), var(--mk)) right top / 12px 1px no-repeat,
		linear-gradient(var(--mk), var(--mk)) right top / 1px 12px no-repeat,
		linear-gradient(var(--mk), var(--mk)) left bottom / 12px 1px no-repeat,
		linear-gradient(var(--mk), var(--mk)) left bottom / 1px 12px no-repeat,
		linear-gradient(var(--mk), var(--mk)) right bottom / 12px 1px no-repeat,
		linear-gradient(var(--mk), var(--mk)) right bottom / 1px 12px no-repeat;
}
.print__well::before { inset: 11px; }
/* Entrada única «Enfoque» en móvil (nosotros.js): la montura queda nítida y solo la fotografía pasa de desenfocada a nítida. */
.print--wait .print__well img { opacity: 0.55; filter: grayscale(1) contrast(1.04) blur(6px); }
.nosotros--color .print--wait .print__well img { filter: blur(6px); }
.print figcaption { margin-top: 10px; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.01em; color: #4a4446; }

/* Visor (solo escritorio con JS) */
.visor { display: none; }
.visor__well { position: relative; height: min(56svh, 460px); min-height: 300px; padding: var(--r-pad); background: var(--ink); border-radius: var(--r-outer); }
.visor__stage { position: absolute; inset: var(--r-pad); overflow: hidden; border-radius: var(--r-inner); background: #000; }
.visor__plate {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden; filter: blur(8px); transform: scale(1.02);
	transition: opacity 300ms var(--ease-in), filter 300ms var(--ease-in), transform 300ms var(--ease-in), visibility 0s linear 300ms;
}
.visor__plate.is-on {
	opacity: 1; visibility: visible; filter: none; transform: none;
	transition: opacity 400ms var(--ease-standard) 120ms, filter 400ms var(--ease-standard) 120ms, transform 400ms var(--ease-standard) 120ms, visibility 0s;
}
.visor__plate img { width: auto; height: auto; max-width: calc(100% - 36px); max-height: calc(100% - 36px); object-fit: contain; }
.plate__year { margin: 0; font-size: clamp(4rem, 8.4vw, 6.5rem); font-weight: 650; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.62); }
@supports not (-webkit-text-stroke: 1px #fff) { .plate__year { color: rgba(255, 255, 255, 0.3); } }
.visor__glass { overflow: hidden; }
.visor__sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; opacity: 0; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); }
.visor__ring { position: absolute; left: 50%; top: 50%; height: 78%; aspect-ratio: 1; opacity: 0; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; }
.visor__label { margin: 16px 0 6px; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #5a5456; }
.visor__caps { display: grid; }
.visor__cap { grid-area: 1 / 1; opacity: 0; transition: opacity var(--t-response) linear; }
.visor__cap.is-on { opacity: 1; }
.visor__cap p { margin: 0; }
.cap__main { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; color: #1a1718; }
.cap__year { margin-right: 0.35em; font-variant-numeric: tabular-nums; }
.cap__note { margin-top: 4px !important; font-size: 0.875rem; color: #4a4446; }
.visor__index { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 14px; border-top: 1px solid rgba(26, 23, 24, 0.16); }
.visor__index a { position: relative; padding: 12px 0 18px; font-size: 0.8125rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; text-decoration: none; color: #5a5456; transition: color var(--t-response) linear; }
.visor__index a::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--red); opacity: 0; transition: opacity var(--t-response) linear; }
.visor__index a:hover, .visor__index a.is-on { color: #1a1718; }
.visor__index a.is-on::after { opacity: 1; }

.nosotros__closing { margin: clamp(48px, 8vw, 96px) 0 0; font-size: clamp(1.5rem, 3.4vw, 2.5rem); font-weight: 650; line-height: 1.15; letter-spacing: -0.025em; color: #1a1718; }
.nosotros__closing span { display: block; text-wrap: balance; }
.nosotros__closing .nosotros__closing-2 { color: #5a5456; }

@media (min-width: 1024px) {
	.print { grid-column: 2; max-width: 360px; } /* sin JS: en la columna del texto */
	.nosotros.nosotros--visor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 5vw, 72px); align-items: start; }
	/* El relleno inferior mantiene el visor fijo mientras se lee el último hito. */
	.nosotros--visor .timeline { max-width: none; padding-bottom: clamp(160px, 28svh, 280px); }
	.nosotros--visor + .nosotros__closing { margin-top: clamp(16px, 3vw, 40px); }
	.nosotros--visor .timeline__item { grid-template-columns: clamp(96px, 10vw, 140px) 1fr; }
	.nosotros--visor .visor { display: block; position: sticky; top: calc(var(--header-h) + var(--safe-top) + 32px); }
	/* Con el visor, las fotografías en línea quedan solo para lectores de pantalla (una vez, con su texto alternativo). */
	.nosotros--visor .print { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	.visor__plate, .visor__plate.is-on { filter: none; transform: none; transition: opacity var(--t-response) linear, visibility 0s; }
	.print__well img, .timeline__item::before { transition: none; }
	.print--wait .print__well img { opacity: 1; filter: grayscale(1) contrast(1.04); }
	.nosotros--color .print--wait .print__well img { filter: none; }
	.visor__sheen, .visor__ring { display: none; }
}

/* Pie de portada: sin espacio extra */
.home + .site-footer { margin-top: 0; }