/* ============================================================
   LIXXUS CAPITAL — Luxury Real Estate Experience
   Glassmorphism · Editorial · Cinematic
   ============================================================ */

:root{
  --bg:        #0b0d10;
  --bg-2:      #111418;
  --bg-3:      #1a1d22;
  --ink:       #1a1d22;
  --ink-soft:  #4a4f57;
  --paper:     #f6f4ef;
  --paper-2:   #ecebe5;
  --line:      rgba(255,255,255,.10);
  --line-dark: rgba(0,0,0,.10);

  --gold:      #c9a96a;
  --gold-2:    #e6cf95;
  --gold-3:    #8a7440;

  --serif:     "Cormorant Garamond", "Times New Roman", serif;
  --sans:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius:    18px;
  --radius-lg: 28px;

  --container: 1240px;
  --shadow-soft: 0 30px 60px -30px rgba(0,0,0,.5);
  --shadow-glass: 0 12px 32px -12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* ===== Typography utility ===== */
.h-display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem, 5vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--ink);
}
.h-display em{font-style:italic;color:var(--gold-3)}
.h-display--light{color:#f6f4ef}
.h-display--light em{color:var(--gold-2)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;
  margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.eyebrow--light{color:rgba(255,255,255,.6)}

.lead{font-size:1.05rem;color:var(--ink-soft);max-width:54ch;margin:18px 0 28px}
.lead--light{color:rgba(255,255,255,.72)}

.section{padding:120px 0;position:relative}
.section--dark{
  background:linear-gradient(180deg, #0a0c10 0%, #0e1116 100%);
  color:#eeeae0;
}
.section__head{margin-bottom:60px;max-width:880px}
.section__head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;max-width:none;flex-wrap:wrap}
.section__lead{max-width:38ch;color:var(--ink-soft);font-size:.96rem}

/* ============================================================
   GLASS PRIMITIVES
   ============================================================ */
.glass{
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow-glass);
}
.glass-dark{
  background:rgba(20,24,28,.55);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-glass);
  color:#eeeae0;
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:200;
  background:#0a0c10;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  color:var(--gold-2);
  transition:opacity .8s ease, visibility .8s ease;
}
.preloader__mark{
  animation:floatY 2.6s ease-in-out infinite;
  width:64px;height:64px;
  background-image:url('img/icono-logo-white.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.preloader__mark svg{display:none}
.preloader__bar{
  width:140px;height:1px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;
}
.preloader__bar span{
  position:absolute;inset:0;background:var(--gold);transform-origin:left;
  animation:loadbar 1.6s ease-in-out infinite;
}
@keyframes loadbar{
  0%{transform:scaleX(0)}
  50%{transform:scaleX(1)}
  100%{transform:scaleX(0);transform-origin:right}
}
@keyframes floatY{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
body.is-ready .preloader{opacity:0;visibility:hidden}
body.is-loading{overflow:hidden}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(10,12,16,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .4s ease;
}
.topbar__inner{
  max-width:var(--container);margin:0 auto;padding:11px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.topbar__links{display:flex;gap:26px}
.topbar__links a{transition:color .25s}
.topbar__links a:hover{color:var(--gold-2)}
.topbar__social{display:flex;gap:14px;color:rgba(255,255,255,.65);margin-left:auto;margin-right:24px}
.topbar__social a{transition:color .25s, transform .25s}
.topbar__social a:hover{color:var(--gold-2);transform:translateY(-1px)}
.topbar__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--gold) 0%, var(--gold-2) 100%);
  color:#1a1d22;font-weight:500;letter-spacing:.18em;
  transition:transform .25s, box-shadow .25s;
}
.topbar__cta:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(201,169,106,.6)}
.topbar__cta-dot{width:6px;height:6px;border-radius:50%;background:#1a1d22;animation:dot 1.6s ease-in-out infinite}
@keyframes dot{0%,100%{opacity:.3}50%{opacity:1}}

body.is-scrolled .topbar{transform:translateY(-100%)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:58px;left:0;right:0;z-index:80;
  padding:14px 28px;
  transition:top .4s ease;
}
body.is-scrolled .nav{top:8px}
.nav__inner{position:relative;
  max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:14px 22px;border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  transition:background .35s, color .35s, border-color .35s;
}
body.is-scrolled .nav__inner{
  background:rgba(255,255,255,.85);
  border-color:rgba(0,0,0,.06);
  color:var(--ink);
}
.nav__brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
/* Hide the inline SVG mark and replace with the real PNG logo via ::before */
.nav__brand-mark{display:none}
.nav__brand{position:relative;padding-left:42px}
.nav__brand::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:34px;height:34px;
  background-image:url('img/icono-logo-white.png');
  background-size:contain;background-repeat:no-repeat;background-position:center;
  transition:background-image .35s;
}
body.is-scrolled .nav__brand::before{
  background-image:url('img/icono-logo.png');
}
.nav__brand-text strong{font-family:var(--sans);font-weight:600;letter-spacing:.34em;font-size:.92rem;display:block;line-height:1}
.nav__brand-text em{font-family:var(--serif);font-style:italic;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;opacity:.7;display:block;margin-top:2px}
.nav__menu{display:flex;gap:6px;align-items:center}
.nav__menu a{
  padding:9px 16px;border-radius:999px;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;
  transition:background .25s, color .25s;
  position:relative;
}
.nav__menu a:hover{background:rgba(255,255,255,.08)}
body.is-scrolled .nav__menu a:hover{background:rgba(0,0,0,.05)}
.nav__menu a.is-active{color:var(--gold-2)}
body.is-scrolled .nav__menu a.is-active{color:var(--gold-3)}

