/* =====================================================================
   11Phant Group · Landing
   Estilos del sitio. Ordenado de lo general a lo particular:
   0. Tipografías
   1. Variables (colores, tipografías, medidas)
   2. Base
   3. Componentes reutilizables (contenedor, títulos, botones, cifras)
   4. Secciones, en el mismo orden que aparecen en la página
   5. Animaciones
   6. Responsive (tablet y celular)
   7. Movimiento reducido (accesibilidad)
   ===================================================================== */

/* ---------- 0. Tipografías (alojadas en el propio sitio, licencia OFL) ---------- */
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/mulish-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/mulish-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/mulish-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 800; font-display: swap; src: url(../assets/fonts/mulish-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/josefin-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Josefin Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/josefin-sans-latin-700-normal.woff2) format('woff2'); }

/* ---------- 1. Variables ---------- */
:root {
  /* Colores generales */
  --negro: #050505;
  --blanco: #F5F5F5;
  --gris-texto: #C8C8C8;
  --gris-suave: #BDBDBD;
  --gris-medio: #A3A3A3;
  --gris-tenue: #8F8F8F;
  --linea: #1E1E1E;
  --linea-card: #2A2A2A;

  /* Color de fondo de cada unidad de negocio */
  --verum-verde: #113229;
  --urban-gris: #1E2126;
  --grupo-claro: #F4F4F2;

  /* Tipografías */
  --fuente: Avenir, 'Avenir Next', Mulish, system-ui, sans-serif;
  --fuente-verum: 'Josefin Sans', Futura, sans-serif;

  /* Medidas */
  --ancho-max: 1200px;
  --margen-lateral: 24px;
  --alto-header: 68px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente);
}
h1, h2, h3, p, figure { margin: 0; }
img { max-width: 100%; }
a { color: var(--blanco); }
a:hover { color: #FFFFFF; }

/* Texto solo para lectores de pantalla y buscadores (no se ve) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Componentes ---------- */

/* Contenedor centrado de ancho máximo */
.wrap {
  max-width: calc(var(--ancho-max) + 2 * var(--margen-lateral));
  margin: 0 auto;
  padding-left: var(--margen-lateral);
  padding-right: var(--margen-lateral);
}

/* Texto pequeño en mayúsculas sobre los títulos */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris-medio);
}

/* Título de sección */
.h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  font-weight: 700;
}

/* Botón de contorno redondeado */
.btn {
  text-decoration: none;
  border: 1px solid var(--btn-borde, #555555);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover {
  background-color: var(--blanco);
  color: var(--negro);
  border-color: var(--blanco);
}

/* Cifras destacadas de cada unidad (ej. "+85 Proyectos") */
.cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 540px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  padding-top: 18px;
}
.cifras__valor { display: block; font-size: 26px; line-height: 1.1; font-weight: 800; }
.cifras__texto {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .03em;
  color: var(--cifra-texto, var(--gris-medio));
}

/* Aparición suave al hacer scroll (solo navegadores compatibles) */
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}

/* ---------- 4. Secciones ---------- */

/* 4.1 Encabezado fijo */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 5, 5, 0.92);
  border-bottom: 1px solid var(--linea);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__icono { width: 38px; height: 35px; object-fit: contain; }
