/* ============================================================
   DIVISIONES — estilos compartidos por las 6 páginas de división
   (obras, energéticos, desarrollos, real estate, vigilancia,
   gastronómica). Hereda tokens y componentes de main.css.
   Mismo lenguaje del index / quienes-somos: ritmo claro/oscuro,
   dorado/ámbar, kicker sin línea, aurora en oscuro, reveal.
   Prefijo .div-* para no colisionar.
   ============================================================ */

/* La página interior no corre el FLIP del logo (no hay .nav__logo--hidden-hero).
   El nav-logo se queda estático, igual que en quienes-somos. */
.page-div .nav__logo { position: static; opacity: 1; transform: none; }
.page-div .nav__logo img { height: 44px; }   /* mismo tamaño que quienes-somos */
@media (min-width: 769px) {
  .page-div .nav__logo { margin-right: 0; }
  /* El spacer reserva el hueco donde ATERRIZA el logo del FLIP (index). Aquí
     el logo ya está en su sitio: sin ocultarlo se pintan los dos y la pill
     sale ~90px más ancha que en index/quienes-somos (el logo se corre a la
     izquierda). quienes-somos.css ya lo ocultaba; esta regla faltaba. */
  .page-div .nav__logo-spacer { display: none; }
}

/* En el index el correo+redes del centro móvil aparecen solo al hacer scroll
   (arriba el logo grande del FLIP ocupa el centro). Aquí no hay logo grande:
   se ven SIEMPRE, también en el tope. */
@media (max-width: 768px) {
  .page-div .nav__center {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
}
/* (El nav claro sobre secciones hueso — .nav--on-light — vive en main.css:
   aplica a las 3 páginas: index, quienes-somos y divisiones.) */

/* Kicker unificado (sin línea, solo texto) — como todo el sitio */
.div-kicker {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}
.div-kicker--amber { color: #b47b1e; }   /* ámbar oscuro legible sobre hueso */
.div-em { color: var(--dorado); }

/* Justificado — directriz de Gonzalo */
.div-desc__text,
.div-galeria__sub,
.div-hero__lead {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
}

/* ================================================================
   HERO (oscuro, foto real) — mismo patrón que qs-hero
   ================================================================ */
.div-hero {
  position: relative;
  min-height: calc(var(--vh-stable, 1dvh) * 100);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(8rem, 16vh, 12rem) clamp(3rem, 8vh, 6rem);
}
.div-hero__media { position: absolute; inset: 0; z-index: -2; }
.div-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(1.04);
}
/* Sin velo lateral (mismo criterio que index y quienes-somos): solo el degradado
   inferior, que sostiene el texto y funde con la sección siguiente. */
.div-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 40%, rgba(7,9,15,0.58) 78%, rgba(7,9,15,0.92) 100%);
}
/* Franja corta arriba SOLO bajo el nav (web y móvil). Sobre una foto con cielo
   claro (Energéticos) el menú se perdía. Se desvanece a los ~150px, así que no
   oscurece la foto. */
.div-hero__veil::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 150px;
  background: linear-gradient(180deg, rgba(7,9,15,0.62) 0%, rgba(7,9,15,0.28) 55%, transparent 100%);
}
.div-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.div-hero__kicker {
  display: inline-flex;
  align-items: center;
  font-size: clamp(0.72rem, 0.9vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
}
.div-hero__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 5.5rem);
  color: var(--ink-100);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 16ch;
}
.div-hero__title-em { color: var(--dorado); }
.div-hero__lead {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--ink-200);
  line-height: 1.7;
  max-width: 52ch;
  text-wrap: pretty;
}
.div-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vh, 2rem);
  transform: translateX(-50%);
  width: 1px; height: clamp(36px, 6vh, 56px);
}
.div-hero__scroll-line {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--dorado));
  animation: div-scroll 2s var(--ease-io) infinite;
  transform-origin: top;
}
@keyframes div-scroll {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .div-hero__scroll-line { animation: none; opacity: 0.6; }
}

/* ================================================================
   DESCRIPCIÓN (claro, hueso) — tema paper como Divisiones del index
   ================================================================ */
/* DESCRIPCIÓN + EMPRESAS — OSCURA (con aurora ámbar). Una sola sección. */
.div-desc {
  position: relative;
  background: var(--bg);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
.div-desc::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 140%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 24% 14%, rgba(251,201,90,0.18) 0%, transparent 64%),
    radial-gradient(36% 28% at 80% 12%, rgba(240,164,66,0.12) 0%, transparent 62%);
  filter: blur(14px);
  will-change: transform;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 52%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 52%);
  animation: aurora-drift-a 18s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .div-desc::before { animation: none; } }
@media (max-width: 768px) {
  .div-desc::before { animation: none; will-change: auto; transform: none; }
}
.div-desc__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
/* El encabezado y el párrafo de apoyo van alineados abajo (patrón del sitio:
   título izq · párrafo con comilla der). */
.div-desc__inner { align-items: end; }

/* ── Variante SOLO: la división tiene UNA sola marca (Arrendamientos) ──
   El patrón normal (encabezado arriba + grid de cards debajo) deja un hueco
   enorme y el logo suelto al centro. Aquí: texto completo a la izquierda
   (kicker → título → comilla → párrafo) y el logo a la derecha, centrado. */
.div-desc--solo .div-desc__inner {
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}
.div-desc--solo .div-desc__col {
  display: flex;
  flex-direction: column;
}
/* En esta variante el párrafo va DEBAJO del título (no en columna aparte) */
.div-desc--solo .div-desc__text {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 54ch;
}
.div-desc--solo .div-sub {
  max-width: 420px;
  width: 100%;
  justify-self: center;
}
@media (max-width: 900px) {
  /* Apila: texto arriba, logo abajo centrado */
  .div-desc--solo .div-desc__inner { grid-template-columns: 1fr; }
  .div-desc--solo .div-desc__text  { max-width: none; }
  .div-desc--solo .div-sub         { max-width: 340px; }
}
.div-desc__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.85rem);
  color: var(--ink-100);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.div-desc .div-em { color: var(--dorado); }
