@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');:root{--green:#092d23;--deep:#062219;--gold:#d8b36b;--cream:#f6f4ee;--ink:#20332b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.035em}h2{font-size:clamp(2.4rem,4.6vw,4.6rem);line-height:1.12}h2 em,h1 em{color:var(--gold);font-style:normal}.wrap{width:min(1260px,90%);margin:auto}.nav{height:84px;background:#08281f;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:30px;position:relative;z-index:10}.brand{display:flex;align-items:center;gap:12px;line-height:1}.brandmark{font-size:57px;color:var(--gold);line-height:.6}.brand b{font-family:Georgia,serif;font-weight:500;font-size:25px;letter-spacing:.07em}.brand small{display:block;font-size:10px;color:var(--gold);letter-spacing:.21em;line-height:1.4}.nav nav{display:flex;gap:29px;font-size:13px}.nav nav a:hover{color:var(--gold)}.nav-actions{display:flex;align-items:center;gap:12px}.lang,.menu{border:1px solid #ffffff55;background:transparent;color:white;padding:8px;border-radius:4px}.menu{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:17px 25px;border-radius:3px;font-size:13px;font-weight:700;transition:transform .3s,background .3s,box-shadow .3s;border:1px solid transparent}.btn:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0003}.btn-gold{background:var(--gold);color:#11291f}.btn-outline{border-color:#ffffff99;color:white}.nav-cta{padding:13px 18px}.hero{min-height:680px;position:relative;color:white;overflow:hidden;display:flex;align-items:center}.hero-bg{position:absolute;inset:0;background:url('assets/home-1.webp') center 54%/cover;animation:slowzoom 20s ease-in-out infinite alternate}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#06271eea 0%,#06271ebd 34%,#06271e33 72%,#06271e05)}.hero-inner{position:relative;width:min(1260px,90%);margin:auto;padding:90px 0}.eyebrow{font-size:11px;letter-spacing:.24em;color:#e5c582;font-weight:700;margin-bottom:23px}.eyebrow.dark{color:#9c7942}.hero h1{font-size:clamp(3.5rem,6.5vw,7.2rem);line-height:1.05;margin-bottom:24px}.hero-copy{max-width:510px;font-size:17px;line-height:1.7;color:#f2f0e8}.hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin:32px 0}.hero-note{font-size:12px;opacity:.8}.scroll-cue{position:absolute;right:5%;bottom:30px;font-size:10px;letter-spacing:.2em}.services,.process{padding:105px 0}.section-top{max-width:800px;margin-bottom:55px}.section-top>p:last-child{max-width:620px;line-height:1.8;color:#617066}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service-card{border:1px solid #dcded4;padding:33px 26px;min-height:290px;transition:transform .3s,background .3s}.service-card:hover{background:#e9e9df;transform:translateY(-7px)}.line-icon{font-size:44px;color:#ac8a4c}.num{display:block;margin-top:20px;color:#a18a60;font-size:12px}.service-card h3{font-size:20px;margin:10px 0}.service-card p{font-size:14px;line-height:1.7;color:#647168}.editorial{display:grid;grid-template-columns:1fr 1fr;background:#0c3025;color:white;min-height:520px}.editorial-img{background:url('assets/casa-premium.jpg') center/cover;min-height:480px}.editorial-copy{padding:clamp(45px,7vw,120px);align-self:center}.editorial-copy p:not(.eyebrow){line-height:1.8;color:#d8e0d7}.text-link{display:inline-block;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:10px;margin-top:16px}.fourplex{background:radial-gradient(circle at 75% 25%,#2b5c48,#08291f 55%);color:white;padding:110px 0}.fourplex-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px}.fourplex-text p:not(.eyebrow){max-width:500px;line-height:1.8;color:#d9e4dd}.unit-picker{display:flex;gap:10px;margin:30px 0 16px}.unit{width:49px;height:49px;border:1px solid #d8b36b99;background:transparent;color:white;transition:.25s}.unit.active,.unit:hover{background:var(--gold);color:var(--deep)}.unit-description{min-height:25px;font-size:13px}.model-scene{perspective:900px;text-align:center;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center}.model{width:350px;max-width:85%;transform:rotateY(-15deg) rotateX(5deg);transform-style:preserve-3d;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 30px 20px #0007)}.roof{height:38px;background:#cbb58c;clip-path:polygon(50% 0,100% 100%,0 100%);border-bottom:8px solid #f5e7cc}.building{background:#e9e1d2;padding:16px;box-shadow:18px 14px 0 #9f9c89}.floor{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:12px}.apartment{background:#25463e;height:104px;border:9px solid #f6eddf;display:flex;align-items:center;justify-content:space-around;color:#f5d8a1;font-weight:700;transition:background .25s,box-shadow .25s}.apartment i{width:38px;height:57px;background:linear-gradient(125deg,#efc67d,#557b76);border:4px solid #18352b}.apartment.selected{background:#a37c39;box-shadow:inset 0 0 0 3px #f6cb72}.base{height:18px;background:#d7b778;transform:skewX(-15deg)}.model-caption{color:#e5d7b6;font-size:11px;margin-top:45px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{border-top:1px solid #a6aa9c;padding-top:25px}.step span{color:#aa8249;font-family:Georgia,serif;font-size:35px}.step h3{font-size:18px;margin:20px 0 12px}.step p{color:#68766a;line-height:1.7;font-size:14px}.contact{background:#082a20;color:white;padding:105px 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12%;align-items:center}.contact-grid>div>p:not(.eyebrow){color:#cbd9cf;line-height:1.8;max-width:460px}.contact-link{display:block;margin:14px 0;color:#e2c07f}.lead-form{background:#f7f5ee;color:var(--ink);padding:38px;border-radius:3px;box-shadow:0 20px 50px #0003}.lead-form h3{font-family:Georgia,serif;font-size:25px;font-weight:400}.lead-form label:not(.consent){display:block;font-size:12px;margin:17px 0 7px}.lead-form input:not([type=checkbox]),.lead-form select{width:100%;border:1px solid #cfd5cc;background:white;border-radius:2px;padding:13px;color:#243c30}.consent{display:flex;gap:9px;align-items:start;font-size:11px;line-height:1.5;margin:20px 0}.full{width:100%}.form-foot{font-size:10px;color:#6b766e;line-height:1.5;margin:12px 0 0}footer{background:#061c16;color:#d4dfd5;padding:50px 0 25px}.footer-inner{display:flex;justify-content:space-between;gap:30px}.footer-inner strong{font-family:Georgia,serif;letter-spacing:.06em}.footer-inner strong span{color:var(--gold)}.footer-inner p{font-size:12px;color:#b8c6bb}.legal{border-top:1px solid #ffffff22;padding-top:24px;font-size:11px;line-height:1.7;color:#a4b1a8}.wa{position:fixed;bottom:22px;right:22px;width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#22c35e;color:white;font-size:32px;z-index:9;box-shadow:0 8px 25px #0005}.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes slowzoom{to{transform:scale(1.09)}}@keyframes float{50%{transform:rotateY(-10deg) rotateX(4deg) translateY(-14px)}}@media(max-width:980px){.nav nav{display:none;position:absolute;top:84px;left:0;right:0;background:#08281f;padding:25px;flex-direction:column}.nav nav.open{display:flex}.menu{display:block}.nav-cta{display:none}.service-grid,.steps{grid-template-columns:repeat(2,1fr)}.fourplex-grid{gap:25px}}@media(max-width:650px){.nav{height:72px;padding:0 5%}.brand b{font-size:17px}.brand small{font-size:8px}.brandmark{font-size:42px}.nav nav{top:72px}.hero{min-height:680px}.hero-bg{background-position:62% center}.hero-overlay{background:linear-gradient(90deg,#06271eee,#06271e88)}.hero h1{font-size:3.5rem}.hero-copy{font-size:15px}.service-grid,.steps,.editorial,.fourplex-grid,.contact-grid{grid-template-columns:1fr}.services,.process,.fourplex,.contact{padding:70px 0}.service-card{min-height:220px}.editorial-img{min-height:340px}.editorial-copy{padding:50px 6%}.fourplex-grid{gap:50px}.model{width:300px}.model-scene{min-height:340px}.footer-inner{display:block}.lead-form{padding:25px}.scroll-cue{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}
/* Optimización del encabezado móvil */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
  }

  .hero-inner {
    padding-top: 45px;
    padding-bottom: 65px;
  }
}
/* Botones uniformes en dispositivos móviles */
@media (max-width: 768px) {
  .hero-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-buttons .btn {
    width: 100%;
    min-height: 56px;
    justify-content: center;
    text-align: center;
  }
}
/* Ajuste definitivo de botones en móviles */
@media (max-width: 768px) {
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }

  .hero-buttons a.btn {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 56px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* MEJORA DE TARJETAS - VERSION MOVIL */

@media (max-width: 650px) {

  .service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-card {
    min-height: 0;
    padding: 28px 24px;
    border: 1px solid #deded4;
    background: #f9f7f2;
    transition: transform .25s ease,
                box-shadow .25s ease;
  }

  .service-card .line-icon {
    font-size: 34px;
    line-height: 1;
  }

  .service-card .num {
    margin-top: 18px;
    font-size: 12px;
  }

  .service-card h3 {
    font-size: 20px;
    margin: 12px 0;
    line-height: 1.3;
  }

  .service-card p {
    font-size: 14px;
    line-height: 1.7;
  }

  .service-card:active {
    transform: scale(.985);
  }
}
/* Enlaces de evaluación en servicios */
.service-link {
  display: inline-block;
  margin-top: 24px;
  color: #b08a4c;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #b08a4c;
  padding-bottom: 6px;
  transition: color 0.3s ease;
}

.service-link:hover {
  color: #092b22;
  border-color: #092b22;
}

/* TARJETA PREMIUM FHA */

.fha-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fha-visual {
  min-height: 190px;
  background: linear-gradient(
    145deg, #092e28, #17483b
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  border-radius: 4px;
}

.fha-document {
  width: 90px;
  height: 112px;
  padding: 17px 13px;
  background: #f6f2e9;
  border: 1px solid #d4b574;
  position: relative;
  box-shadow: 8px 8px 0 #09241f;
}

.fha-document-label {
  display: block;
  font-family: Georgia, serif;
  font-size: 27px;
  color: #173e32;
  margin-bottom: 12px;
}

.fha-document-line {
  display: block;
  width: 100%;
  height: 2px;
  background: #c7b99a;
  margin-bottom: 9px;
}

.fha-document-line.short {
  width: 65%;
}

.fha-seal {
  position: absolute;
  right: -13px;
  bottom: -12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #d7b46e;
  color: #12392f;
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: bold;
  border: 3px solid #f6f2e9;
}

.fha-visual-caption {
  color: #d7b46e;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
}

.fha-card .service-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-top: auto;
  padding: 15px 18px;
  background: #103b30;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .25s ease;
}

.fha-card .service-link:hover {
  background: #205c49;
}

@media (max-width: 768px) {
  .fha-visual {
    min-height: 170px;
  }
}
/* PRUEBA VISUAL FHA */
.fha-card .fha-visual {
  background: #092e28 !important;
  min-height: 190px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}

/* AMERICAN HOUSING - TARJETAS PREMIUM */

.service-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.service-card .service-link {
  margin-top: auto;
}

/* Ilustraciones uniformes */
.finance-visual,
.income-visual,
.wealth-visual {
  height: 238px;
  width: 100%;
  background: #082e27;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 35px;
  overflow: hidden;
}

.visual-caption {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #dbb76d;
  text-align: center;
}

/* 02 - Calculadora hipotecaria */
.finance-calculator {
  width: 110px;
  padding: 13px;
  background: #f6f4ee;
  border-radius: 8px;
  box-shadow: 9px 9px 0 #061e1a;
}

.calc-screen {
  padding: 10px 5px;
  background: #d9e4d8;
  color: #082e27;
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  border-radius: 3px;
}

.calc-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.calc-keys span {
  height: 12px;
  background: #c4ad7b;
  border-radius: 2px;
}

/* 03 - Documentos W-2 y 1099 */
.income-documents {
  position: relative;
  width: 145px;
  height: 140px;
}

.income-paper {
  position: absolute;
  width: 95px;
  height: 120px;
  background: #f6f4ee;
  padding: 15px;
  box-shadow: 7px 7px 0 #061e1a;
}

.paper-back {
  right: 0;
  top: 0;
  transform: rotate(12deg);
  color: #ad8c4d;
  font-size: 23px;
  font-weight: 700;
}

.paper-front {
  left: 0;
  bottom: 0;
  transform: rotate(-7deg);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.paper-front strong {
  font-size: 25px;
  color: #082e27;
}

.paper-front span {
  display: block;
  height: 3px;
  background: #c4ad7b;
}

/* 04 - Fourplex patrimonial */
.wealth-building {
  position: relative;
  width: 155px;
  padding-top: 18px;
}

.wealth-roof {
  height: 9px;
  background: #dbb76d;
  margin-bottom: 5px;
}

.wealth-units {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  padding: 10px;
  background: #f6f4ee;
}

.wealth-units span {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d9e4d8;
  border: 2px solid #ad8c4d;
  color: #082e27;
  font-size: 14px;
  font-weight: 700;
}

/* Botones uniformes */
.service-card .service-link {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 55px;
  padding: 12px;
  background: #103d32;
  color: white;
  border-radius: 5px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: 0;
}

.service-card .service-link:hover {
  background: #dbb76d;
  color: #082e27;
}

/* Adaptación móvil */
@media (max-width: 768px) {
  .finance-visual,
  .income-visual,
  .wealth-visual {
    height: 210px;
    margin-bottom: 25px;
  }

  .service-card .service-link {
    width: 100%;
  }
}

/* CORRECCION VISUAL DE LAS TARJETAS */

.service-card .finance-visual,
.service-card .income-visual,
.service-card .wealth-visual {
  width: 100%;
  height: 238px;
  background: #082e27;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 35px;
  overflow: hidden;
}

.service-card .visual-caption {
  color: #dbb76d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
}

/* CALCULADORA */
.finance-calculator {
  width: 110px;
  padding: 13px;
  background: #f6f4ee;
  border-radius: 8px;
}

.calc-screen {
  background: #d9e4d8;
  padding: 10px;
  text-align: right;
  font-size: 22px;
  font-weight: 700;
  color: #082e27;
}

.calc-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 12px;
}

.calc-keys span {
  height: 12px;
  background: #c4ad7b;
  border-radius: 2px;
}

/* DOCUMENTOS W-2 Y 1099 */
.income-documents {
  position: relative;
  width: 145px;
  height: 140px;
}

.income-paper {
  position: absolute;
  width: 95px;
  height: 120px;
  background: #f6f4ee;
  padding: 15px;
  box-shadow: 7px 7px 0 #061e1a;
}

.paper-back {
  right: 0;
  top: 0;
  transform: rotate(12deg);
  color: #ad8c4d;
  font-size: 23px;
  font-weight: 700;
}

.paper-front {
  left: 0;
  bottom: 0;
  transform: rotate(-7deg);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.paper-front strong {
  font-size: 25px;
  color: #082e27;
}

.paper-front span {
  height: 3px;
  background: #c4ad7b;
}

/* EDIFICIO FOURPLEX */
.wealth-building {
  width: 155px;
}

.wealth-roof {
  height: 9px;
  background: #dbb76d;
  margin-bottom: 5px;
}

.wealth-units {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  padding: 10px;
  background: #f6f4ee;
}

.wealth-units span {
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d9e4d8;
  border: 2px solid #ad8c4d;
  color: #082e27;
}

/* BOTONES UNIFORMES */
.service-card .service-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 55px;
  padding: 12px;
  background: #103d32;
  color: #ffffff;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
  margin-top: auto;
}

/* TARJETAS PREMIUM - ALINEACION UNIFORME */

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  min-width: 0;
  transition: background .3s ease,
              transform .3s ease,
              box-shadow .3s ease;
}


