/* Home. La apertura replica la de luxury-places.ch: título centrado, tres
   fotos y la central se abre con el scroll hasta llenar la pantalla; luego
   cada categoría es una foto a pantalla completa con su título fijo al centro
   y un contador 01–04 a la derecha. */

.cabeza {
  display: grid; justify-items: center; gap: clamp(20px, 2.6vw, 36px); text-align: center;
  padding-top: clamp(120px, 17vh, 190px); padding-bottom: clamp(36px, 6vh, 64px);
}
.cabeza-pie { width: 100%; display: flex; align-items: center; justify-content: space-between; }

/* --- Categorías --- */
/* Las fotos de los lados de la apertura viven fuera de la pantalla: se recortan
   aquí para que la página no se deje mover a los lados (clip no rompe sticky). */
.categorias { position: relative; overflow-x: clip; }
.categoria { position: relative; height: var(--alto); overflow: hidden; color: var(--blanco); }
.categoria-foto, .categoria-fijo { position: absolute; inset: 0; overflow: hidden; }
.categoria-foto img {
  position: absolute; left: 0; top: 0; width: 100%; height: 120%; object-fit: cover;
  will-change: transform;
}
/* Velo para que el título blanco se lea sobre cualquier foto. */
.categoria-foto::after, .categoria-fijo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.32));
}
.categoria-texto {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: 28px var(--margen) 0;
}
.categoria-rotulo { position: sticky; top: 50%; transform: translateY(-50%); }
.categoria-titulo { text-shadow: 0 1px 24px rgba(0,0,0,.18); }
.categoria-dato { margin-top: 8px; opacity: .85; }
/* Texto chico en blanco sobre fotos (dato, etapas, contador): sombra para
   que se lea también sobre cielo o techos claros (Charlotte daba 1.7:1). */
.categoria-dato, .categoria .etapas, .obra-dato, .obra .etapas, .contador {
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 16px rgba(0,0,0,.4);
}
.categoria--secuencia:not(.oscura) .categoria-dato, .categoria--secuencia:not(.oscura) .etapas { text-shadow: none; }
.contador.oscuro { text-shadow: none; }
.categoria-enlace { position: absolute; inset: 0; z-index: 1; }
/* Sin ratón no hay cursor que diga «Ver proyectos» sobre la foto: en
   pantallas táctiles el botón va visible bajo el dato, como hace la
   referencia en celular. Solo es la seña; el toque lo recibe el enlace. */
.categoria-boton { display: none; margin-top: 18px; }
@media (hover: none) { .categoria-boton { display: block; } }

/* Primera categoría: la ventana que se abre. */
.categoria--zoom { overflow: visible; }
.zoom { position: absolute; inset: 0; }
.zoom-item { position: absolute; top: 0; height: 100%; overflow: hidden; }
.zoom-item--centro { left: 50%; width: 39vw; transform: translateX(-50%); }
.zoom-item--lado { width: 100vw; display: flex; align-items: center; }
.zoom-item--lado img { width: 100%; height: 63%; object-fit: cover; }
.zoom-interior {
  position: absolute; left: 50%; top: 0; width: 100vw; height: 100%;
  transform: translateX(-50%); transform-origin: 50% 50%; will-change: transform;
}
.zoom-interior img { width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.zoom-interior::after {
  content: ""; position: absolute; inset: 0; opacity: var(--velo, 0);
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.32));
}
.categorias-recorte { overflow: hidden; }

/* Contador 01 ▭▭▭▭ 04 */
.contador {
  position: fixed; right: var(--margen); top: 50%; z-index: 20; transform: translateY(-50%);
  display: flex; align-items: center; gap: 12px; color: var(--blanco);
  opacity: 0; transition: opacity .5s var(--curva), color .5s var(--curva); pointer-events: none;
}
.contador.visible { opacity: 1; }
.contador.oscuro { color: var(--tinta); }
.contador-num { position: relative; height: 1.66em; overflow: hidden; }
.contador-rodillo { display: flex; flex-direction: column; transition: transform .8s var(--curva); }
.contador-rodillo span { height: 1.66em; }
.contador-barras { display: flex; gap: 3px; }
.contador-barras i { width: 14px; height: 9px; border: 1px solid currentColor; opacity: .45; transition: opacity .5s var(--curva), background-color .5s var(--curva); }
.contador-barras i.activa { opacity: 1; }