.div-desc__text {
  position: relative;
  color: var(--ink-200);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.8;
  max-width: 52ch;
  padding-bottom: 0.4em;
}
/* Comilla de cita — igual que los demás párrafos de apoyo del sitio */
.div-desc__text::before {
  content: '\201C';
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 0.6;
  color: var(--dorado);
  margin-bottom: 0.2rem;
}
/* Bloque de marcas anidado dentro de la MISMA sección */
.div-subs__inner--nested {
  position: relative;
  z-index: 1;
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* ── Variante CLARA (hueso) de la sección Empresas del grupo ──
   Obras: Hero(osc) → Empresas(claro) → Galería(osc) → CTA(claro) → Footer(osc) */
.div-desc--light {
  --paper:  #f5f3ef;
  --p-ink:  #12172a;
  --p-ink2: #4a5470;
  --p-amber:#c98a1e;
  background: var(--paper);
}
/* Glow ámbar sutil sobre el hueso (sin blur animado: como .div-galeria clara) */
.div-desc--light::before {
  background:
    radial-gradient(40% 30% at 24% 14%, rgba(240,164,66,0.16) 0%, transparent 64%),
    radial-gradient(38% 30% at 80% 12%, rgba(201,138,30,0.10) 0%, transparent 62%);
  filter: none;
  will-change: auto;
  transform: none;
  animation: none;
}
.div-desc--light .div-desc__title      { color: var(--p-ink); }
.div-desc--light .div-em               { color: var(--p-amber); }
.div-desc--light .div-desc__text       { color: var(--p-ink2); }
.div-desc--light .div-desc__text::before { color: var(--p-amber); }
.div-desc--light .sub-video__cap       { color: var(--p-ink2); }
/* Cards de marca sobre hueso: sin borde, sombra suave (regla del sitio) */
.div-desc--light .div-sub {
  background: #fff;
  box-shadow: 0 18px 40px -18px rgba(18,23,42,0.28);
}
@media (hover: hover) and (pointer: fine) {
  .div-desc--light .div-sub:hover { box-shadow: 0 26px 54px -20px rgba(18,23,42,0.34); }
}
.div-desc--light .sub-video__frame {
  box-shadow: 0 18px 40px -18px rgba(18,23,42,0.28);
}

/* ================================================================
   SUBSIDIARIAS (claro, hueso)
   ================================================================ */
/* SUBSIDIARIAS — OSCURA (con aurora ámbar), alterna con Descripción (clara) */
.div-subs {
  position: relative;
  background: var(--bg);
  padding-block: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.div-subs::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 140%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 32% at 22% 16%, rgba(251,201,90,0.18) 0%, transparent 64%),
    radial-gradient(36% 30% at 78% 14%, rgba(240,164,66,0.12) 0%, transparent 62%);
  filter: blur(14px);
  will-change: transform;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 62%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 62%);
  animation: aurora-drift-b 20s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .div-subs::before { animation: none; } }
@media (max-width: 768px) {
  .div-subs::before { animation: none; will-change: auto; transform: none; }
}
.div-subs__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.div-subs__head { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); max-width: 40ch; }
.div-subs__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: var(--ink-100);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.div-subs .div-kicker { color: var(--dorado); }
.div-subs .div-em { color: var(--dorado); }
/* 3 cards de logos (logo + web), en fila; apilan en móvil */
.div-subs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* Variante "pares": en el DOM cada marca emite card + su video seguidos, para que
   en MÓVIL se lean intercalados (Kreis, video de Kreis, Altaguarda, su video…).
   En DESKTOP el grid los recoloca: las 3 cards en la fila 1, los 3 videos en la 2,
   cada uno en la columna de su marca (--col). El orden del DOM no manda aquí. */
@media (min-width: 769px) {
  .div-subs__grid--pairs > .div-sub    { grid-row: 1; grid-column: var(--col); }
  .div-subs__grid--pairs > .sub-video  { grid-row: 2; grid-column: var(--col); }
  /* la fila de videos respira respecto a las cards */
  .div-subs__grid--pairs { row-gap: clamp(1.75rem, 4vw, 2.75rem); }
}
/* Cards BLANCAS sobre el fondo oscuro (los logos son a color: necesitan
   fondo claro para leerse; el contraste sobre negro les da presencia). */
.div-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: #fbfaf7;
  border-radius: 18px;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.55);
  text-decoration: none;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .div-sub:hover { transform: translateY(-4px); box-shadow: 0 32px 70px -24px rgba(0,0,0,0.62); }
  .div-sub:hover .div-sub__web { color: #c98a1e; }
  .div-sub:hover .div-sub__web svg { transform: translate(2px, -2px); }
}
.div-sub__logo {
  display: flex; align-items: center; justify-content: center;
  height: clamp(84px, 11vw, 118px);
  width: 100%;
}
.div-sub__logo img {
  width: auto;
  max-width: 78%;
  height: 100%;               /* base para SVG sin dimensiones intrínsecas (Altaguarda) */
  max-height: 100%;
  object-fit: contain;
}
.div-sub__web {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a5470;              /* tinta oscura: la card es blanca */
  transition: color 0.3s var(--ease-out);
}
.div-sub__web svg {
  width: 0.85rem; height: 0.85rem;
  stroke: currentColor; stroke-width: 2.4; fill: none;
  transition: transform 0.3s var(--ease-out);
}

/* Variante 2 columnas (Energéticos: 2 subsidiarias) */
.div-subs__grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin-inline: auto;
}
/* Variante 3 columnas: logo · VIDEO · logo (Energéticos).
   La central es más angosta (el video es vertical 9:16 y los logos apaisados).
   `align-items: stretch` + alto del video como referencia → las 3 cards quedan
   a la MISMA altura, alineadas arriba y abajo. */
.div-subs__grid--3 {
  grid-template-columns: 1fr 0.58fr 1fr;
  align-items: stretch;
  max-width: 1200px;
  margin-inline: auto;
}
/* El video (9:16) define el alto de la fila; los logos se estiran hasta él */
.div-subs__grid--3 .div-sub { height: 100%; }
.div-subs__grid--3 .div-sub__logo--img { height: 100%; min-height: 0; }

/* Variante 2 columnas: MARCA · VIDEO apaisado (Vigilancia: una sola marca +
   el video de JTC, que es 16:9, no un Short). El video manda el alto de la
   fila y la card del logo se estira hasta él, centrando su contenido. */
.div-subs__grid--marca-video {
  grid-template-columns: 0.82fr 1.18fr;
  align-items: stretch;
  max-width: 1200px;
  margin-inline: auto;
}
.div-subs__grid--marca-video .div-sub {
  height: 100%;
  justify-content: center;
}
@media (max-width: 900px) {
  /* Apila: logo arriba, video debajo */
  .div-subs__grid--marca-video { grid-template-columns: 1fr; }
}

/* ── VIDEO con portada propia (fachada) ──
   Mismo patrón que en quienes-somos: fondo blanco + logo a color + play. El
   iframe de YouTube se inyecta al hacer clic (ver divisiones.js). */