/* Ocultar solamente los iconos y numeros antiguos */
.service-card > .line-icon,
.service-card > .num {
  display: none;
}

/* Mostrar los titulos de todos los servicios */
.service-card > h3 {
  display: block !important;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: #082e27;
  margin: 0 0 15px;
}


/* Ilustraciones alineadas */
.service-card .fha-visual,
.service-card .finance-visual,
.service-card .income-visual,
.service-card .wealth-visual {
  width: 100%;
  height: 238px;
  min-height: 238px;
  margin: 0 0 30px;
  flex-shrink: 0;
}

/* Separacion uniforme del contenido */
.service-card h3 {
  margin: 0 0 15px;
  line-height: 1.3;
}

.service-card > p {
  margin: 0 0 28px;
  line-height: 1.75;
}

/* Botones alineados en la parte inferior */
.service-card .service-link {
  margin-top: auto;
  width: 100%;
  min-height: 56px;
}

/* Interaccion elegante */
@media (hover: hover) {
  .service-card:hover {
    background: #eae9e0;
    transform: translateY(-5px);
    box-shadow: 0 18px 35px rgba(8, 46, 39, .08);
  }
}

/* TABLET */
@media (max-width: 980px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MOVILES */
@media (max-width: 600px) {
  .service-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card {
    padding: 24px;
  }

  .service-card .fha-visual,
  .service-card .finance-visual,
  .service-card .income-visual,
  .service-card .wealth-visual {
    height: 220px;
    min-height: 220px;
  }
}



/* FOURPLEX - MEJORA VISUAL PREMIUM */

.fourplex .model-scene {
  perspective: 1200px;
  min-height: 440px;
}

.fourplex .model {
  transform: rotateY(-12deg) rotateX(5deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.20));
  animation: float 6s ease-in-out infinite;
}

