html{ background: var(--bg); }
:root{
  --bg:#070707;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.78);
  --muted2:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.18);
  --shadow:0 12px 38px rgba(0,0,0,.42);
  --r:20px;

  /* Clean palette */
  --sage:#aab39a;
}

.container{max-width:1120px;margin:0 auto;padding:0 22px;}


*{box-sizing:border-box}
html,body{margin:0;max-width:100%;overflow-x:hidden;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:radial-gradient(1200px 700px at 18% -10%, rgba(255,255,255,.08), rgba(0,0,0,0) 60%), #0c0c0c;color:var(--text);}
body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Helvetica Neue",Helvetica;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}
a{color:inherit}

.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand__logo{
  height:40px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.nav{display:flex;align-items:center}
.nav__panel{display:flex;gap:22px;align-items:center}
.nav a{
  text-decoration:none;
  letter-spacing:.14em;
  font-size:12px;
  text-transform:uppercase;
  opacity:.92;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  line-height:1;
  padding:0 2px;
}
.nav a:hover{opacity:1}

/* Mobile drawer extra CTA (hidden on desktop) */
.nav__wa,.nav__meta{display:none;}

.navbtn{
  display:none;
  width:46px;height:40px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(0,0,0,.18);
  backdrop-filter: none;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.navbtn span{
  display:block;height:2px;width:18px;margin:4px auto;
  background:var(--fg);border-radius:999px;opacity:.9;
}
/* Mobile menu (overhauled via media query below). */
.nav--open{display:flex!important;}

@media (max-width:1024px){
  /* Mobile drawer menu: overlay + right panel (no layout shift) */
  .nav.nav--open{
    position:fixed;
    inset:0;
    z-index:45;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  /* Right sliding panel */
  .nav.nav--open > .nav__panel{
    margin-left:auto;
    width:min(380px, 86vw);
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:rgba(14,14,14,.92);
    border-left:1px solid rgba(255,255,255,.12);
    border-radius:0;
    /* Less empty space on mobile; respect safe areas */
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    box-shadow:-18px 0 60px rgba(0,0,0,.55);
    animation:drawerIn .22s ease-out both;
  }

  /* Close button removed on mobile: tap outside to close */

  @keyframes drawerIn{
    from{transform:translateX(18px); opacity:0}
    to{transform:translateX(0); opacity:1}
  }

  .nav.nav--open a,
  .nav.nav--open .nav-dd__btn{
    width:100%;
    justify-content:flex-start;
    height:auto;
    padding:14px 12px;
    border-radius:14px;
  }

  .nav.nav--open .nav__wa{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    font-weight:700;
  }
  .nav.nav--open .nav__meta{
    display:block;
    font-size:12px;
    opacity:.75;
    padding:6px 8px 0;
  }
  .nav.nav--open a:hover,
  .nav.nav--open .nav-dd__btn:hover{background:rgba(255,255,255,.08)}

  /* Services dropdown becomes an accordion */
  .nav.nav--open .nav-dd{width:100%;}
  .nav.nav--open .nav-dd__menu{
    margin-top:8px;
    padding:8px;
    background:rgba(0,0,0,.22);
    border-radius:16px;
    border:1px solid rgba(255,255,255,.08);
  }
  .nav.nav--open .nav-dd__menu a{padding:12px 12px;border-radius:12px;text-align:left;}
}


/* HERO */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding-top:90px}
.hero__bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transform:scale(1.02);
  transition:opacity 1200ms ease;
  opacity:0;
  will-change:opacity;
}
.hero__bg--a{opacity:1}
.hero__overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.56) 100%),
    radial-gradient(1000px 600px at 20% 10%,rgba(0,0,0,.42),transparent 58%);
}
.hero__content{position:relative;z-index:10;max-width:860px;width:92%;margin:0;padding:0 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding-bottom:120px}
.hero__card{width:100%;padding:34px 30px;border-radius:22px;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center}