.div-sub-video {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.55);
}
/* Variante APAISADA (16:9): videos que no son Shorts verticales (JTC). */
.div-sub-video--wide {
  aspect-ratio: 16 / 9;
  align-self: center;          /* no se estira en un grid `stretch` */
}
.div-sub-video iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.div-sub-video .qs-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  background: #fff;
  border: 0;
  cursor: pointer;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.div-sub-video .qs-video__logo {
  width: min(58%, 170px);
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.div-sub-video .qs-video__play {
  display: grid;
  place-items: center;
  width: clamp(52px, 18%, 70px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--dorado);
  box-shadow: 0 14px 34px -10px rgba(251,201,90,0.6);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.div-sub-video .qs-video__play svg {
  width: 42%; height: 42%;
  fill: #07090f;
  margin-left: 8%;              /* centra ópticamente el triángulo */
}
.div-sub-video .qs-video__label {
  font-size: clamp(0.68rem, 0.85vw, 0.76rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a5470;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .div-sub-video .qs-video:hover .qs-video__play {
    transform: scale(1.08);
    box-shadow: 0 18px 42px -10px rgba(251,201,90,0.75);
  }
}
.div-sub-video .qs-video:active .qs-video__play { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
  .div-sub-video .qs-video__play { transition: none; }
}
/* Card sin interacción (logo-imagen, sin web ni link) */
.div-sub--static { cursor: default; }
/* Los logos-IMAGEN son JPEG (no SVG transparente): traen su propio fondo, que no
   coincide con el de la card → se veía un recuadro dentro de otro. Y cada marca
   trae un fondo distinto (Olae blanco #fdfdfd, UrbeViva beige), así que ningún
   color de card los funde a todos. Fix: el logo LLENA la card y ES la card —
   su propio fondo pinta la superficie y cada marca conserva el suyo. */
.div-sub--static {
  padding: 0;
  overflow: hidden;
  gap: 0;
  justify-content: stretch;
  /* Cada marca pinta el fondo EXACTO de su jpeg (medido con canvas) → el logo
     funde con la card. `contain`, nunca `cover`: cover recorta las letras. */
  background: var(--sub-bg, #fdfdfd);
}
.div-sub--static .div-sub__logo--img {
  width: 100%;
  flex: 1;                                    /* iguala el alto de las cards de la fila */
  height: auto;
  min-height: clamp(150px, 22vw, 230px);
  border-radius: 0;
  background: var(--sub-bg, #fdfdfd);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.div-sub--static .div-sub__logo--img img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain;
}
/* Link/web debajo (Olae): hereda el fondo de la card */
.div-sub--static .div-sub__web {
  padding: 0 1.25rem 1.35rem;
  width: 100%;
  justify-content: center;
}
/* Logo que es FOTO (no SVG limpio): ocupa más y con esquinas suaves */
.div-sub__logo--img {
  height: clamp(150px, 22vw, 230px);
  border-radius: 18px;
  overflow: hidden;
}
.div-sub__logo--img picture { width: 100%; height: 100%; display: block; }
.div-sub__logo--img img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: contain;
}

/* Videos de las marcas: grid de 16:9 (truco padding-bottom del original) */
.div-subs__videos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.sub-video { margin: 0; }
.sub-video__frame {
  position: relative;
  width: 100%;
  /* 16:9 exacto. (Antes se reservaban +42px para la barra de controles del
     embed de Drive; YouTube ya no la necesita.) */
  padding-bottom: 56.25%;
  height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 22px 50px -26px rgba(18,23,42,0.42);
}
.sub-video__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}
.sub-video__cap {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);       /* sobre fondo oscuro */
  text-align: center;
}

/* ================================================================
   GALERÍA (oscuro, con aurora ámbar) — mismo patrón que Proyectos
   ================================================================ */
/* GALERÍA — CLARA (hueso), alterna con Subsidiarias (oscura) */
.div-galeria {
  position: relative;
  --paper:  #f5f3ef;
  --p-ink:  #12172a;
  --p-ink2: #4a5470;
  --p-amber:#c98a1e;
  background: var(--paper);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
/* Glow ámbar sutil de ambiente sobre el hueso */
.div-galeria::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 140%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 24% 14%, rgba(240,164,66,0.16) 0%, transparent 64%),
    radial-gradient(38% 30% at 80% 12%, rgba(201,138,30,0.10) 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 56%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 56%);
}
.div-galeria__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.div-galeria__head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.div-galeria .div-kicker { color: #b47b1e; }   /* ámbar oscuro legible sobre hueso */
.div-galeria__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  color: var(--p-ink);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.div-galeria .div-em { color: var(--p-amber); }
.div-galeria__sub {
  position: relative;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--p-ink2);
  line-height: 1.7;
  max-width: 42ch;
  padding-bottom: 0.4em;
}
.div-galeria__sub::before {
  content: '\201C';
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 0.6;
  color: var(--p-amber);
  margin-bottom: 0.2rem;
}

/* ================================================================
   OLAE TOWER (Desarrollos) — proyecto estrella, CLARA (hueso) + mapa
   ================================================================ */
.div-olae {
  position: relative;
  --paper:  #f5f3ef;
  --p-ink:  #12172a;
  --p-ink2: #4a5470;
  --p-amber:#c98a1e;
  background: var(--paper);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
/* Glow ámbar de ambiente sobre el hueso (sin blur animado, como .div-galeria) */
.div-olae::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 140%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 24% 12%, rgba(240,164,66,0.16) 0%, transparent 64%),
    radial-gradient(38% 30% at 82% 10%, rgba(201,138,30,0.10) 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 50%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 50%);
}
.div-olae__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
/* Encabezado: título izq · arquitectura der */
.div-olae__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.div-olae__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  color: var(--p-ink);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.div-olae .div-em { color: var(--p-amber); }
.div-olae__loc {
  margin-top: clamp(0.75rem, 1.5vw, 1.1rem);
  font-size: clamp(0.78rem, 0.9vw, 0.86rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-ink2);
}
.div-olae__arq {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: right;
}
.div-olae__arq-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-amber);
}
.div-olae__arq-name {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  font-weight: 600;
  color: var(--p-ink);
}
.div-olae__arq-sub {
  font-size: 0.8rem;
  color: var(--p-ink2);
}
/* Cuerpo: info izq · mapa der */
.div-olae__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
.div-olae__col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.div-olae__desc {
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  line-height: 1.8;
  color: var(--p-ink2);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.div-olae__desc strong { color: var(--p-ink); font-weight: 600; }
/* Cifras: 4 en fila, sobre hueso — sin borde, sombra suave (regla del sitio) */
.div-olae__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.olae-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem) 0.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(18,23,42,0.28);
}
.olae-stat__num {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  color: var(--p-amber);
}
.olae-stat__label {
  font-size: clamp(0.72rem, 0.85vw, 0.8rem);
  font-weight: 600;
  color: var(--p-ink);
}
.olae-stat__sub {
  font-size: 0.68rem;
  color: var(--p-ink2);
  opacity: 0.75;
}
/* Diferenciador: Club de Golf */
.div-olae__dif {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.85rem, 1.5vw, 1.15rem);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(240,164,66,0.13) 0%, rgba(245,243,239,0.6) 100%);
  box-shadow: 0 18px 40px -20px rgba(18,23,42,0.22);
}
.div-olae__dif-ic {
  display: grid; place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(240,164,66,0.18);
}
.div-olae__dif-ic svg {
  width: 20px; height: 20px;
  fill: none; stroke: var(--p-amber);
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.div-olae__dif-txt { display: flex; flex-direction: column; gap: 0.3rem; }
.div-olae__dif-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-amber);
}
.div-olae__dif-title {
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--p-ink);
}
.div-olae__dif-sub {
  font-size: 0.82rem;
  color: var(--p-ink2);
}
/* Dirección + coordenadas */
.div-olae__addr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--p-ink2);
}
.div-olae__addr svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  fill: none; stroke: var(--p-amber);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.div-olae__coords {
  font-size: 0.76rem;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}
/* Botones */
.div-olae__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
}
.div-olae__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--p-ink);
  color: #fff;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), opacity 0.25s;
}
.div-olae__btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.div-olae__btn--ig {
  background: linear-gradient(135deg, #833ab4, #e1306c, #fd1d1d);
}
@media (hover: hover) and (pointer: fine) {
  .div-olae__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(18,23,42,0.45); }
}
.div-olae__btn:active { transform: scale(0.97); }
/* Mapa — el iframe de Google no resuelve height:100% dentro de un grid item
   de altura implícita: se queda del tamaño del contenido (una esquina). Hay
   que darle una altura REAL al contenedor (position:relative + iframe inset:0). */
.div-olae__map {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 480px;
  box-shadow: 0 26px 60px -24px rgba(18,23,42,0.35);
  background: #e6e2da;
}
.div-olae__map iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0; display: block;
}

/* ================================================================
   PROCESO (Gasolinera en construcción) — OSCURA, con aurora
   ================================================================ */
.div-proceso {
  position: relative;
  background: var(--bg);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
.div-proceso::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 140%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 26% 14%, rgba(251,201,90,0.18) 0%, transparent 64%),
    radial-gradient(36% 28% at 78% 12%, rgba(240,164,66,0.12) 0%, transparent 62%);
  filter: blur(14px);
  will-change: transform;
  transform: translateZ(0);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 56%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 56%);
  animation: aurora-drift-b 20s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .div-proceso::before { animation: none; } }
