/* Laguna Viña del Río · Dirección A "Paseo de agua"
   Móvil primero. Puntos de corte: 768 / 1024 / 1440. */

/* Fuentes alojadas en fonts/ (SIL Open Font License 1.1, ver fonts/LICENCIA-*), sin modificar:
   Syne 400 (titulares) y Manrope variable 400-700 (texto; un solo archivo sirve la regular y la seminegrita). */
/* Fuentes de reemplazo con métricas ajustadas (size-adjust medido contra Arial con texto real de la página):
   mientras carga la fuente propia, el texto ocupa casi el mismo ancho y alto, sin saltos. */
@font-face {
  font-family: "Syne Respaldo"; font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 97.2%; ascent-override: 95.6%; descent-override: 28.8%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Respaldo"; font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 101.1%; ascent-override: 105.9%; descent-override: 29.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Respaldo"; font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 97.6%; ascent-override: 109.6%; descent-override: 30.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Syne"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/syne-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/manrope-400-700.woff2") format("woff2");
}

:root {
  /* Color (contraste verificado en 00_DOCUMENTACION/PROPUESTA_DISENO.md) */
  --papel: #F5F3EE;
  --papel-2: #ECE8DF;
  --tinta: #16241F;
  --tinta-2: #4A5B54;
  --laguna: #1E4A3F;
  --laguna-velo: 14 34 28;
  --bronce: #7A5A2E;
  --bronce-claro: #D8C29A;
  --bronce-luz: #F0E3C4;
  --bronce-niebla: #FBF3E2;   /* números de capítulo sobre foto */
  --verde-grh: #1DB077;
  --verde-grh-hover: #3CC48E;
  --verde-grh-oscuro: #147A54;
  --tinta-sobre-verde: #0E2A20;
  --placa-logo: #F7F7F7;

  /* Halo localizado detrás del texto de la portada */
  --halo-opacidad: .66;
  --halo-blur: 40px;

  /* Tipografía */
  --f-titulo: "Syne", "Syne Respaldo", Arial, sans-serif;
  --f-texto: "Manrope", "Manrope Respaldo", Arial, system-ui, sans-serif;
  --w-titulo: 400;    /* Syne solo se aloja en 400: nunca pedir otro peso (evita negrita sintética) */
  --t-0: .85rem;
  --t-1: 1rem;
  --t-2: clamp(1.05rem, .6vw + .95rem, 1.3rem);
  --t-3: clamp(1.75rem, 3vw + 1rem, 3rem);
  --t-4: clamp(2.4rem, 8.5vw + .5rem, 6rem);   /* título de portada al 100 % del probador */
  --lh-texto: 1.55;                            /* interlineado del texto elegido en el probador */

  /* Espacio */
  --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2.5rem; --e-5: 4rem; --e-6: 6rem;
  --sec-y: clamp(2.25rem, 2.5vw + 1.5rem, 3.75rem);   /* aire vertical de cada sección: 36 px en móvil, 60 px en escritorio */
  --bloque-y: clamp(1.25rem, 1.2vw + 1rem, 2rem);   /* entre bloques dentro de una sección */
  --ease-out: cubic-bezier(.23, 1, .32, 1);          /* salida rápida y natural (emil-design-eng) */
  --ancho: 75rem;
  --radio: 999px;
  --radio-card: .75rem;
  --dur: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-1)/var(--lh-texto) var(--f-texto); }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--verde-grh-oscuro); outline-offset: 3px; border-radius: 4px; }
.sobre-oscuro :focus-visible, .portada :focus-visible, .barra :focus-visible, .pie :focus-visible, .visor :focus-visible { outline-color: var(--bronce-luz); }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: var(--w-titulo); font-synthesis: none; line-height: 1.05; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: absolute; left: var(--e-2); top: -4rem; z-index: 20; padding: .75rem 1rem; border-radius: .5rem;
  background: var(--tinta); color: var(--papel); font-weight: 600; text-decoration: none;
}
.saltar:focus { top: var(--e-2); }

/* Marca visible de texto pendiente de aprobación (no es diseño final) */
.pendiente {
  font-family: var(--f-texto); font-size: .9em; font-style: normal; color: var(--tinta-2);
  background: var(--papel-2); padding: .1em .45em; border-radius: .3em; border: 1px dashed var(--tinta-2);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sobre-oscuro .pendiente, .portada .pendiente {
  color: #F1EFE8; background: rgb(var(--laguna-velo) / .55); border-color: rgb(255 255 255 / .6);
}

/* ---------- Cabecera ---------- */
.barra {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-2);
}
/* Logotipo: placa clara con el logo del GRH (escala proporcional, nunca deformado) y el nombre en Syne.
   Espacio libre entre ambos = 2 x --marca-aire (hueco + filete + hueco), unas 0,6 veces el alto del logo. */
