/* ============================================
   Linestone — Granito y Mármol, Guadalajara Jal.
   ============================================ */

:root{
  --charcoal:#211f1e;
  --charcoal-2:#171514;
  --ink:#3a3532;
  --stone-gray:#6f6a64;
  --stone-gray-light:#cfc9c2;
  --accent:#cf3626;
  --accent-dark:#a82a1d;
  --bg-cream:#faf7f3;
  --bg-white:#ffffff;
  --border:#e7e2da;
  --shadow: 0 10px 40px rgba(33,31,30,.10);
  --radius: 2px;
  --maxw: 1180px;
  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg-white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ position:relative; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--charcoal);
  margin:0 0 .5em;
}
h2{ font-size:clamp(2rem, 4vw, 2.8rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 1em; color:var(--ink); }

.eyebrow{
  display:inline-block;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
  margin-bottom:.9em;
}

.section-head{
  max-width:640px;
  margin:0 auto 3.2rem;
  text-align:center;
}
.section-head p{ color:var(--stone-gray); font-size:1.05rem; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.95em 1.9em;
  font-size:.92rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:var(--radius);
  transition:all .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent);
  color:#fff;
}
.btn-primary:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.btn-outline{
  background:transparent;
  border-color:currentColor;
  color:var(--charcoal);
}
.btn-outline:hover{ background:var(--charcoal); color:#fff; border-color:var(--charcoal); }
.btn-outline.light{ color:#fff; }
.btn-outline.light:hover{ background:#fff; color:var(--charcoal); }
.btn svg{ width:1.1em; height:1.1em; flex-shrink:0; }

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  padding:16px 0;
  background:rgba(250,247,243,.97);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 18px rgba(33,31,30,.07);
  transition:padding .3s ease, box-shadow .3s ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-header.is-scrolled{
  padding:10px 0;
  box-shadow:0 2px 18px rgba(33,31,30,.12);
}
.brand img{ height:61px; width:auto; }
.site-header.is-scrolled .brand img{ height:51px; }

.nav-links{
  display:flex;
  align-items:center;
  gap:2.2rem;
}
.nav-links a{
  font-size:.86rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--charcoal);
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:currentColor;
  transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:1rem; }
.header-actions .phone-link{
  display:flex; align-items:center; gap:.5em;
  font-size:.86rem; color:var(--charcoal); letter-spacing:.03em;
}
.header-actions svg{ width:1.05em; height:1.05em; }
.header-actions .btn-outline{ color:var(--charcoal); }
.header-actions .btn-outline:hover{ background:var(--charcoal); color:#fff; }

.nav-toggle{
  display:none;
  background:none; border:0; padding:6px;
  color:var(--charcoal);
}
.nav-toggle svg{ width:26px; height:26px; }

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  color:#fff;
  background:linear-gradient(180deg, rgba(23,21,20,.55) 0%, rgba(23,21,20,.62) 45%, rgba(23,21,20,.86) 100%), url("../img/hero.jpg") center 42% / cover no-repeat;
}
.hero-content{ max-width:680px; padding-top:115px; }
.hero .eyebrow{ color:#e8b3ab; }
.hero h1{
  color:#fff;
  font-size:clamp(2.6rem, 6vw, 4.2rem);
  line-height:1.08;
  margin-bottom:.4em;
}
.hero p.lead{
  font-size:1.15rem;
  color:#f1ede8;
  max-width:520px;
  margin-bottom:2em;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; }
.hero-scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  color:#fff; opacity:.75; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll .line{ width:1px; height:36px; background:rgba(255,255,255,.6); animation:scrolldown 2s ease-in-out infinite; }
@keyframes scrolldown{ 0%{opacity:.2; transform:scaleY(.4); transform-origin:top;} 50%{opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:.2; transform:scaleY(.4); transform-origin:bottom;} }

/* ---------- Nosotros ---------- */
.nosotros{ padding:7rem 0; background:var(--bg-white); }
.nosotros .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:center;
}
.nosotros-img{ position:relative; }
.nosotros-img img{ width:100%; height:520px; object-fit:cover; border-radius:var(--radius); }
.nosotros-img::before{
  content:"";
  position:absolute; top:-18px; left:-18px;
  width:120px; height:120px;
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
  z-index:-1;
}
.nosotros-text .eyebrow{ }
.nosotros-text p{ color:var(--ink); font-size:1.04rem; }

.stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  margin-top:2.2rem;
}
.stat{
  border-top:1px solid var(--border);
  padding-top:1rem;
}
.stat .num{
  font-family:var(--font-head);
  font-size:2.1rem;
  color:var(--accent);
  display:block;
  font-weight:600;
}
.stat .label{ font-size:.85rem; color:var(--stone-gray); letter-spacing:.03em; }

/* ---------- Servicios ---------- */
.servicios{ padding:7rem 0; background:var(--bg-cream); }
.servicios-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.8rem;
}
.servicio-card{
  background:var(--bg-white);
  padding:2.4rem 1.8rem;
  border:1px solid var(--border);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.servicio-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:transparent;
}
.servicio-icon{
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--accent);
  border-radius:50%;
  margin-bottom:1.4rem;
  color:var(--accent);
}
.servicio-icon svg{ width:26px; height:26px; }
.servicio-card h3{ margin-bottom:.5rem; }
.servicio-card p{ font-size:.94rem; color:var(--stone-gray); margin-bottom:0; }