@media (max-width: 768px) {
  .div-proceso::before { animation: none; will-change: auto; transform: none; }
}
.div-proceso__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.div-proceso__head {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.div-proceso__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  color: var(--ink-100);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.div-proceso .div-em { color: var(--dorado); }
.div-proceso__sub {
  position: relative;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--ink-200);
  line-height: 1.7;
  max-width: 42ch;
  padding-bottom: 0.4em;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.div-proceso__sub::before {
  content: '\201C';
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 0.6;
  color: var(--dorado);
  margin-bottom: 0.2rem;
}
/* Cards de la galería cuando van sobre fondo OSCURO */
.gal-item--dark {
  background: var(--surface);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,0.55);
}

/* Variante OSCURA de la galería (Obras: cierra con CTA claro) */
.div-galeria--dark {
  background: var(--bg);
}
.div-galeria--dark::before {
  background:
    radial-gradient(40% 30% at 24% 14%, rgba(251,201,90,0.20) 0%, transparent 64%),
    radial-gradient(38% 30% at 80% 12%, rgba(240,164,66,0.14) 0%, transparent 62%);
  filter: blur(14px);
  will-change: transform;
  transform: translateZ(0);
  animation: aurora-drift-a 18s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .div-galeria--dark::before { animation: none; } }
@media (max-width: 768px) {
  .div-galeria--dark::before { animation: none; will-change: auto; transform: none; }
}
.div-galeria--dark .div-kicker      { color: var(--dorado); }
.div-galeria--dark .div-galeria__title { color: var(--ink-100); }
.div-galeria--dark .div-em          { color: var(--dorado); }
.div-galeria--dark .div-galeria__sub { color: var(--ink-200); }
.div-galeria--dark .div-galeria__sub::before { color: var(--dorado); }
.div-galeria--dark .gal-item {
  background: var(--surface);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,0.55);
}

/* Grid masonry-like: primera foto grande (2×2), resto uniforme */
.div-galeria__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 210px);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: pointer;
  padding: 0; border: 0;
  background: #e6e2da;                                   /* placeholder sobre hueso */
  box-shadow: 0 16px 36px -20px rgba(18,23,42,0.30);     /* sombra suave, sin borde */
  isolation: isolate;
  /* base del reveal la maneja main.css (.will-reveal) */
}
.gal-item--lg { grid-column: span 2; grid-row: span 2; }

/* ── Galería de Gastronómica: 7 fotos VERTICALES ──
   El molde (celda 2×2 cuadrada + resto apaisado) recortaba estas fotos a una
   franja. Aquí las celdas son ALTAS: filas más bajas y cada item ocupa 2 →
   1×2 vertical. La parrilla manda a 2×2 (sigue vertical, solo el doble de
   ancha). 4 col × 2 filas = 8 celdas y la parrilla ocupa 2 → las 7 cierran. */
.div-galeria__grid--gas {
  grid-auto-rows: clamp(115px, 11vw, 165px);
}
.div-galeria__grid--gas .gal-item { grid-row: span 2; }
.div-galeria__grid--gas .gal-item--gas-hero { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  /* 2 col: 7 es impar → la parrilla ocupa el ancho completo y las 6 restantes
     van de dos en dos. */
  .div-galeria__grid--gas { grid-template-columns: repeat(2, 1fr); }
  .div-galeria__grid--gas .gal-item--gas-hero { grid-column: 1 / -1; }
}

/* ── Video integrado en la galería (1er item, celda grande) ──
   Se ve como una foto más: misma caja, radio y sombra. El player va visible
   directo (sin portada) y conserva TODOS sus controles, así que el clic normal
   es suyo: solo el botón de expandir de la esquina abre el lightbox. */
.gal-item--video { cursor: default; background: #0b0e16; }
/* z-index: el .gal-item tiene isolation:isolate → un hijo absolute SIN z-index
   queda debajo del div en el hit-test y el player pierde sus controles. */
.gal-item--video > iframe {
  position: absolute; inset: 0;
  z-index: 1;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.gal-item__expand {
  position: absolute;
  z-index: 2;                     /* por encima del iframe */
  top: 0.75rem; right: 0.75rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(251,201,90,0.45);
  background: rgba(7,9,15,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--dorado);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.gal-item__expand svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine) {
  .gal-item__expand:hover { background: var(--dorado); color: #12172a; transform: scale(1.06); }
}
.gal-item__expand:active { transform: scale(0.94); }
/* Este item no lleva el velo de hover ni la lupa de las fotos */
.gal-item--video::after { content: none; }
.gal-item--video .gal-item__zoom { display: none; }

/* ── Slide de VIDEO dentro del lightbox ── */
.lightbox__video {
  width: min(92vw, 480px);        /* el Short es vertical: no estirarlo a lo ancho */
  aspect-ratio: 9 / 16;
  max-height: 86vh;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: lb-in 0.32s var(--ease-out);
}
.lightbox__video iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}
.gal-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gal-item:hover img { transform: scale(1.06); }
  .gal-item:hover .gal-item__zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.gal-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,9,15,0.5));
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gal-item:hover::after { opacity: 1; }
}
.gal-item__zoom {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(7,9,15,0.55);
  border: 1px solid rgba(251,201,90,0.4);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  z-index: 2;
}
.gal-item__zoom svg {
  width: 20px; height: 20px;
  stroke: var(--dorado); stroke-width: 1.8; fill: none;
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: none;
  place-items: center;
  background: rgba(4,6,12,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(1rem, 4vw, 3rem);
  padding-top: max(clamp(1rem,4vw,3rem), env(safe-area-inset-top));
}
.lightbox.open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.5vw, 1rem);
  /* Alto reservado a la tira de miniaturas (para descontarlo de la imagen) */
  --lb-thumbs: clamp(58px, 9vw, 84px);
}
.lightbox__figure {
  margin: 0;
  display: grid; place-items: center;
  min-height: 0;
}
.lightbox__img {
  /* Limita por AMBOS ejes al viewport (descontando padding + miniaturas):
     así las verticales caben completas y las horizontales no se pasan de ancho. */
  max-width: min(92vw, 1400px);
  max-height: calc(100vh - var(--lb-thumbs) - clamp(3rem, 9vw, 6rem));
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: lb-in 0.32s var(--ease-out);
}
@keyframes lb-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* ── Tira de miniaturas (solo las fotos del grupo/proyecto activo) ── */
.lightbox__thumbs {
  display: flex;
  gap: 0.5rem;
  max-width: min(92vw, 900px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.35rem 0.2rem 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
  scroll-snap-type: x proximity;
}
.lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; }
.lightbox__thumb {
  flex: 0 0 auto;
  width: clamp(52px, 8vw, 76px);
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #11151f;
  opacity: 0.55;
  transition: opacity 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
  scroll-snap-align: center;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb.is-active {
  opacity: 1;
  border-color: var(--dorado);
  transform: translateY(-1px);
}
.lightbox__thumb:active { transform: scale(0.94); }
@media (max-width: 600px) {
  .lightbox__thumb { width: clamp(46px, 15vw, 60px); }
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.15s var(--ease-out);
}
.lightbox__close svg, .lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(251,201,90,0.16); border-color: rgba(251,201,90,0.5); }
.lightbox__close:active, .lightbox__nav:active { transform: scale(0.94); }
.lightbox__close { top: clamp(1rem, 3vw, 1.75rem); right: clamp(1rem, 3vw, 1.75rem); }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:active { transform: translateY(-50%) scale(0.94); }
.lightbox__nav--next:active { transform: translateY(-50%) scale(0.94); }