.fourplex .building {
  border-radius: 5px;
  box-shadow:
    12px 14px 0 rgba(0,0,0,.12),
    0 24px 35px rgba(0,0,0,.15);
}

.fourplex .apartment {
  border-radius: 3px;
  transition:
    background .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

.fourplex .apartment.selected {
  background: #b99245;
  box-shadow: 0 0 20px rgba(217,178,101,.45);
}

@media (hover: hover) {
  .fourplex .apartment:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.20);
  }
}

@media (max-width: 768px) {
  .fourplex .model-scene {
    min-height: 350px;
  }

  .fourplex .model {
    max-width: 90%;
  }
}

/* HOUSE HACKING - RESUMEN PREMIUM */

.fourplex .hacking-summary {
  width: 100%;
  max-width: 560px;
  margin: 30px auto 0;
  padding: 28px;
  background: rgba(5, 35, 28, 0.55);
  border: 1px solid rgba(217, 182, 111, 0.25);
  border-radius: 12px;
  text-align: left;
  box-sizing: border-box;
}

.fourplex .hacking-label {
  color: #d9b66f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.fourplex .hacking-summary h3 {
  color: #ffffff;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  margin: 0 0 22px;
}

.fourplex .hacking-units {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
}

.fourplex .hacking-unit {
  min-width: 0;
  min-height: 90px;
  padding: 12px 6px;
  background: #204b3d;
  border: 1px solid rgba(217, 182, 111, 0.22);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
}

