/* Escuadra · portada (versión 2, estilo revista). Lo común (letras, colores, botones, cabecera y pie) está en base.css.
   La web empieza con la casa terminada. Al bajar, un salto atrás de once semanas y la obra avanza como una película:
   cada fase se funde sobre la anterior mientras la cámara se acerca despacio. Todo con CSS ligado al scroll, sin librerías.
   Sin animaciones ligadas al scroll, o con «reducir movimiento», se ve una versión quieta. */

@property --semana { syntax: "<integer>"; inherits: true; initial-value: 1; }

/* ---------- La película ---------- */

/* La escena ocupa la pantalla con la barra del navegador escondida (100lvh): en el móvil, al bajar, esa barra se va
   y no queda ningún hueco abajo. Lo que va abajo (notas, semanas) sube lo que tapa la barra cuando está (--tapa),
   así se ve siempre y no se mueve. Con el dedo, deslizar a los lados también avanza la película (js/casa.js). */
.pelicula { position: relative; height: 1100vh; view-timeline: --peli block; }
.escena { --tapa: 0px; position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; background: var(--papel-2); touch-action: pan-y pinch-zoom; }
@supports (height: 100lvh) {
  .escena { --tapa: calc(100lvh - 100svh); }
}

/* La cámara: en la portada está un poco cerca; en el salto atrás se aleja; durante la obra se acerca despacio. */
.camara {
  position: absolute; inset: 0; transform-origin: 50% 58%;
  animation: camara linear both; animation-timeline: --peli; animation-range: contain 0% contain 100%;
}
@keyframes camara {
  0% { transform: scale(1.06); }
  11% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

/* Cada toma se funde sobre la anterior. Todas tienen el mismo encuadre (medido: escala 1,000 y 0 px de desplazamiento),
   así que paredes, vigas y balcones no se mueven y solo cambia la obra. Sin escalar la que entra: si no, todo sale doble.
   ease-in-out: el fundido pasa deprisa por la mitad, que es cuando se ven dos fotos a la vez. */
.toma { position: absolute; inset: 0; display: block; opacity: 0;
  animation: entra ease-in-out both; animation-timeline: --peli; animation-range: contain var(--desde) contain var(--hasta); }
.toma img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@keyframes entra { from { opacity: 0; } to { opacity: 1; } }

.toma-antes { opacity: 1; animation: none; }
/* Doce fundidos entre el 15 % y el 87 % del recorrido: cada foto entra en un 4,6 % y se queda hasta la siguiente. */
.t-vaciado { --desde: 15%; --hasta: 19.6%; }
.t-derribo { --desde: 21.2%; --hasta: 25.8%; }
.t-demolicion { --desde: 27.3%; --hasta: 31.9%; }
.t-instalaciones { --desde: 33.5%; --hasta: 38.1%; }
.t-yeso { --desde: 39.7%; --hasta: 44.3%; }
.t-paredes { --desde: 45.8%; --hasta: 50.4%; }
.t-pulido { --desde: 52%; --hasta: 56.6%; }
.t-suelo { --desde: 58.2%; --hasta: 62.8%; }
.t-bajos { --desde: 64.3%; --hasta: 68.9%; }
.t-cocina { --desde: 70.5%; --hasta: 75.1%; }
.t-casi { --desde: 76.7%; --hasta: 81.3%; }
.t-entregada { --desde: 82.8%; --hasta: 87.4%; }

/* La portada es la casa terminada: respira despacio aunque no se toque nada, y se va en el salto atrás. */
.t-portada { opacity: 1; --desde: 5.6%; --hasta: 8.2%; animation-name: sale; animation-timing-function: linear; }

/* El salto atrás: un destello cálido, como pasar una página, y aparece 1985 (sin mezclar la casa nueva con la vieja). */
.destello { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--papel); opacity: 0;
  animation: destello linear both; animation-timeline: --peli; animation-range: contain 2% contain 12%; }