/* ================================================================
   CTA — reutiliza .cta-final del index, pero en OSCURO (para cerrar
   el ritmo: Hero(osc) → Desc(claro) → Subs(osc) → Galería(claro) → CTA(osc)).
   Basta con redefinir los tokens locales del componente.
   ================================================================ */
.div-cta {
  --cta-paper: var(--bg);
  --cta-ink:   var(--ink-100);
  --cta-ink-2: var(--ink-200);
  --cta-amber: var(--dorado);
}
/* El panel de contacto sigue siendo claro: destaca sobre el fondo oscuro */
.div-cta .cta-panel {
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.6);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 980px) {
  .div-desc__inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); align-items: start; }
  .div-desc__text  { max-width: none; padding-bottom: 0; }
  .div-galeria__head,
  .div-proceso__head { grid-template-columns: 1fr; align-items: start; gap: clamp(1rem, 4vw, 1.5rem); }
  .div-galeria__sub,
  .div-proceso__sub { padding-bottom: 0; max-width: none; }
  /* Subsidiarias: cards y videos a 1 columna apilados */
  .div-subs__grid   { grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 1.5rem); }
  .div-subs__grid--2 { max-width: 480px; }
  /* 3 col → 1 col; el video vertical se acota para que no ocupe media pantalla */
  .div-subs__grid--3 { grid-template-columns: 1fr; max-width: 480px; }
  .div-sub-video { max-width: 320px; margin-inline: auto; width: 100%; }
  .div-subs__videos { grid-template-columns: 1fr; gap: clamp(1.25rem, 5vw, 1.75rem); }
  /* Pares intercalados (card → su video → siguiente card…): el video queda PEGADO
     a su card, y el aire grande separa una marca de la siguiente. */
  .div-subs__grid--pairs { gap: 0; max-width: 480px; margin-inline: auto; }
  .div-subs__grid--pairs > .div-sub   { margin-top: clamp(1.75rem, 6vw, 2.5rem); }
  .div-subs__grid--pairs > .div-sub:first-child { margin-top: 0; }
  .div-subs__grid--pairs > .sub-video { margin-top: clamp(0.75rem, 3vw, 1rem); }
  /* OLAE: info arriba, mapa abajo */
  .div-olae__body { grid-template-columns: 1fr; gap: clamp(1.75rem, 5vw, 2.5rem); }
  .div-olae__head { flex-direction: column; align-items: flex-start; }
  .div-olae__arq  { text-align: left; }
  .div-olae__map,
  .div-olae__map iframe { min-height: 380px; }
}
@media (max-width: 680px) {
  .div-olae__stats { grid-template-columns: repeat(2, 1fr); }   /* 4 → 2×2 */
  .div-olae__desc  { max-width: none; }
  .div-olae__btn   { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 680px) {
  .div-galeria__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(140px, 40vw, 200px); }
  .gal-item--lg { grid-column: span 2; grid-row: span 1; }
  .div-hero__lead { max-width: none; }
}

/* Reveal direccional podría desbordar en móvil (translateX) → contener */
@media (max-width: 820px) {
  .page-div { overflow-x: clip; }
}

/* ================================================================
   GASTRONÓMICA (06) — secciones propias (.div-gas*)
   Esta división no tiene galería ni fotos de los locales (el base solo trae
   los logos), así que NO puede usar el molde de las otras. Estructura:
     1) Empresas del grupo (clara)  → las 3 marcas en cards
     2) Wolfgang's, ya abierto (clara) → datos + MAPA embebido
     3) Lo que viene (oscura)       → los 2 proyectos por abrir
   El color de cada card lo IMPONE el logo (blanco → card oscura).
   ================================================================ */

/* ── 1) Cards de marca de la sección "Empresas del grupo" ── */
.div-gas__marcas { align-items: stretch; }
.div-gas__marca {
  justify-content: space-between;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  height: 100%;
}
/* Aerocopa: su PNG es BLANCO → solo se ve sobre fondo oscuro.
   ⚠️ Se cualifica con .div-desc--light porque esa regla (2 clases) pinta todas
   las .div-sub de blanco y le ganaba por especificidad → la card salía en
   blanco y el logo blanco quedaba invisible. */
.div-desc--light .div-gas__marca--dark {
  background: #12172a;
  box-shadow: 0 24px 60px -24px rgba(18,23,42,0.5);
}
/* El SVG de Wolfgang's trae mucho aire en su viewBox → a igual caja se ve
   diminuto comparado con los otros dos logos. */
.div-gas__logo--zoom img { transform: scale(1.9); }

.div-gas__marca-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.div-gas__tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a5470;
}
.div-gas__marca--dark .div-gas__tag { color: var(--ink-400); }

/* Pastilla de estado (Inaugurado / Próximamente) */
.div-gas__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.32em 0.85em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: fit-content;
}
.div-gas__estado::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.div-gas__estado--on   { background: rgba(37,140,90,0.12);  color: #1c6b45; }
.div-gas__estado--soon { background: rgba(201,138,30,0.14); color: #a06a12; }
/* Sobre fondo oscuro las pastillas necesitan su propio contraste */
.div-gas__marca--dark .div-gas__estado--soon {
  background: rgba(251,201,90,0.14);
  color: var(--dorado);
}

/* ── Ficha de datos (dt/dd), compartida por las 2 secciones ── */
.div-gas__datos {
  display: flex;
  flex-direction: column;
  gap: clamp(0.9rem, 1.8vw, 1.25rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
/* En Wolfgang's los 2 datos (Inauguración / Dirección) son cortos y caben lado
   a lado: apilados estiraban la columna sin necesidad. */
.div-gas-open .div-gas__datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin-top: 0;
}
.div-gas__dato dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.3em;
}
.div-gas__dato dd {
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.5;
}

/* ── RESERVACIONES: teléfonos como enlaces `tel:` (marcan en móvil) ── */
.div-gas__reservas {
  /* La caja se ciñe a los números: a 100% del ancho de la columna dejaba un
     hueco enorme a la derecha. */
  display: inline-block;
  width: fit-content;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 16px;
  background: rgba(251,201,90,0.07);
  box-shadow: inset 0 0 0 1px rgba(251,201,90,0.20);
}
.div-gas__reservas-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 0.85rem;
}
.div-gas__tels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.15rem;
}
/* Divisor sutil entre los dos números (no en móvil, donde apilan) */
.div-gas__tel + .div-gas__tel {
  padding-left: 1.15rem;
  border-left: 1px solid rgba(251,201,90,0.22);
}
.div-gas__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  font-weight: 600;
  color: var(--ink-100);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--ease-out);
}
.div-gas__tel svg {
  width: 1em; height: 1em;
  flex-shrink: 0;
  color: var(--dorado);
}
@media (hover: hover) and (pointer: fine) {
  .div-gas__tel:hover { color: var(--dorado); }
}

/* ── Botones (IG / Cómo llegar) ── */
.div-gas__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.div-gas__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.35em;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.div-gas__btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .div-gas__btn:hover { transform: translateY(-2px); }
}

