/* ---- RESET ---- */
*{box-sizing:border-box;margin:0;padding:0}
:root{--header-h:80px; 
  --bg:#0f2747;
  --primary:#338bef;
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --light:#e7effd;
}
html{scroll-behavior:smooth}
body{padding-top:var(--header-h); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',sans-serif;color:var(--text);background:#f7faff;line-height:1.6}

.container{width:min(1120px,92%);margin-inline:auto}
.site-header{background:var(--bg);color:#fff;position:fixed;top:0;left:0;right:0;z-index:60;box-shadow:0 2px 14px rgba(0,0,0,.2);transform:translateY(0);transition:transform .3s ease}
.nav{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem}
.logo{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.5px}
.nav-links{display:flex;gap:1rem;margin-left:auto;list-style:none}
.nav-links a{color:#fff;text-decoration:none;padding:.5rem .75rem;border-radius:999px}
.nav-links a:hover{background:rgba(255,255,255,.08)}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;margin-left:auto;cursor:pointer}

.hero{display:grid;place-items:center;min-height:78vh;background:linear-gradient(0deg, rgba(15,39,71,.70), rgba(15,39,71,.70)), url('img/housee.jpg') center/cover no-repeat; color:#fff;padding:4.5rem 0 5rem}
.hero-text{text-align:center;max-width:760px}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:.75rem}
.hero p{font-size:clamp(1rem,2.5vw,1.25rem);opacity:.9;margin-bottom:1.25rem}
.btn{display:inline-block;background:var(--primary);color:#fff;border:0;border-radius:14px;padding:.85rem 1.25rem;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 6px 18px rgba(51,139,239,.25)}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:#f7faff;color:var(--text);border:1px solid var(--light)}

.section{padding:4rem 0}
.section-title{text-align:center;font-size:clamp(1.6rem,3.5vw,2.2rem);margin-bottom:1rem}
.lead{font-size:1.1rem;text-align:center;margin-inline:auto;max-width:900px;color:#334155}
.center{text-align:center}
.muted{color:var(--muted)}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.card{background:var(--card);border:1px solid var(--light);padding:1.25rem;border-radius:16px;box-shadow:0 10px 30px rgba(2,6,23,.06)}
.card h3{color:var(--primary);margin-bottom:.35rem}

.grid{margin-top:2rem;display:grid;grid-template-columns:repeat(4, 1fr);gap:1.25rem}
.item{cursor:pointer;border-radius:18px;overflow:hidden;background:#f7faff;border:1px solid var(--light);box-shadow:0 10px 30px rgba(2,6,23,.06);transition:transform .2s ease, box-shadow .2s ease}
.item img{display:block;width:100%;height:220px;object-fit:cover}
.item:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(2,6,23,.12)}
.item figcaption{padding:.75rem 1rem;font-weight:600}

.contact-form{max-width:720px;margin-inline:auto}
.field{display:flex;flex-direction:column;margin-bottom:1rem}
.field input,.field textarea{padding:.9rem 1rem;border:1px solid var(--light);border-radius:12px}
.form-ok{margin-top:.75rem;color:var(--primary)}

.footer{background:#0b1220;color:#cbd5e1;padding:2rem 0;margin-top:3rem}
.footer p{text-align:center}

.modal{position:fixed;inset:0;display:none}
.modal.show{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.5);opacity:0;transition:opacity .25s}
.modal-card{position:relative;z-index:10;background:#f7faff;max-width:min(880px,92vw);margin:5dvh auto;padding:1.25rem;border-radius:16px;transform:translateY(20px);opacity:0;transition:transform .25s,opacity .25s}
.modal.show .modal-backdrop{opacity:1}
.modal.show .modal-card{transform:translateY(0);opacity:1}
.modal-card img{width:100%;height:420px;object-fit:cover;border-radius:12px;margin:.5rem 0 1rem}
.modal-close{position:absolute;right:.75rem;top:.5rem;font-size:1.75rem;background:transparent;border:0;cursor:pointer;color:#334155}
.modal-actions{display:flex;justify-content:flex-end;margin-top:.75rem}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.delay{transition-delay:.15s}
.delay2{transition-delay:.3s}

/* Responsive */
@media (max-width: 900px){
  .grid{margin-top:2rem;display:grid;grid-template-columns:repeat(2, 1fr);place-items:center;min-height:78vh;background:linear-gradient(0deg, rgba(15,39,71,.70), rgba(15,39,71,.70)), url('img/house_2.jpg') center/cover no-repeat; color:#fff;padding:4.5rem 0 5rem}
}
@media (max-width: 560px){
  .grid{margin-top:2rem;display:grid;grid-template-columns:repeat(1, 1fr);inset:64px 0 auto 0;background:var(--bg);flex-direction:column;gap:0;border-top:1px solid #1e293b;display:none}
  .nav-links.show{display:flex}
  .nav-links a{padding:1rem 1.25rem}
}

main section{scroll-margin-top: 84px;}

.site-header{background:var(--bg);color:#fff;position:fixed;top:0;left:0;right:0;z-index:60;box-shadow:0 2px 14px rgba(0,0,0,.2);transform:translateY(0);transition:transform .3s ease}
.site-header.hide{
  transform:translateY(-100%);
}
body{padding-top:84px;} /* offset for fixed header */

.modal-actions{display:none}

.nav-links a{padding:.7rem 1rem;border-radius:8px;transition:background-color .25s, color .25s}
.nav-links a:hover{background-color:rgba(51,139,239,.12);color:#dbe9ff}
.nav-links a.active{background-color:#338bef;color:#fff}

#about, #portfolio, #contact{scroll-margin-top: 110px;}

@media (max-width: 900px){
  .grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
}

/* Centrar sección de contacto */
#contact {
  text-align: center;            /* centra el h2 y el contenido */
}

/* Botones de redes sociales */
.contact-buttons {
  display: flex;
  justify-content: center;       /* centra los botones */
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;               /* permite pasar a dos líneas si hace falta */
}

.btn-redsocial {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  background-color: #338bef;     /* tu color principal */
  transition: transform .2s ease, box-shadow .2s ease, background-color .3s ease;
  box-shadow: 0 6px 18px rgba(51,139,239,.25);
}

.btn-redsocial:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(51,139,239,.35);
}

.btn-redsocial img.icono-red {
  width: 24px;
  height: 24px;
}

/* Si prefieres el mismo color para ambas, no necesitas clases separadas.
   Si más adelante quieres colores oficiales, puedes descomentar y ajustar:
   .btn-redsocial.instagram { background:#E4405F; }
   .btn-redsocial.whatsapp { background:#25D366; } */

/* Responsive: en móvil, uno debajo del otro */
@media (max-width: 560px){
  .contact-buttons {
    flex-direction: column;
  }
}