@keyframes destello { 0% { opacity: 0; } 50% { opacity: 0.9; } 100% { opacity: 0; } }
.t-portada img { animation: respira 18s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes sale { from { opacity: 1; } to { opacity: 0; } }
@keyframes llega { from { opacity: 0; } to { opacity: 1; } }

/* Veladuras para leer: arriba, una luz clara bajo la cabecera; abajo, una sombra que aparece con la obra. */
.velo-arriba, .velo-abajo { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.velo-arriba { top: 0; height: 20%; background: linear-gradient(to bottom, rgb(247 242 234 / 0.5), transparent); }
.velo-titulo { position: absolute; left: 0; right: 0; top: 0; height: 48%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgb(247 242 234 / 0.5), rgb(247 242 234 / 0.18) 60%, transparent);
  animation: sale linear both; animation-timeline: --peli; animation-range: contain 1% contain 6%; }
.velo-abajo { bottom: 0; height: 42%; opacity: 0; background: linear-gradient(to top, rgb(24 18 12 / 0.66), rgb(24 18 12 / 0.26) 50%, transparent);
  animation: llega linear both; animation-timeline: --peli; animation-range: contain 4% contain 10%; }

/* ---------- Cabecera y portada ---------- */


.portada { position: absolute; z-index: 3; top: clamp(84px, 11vh, 120px); left: var(--borde); right: var(--borde);
  animation: sale linear both; animation-timeline: --peli; animation-range: contain 1% contain 6%; }
.portada .antetitulo { color: var(--tinta-2); }
/* Interlineado 1,02: la «g» de «integrales» baja 0,22 y la «V» de «Valencia» sube 0,73 (medido en Instrument Serif);
   con menos de 0,95 se pisan. */
.portada h1, .titulo-quieto {
  margin: 10px 0 0; font-family: var(--serif); font-weight: 400;
  max-width: 11.5ch; font-size: clamp(52px, 8.4vw, 140px); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance;
}
.portada h1 em, .titulo-quieto em { font-style: italic; }
.entradilla { max-width: 38ch; margin: 18px 0 0; font-size: clamp(16px, 1.35vw, 19px); color: var(--tinta-2); }

/* La frase de la portada va abajo, en blanco sobre una sombra suave en la esquina; arriba solo el título. */
.portada-pie { position: absolute; z-index: 3; left: var(--borde); bottom: calc(var(--borde) + 4px + var(--tapa, 0px)); max-width: 36ch; color: #fff;
  animation: sale linear both; animation-timeline: --peli; animation-range: contain 1% contain 6%; }
.portada-pie { max-width: 44ch; }
.portada-pie p { margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5; text-shadow: 0 1px 18px rgb(0 0 0 / 0.4); }
.cifras { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 16px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 0.4);
  font: 500 11.5px/1.3 Geist, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 1px 12px rgb(0 0 0 / 0.45); }
.cifras b { font: 400 30px/1 var(--serif); letter-spacing: 0; text-transform: none; margin-right: 6px; vertical-align: -3px; }
.velo-portada { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 70% at 0% 100%, rgb(22 15 9 / 0.68), rgb(22 15 9 / 0.24) 46%, transparent 72%);
  animation: sale linear both; animation-timeline: --peli; animation-range: contain 2% contain 8%; }
.quieta .portada-pie, .quieta .velo-portada { animation: none; }