/* Cuarta categoría: secuencia del plano a la obra, fija mientras se recorre. */
.categoria--secuencia { height: calc(var(--alto) * 3.4); overflow: visible; }
.categoria-fijo { position: sticky; top: 0; height: var(--alto); }
.categoria-fijo video, .categoria-fijo .fija { position: absolute; inset: 0; width: 100%; height: 100%; }
.categoria-fijo video { object-fit: cover; }
.categoria-fijo .fija { object-fit: cover; opacity: 0; z-index: 1; pointer-events: none; }
.categoria-fijo::after { z-index: 1; opacity: 0; transition: opacity .8s var(--curva); }
/* Ya en la casa el título pasa a blanco sobre un render muy claro (arena y
   azoteas blancas): un velo oscuro a la izquierda, el espejo del claro de
   arriba, para que se lea. */
.categoria--secuencia .categoria-fijo::after {
  background:
    radial-gradient(60% 40% at 0% 50%, rgba(0,0,0,.45), rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.32));
}
.categoria--secuencia.oscura .categoria-fijo::after { opacity: 1; }
/* Mientras se ve el plano, un velo claro detrás del título para que no se
   mezcle con las líneas del dibujo. */
.categoria--secuencia .categoria-fijo::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 40% at 0% 50%, rgba(240,240,240,.9), rgba(240,240,240,0) 70%);
  transition: opacity .8s var(--curva);
}
.categoria--secuencia.oscura .categoria-fijo::before { opacity: 0; }
.categoria--secuencia .categoria-texto { color: var(--tinta); transition: color .6s var(--curva); }
.categoria--secuencia.oscura .categoria-texto { color: var(--blanco); }
.categoria--secuencia .categoria-titulo { text-shadow: none; }
.categoria--secuencia.oscura .categoria-titulo { text-shadow: 0 1px 24px rgba(0,0,0,.2); }
.etapas { display: flex; gap: 18px; margin-top: 14px; }
/* Cada etapa lleva a su punto del recorrido (home.js); el rótulo que las
   contiene no recibe toques, ellas sí. */
.etapas li { opacity: .6; transition: opacity .5s var(--curva); cursor: pointer; pointer-events: auto; padding-block: 6px; margin-block: -6px; }
.etapas li.activa { opacity: 1; }

.cierre { min-height: 40vh; }

@media (max-width: 760px) {
  .zoom-item--centro { width: 64vw; }
  /* Al 50 % chocaba con el dato de cada categoría, que aquí ocupa todo el ancho. */
  .contador { gap: 8px; top: auto; bottom: 24px; transform: none; }
  .contador-barras i { width: 10px; height: 7px; }
  /* Aquí el título cruza todo el ancho: el velo claro se alarga detrás de él. */
  .categoria--secuencia .categoria-fijo::before {
    background: radial-gradient(85% 17% at 30% 50%, rgba(240,240,240,.93), rgba(240,240,240,.7) 55%, rgba(240,240,240,0) 100%);
  }
  .categoria--secuencia .categoria-fijo::after {
    background:
      radial-gradient(95% 22% at 30% 50%, rgba(0,0,0,.5), rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%),
      linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.32));
  }
  .etapas { flex-wrap: wrap; gap: 6px 14px; }
  .etapas li { white-space: nowrap; }
  /* Los filtros parten en dos renglones: sin puntos, que quedaban al inicio
     del segundo. */
  .filtros { gap: 4px 18px; }
  .filtros li + li::before { display: none; }
}

/* --- Selección de proyectos (como «Notre sélection» de la referencia):
   la tarjeta activa es más grande; las demás esperan a la derecha. --- */
.seleccion { padding: clamp(90px, 15vh, 170px) 0 clamp(70px, 11vh, 130px); }
.seleccion-cabeza { display: grid; justify-items: center; gap: 24px; text-align: center; margin-bottom: clamp(40px, 7vh, 84px); }
.filtros { justify-content: center; margin-top: 6px; }
.filtros button { font-size: 12px; line-height: 1.66; text-transform: uppercase; color: var(--gris-claro); transition: color .4s var(--curva); }
.filtros button:hover, .filtros button[aria-pressed="true"] { color: var(--tinta); }
/* La posición y el ancho de cada tarjeta los pinta home.js cuadro a cuadro
   (siguen al dedo al arrastrar), así que aquí no hay transiciones. */