.hero__footer{
  position:absolute;inset:auto 0 0 0;
  z-index:12;
  padding:22px;
  display:flex;
  justify-content:flex-start;
}
.hero__left{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-end}
.meta{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.meta__label{font-size:11px;letter-spacing:.18em;opacity:.88;text-transform:uppercase}
.meta__value{font-size:13px;opacity:.96}

/* WhatsApp floating button */
.wa{
  position:fixed;right:18px;bottom:18px;
  width:58px;height:58px;border-radius:999px;
  background:#25D366;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  display:grid;place-items:center;
  z-index:60;
  transition:transform .2s ease, filter .2s ease;
}
.wa img{width:28px;height:28px;object-fit:contain;filter:brightness(0) invert(1)}
.wa:hover{transform:translateY(-2px);filter:brightness(1.04)}

/* Sections */
.section{padding:84px 22px}
.section__inner{max-width:1180px;margin:0 auto}
.h2{
  margin:0 0 26px;
  font-size:26px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lead{
  margin:0 0 34px;
  color:var(--muted);
  max-width:75ch;
  line-height:1.6;
}

.section--sage{
  background: var(--sage);
  color: #0a0a0a;
}
.section--sage .section__inner{
  text-align:center;
}
.section--sage .h2{ color:#0a0a0a; }
.section--sage .lead{ color: rgba(0,0,0,.72); margin-left:auto; margin-right:auto; }

/* Services grid (Eduardo style) */
.services{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:22px;
}
.service{
  grid-column:span 4;
  text-decoration:none;
  color:inherit;
  transform:translateY(10px);
  opacity:0;
  transition:transform .7s ease, opacity .7s ease;
}
.service.is-in{transform:translateY(0);opacity:1}
.service__img{
  width:100%;
  aspect-ratio:4/5;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.26);
  box-shadow:0 16px 34px rgba(0,0,0,.18);
}
.service__img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);transition:transform .5s ease}
.service:hover .service__img img{transform:scale(1.07)}
.service__cap{
  margin-top: 14px;
  text-align:center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
}
.service__desc{
  margin: 10px auto 0;
  text-align:center;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0,0,0,.72);
}

/* Projects gallery */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.ph{
  grid-column:span 4;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow);
  min-height:230px;
  transform:translateY(10px);
  opacity:0;
  transition:transform .7s ease, opacity .7s ease;
}
.ph.is-in{transform:translateY(0);opacity:1}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}

/* Simple pages */
.pagewrap{min-height:100vh;padding:110px 22px 30px;max-width:1180px;margin:0 auto}
.h1{font-size:22px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column:span 6;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{margin:0 0 8px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.card p{margin:0;color:var(--muted);line-height:1.55}

/* Footer */
.footer{background:#050505;border-top:1px solid rgba(255,255,255,.08)}
.footer__inner{
  max-width:1180px;margin:0 auto;
  padding:62px 22px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:46px;
}
.footer h3{
  margin:0 0 16px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.footer p{margin:0 0 14px;color:var(--muted2);line-height:1.7;font-size:14px}
.footer__copy{margin-top:24px;font-size:13px;color:rgba(255,255,255,.55)}
.contact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.contact li{color:var(--muted2);line-height:1.6;font-size:14px}
.contact a{text-decoration:underline;text-underline-offset:3px}
.contact .k{display:inline-block;min-width:110px;color:rgba(255,255,255,.88);font-weight:600}
.footer__tag{margin-top:18px;color:rgba(255,255,255,.52);font-size:13px}

/* Responsive */
@media (max-width:980px){
  .service{grid-column:span 6}
  .ph{grid-column:span 6}
  .footer__inner{grid-template-columns:1fr}
}
@media (max-width:1024px){
  .nav{display:none}
  .navbtn{display:block}
  .brand__logo{height:36px}
  .card{grid-column:span 12}
}
@media (max-width:560px){
  .service{grid-column:span 12}
  .ph{grid-column:span 12}
}

.section--sage .service__desc{ display:none; }

/* Avoid any seam line */
.hero__footer{ background: transparent; }

/* OVERLAY_EXTEND_V10: extend overlay a few pixels to avoid visible seam */
.hero__overlay{position:absolute;inset:0;}
.hero__overlay::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:24px;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35));
  pointer-events:none;
}

/* SERVICES_STYLE_V10: cleaner like Eduardo */
.section--sage{background:#aab39e;}
.service__img{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.10);
}
.service__img img{
  transform: scale(1.06);
  filter: contrast(1.05) brightness(.98);
}
@media (max-width: 560px){
  .service__img img{ transform: scale(1.03); }
  .service__cap{ font-size: 14px; }
}

/* GALLERY_STYLE_V10: make plan images pop on dark background */
.ph{
  background: rgba(255,255,255,.08);
}
.ph img{
  background: rgba(255,255,255,.95);
  object-fit: cover;
  filter: contrast(1.05) brightness(.98);
}
/* CONTACT_V11 */
.contact{ padding: 44px 0 90px; }
.contact__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 34px;
  align-items:start;
}
@media (max-width: 900px){
  .contact__grid{ grid-template-columns: 1fr; }
}