.brand__texto { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.brand__nombre { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.brand__lema { font-size: 10px; letter-spacing: 0.18em; color: var(--gris-medio); }
.menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.menu__link { text-decoration: none; color: var(--gris-suave); transition: color .2s ease; }
.menu__link:hover { color: #FFFFFF; }
.menu__cta { --btn-borde: var(--blanco); padding: 11px 22px; font-size: inherit; letter-spacing: inherit; }

/* 4.2 Portada (logo animado sobre la red 3D) */
.hero {
  position: relative;
  overflow: hidden;
  background: #000000;
  height: calc(100vh - var(--alto-header));
  height: calc(100svh - var(--alto-header));
  min-height: 520px;
  max-height: 1000px;
  padding: 32px 24px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}
.hero__red { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__vineta {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.92) 100%);
}
.hero__marca {
  position: relative;
  z-index: 1;
  width: min(440px, 80vw, calc((100svh - var(--alto-header) - 150px) * 0.92));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}
.hero__lema { width: 100%; height: auto; display: block; }
.hero__bajar {
  position: absolute; left: 50%; bottom: 26px; translate: -50% 0; z-index: 2;
  white-space: nowrap; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--gris-suave); padding: 12px;
}
.intro-btn {
  position: absolute; right: 24px; bottom: 26px; z-index: 3;
  background: none; border: 1px solid rgba(255,255,255,.28); color: var(--gris-suave);
  font: inherit; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: opacity .4s ease;
}
.intro-btn:hover { color: #fff; border-color: #fff; }
.intro-btn--ver { border-color: rgba(255,255,255,.22); color: #9A9A9A; opacity: 0; pointer-events: none; transition: opacity .4s ease .6s; }
.hero.intro-terminada .intro-btn--saltar { opacity: 0; pointer-events: none; }
.hero.intro-terminada .intro-btn--ver { opacity: 1; pointer-events: auto; }
.no-js .intro-btn { display: none; }

/* Logo del elefante armado por facetas (se usa en portada y pie) */
.logo-facetas { position: relative; aspect-ratio: 832 / 504; width: 100%; max-width: 100%; }
.logo-facetas svg, .logo-facetas__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo-facetas polygon { fill: var(--blanco); fill-opacity: 0; stroke: var(--blanco); stroke-width: 5; stroke-linejoin: round; }

/* 4.3 Ecosistema (tarjetas de las 4 unidades) */
.ecosistema { border-top: 1px solid var(--linea); }
.ecosistema__inner { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 48px; }
.ecosistema__cabecera { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.ecosistema__titulo { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; }
.ecosistema__bajada { font-size: 16px; line-height: 1.65; color: var(--gris-texto); max-width: 680px; }
.grilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card {
  text-decoration: none;
  background: #0C0C0C;
  border: 1px solid var(--linea-card);
  border-radius: 6px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 300px;
  transition: transform .3s ease, border-color .3s ease, background-color .3s ease;
}
.card:hover { transform: translateY(-6px); border-color: #5A5A5A; background-color: #131313; }
.card__numero { font-size: 11px; color: var(--gris-tenue); }
.card__logo { height: 64px; width: auto; align-self: center; }
.card__logo--urban { height: 52px; margin: 6px 0; }
.card__logo--leaser { height: 56px; margin: 4px 0; }
.card__texto { font-size: 15px; font-weight: 600; line-height: 1.5; flex-grow: 1; }
.card__etiquetas { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-tenue); }
.card__pie {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--linea-card); padding-top: 14px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
}

/* 4.4 Bloque de unidad de negocio (RUMZ, Urban Nexus, Leaser; Verum tiene su variante) */
.unidad { background: var(--unidad-fondo, var(--negro)); }
.unidad__inner {
  padding-top: 88px;
  padding-bottom: 88px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}
.unidad__texto { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.unidad__media { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; }
.unidad__logo { height: 110px; width: auto; align-self: flex-start; }
.unidad__rubro {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--unidad-rubro, var(--gris-suave));
}
.unidad__bajada { font-size: 17px; line-height: 1.7; color: var(--unidad-bajada, var(--gris-texto)); max-width: 520px; }
.unidad .btn { align-self: flex-start; }

/* RUMZ */
.unidad--rumz { border-top: 1px solid var(--linea); }

/* Urban Nexus */
.unidad--urban {
  --unidad-fondo: var(--urban-gris);
  --unidad-rubro: #BCC3CE;
  --unidad-bajada: #CFD4DB;
  --cifra-texto: #BCC3CE;
  --btn-borde: #6B7380;
}
.unidad--urban .unidad__logo { height: 84px; }

/* Leaser */
.unidad--leaser { --cifra-texto: var(--gris-suave); }
.unidad--leaser .unidad__logo { height: 100px; }
.unidad--leaser .unidad__media { flex-basis: 480px; }

/* Verum: imagen a sangre en la mitad derecha */
.verum {
  --unidad-fondo: var(--verum-verde);
  --cifra-texto: #A9C4B5;
  --btn-borde: #8FB3A0;
  position: relative;
  overflow: hidden;
  min-height: min(820px, 100svh);
}
.verum__inner {
  /* content-box: el alto mínimo se suma al relleno, como en el diseño aprobado */
  box-sizing: content-box; max-width: var(--ancho-max);
  position: relative; z-index: 2; min-height: inherit;
  padding-top: 96px; padding-bottom: 96px;
  display: flex; align-items: center;
}
.verum .unidad__texto { flex: none; width: min(520px, 46%); }
.verum .unidad__rubro { font-weight: 400; color: #CFE0D6; font-family: var(--fuente-verum); }
.verum .h2 { line-height: 1.15; font-family: var(--fuente-verum); }
.verum .unidad__bajada { color: #DCE7E0; }

/* 4.5 Sobre nosotros (fondo claro) */
.grupo { background: var(--grupo-claro); color: #111111; }
.grupo .eyebrow { color: #555555; }
.grupo__intro {
  padding-top: 96px; padding-bottom: 48px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start;
}
.grupo__texto { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.grupo .h2 { font-weight: 800; }
.grupo__bajada { font-size: 17px; line-height: 1.7; color: #333333; }
.pildoras { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 8px; }
.pildora {
  border: 1px solid #111111; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.grupo__vision { flex: 1 1 400px; min-width: 0; }
.vision {
  border-top: 1px solid #111111; border-bottom: 1px solid #111111;
  padding: 28px 0; display: flex; flex-direction: column; gap: 10px;
}
.vision__titulo { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #555555; }
.vision__texto { font-size: 24px; line-height: 1.45; font-weight: 600; }

.equipo { padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; }
.equipo .eyebrow { letter-spacing: 0.14em; }
.equipo__grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.persona { display: flex; flex-direction: column; gap: 12px; }
.persona img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; background: #D9D9D5; }
.persona figcaption { display: flex; flex-direction: column; gap: 4px; }
.persona__nombre { font-size: 17px; font-weight: 700; color: #111111; }
.persona__cargo {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #555555;
  min-height: 2.9em; line-height: 1.45;
}

.grupo__cifras-wrap { padding-bottom: 96px; }
.grupo__cifras {
  border-top: 1px solid #D0D0CC; padding-top: 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
}
.grupo__cifra { display: flex; flex-direction: column; gap: 6px; }
.grupo__cifra b { font-size: 44px; font-weight: 800; }
.grupo__cifra span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #555555; }

/* 4.6 Proyectos (galería y clientes) */
.proyectos__inner { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.proyectos__cabecera { display: flex; flex-direction: column; gap: 12px; max-width: 920px; }
.obra { display: flex; flex-direction: column; gap: 12px; }
.obra img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px;
  transition: transform .5s ease, filter .5s ease;
}
.obra img:hover { transform: scale(1.02); filter: brightness(1.06); }
.obra figcaption { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-medio); }
.obra figcaption span { letter-spacing: 0.08em; text-transform: none; color: #737373; }
.clientes { border-top: 1px solid var(--linea); padding-top: 32px; display: flex; flex-direction: column; gap: 16px; }
.clientes__lista { font-size: 18px; line-height: 1.8; font-weight: 600; color: #D4D4D4; }

/* 4.7 Pie / contacto */
.pie { border-top: 1px solid var(--linea); }
.pie__inner {
  max-width: 1048px; margin: 0 auto; padding: 88px 24px 48px;
  display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center;
}
.pie__marca { display: flex; flex-direction: column; align-items: center; width: 240px; max-width: 100%; }
.pie__wordmark { width: 100%; height: auto; display: block; }
.pie__unidades {
  width: 100%; border-top: 1px solid var(--linea-card); border-bottom: 1px solid var(--linea-card);
  padding: 32px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  align-items: center; justify-items: center; gap: 28px;
}
.pie__logo { width: auto; display: block; opacity: .75; transition: opacity .2s ease; }
.pie__logo:hover { opacity: 1; }
.pie__datos { font-style: normal; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; font-size: 14px; color: var(--gris-texto); }
.pie__datos a { color: inherit; text-decoration: none; }
.pie__copy { font-size: 12px; color: var(--gris-tenue); }

/* ---------- 5. Animaciones ---------- */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes armar { 0% { opacity: 0; transform: scale(1.3); fill-opacity: .35; } 70% { opacity: 1; transform: none; fill-opacity: .12; } 100% { opacity: 1; transform: none; fill-opacity: 0; } }
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* 5.1 Portada: las facetas se arman y aparece el logo.
   El retraso de cada faceta lo pone main.js. Sin JavaScript se ve el logo final. */
.hero polygon { transform-box: view-box; transform-origin: 416px 140px; }
.js .hero svg, .js .hero .logo-facetas__img, .js .hero__lema, .js .hero__bajar { opacity: 0; }
.hero.play svg { opacity: 1; animation: fadeout .5s ease 2.4s both; }
.hero.play polygon { animation: armar .75s cubic-bezier(.2,.8,.2,1) both; }
.hero.play .logo-facetas__img { animation: fadein .5s ease 2.3s both; }
.hero.play .hero__lema { animation: rise .6s cubic-bezier(.2,.7,.2,1) 2.45s both; }
.hero.play .hero__bajar { animation: fadein .6s ease 2.7s both; }
.hero.done svg, .no-js .hero svg { display: none; }
.js .hero.done .logo-facetas__img, .js .hero.done .hero__lema, .js .hero.done .hero__bajar { opacity: 1; animation: none; }

/* 5.2 Pie: el logo se dibuja con líneas al llegar */
.pie .logo-facetas:not(.armado) svg { display: none; }
.pie .logo-facetas.armado polygon { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pie .logo-facetas.armado .logo-facetas__img, .pie__marca.armado .pie__wordmark { opacity: 0; }
.pie .logo-facetas.dibujado polygon { animation: trazar .9s ease-in-out both; }
.pie .logo-facetas.dibujado svg { animation: fadeout .5s ease 2.1s both; }
.pie .logo-facetas.dibujado .logo-facetas__img { animation: fadein .5s ease 2s both; }
.pie__marca.dibujado .pie__wordmark { animation: rise .6s cubic-bezier(.2,.7,.2,1) 2.15s both; }

/* 5.3 RUMZ: la fachada se enciende de abajo hacia arriba y funde a la planta */
.rumz-anim {
  position: relative; overflow: hidden; width: 100%; max-width: 440px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%), linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%), linear-gradient(to right, rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
.rumz-anim__capa img { width: 100%; height: auto; display: block; }
.rumz-anim__fachada { position: relative; }
.rumz-anim__planta { position: absolute; inset: 0; opacity: 0; }
.rumz-anim__planta img, .rumz-anim .rumz-anim__luz { position: absolute; inset: 0; width: 100%; height: 100%; }
.rumz-anim__fachada .rumz-anim__luz { clip-path: inset(100% 0 0 0); }
.rumz-anim__planta .rumz-anim__luz { clip-path: circle(0% at 50% 50%); }
@keyframes rumz-fachada { 0%, 45% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes rumz-encender { 0% { clip-path: inset(100% 0 0 0); } 40%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes rumz-planta { 0%, 45% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes rumz-planta-luz { 0%, 66% { clip-path: circle(0% at 50% 50%); } 95%, 100% { clip-path: circle(80% at 50% 50%); } }
.rumz-anim.play .rumz-anim__fachada { animation: rumz-fachada 4.4s ease-in-out both; }
.rumz-anim.play .rumz-anim__fachada .rumz-anim__luz { animation: rumz-encender 4.4s linear both; }
.rumz-anim.play .rumz-anim__planta { animation: rumz-planta 4.4s ease-in-out both; }
.rumz-anim.play .rumz-anim__planta .rumz-anim__luz { animation: rumz-planta-luz 4.4s ease-out both; }

/* 5.4 Verum: Vista Molas pasa de la penumbra a las luces encendidas */
.verum-anim { position: absolute; top: 0; right: 0; bottom: 0; width: 56%; z-index: 1; overflow: hidden; }
.verum-anim__escena { position: absolute; inset: 0; transform-origin: 62% 40%; }
.verum-anim img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 38%; display: block;
}
.js .verum-anim__luz, .js .verum-anim__final { opacity: 0; pointer-events: none; }
.verum-anim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, #113229 0%, rgba(17,50,41,.86) 9%, rgba(17,50,41,.4) 22%, rgba(17,50,41,0) 36%),
    linear-gradient(0deg, rgba(17,50,41,.55) 0%, rgba(17,50,41,0) 22%);
}
.verum-anim__etiqueta {
  position: absolute; right: 28px; bottom: 26px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right;
}
.js .verum-anim__etiqueta { opacity: 0; }
.verum-anim__etiqueta b { font: 700 15px var(--fuente-verum); letter-spacing: .12em; text-transform: uppercase; color: var(--blanco); }
.verum-anim__etiqueta span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #CFE0D6; }
@keyframes verum-camara { from { transform: scale(1.12) translateY(2%); } to { transform: scale(1) translateY(0); } }
@keyframes verum-atardecer { from { filter: brightness(.55) saturate(.8); } to { filter: brightness(1) saturate(1); } }
@keyframes verum-ventana { 0% { opacity: 0; } 35% { opacity: .85; } 50% { opacity: .35; } 100% { opacity: 1; } }
.verum-anim.play .verum-anim__escena { animation: verum-camara 6.5s cubic-bezier(.22,.61,.36,1) both; }
.verum-anim.play .verum-anim__base { animation: verum-atardecer 2.2s ease-out both; }
.verum-anim.play .verum-anim__luz { animation: verum-ventana .7s ease-out both; }
.verum-anim.play .verum-anim__final { animation: fadein 1.4s ease 3.2s both; }
.verum-anim.play .verum-anim__etiqueta { animation: rise .9s ease 3.6s both; }

/* 5.5 Urban Nexus: se dibuja el plano de Vita sobre la foto aérea */
.urban-anim { position: relative; width: 100%; max-width: 520px; }
.urban-anim > img { width: 100%; height: auto; display: block; transition: opacity .5s ease .25s; }
.urban-anim__plano {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .5s ease .2s; pointer-events: none;
  /* bordes difuminados */
  -webkit-mask-image: var(--fundido-h), var(--fundido-v);
  -webkit-mask-composite: source-in;
  mask-image: var(--fundido-h), var(--fundido-v);
  mask-composite: intersect;
  --fundido-h: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 4%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.7) 16%, rgba(0,0,0,.87) 20%, rgba(0,0,0,.96) 24%, #000 28%, #000 72%, rgba(0,0,0,.96) 76%, rgba(0,0,0,.87) 80%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.3) 92%, rgba(0,0,0,.1) 96%, rgba(0,0,0,0) 100%);
  --fundido-v: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 4%, rgba(0,0,0,.3) 8%, rgba(0,0,0,.5) 12%, rgba(0,0,0,.7) 16%, rgba(0,0,0,.87) 20%, rgba(0,0,0,.96) 24%, #000 28%, #000 72%, rgba(0,0,0,.96) 76%, rgba(0,0,0,.87) 80%, rgba(0,0,0,.7) 84%, rgba(0,0,0,.5) 88%, rgba(0,0,0,.3) 92%, rgba(0,0,0,.1) 96%, rgba(0,0,0,0) 100%);
}
.urban-anim__plano .ln {
  fill: none; stroke: #B9DDFF; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s linear .7s;
}
.urban-anim__plano .l { stroke-width: 2.6; stroke: #CFE6FF; }
.urban-anim__plano .w { stroke-width: 3.4; stroke: #EAF4FF; }
.urban-anim__plano .i { stroke-width: 2; stroke: #B9DDFF; }
.urban-anim__plano .m { stroke-width: 1.3; stroke: #7FA9D3; }
.urban-anim__plano .c { stroke-width: 1.3; stroke: #8FB8E0; }
.urban-anim__plano .d { stroke-width: 1.2; stroke: #5F8DBA; }
.urban-anim__plano .n { stroke-width: 1.2; stroke: #8FB8E0; }
.urban-anim__plano .dim { fill: #B9DDFF; font-size: 26px; letter-spacing: .08em; opacity: 0; transition: opacity 0s .7s; }
.urban-anim__etiqueta {
  position: absolute; left: 14%; top: 14%; font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: #B2DCFF; opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.urban-anim.play .urban-anim__plano { opacity: 1; transition-delay: 0s; }
.urban-anim.play .urban-anim__plano .ln { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.5,0,.2,1) var(--d); }
.urban-anim.play .urban-anim__plano .dim { opacity: 1; transition: opacity .5s ease var(--d); }
.urban-anim.play > img { opacity: .35; transition-delay: .15s; }
.urban-anim.play .urban-anim__etiqueta { opacity: 1; transition-delay: 2.6s; }

/* En computadora, RUMZ y Urban Nexus se animan al pasar el mouse */
@media (hover: hover) {
  .rumz-anim:hover .rumz-anim__fachada { animation: rumz-fachada 4.4s ease-in-out both; }
  .rumz-anim:hover .rumz-anim__fachada .rumz-anim__luz { animation: rumz-encender 4.4s linear both; }
  .rumz-anim:hover .rumz-anim__planta { animation: rumz-planta 4.4s ease-in-out both; }
  .rumz-anim:hover .rumz-anim__planta .rumz-anim__luz { animation: rumz-planta-luz 4.4s ease-out both; }
  .urban-anim:hover .urban-anim__plano { opacity: 1; transition-delay: 0s; }
  .urban-anim:hover > img { opacity: .35; transition-delay: .15s; }
  .urban-anim:hover .urban-anim__plano .ln { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.5,0,.2,1) var(--d); }
  .urban-anim:hover .urban-anim__plano .dim { opacity: 1; transition: opacity .5s ease var(--d); }
  .urban-anim:hover .urban-anim__etiqueta { opacity: 1; transition-delay: 2.6s; }
}

/* 5.6 Leaser: los tres autos entran y les pasa un brillo */
.leaser-anim { position: relative; aspect-ratio: 1400 / 860; overflow: hidden; width: 100%; max-width: 640px; }
.leaser-anim__auto, .leaser-anim__brillo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.js .leaser-anim__auto { opacity: 0; }
.leaser-anim.on .leaser-anim__auto { opacity: 1; }
.leaser-anim__brillo {
  opacity: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 46%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 54%);
  background-size: 300% 100%; background-position: 110% 0; mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.leaser-anim__brillo--rojo { -webkit-mask-image: url(../assets/anim/leaser-mask-rojo.webp); mask-image: url(../assets/anim/leaser-mask-rojo.webp); }
.leaser-anim__brillo--gris { -webkit-mask-image: url(../assets/anim/leaser-mask-gris.webp); mask-image: url(../assets/anim/leaser-mask-gris.webp); }
.leaser-anim__brillo--plata { -webkit-mask-image: url(../assets/anim/leaser-mask-plata.webp); mask-image: url(../assets/anim/leaser-mask-plata.webp); }
@keyframes entra-izq { 0% { opacity: 0; transform: translateX(-75%) skewX(-8deg); filter: blur(10px); } 55% { opacity: 1; filter: blur(2px); } 80% { transform: translateX(1.8%) skewX(1.5deg); filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes entra-der { 0% { opacity: 0; transform: translateX(75%) skewX(8deg); filter: blur(10px); } 55% { opacity: 1; filter: blur(2px); } 80% { transform: translateX(-1.8%) skewX(-1.5deg); filter: none; } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes brillo { 0% { opacity: 1; background-position: 110% 0; } 100% { opacity: 1; background-position: -10% 0; } }
.leaser-anim.on .leaser-anim__auto--rojo { animation: entra-izq 1.2s cubic-bezier(.16,.72,.24,1) both; }
.leaser-anim.on .leaser-anim__auto--gris { animation: entra-der 1.2s cubic-bezier(.16,.72,.24,1) .2s both; }
.leaser-anim.on .leaser-anim__auto--plata { animation: entra-der 1.3s cubic-bezier(.16,.72,.24,1) .55s both; }
.leaser-anim.on .leaser-anim__brillo--rojo, .leaser-anim.on .leaser-anim__brillo--gris { animation: brillo 1.1s ease-in-out 1.6s both; }
.leaser-anim.on .leaser-anim__brillo--plata { animation: brillo 1.1s ease-in-out 1.9s both; }

/* ---------- 6. Responsive ---------- */
@media (max-width: 1000px) {
  .grilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .menu__link { display: none; }
  /* Verum: foto arriba a ancho completo, texto abajo */
  .verum { min-height: 0; }
  .verum-anim { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 78svh; }
  .verum-anim::after { background: linear-gradient(0deg, #113229 0%, rgba(17,50,41,.7) 12%, rgba(17,50,41,0) 34%); }
  .verum__inner { min-height: 0; padding-top: 8px; }
  .verum .unidad__texto { width: 100%; }
  .verum-anim__etiqueta { right: 20px; bottom: 22px; }
}
@media (max-width: 760px) {
  .unidad__inner, .verum__inner { padding-top: 64px; padding-bottom: 64px; gap: 36px; }
  .verum__inner { padding-top: 8px; padding-bottom: 64px; }
  .unidad__logo { height: 80px; }
  .equipo__grilla { gap: 12px; }
}
@media (max-width: 600px) {
  .grupo__cifras { grid-template-columns: 1fr; gap: 18px; }
  .intro-btn { bottom: auto; top: 14px; right: 14px; }
}
@media (max-width: 560px) {
  .grilla-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cifras { gap: 14px; }
  .cifras__valor { font-size: 21px; }
  .cifras__texto { font-size: 11px; }
}

/* ---------- 7. Movimiento reducido ----------
   Si la persona desactivó las animaciones en su equipo, se muestra todo en su estado final. */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .obra img:hover { transform: none; }
  .hero svg { display: none !important; }
  .hero .logo-facetas__img, .hero__lema, .hero__bajar, .pie__wordmark, .pie .logo-facetas__img { animation: none !important; opacity: 1 !important; }
  .intro-btn { display: none; }
  .rumz-anim__planta { display: none; }
  .rumz-anim__fachada, .rumz-anim__luz { animation: none !important; }
  .rumz-anim__luz, .urban-anim__plano, .urban-anim__plano .ln { transition: none !important; }
  .verum-anim__final, .verum-anim__etiqueta { opacity: 1 !important; animation: none !important; }
  .verum-anim__escena, .verum-anim__base { animation: none !important; }
  .verum-anim__luz { display: none; }
  .leaser-anim__auto { opacity: 1 !important; animation: none !important; }
  .leaser-anim__brillo { display: none; }
}