.fourplex .hacking-unit.primary {
  background: #d9b66f;
  color: #092d25;
}

.fourplex .hacking-unit strong {
  font-size: 22px;
  line-height: 1;
}

.fourplex .hacking-unit span {
  font-size: 10px;
  line-height: 1.4;
}

.fourplex .hacking-description {
  color: #f5f1e8;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.fourplex .hacking-disclaimer {
  color: #c4cfc9;
  font-size: 11px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .fourplex .hacking-summary {
    padding: 20px 16px;
    margin-top: 24px;
  }

  .fourplex .hacking-units {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fourplex .hacking-unit {
    min-height: 80px;
  }
}

/* Transición suave de las unidades */
.hacking-unit {
  transition: background 0.3s ease,
              border-color 0.3s ease,
              transform 0.3s ease;
}

/* Unidad seleccionada */
.hacking-unit.selected {
  background: #d9b56f;
  border-color: #d9b56f;
  color: #08291f;
  transform: translateY(-4px);
}

/* Resaltar número y descripción */
.hacking-unit.selected strong,
.hacking-unit.selected span {
  color: #08291f;
}


/* FOURPLEX - OPTIMIZACIÓN PARA MÓVILES */
@media (max-width: 768px) {

  .fourplex {
    padding: 65px 0 55px !important;
  }

  .fourplex-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .fourplex-text {
    margin-bottom: 0 !important;
  }

  .unit-picker {
    margin-top: 24px !important;
    margin-bottom: 14px !important;
  }

  .model-scene {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .model {
    width: 310px !important;
    max-width: 85% !important;
    margin: 0 auto !important;
  }

  .model-caption {
    margin-top: 12px !important;
  }

  .hacking-summary {
    margin-top: 20px !important;
  }

}

/* AJUSTE FINAL FOURPLEX - MÓVIL */
@media (max-width: 768px) {

  .fourplex-grid {
    gap: 0 !important;
  }

  .model-scene {
    min-height: 0 !important;
    margin-top: -25px !important;
  }

  .model-caption {
    margin-top: 0 !important;
  }

  .hacking-summary {
    margin-top: 12px !important;
  }

  .hacking-label {
    padding-right: 45px;
    line-height: 1.6;
  }

}
/* AJUSTE WHATSAPP EN CELULARES */
@media (max-width: 767px) {

    .wa {
        width: 44px !important;
        height: 44px !important;
        right: 12px !important;
        bottom: 75px !important;
        z-index: 1000;
    }

    .wa svg,
    .wa img {
        width: 22px !important;
        height: 22px !important;
    }

}
/* WHATSAPP RESPONSIVE */
@media screen and (max-width: 767px) {

    .wa {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        font-size: 20px !important;
        right: 12px !important;
        bottom: 20px !important;
        box-sizing: border-box !important;
    }

    .wa svg,
    .wa img {
        width: 20px !important;
        height: 20px !important;
    }

}

/* CORRECCIÓN FOURPLEX EN MÓVILES */
@media screen and (max-width: 767px) {

    .fourplex-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 55px !important;
    }

    .model-scene {
        margin-top: 0 !important;
        transform: none !important;
        min-height: auto !important;
    }

    .model {
        transform: none !important;
        animation: none !important;
        margin: 0 auto !important;
    }

}

/* PROCESO PREMIUM - AMERICAN HOUSING */

#proceso {
    padding-top: 110px;
    padding-bottom: 110px;
}