/* ── 2) WOLFGANG'S — sección OSCURA, foto + datos + mapa ── */
.div-gas-open {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
/* Aurora ámbar (estática en móvil: animar blur sobre área grande lagea) */
.div-gas-open::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 32% at 20% 14%, rgba(240,164,66,0.20) 0%, transparent 64%),
    radial-gradient(40% 30% at 84% 12%, rgba(251,201,90,0.13) 0%, transparent 62%);
  filter: blur(28px);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
@media (max-width: 768px) {
  .div-gas-open::before { filter: none; will-change: auto; transform: none; }
}
.div-gas-open__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.div-gas-open .div-kicker { color: var(--dorado); }
.div-gas-open__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.85rem);
  color: var(--ink-100);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-top: 0.35em;
}
.div-gas-open .div-em { color: var(--dorado); }
.div-gas-open__lead {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--ink-200);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.75;
  max-width: 52ch;
}
.div-gas-open .div-gas__dato dt { color: var(--dorado); }
.div-gas-open .div-gas__dato dd { color: var(--ink-100); }

/* ── FICHA unificada (datos · reservaciones · acciones) ──
   Antes eran 3 bloques con `margin-top` propio flotando sueltos en la columna.
   Ahora es un solo panel: los separadores marcan el ritmo, no el aire. */
.div-gas-open .div-gas__ficha {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: 18px;
  background: rgba(240,244,255,0.03);
  box-shadow: inset 0 0 0 1px rgba(240,244,255,0.09);
  overflow: hidden;
}
.div-gas-open .div-gas__ficha > * {
  padding: clamp(1.15rem, 2.2vw, 1.5rem) clamp(1.25rem, 2.4vw, 1.65rem);
}
.div-gas-open .div-gas__ficha > * + * {
  border-top: 1px solid rgba(240,244,255,0.09);
}
/* La caja propia de Reservaciones sobra dentro de la ficha: era un rectángulo
   ámbar aislado. Aquí es una fila más — el ámbar queda solo en su etiqueta. */
.div-gas-open .div-gas__reservas {
  display: block;
  width: auto;
  margin-top: 0;
  border-radius: 0;
  background: rgba(251,201,90,0.05);
  box-shadow: none;
}
.div-gas-open .div-gas__acciones { margin-top: 0; }
.div-gas-open .div-gas__btn {
  background: var(--dorado);
  color: #12172a;
}
.div-gas-open .div-gas__btn--ghost {
  background: transparent;
  color: var(--ink-100);
  box-shadow: inset 0 0 0 1px rgba(240,244,255,0.24);
}
@media (hover: hover) and (pointer: fine) {
  .div-gas-open .div-gas__btn--ghost:hover { background: rgba(240,244,255,0.07); }
}

/* Columna derecha: foto grande + mapa debajo */
.div-gas-open__media {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.div-gas__foto {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,0.7);
}
.div-gas__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.div-gas__foto--tall { aspect-ratio: 4 / 3; }
/* Mapa: el iframe de Google NO resuelve height:100% dentro de un grid item de
   altura implícita (se pinta solo una esquina) → contenedor relative + absolute. */
.div-gas-open__mapa {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.6);
}
.div-gas-open__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* ── 3) LO QUE VIENE — sección CLARA (hueso), los 2 proyectos por abrir ── */
.div-gas-next {
  --paper:  #f5f3ef;
  --p-ink:  #12172a;
  --p-ink2: #4a5470;
  --p-amber:#c98a1e;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.div-gas-next::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 12%, rgba(240,164,66,0.16) 0%, transparent 64%),
    radial-gradient(38% 30% at 84% 14%, rgba(201,138,30,0.10) 0%, transparent 62%);
}
.div-gas-next__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.div-gas-next__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.div-gas-next__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 3.85rem);
  color: var(--p-ink);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-top: 0.35em;
}
.div-gas-next .div-em { color: var(--p-amber); }

.div-gas-next__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
/* Cada proyecto: el logo arriba (en su caja, con el fondo que su color exige)
   y la ficha debajo. NO es una card dentro de otra: el logo es la cabecera. */
.div-gas-proy {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(18,23,42,0.28);
}
/* Cabecera: FOTO del concepto con el logo encima. La foto se oscurece para que
   el logo se lea y para que el ámbar del sitio siga mandando. */
.div-gas-proy__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  isolation: isolate;
}
.div-gas-proy__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.div-gas-proy__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(7,9,15,0.30) 0%, rgba(7,9,15,0.62) 100%);
}
.div-gas-proy__logo {
  position: absolute;
  inset: 0;
  z-index: 2;                   /* sobre el velo, si no se pierde */
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.div-gas-proy__logo img {
  width: auto;
  max-width: 58%;
  max-height: clamp(72px, 9vw, 104px);
  object-fit: contain;
}
/* Pastilla detrás del logo. El color lo manda el PNG, no la foto:
   Moonwalk (PNG oscuro) → clara · Aerocopa (PNG blanco) → oscura. */
.div-gas-proy__logo--chip-claro img,
.div-gas-proy__logo--chip-oscuro img {
  padding: clamp(0.85rem, 1.8vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.75rem);
  border-radius: 14px;
  max-width: 72%;
}
.div-gas-proy__logo--chip-claro img {
  background: rgba(250,249,246,0.94);
}
/* Aerocopa: su bar es de madera clara y muy luminoso → el logo blanco se
   disolvía incluso con el velo. Pastilla oscura + filo ámbar tenue. */
.div-gas-proy__logo--chip-oscuro img {
  background: rgba(7,9,15,0.72);
  box-shadow: inset 0 0 0 1px rgba(251,201,90,0.28);
  backdrop-filter: blur(3px);
  /* Más aire a los lados: el logo es compacto y la pastilla quedaba estrecha. */
  padding-inline: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 88%;
}
.div-gas-proy__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.div-gas-proy__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  color: var(--p-ink);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-top: 0.7rem;
}
/* Cita en cursiva (Moonwalk) — mismo recurso editorial que el resto del sitio */
.div-gas-proy__cita {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--p-amber);
  line-height: 1.5;
  margin-top: clamp(1rem, 2vw, 1.35rem);
}
.div-gas-proy__lead {
  margin-top: clamp(0.9rem, 2vw, 1.25rem);
  color: var(--p-ink2);
  font-size: clamp(0.96rem, 1.1vw, 1.05rem);
  line-height: 1.75;
}
.div-gas-next .div-gas__dato dt { color: var(--p-amber); }
.div-gas-next .div-gas__dato dd { color: var(--p-ink); }
/* La ficha se pega abajo: las 2 cards quedan parejas aunque el texto difiera */
.div-gas-proy .div-gas__datos { margin-top: auto; padding-top: clamp(1.5rem, 3vw, 2rem); }

/* ── Móvil ── */
@media (max-width: 900px) {
  .div-gas-open__inner { grid-template-columns: 1fr; }
  .div-gas-open__lead  { max-width: none; }
  .div-gas-next__grid  { grid-template-columns: 1fr; }
}
/* Móvil estrecho: los teléfonos apilan → el divisor vertical quedaría colgando */
@media (max-width: 420px) {
  .div-gas__reservas { display: block; width: auto; }
  .div-gas__tel + .div-gas__tel { padding-left: 0; border-left: 0; }
}

/* ============================================================
   PÁGINA MAESTRA DE DIVISIONES (divisiones.php)
   Hero-collage (las 6 fotos de hero) + LISTA EDITORIAL de las 6
   divisiones en filas alternadas claro/oscuro, cada una mostrando
   los LOGOS de sus empresas. NO es el mosaico del index. Prefijo .divh-*
   ============================================================ */

