/* ═══════════════════════════════════════════
   CONSTRUCCIONES SARCIAT — v17
   Fuentes: Cormorant Garamond + Outfit
   ═══════════════════════════════════════════ */

:root {
  --cream:    #f5f0e8;
  --cream-2:  #ede7da;
  --white:    #fdfaf5;
  --ink:      #141210;
  --ink-2:    #2a2520;
  --muted:    rgba(20,18,16,.52);
  --gold:     #b8943a;
  --gold-lt:  rgba(184,148,58,.12);
  --gold-bd:  rgba(184,148,58,.30);
  --line:     rgba(20,18,16,.09);
  --line-dk:  rgba(255,255,255,.08);
  --shadow:   0 2px 20px rgba(20,18,16,.07);
  --shadow-lg:0 12px 48px rgba(20,18,16,.16);
  --r:        4px;
  --r-lg:     10px;
  --max:      1200px;
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Outfit', system-ui, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--sans); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden }
img  { max-width:100%; display:block }
a    { text-decoration:none; color:inherit }
button,input,textarea,select { font:inherit; outline:none }

.container { width:min(var(--max),calc(100% - 32px)); margin:0 auto }

/* ── HEADER ──────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:60;
  background:rgba(20,18,16,.85);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.nav {
  height:72px;
  display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}
.brand-logo { height:48px; width:auto; max-width:190px }
.nav-menu {
  display:flex; align-items:center;
  gap:28px; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.nav-menu a:hover { color:#fff }
.menu-toggle {
  display:none; width:44px; height:44px;
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r);
  background:transparent; cursor:pointer;
  flex-direction:column; justify-content:center;
  align-items:center; gap:6px;
}
.menu-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:2px }

/* ── BUTTONS ─────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:13px 26px;
  font-family:var(--sans); font-weight:600;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  border-radius:var(--r); border:1px solid transparent;
  cursor:pointer; transition:.2s ease; white-space:nowrap;
}
.btn:hover { transform:translateY(-1px) }
.btn-gold      { background:var(--gold); color:#fff; border-color:var(--gold) }
.btn-gold:hover{ background:#c9a548 }
.btn-outline   { background:transparent; color:var(--ink); border-color:var(--line) }
.btn-outline:hover { border-color:var(--ink) }
.btn-outline-dk{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.24) }
.btn-outline-dk:hover { background:rgba(255,255,255,.14); border-color:#fff }
.btn-ink       { background:var(--ink); color:#fff; border-color:var(--ink) }
.nav-cta       { background:var(--gold); color:#fff; border-color:var(--gold); font-size:11px; padding:10px 20px }

/* ── HERO (foto completa) ─────────────────── */
.hero {
  position:relative;
  min-height:92vh;
  display:flex; flex-direction:column;
  color:#fff; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-bg img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
  display:block;
}
.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to right,  rgba(6,5,3,.65) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(6,5,3,.45) 0%, rgba(6,5,3,.30) 35%, rgba(6,5,3,.82) 100%);
}
.hero-inner {
  position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column;
  justify-content:flex-end;
  padding-bottom:72px; padding-top:80px;
}
.hero-copy { max-width:640px; margin-bottom:40px }
.hero-kicker {
  display:inline-flex; align-items:center; gap:12px;
  font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
  margin-bottom:20px;
}
.hero-kicker::before {
  content:''; display:block;
  width:32px; height:1px; background:var(--gold);
}
.hero h1 {
  font-family:var(--serif);
  font-size:clamp(54px,8.5vw,108px);
  font-weight:300; line-height:.95;
  letter-spacing:-.03em; margin-bottom:20px;
}
.hero h1 em { font-style:italic; color:var(--gold) }
.hero-sub {
  font-size:17px; line-height:1.68;
  color:rgba(255,255,255,.72);
  max-width:520px; margin-bottom:28px;
}
.hero-btns {
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px;
}
.hero-line {
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:13px; color:rgba(255,255,255,.45);
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:16px;
}
.hero-line span { display:flex; align-items:center; gap:7px }
.hero-line span::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex-shrink:0;
}