#proceso .steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    position: relative;
}

#proceso .step {
    position: relative;
    background: #f7f5ee;
    border: 1px solid #dedbd0;
    border-radius: 12px;
    padding: 34px 26px;
    min-height: 310px;
    transition: transform .3s ease,
                box-shadow .3s ease,
                border-color .3s ease;
}

#proceso .step:hover {
    transform: translateY(-7px);
    border-color: #d9b66f;
    box-shadow: 0 18px 35px rgba(0, 45, 35, .10);
}

#proceso .step > span {
    display: block;
    font-family: Georgia, serif;
    font-size: 28px;
    color: #b38d48;
    margin-bottom: 24px;
}

#proceso .step-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: #103d32;
    color: #d9b66f;
    border-radius: 12px;
    font-size: 30px;
    margin-bottom: 24px;
}

#proceso .step h3 {
    color: #092e25;
    font-size: 21px;
    line-height: 1.3;
    margin-bottom: 14px;
}

#proceso .step p {
    color: #68766a;
    font-size: 15px;
    line-height: 1.75;
}

/* ADAPTACIÓN PARA TABLETS */

@media (max-width: 980px) {
    #proceso .steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ADAPTACIÓN PARA CELULARES */

@media (max-width: 600px) {
    #proceso {
        padding-top: 65px;
        padding-bottom: 65px;
    }

    #proceso .steps {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #proceso .step {
        min-height: auto;
        padding: 28px 24px;
    }
}