/* ----- Dropdowns ----- */
.nav__item{position:relative}
.nav__item--has > a{display:inline-flex;align-items:center;gap:6px}
.nav__caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.7;transition:transform .25s;
}
.nav__item:hover .nav__caret,
.nav__item.is-open .nav__caret{transform:rotate(180deg)}

/* Invisible bridge that keeps :hover alive when the cursor crosses
   the gap between the menu item and the dropdown panel. */
.nav__item--has::after{
  content:"";
  position:absolute;
  top:100%;
  left:-16px;right:-16px;
  height:26px;
  pointer-events:none;
}
.nav__item--has:hover::after{pointer-events:auto}
.nav__item:has(> .nav__drop--mega)::after{top:calc(100% - 14px);height:42px}

/* El panel extiende su propia zona de hover hacia arriba en TODO su ancho:
   así el cursor puede ir en diagonal hasta las tarjetas de los extremos sin
   salirse del área activa y sin que el menú se cierre a media trayectoria. */
.nav__drop::before{
  content:"";position:absolute;
  left:0;right:0;top:-26px;height:26px;
}

.nav__drop{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%, -8px);
  min-width:280px;padding:12px;border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 28px 60px -20px rgba(0,0,0,.25);
  color:var(--ink);
  opacity:0;pointer-events:none;visibility:hidden;
  /* Abre al instante; al salir espera ~180ms antes de empezar a cerrarse, para
     que un movimiento rápido del mouse no lo tire. */
  transition:opacity .16s ease .06s, transform .2s ease .06s, visibility 0s linear .22s;
  display:flex;flex-direction:column;gap:2px;
}
.nav__item:hover .nav__drop,
.nav__item.is-open .nav__drop,
.nav__item:focus-within .nav__drop{
  transition:opacity .14s ease, transform .18s ease, visibility 0s;
}
.nav__drop a{
  display:block;padding:12px 16px;border-radius:12px;
  text-transform:none;letter-spacing:0;font-size:.92rem;
  transition:background .25s;
}
.nav__drop a:hover{background:rgba(201,169,106,.12)}
.nav__drop a strong{display:block;font-weight:500;color:var(--ink);font-size:.95rem}
.nav__drop a em{display:block;font-style:normal;color:var(--ink-soft);font-size:.78rem;margin-top:2px}
.nav__item:hover .nav__drop,
.nav__item.is-open .nav__drop,
.nav__item:focus-within .nav__drop{
  opacity:1;pointer-events:auto;visibility:visible;transform:translate(-50%, 0);
}

/* Mega dropdown for projects */
/* El item del mega es static: el panel se posiciona respecto a .nav__inner y nunca se sale de la pantalla */
.nav__item--mega-host{position:static}
/* El item que contiene el mega se vuelve estático: el panel se centra respecto a
   .nav__inner y nunca se desborda de la pantalla. */