.marca {
  --marca-aire: .75rem;
  display: inline-flex; align-items: center; gap: var(--marca-aire); margin: 0;
  padding: .375rem .75rem .375rem .625rem; border-radius: .75rem;
  background: var(--placa-logo); color: var(--tinta); text-decoration: none;
}
.marca__grh { display: block; flex: none; width: 132px; height: auto; }
.marca__nombre {
  display: block; padding-left: var(--marca-aire); border-left: 1px solid #B9C2BD;
  font-family: var(--f-titulo); font-weight: var(--w-titulo); font-size: .9rem; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap;
}
.marca__nombre span { display: block; }
.barra__nav { display: none; }
.barra__nav ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.barra__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .65rem .9rem; border-radius: var(--radio);
  color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .barra__nav a:hover { text-decoration: underline; text-underline-offset: .3em; } }
.boton-menu {
  width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(var(--laguna-velo) / .55); color: #fff; backdrop-filter: blur(6px);
  transition: transform 160ms var(--ease-out);
}
.boton-menu[aria-expanded="true"] .icono-abrir, .boton-menu[aria-expanded="false"] .icono-cerrar { display: none; }

/* Menú móvil desplegado */
.barra__nav.abierta {
  display: block; position: absolute; top: calc(100% - .5rem); right: var(--e-2); left: var(--e-2);
  padding: var(--e-1); border-radius: 1rem; background: rgb(var(--laguna-velo) / .94); backdrop-filter: blur(10px);
}
.barra__nav.abierta { animation: menu-entrar 180ms var(--ease-out); }  /* se despliega desde el botón, sin salto */
@keyframes menu-entrar { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.barra__nav.abierta { transform-origin: top right; }
.barra__nav.abierta ul { flex-direction: column; }
.barra__nav.abierta a { display: flex; width: 100%; font-size: 1.05rem; }

/* ---------- Portada ---------- */
.portada {
  position: relative; min-height: max(100svh, 560px); display: grid; align-items: end;
  color: #fff; isolation: isolate; overflow: hidden;
}
.portada__media { position: absolute; inset: 0; z-index: -2; }
.portada__media::before {
  content: ""; position: absolute; inset: -40px; z-index: 0;
  background: var(--lqip) center / cover no-repeat; filter: blur(24px); transform: scale(1.05);
}
.portada__media img {
  position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; transition: opacity var(--dur) ease;
}
.js .portada__media img:not(.nitida) { opacity: 0; }

/* Halo: rectángulo color laguna difuminado solo detrás del bloque de texto */
.halo { position: relative; }
.halo::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -3rem -2rem -1rem -2rem; border-radius: 3rem;
  background: rgb(var(--laguna-velo) / var(--halo-opacidad)); filter: blur(var(--halo-blur));
}
.capitulos.halo::before { inset: -2.5rem -3rem; }