/* Stats dentro del hero */
.hero-stats {
  position:relative; z-index:2;
  display:flex; align-items:center;
  background:rgba(184,148,58,.92);
  backdrop-filter:blur(10px);
  padding:0;
}
.hstat {
  flex:1; text-align:center;
  padding:18px 12px;
}
.hstat-n {
  display:block;
  font-family:var(--serif); font-size:32px;
  font-weight:300; color:#fff;
  line-height:1; margin-bottom:3px;
}
.hstat-l {
  display:block; font-size:9px;
  font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; color:rgba(255,255,255,.78);
}
.hstat-div { width:1px; background:rgba(255,255,255,.22); align-self:stretch }

/* ── SECTION BASE ────────────────────────── */
.section { padding:52px 0 }
.sec-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:10px;
}
.sec-tag::before { content:''; display:block; width:20px; height:1px; background:var(--gold) }
.sec-tag-dk { color:rgba(184,148,58,.9) }
.sec-tag-dk::before { background:rgba(184,148,58,.9) }
h2.sec-h {
  font-family:var(--serif);
  font-size:clamp(28px,5vw,52px);
  font-weight:300; line-height:1.02;
  letter-spacing:-.02em; margin-bottom:10px;
}
.sec-lead { font-size:16px; color:var(--muted); line-height:1.74; max-width:540px }

/* ── SERVICIOS ───────────────────────────── */
.services-section { background:var(--white) }
.srv-layout {
  display:grid; grid-template-columns:1fr;
  gap:1px; background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  margin-top:24px;
}
.srv-item {
  background:var(--white); padding:24px 22px;
  display:flex; gap:18px; align-items:flex-start;
  transition:background .2s;
}
.srv-item:hover { background:var(--cream) }
.srv-num {
  font-family:var(--serif); font-size:32px;
  font-weight:300; color:var(--gold); line-height:1;
  flex-shrink:0; width:46px; padding-top:2px;
}
.srv-content h3 {
  font-family:var(--serif); font-size:20px;
  font-weight:400; letter-spacing:-.01em; margin-bottom:4px;
}
.srv-content p { font-size:14px; color:var(--muted); line-height:1.68 }
.srv-feature { background:var(--ink) !important; color:#fff }
.srv-feature h3 { color:#fff }
.srv-feature p  { color:rgba(255,255,255,.52) }
.srv-feature .srv-num { color:var(--gold) }

/* ── CALCULADORA ─────────────────────────── */
.calc-section { background:var(--cream) }
.calc-head { margin-bottom:24px }
.wizard {
  background:var(--ink);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.wiz-bar-wrap { height:2px; background:rgba(255,255,255,.06) }
.wiz-bar { height:100%; background:var(--gold); transition:width .4s ease }
.wiz-body { padding:28px 26px 24px }
.wiz-q {
  font-family:var(--serif);
  font-size:clamp(22px,4vw,34px);
  font-weight:300; color:#fff;
  line-height:1.12; letter-spacing:-.02em; margin-bottom:22px;
}
.wiz-step { display:none }
.wiz-step.active { display:block; animation:fadeUp .25s ease }
@keyframes fadeUp {
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0) }
}
.wiz-cards {
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.wiz-card {
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:8px; padding:20px 12px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); cursor:pointer; transition:.18s ease;
}
.wiz-card:hover {
  background:var(--gold-lt);
  border-color:var(--gold-bd);
  transform:translateY(-2px);
}
.wiz-icon {
  font-size:32px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  background:rgba(255,255,255,.06);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
}
.wiz-card strong { color:#fff; font-size:14px; font-weight:600; display:block }
.wiz-card span   { color:rgba(255,255,255,.42); font-size:11px; line-height:1.4 }
.wiz-opts { display:flex; flex-direction:column; gap:7px }
.wiz-opt {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); cursor:pointer; transition:.18s ease; gap:12px;
}
.wiz-opt:hover {
  background:var(--gold-lt);
  border-color:var(--gold-bd);
  transform:translateX(3px);
}
.wiz-opt strong { color:#fff; font-size:15px; font-weight:500 }
.wiz-opt span   { color:rgba(255,255,255,.42); font-size:12px; margin-top:3px; display:block }
.wiz-opt-arr    { color:rgba(255,255,255,.28); font-size:20px; flex-shrink:0 }
.wiz-result { display:flex; flex-direction:column; gap:14px }
.wiz-res-kicker {
  font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:8px;
}
.wiz-res-kicker::before { content:''; width:18px; height:1px; background:var(--gold) }
.wiz-price-block {
  border:1px solid var(--gold-bd); background:var(--gold-lt);
  border-radius:var(--r); padding:18px 20px;
}
.wiz-price-lbl {
  font-size:10px; font-weight:700; letter-spacing:.10em;
  text-transform:uppercase; color:var(--gold); margin-bottom:8px;
}
.wiz-price {
  font-family:var(--serif);
  font-size:clamp(30px,7vw,48px);
  font-weight:300; color:#fff; letter-spacing:-.03em; line-height:1;
}
.wiz-price-note { font-size:12px; color:rgba(255,255,255,.36); margin-top:6px; line-height:1.55 }
.wiz-details { display:flex; flex-direction:column; gap:7px }
.wiz-detail {
  display:flex; align-items:flex-start; gap:9px;
  font-size:13px; color:rgba(255,255,255,.62); line-height:1.55;
}
.wiz-detail::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex-shrink:0; margin-top:6px;
}
.wiz-wa {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r); padding:16px 18px;
}
.wiz-wa-lbl {
  font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.30); margin-bottom:9px;
}
.wiz-wa-text {
  font-size:13px; color:rgba(255,255,255,.58);
  white-space:pre-wrap; line-height:1.68;
  background:rgba(0,0,0,.20); border-radius:var(--r);
  padding:11px 13px; margin-bottom:12px;
}
.wiz-wa-btns { display:flex; gap:10px; flex-wrap:wrap }
.wiz-back {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:16px; background:none; border:none;
  color:rgba(255,255,255,.24); font-size:11px;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:color .18s;
}
.wiz-back:hover { color:rgba(255,255,255,.55) }

