@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --ink:#07131f; --blue:#0e9edf; --blue-2:#42c7f3; --gold:#f6c94b; --paper:#f3f4f0; --white:#fff; --muted:#67727b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { height:82px; padding:0 clamp(20px,5vw,72px); display:flex; align-items:center; justify-content:space-between; position:absolute; top:0; width:100%; z-index:10; color:#fff; border-bottom:1px solid #ffffff28; }
.brand { display:flex; align-items:center; gap:10px; font:800 1.35rem 'Manrope',sans-serif; letter-spacing:.04em; text-transform:uppercase; }
.brand img { width:64px; height:64px; object-fit:contain; }
nav { display:flex; align-items:center; gap:30px; font-size:.94rem; }
nav a:not(.nav-call) { color:#dce7ee; }
.nav-call { padding:11px 18px; border:1px solid #ffffff70; border-radius:999px; }
.menu-button { display:none; background:none; border:1px solid #ffffff80; color:#fff; border-radius:999px; padding:8px 14px; }
.hero { min-height:800px; height:100vh; max-height:980px; position:relative; color:#fff; display:flex; align-items:center; overflow:hidden; }
.hero-photo,.hero-shade { position:absolute; inset:0; }
.hero-photo { background:url('public/images/trabajos/instalacion-obra-1.jpg') center 43%/cover no-repeat; transform:scale(1.02); }
.hero-shade { background:linear-gradient(90deg,rgba(4,14,24,.94) 0%,rgba(4,14,24,.78) 43%,rgba(4,14,24,.18) 80%),linear-gradient(0deg,rgba(4,14,24,.75),transparent 38%); }
.hero-content { position:relative; z-index:1; width:min(790px,88vw); margin-left:clamp(22px,8vw,130px); transform:translateY(-70px); }
.eyebrow { margin:0 0 20px; color:var(--gold); font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow.dark { color:#087fb4; }
h1,h2,h3 { font-family:'Manrope',sans-serif; margin-top:0; }
h1 { font-size:clamp(3.1rem,7.1vw,7.2rem); line-height:.94; letter-spacing:-.065em; margin-bottom:28px; }
h1 em { color:var(--blue-2); font-style:normal; }
.hero h1 { margin-bottom:46px; }
.hero-eyebrow { margin:0 0 54px; }
.hero-copy { font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.6; color:#dbe5ea; max-width:650px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-content .hero-actions { margin-top:52px; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:54px; padding:0 24px; border-radius:4px; font-weight:700; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--blue); color:#03111c; }
.button-primary:hover { background:var(--blue-2); }
.button-secondary { border:1px solid #ffffff70; color:#fff; }
.hero-proof { position:absolute; z-index:1; bottom:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); background:#07131ee8; border-top:1px solid #ffffff1f; }
.hero-proof span { min-width:180px; padding:23px 30px; color:#aebac2; font-size:.75rem; border-left:1px solid #ffffff1f; }
.hero-proof strong { display:block; color:#fff; font-size:1rem; margin-bottom:4px; }
.section { padding:120px clamp(22px,8vw,130px); }
.section-heading { max-width:720px; margin-bottom:60px; }
.section-heading h2,.area h2,.contact h2 { font-size:clamp(2.5rem,5vw,5rem); line-height:1.02; letter-spacing:-.055em; margin-bottom:22px; }
.section-heading > p:last-child,.area-copy { color:var(--muted); font-size:1.08rem; line-height:1.7; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cfd5d5; border:1px solid #cfd5d5; }
.service-grid article { background:var(--paper); padding:40px 34px 46px; min-height:260px; }
.service-grid h3 { font-size:1.35rem; margin:12px 0 14px; }
.service-grid p { margin:0; color:var(--muted); line-height:1.6; }
.work-section { background:var(--ink); color:#fff; padding:120px clamp(22px,5vw,72px); }
.section-heading.light > p:last-child { color:#a8b4bc; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:300px; gap:12px; }
.work-card { border:0; padding:0; position:relative; overflow:hidden; cursor:zoom-in; background:#142330; color:#fff; text-align:left; }
.work-card.tall { grid-row:span 2; }
.work-card.wide { grid-column:span 2; }
.work-card img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease,filter .3s ease; }
.work-card:hover img { transform:scale(1.035); filter:brightness(.78); }
.work-card span { position:absolute; left:22px; bottom:20px; background:#07131fd9; padding:8px 12px; font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.area { display:grid; grid-template-columns:1.1fr .9fr; gap:10vw; align-items:center; }
.area h2 { margin-bottom:0; }
.area-copy p { margin:0 0 18px; }
.text-link { display:inline-flex; gap:18px; color:#087fb4; font-weight:700; margin-top:14px; }
.contact { background:#0b2232; color:#fff; text-align:center; padding:100px 20px; }
.contact > img { width:130px; margin:0 auto 25px; }
.contact > img.contact-logo { width:min(270px,75vw); mix-blend-mode:screen; }
.contact h2 { font-size:clamp(3rem,7vw,6.5rem); margin-bottom:15px; }
.contact > p:not(.eyebrow) { color:#b7c4cb; font-size:1.1rem; }
.centered { justify-content:center; }
footer { background:#050c12; color:#9fabb2; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:25px; padding:40px clamp(22px,5vw,72px); font-size:.88rem; }
.footer-brand { color:#fff; }.footer-brand img { width:38px;height:38px; } footer p:last-child { text-align:right; }
.footer-contact { color:var(--blue-2); font-weight:700; }
.whatsapp-float { position:fixed; z-index:20; right:22px; bottom:22px; width:64px; height:64px; padding:5px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 10px 30px #0005; transition:transform .2s ease; }
.whatsapp-float:hover { transform:translateY(-3px) scale(1.03); }
.whatsapp-float img { width:100%; height:100%; object-fit:contain; }
.lightbox { padding:0; border:0; background:#07131f; color:#fff; width:min(940px,92vw); max-height:92vh; }
.lightbox::backdrop { background:#000c; backdrop-filter:blur(5px); }
.lightbox img { width:100%; max-height:78vh; object-fit:contain; }
.lightbox p { margin:0; padding:16px 22px; }
.lightbox-close { position:absolute; right:12px; top:12px; width:42px; height:42px; border:0; border-radius:50%; background:#07131fd9; color:#fff; font-size:1.8rem; cursor:pointer; }
@media (max-width:900px) {
  .menu-button { display:block; }
  nav { display:none; position:absolute; top:70px; left:18px; right:18px; padding:20px; background:#07131ff5; flex-direction:column; align-items:stretch; }
  nav.open { display:flex; }
  .hero-proof { left:0; }.hero-proof span { min-width:0; padding:18px; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .work-grid { grid-template-columns:repeat(2,1fr); }
  .work-card.wide { grid-column:span 1; }
  .area { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .site-header { height:78px; padding:0 18px; }
  .site-header .brand { gap:7px; font-size:1.05rem; }
  .site-header .brand img { width:44px; height:44px; }
  .menu-button { padding:7px 13px; font-size:.9rem; }
  .hero { height:auto; min-height:940px; max-height:none; align-items:flex-start; }
  .hero-content { width:auto; margin:0 20px; padding:142px 0 155px; transform:none; }
  .hero h1 { font-size:clamp(2.85rem,12.2vw,3.65rem); line-height:.98; letter-spacing:-.055em; margin-bottom:38px; }
  .hero-eyebrow { margin-bottom:38px; font-size:.7rem; line-height:1.6; }
  .hero-copy { font-size:1.03rem; line-height:1.58; }
  .hero-content .hero-actions { margin-top:42px; }
  .hero-actions { flex-direction:column; }.button { width:100%; }
  .hero-content .button { padding:0 16px; font-size:.96rem; }
  .hero-proof span:nth-child(3) { display:none; }.hero-proof { grid-template-columns:1fr 1fr; width:100%; }
  .section,.work-section { padding:82px 20px; }.section-heading { margin-bottom:40px; }
  .service-grid { grid-template-columns:1fr; }.service-grid article { min-height:0; }
  .work-grid { grid-template-columns:1fr; grid-auto-rows:330px; }.work-card.tall { grid-row:span 1; }
  footer { grid-template-columns:1fr; text-align:left; } footer p:last-child { text-align:left; }
  .whatsapp-float { width:54px; height:54px; padding:4px; right:14px; bottom:14px; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.button,.work-card img{transition:none} }