/* ============ Tokens ============ */
:root {
  --c-bg: #100d0a;
  --c-stone: #e7dcc9;
  --c-stone-dim: #cdb996;

  /* Cada color trae su version "-rgb" (tres numeros separados por
     coma, sin rgb()) para poder armar recuadros de vidrio con color:
     rgba(var(--c-x-rgb), .18) en vez de un fondo solido. */
  --c-bronze: #bf8a52; --c-bronze-rgb: 191,138,82;
  --c-bronze-light: #e3b47e;
  --c-green: #3f8562; --c-green-rgb: 63,133,98;
  --c-green-deep: #16261e;
  --c-wood: #8c5f35;
  --c-blue: #4bb4e6; --c-blue-rgb: 75,180,230;
  --c-blue-glow: #8fddff; --c-blue-glow-rgb: 143,221,255;
  --c-gold: #d1a750; --c-gold-rgb: 209,167,80;
  --c-white: #f8f3ea; --c-white-rgb: 248,243,234;
  --c-ink: #14100c; --c-ink-rgb: 20,16,12;

  --panel-accent: var(--c-blue);
  --panel-accent-rgb: var(--c-blue-rgb);

  --scrim-strong: rgba(12, 9, 6, 0.62);
  --scrim: linear-gradient(180deg, rgba(12,9,6,.15) 0%, rgba(12,9,6,.5) 62%, rgba(12,9,6,.78) 100%);
  --scrim-light: linear-gradient(180deg, rgba(20,16,12,.08) 0%, rgba(20,16,12,.28) 55%, rgba(20,16,12,.55) 100%);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.68,0,1);
}

/* ============ Reset ============ */
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }

/* ============ Preloader ============ */
#preloader {
  position: fixed; inset: 0; z-index: 999;
  background: var(--c-ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}
#preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .35em;
  color: var(--c-bronze-light);
  border: 1px solid rgba(211,168,119,.4);
  padding: 14px 18px;
  border-radius: 999px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* ============ Header ============ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px;
  pointer-events: none;
}
.site-header__bar {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--c-ink-rgb),.8), rgba(var(--c-ink-rgb),.4));
  backdrop-filter: blur(14px) saturate(140%) brightness(.6);
  -webkit-backdrop-filter: blur(14px) saturate(140%) brightness(.6);
  border-bottom: 1px solid rgba(var(--c-bronze-rgb),.18);
}
.brand-mark {
  position: relative;
  display: flex; align-items: center;
  pointer-events: auto;
}
.brand-mark__lockup {
  height: 34px;
  width: auto;
  display: block;
}
.nav-toggle {
  position: relative;
  pointer-events: auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(var(--c-gold-rgb),.4);
  background: rgba(var(--c-bronze-rgb),.16);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
  transition: opacity .4s var(--ease), visibility .4s var(--ease);
}
.nav-toggle span {
  width: 16px; height: 1px; background: var(--c-white);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
}

/* ============ Floor nav (elevator panel) ============ */
/* No tiene sentido mostrar el panel del elevador antes de llegar a
   recepción -- aparece deslizándose desde ahí en adelante, y se
   esconde otra vez si se regresa antes de ese punto. */