/* ── HERO-COLLAGE ── */
.divh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(420px, calc(var(--vh-stable, 1dvh) * 66), 680px);
  display: flex; align-items: flex-end; background: var(--bg);
}
.divh-hero__strip { position: absolute; inset: 0; z-index: -3; display: grid; grid-template-columns: repeat(6, 1fr); }
.divh-hero__strip picture, .divh-hero__strip img { width: 100%; height: 100%; display: block; }
.divh-hero__strip img { object-fit: cover; object-position: center; filter: saturate(1.02) contrast(1.02) brightness(0.92); }
.divh-hero__strip picture:not(:last-child) { box-shadow: 1px 0 0 rgba(7,9,15,0.55); }
.divh-hero__veil {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(7,9,15,0.34) 0%, rgba(7,9,15,0) 26%, rgba(7,9,15,0.30) 52%, rgba(7,9,15,0.92) 100%);
}
.divh-hero__veil::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: linear-gradient(180deg, rgba(7,9,15,0.72), rgba(7,9,15,0));
}
.divh-hero__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 80% at 18% 88%, rgba(251,201,90,0.16), transparent 62%),
              radial-gradient(48% 70% at 82% 96%, rgba(240,164,66,0.12), transparent 60%);
  mix-blend-mode: screen;
}
.divh-hero__inner { position: relative; width: 100%; max-width: 1600px; margin-inline: auto; padding: clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,3.5rem) clamp(2.25rem,5vw,3.75rem); }
.divh-hero__kicker { font-size: clamp(0.72rem,1vw,0.82rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dorado); text-shadow: 0 2px 12px rgba(7,9,15,0.7); margin: 0 0 clamp(0.75rem,1.6vw,1.1rem); }
.divh-hero__title { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(2.6rem,6.2vw,5rem); line-height: 1.0; letter-spacing: -0.02em; color: var(--ink-100); text-shadow: 0 4px 30px rgba(7,9,15,0.55); margin: 0; max-width: 16ch; text-wrap: balance; }
.divh-hero__title-em { color: var(--dorado); }
.divh-hero__lead { margin: clamp(1rem,2vw,1.4rem) 0 0; max-width: 54ch; font-size: clamp(1rem,1.35vw,1.2rem); line-height: 1.55; color: var(--ink-200); text-shadow: 0 2px 14px rgba(7,9,15,0.6); }
@media (max-width: 700px) {
  .divh-hero { min-height: clamp(440px, calc(var(--vh-stable,1dvh)*72), 620px); }
  .divh-hero__strip { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
  .divh-hero__strip picture:not(:last-child) { box-shadow: none; }
  .divh-hero__veil { background: linear-gradient(180deg, rgba(7,9,15,0.42) 0%, rgba(7,9,15,0.20) 34%, rgba(7,9,15,0.55) 66%, rgba(7,9,15,0.95) 100%); }
}


/* ── DIVISIONES en BANDAS de 2 ── la BANDA (sección) lleva UN solo fondo +
   UNA aurora; dentro, 2 celdas transparentes. Las bandas alternan hueso/negro. ── */
.divh-band { position: relative; isolation: isolate; overflow: hidden; }
/* El fondo+aurora se pinta UNA vez, sobre toda la banda (::before, z-index:0). */
.divh-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.divh-band__inner {
  position: relative; z-index: 1;
  max-width: 1600px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(2, 1fr);
}

.divh-cell {
  display: flex; flex-direction: column;
  padding: clamp(2.25rem, 3.4vw, 3.75rem) clamp(1.5rem, 3vw, 3rem);
  min-height: clamp(360px, 34vw, 460px);
  text-decoration: none;
}

.divh-cell__num {
  font-family: 'DM Serif Display', serif; line-height: 0.9;
  font-size: clamp(3rem, 5vw, 5rem); letter-spacing: -0.02em; margin-bottom: clamp(0.4rem,1vw,0.75rem);
}
.divh-cell__tag { font-size: clamp(0.68rem,0.9vw,0.78rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 clamp(0.4rem,0.8vw,0.6rem); }
.divh-cell__name { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: clamp(1.7rem,2.8vw,2.6rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 clamp(0.7rem,1.4vw,1rem); text-wrap: balance; }
.divh-cell__desc { font-size: clamp(0.95rem,1.1vw,1.08rem); line-height: 1.55; margin: 0 0 clamp(1.25rem,2.2vw,1.75rem); max-width: 42ch; }

/* Los logos de las empresas (empujados abajo con margin-top:auto) */
.divh-cell__brands { margin-top: auto; display: flex; flex-direction: column; gap: clamp(0.7rem,1.4vw,1rem); }
.divh-cell__brands-label { font-size: clamp(0.62rem,0.8vw,0.72rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }
.divh-brands { display: flex; flex-wrap: wrap; gap: clamp(0.7rem,1.2vw,1rem); }
/* Chip blanco grande; el logo se limita por ancho Y alto → nunca se recorta. */
.divh-brand {
  display: flex; align-items: center; justify-content: center;
  width: clamp(132px, 13vw, 180px); height: clamp(88px, 8.5vw, 112px);
  background: #fff; border-radius: 16px; padding: clamp(0.85rem,1.3vw,1.15rem);
  box-shadow: 0 16px 38px -18px rgba(0,0,0,0.5);
  text-decoration: none; overflow: hidden;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
@media (hover: hover) { a.divh-brand:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -18px rgba(0,0,0,0.55); } }
.divh-brand img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.divh-brand--dark { background: #12172a; box-shadow: 0 16px 38px -18px rgba(0,0,0,0.6); }

/* CTA de la celda: flecha abajo, aparece bajo los logos */
.divh-cell__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: clamp(1.1rem,2vw,1.5rem);
  font-weight: 700; font-size: clamp(0.88rem,1vw,0.98rem); text-decoration: none;
  transition: gap 0.3s var(--ease-out);
}
.divh-cell__cta svg { transition: transform 0.3s var(--ease-out); }
@media (hover: hover) { .divh-cell:hover .divh-cell__cta { gap: 0.8rem; } .divh-cell:hover .divh-cell__cta svg { transform: translateX(3px); } }

/* ── TEMAS por BANDA ── UN fondo + UNA aurora por banda (sin costura) ── */
/* CLARA (hueso + aurora, una sola que cruza toda la banda) */
.divh-band--light { background: #f5f3ef; }
.divh-band--light::before {
  background: radial-gradient(45% 80% at 78% 12%, rgba(251,201,90,0.15), transparent 60%),
              radial-gradient(42% 75% at 22% 100%, rgba(240,164,66,0.10), transparent 62%);
}
.divh-band--light .divh-cell__num  { color: #c98a1e; }
.divh-band--light .divh-cell__tag  { color: #b47b1e; }
.divh-band--light .divh-cell__name { color: #12172a; }
.divh-band--light .divh-cell__desc { color: #4a5470; }
.divh-band--light .divh-cell__cta  { color: #c98a1e; }
.divh-band--light .divh-cell__brands-label { color: #8a7355; }

/* OSCURA (negro + aurora, una sola) */
.divh-band--dark { background: #07090f; }
.divh-band--dark::before {
  background: radial-gradient(45% 80% at 78% 15%, rgba(251,201,90,0.15), transparent 60%),
              radial-gradient(42% 75% at 22% 100%, rgba(240,164,66,0.10), transparent 62%);
}
.divh-band--dark .divh-cell__num  { color: var(--dorado); }
.divh-band--dark .divh-cell__tag  { color: var(--naranja); }
.divh-band--dark .divh-cell__name { color: var(--ink-100); }
.divh-band--dark .divh-cell__desc { color: var(--ink-200); }
.divh-band--dark .divh-cell__cta  { color: var(--dorado); }
.divh-band--dark .divh-cell__brands-label { color: var(--ink-400); }

/* Móvil: 1 columna */
@media (max-width: 860px) {
  .divh-band__inner { grid-template-columns: 1fr; }
  .divh-cell { min-height: 0; }
  .divh-brand { width: clamp(120px, 38vw, 160px); }
}
@media (prefers-reduced-motion: reduce) {
  .divh-cell__cta, .divh-cell__cta svg, .divh-brand { transition: none; }
}

/* ================================================================
   PROYECTOS (obras agrupadas por proyecto real) — OSCURO, aurora ámbar
   Editorial: info a la izquierda (kicker, título, badge, lead, stats),
   grid de fotos a la derecha con portada 2×2. Reutiliza .gal-item / lightbox.
   ================================================================ */
.div-proyectos {
  position: relative;
  background: var(--bg);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  overflow: hidden;
  isolation: isolate;
}
.div-proyectos::before {                       /* aurora ámbar (como .div-galeria--dark) */
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 140%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 24% 12%, rgba(251,201,90,0.20) 0%, transparent 64%),
    radial-gradient(38% 30% at 80% 10%, rgba(240,164,66,0.14) 0%, transparent 62%);
  filter: blur(14px);
  will-change: transform;
  transform: translateZ(0);
  animation: aurora-drift-a 18s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 32%, transparent 60%);
}
@media (prefers-reduced-motion: reduce) { .div-proyectos::before { animation: none; } }
@media (max-width: 768px) {
  .div-proyectos::before { animation: none; will-change: auto; transform: none; }
}
.div-proyectos__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}
.div-proyectos__head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.div-proyectos .div-kicker { color: var(--dorado); }
.div-proyectos__title {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  color: var(--ink-100);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.div-proyectos__title .div-em { color: var(--dorado); }

/* ── Un proyecto: editorial 2 columnas (info 0.9fr · fotos 1.6fr) ── */
.div-proy {
  display: grid;
  grid-template-columns: 0.9fr 1.6fr;   /* info | fotos */
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.div-proy + .div-proy { margin-top: clamp(3.5rem, 7vw, 6rem); }

/* ALTERNADO (zigzag): proyectos pares llevan fotos IZQUIERDA · texto DERECHA.
   Solo en desktop; en móvil (≤980px) todos apilan info→fotos igual. */
@media (min-width: 981px) {
  .div-proy--flip { grid-template-columns: 1.6fr 0.9fr; }  /* fotos | info */
  .div-proy--flip .div-proy__grid { grid-column: 1; grid-row: 1; }
  .div-proy--flip .div-proy__info { grid-column: 2; grid-row: 1; }
}

.div-proy__info { position: relative; }
@media (min-width: 981px) {
  .div-proy__info { position: sticky; top: clamp(5rem, 9vw, 7.5rem); }
}
.div-proy__kicker {
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 0.9rem;
}
.div-proy__name {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink-100);
  text-wrap: balance;
}
.div-proy__name .div-em { color: var(--dorado); }

.div-proy__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  margin-top: 1.1rem;
}
.div-proy__loc {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(0.86rem, 1vw, 0.96rem);
  font-weight: 500;
  color: var(--ink-200);
}
.div-proy__loc svg { width: 1.05em; height: 1.05em; color: var(--dorado); flex: 0 0 auto; }

.div-proy__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.8rem 0.34rem 0.7rem;
  border-radius: 999px;
  font-size: clamp(0.72rem, 0.82vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dorado);
  background: rgba(251, 201, 90, 0.10);
  border: 1px solid rgba(251, 201, 90, 0.28);
}
.div-proy__badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--dorado);
  box-shadow: 0 0 0 0 rgba(251, 201, 90, 0.55);
  animation: proy-pulse 2.2s ease-out infinite;
}
@keyframes proy-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(251, 201, 90, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(251, 201, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 201, 90, 0); }
}
@media (prefers-reduced-motion: reduce) { .div-proy__badge-dot { animation: none; } }
.div-proy__badge--done {
  color: var(--ink-200);
  background: rgba(240, 244, 255, 0.06);
  border-color: rgba(240, 244, 255, 0.18);
}

.div-proy__lead {
  position: relative;
  margin-top: 1.4rem;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.72;
  color: var(--ink-200);
  text-align: justify;
  hyphens: auto;
  padding-top: 1.4rem;
}
.div-proy__lead::before {                       /* comilla de cita (patrón del sitio) */
  content: '\201C';
  position: absolute;
  top: -0.35rem; left: -0.1rem;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 0.6;
  color: var(--dorado);
}

/* ── Stats de la obra ── */
.div-proy__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 1.8rem;
  background: rgba(240, 244, 255, 0.08);        /* líneas divisorias vía gap */
  border: 1px solid rgba(240, 244, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.div-proy__stat {
  background: var(--surface);
  padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(0.9rem, 1.6vw, 1.25rem);
}
.div-proy__stat-v {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1;
  color: var(--dorado);
}
.div-proy__stat-k {
  margin-top: 0.4rem;
  font-size: clamp(0.72rem, 0.85vw, 0.82rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-400);
}

/* ── Grid de fotos del proyecto (mismo molde que .div-galeria__grid) ── */
.div-proy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(130px, 12vw, 180px);
  gap: clamp(0.5rem, 1vw, 0.85rem);
}
.div-proy__grid .gal-item {
  background: var(--surface);
  box-shadow: 0 20px 44px -22px rgba(0,0,0,0.55);
}
.div-proy__grid .gal-item--lg { grid-column: span 2; grid-row: span 2; }

/* ── Responsive ── */
@media (max-width: 980px) {
  .div-proy { grid-template-columns: 1fr; }
  .div-proy__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .div-proy__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(115px, 30vw, 160px);
  }
  .div-proy__grid .gal-item--lg { grid-column: span 2; grid-row: span 2; }
  .div-proy__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Visibilidad de celdas por breakpoint (móvil ve 1 foto menos) ──
   Frontera 620px = el mismo punto donde el grid pasa a 2 columnas.
   Las ocultas siguen en el DOM → el lightbox las recorre igual.
   Se ocultan con display:none; cuando se muestran, cada tipo recupera su display
   propio (las fotos ya son botones en el grid; el botón "Ver más" es flex). */
.gal-item--hidden { display: none !important; }
@media (min-width: 621px) {
  .div-proy__grid .gal-item--only-movil { display: none !important; }
}
@media (max-width: 620px) {
  .div-proy__grid .gal-item--only-desktop { display: none !important; }
}

/* ── Botón "Ver todas" (ocupa una celda del grid, estilo tarjeta) ── */
.div-proy__more {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 1px dashed rgba(251, 201, 90, 0.4);
  border-radius: 14px;
  background: rgba(251, 201, 90, 0.06);
  color: var(--dorado);
  cursor: pointer;
  padding: 0.5rem;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.15s var(--ease-out);
  box-shadow: none;
}
.div-proy__more:hover {
  background: rgba(251, 201, 90, 0.12);
  border-color: rgba(251, 201, 90, 0.7);
}
.div-proy__more:active { transform: scale(0.97); }
.div-proy__more-plus {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1;
}
.div-proy__more-txt {
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}