/* ═══════════════════════════════════════════════════════════════
   PROYECCIÓN URBANA — Estilos
   Colores de marca: gris protagonista, rojo como acento (no dominante).
   ═══════════════════════════════════════════════════════════════ */
:root{
  --rojo:#E30613;         /* rojo de marca — solo acentos */
  --rojo-dark:#B90510;
  --rojo-sutil:#f53844;   /* rojo más suave (barra y botón contacto) */
  --rojo-sutil-dark:#AB352F;
  --gris:#8A9199;         /* gris de marca */
  --gris-claro:#B9BEC3;
  --tinta:#33383D;        /* texto oscuro */
  --oscuro:#263745;       /* fondos oscuros: barra superior y footer */
  --linea:#E6E8EB;
  --fondo:#FFFFFF;
  --wsp:#25D366;          /* verde WhatsApp */
  --wsp-dark:#1EBE5A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px}
body{
  font-family:'Roboto',system-ui,sans-serif;
  color:var(--tinta);background:var(--fondo);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ─── Barra de contacto (arriba de todo) ─────────────────────── */
.barra-contacto{
  background:var(--rojo-sutil);color:#fff;
  font-size:.92rem;
  font-weight: 500;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:.5rem clamp(1rem,4vw,2.5rem);
}
.barra-contacto a{display:inline-flex;align-items:center;gap:.4rem;color:#fff}
.barra-contacto a:hover{opacity:.82}
.barra-contacto svg{width:15px;height:15px;flex-shrink:0}

/* ─── Header ─────────────────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:30;background:var(--fondo);
  border-bottom:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(1rem,4vw,2.5rem);
}
.marca{display:flex;align-items:center}
.logo-h{height:66px;width:auto}
.menu{display:flex;gap:clamp(.9rem,2.5vw,2rem);align-items:center}
.menu a{font-weight:500;font-size:.92rem;padding-bottom:2px;border-bottom:2px solid transparent;transition:.15s}
.menu a:hover{color:var(--rojo);border-bottom-color:var(--rojo)}
.menu a.btn-contacto{background:var(--rojo-sutil);color:#fff;padding:.5rem 1.1rem;border-radius:7px;border-bottom:none}
.menu a.btn-contacto:hover{background:var(--rojo-sutil-dark);color:#fff;border-bottom-color:transparent}
.hamburguesa{display:none;background:none;border:none;cursor:pointer;padding:.3rem;color:var(--tinta)}

/* ─── Banner (solo la imagen; el texto va dentro de la foto) ──── */
.banner{background:#eef0f2}
.banner img{width:100%;height:auto;display:block}

/* ─── Sección de propiedades ─────────────────────────────────── */
main{max-width:1120px;width:100%;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem);flex:1}
.titulo-seccion{font-size:1.7rem;font-weight:700;margin-bottom:.3rem}
.subtitulo{color:var(--gris);font-size:.95rem;margin-bottom:2rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.6rem}
.card{
  border:1px solid var(--linea);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .15s;
}
.card:hover{box-shadow:0 8px 28px rgba(16,24,40,.09)}
.card-galeria{position:relative;aspect-ratio:3/2;background:#eef0f2;overflow:hidden}
.card-galeria img{width:100%;height:100%;object-fit:cover}
.card-galeria .nav{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;border-radius:50%;background:rgba(255,255,255,.92);color:var(--tinta);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 1px 5px rgba(0,0,0,.18)}
.card-galeria .prev{left:8px}
.card-galeria .next{right:8px}
.card-galeria .dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:5px;justify-content:center}
.card-galeria .dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55)}
.card-galeria .dots span.on{background:#fff}
.card-body{padding:1.15rem;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:1.1rem;font-weight:700;margin-bottom:.7rem}
.card-body ul{list-style:none;margin-bottom:1.1rem}
.card-body li{font-size:.9rem;font-weight:500;padding-left:1rem;position:relative;margin-bottom:.25rem}
.card-body li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--gris);border-radius:1px}
.btn-ver{
  margin-top:auto;display:block;text-align:center;
  border:1.5px solid var(--rojo);color:var(--rojo);background:#fff;
  font-family:inherit;font-weight:500;font-size:.92rem;
  padding:.62rem;border-radius:7px;cursor:pointer;transition:.15s;
}
.btn-ver:hover{background:var(--rojo);color:#fff}
.aviso{color:var(--gris);font-size:.95rem;padding:2rem 0;text-align:center;grid-column:1/-1}

/* ─── Footer (oscuro) ────────────────────────────────────────── */
.pie{background:var(--oscuro);color:#cfd3d7}
.pie-cont{
  max-width:1120px;margin:0 auto;
  padding:2.8rem clamp(1rem,4vw,2.5rem) 2rem;
  display:flex;gap:clamp(2rem,6vw,4rem);flex-wrap:wrap;
}
.pie-col:first-of-type{margin-left:auto}
.logo-v{width:96px;height:auto}
.pie-col{display:flex;flex-direction:column;gap:.6rem}
.pie-col strong{color:#fff;font-size:.82rem;letter-spacing:.1em;margin-bottom:.35rem;font-weight:700}
.pie-col a{color:#cfd3d7;font-size:.9rem;display:inline-flex;align-items:center;gap:.5rem}
.pie-col a:hover{color:var(--rojo)}
.pie-col svg{width:15px;height:15px;flex-shrink:0;color:var(--gris)}
.pie-copy{
  border-top:1px solid rgba(255,255,255,.1);
  max-width:1120px;margin:0 auto;
  padding:1.1rem clamp(1rem,4vw,2.5rem);
  font-size:.8rem;color:var(--gris-claro);
}

/* ─── WhatsApp flotante ──────────────────────────────────────── */
.wsp-flotante{
  position:fixed;bottom:20px;right:20px;z-index:40;
  width:56px;height:56px;border-radius:50%;
  background:var(--wsp);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);transition:.15s;
}
.wsp-flotante:hover{background:var(--wsp-dark);transform:scale(1.05)}
.wsp-flotante svg{width:30px;height:30px}

/* ─── Página "en construcción" (Servicios) ───────────────────── */
.construccion{max-width:600px;margin:0 auto;text-align:center;padding:clamp(3rem,10vw,6rem) 1rem}
.construccion .ico{color:var(--gris);margin-bottom:1.2rem}
.construccion h1{font-size:1.8rem;font-weight:700;margin-bottom:.6rem}
.construccion p{color:var(--gris);font-size:1rem;margin-bottom:1.8rem}
.construccion a{color:var(--rojo);font-weight:500}

/* ─── Página Contacto ────────────────────────────────────────── */
.contacto-wrap{max-width:620px;width:100%;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1rem,4vw,1.5rem);flex:1}
.mapa{width:100%;height:280px;border:0;border-radius:10px;margin-top:1.5rem;display:block}
.contacto-wrap h1{font-size:1.7rem;font-weight:700;margin-bottom:.3rem}
.contacto-wrap .sub{color:var(--gris);font-size:.95rem;margin-bottom:2rem}
.contacto-item{
  display:flex;align-items:center;gap:.9rem;
  border:1px solid var(--linea);border-radius:9px;padding:1rem 1.1rem;margin-bottom:.9rem;
}
.contacto-item .ico{width:40px;height:40px;border-radius:50%;background:#f4f5f6;color:var(--gris);display:grid;place-items:center;flex-shrink:0}
.contacto-item .et{font-size:.78rem;color:var(--gris)}
.contacto-item .val{font-weight:500}
.contacto-wsp{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--wsp);color:#fff;font-weight:500;
  padding:.8rem 1.4rem;border-radius:9px;margin-top:.5rem;transition:.15s;
}
.contacto-wsp:hover{background:var(--wsp-dark)}
.contacto-wsp svg{width:22px;height:22px}

/* ─── Responsive / hamburguesa ───────────────────────────────── */
@media(max-width:760px){
  .top{justify-content:center;position:sticky}
  .logo-h{height:66px}
  .hamburguesa{display:grid;position:absolute;right:clamp(1rem,4vw,2.5rem);top:50%;transform:translateY(-50%)}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--linea);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
  }
  .menu.abierto{display:flex}
  .menu a{padding:.9rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--linea)}
  .menu a:hover{border-bottom-color:var(--linea);background:#fafafa}
  .menu a.btn-contacto{background:none;color:var(--tinta);border-radius:0;padding:.9rem clamp(1rem,4vw,2.5rem)}
}

@media(max-width:760px){
  /* Footer: logo centrado arriba, menús apilados y centrados debajo */
  .pie-cont{flex-direction:column;align-items:center;text-align:center;gap:1.8rem}
  .pie-col{align-items:center}
  .pie-col:first-of-type{margin-left:0}
}