.floor-nav {
  position: fixed;
  z-index: 55;
  left: 22px; top: 50%;
  transform: translateY(-50%) translateX(-16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
  transition: opacity .5s var(--ease), visibility .5s var(--ease), transform .5s var(--ease);
}
.floor-nav__panel {
  background: linear-gradient(155deg, rgba(var(--c-bronze-rgb),.28), rgba(var(--c-ink-rgb),.62) 70%);
  border: 1px solid rgba(var(--c-gold-rgb),.3);
  border-radius: 18px;
  padding: 14px 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.floor-nav__logo {
  display: flex; justify-content: center;
  margin-bottom: 10px;
  opacity: .85;
}
.floor-nav__logo img {
  width: 24px; height: 24px;
  object-fit: contain;
}
.floor-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.floor-nav__list a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(205,164,91,.4);
  border-radius: 999px;
  font-size: 12px;
  color: rgba(248,243,234,.75);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  white-space: nowrap;
}
.floor-nav__code {
  font-family: var(--font-display);
  font-size: 11px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
.floor-nav__label {
  letter-spacing: .01em;
  max-width: 0; overflow: hidden;
  opacity: 0;
  transition: max-width .35s var(--ease), opacity .25s var(--ease);
}
.floor-nav__panel:hover .floor-nav__label,
.floor-nav__list a.is-active .floor-nav__label {
  max-width: 140px; opacity: 1;
}
.floor-nav__list a.is-active {
  color: var(--c-blue-glow);
  border-color: var(--c-blue);
  background: rgba(63,171,224,.12);
  box-shadow: 0 0 16px rgba(63,171,224,.35);
}

@media (min-width: 900px) {
  .floor-nav { display: block; }
  /* En escritorio el panel se rige solo por nav-ready (siempre visible
     desde que se llega a recepción) -- el botón de hamburguesa ni
     siquiera existe en este ancho. */
  body.nav-ready .floor-nav {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Mobile floor nav: slide-down sheet -- hace falta nav-ready (ya se
   llegó a recepción) Y nav-open (se tocó el botón de hamburguesa).
   Antes existía tambien la regla de escritorio (solo nav-ready) sin
   media query, y por especificidad le ganaba a esta -- el panel se
   quedaba siempre visible en móvil sin importar el botón. */
@media (max-width: 899.98px) {
  .floor-nav {
    display: block;
    right: 16px; left: 16px; top: 78px; transform: none;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  body.nav-ready.nav-open .floor-nav { opacity: 1; visibility: visible; pointer-events: auto; }
  .floor-nav__panel { padding: 16px; }
  .floor-nav__list { flex-direction: column; }
  .floor-nav__label { max-width: none; opacity: 1; }
}

/* El botón de hamburguesa tampoco tiene caso antes de recepción. */
body:not(.nav-ready) .nav-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ============ Stage (fondo con crossfade continuo por scroll) ============ */
#scrollTrack { position: relative; }

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.stage__visual { position: absolute; inset: 0; z-index: -2; }
.stage__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--c-ink);
}
.stage__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--scrim);
}

.stage__content { position: absolute; inset: 0; }

/* ============ Scenes (bloques de texto por parada del scroll) ============ */
.scene {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  will-change: opacity, transform;
}
.scene.is-active { pointer-events: auto; }

.panel__content {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 100px 26px 70px;
  max-height: 100%;
  overflow-y: auto;
}
.panel__content--center { text-align: center; }
.panel__content--left { max-width: 640px; margin: 0 8% 0 0; text-align: left; }
.panel__content--right { max-width: 640px; margin: 0 0 0 auto; text-align: right; }

/* Oculto visualmente pero presente para lectores de pantalla / SEO --
   el <h1> real de la página no desaparece solo porque el hero use el
   logo como imagen en vez de texto. */
.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;
}

.hero-logo {
  display: block;
  margin: 0 auto;
  height: clamp(150px, 24vw, 260px);
  width: auto;
}

/* Vidrio con el acento del piso detrás del texto -- el video de fondo
   varía mucho de brillo (cielo, mármol blanco, madera, cuartos
   oscuros) y un solo scrim parejo no siempre da suficiente contraste;
   este recuadro sí lo garantiza en cualquier escena. */
.text-glass {
  display: inline-block;
  max-width: 100%;
  padding: 30px 34px;
  text-align: inherit;
  /* El degradado solo (18% en su esquina más clara) no basta contra
     fondos de video muy claros (mármol, vidrio) -- la capa sólida de
     abajo garantiza un piso mínimo de contraste, y brightness() en el
     backdrop-filter oscurece el propio video de fondo en vez de solo
     taparlo con más color encima. */
  background:
    linear-gradient(160deg, rgba(var(--panel-accent-rgb),.2), rgba(var(--c-ink-rgb),.72) 68%),
    rgba(var(--c-ink-rgb),.5);
  border: 1px solid rgba(var(--panel-accent-rgb),.26);
  border-radius: 22px;
  backdrop-filter: blur(18px) saturate(140%) brightness(.55);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(.55);
}
/* P5 usa texto oscuro sobre fondo claro -- el vidrio debe ser claro
   también, no oscuro (si no, texto oscuro sobre caja oscura). */