.contact__cards{
  margin-top: 22px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 560px){
  .contact__cards{ grid-template-columns: 1fr; }
}

.ccard{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 16px 16px 18px;
  box-shadow: var(--shadow);
}
.ccard__title{
  margin:0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.90);
}
.ccard__text{
  margin: 10px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.55;
}
.ccard a{ text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }

.contact__formwrap{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}

.h2{
  margin: 0;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.p{ margin: 12px 0 0; color: rgba(255,255,255,.80); line-height: 1.7; }
.p--muted{ color: rgba(255,255,255,.70); }
.p--tiny{ font-size: 12px; color: rgba(255,255,255,.62); margin-top: 14px; }

.form{ margin-top: 16px; }
.field{ display:block; margin-top: 14px; }
.field__label{ display:block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 8px; }
.field__input{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: #fff;
  padding: 12px 12px;
  outline:none;
}
.field__input:focus{ border-color: rgba(255,255,255,.32); }
.field__input--ta{ min-height: 120px; resize: vertical; }

.form__actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  text-decoration:none;
  cursor:pointer;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255,255,255,.08);
  color:#fff;
}
.btn--primary{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.20);
}
.btn--ghost{
  background: transparent;
}
.btn--wa{
  margin-top: 12px;
  width: fit-content;
  border-color: rgba(37,211,102,.55);
  background: rgba(37,211,102,.12);
}
/* V12_SERVICES_PROJECTS_KENBURNS */

/* Ken Burns (slow zoom) for hero slideshow */
@keyframes kenburns {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.08); }
}
.hero__bg{
  will-change: transform, opacity;
}
.hero__bg.is-ken{
  animation: kenburns 6s ease-in-out forwards;
}

/* Services page - Eduardo-style cards */
.svc-wrap{ padding: 26px 0 92px; }
.svc-head{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.svc-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:11px;
  opacity:.9;
}
.svc-divider{
  width: 140px;
  height: 2px;
  margin: 18px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity: .85;
}
.svc-head .lead{
  max-width: 72ch;
  margin: 14px auto 0;
}

.svc-grid{
  margin-top: 34px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}
.svc-card{
  grid-column: span 4;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, border-color .25s ease;
}
.svc-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
}
.svc-media{
  position: relative;
  background: rgba(255,255,255,.96);
}
.svc-media img{
  width:100%;
  display:block;
  aspect-ratio: 4/3;
  object-fit: cover;
  transform: scale(1.05);
  filter: contrast(1.04) brightness(.99);
  transition: transform .35s ease;
}
.svc-card:hover .svc-media img{ transform: scale(1.08); }
.svc-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.14) 100%);
  pointer-events:none;
}
.svc-body{ padding: 16px 16px 18px; }
.svc-title{
  margin:0;
  font-size: 13px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color:#fff;
}
.svc-desc{
  margin: 10px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.6;
}