.nav__item:has(> .nav__drop--mega){position:static}
.nav__drop--mega{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  width:min(880px, 92vw);min-width:0;
  left:50%;transform:translate(-50%,-8px);
}
.nav__item:hover .nav__drop--mega,
.nav__item.is-open .nav__drop--mega,
.nav__item:focus-within .nav__drop--mega{transform:translate(-50%,0)}
.nav__drop .megacard{
  position:relative;padding:90px 14px 14px;border-radius:14px;
  overflow:hidden;background:#1a1d22;color:#fff;
  text-transform:none;letter-spacing:0;
  isolation:isolate;
  min-height:140px;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:box-shadow .3s ease;
}
.nav__drop .megacard:hover{box-shadow:0 12px 28px -12px rgba(0,0,0,.6)}
.megacard__media{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transition:transform .8s ease;
}
/* Velo oscuro: sin él los títulos se pierden contra la foto de fondo.
   Base pareja + degradado fuerte hacia abajo, donde va el texto. */
.nav__drop .megacard::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,10,14,.18) 0%, rgba(8,10,14,.48) 42%, rgba(8,10,14,.93) 100%),
    rgba(8,10,14,.14);
  transition:opacity .3s ease;
}
.nav__drop .megacard:hover::before{opacity:.92}
.megacard:hover .megacard__media{transform:scale(1.08)}
.nav__drop .megacard:hover{background:#1a1d22}
.megacard__badge{
  position:absolute;top:12px;right:12px;
  padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;
}
.megacard__title{
  display:block;font-family:var(--serif);font-size:1.1rem;font-weight:500;line-height:1.1;
  text-shadow:0 1px 10px rgba(0,0,0,.75);
}
.megacard__sub{
  display:block;color:rgba(255,255,255,.82);font-size:.74rem;letter-spacing:.08em;margin-top:4px;
  text-shadow:0 1px 8px rgba(0,0,0,.7);
}

.nav__toggle{display:none;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.nav__toggle span{width:18px;height:1.5px;background:currentColor;transition:transform .25s, opacity .25s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:max(100vh, 880px);
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#0b0d10}
.hero__slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero__slide.is-active{opacity:1}
/* Per-image focal points — center the most photogenic portion of each
   render given the wide hero aspect ratio. */
.hero__slide[data-img*="CONCEPTUAL"]{background-position:center 55%}
.hero__slide[data-img*="FRONTAL"]{background-position:center 28%}
.hero__slide[data-img*="Torre-Milan"]{background-position:center 42%}
.hero__slide[data-img*="Casa%20Club"]{background-position:center 62%}
.hero__slide[data-img*="ALBERCA"]{background-position:center 45%}
.hero__slide[data-img*="porto-15/portada"]{background-position:center 55%}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,10,14,.35) 0%, rgba(8,10,14,.15) 35%, rgba(8,10,14,.85) 100%),
    linear-gradient(90deg, rgba(8,10,14,.55) 0%, rgba(8,10,14,0) 60%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode:overlay;opacity:.35;
}

.hero__content{
  position:relative;z-index:2;
  max-width:var(--container);
  margin:0 auto;padding:200px 28px 180px;
  min-height:100%;display:flex;flex-direction:column;justify-content:center;
}
.hero__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.6rem, 7vw, 6.4rem);
  line-height:1;letter-spacing:-.018em;
  margin:18px 0 24px;max-width:14ch;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > *,
.hero__title .line{
  animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.hero__title em{font-style:italic;color:var(--gold-2)}
.hero__title .line:nth-child(1){animation-delay:.2s}
.hero__title .line:nth-child(2){animation-delay:.35s}
.hero__title .line:nth-child(3){animation-delay:.5s}
@keyframes rise{
  0%{transform:translateY(60%);opacity:0;filter:blur(6px)}
  100%{transform:translateY(0);opacity:1;filter:blur(0)}
}
.hero__sub{
  max-width:52ch;font-size:1.05rem;
  color:rgba(255,255,255,.82);margin-bottom:36px;
  animation:rise 1.2s .8s cubic-bezier(.2,.8,.2,1) both;
}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;animation:rise 1.2s .95s cubic-bezier(.2,.8,.2,1) both}