.text-glass--light {
  background: linear-gradient(160deg, rgba(var(--c-white-rgb),.62), rgba(var(--c-white-rgb),.32) 70%);
  border-color: rgba(var(--c-ink-rgb),.12);
}

@media (min-width: 900px) {
  .panel__content--left { margin-left: 8%; }
  .panel__content--right { margin-right: 8%; }
}

.panel__content--split {
  display: grid;
  gap: 40px;
}
@media (min-width: 860px) {
  .panel__content--split {
    grid-template-columns: minmax(280px, 400px) 1fr;
    align-items: center;
    gap: 60px;
  }
}

.scene--light { color: var(--c-ink); }

/* El texto de introducción de cada piso (P1-P4) usa el mismo vidrio
   con acento que .brand-feature, para que ambas tarjetas combinen. */
.floor-intro {
  padding: 28px 30px;
  background:
    linear-gradient(160deg, rgba(var(--panel-accent-rgb),.2), rgba(var(--c-ink-rgb),.7) 68%),
    rgba(var(--c-ink-rgb),.5);
  border: 1px solid rgba(var(--panel-accent-rgb),.26);
  border-radius: 22px;
  backdrop-filter: blur(18px) saturate(140%) brightness(.55);
  -webkit-backdrop-filter: blur(18px) saturate(140%) brightness(.55);
}

/* ============ Typography ============ */
.eyebrow {
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--panel-accent);
  margin-bottom: 18px;
  font-weight: 600;
}
.eyebrow--dark { color: #2f7fa6; }

/* Sombra sutil independiente del vidrio de fondo -- segunda capa de
   contraste barata que no se nota cuando no hace falta, pero evita
   que el título se lave si el video detrás sale muy claro. */
.display-xl, .display-lg, .display-md, .wordmark {
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}
.display-md--dark { text-shadow: none; }

.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, 8vw, 96px);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 1.06;
  margin-bottom: 22px;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.1;
  margin-bottom: 16px;
}
.display-md--dark { color: var(--c-ink); }

.wordmark {
  margin: 22px 0 26px;
  font-size: clamp(24px, 3.4vw, 40px);
}
.wordmark span { color: var(--c-gold); }

.lead {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.55;
  color: rgba(248,243,234,.86);
  max-width: 620px;
  margin: 18px auto 0;
}
.panel__content--left .lead,
.panel__content--right .lead { margin: 18px 0 0; }
.lead--dark { color: rgba(20,16,12,.72); }

.body-lg {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(248,243,234,.78);
  max-width: 46ch;
}
.panel__content--center .body-lg { margin: 0 auto; }
.body-lg--dark { color: rgba(20,16,12,.72); }

/* ============ CTA ============ */
/* Botón con brillo/pulso -- el mismo azul de los puntos de luz que
   recorren la fachada del edificio en el video, para que el botón se
   sienta parte de esa identidad en vez de un botón genérico. */
.cta {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 34px;
  padding: 14px 26px;
  background: rgba(var(--c-white-rgb),.1);
  border: 1px solid rgba(var(--c-blue-glow-rgb),.55);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: cta-glow 3.4s ease-in-out infinite;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: cta-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.cta span, .cta svg { position: relative; z-index: 1; }
.cta svg { transition: transform .3s var(--ease); }
@keyframes cta-shine {
  0% { left: -60%; }
  40%, 100% { left: 130%; }
}
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c-blue-rgb),.32); }
  50% { box-shadow: 0 0 24px 3px rgba(var(--c-blue-rgb),.5); }
}
.cta:hover {
  background: linear-gradient(120deg, var(--c-blue), var(--c-blue-glow));
  border-color: var(--c-blue-glow);
  color: var(--c-ink);
  transform: translateY(-2px) scale(1.03);
}
.cta:hover svg { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  .cta, .cta::before { animation: none; }
}