.svc-cta{
  margin-top: 28px;
  padding: 18px 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.svc-cta__text{
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  max-width: 64ch;
}
.svc-cta .btn{ white-space: nowrap; }

/* Projects page - cleaner gallery + captions + lightbox */
.p2-wrap{ padding: 12px 0 96px; }
.p2-grid{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.p2-item{
  grid-column: span 4;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
.p2-media{ position:relative; background: rgba(255,255,255,.96); cursor: zoom-in; }
.p2-media img{
  width:100%;
  display:block;
  aspect-ratio: 4/3;
  object-fit: cover;
  transform: scale(1.04);
  filter: contrast(1.03) brightness(.99);
  transition: transform .35s ease;
}
.p2-item:hover .p2-media img{ transform: scale(1.07); }
.p2-cap{
  padding: 14px 16px 16px;
}
.p2-title{
  margin:0;
  font-size: 12px;
  letter-spacing:.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.p2-sub{
  margin: 8px 0 0;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}

@media (max-width: 900px){
  .svc-card{ grid-column: span 6; }
  .p2-item{ grid-column: span 6; }
}
@media (max-width: 560px){
  .svc-card{ grid-column: span 12; }
  .p2-item{ grid-column: span 12; }
}

/* Lightbox */
.lb{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 2000;
  padding: 18px;
}
.lb.is-open{ display:flex; }
.lb__inner{
  width: min(1100px, 100%);
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.92);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  position: relative;
}
.lb__img{
  width:100%;
  display:block;
  max-height: 78vh;
  object-fit: contain;
  background: #0b0b0b;
}
.lb__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
}
.lb__txt{ color: rgba(255,255,255,.78); font-size: 13px; }
.lb__close{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding: 10px 12px;
  cursor:pointer;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Lightbox navigation (premium) */
.lb__nav{
  position:absolute;
  top:0; left:0; right:0; bottom:44px;
  pointer-events:none;
}
.lb__navbtn{
  pointer-events:auto;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:28px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(10px);
}
.lb__navbtn:hover{ background:rgba(255,255,255,.10); }
.lb__prev{ left:12px; }
.lb__next{ right:12px; }
@media (max-width:560px){
  .lb__navbtn{ width:46px; height:46px; }
}
/* V13_NAV_HERO */
.header::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 100%);
  backdrop-filter: none;
  pointer-events:none;
}
.header{ position:fixed; }
.header > *{ position:relative; z-index:1; }

.brand{ gap:12px; }
.brand__tag{
  display:none;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  white-space: nowrap;
}
@media (min-width: 980px){
  .brand__tag{ display:inline-block; }
}

.nav a{
  font-size: 12px;
  padding: 0 2px;
  border: 0;
  background: none;
  border-radius: 0;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
  transition: opacity .15s ease;
}
.nav a:hover{ opacity: 1; }

.meta{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  backdrop-filter: none;
}
.meta__label{ font-size: 10px; }
.meta__value{ font-size: 14px; }

.hero__footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  padding: 0 22px 22px;
}
.hero__right{ display:flex; align-items:center; }
.hero__wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(37,211,102,.55);
  background: rgba(37,211,102,.12);
  text-decoration:none;
  color:#fff;
  letter-spacing:.10em;
  text-transform: uppercase;
  font-size: 11px;
  box-shadow: var(--shadow);
}
.hero__wa img{ width:18px;height:18px; object-fit:contain; filter:brightness(0) invert(1); }

@media (max-width: 560px){
  .hero__wa span{ letter-spacing:.08em; font-size:10px; }
  .hero__footer{ padding: 0 14px 14px; }
}