.hero__card{
  position:absolute;right:28px;bottom:140px;z-index:3;
  width:300px;padding:22px 22px 18px;border-radius:var(--radius);
  color:#fff;
  background:rgba(20,24,28,.45);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  animation:rise 1.2s 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.hero__card-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.84rem;
}
.hero__card-row:last-child{border-bottom:0}
.hero__card-key{color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.18em;font-size:.66rem}
.hero__card-val{font-weight:500}
.hero__card-row--cta a{color:var(--gold-2);font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}
.hero__card-row--cta a span{transition:transform .3s;display:inline-block;margin-left:6px}
.hero__card-row--cta a:hover span{transform:translateX(4px)}

.hero__pager{position:absolute;left:28px;bottom:60px;z-index:3;display:flex;gap:10px}
.hero__pager-btn{width:30px;height:2px;background:rgba(255,255,255,.25);transition:background .25s, width .25s}
.hero__pager-btn.is-active{background:var(--gold-2);width:46px}

.hero__scroll{
  position:absolute;right:28px;bottom:60px;z-index:3;
  display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,.7);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
}
.hero__scroll-line{
  width:50px;height:1px;background:rgba(255,255,255,.4);position:relative;overflow:hidden;
}
.hero__scroll-line::after{
  content:"";position:absolute;left:-50%;top:0;width:50%;height:100%;background:var(--gold-2);
  animation:slide 2.4s ease-in-out infinite;
}
@keyframes slide{
  0%{transform:translateX(0)}
  100%{transform:translateX(300%)}
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  transition:transform .25s, background .3s, color .3s, box-shadow .3s, border-color .3s;
  cursor:pointer;
  border:1px solid transparent;
}
.btn svg{transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn--gold{
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:#1a1d22;
  box-shadow:0 12px 30px -12px rgba(201,169,106,.55);
}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(201,169,106,.7)}
.btn--ghost{
  border-color:rgba(255,255,255,.35);color:#fff;background:transparent;
}
.btn--ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.6)}
.btn--dark{background:#1a1d22;color:#fff}
.btn--dark:hover{background:#000;transform:translateY(-2px)}
.btn--full{width:100%;justify-content:center}
.btn--sm{padding:10px 18px;font-size:.7rem}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--paper)}
.about__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.about__copy h2{margin-bottom:8px}
.about__pills{margin:24px 0 32px;display:flex;flex-direction:column;gap:10px}
.pill{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;border-radius:14px;
  background:#fff;border:1px solid rgba(0,0,0,.05);
  font-size:.95rem;
  transition:transform .25s, box-shadow .25s;
}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(0,0,0,.15)}
.pill__num{
  font-family:var(--serif);font-style:italic;color:var(--gold-3);
  font-size:1.15rem;min-width:28px;
}

.about__visual{position:relative;display:grid;grid-template-columns:1fr;gap:24px}
.about__media{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-soft);
}
.about__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease}
.about__media:hover img{transform:scale(1.04)}
.about__media--small{aspect-ratio:16/9;width:70%;margin-left:auto;margin-top:-80px;position:relative;z-index:2;border:6px solid var(--paper)}

.about__chip{
  position:absolute;left:24px;bottom:24px;padding:14px 18px;border-radius:14px;
  display:flex;align-items:center;gap:14px;
}
.about__chip strong{font-family:var(--serif);font-size:1.8rem;color:var(--gold-3);line-height:1}
.about__chip span{font-size:.82rem;color:var(--ink);max-width:14ch}

/* ============================================================
   SERVICIOS
   ============================================================ */
.services__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.service{
  padding:36px 28px 32px;border-radius:var(--radius);
  position:relative;overflow:hidden;
  transition:transform .35s ease, border-color .35s ease;
}
.service:hover{transform:translateY(-6px);border-color:rgba(201,169,106,.4)}
.service__num{
  font-family:var(--serif);font-style:italic;color:var(--gold-2);
  font-size:1.4rem;margin-bottom:48px;letter-spacing:.04em;
}
.service h3{
  font-family:var(--serif);font-weight:500;font-size:1.45rem;
  margin-bottom:12px;line-height:1.2;color:#fff;
}
.service p{color:rgba(255,255,255,.7);font-size:.92rem;line-height:1.6}