/* ── COMUNIDADES ─────────────────────────── */
.com-section { background:var(--ink) }
.com-section .sec-tag { color:rgba(184,148,58,.9) }
.com-section .sec-tag::before { background:rgba(184,148,58,.9) }
.com-section .sec-h { color:#fff }
.com-layout { display:grid; grid-template-columns:1fr; gap:12px; margin-top:28px }
.com-feature {
  background:rgba(255,255,255,.04); color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:26px 24px;
}
.com-feature h3 {
  font-family:var(--serif); font-size:22px;
  font-weight:300; color:#fff; margin-bottom:10px; letter-spacing:-.01em;
}
.com-feature p { color:rgba(255,255,255,.52); line-height:1.70; margin-bottom:18px; font-size:15px }
.com-checks { display:flex; flex-direction:column; gap:9px }
.com-check {
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:rgba(255,255,255,.66);
}
.com-check::before {
  content:''; width:16px; height:16px; border-radius:50%; flex-shrink:0;
  background:var(--gold-lt); border:1px solid var(--gold-bd);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23b8943a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.com-cards {
  display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06); border-radius:var(--r-lg); overflow:hidden;
}
.com-card {
  background:rgba(255,255,255,.03); padding:20px 20px;
  transition:background .2s;
}
.com-card:hover { background:rgba(255,255,255,.07) }
.com-card-num {
  font-family:var(--serif); font-size:26px;
  font-weight:300; color:var(--gold); margin-bottom:6px;
}
.com-card h4 {
  font-family:var(--serif); font-size:17px;
  font-weight:400; margin-bottom:5px; color:#fff; letter-spacing:-.01em;
}
.com-card p  { font-size:13px; color:rgba(255,255,255,.46); line-height:1.60; margin-bottom:8px }
.com-price   { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold) }
.com-cta {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:14px;
  padding:20px 22px; margin-top:12px;
  background:rgba(184,148,58,.12);
  border:1px solid var(--gold-bd); border-radius:var(--r-lg);
}
.com-cta-copy strong { color:#fff; font-size:15px; display:block; margin-bottom:3px }
.com-cta-copy span   { color:rgba(255,255,255,.44); font-size:13px }
.com-cta-btns { display:flex; gap:10px; flex-wrap:wrap }

/* ── TEJADOS ─────────────────────────────── */
.roofs-section { background:var(--white) }
.roofs-grid { display:grid; grid-template-columns:1fr; gap:28px; align-items:center }
.roof-photo { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg) }
.roof-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 58% }
.roofs-copy .sec-h { margin-bottom:10px }
.roofs-copy > p { color:var(--muted); line-height:1.74; margin-bottom:20px; font-size:15px }
.roof-items { display:flex; flex-direction:column; gap:1px; margin-bottom:20px }
.roof-item { padding:12px 0; border-bottom:1px solid var(--line) }
.roof-item:last-child { border-bottom:none }
.roof-item strong { display:block; font-size:14px; font-weight:600; margin-bottom:3px }
.roof-item span   { font-size:13px; color:var(--muted); line-height:1.58 }