/* ---------- Galeria ---------- */
.galeria{ padding:7rem 0; background:var(--bg-white); }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:220px;
  grid-auto-flow:dense;
  gap:12px;
}
.gallery-grid .g-item{
  position:relative;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--bg-cream);
}
.gallery-grid .g-item.tall{ grid-row:span 2; }
.gallery-grid .g-item.wide{ grid-column:span 2; }
.gallery-grid img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.gallery-grid .g-item:hover img{ transform:scale(1.08); }
.gallery-grid .g-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,21,20,0) 55%, rgba(23,21,20,.55) 100%);
  opacity:0;
  transition:opacity .3s ease;
}
.gallery-grid .g-item:hover::after{ opacity:1; }
.gallery-cta{ text-align:center; margin-top:3rem; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  background:rgba(15,14,13,.94);
  display:none;
  align-items:center; justify-content:center;
  padding:5vh 5vw;
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width:100%; max-height:88vh;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  background:transparent; border:0;
  color:#fff; opacity:.8;
}
.lightbox-close{ top:24px; right:28px; }
.lightbox-close svg{ width:30px; height:30px; }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ opacity:1; }
.lightbox-prev, .lightbox-next{ top:50%; transform:translateY(-50%); padding:12px; }
.lightbox-prev{ left:10px; }
.lightbox-next{ right:10px; }
.lightbox-prev svg, .lightbox-next svg{ width:34px; height:34px; }

/* ---------- Contacto ---------- */
.contacto{ padding:7rem 0; background:var(--charcoal); color:#efece8; }
.contacto h2{ color:#fff; }
.contacto .section-head p{ color:var(--stone-gray-light); }
.contacto-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:4rem;
}
.contact-info-list{ margin-top:2rem; display:flex; flex-direction:column; gap:1.6rem; }
.contact-info-item{ display:flex; gap:1rem; align-items:flex-start; }
.contact-info-item .icon{
  width:42px; height:42px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
}
.contact-info-item .icon svg{ width:20px; height:20px; }
.contact-info-item h4{ color:#fff; font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.3em; color:var(--stone-gray-light); }
.contact-info-item a, .contact-info-item span.value{ color:#fff; font-size:1.05rem; }
.contact-info-item a:hover{ color:var(--accent); }

.contact-social{ display:flex; gap:.8rem; margin-top:2.2rem; }
.contact-social a{
  width:40px; height:40px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.contact-social a svg{ width:18px; height:18px; }
.contact-social a:hover{ background:var(--accent); border-color:var(--accent); }

.contact-form{
  background:var(--bg-white);
  padding:2.6rem;
  border-radius:var(--radius);
  color:var(--ink);
}
.form-row{ margin-bottom:1.3rem; }
.form-row label{
  display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--stone-gray); margin-bottom:.5em;
}
.form-row input, .form-row textarea{
  width:100%;
  border:1px solid var(--border);
  background:var(--bg-cream);
  padding:.85em 1em;
  font-family:inherit; font-size:1rem; color:var(--ink);
  border-radius:var(--radius);
}
.form-row input:focus, .form-row textarea:focus{
  outline:none; border-color:var(--accent);
}
.form-row textarea{ resize:vertical; min-height:110px; }
.contact-form .btn-primary{ width:100%; justify-content:center; border:0; }
.form-note{ font-size:.82rem; color:var(--stone-gray); margin-top:1em; text-align:center; }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--charcoal-2);
  color:var(--stone-gray-light);
  padding:3rem 0 1.6rem;
  font-size:.9rem;
}
.footer-top{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-top .brand img{ height:30px; filter:grayscale(1) brightness(2); opacity:.9; }
.footer-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-nav a:hover{ color:#fff; }
.footer-bottom{
  padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.82rem; color:var(--stone-gray);
}
.footer-bottom a{ color:var(--stone-gray-light); }
.footer-bottom a:hover{ color:var(--accent); }

/* Floating WhatsApp button */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:#25d366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; fill:#fff; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ============ Responsive ============ */
@media (max-width: 1024px){
  .servicios-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:180px; }
  .nosotros .grid{ gap:2.5rem; }
  .contacto-grid{ grid-template-columns:1fr; gap:3rem; }
}

@media (max-width: 920px){
  .nav-links, .header-actions .phone-link{ display:none; }
  .header-actions .btn-outline{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nosotros .grid{ grid-template-columns:1fr; }
  .nosotros-img img{ height:340px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px){
  .servicios-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gallery-grid .g-item.wide{ grid-column:span 2; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn{ justify-content:center; }
  .contact-form{ padding:1.8rem; }
  section, .nosotros, .servicios, .galeria, .contacto{ padding-top:4.5rem; padding-bottom:4.5rem; }
}

/* Mobile nav drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:1500;
  background:var(--charcoal);
  color:#fff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2rem;
  transform:translateY(-100%);
  transition:transform .35s ease;
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--font-head); font-size:1.8rem; }
.mobile-nav-close{ position:absolute; top:24px; right:24px; background:none; border:0; color:#fff; }
.mobile-nav-close svg{ width:28px; height:28px; }