/* ============================================================
   PROYECTOS
   ============================================================ */
.projects{background:var(--paper-2)}
.projects__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:36px;
}
/* Inicio: 2 cards por fila, más grandes (heredan el estilo base amplio) */
.projects__grid--6{grid-template-columns:repeat(2,1fr);gap:34px}
/* Los renders oficiales son verticales 9:16; una tarjeta más alta evita recortar
   el edificio y elimina las barras negras que dejaba object-fit:contain. */
.projects__grid--6 .project{aspect-ratio:3/4}

.project__badge{
  position:absolute;top:18px;right:18px;z-index:4;
  padding:8px 14px;border-radius:999px;
  background:rgba(20,24,28,.6);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;
}
.project__badge--gold{background:linear-gradient(135deg,var(--gold) 0%, var(--gold-2) 100%);color:#1a1d22;border-color:transparent}
.project__badge--soon{background:rgba(31,58,138,.78);border-color:rgba(255,255,255,.25)}
.project__badge--done{background:rgba(50,128,90,.78);border-color:rgba(255,255,255,.25)}
.project{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(160deg,#16191e 0%,#0c0e12 100%);aspect-ratio:5/6;
  box-shadow:var(--shadow-soft);
  isolation:isolate;
}
.project__media{position:absolute;inset:0;z-index:1}
.project__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 28%;
  transition:transform 1.6s ease, filter .6s ease;
  filter:brightness(.95) saturate(1);
}
.project:hover .project__media img{transform:scale(1.06);filter:brightness(.95) saturate(1.05)}
.project::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%);
}
.project__body{
  position:absolute;left:24px;right:24px;bottom:24px;z-index:3;
  padding:26px 28px;border-radius:var(--radius);
  color:var(--ink);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border:1px solid rgba(255,255,255,.6);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.project:hover .project__body{transform:translateY(-6px)}
.project__tag{
  display:inline-block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-3);margin-bottom:8px;
}
.project__body h3{
  font-family:var(--serif);font-size:2rem;font-weight:500;line-height:1.05;
  margin-bottom:8px;
}
.project__body p{color:var(--ink-soft);font-size:.94rem;margin-bottom:14px}
.project__meta{
  display:flex;gap:22px;padding:12px 0;
  border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);
  margin-bottom:14px;font-size:.78rem;color:var(--ink-soft);
}
.project__meta strong{display:block;color:var(--ink);font-family:var(--serif);font-size:1.1rem;font-weight:500}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:var(--ink);
}
.link-arrow span{transition:transform .3s}
.link-arrow:hover{color:var(--gold-3)}
.link-arrow:hover span{transform:translateX(4px)}

/* ============================================================
   NUMBERS
   ============================================================ */
.numbers__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:center}
.numbers__list{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 36px}
.numbers__list li{padding:26px 0;border-top:1px solid rgba(255,255,255,.1)}
.numbers__list strong{
  display:block;font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,5vw,4.6rem);line-height:1;color:#fff;
  letter-spacing:-.02em;
}
.numbers__list strong::after{content:"+";color:var(--gold-2);margin-left:4px;font-style:italic}
.numbers__list span{display:block;margin-top:8px;color:rgba(255,255,255,.6);font-size:.88rem;letter-spacing:.04em}

/* ============================================================
   ESQUEMAS
   ============================================================ */
.schemes{
  background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
.schemes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.scheme{display:flex;flex-direction:column;gap:0}
.scheme__top{
  padding:34px 30px 30px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.04);border-bottom:0;
}
.scheme__pill{
  display:inline-block;padding:6px 14px;border-radius:999px;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  background:#1a1d22;color:#fff;margin-bottom:18px;
}
.scheme__pill--gold{background:linear-gradient(135deg,var(--gold) 0%, var(--gold-2) 100%);color:#1a1d22}
.scheme h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1.15;margin-bottom:10px}
.scheme p{color:var(--ink-soft);font-size:.94rem}
.scheme__list{
  background:#fff;border:1px solid rgba(0,0,0,.05);border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:18px 30px 30px;
}
.scheme__list li{
  padding:14px 0;border-bottom:1px dashed rgba(0,0,0,.08);
  display:flex;justify-content:space-between;align-items:center;
  font-size:.9rem;color:var(--ink-soft);
}
.scheme__list li:last-child{border-bottom:0}
.scheme__list em{font-style:normal;font-weight:600;color:var(--ink);font-family:var(--serif);font-size:1.05rem}