/* ── PROYECTOS ───────────────────────────── */
.proof-section { background:var(--cream) }
.proof-top {
  display:flex; align-items:flex-end;
  justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:18px;
}
.gallery {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.gallery-item {
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--white);
}
.gallery-item img {
  width:100%; aspect-ratio:4/3;
  object-fit:cover; display:block;
  transition:transform .4s ease;
}
.gallery-item:hover img { transform:scale(1.03) }
.gallery-tall img { aspect-ratio:3/4 }
.gallery-cap { padding:12px 14px 14px }
.gallery-cap strong { display:block; font-size:14px; font-weight:600; margin-bottom:3px }
.gallery-cap span   { font-size:12px; color:var(--muted); line-height:1.55 }

/* ── PROCESO ─────────────────────────────── */
.method-section { background:var(--ink); color:#fff; padding:52px 0 }
.steps {
  display:grid; grid-template-columns:1fr;
  gap:1px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-lg); overflow:hidden; margin-top:22px;
}
.step {
  background:rgba(255,255,255,.02); padding:22px 20px;
  display:flex; gap:16px; transition:background .2s;
}
.step:hover { background:rgba(255,255,255,.05) }
.step-n {
  font-family:var(--serif); font-size:36px;
  font-weight:300; color:var(--gold); line-height:1;
  flex-shrink:0; width:44px;
}
.step h3 { font-family:var(--serif); font-size:18px; font-weight:400; color:#fff; margin-bottom:4px; letter-spacing:-.01em }
.step p   { font-size:13px; color:rgba(255,255,255,.44); line-height:1.66 }

/* ── TRABAJADORES ────────────────────────── */
.jobs-section { background:var(--cream) }
.jobs-card {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:18px;
  padding:28px 26px;
  background:var(--ink); border-radius:var(--r-lg);
}
.jobs-copy .sec-h { color:#fff }
.jobs-copy p { color:rgba(255,255,255,.46); font-size:14px; line-height:1.70; margin-top:8px }
.jobs-btns { display:flex; gap:10px; flex-wrap:wrap }

/* ── CONTACTO ────────────────────────────── */
.contact-section { background:var(--white) }
.contact-grid { display:grid; grid-template-columns:1fr; gap:16px }
.contact-form-card {
  background:var(--cream); border-radius:var(--r-lg);
  padding:26px 24px; border:1px solid var(--line);
}
.contact-form-card .sec-h { margin-bottom:18px }
.form-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:10px }
label.field {
  display:flex; flex-direction:column; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
input.inp,textarea.inp {
  padding:12px 13px;
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  font-size:14px; transition:border-color .18s;
}
input.inp:focus,textarea.inp:focus { border-color:var(--gold) }
textarea.inp { min-height:88px; resize:vertical }
.privacy-row {
  display:flex; align-items:flex-start; gap:9px;
  margin:12px 0; font-size:12px; color:var(--muted);
}
.privacy-row input { width:auto; margin-top:2px; flex-shrink:0; accent-color:var(--gold) }
.privacy-row label { font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--muted) }
.privacy-row a { color:var(--gold); text-decoration:underline }
.form-hint { font-size:11px; color:var(--muted); margin:0 0 12px; line-height:1.55 }
.form-btns { display:flex; gap:10px; flex-wrap:wrap }
.contact-info-card {
  background:var(--ink); color:#fff;
  border-radius:var(--r-lg); padding:26px 24px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.contact-logo { width:min(100%,220px); height:auto; margin-bottom:20px }
.info-items { display:flex; flex-direction:column; gap:1px; margin-bottom:18px }
.info-item { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06) }
.info-item:last-child { border-bottom:none }
.info-item dt { font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.30); margin-bottom:3px }
.info-item dd { font-size:15px; font-weight:500; color:#fff }
.contact-note { font-size:12px; color:rgba(255,255,255,.32); line-height:1.68; font-style:italic }

/* ── FLOTANTE MÓVIL ──────────────────────── */
.float-bar {
  position:fixed; left:10px; right:10px; bottom:10px; z-index:70;
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:8px; background:rgba(253,250,245,.94);
  backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 8px 32px rgba(20,18,16,.18);
}
.float-bar a {
  display:flex; align-items:center; justify-content:center;
  min-height:46px; border-radius:var(--r);
  font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
}
.float-calc { background:var(--ink); color:#fff }
.float-wa   { background:var(--gold); color:#fff }

/* ── FOOTER ──────────────────────────────── */
.site-footer {
  background:var(--ink); color:rgba(255,255,255,.36);
  padding:24px 0 28px; border-top:1px solid rgba(255,255,255,.06);
}
.footer-inner {
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:12px;
}
.footer-logo { width:150px; height:auto; opacity:.84 }
.footer-copy { font-size:12px }
.footer-copy span { display:block; color:rgba(255,255,255,.48) }
.footer-legal { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11px }
.footer-legal a { color:rgba(255,255,255,.30) }
.footer-legal a:hover { color:rgba(255,255,255,.62) }

/* ── COOKIES ─────────────────────────────── */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--ink-2); border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px); padding:13px 16px 16px;
  transform:translateY(0); transition:transform .35s ease;
}
.cookie-banner.hidden { transform:translateY(110%); pointer-events:none }
.cookie-inner {
  max-width:var(--max); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px;
}
.cookie-inner p { flex:1; min-width:160px; margin:0; font-size:13px; color:rgba(255,255,255,.58); line-height:1.55 }
.cookie-inner a { color:var(--gold) }
.cookie-btns { display:flex; gap:8px }