.scroll-hint {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 36px;
  border: 1px solid rgba(248,243,234,.5);
  border-radius: 999px;
}
.scroll-hint span {
  position: absolute; top: 7px; left: 50%; margin-left: -1.5px;
  width: 3px; height: 8px; border-radius: 3px;
  background: var(--c-blue-glow);
  animation: scrollhint 1.8s ease-in-out infinite;
}
@keyframes scrollhint {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { opacity: 0; }
}

/* ============ Brand feature (una marca real por piso) ============ */
/* Vidrio con el color de acento del piso -- se ve el video detrás,
   teñido, no una caja opaca. El degradado solo (22% en su esquina más
   clara) no basta contra fondos de video claros -- la capa sólida de
   abajo + brightness() en el backdrop garantizan contraste mínimo en
   toda la tarjeta, igual que en .text-glass. */
.brand-feature {
  background:
    linear-gradient(160deg, rgba(var(--panel-accent-rgb),.22), rgba(var(--c-ink-rgb),.7) 68%),
    rgba(var(--c-ink-rgb),.48);
  border: 1px solid rgba(var(--panel-accent-rgb),.4);
  border-radius: 20px;
  padding: 30px 28px;
  backdrop-filter: blur(16px) saturate(140%) brightness(.6);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(.6);
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brand-feature:hover {
  border-color: rgba(var(--panel-accent-rgb),.7);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.brand-feature__mark {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
}
.brand-feature__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.4));
}
.brand-feature__icon img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 48px;
  object-fit: contain;
}
.brand-feature__mark-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 0 28px rgba(var(--panel-accent-rgb),.5);
}
/* Wordmarks estilizados por marca real, tomados de su identidad
   visual -- coloreados con el acento del piso (--panel-accent) para
   que combinen con el vidrio de la tarjeta en vez de un azul fijo. */
.brand-feature__mark--rcomsii .brand-feature__mark-text {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: .08em;
  color: var(--panel-accent);
  text-transform: uppercase;
}
.brand-feature__mark--tyakxa .brand-feature__mark-text {
  color: #f8f3ea;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Sin logo (no es el oficial) -- se compensa con una insignia con
   relleno propio en vez de solo un borde vacío sobre el video, y una
   línea de acento abajo para que no se sienta plana. */
.brand-feature__mark--lct {
  background:
    linear-gradient(155deg, rgba(var(--panel-accent-rgb),.2), rgba(var(--c-ink-rgb),.8) 75%),
    rgba(var(--c-ink-rgb),.6);
  border: 1.5px solid rgba(var(--panel-accent-rgb),.75);
  border-radius: 10px;
  padding: 12px 24px 14px 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.brand-feature__mark--lct .brand-feature__mark-text {
  position: relative;
  display: inline-block;
  color: var(--panel-accent);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .1em;
  padding-bottom: 8px;
}
.brand-feature__mark--lct .brand-feature__mark-text::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--panel-accent), transparent);
  opacity: .8;
}
.brand-feature__mark--negociolocalmx .brand-feature__mark-text {
  color: var(--panel-accent);
}
.brand-feature__mark--negociolocalmx .brand-feature__mark-text span { color: var(--c-gold); }

.brand-feature__tagline {
  font-size: 16px;
  font-style: italic;
  color: var(--c-blue-glow);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  margin-bottom: 12px;
}
.brand-feature__desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(248,243,234,.92);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
  max-width: 52ch;
  margin-bottom: 20px;
  padding-left: 14px;
  border-left: 2px solid rgba(var(--panel-accent-rgb),.4);
}
.brand-feature__chips {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
/* Etiquetas de capacidades -- fondo oscuro (no teñido del acento, para
   que no compita con el resto de la tarjeta), punto luminoso a modo de
   marcador y texto en mayúsculas con tracking, para que se lean como
   datos precisos y no como pastillas genéricas. */
.brand-feature__chips li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 9px 14px 9px 12px;
  border-radius: 10px;
  background: rgba(var(--c-ink-rgb),.5);
  border: 1px solid rgba(var(--panel-accent-rgb),.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: rgba(248,243,234,.92);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.brand-feature__chips li::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--panel-accent);
  box-shadow: 0 0 7px rgba(var(--panel-accent-rgb),.85);
}
.brand-feature__chips li:hover {
  border-color: rgba(var(--panel-accent-rgb),.6);
  background: rgba(var(--c-ink-rgb),.48);
}
/* Botón "Visitar [marca]" -- mismo tratamiento de brillo/destello que
   los CTA principales, con el color de acento de ese piso, para que
   no se pierda como texto subrayado y invite a darle clic. */