.scheme--featured .scheme__top{
  background:linear-gradient(180deg,#1a1d22 0%, #0f1116 100%);color:#fff;border-color:#000;
}
.scheme--featured .scheme__top p{color:rgba(255,255,255,.72)}
.scheme--featured{transform:translateY(-12px)}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{background:var(--paper);text-align:center;padding:140px 0}
.quote__inner{max-width:840px;margin:0 auto}
.quote__mark{width:60px;height:60px;color:var(--gold);opacity:.7;margin:0 auto 24px}
.quote__text{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.3;color:var(--ink);
  margin-bottom:30px;
}
.quote__by{display:flex;flex-direction:column;gap:4px;font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.quote__by em{font-style:normal;font-family:var(--serif);text-transform:none;letter-spacing:.04em;color:var(--gold-3)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact__list{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.contact__list li{
  display:flex;align-items:center;gap:18px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.contact__ico{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-2);
}
.contact__list strong{display:block;font-weight:500;color:#fff;font-size:.98rem}
.contact__list em{display:block;font-style:normal;color:rgba(255,255,255,.55);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}

.contact__form{
  padding:36px;border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:14px;
}
.contact__form h3{
  font-family:var(--serif);font-weight:500;font-size:1.6rem;color:#fff;margin-bottom:6px;
}
.contact__form label{display:flex;flex-direction:column;gap:6px}
.contact__form span{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.contact__form input,
.contact__form select,
.contact__form textarea{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:13px 14px;color:#fff;font:inherit;
  transition:border-color .25s, background .25s;
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(255,255,255,.09);
}
.contact__form select option{background:#1a1d22;color:#fff}
.contact__form textarea{resize:vertical;min-height:90px}
.contact__sent{
  margin-top:6px;font-size:.85rem;color:var(--gold-2);opacity:0;transform:translateY(6px);
  transition:opacity .4s, transform .4s;
}
.contact__sent.is-on{opacity:1;transform:translateY(0)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:#070a0e;color:rgba(255,255,255,.7);
  padding:90px 0 24px;border-top:1px solid rgba(255,255,255,.06);
}
.footer__grid{display:grid;grid-template-columns:1.3fr .8fr .8fr 1.1fr;gap:50px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.06)}
.nav__brand--footer{color:#fff;margin-bottom:18px;padding-left:0}
.nav__brand--footer::before{display:none}
.nav__brand--footer .nav__brand-text{display:none}
.nav__brand--footer{
  width:200px;height:60px;
  background-image:url('img/Logo-Horizontal-Color.png');
  background-size:contain;background-repeat:no-repeat;background-position:left center;
  filter:brightness(0) invert(1);
  display:block;
}
.nav__brand--footer svg{display:none}
.footer__col h4{
  color:#fff;font-family:var(--serif);font-weight:500;font-size:1.1rem;
  margin-bottom:18px;
}
.footer__col ul{display:flex;flex-direction:column;gap:10px}
.footer__col a{transition:color .25s}
.footer__col a:hover{color:var(--gold-2)}
.footer__hours{margin-top:16px;font-size:.86rem}
.footer__news{display:flex;gap:8px;margin-top:14px}
.footer__news input{
  flex:1;padding:12px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#fff;font:inherit;
}
.footer__news input:focus{outline:none;border-color:var(--gold)}
.footer__news button{
  padding:12px 22px;border-radius:999px;background:var(--gold);color:#0a0c10;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.74rem;
  transition:background .25s;
}
.footer__news button:hover{background:var(--gold-2)}

.footer__bar{
  padding-top:24px;display:flex;justify-content:space-between;gap:20px;
  font-size:.78rem;color:rgba(255,255,255,.45);flex-wrap:wrap;
}
.footer__bar a:hover{color:var(--gold-2)}

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;align-items:center;gap:10px;
  padding:14px 18px 14px 14px;border-radius:999px;
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  color:#1a1d22;
  box-shadow:0 18px 40px -12px rgba(201,169,106,.55);
  transition:transform .25s, box-shadow .25s;
}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 24px 50px -12px rgba(201,169,106,.75)}
.wa-float__pulse{
  position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(201,169,106,.6);
  animation:pulse 2.4s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,169,106,.55)}
  100%{box-shadow:0 0 0 22px rgba(201,169,106,0)}
}
.wa-float__label{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}

/* ============================================================
   COOKIES BANNER
   ============================================================ */
.cookies{
  position:fixed;left:22px;bottom:22px;z-index:60;
  max-width:520px;
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:16px 20px;border-radius:18px;
  transform:translateY(140%);transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.cookies.is-visible{transform:translateY(0)}
.cookies.is-hidden{display:none}
.cookies__ico{font-size:1.4rem}
.cookies p{font-size:.86rem;line-height:1.4;color:var(--ink)}
.cookies a{color:var(--gold-3);font-weight:600;text-decoration:underline}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease, transform .9s ease}
.reveal.is-in{opacity:1;transform:translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .about__grid,
  .contact__grid,
  .numbers__grid{grid-template-columns:1fr;gap:48px}
  .services__grid,
  .schemes__grid{grid-template-columns:repeat(2,1fr)}
  .projects__grid{grid-template-columns:1fr}
  .projects__grid--6{grid-template-columns:repeat(2,1fr)}
  .nav__drop--mega{grid-template-columns:repeat(2,1fr);width:min(560px,92vw)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .scheme--featured{transform:none}
  .hero__card{display:none}
}
@media (max-width: 760px){
  .section{padding:80px 0}
  .topbar__inner{flex-wrap:wrap;gap:10px;padding:8px 14px}
  .topbar__links{order:2;width:100%;justify-content:center;gap:18px;font-size:.68rem}
  .topbar__social{margin-left:0;margin-right:14px;gap:12px}
  .topbar__cta{padding:7px 14px;font-size:.65rem;gap:6px}
  .nav{top:74px;padding:8px 12px}
  body.is-scrolled .nav{top:0}
  .nav__inner{padding:10px 14px 10px 14px;border-radius:18px}

  /* Smaller logo on mobile */
  .nav__brand{padding-left:36px;gap:8px}
  .nav__brand::before{width:28px;height:28px}
  .nav__brand-text strong{font-size:.78rem;letter-spacing:.28em}
  .nav__brand-text em{font-size:.62rem;letter-spacing:.32em}

  .nav__menu{
    position:fixed;left:12px;right:12px;top:140px;max-height:calc(100vh - 160px);
    flex-direction:column;align-items:stretch;gap:0;
    padding:14px;border-radius:22px;
    background:rgba(10,12,16,.96);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;overflow-y:auto;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .35s ease, opacity .35s ease;
  }
  body.is-menu-open .nav__menu{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav__menu a{padding:14px 16px;border-radius:14px;color:#fff;letter-spacing:.14em;font-size:.82rem}
  body.is-scrolled .nav__menu{background:rgba(10,12,16,.96);color:#fff}
  body.is-scrolled .nav__menu a{color:#fff}

  /* Hide hover dropdowns on mobile — items become direct links */
  .nav__item--has::after{display:none}
  .nav__caret{display:none}
  .nav__item--has > a{padding-bottom:14px;margin-bottom:0}
  .nav__drop,
  .nav__drop--mega{display:none !important}

  .nav__toggle{display:flex;color:inherit}
  body.is-scrolled .nav__toggle{color:var(--ink)}

  /* Hero adjustments */
  .hero{min-height:600px;height:auto}
  .hero__content{padding-bottom:100px}
  .hero__title{font-size:clamp(2.6rem, 12vw, 4rem)}
  .hero__sub{font-size:.95rem}
  .hero__pager{left:16px;bottom:40px}
  .hero__scroll{display:none}
  .hero__actions{gap:10px}
  .hero__actions .btn{padding:12px 20px;font-size:.7rem}

  /* Project grids */
  .services__grid,
  .schemes__grid,
  .projects__grid--6,
  .footer__grid{grid-template-columns:1fr;gap:18px}
  .numbers__list{grid-template-columns:1fr}
  .about__media--small{width:90%;margin-top:-40px}

  /* Spacing & container */
  .container{padding:0 16px}
  .h-display{font-size:clamp(2rem, 8vw, 2.8rem)}

  /* Floating elements */
  .wa-float__label{display:none}
  .wa-float{padding:14px;right:14px;bottom:90px}
  .cookies{left:10px;right:10px;bottom:10px;max-width:none;grid-template-columns:auto 1fr;grid-template-rows:auto auto;padding:14px}
  .cookies button{grid-column:1/-1}
  .cookies p{font-size:.78rem;line-height:1.4}

  /* Footer cleaner on mobile */
  .footer{padding:60px 0 20px}
  .footer__grid{padding-bottom:30px;gap:30px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:8px;text-align:left}

  /* Section heads */
  .section__head--row{flex-direction:column;align-items:flex-start;gap:18px}

  /* Quote section more compact */
  .quote{padding:80px 0}

  /* Contact form spacing */
  .contact__form{padding:24px}
  .contact__list li{padding:12px 0}

  /* Project cards — better proportions on mobile */
  .project{aspect-ratio:4/5}
  .project__body{padding:18px 20px}
  .project__body h3{font-size:1.4rem}
}

/* Very small screens */
@media (max-width: 420px){
  .topbar__links{gap:14px;font-size:.62rem}
  .topbar__cta{font-size:.6rem;padding:6px 12px}
  .nav__brand-text{display:none}
  .nav__brand{padding-left:34px}
  .hero__title{font-size:clamp(2.2rem, 10vw, 3.2rem)}
  .h-display{font-size:1.8rem}
}

/* ============================================================
   ESTADOS DE PROYECTO — un color por status
   Verde = disponible · Dorado = pre-venta · Azul = próximamente
   Teal = lotes · Gris = entregado · Morado = boutique
   Se aplica a las tarjetas del mega-menú (.megacard__badge) y a las
   tarjetas de la sección Proyectos (.project__badge).
   ============================================================ */
:root{
  --st-disponible:#16a34a;
  --st-enventa:#16a34a;
  --st-proximamente:#2563eb;
  --st-lotes:#0d9488;
  --st-entregado:#59636f;
  --st-boutique:#8b5cf6;
}

.megacard__badge{
  background:rgba(10,12,16,.62);
  border:1px solid rgba(255,255,255,.28);
  font-weight:600;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

/* --- Disponible: verde --- */
.megacard__badge.is-enventa,
.project__badge.is-enventa,
.megacard__badge.is-disponible,
.project__badge.is-disponible{
  background:var(--st-disponible);border-color:rgba(255,255,255,.34);color:#fff;
}
/* --- Pre-venta: dorado de marca --- */
.megacard__badge.is-preventa,
.project__badge.is-preventa{
  background:linear-gradient(135deg,var(--gold) 0%, var(--gold-2) 100%);
  border-color:transparent;color:#1a1d22;
}
/* --- Próximamente: azul --- */
.megacard__badge.is-proximamente,
.project__badge.is-proximamente{
  background:var(--st-proximamente);border-color:rgba(255,255,255,.34);color:#fff;
}
/* --- Lotes: verde azulado --- */
.megacard__badge.is-lotes,
.project__badge.is-lotes{
  background:var(--st-lotes);border-color:rgba(255,255,255,.34);color:#fff;
}
/* --- Entregado: gris neutro (ya no compite con el verde de disponible) --- */
.megacard__badge.is-entregado,
.project__badge.is-entregado{
  background:var(--st-entregado);border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.94);
}
/* --- Boutique: morado --- */
.megacard__badge.is-boutique,
.project__badge.is-boutique{
  background:var(--st-boutique);border-color:rgba(255,255,255,.34);color:#fff;
}

.project__badge.is-enventa,
.project__badge.is-disponible,
.project__badge.is-proximamente,
.project__badge.is-lotes,
.project__badge.is-entregado,
.project__badge.is-boutique{backdrop-filter:none;-webkit-backdrop-filter:none}