/* OPTIMIZACIÓN DE TARJETAS EN MÓVILES */
@media screen and (max-width: 650px) {

  .steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .step {
    padding: 24px !important;
    min-height: auto !important;
  }

  .step > span {
    font-size: 28px !important;
    margin-bottom: 14px !important;
  }

  .step-icon {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 16px !important;
  }

  .step h3 {
    font-size: 20px !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
  }

  .step p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }
}

.form-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #68766a;
  margin: 12px 0 26px;
}

@media (max-width: 650px) {
  .form-intro {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 22px;
  }
}

/* SEPARACIÓN DEL FORMULARIO Y FOOTER */
@media screen and (max-width: 650px) {
  .contact {
    padding-bottom: 80px !important;
  }

  .lead-form {
    margin-bottom: 0 !important;
    position: relative;
    z-index: 1;
  }

  .footer {
    position: relative;
    z-index: 0;
  }
}

/* CORRECCIÓN ESPACIO SUPERIOR DEL FORMULARIO */
@media screen and (max-width: 650px) {

  .contact {
    min-height: auto !important;
    height: auto !important;
    padding-top: 45px !important;
    padding-bottom: 65px !important;
  }

  .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    align-items: start !important;
  }

  .contact-grid > div {
    margin-bottom: 0 !important;
  }

  .lead-form {
    margin-top: 0 !important;
    align-self: start !important;
  }
}