.brand-feature__link {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  padding: 11px 20px;
  background: rgba(var(--panel-accent-rgb),.22);
  border: 1px solid rgba(var(--panel-accent-rgb),.65);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--c-white);
  animation: cta-glow 3.4s ease-in-out infinite;
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.brand-feature__link::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg);
  animation: cta-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}
.brand-feature__link span, .brand-feature__link svg { position: relative; z-index: 1; }
.brand-feature__link:hover {
  background: var(--panel-accent);
  border-color: var(--panel-accent);
  color: var(--c-ink);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 26px rgba(var(--panel-accent-rgb),.4);
}
@media (prefers-reduced-motion: reduce) {
  .brand-feature__link, .brand-feature__link::before { animation: none; }
}

/* ============ Vidrio para el formulario sobre fondo claro (P5) ============ */
.panel__glass {
  position: relative;
  overflow: hidden;
  margin: 14px auto 0;
  max-width: 720px;
  background: linear-gradient(165deg, rgba(var(--c-blue-rgb),.14), rgba(var(--c-ink-rgb),.74) 60%);
  border: 1px solid rgba(var(--c-blue-rgb),.28);
  border-radius: 24px;
  padding: 20px 26px 18px;
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
/* Barra de acento arriba de la tarjeta -- un detalle de "letterhead"
   para que el formulario no se sienta una caja genérica. */
.panel__glass::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--c-blue-glow), transparent);
}
.contact-form__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--c-blue-rgb),.22);
}
.contact-form__head-icon {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgba(var(--c-blue-rgb),.18);
  border: 1px solid rgba(var(--c-blue-rgb),.4);
  color: var(--c-blue-glow);
}
.contact-form__head-title {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--c-white);
  margin-bottom: 2px;
}
.contact-form__head-sub {
  font-size: 12px;
  color: rgba(248,243,234,.55);
}