/* ── REVEAL ──────────────────────────────── */
.reveal { opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease }
.reveal.visible { opacity:1; transform:translateY(0) }

/* ── LEGAL ───────────────────────────────── */
.legal-page { max-width:820px; margin:0 auto; padding:64px 24px 88px }
.legal-page h1 { font-family:var(--serif); font-size:clamp(28px,5vw,46px); font-weight:300; margin-bottom:8px }
.legal-page .legal-meta { color:var(--muted); font-size:14px; margin-bottom:40px }
.legal-page h2 { font-family:var(--serif); font-size:22px; margin:40px 0 10px; padding-top:8px; border-top:1px solid var(--line) }
.legal-page h3 { font-size:16px; margin:22px 0 7px }
.legal-page p,.legal-page li { color:var(--muted); line-height:1.78; margin-bottom:11px }
.legal-page ul { padding-left:18px }
.legal-page a { color:var(--gold) }
.legal-page .info-box { background:var(--cream); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; margin:14px 0 }
.legal-page .info-box p { margin:0 }

/* ── TABLET ──────────────────────────────── */
@media(min-width:760px) {
  .brand-logo { height:54px; max-width:210px }
  .hero { min-height:94vh }
  .hero h1 { font-size:clamp(62px,9vw,108px) }
  .hero-copy { margin-bottom:48px }
  .hero-stats { gap:0 }
  .hstat-n { font-size:38px }
  .srv-layout { grid-template-columns:repeat(2,1fr) }
  .srv-feature { grid-column:span 2 }
  .com-layout { grid-template-columns:1fr 1fr }
  .com-feature { grid-column:span 2 }
  .com-cards { grid-template-columns:repeat(2,1fr) }
  .roofs-grid { grid-template-columns:1fr 1fr; margin-top:0 }
  .gallery { grid-template-columns:repeat(3,1fr) }
  .gallery-tall { grid-row:span 2 }
  .gallery-tall img { aspect-ratio:auto; height:100%; object-fit:cover }
  .steps { grid-template-columns:repeat(2,1fr) }
  .contact-grid { grid-template-columns:1.15fr .85fr }
  .form-grid { grid-template-columns:1fr 1fr }
  .float-bar { display:none }
  .wiz-cards { grid-template-columns:repeat(4,1fr) }
  .wiz-card { padding:22px 14px 20px }
}
@media(min-width:1000px) {
  .srv-layout { grid-template-columns:1fr 1fr 1fr }
  .srv-feature { grid-column:span 3 }
  .com-cards { grid-template-columns:repeat(4,1fr) }
  .steps { grid-template-columns:repeat(4,1fr) }
}