/* Slow zoom */
@keyframes kenburns {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.10); }
}
.hero__bg.is-ken{
  animation: kenburns 7s ease-in-out forwards;
}
/* V15_NO_GLOBITOS: header/nav/meta without pill "globitos" */
@media (min-width: 720px){
  .nav a{
    border: none !important;
    background: transparent !important;
    padding: 8px 0 !important;
    border-radius: 0 !important;
  }
  .nav a{
    position: relative;
  }
  .nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:1px;
    background: rgba(255,255,255,.72);
    transition: width .22s ease;
  }
  .nav a:hover::after{
    width:100%;
  }
}

.meta{
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.45);
}
.meta__label{
  opacity: .85;
}
/* V16_PRESENCE */
.nav a{
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
@media (min-width: 720px){
  .nav{ gap: 22px; }
  .nav a{ font-size: 13px; }
}
@media (max-width: 720px){
  .nav a{ font-size: 14px; }
}

/* Meta (IG / Tel) more present without "globitos" */
.meta{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-left: 12px !important;
  border-left: 2px solid rgba(255,255,255,.35);
}
.meta__label{
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.meta__value{
  font-size: 15px;
  color: rgba(255,255,255,.95);
}
.hero__footer{
  padding: 0 22px 26px;
}
@media (max-width: 560px){
  .meta__value{ font-size: 14px; }
  .hero__footer{ padding: 0 14px 14px; }
}

/* V18_NO_BLUR_HEADER */
.header::before,
.header,
.topbar,
.navwrap{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Make nav more present (wider + slightly bigger) without pill boxes */
@media (min-width: 720px){
  .nav{ gap: 26px; }
  .nav a{
    font-size: 13.5px;
    padding: 10px 0 !important;
  }
}
@media (max-width: 720px){
  .nav a{ font-size: 14.5px; }
}

/* IG / Tel more legible without bubbles */
.meta{
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.meta__value{
  font-weight: 600;
}

/* V18_CONTACT */
.contact{ padding: 10px 0 40px; }
.h1{ font-size: clamp(28px, 3.2vw, 40px); letter-spacing: .08em; text-transform: uppercase; }
.h2{ font-size: 16px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; opacity: .92; }
.lead{ max-width: 720px; opacity: .9; line-height: 1.55; margin: 12px 0 24px; }
.contact__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 18px; }
.contact__card{
  background: rgba(12,12,12,.72);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
.contact__list{ list-style:none; padding:0; margin:0 0 16px; display:grid; gap: 10px; }
.contact__list span{ display:inline-block; width: 98px; opacity:.78; }
.contact__form{ display:grid; gap: 12px; }
.contact__form label{ display:grid; gap: 6px; font-size: 13px; letter-spacing:.02em; }
.contact__form input, .contact__form textarea{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 12px;
  color: #fff;
  outline: none;
}
.contact__form input:focus, .contact__form textarea:focus{
  border-color: rgba(255,255,255,.28);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  text-transform: uppercase;
}
.btn:hover{ background: rgba(255,255,255,.14); }
.btn--wa{
  margin-top: 6px;
  background: rgba(37,211,102,.12);
  border-color: rgba(37,211,102,.28);
}
.muted{ opacity:.75; font-size: 12.5px; line-height: 1.5; margin-top: 12px; }

@media (max-width: 860px){
  .contact__grid{ grid-template-columns: 1fr; }
  .contact__list span{ width:auto; margin-right: 6px; }
}

/* V20_CONTACT_VIS */
.page--contact{
  background: #060606;
}
.page--contact .pagewrap{
  padding-top: 120px;
}
.page--contact .h1,
.page--contact .h2,
.page--contact .lead,
.page--contact .contact__list,
.page--contact label{
  color: rgba(255,255,255,.94);
}
.page--contact .contact__card{
  background: rgba(12,12,12,.78);
}

/* V20_NO_BLUR */
.header, .topbar, .navwrap, .hero__top, .hero__overlay{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
.header::before, .topbar::before, .hero__top::before, .hero__overlay::before{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

/* V20_NAV_PRESENCE */
.header{
  padding-left: 22px;
  padding-right: 22px;
}
@media (min-width: 900px){
  .header{ padding-left: 34px; padding-right: 34px; }
  .nav a{ font-size: 14px; }
  .nav{ gap: 30px; }
}


/* HERO - Texto y CTA (Home) */
.hero__title{
  margin:0 0 14px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  font-size:clamp(34px,4.5vw,58px);
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}
.hero__subtitle{
  margin:0 auto 22px;
  max-width:860px;
  font-size:clamp(16px,2.1vw,20px);
  line-height:1.55;
  opacity:.92;
  text-shadow:0 10px 30px rgba(0,0,0,.45);
}
.hero__cta{display:grid;gap:10px;justify-items:center;margin-bottom:16px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:14px;
  font-weight:800;text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 45px rgba(0,0,0,.45);
  transition:transform .15s ease, filter .15s ease;
}
.btn--primary{background:rgba(255,255,255,.95);color:#0b0b0f}
.btn--primary:hover{transform:translateY(-1px);filter:brightness(1.03)}
.hero__micro{margin:0;color:rgba(255,255,255,.75);font-size:14px}
.hero__badges{list-style:none;padding:0;margin:18px 0 0;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero__hint{margin:12px 0 0;text-align:center;font-size:13px;opacity:.85}
.hero__hint a{color:rgba(255,255,255,.92);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.hero__hint a:hover{border-bottom-color:rgba(255,255,255,.6)}
.badge{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.90);
  padding:9px 12px;border-radius:999px;
  font-weight:700;font-size:13px;
  backdrop-filter: blur(8px);
}
@media (max-width:520px){
  .btn{width:100%;max-width:360px}
  .hero__micro{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .btn{transition:none}
}

/* --- HERO OVERRIDES (Pro centered) --- */
.hero{justify-content:center;align-items:center;text-align:center;}
.hero__content{
  width: min(980px, 92%);
  margin: 0 auto;
  min-height: calc(100vh - 90px);
  display: grid;
  place-items: center;
  padding: 0 18px;
  padding-bottom: 0;
}
.hero__card{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 46px 44px;
  border-radius: 26px;
  background: rgba(0,0,0,.46);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}
.hero__title{
  text-transform: none;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.hero__subtitle{
  max-width: 640px;
  margin: 0 auto 26px;
  opacity: .92;
}
.hero__cta{margin: 0 auto 12px;}

.hero .btn--primary{
  background: rgba(255,255,255,.92);
  color: #0b0b0f;
  border-color: rgba(255,255,255,.28);
}
.hero .btn--primary:hover{filter: brightness(1.02); transform: translateY(-1px);}
.hero__micro{margin-top: 12px;}
.hero__badges{margin-top: 18px; justify-content: center;}
@media (max-width: 520px){
  .hero__card{padding: 30px 22px; border-radius: 22px;}
  .hero__title{margin-bottom: 14px;}
}


/* ===== HERO CLEAN LEGIBILITY v31 (NO BLUR / NO CARD / NO HALO) ===== */
.hero__card{display:none !important;}
.hero__inner{
  background:none !important;
  box-shadow:none !important;
  border:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.hero__inner::before{display:none !important;}

/* Overlay does the job */
.hero__overlay{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.72)) !important;
}

/* Ensure background images are not blurred */
.hero__bg{
  filter:none !important;
}

/* Text differentiation without cards */
.hero__title{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing:-0.03em;
  text-shadow:
    0 18px 46px rgba(0,0,0,.65),
    0 2px 0 rgba(0,0,0,.35);
}

.hero__subtitle{
  font-weight:600;
  text-shadow:0 14px 32px rgba(0,0,0,.55);
}

/* Decorative underline line under title */
.hero__title::after{
  content:"";
  display:block;
  width:140px;
  height:2px;
  margin:14px auto 0;
  background:rgba(255,255,255,.55);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}

/* Badges slightly darker to separate from bg */
.badge{
  background:rgba(0,0,0,.35) !important;
}
/* ===== END HERO CLEAN LEGIBILITY v31 ===== */




/* --- Dropdown Servicios (Planos / Construcciones) --- */
/* Objetivo: navbar limpio (sin globos) + dropdown usable (click) */
.nav{align-items:center}
.nav-dd{position:relative;display:flex;align-items:center}

/* Botón "SERVICIOS" igual a los links del nav */
.nav-dd__btn{
  background:none;
  border:0;
  padding:0 2px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;

  color:inherit;
  font:inherit;
  letter-spacing:.14em;
  font-size:12px;
  text-transform:uppercase;
  opacity:.92;
  line-height:1;
}
.nav-dd__btn:hover{opacity:1}

/* Menú centrado bajo el botón */
.nav-dd__menu{
  position:absolute;
  top:calc(100% + 2px);
  left:50%;
  transform:translateX(-50%);
  min-width:280px;
  padding:10px;
  border-radius:16px;
  background:rgba(14,14,14,.92);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  box-shadow:0 18px 44px rgba(0,0,0,.50);
  display:none;
  z-index:9999;
  text-align:center;
}

/* Área "puente" para que no se cierre con el mouse */
.nav-dd__menu::before{
  content:"";
  position:absolute;
  left:-12px; right:-12px;
  top:-14px;
  height:14px;
}

.nav-dd__menu a{
  display:block;
  padding:11px 14px;
  border-radius:12px;
  text-decoration:none;
  letter-spacing:.08em;
  font-size:12px;
  text-transform:uppercase;
  opacity:.95;
  text-align:center;
}
.nav-dd__menu a:hover{background:rgba(255,255,255,.08);opacity:1}

/* Abrir solo por click (clase .is-open) */
.nav-dd.is-open .nav-dd__menu{display:block;}

/* Mobile behavior: disable floating popover and use accordion inside the drawer */
@media (max-width:1024px){
  .nav-dd{width:100%;}
  .nav-dd__btn{
    width:100%;
    justify-content:flex-start;
    padding:14px 12px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    font-size:14px;
  }
  .nav-dd__menu{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    min-width:unset;
    width:100%;
    text-align:left;
    margin-top:10px;
  }
  .nav-dd__menu::before{display:none;}
}

/* When the drawer is open, keep the accordion styling */
.nav--open .nav-dd__menu{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.08);
}

/* Centered H1 helper */
.h1--center{ text-align:center; }



/* --- Construcciones page --- */
.build{
  padding-bottom:90px;
}

/* Fondo "estudio": uniforme en todo el sitio (evita cortes) */
body{
  background:#0c0c0c;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(1200px 620px at 18% 0%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(900px 520px at 82% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(12,12,12,1) 0%, rgba(0,0,0,1) 55%, rgba(12,12,12,1) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 160px);
  opacity:.34;
}

.lead{max-width:860px;margin:14px auto 0;opacity:.9;line-height:1.6}
.lead--center{text-align:center}
.build-cta{display:flex;justify-content:center;margin-top:18px}

.build-hero{padding:170px 0 90px;}

.build-hero{position:relative; overflow:hidden;}
.build-hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background-image:
    radial-gradient(900px 520px at 18% 20%, rgba(212,175,55,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.78) 100%),
    url("fotos/obras/obra-nueva-cardales/foto1.jpg");
  background-size:cover;
  background-position:center;
  filter: blur(10px) saturate(1.12) brightness(.78);
  transform:scale(1.08);
  opacity:.85;
  pointer-events:none;
}
.build-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 220px),
    radial-gradient(900px 520px at 78% 10%, rgba(255,255,255,.07), transparent 55%);
  opacity:.18;
  pointer-events:none;
}
.build-hero .container{position:relative; z-index:1;}

@media (max-width: 720px){
  .build-hero{padding:130px 0 70px;}
}

.build-hero .h1{max-width: 1100px; margin-left:auto; margin-right:auto;}
.build-hero .lead{max-width: 72ch;}

.work-block{
  padding:84px 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.work-head{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;margin-bottom:22px}
.h2{font-size:20px;letter-spacing:.14em;text-transform:uppercase}
.muted{opacity:.75}

/* Divisor "REMODELACIONES" (cambio de sección) */
.work-divider{
  padding:110px 0 46px;
  text-align:center;
}
.work-divider .container{
  max-width:1120px;
  margin:0 auto;
  padding:0 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.work-divider .h2{
  font-size:26px;
  letter-spacing:.26em;
  opacity:.95;
  margin:0;
  position:relative;
  padding-top:18px;
}
.work-divider .h2::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:min(520px, 72vw);
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.55), transparent);
}
.work-divider .muted{
  max-width:70ch;
  margin:14px auto 0;
  font-size:14px;
  opacity:.78;
}

/* Full-width carousel con presencia */
.work-carousel{
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.car-viewport{
  width:100%;
  height: clamp(480px, 78vh, 900px);
  background:#0c0c0c;
}
@media (max-width: 720px){
  .car-viewport{height: clamp(320px, 55vh, 520px);} 
}
.car-img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.car-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,10,10,.55);
  color:#fff;
  font-size:26px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter: blur(10px);
}
.car-btn:hover{background:rgba(255,255,255,.10)}
.car-btn--prev{left:14px}
.car-btn--next{right:14px}

.car-dots{
  position:absolute;
  left:0;right:0;bottom:12px;
  display:flex;justify-content:center;gap:8px;
  flex-wrap:wrap;
  padding:0 14px;
}
.dot{
  width:10px;height:10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.25);
  cursor:pointer;
}
.dot.is-active{background:rgba(255,255,255,.75)}
/* Hero Construcciones - estilo estudio */
.hero--build{
  position:relative;
  padding:120px 0 70px;
  background:
    linear-gradient(180deg, rgba(12,12,12,.92) 0%, rgba(12,12,12,.88) 35%, rgba(12,12,12,.96) 100%),
    var(--hero-img);
  background-size:cover;
  background-position:center;
}
.hero--build::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(900px 420px at 60% 20%, rgba(255,255,255,.08), rgba(0,0,0,0) 55%),
    radial-gradient(700px 420px at 20% 70%, rgba(198,160,90,.10), rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.hero--build .hero__inner{position:relative;z-index:1;}
.stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.stat{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);min-width:170px;text-align:center}
.stat__num{display:block;font-weight:800;letter-spacing:.08em}
.stat__label{display:block;font-size:12px;opacity:.78;margin-top:2px}

/* Secciones uniformes */
.work-block, .work-divider{background:transparent;}
.work-divider{padding:80px 0 18px;text-align:center}
.work-divider .container{max-width:1120px;margin:0 auto;padding:0 22px;text-align:center}
.work-divider .h2{margin:0 0 10px}
.work-divider .section-title{
  margin:0 0 12px;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing:.18em;
  text-transform:uppercase;
  position:relative;
  display:inline-block;
  padding: 0 10px;
}
.work-divider .section-title::before,
.work-divider .section-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:70px;
  height:1px;
  background: rgba(255,255,255,.18);
}
.work-divider .section-title::before{right:100%;margin-right:14px}
.work-divider .section-title::after{left:100%;margin-left:14px}
.work-divider .muted{margin:0 auto;max-width:720px}

/* Navbar: texto alineado, sin "globos" */
.nav a, .nav-dd__btn{
  height:44px;
  padding:0 2px;
  border-radius:0;
}
.nav a{border:0;background:none}
.nav-dd__btn{outline:none}
.nav-dd__btn:focus-visible{
  outline:2px solid rgba(198,160,90,.7);
  outline-offset:3px;
  border-radius:10px;
}

.hero--build::before{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:110px;
  background:linear-gradient(180deg, rgba(12,12,12,0) 0%, #0c0c0c 90%);
  pointer-events:none;
  z-index:1;
}