/* ============ Contact ============ */
.scene--contact .panel__content { padding-top: 60px; padding-bottom: 24px; }
.scene--contact .text-glass { padding: 16px 24px; }
.scene--contact .eyebrow { margin-bottom: 8px; }
.scene--contact .display-lg { font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 6px; }
.scene--contact .lead { margin-top: 6px; font-size: 14px; }
.contact-form {
  margin: 0 auto;
  max-width: 640px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  text-align: left;
}
@media (min-width: 620px) {
  .contact-form { grid-template-columns: 1fr 1fr; }
}
.field--full { grid-column: 1 / -1; }
.field label {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(248,243,234,.65);
  margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(248,243,234,.28);
  background: rgba(248,243,234,.06);
  color: var(--c-white);
  font-size: 14px;
  resize: vertical;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  background: rgba(248,243,234,.1);
}
.field select option { color: #111; }

/* Campo con error -- rojo brillante e imposible de pasar por alto,
   con el mensaje de qué falta o qué está mal justo debajo. */
.field__error {
  display: block;
  font-size: 11px;
  color: #ff5c5c;
  margin-top: 3px;
  min-height: 12px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #ff3b3b;
  background: rgba(255,59,59,.08);
  box-shadow: 0 0 0 3px rgba(255,59,59,.18), 0 0 16px rgba(255,59,59,.25);
}
.field.is-invalid .field__error {
  opacity: 1;
  transform: translateY(0);
}

.cta--form {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 4px;
  border: 1px solid rgba(var(--c-blue-rgb),.7);
  background: rgba(var(--c-blue-rgb),.85);
  backdrop-filter: none;
  color: var(--c-ink);
  cursor: pointer;
}
.cta--form:hover { background: var(--c-blue-glow); border-color: var(--c-blue-glow); color: var(--c-ink); }

.form-note {
  grid-column: 1 / -1;
  font-size: 13px;
  color: rgba(248,243,234,.65);
  min-height: 18px;
}
.form-note.is-success { color: var(--c-blue-glow); }

.site-footer {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(248,243,234,.5);
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.site-footer a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__sep { opacity: .5; }
/* Acceso al panel administrativo -- un punto casi invisible, sin
   texto, para no exponer el enlace a cualquier visitante. */
.site-footer__admin {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(248,243,234,.12);
  text-decoration: none !important;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.site-footer__admin:hover {
  background: rgba(209,167,80,.85);
  transform: scale(1.8);
}
.hero__admin {
  position: absolute; bottom: 34px; right: 34px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(248,243,234,.12);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.hero__admin:hover {
  background: rgba(209,167,80,.85);
  transform: scale(1.8);
}

/* ============ Transición al salir a una marca ============ */
/* No tapa el video con puertas opacas -- se siente como seguir
   avanzando hacia adentro del piso que ya se está viendo: la cámara
   (el frame actual) se acerca con zoom, con un resplandor del acento
   del piso, y solo al final cruza el umbral con un destello breve
   antes de navegar de verdad. Solo se activa desde "Visitar marca". */
.stage__img.is-entering {
  transition: transform 1.3s cubic-bezier(.65,0,.35,1), filter 1.3s ease;
  transform: scale(1.32);
  filter: brightness(1.12) saturate(1.08);
}

.brand-transition {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 14vh;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.brand-transition.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.brand-transition__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 32%, rgba(var(--c-ink-rgb),.8) 100%),
    radial-gradient(circle at center, rgba(var(--panel-accent-rgb),.35), transparent 55%);
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.brand-transition.is-active .brand-transition__vignette { opacity: 1; }

.brand-transition__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s;
}
.brand-transition.is-active .brand-transition__content {
  opacity: 1;
  transform: translateY(0);
}
.brand-transition__icon {
  display: inline-flex;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.6));
}
.brand-transition__icon img { height: 40px; width: auto; }
.brand-transition__eyebrow {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(248,243,234,.6);
  margin-bottom: 8px;
}
.brand-transition__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  color: var(--c-white);
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}

/* El "cruce del umbral" -- destello breve justo antes de navegar,
   como salir de la habitación hacia la luz. */
.brand-transition__flash {
  position: absolute; inset: 0;
  z-index: 3;
  background: radial-gradient(circle, rgba(var(--panel-accent-rgb),.9), var(--c-white) 85%);
  opacity: 0;
  transition: opacity .35s ease;
}
.brand-transition.is-flashing .brand-transition__flash { opacity: 1; }

/* ============ Alerta de agradecimiento (formulario) ============ */
.form-success {
  position: fixed; inset: 0;
  z-index: 320;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(var(--c-ink-rgb), .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.form-success.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.form-success__card {
  width: 100%;
  max-width: 380px;
  text-align: center;
  padding: 40px 32px 34px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(var(--c-blue-rgb),.24), rgba(var(--c-ink-rgb),.94) 65%), rgba(var(--c-ink-rgb),.5);
  border: 1px solid rgba(var(--c-blue-rgb),.4);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  transform: scale(.94) translateY(10px);
  transition: transform .35s var(--ease);
}
.form-success.is-active .form-success__card {
  transform: scale(1) translateY(0);
}
.form-success__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(var(--c-blue-rgb),.2);
  border: 1px solid rgba(var(--c-blue-rgb),.5);
  color: var(--c-blue-glow);
  box-shadow: 0 0 24px rgba(var(--c-blue-rgb),.4);
}
.form-success__title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--c-white);
  margin-bottom: 10px;
}
.form-success__text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(248,243,234,.75);
  margin-bottom: 26px;
}
.form-success__close {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 28px;
  border-radius: 999px;
  border: 1px solid rgba(var(--c-blue-rgb),.7);
  background: rgba(var(--c-blue-rgb),.85);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.form-success__close:hover {
  background: var(--c-blue-glow);
  transform: translateY(-1px);
}

/* ============ Motion off ============ */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint span { animation: none; }
  .brand-transition { display: none; }
}