/* ── MOBILE ──────────────────────────────── */
@media(max-width:900px) {
  .menu-toggle { display:flex }
  .nav-menu {
    position:absolute; top:72px; left:10px; right:10px;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(20,18,16,.96); border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r-lg); padding:8px; display:none;
    box-shadow:0 12px 32px rgba(0,0,0,.4); z-index:100;
  }
  .nav-menu.open { display:flex }
  .nav-menu a { width:100%; padding:12px 10px; border-radius:var(--r); font-size:13px; color:rgba(255,255,255,.70) }
  .nav-menu a:hover { background:rgba(255,255,255,.06); color:#fff }
  .nav-cta { display:none }

  .hero { min-height:85vh }
  .hero h1 { font-size:clamp(40px,12vw,62px) }
  .hero-sub { font-size:15px }
  .hero-copy { margin-bottom:28px }
  .hero-btns { flex-direction:column; gap:8px }
  .hero-btns .btn { width:100%; min-height:50px; justify-content:center }
  .hero-line { font-size:12px; gap:12px }
  .hstat-n { font-size:26px }
  .hstat-l { font-size:8px }
  .hstat { padding:14px 8px }

  .section { padding:40px 0 }
  .method-section { padding:40px 0 }
  .sec-h { font-size:clamp(24px,7vw,36px) }
  .calc-head { margin-bottom:16px }

  .srv-layout { margin-top:18px }
  .srv-item { padding:18px 16px }
  .srv-num { font-size:26px; width:38px }

  .com-layout { margin-top:18px; gap:8px }
  .com-feature { padding:20px 18px }
  .com-card { padding:16px 16px }
  .com-cta { padding:18px 16px }

  .roofs-grid { gap:20px }

  .gallery { grid-template-columns:1fr; gap:8px }
  .gallery-item img,.gallery-tall img { aspect-ratio:4/3 }
  .gallery-tall { grid-row:auto }

  .steps { margin-top:18px }
  .step { padding:18px 16px; gap:12px }
  .step-n { font-size:28px; width:36px }

  .jobs-card { padding:22px 18px; gap:16px }
  .contact-grid { gap:10px }
  .contact-form-card { padding:20px 16px }
  .contact-info-card { padding:20px 16px }
  .contact-logo { width:min(100%,180px); margin-bottom:16px }

  .wiz-body { padding:18px 16px 14px }
  .wiz-q { font-size:clamp(16px,5vw,22px); margin-bottom:14px }
  .wiz-cards { grid-template-columns:repeat(2,1fr); gap:8px }
  .wiz-card { padding:16px 10px 14px; gap:6px }
  .wiz-icon { font-size:26px; width:44px; height:44px }
  .wiz-card strong { font-size:13px }
  .wiz-card span { font-size:10px }
  .wiz-opts { gap:6px }
  .wiz-opt { padding:12px 13px }
  .wiz-price { font-size:clamp(26px,8vw,38px) }
  .wiz-back { margin-top:12px }
}

/* ── VÍDEO ───────────────────────────────── */
.video-section { background: var(--ink) }
.video-section .sec-tag { color: rgba(184,148,58,.9) }
.video-section .sec-tag::before { background: rgba(184,148,58,.9) }
.video-section .sec-h { color: #fff }
.video-head { margin-bottom: 20px }

.video-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: #000;
  cursor: pointer;
}
.video-wrap video {
  width: 100%; display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.video-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,8,6,.32);
  transition: opacity .3s ease;
}
.video-overlay.hidden { opacity: 0; pointer-events: none }
.video-play-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(184,148,58,.92);
  border: 2px solid rgba(255,255,255,.28);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease, background .2s ease;
  backdrop-filter: blur(6px);
}
.video-play-btn:hover {
  transform: scale(1.08);
  background: var(--gold);
}
.video-play-btn svg { margin-left: 3px }

@media(max-width:900px) {
  .video-play-btn { width: 58px; height: 58px }
  .video-play-btn svg { width: 18px; height: 18px }
}

/* ── CALC BADGES ─────────────────────────── */
.calc-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.calc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
@media(max-width:900px) {
  .calc-badge { font-size: 11px; padding: 6px 11px }
}