/* FOOTER CORPORATIVO PREMIUM */

.footer-premium {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  padding: 65px 0 45px;
}

.footer-brand h3 {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.3;
  color: #ffffff;
}

.footer-brand h3 span {
  display: block;
  color: #d9b369;
}

.footer-slogan {
  color: #d9b369;
  margin: 15px 0;
}

.footer-brand > p:last-child {
  max-width: 480px;
  line-height: 1.8;
  color: #b8c6bb;
}

.footer-contact h4 {
  color: #d9b369;
  letter-spacing: 2px;
  margin-bottom: 22px;
}

.footer-contact a {
  display: block;
  color: #ffffff;
  margin-bottom: 17px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-contact a:hover {
  color: #d9b369;
}

.footer-bottom {
  border-top: 1px solid #ffffff25;
  padding: 25px 0 35px;
}

.footer-bottom p {
  font-size: 12px;
  line-height: 1.8;
  color: #b8c6bb;
}

.footer-disclaimer {
  margin-top: 15px;
}

/* ADAPTACIÓN MÓVIL */

@media screen and (max-width: 650px) {

  .footer-premium {
    grid-template-columns: 1fr;
    gap: 35px;
    padding: 45px 0 30px;
  }

  .footer-brand h3 {
    font-size: 23px;
  }

  .footer-contact a {
    font-size: 15px;
  }

  .footer-bottom {
    padding: 25px 0 35px;
  }
}