.desliza {
  position: absolute; z-index: 3; left: 50%; bottom: calc(28px + var(--tapa, 0px)); translate: -50% 0; margin: 0;
  display: grid; justify-items: center; gap: 10px; color: #fff; white-space: nowrap;
  font: 500 11.5px/1 Geist, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
  animation: sale linear both; animation-timeline: --peli; animation-range: contain 0% contain 3%;
}
.desliza::after { content: ""; width: 1px; height: 38px; background: linear-gradient(#fff, rgb(255 255 255 / 0)); animation: baja 1.8s ease-in-out infinite; }
@keyframes baja { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Notas de la obra (abajo a la izquierda) ---------- */

.notas { position: absolute; z-index: 3; left: var(--borde); bottom: calc(var(--borde) + 66px + var(--tapa, 0px)); width: min(600px, 62vw); height: 250px; margin: 0; padding: 0; list-style: none; color: #fff; }
.nota { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0;
  animation: nota linear both; animation-timeline: --peli; animation-range: contain var(--desde) contain var(--hasta); }
.nota .antetitulo { color: rgb(255 255 255 / 0.85); margin-bottom: 10px; }
.nota h2 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.005em; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / 0.25); }
.nota .texto { margin: 0; max-width: 46ch; font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.5; color: rgb(255 255 255 / 0.9); text-wrap: pretty; text-shadow: 0 1px 14px rgb(0 0 0 / 0.35); }
@keyframes nota { 0% { opacity: 0; transform: translateY(18px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes nota-ultima { 0% { opacity: 0; transform: translateY(18px); } 15%, 100% { opacity: 1; transform: none; } }
.n-antes { --desde: 9%; --hasta: 19%; }
.n-vaciado { --desde: 18%; --hasta: 24.5%; }
.n-demolicion { --desde: 24%; --hasta: 34%; }
.n-instalaciones { --desde: 33.5%; --hasta: 41.5%; }
.n-paredes { --desde: 41%; --hasta: 52.5%; }
.n-suelo { --desde: 52%; --hasta: 64.5%; }
.n-cocina { --desde: 64%; --hasta: 76.5%; }
.n-casi { --desde: 76%; --hasta: 83.5%; }
.n-entregada { --desde: 83%; --hasta: 100%; animation-name: nota-ultima; }

/* ---------- Semanas: contador y línea de tiempo (abajo) ---------- */

.tiempo { position: absolute; z-index: 3; left: var(--borde); right: var(--borde); bottom: calc(var(--borde) + var(--tapa, 0px)); color: #fff; opacity: 0; }
.cuenta { position: absolute; right: 0; bottom: 34px; display: grid; font: 500 12px/1 Geist, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; }
.cuenta > span { grid-area: 1 / 1; justify-self: end; white-space: nowrap; }
.cuenta .previa { animation: sale linear both; animation-timeline: --peli; animation-range: contain 14% contain 17%; }
.cuenta .semanas { opacity: 0; animation: llega linear both; animation-timeline: --peli; animation-range: contain 16% contain 19%; }
.cuenta .semanas::after { counter-reset: s var(--semana); content: "Semana " counter(s) " de 11"; }
.tiempo { --semana: 1; animation: llega linear both, semanas linear both; animation-timeline: --peli, --peli; animation-range: contain 6% contain 11%, contain 0% contain 100%; }
@keyframes semanas {
  0%, 33.5% { --semana: 1; }
  38.1%, 39.7% { --semana: 3; }
  44.3%, 52% { --semana: 4; }
  56.6%, 58.2% { --semana: 5; }
  62.8%, 64.3% { --semana: 6; }
  68.9%, 70.5% { --semana: 7; }
  75.1%, 76.7% { --semana: 8; }
  81.3%, 82.8% { --semana: 10; }
  87.4%, 100% { --semana: 11; }
}

.regla { position: relative; height: 22px; container-type: inline-size; }
.regla::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(255 255 255 / 0.45); }
.regla ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; font: 500 10.5px/1 Geist, sans-serif; letter-spacing: 0.08em; }
.regla li { position: relative; padding-top: 9px; width: 0; display: flex; justify-content: center; white-space: nowrap; opacity: 0.8; }
.regla li::before { content: ""; position: absolute; top: -3px; left: 0; width: 1px; height: 7px; background: rgb(255 255 255 / 0.7); }
.recorrido { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: #fff; transform-origin: left; transform: scaleX(0);
  animation: recorrido linear both; animation-timeline: --peli; animation-range: contain 0% contain 100%; }
.punto { position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.25);
  animation: punto linear both; animation-timeline: --peli; animation-range: contain 0% contain 100%; }
@keyframes recorrido {
  0%, 15% { transform: scaleX(0); }
  19.6%, 33.5% { transform: scaleX(0.0909); }
  38.1%, 39.7% { transform: scaleX(0.2727); }
  44.3%, 52% { transform: scaleX(0.3636); }
  56.6%, 58.2% { transform: scaleX(0.4545); }
  62.8%, 64.3% { transform: scaleX(0.5455); }
  68.9%, 70.5% { transform: scaleX(0.6364); }
  75.1%, 76.7% { transform: scaleX(0.7273); }
  81.3%, 82.8% { transform: scaleX(0.9091); }
  87.4%, 100% { transform: scaleX(1); }
}
@keyframes punto {
  0%, 15% { transform: translateX(0); }
  19.6%, 33.5% { transform: translateX(9.09cqw); }
  38.1%, 39.7% { transform: translateX(27.27cqw); }
  44.3%, 52% { transform: translateX(36.36cqw); }
  56.6%, 58.2% { transform: translateX(45.45cqw); }
  62.8%, 64.3% { transform: translateX(54.55cqw); }
  68.9%, 70.5% { transform: translateX(63.64cqw); }
  75.1%, 76.7% { transform: translateX(72.73cqw); }
  81.3%, 82.8% { transform: translateX(90.91cqw); }
  87.4%, 100% { transform: translateX(100cqw); }
}

/* ---------- Carrusel de obras ---------- */


.obras { position: relative; background: var(--papel); }
.obras-cabeza { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 40px; }
.obras-cabeza .antetitulo { color: var(--terracota-texto); }
.obras-cabeza h2 { margin: 8px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 70px); line-height: 0.95; letter-spacing: -0.01em; }
.obras-cabeza h2 em { color: var(--terracota); }
.obras-entrada { max-width: 44ch; margin: 0; color: var(--tinta-2); font-size: 16px; }

.obra-caja { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.obra-frente { position: relative; display: block; overflow: hidden; border-radius: 3px; background: var(--papel-2); }
.obra-frente img { width: 100%; height: 100%; object-fit: cover; }
.obra-frente::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(20 14 8 / 0.55), transparent 42%), rgb(20 14 8 / var(--sombra, 0)); }
.obra-num { position: absolute; z-index: 1; top: 12px; left: 14px; font: 500 10.5px/1 Geist, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; }
.obra-cubierta { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 13px; font-family: var(--serif); font-size: clamp(20px, calc(var(--ancho, 280px) * 0.1), 34px); line-height: 1; color: #fff; }
.obra-lomo { display: none; }
.obra-detalle ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.obra-detalle li { padding: 4px 10px; border: 1px solid var(--linea); border-radius: 999px; font-size: 13px; }

/* Sin JavaScript o con «reducir movimiento»: una fila que se desliza. */
.obras:not(.con-js) { padding: clamp(96px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); }
.obras:not(.con-js) .obras-escena { padding: 0 var(--borde); }
.obras:not(.con-js) .estanteria { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 28px 0 8px; }
.obras:not(.con-js) .obra { flex: 0 0 min(72vw, 300px); scroll-snap-align: start; }
.obras:not(.con-js) .obra-frente { aspect-ratio: 3 / 4; }
.obras:not(.con-js) .obra-detalle { margin-top: 12px; color: var(--tinta-2); font-size: 15px; }
.obras:not(.con-js) .obra-detalle p { margin: 0; }
.obras:not(.con-js) .obras-pie, .obras:not(.con-js) .obras-regla, .obras:not(.con-js) .obras-fondo { display: none; }

/* Con JavaScript: la estantería en 3D, fija mientras se baja. Como la película, ocupa la pantalla entera aunque se
   esconda la barra del navegador; aquí lo de abajo (nombre, flechas y regla) sigue al borde de lo que se ve (100dvh),
   con una transición suave cuando la barra entra o sale. Con el dedo, deslizar a los lados pasa de obra (js/obras.js). */
.obras.con-js { height: 560vh; }
.obras.con-js .obras-escena {
  --tapa: 0px; position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  padding: 96px var(--borde) calc(26px + var(--tapa, 0px)); touch-action: pan-y pinch-zoom; transition: padding-bottom 0.3s ease;
}
@supports (height: 100dvh) {
  .obras.con-js .obras-escena { --tapa: calc(100lvh - 100dvh); }
}
.obras.con-js .obra-detalle { display: none; }
.obras-fondo { position: absolute; z-index: 0; top: 54%; translate: 0 -50%; margin: 0; pointer-events: none; user-select: none;
  font-family: var(--serif); font-style: italic; font-size: clamp(110px, 17vw, 300px); line-height: 0.8; color: rgb(31 27 22 / 0.055); }
.obras-fondo-izq { left: -0.05em; }
.obras-fondo-der { right: -0.05em; }

.obras.con-js .estanteria { --ancho: clamp(190px, 19vw, 310px); position: relative; z-index: 1; display: grid; place-items: center; min-height: 0; perspective: 1700px; perspective-origin: 50% 42%; }
.obras.con-js .estanteria::after { content: ""; position: absolute; left: 12%; right: 12%; top: calc(50% + var(--ancho) * 2 / 3 + 4px); height: 34px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(31 27 22 / 0.22), transparent); filter: blur(3px); }
.obras.con-js .obra { position: absolute; width: var(--ancho); aspect-ratio: 3 / 4; transform-style: preserve-3d; will-change: transform; }
.obras.con-js .obra-caja { position: absolute; inset: 0; transform-style: preserve-3d; }
.obras.con-js .obra-frente { position: absolute; inset: 0; transform: translateZ(calc(var(--lomo, 40px) / 2)); box-shadow: 0 34px 50px -26px rgb(31 27 22 / 0.45); }
.obras.con-js .obra-lomo {
  position: absolute; top: 0; left: 50%; width: var(--lomo, 40px); height: 100%; margin-left: calc(var(--lomo, 40px) / -2);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 0 14px; overflow: hidden;
  background: var(--color); color: rgb(255 255 255 / 0.95);
  box-shadow: inset 2px 0 0 rgb(255 255 255 / 0.12), inset -2px 0 0 rgb(0 0 0 / 0.14);
}
.obras.con-js .obra-lomo.izq { transform: rotateY(-90deg) translateZ(calc(var(--ancho) / 2)); }
.obras.con-js .obra-lomo.der { transform: rotateY(90deg) translateZ(calc(var(--ancho) / 2)); }
.lomo-marca { font-family: var(--serif); font-style: italic; font-size: calc(var(--lomo, 40px) * 0.42); line-height: 1; }
.lomo-titulo { flex: 1; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-family: var(--serif); font-size: calc(var(--lomo, 40px) * 0.5); line-height: 1; }
.lomo-num { font: 600 calc(var(--lomo, 40px) * 0.24)/1 Geist, sans-serif; letter-spacing: 0.08em; }
/* El texto del lomo sale del CSS: repite el de la tarjeta y es solo decoración, así no cuenta como texto del botón. */
.lomo-marca::before { content: "E"; }
.lomo-titulo::before, .lomo-num::before { content: attr(data-t); }
.obra.es-centro .obra-caja:focus-visible .obra-frente { outline: 2px solid var(--terracota); outline-offset: 4px; }
.obra:nth-child(1) { --color: #b4532f; }
.obra:nth-child(2) { --color: #6f7a4a; }
.obra:nth-child(3) { --color: #5d7280; }
.obra:nth-child(4) { --color: #2f5d8c; }
.obra:nth-child(5) { --color: #b99067; }
.obra:nth-child(6) { --color: #b8812b; }
.obra:nth-child(7) { --color: #9a8f78; }
.obra:nth-child(8) { --color: #7d9170; }
.obra:nth-child(9) { --color: #9c6b4e; }
.obra:nth-child(10) { --color: #2b2722; }

.obras-pie { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; max-width: 760px; width: 100%; margin: 0 auto; }
.obras-info { text-align: center; }
.obras-info p { margin: 0; }
.obras-nombre { font-family: var(--serif); font-size: clamp(34px, 3.8vw, 58px); line-height: 1; color: var(--terracota); }
.obras-tipo { margin-top: 8px !important; font: 500 11.5px/1.3 Geist, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2); }
.obras-datos { margin-top: 4px !important; font-size: 14.5px; color: var(--tinta-2); }
.obras-info.cambia > * { animation: cambia 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.obras-info.cambia > :nth-child(2) { animation-delay: 0.04s; }
.obras-info.cambia > :nth-child(3) { animation-delay: 0.08s; }
@keyframes cambia { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.obras-flecha { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linea); background: rgb(255 255 255 / 0.5); color: var(--tinta); font-size: 18px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.obras-flecha:hover { background: #fff; border-color: var(--tinta); }

.obras-regla { position: relative; z-index: 2; height: 30px; margin-top: 18px; container-type: inline-size; }
.obras-regla::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(31 27 22 / 0.2); }
.obras-regla ol { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; font: 500 10.5px/1 Geist, sans-serif; letter-spacing: 0.08em; color: var(--tinta-2); }
.obras-regla li { position: relative; width: 0; padding-top: 10px; display: flex; justify-content: center; }
.obras-regla li::before { content: ""; position: absolute; top: -3px; left: 0; width: 1px; height: 7px; background: rgb(31 27 22 / 0.35); }
.obras-punto { position: absolute; left: -5px; top: -5px; width: 11px; height: 11px; border-radius: 50%; background: var(--terracota); box-shadow: 0 0 0 4px rgb(180 83 47 / 0.18);
  transform: translateX(calc(var(--x, 0) * 100cqw)); }
.obras-cuenta { position: absolute; right: 0; bottom: 100%; margin: 0 0 10px; font: 500 11.5px/1 Geist, sans-serif; letter-spacing: 0.16em; color: var(--tinta-2); }

/* ---------- Ficha de cada obra ---------- */

.ficha-obra { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--papel); color: var(--tinta); overflow: hidden; }
.ficha-obra[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.ficha-obra::backdrop { background: var(--papel); }
.ficha-obra-texto { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; overflow: auto; padding: 96px clamp(24px, 5vw, 88px) 48px; }
.ficha-cerrar { position: absolute; top: 26px; left: clamp(24px, 5vw, 88px); padding: 9px 15px; border: 1px solid var(--tinta); border-radius: 999px; background: transparent; color: var(--tinta);
  font: 500 11.5px/1 Geist, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; }
.ficha-cerrar:hover { background: var(--tinta); color: var(--papel); }
.ficha-num { color: var(--terracota-texto); }
.ficha-titulo { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 6vw, 104px); line-height: 0.92; letter-spacing: -0.01em; color: var(--terracota); }
.ficha-meta { margin: 0; font: 500 12px/1.4 Geist, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-2); }
.ficha-desc p { margin: 6px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--tinta-2); }
.ficha-etiqueta { margin-top: 10px; color: var(--tinta-2); }
.ficha-hicimos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ficha-hicimos li { padding: 7px 13px; border: 1px solid var(--linea); border-radius: 999px; font-size: 14px; }
.ficha-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.ficha-obra-foto { margin: 0; min-height: 0; }
.ficha-obra-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
html:has(.ficha-obra[open]) { overflow: hidden; }
::view-transition-group(obra-foto) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* ---------- Qué reformamos, quiénes somos y llamada ---------- */

.servicios { padding: clamp(80px, 10vw, 150px) var(--borde) clamp(48px, 6vw, 90px); }
.servicios-cabeza { display: grid; gap: 14px; max-width: 1000px; margin-bottom: clamp(36px, 5vw, 64px); }
.servicios-cabeza .antetitulo, .estudio-texto .antetitulo { color: var(--terracota-texto); }
.servicios h2, .estudio h2, .llamada h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 88px); line-height: 0.96; letter-spacing: -0.01em; text-wrap: balance; }
.servicios h2 em, .estudio h2 em, .llamada h2 em { color: var(--terracota); }
.servicios-lista { margin: 0; padding: 0; list-style: none; counter-reset: servicio; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 32px; border-top: 1px solid var(--linea); }
.servicios-lista li { counter-increment: servicio; display: grid; align-content: start; gap: 8px; padding: 26px 0 30px; border-bottom: 1px solid var(--linea); }
.servicios-lista li::before { content: counter(servicio, decimal-leading-zero); font: 500 11.5px/1 Geist, sans-serif; letter-spacing: 0.16em; color: var(--terracota-texto); }
.servicios-lista h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.05; }
.servicios-lista p { margin: 0; max-width: 36ch; color: var(--tinta-2); }

.estudio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 5vw, 96px); padding: clamp(64px, 8vw, 120px) var(--borde); background: var(--papel-2); }
.estudio-texto h2 { margin-top: 16px; }
.estudio-texto p:not(.antetitulo) { max-width: 52ch; margin: 18px 0 0; font-size: 18px; color: var(--tinta-2); }
.estudio-datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.estudio-datos div { padding-top: 14px; border-top: 1px solid var(--linea); }
.estudio-datos dt { font: 500 11.5px/1.3 Geist, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); }
.estudio-datos dd { margin: 6px 0 0; font-family: var(--serif); font-size: 26px; line-height: 1.1; }

.llamada { display: grid; justify-items: center; gap: 22px; padding: clamp(80px, 10vw, 150px) var(--borde); text-align: center; }
.llamada p { max-width: 50ch; margin: 0; font-size: 18px; color: var(--tinta-2); }
.llamada .botones { justify-content: center; }


/* ---------- Opiniones (como las de Google de la carnicería, con la estética de Escuadra) ---------- */

.opiniones { padding: clamp(72px, 9vw, 130px) 0 clamp(60px, 8vw, 110px); background: var(--tinta); color: var(--papel); overflow: hidden; }
.opiniones-cabeza { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: clamp(28px, 5vw, 90px); padding: 0 var(--borde); margin-bottom: clamp(34px, 5vw, 58px); }
.opiniones .antetitulo { color: var(--terracota-claro); }
.opiniones h2 { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 88px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.opiniones h2 em { color: var(--terracota-claro); }
.opiniones-entrada { max-width: 46ch; margin: 18px 0 0; font-size: 18px; color: rgb(247 242 234 / 0.72); }

/* La nota de Google: el número grande, sus estrellas y el reparto. */
.nota-google { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 22px; padding: 26px 28px; border-radius: 22px; background: rgb(247 242 234 / 0.06); box-shadow: inset 0 0 0 1px rgb(247 242 234 / 0.13); }
.nota-numero { margin: 0; font: 400 clamp(76px, 7.4vw, 108px)/0.8 var(--serif); letter-spacing: -0.02em; }
.nota-detalle { display: grid; gap: 10px; }
.nota-total { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; color: rgb(247 242 234 / 0.78); }
.nota-total img { flex: none; padding: 3px; border-radius: 50%; background: #fff; width: 24px; height: 24px; }
.reparto { grid-column: 1 / -1; display: grid; gap: 6px; margin: 8px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid rgb(247 242 234 / 0.13); font: 500 12px/1 Geist, sans-serif; color: rgb(247 242 234 / 0.7); }
.reparto li { display: grid; grid-template-columns: 12px minmax(0, 1fr); align-items: center; gap: 10px; }
.reparto .tramo { position: relative; height: 6px; border-radius: 6px; background: rgb(247 242 234 / 0.12); overflow: hidden; }
.reparto .tramo::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--ancho, 0%); border-radius: inherit; background: var(--terracota-claro); }
.b92 { --ancho: 92%; } .b6 { --ancho: 6%; } .b2 { --ancho: 2%; } .b1 { --ancho: 1%; } .b0 { --ancho: 0%; }

/* Estrellas: una sola pieza recortada con la forma de la estrella (img/estrella.svg) y rellena hasta su nota. */
.estrellas { --lleno: 100%; --vacia: rgb(31 27 22 / 0.16); --llena: var(--terracota); display: inline-block; flex: none; width: 86px; height: 16px;
  background: linear-gradient(90deg, var(--llena) var(--lleno), var(--vacia) 0);
  -webkit-mask: url(../img/estrella.svg) 0 0 / 17.2px 16px repeat-x; mask: url(../img/estrella.svg) 0 0 / 17.2px 16px repeat-x; }
.estrellas.e4 { --lleno: 80%; }
.estrellas.e49 { --lleno: 98%; --vacia: rgb(247 242 234 / 0.22); --llena: var(--terracota-claro); width: 107.5px; height: 20px;
  -webkit-mask-size: 21.5px 20px; mask-size: 21.5px 20px; }

/* La fila de opiniones: siempre tarjetas enteras, nunca una cortada por el borde. Caben las que deje el ancho de la fila
   (una en el móvil; dos, tres o cuatro en pantallas más anchas) y se pasa de una en una: con el dedo, la rueda, el
   teclado o las flechas. */
.opiniones-pista { --hueco: 18px; container-type: inline-size; margin: 0 var(--borde); padding: 4px 0 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.opiniones-pista::-webkit-scrollbar { display: none; }
.opiniones-pista:focus-visible { outline: 2px solid var(--terracota-claro); outline-offset: 4px; border-radius: 12px; }
.opiniones-lista { --n: 1; display: flex; gap: var(--hueco); width: max-content; margin: 0; padding: 0; list-style: none; }
@container (min-width: 620px) { .opiniones-lista { --n: 2; } }
@container (min-width: 1000px) { .opiniones-lista { --n: 3; } }
@container (min-width: 1480px) { .opiniones-lista { --n: 4; } }
.opinion { display: flex; width: calc((100cqw - (var(--n) - 1) * var(--hueco)) / var(--n)); scroll-snap-align: start; scroll-snap-stop: always; }
.opinion article { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 24px 24px 22px; border-radius: 20px; background: var(--papel); color: var(--tinta); }
.opinion-cabeza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.opinion-inicial { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c); color: #fff; font: 500 17px/1 Geist, sans-serif; }
.c1 { --c: #9e4526; } .c2 { --c: #55603a; } .c3 { --c: #46596a; } .c4 { --c: #2f5d8c; } .c5 { --c: #7a5236; } .c6 { --c: #82591a; }
.opinion-nombre { margin: 0; font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.opinion-obra { margin: 2px 0 0; font-size: 13px; line-height: 1.3; color: var(--tinta-2); }
.opinion-g { align-self: start; }
.opinion-nota { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--tinta-2); }
.opinion-texto { margin: 0; font-size: 15.5px; line-height: 1.6; }
.opinion-texto::before { content: "\201C"; display: block; height: 26px; font: 400 64px/1 var(--serif); color: var(--terracota); }
.opinion-texto p { margin: 0; }
.opinion-respuesta { margin-top: auto; padding: 13px 15px; border-radius: 14px; background: var(--papel-2); font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.opinion-respuesta p { margin: 0; }
.respuesta-quien { margin-bottom: 4px !important; font-weight: 600; font-size: 13px; color: var(--tinta); }

.opiniones-mandos { display: flex; align-items: center; gap: 12px; padding: 6px var(--borde) 0; }
.opiniones-progreso { position: relative; flex: 1; height: 2px; margin-right: 14px; overflow: hidden; border-radius: 2px; background: rgb(247 242 234 / 0.16); }
.opiniones-progreso i { position: absolute; inset: 0 auto 0 0; width: var(--ancho, 30%); transform: translateX(var(--x, 0%)); border-radius: inherit; background: var(--terracota-claro); }
.opiniones-flecha { width: 48px; height: 48px; border: 1px solid rgb(247 242 234 / 0.3); border-radius: 50%; background: transparent; color: var(--papel); font-size: 18px; cursor: pointer; transition: background-color 0.2s, color 0.2s, opacity 0.2s; }
.opiniones-flecha:hover:not(:disabled) { background: var(--papel); color: var(--tinta); }
.opiniones-flecha:disabled { opacity: 0.35; cursor: default; }


/* ---------- Versión quieta ---------- */

.quieta { display: none; }
.quieta .portada, .quieta .velo-titulo { animation: none; }
.quieta-portada { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.quieta-portada img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quieta-fases { display: grid; gap: clamp(20px, 3vw, 36px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); padding: clamp(40px, 6vw, 80px) var(--borde) 0; }
.quieta-fases figure { margin: 0; }
.quieta-fases img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.quieta-fases figcaption { padding-top: 12px; }
.quieta-fases .antetitulo { color: var(--terracota-texto); margin-bottom: 6px; }
.quieta-fases h2 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.1; }
.quieta-fases .texto { margin: 0; color: var(--tinta-2); }

@supports not (animation-timeline: view()) {
  .pelicula { display: none; }
  .quieta { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .pelicula { display: none; }
  .quieta { display: block; }
}

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
  /* Más corta que en el ordenador: con el dedo, cada gesto avanza más. */
  .pelicula { height: 600vh; }
  .portada { top: 76px; }
  .portada h1, .titulo-quieto { font-size: clamp(46px, 13.5vw, 70px); }
  .entradilla { font-size: 15.5px; max-width: 30ch; }
  .portada-pie { bottom: calc(104px + var(--tapa, 0px)); right: var(--borde); }
  .portada .antetitulo { font-size: 11px; letter-spacing: 0.1em; }
  .velo-portada { background: linear-gradient(to top, rgb(22 15 9 / 0.72), rgb(22 15 9 / 0.38) 38%, transparent 62%); }
  .desliza { bottom: calc(22px + var(--tapa, 0px)); }
  .portada-pie p { font-size: 16px; }
  .velo-arriba { height: 22%; }
  .notas { width: auto; right: var(--borde); bottom: calc(var(--borde) + 74px + var(--tapa, 0px)); height: 250px; }
  .nota h2 { font-size: 30px; margin-bottom: 8px; }
  .nota .texto { font-size: 15px; }
  .cifras { gap: 4px 16px; font-size: 10.5px; }
  .cifras b { font-size: 24px; }
  .cuenta { right: auto; left: 0; bottom: 32px; }
  .regla li:not(:first-child):not(:last-child) span { display: none; }
  .obras.con-js .obras-escena { padding: 80px var(--borde) calc(20px + var(--tapa, 0px)); }
  .obras-cabeza h2 { font-size: 32px; }
  .obras-entrada { display: none; }
  .obras.con-js .estanteria { --ancho: 44vw; perspective: 1100px; }
  .obras-fondo { font-size: 30vw; top: 50%; }
  .obras-pie { gap: 10px; }
  .obras-flecha { width: 40px; height: 40px; }
  .obras-nombre { font-size: 32px; }
  .obras-regla li:not(:first-child):not(:last-child) span { display: none; }
  .ficha-obra[open] { grid-template-columns: 1fr; grid-template-rows: 44svh auto; overflow-y: auto; }
  .ficha-obra-foto { grid-row: 1; }
  .ficha-obra-texto { grid-row: 2; justify-content: start; overflow: visible; padding: 26px var(--borde) calc(64px + env(safe-area-inset-bottom)); }
  .ficha-botones { gap: 14px; margin-top: 20px; }
  .ficha-cerrar { position: fixed; z-index: 2; top: 14px; left: 14px; background: var(--papel); }
  .ficha-titulo { font-size: 46px; }
  .estudio { grid-template-columns: 1fr; }
  .opiniones-cabeza { grid-template-columns: 1fr; align-items: start; }
  .opiniones-entrada { font-size: 16px; }
  .nota-google { padding: 22px; }
  .opiniones-flecha { width: 42px; height: 42px; font-size: 16px; }
}