.carrusel { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.carrusel-pista { position: relative; touch-action: pan-y; }
.carrusel-pista > li { position: absolute; left: var(--margen); top: 0; will-change: transform; }
.tarjeta { width: 22vw; }
.tarjeta a { display: block; -webkit-user-drag: none; }
.tarjeta img { -webkit-user-drag: none; }
.tarjeta-foto { aspect-ratio: 4 / 5; overflow: hidden; background: #e3e3e3; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); }
.tarjeta a:hover .tarjeta-foto img { transform: scale(1.04); }
.tarjeta-meta { margin-top: 14px; color: var(--gris); }
.tarjeta-titulo { margin-top: 6px; font-size: clamp(15px, 1.35vw, 19px); font-weight: 400; line-height: 1.3; }
.tarjeta-zona { margin-top: 4px; font-size: 13px; color: var(--gris); }
/* Estado y cifras en una sola línea; lo que no quepa baja y queda oculto. */
.tarjeta-cifras { display: flex; flex-wrap: wrap; column-gap: 12px; height: 20px; overflow: hidden; }
.tarjeta-cifras > span { display: inline-flex; align-items: center; gap: 6px; }
.tarjeta-cifras .cifra { text-transform: none; }
.tarjeta-cifras svg { width: 14px; height: 14px; color: var(--tinta); }
.carrusel-flechas { display: flex; justify-content: flex-end; gap: 4px; margin-top: 28px; }
.flecha-boton {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 2px;
  background: var(--tinta); color: var(--blanco); transition: opacity .4s var(--curva), background-color .4s var(--curva);
}
.flecha-boton:hover { background: #2b2b2b; }
.flecha-boton svg { width: 12px; height: 12px; }
.flecha-boton:disabled { opacity: .22; cursor: default; }

/* --- Bloques de texto con foto (como «L'expertise» y «L'univers») --- */
.mixto {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start;
  padding-top: clamp(80px, 12vh, 150px); padding-bottom: clamp(80px, 12vh, 150px);
}
.mixto-foto { overflow: hidden; aspect-ratio: 1 / 1.04; }
.mixto-foto img { width: 100%; height: 100%; object-fit: cover; }
/* Servicios: filas numeradas con línea fina. Al entrar, cada línea se dibuja
   de izquierda a derecha y el texto sube desde su máscara, uno tras otro. */
.servicios li {
  position: relative; display: grid; grid-template-columns: 48px 1fr; padding: 13px 0; overflow: hidden;
}
.servicios li::before, .servicios li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea);
  transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--curva) calc(var(--i) * 80ms);
}
.servicios li:last-child::after { top: auto; bottom: 0; }
.servicios li > span { display: block; transform: translateY(115%); transition: transform 1.05s var(--curva) calc(var(--i) * 80ms + 140ms); }
.servicios li > span:first-child { color: var(--gris-claro); }
.servicios.visible li::before, .servicios.visible li:last-child::after { transform: none; }
.servicios.visible li > span { transform: none; }
.mixto-parrafos p { font-size: 13px; line-height: 1.65; color: var(--gris); }
.mixto-parrafos .mixto-entrada { color: var(--tinta); font-weight: 500; margin-bottom: 14px; }
.mixto-boton { justify-self: start; }

.mixto--foto-der .mixto-titulo { grid-column: 1 / 8; grid-row: 1; }
/* La foto ocupa todo el alto del bloque y el botón cae al pie, alineado con
   ella, como en la referencia. */
.mixto--foto-der .mixto-lista { grid-column: 1 / 6; grid-row: 2; margin-top: 36px; }
.mixto--foto-der .mixto-parrafos { grid-column: 5 / 8; grid-row: 3; margin-top: 40px; }
.mixto--foto-der .mixto-boton { grid-column: 1 / 5; grid-row: 4; margin-top: 40px; align-self: end; }
.mixto--foto-der .mixto-foto { grid-column: 8 / 13; grid-row: 1 / 5; align-self: stretch; aspect-ratio: auto; min-height: 44vw; }