.portada__texto { padding: var(--e-4) var(--e-2); max-width: 46rem; }
.antetitulo {
  margin-bottom: var(--e-2); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronce-luz);
}
.portada h1 { font-size: var(--t-4); line-height: 1; }
.portada .bajada { margin-top: var(--e-3); font-size: var(--t-2); max-width: 34ch; color: #F1EFE8; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin-top: var(--e-4); }
.boton {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.35rem;
  border-radius: var(--radio); font-weight: 600; font-size: 1rem; text-decoration: none;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.boton svg { flex: none; }
.boton:active { transform: scale(.97); }  /* respuesta inmediata al pulsar */
.boton--primario { background: var(--verde-grh); color: var(--tinta-sobre-verde); }
.boton--secundario { color: #fff; border: 1.5px solid rgb(255 255 255 / .75); }
@media (hover: hover) and (pointer: fine) {  /* sin hover "pegado" tras tocar en pantallas táctiles */
  .boton--primario:hover { background: var(--verde-grh-hover); }
  .boton--secundario:hover { background: rgb(255 255 255 / .12); }
}
.deslizar {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: var(--e-4);
  font-size: var(--t-0); color: #E7E3D8; text-decoration: none;
}
.deslizar svg { animation: bajar 2.4s ease-in-out infinite; }
@keyframes bajar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.capitulos { display: none; }
/* Entrada coreografiada (clase portada--coreografia en index.html; se quita para desactivarla).
   El texto aparece en secuencia corta (600 ms, 80 ms entre piezas) y la imagen se asienta muy despacio
   desde 1,045 al quedar nítida: solo opacity y transform, sin mover el diseño. */
@media (prefers-reduced-motion: no-preference) {
  .js .portada--coreografia .portada__texto > *, .js .portada--coreografia .capitulos { animation: portada-entrar 600ms var(--ease-out) both; }
  .js .portada--coreografia .portada__texto > :nth-child(2) { animation-delay: 80ms; }
  .js .portada--coreografia .portada__texto > :nth-child(3) { animation-delay: 160ms; }
  .js .portada--coreografia .portada__texto > :nth-child(4) { animation-delay: 240ms; }
  .js .portada--coreografia .portada__texto > :nth-child(5) { animation-delay: 320ms; }
  .js .portada--coreografia .capitulos { animation-delay: 400ms; }
  .js .portada--coreografia .portada__media img.nitida { animation: portada-asentar 9s cubic-bezier(.25, .1, .25, 1) both; }
}
@keyframes portada-entrar { from { opacity: 0; transform: translateY(12px); } }
@keyframes portada-asentar { from { transform: scale(1.045); } }

/* ---------- Secciones ---------- */
.seccion { padding: var(--sec-y) var(--e-2); }
.contenedor { max-width: var(--ancho); margin-inline: auto; }
.encabezado { display: grid; gap: var(--e-2); max-width: 46rem; margin-bottom: var(--bloque-y); }
.encabezado h2 { font-size: var(--t-3); text-wrap: balance; }
.encabezado p { text-wrap: pretty; }  /* sin palabras sueltas en la última línea */
/* Títulos de capítulo como píldora: enlace a su propia sección (enlace directo al capítulo), con el número dentro */
.pastilla {
  display: inline-flex; align-items: center; gap: .45em; max-width: 100%; min-height: 44px; padding: .16em .7em .2em .22em;  /* objetivo táctil >= 44 px también en móvil */
  border: 1.5px solid var(--verde-grh-oscuro); border-radius: var(--radio); color: inherit; text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.pastilla__num {
  display: inline-grid; place-items: center; flex: none; min-width: 2.2em; padding: .4em .6em; border-radius: var(--radio);
  background: var(--verde-grh); color: var(--tinta-sobre-verde); font-size: max(.75rem, .36em); line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.pastilla:focus-visible { background: rgb(29 176 119 / .1); border-color: var(--verde-grh); outline: 3px solid var(--verde-grh-oscuro); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {  /* en pantallas táctiles el hover se quedaría "pegado" tras tocar */
  .pastilla:hover { background: rgb(29 176 119 / .1); border-color: var(--verde-grh); }
}
.pastilla:active { transform: scale(.97); }  /* respuesta inmediata al pulsar */
@media (prefers-reduced-motion: reduce) { .pastilla:active { transform: none; } }
.encabezado p { font-size: var(--t-2); color: var(--tinta-2); max-width: 60ch; }
/* Galería: entradilla más larga, medida de unos 62 caracteres; la instrucción de uso en su propia línea, algo más marcada */
.encabezado--galeria p { max-width: 52ch; line-height: 1.6; }
.instruccion { display: block; margin-top: .35em; font-weight: 500; color: var(--tinta); }

.proyecto { display: grid; gap: var(--bloque-y); align-items: start; }  /* el título arranca arriba, a la altura de la imagen */
.proyecto__texto { display: grid; gap: var(--e-2); align-content: start; }
/* Columna lista para la descripción que entregue la entidad: mismo tamaño, color y medida que las entradillas */
.proyecto__texto p { font-size: var(--t-2); color: var(--tinta-2); max-width: 60ch; text-wrap: pretty; }
.proyecto__texto h2 { font-size: var(--t-3); }
.portada__texto:focus { outline: none; }

/* Imágenes ampliables */
.ampliable { display: block; position: relative; color: inherit; text-decoration: none; border-radius: var(--radio-card); }
.ampliable picture { display: block; overflow: hidden; border-radius: inherit; background: var(--fondo, var(--papel-2)); }
.ampliable img { display: block; width: 100%; height: auto; transition: transform 300ms var(--ease-out); }
/* Carga diferida (js/principal.js): sin JavaScript se oculta y se ve la copia de <noscript>.
   width/height reservan el espacio aunque aún no tenga src. */
.diferida { display: none; }
.js .diferida { display: block; }
.diferida:not([src]) { color: transparent; overflow: hidden; } /* el texto alternativo no estira la caja antes de cargar */
.ampliable .lupa {
  position: absolute; right: .75rem; top: .75rem; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: rgb(var(--laguna-velo) / .7); color: #fff; opacity: 0; transition: opacity 200ms ease;
}
.ampliable:focus-visible .lupa { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ampliable:hover img { transform: scale(1.02); }
  .ampliable:hover .lupa { opacity: 1; }
}
figure { margin: 0; }
figcaption { margin-top: .6rem; font-size: var(--t-0); color: var(--tinta-2); text-wrap: pretty; }

.destacada { margin-inline: calc(-1 * var(--e-2)); }
.destacada .ampliable { border-radius: 0; }
.destacada figcaption { padding-inline: var(--e-2); }

.trio { display: grid; gap: var(--e-3); margin-top: var(--bloque-y); }
.trio .ampliable img, .memoria .ampliable img { aspect-ratio: 4 / 3; object-fit: cover; }
.memoria { display: grid; gap: var(--bloque-y); }
.memoria .ampliable img { aspect-ratio: 3 / 4; }
.memoria h3 { font-size: 1.6rem; margin-top: var(--e-2); text-wrap: balance; }
.memoria p { margin-top: .5rem; color: var(--tinta-2); text-wrap: pretty; }

.vistas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.vistas .ampliable img { aspect-ratio: 1; object-fit: cover; }
.vistas figcaption { margin-top: .4rem; }
/* Dos vistas ocupan dos columnas y completan la rejilla; su alto iguala al de una celda */
.vistas .ancha { grid-column: span 2; container-type: inline-size; }
.vistas .ancha .ampliable img { aspect-ratio: auto; height: calc((100cqw - var(--e-2)) / 2); }
/* Indicación bajo el pie de las imágenes con aspecto de foto */
.pie-nota { display: block; font-style: italic; }
.destacada--cierre { margin-top: var(--bloque-y); }
/* Caseta de guardianía en tamaño medio, alineada al borde derecho del contenedor */
.guardiania { margin-top: var(--bloque-y); }

/* Secciones oscuras: video, 360 */
.sobre-oscuro { background: var(--laguna); color: var(--papel); }
.sobre-oscuro .encabezado p { color: #DCE3DF; }
.marcador {
  display: grid; place-items: center; gap: var(--e-2); min-height: 16rem; padding: var(--e-4) var(--e-3);
  border: 1.5px dashed rgb(255 255 255 / .45); border-radius: 1rem; text-align: center;
}
.marcador svg { color: var(--bronce-claro); }
.video__marco { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio-card); overflow: hidden; background: #0E221C; }
.video__marco video, .video__marco iframe, .video__fachada { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.video__aviso { display: grid; place-items: center; height: 100%; padding: var(--e-3); text-align: center; }
/* Fachada (solo con "tipo": "youtube"): poster + botón; el iframe se carga al hacer clic */
.video__fachada { padding: 0; cursor: pointer; background: #0E221C; color: #fff; }
.video__fachada img { width: 100%; height: 100%; object-fit: cover; }
.video__fachada span {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center;
  border-radius: 50%; background: rgb(var(--laguna-velo) / .82); border: 2px solid rgb(255 255 255 / .8);
}
.video__fachada:hover span { background: rgb(var(--laguna-velo) / .95); }
.video figcaption { color: #DCE3DF; }
.video__pendiente { margin-top: var(--e-2); }
.marcador p { max-width: 42ch; }
.marcador h3 { font-size: 1.5rem; }
.recorrido-grid { display: grid; gap: var(--e-3); }

/* Showroom virtual (VR). Celular: solo el botón grande y la dirección escrita (escanear la pantalla del
   propio celular no sirve). Tableta y escritorio: panel claro con el QR (SVG con su fondo blanco y su margen,
   sin tocar), título, botón y dirección. El borde luminoso va en el marco del panel, nunca en el QR. */
.vr { display: grid; gap: var(--e-2); justify-items: start; }
.vr__qr, .vr__titulo { display: none; }
.vr__texto { display: grid; gap: var(--e-2); justify-items: start; width: 100%; }
.vr__boton { justify-content: center; width: 100%; min-height: 56px; font-size: 1.05rem; }
.vr__url { font-size: var(--t-1); color: #DCE3DF; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .vr {
    grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-4);
    max-width: 52rem; padding: var(--e-4); border-radius: 1rem;
    background: var(--papel); color: var(--tinta); border: 1px solid rgb(255 255 255 / .6);
  }
  .vr__qr { display: block; border-radius: 4px; line-height: 0; }
  .vr__qr img { display: block; width: clamp(14rem, 24vw, 18.75rem); height: auto; }
  .vr__titulo { display: block; font-size: var(--t-3); }
  .vr__boton { width: auto; order: 3; }
  .vr__url { color: var(--tinta-2); order: 2; }  /* título, dirección escrita y botón */
  .sobre-oscuro .vr :focus-visible { outline-color: var(--verde-grh-oscuro); }  /* sobre el panel claro */
  .lineas .vr { border-color: transparent; box-shadow: 0 0 0 1.5px var(--verde-grh), 0 0 0 6px rgb(29 176 119 / .18); }
}

.datos { display: grid; gap: var(--e-3); margin: 0; }
.datos div { display: grid; gap: .25rem; }
.datos dt { font-size: var(--t-0); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronce); }
.datos dd { margin: 0; font-size: var(--t-2); }

.contacto-accion {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.35rem;
  border-radius: var(--radio); border: 1.5px dashed var(--tinta-2); color: var(--tinta-2); font-weight: 600;
}

/* ---------- Pie ---------- */
.pie { background: var(--tinta); color: var(--papel); padding: var(--e-5) var(--e-2) var(--e-4); }
.pie__grid { display: grid; gap: var(--e-3); }
.pie .marca { justify-self: start; color: var(--tinta); } /* sobre la placa clara, no el gris de .pie p */
.pie .marca__grh { width: 150px; }
.pie .marca__nombre { font-size: 1.05rem; }
.pie p { font-size: var(--t-0); color: #C9D1CD; }

/* ---------- Página no encontrada (404.html, solo en la publicación) ---------- */
body:has(> .error-404) { display: flex; flex-direction: column; min-height: 100svh; }  /* el pie queda abajo */
.error-404 { flex: 1; min-height: 70svh; display: grid; align-content: center; padding-top: 6rem; }
.error-404 h1 { font-size: var(--t-3); }

/* ---------- Vista ampliada ---------- */
.visor {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: rgb(var(--laguna-velo) / .97); color: var(--papel);
}
.visor::backdrop { background: rgb(var(--laguna-velo) / .8); }
/* Apertura breve (200 ms): la vista ampliada aparece con un fundido y la imagen se asienta desde 0,98 */
.visor[open], .visor[open]::backdrop { animation: visor-fundido 200ms var(--ease-out); }
.visor[open] .visor__escena img { animation: visor-asentar 200ms var(--ease-out); }
@keyframes visor-fundido { from { opacity: 0; } }
@keyframes visor-asentar { from { transform: scale(.98); } }
.visor[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.visor__barra { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-2); }
.visor__contador { font-size: var(--t-0); color: var(--bronce-luz); font-variant-numeric: tabular-nums; }
.visor__escena { display: grid; place-items: center; min-height: 0; padding: 0 var(--e-1); position: relative; }
.visor__escena img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  background: var(--fondo) center / contain no-repeat;
}
.visor__pie { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); padding: var(--e-1) var(--e-2) var(--e-2); }
.visor__pie p { font-size: var(--t-1); }
.visor button {
  width: 48px; height: 48px; display: grid; place-items: center; flex: none; cursor: pointer;
  border: 1.5px solid rgb(255 255 255 / .5); border-radius: 50%; background: transparent; color: var(--papel);
}
.visor button { transition: background-color 200ms ease, transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .visor button:hover { background: rgb(255 255 255 / .12); } }
.visor button:active, .boton-menu:active { transform: scale(.97); }
.visor__nav { display: flex; gap: var(--e-1); }
.visor__cargando { position: absolute; font-size: var(--t-0); color: var(--bronce-luz); }

/* ---------- Barra de progreso de lectura (solo con "progreso": true) ----------
   Línea fina en el verde de la marca, arriba de todo. Animación ligada al desplazamiento (CSS, sin
   JavaScript ni trabajo en cada scroll): solo transform. Navegadores sin soporte o con movimiento
   reducido no la muestran. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progreso body::before {
      content: ""; position: fixed; inset: 0 0 auto 0; z-index: 30; height: 3px; pointer-events: none;
      background: var(--verde-grh); transform-origin: 0 50%; transform: scaleX(0);
      animation: progreso-lectura linear both; animation-timeline: scroll(root block);
    }
  }
}
@keyframes progreso-lectura { to { transform: scaleX(1); } }

/* ---------- Aparición al entrar en pantalla (solo con JS y sin movimiento reducido) ---------- */
.anim .revelar { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); }
.anim .revelar.visible { opacity: 1; transform: none; }
/* Elementos que entran juntos (trío, galería) se escalonan 50 ms entre sí, hasta 200 ms (js/principal.js) */
/* Sin el destello gris del navegador al tocar: estos controles ya responden con su propio estado al pulsar */
.boton, .boton-menu, .pastilla, .ampliable, .visor button, .barra__nav a, .capitulos a { -webkit-tap-highlight-color: transparent; }

/* ---------- Líneas luminosas (solo con "lineas": true; ver js/lineas.js) ----------
   Esmeralda de los botones (--verde-grh) y blanco cálido (--bronce-niebla). Trazo de 1,5 px con un
   segundo trazo ancho y tenue como halo; sin filtros. Nunca sobre texto ni sobre el sujeto de una imagen. */
.lineas main { position: relative; }
.recorrido-linea { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; overflow: visible; }
.recorrido-linea__trazo, .recorrido-linea__halo { fill: none; stroke: var(--verde-grh); stroke-linecap: round; }
.recorrido-linea__trazo { stroke-width: 1.5; }
.recorrido-linea__halo { stroke-width: 6; stroke-opacity: .16; }
.recorrido-linea__nodo circle { fill: var(--verde-grh); }
.recorrido-linea__nodo .recorrido-linea__nodo-halo { fill-opacity: .16; }
.recorrido-linea__nodo { opacity: 0; transition: opacity .4s ease 1.1s; }
.recorrido-linea__nodo.encendido { opacity: 1; }
/* Móvil y tableta: trazo corto junto al número del capítulo */
.lineas .encabezado h2:has(.pastilla) { display: flex; align-items: center; gap: .75rem; }
.lineas .encabezado h2:has(.pastilla)::after {
  content: ""; width: 3rem; height: 6px; transform: scaleX(0); transform-origin: left center;
  background:
    linear-gradient(var(--verde-grh), var(--verde-grh)) center / 100% 1.5px no-repeat,
    linear-gradient(rgb(29 176 119 / .16), rgb(29 176 119 / .16)) center / 100% 6px no-repeat;
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}
.lineas .encabezado h2.encendido::after { transform: none; }
@media (min-width: 1024px) { .lineas .encabezado h2:has(.pastilla)::after { display: none; } }
/* Marco luminoso de las imágenes grandes: 1,5 px esmeralda por el borde interior y halo tenue hacia dentro
   (no sale de la imagen ni mueve nada). Se dibuja una vez; con reduced-motion aparece completo. */
.marco { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: hidden; border-radius: inherit; }
.marco rect { fill: none; stroke: var(--verde-grh); stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1); }
.marco__trazo { x: .75px; y: .75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); stroke-width: 1.5; }
.marco__halo { x: 3px; y: 3px; width: calc(100% - 6px); height: calc(100% - 6px); stroke-width: 6; stroke-opacity: .18; }
.guardiania .marco rect { rx: var(--radio-card); }
.marco-encendido .marco rect { stroke-dashoffset: 0; }
/* Borde luminoso en botones y tarjetas al pasar el cursor o enfocar: anillo de 1,5 px y halo tenue
   (sombras sin desenfoque, no cambian el tamaño). El contorno de foco de teclado se mantiene. */
.lineas .boton, .lineas .trio .ampliable, .lineas .memoria .ampliable, .lineas .vistas .ampliable, .lineas .guardiania .ampliable {
  transition: box-shadow .25s ease, background-color 200ms ease, transform 160ms var(--ease-out);
}
.lineas .boton:focus-visible {
  box-shadow: 0 0 0 1.5px var(--bronce-niebla), 0 0 0 6px rgb(29 176 119 / .35);
}
.lineas .trio .ampliable:focus-visible, .lineas .memoria .ampliable:focus-visible,
.lineas .vistas .ampliable:focus-visible, .lineas .guardiania .ampliable:focus-visible {
  box-shadow: 0 0 0 1.5px var(--verde-grh), 0 0 0 6px rgb(29 176 119 / .18);
}
@media (hover: hover) and (pointer: fine) {
  .lineas .boton:hover { box-shadow: 0 0 0 1.5px var(--bronce-niebla), 0 0 0 6px rgb(29 176 119 / .35); }
  .lineas .trio .ampliable:hover, .lineas .memoria .ampliable:hover,
  .lineas .vistas .ampliable:hover, .lineas .guardiania .ampliable:hover {
    box-shadow: 0 0 0 1.5px var(--verde-grh), 0 0 0 6px rgb(29 176 119 / .18);
  }
}
/* Visor ampliado: el mismo borde al pasar el cursor por la imagen o al usar el teclado dentro del visor */
.lineas .visor__escena img { transition: box-shadow .25s ease; }
.lineas .visor__escena img:hover, .lineas .visor:has(:focus-visible) .visor__escena img {
  box-shadow: 0 0 0 1.5px var(--verde-grh), 0 0 0 6px rgb(29 176 119 / .25);
}

/* ---------- Modo presentación (solo con "modoPresentacion": true; ver js/presentacion.js) ----------
   Aviso discreto abajo al centro con el capítulo al que se llegó; aparece en 200 ms y se va solo. */
.presentacion-aviso {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30; pointer-events: none;
  padding: .5rem 1rem; border-radius: var(--radio); background: rgb(var(--laguna-velo) / .9); color: var(--papel);
  font-family: var(--f-titulo); font-size: .95rem; white-space: pre; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.presentacion-aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.presentacion-foco:focus { outline: none; }  /* el título recibe el foco para lectores de pantalla, sin recuadro */

/* ---------- Puntos de corte ---------- */
@media (min-width: 768px) {
  .guardiania { max-width: 48rem; margin-inline: auto max(0px, calc((100% - var(--ancho)) / 2)); }
  .barra { padding: var(--e-3) var(--e-4); }
  .marca { --marca-aire: 1rem; padding-right: 1rem; }
  .marca__grh { width: 168px; }
  .marca__nombre { font-size: 1.15rem; }
  .portada__texto { padding: var(--e-5) var(--e-4) var(--e-4); }
  .seccion { padding: var(--sec-y) var(--e-4); }
  .destacada { margin-inline: calc(-1 * var(--e-4)); }
  .destacada figcaption { padding-inline: var(--e-4); }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memoria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vistas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recorrido-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__grid { grid-template-columns: auto 1fr; align-items: start; gap: var(--e-5); }
}
/* Entre 1024 y 1279 px el menú se compacta para dejar aire junto al logotipo. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .barra__nav a { padding-inline: .7rem; }
}
@media (min-width: 1024px) {
  .boton-menu { display: none; }
  .barra__nav {
    display: block; padding: .25rem; border-radius: var(--radio);
    background: rgb(var(--laguna-velo) / .65); backdrop-filter: blur(8px);
  }
  .portada { grid-template-columns: minmax(0, 1fr) auto; }
  .portada__texto { padding: var(--e-5); max-width: 40rem; }
  .capitulos {
    display: block; align-self: end; margin: 0 var(--e-5) var(--e-5) 0; padding: 0; list-style: none;
    border-left: 1px solid rgb(255 255 255 / .35); counter-reset: cap;
  }
  .capitulos li { counter-increment: cap; }
  .capitulos a {
    display: flex; gap: .9rem; align-items: baseline; min-height: 44px; padding: .55rem 0 .55rem 1.1rem;
    color: #EDEAE2; font-size: .95rem; text-decoration: none; transition: color 200ms ease;
  }
  .capitulos a::before { content: counter(cap, decimal-leading-zero); font-family: var(--f-titulo); font-size: .85rem; color: var(--bronce-niebla); font-variant-numeric: tabular-nums; }
  .capitulos a:hover { color: #fff; }
  .capitulos .capitulos__vr a::before { content: "VR"; }  /* el showroom no es un capítulo numerado */
  .proyecto { grid-template-columns: 5fr 6fr; gap: var(--e-4); }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .memoria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vistas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .visor__escena { padding: 0 var(--e-3); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .boton:active, .boton-menu:active, .visor button:active { transform: none; }
}