.mixto--foto-izq .mixto-foto { grid-column: 1 / 6; grid-row: 1 / 5; align-self: stretch; aspect-ratio: auto; min-height: 40vw; }
.mixto--foto-izq .mixto-titulo { grid-column: 7 / 13; grid-row: 1; }
.mixto--foto-izq .mixto-parrafos { grid-column: 10 / 13; grid-row: 3; margin-top: 48px; }
.mixto--foto-izq .mixto-boton { grid-column: 7 / 10; grid-row: 4; margin-top: 40px; align-self: end; }

/* Los dos socios, en el mismo orden en que salen en la foto. */
.socios {
  grid-column: 7 / 13; grid-row: 2; margin-top: clamp(48px, 10vh, 120px);
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px;
}
.socio { border-top: 1px solid var(--linea); padding-top: 18px; }
.socio-nombre { font-size: clamp(18px, 1.55vw, 24px); font-weight: 300; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
.socio-dato { margin-top: 10px; max-width: 34ch; font-size: 13px; line-height: 1.65; color: var(--gris); }

/* --- Del terreno a la casa (como «demonstration»): entra en recuadro sobre
   negro y se abre a pantalla completa; luego avanza con el scroll. --- */
/* 6.3 pantallas de alto. El 13-nov-2026 pasó de 3.6 a 5 (Mario lo sintió muy
   rápido) y luego a 6.3 al sumar las etapas de cimentación y firme (de 573 a
   726 cuadros), para que cada etapa avance al mismo ritmo que ya le gustó.
   Después Mario la pidió 5 % más corta (10 % le quedó muy rápido): el
   recorrido pasó de 5.3 a 5.04 pantallas (alto 6.04). */
.obra { position: relative; height: calc(var(--alto) * 6.04); background: #000; color: var(--blanco); }
.obra-fijo { position: sticky; top: 0; height: var(--alto); overflow: hidden; }
.obra-marco {
  position: absolute; inset: 0; will-change: clip-path;
  clip-path: inset(calc(var(--k, 1) * 9%) calc(var(--k, 1) * 7%));
}
.obra-marco video, .obra-marco .fija { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.obra-marco .fija { opacity: 0; z-index: 1; pointer-events: none; }
.obra-marco::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(90% 60% at 0% 100%, rgba(0,0,0,.5), transparent 60%);
}
.obra-texto { position: absolute; left: 0; bottom: calc(clamp(28px, 8vh, 80px) + var(--barra)); z-index: 3; }
.obra-dato { margin-top: 8px; opacity: .85; }

/* --- Bitácora (en el lugar de «Le journal»): carrusel de reels --- */
.bitacora { padding-top: clamp(80px, 13vh, 150px); padding-bottom: clamp(90px, 14vh, 170px); }
.bitacora-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(40px, 7vh, 84px); }
.video-marco { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #dcdcdc; }
.video-marco img, .video-marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-marco video { opacity: 0; transition: opacity .6s var(--curva); }
.video-marco video.reproduciendo { opacity: 1; }
.video-marco::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 26%);
}
.video-duracion {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; gap: 7px;
  color: var(--blanco);
}
.video-duracion svg { width: 9px; height: 9px; }

@media (max-width: 760px) {
  .mixto { grid-template-columns: 1fr; row-gap: 0; }
  .mixto .mixto-titulo, .mixto .mixto-lista, .mixto .mixto-parrafos, .mixto .mixto-boton, .mixto .mixto-foto { grid-column: 1; grid-row: auto; }
  .mixto .mixto-foto { order: 2; margin-top: 32px; min-height: 0; aspect-ratio: 4 / 5; }
  .mixto .mixto-lista { order: 3; margin-top: 32px; }
  .mixto .mixto-parrafos { order: 4; margin-top: 28px; }
  .mixto .mixto-boton { order: 5; margin-top: 32px; }
  .mixto--foto-izq .mixto-titulo { order: 1; }
  .socios { grid-column: 1; grid-row: auto; order: 3; grid-template-columns: 1fr; row-gap: 24px; margin-top: 32px; }
  .bitacora-cabeza { flex-direction: column; align-items: flex-start; }
}

/* Con el dedo: los filtros parten en dos renglones; área de toque más alta y
   renglones más separados para que no se encimen. */
@media (pointer: coarse) {
  .filtros button { padding-block: 8px; margin-block: -8px; }
  .filtros { row-gap: 16px; }
}