/* ======================================================
   VARIABLES Y BASE
====================================================== */
:root{
  /* Marca FPS */
  --red:#E53935;
  --black:#111111;
  --gray:#F5F5F7;
  --text:#1b1b1f;
  --white:#fff;

  /* Paleta */
  --brand-50:#fff1f0;
  --brand-100:#ffe2df;
  --brand-200:#ffc9c5;
  --brand-300:#ff9a97;
  --brand-400:#ff6b67;
  --brand-500:#f0524d;
  --brand-600:#E53935;
  --brand-700:#c62828;
  --brand-800:#991b1b;
  --brand-900:#7f1d1d;

  /* CTA azules */
  --call:#2563eb;
  --call-hover:#1d4ed8;

  --max:1280px;
  --header-h:96px;
}

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#5f5f5f 0%,#ffffff 100%);
}
html{ scroll-behavior:smooth }
a{ color:inherit; text-decoration:none }
img{ max-width:100%; display:block }
.container{ max-width:var(--max); margin:0 auto; padding:0 20px }

/* El header es fijo → damos espacio arriba */
body{ padding-top:var(--header-h) }

/* ======================================================
   BOTONES
====================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:12px;
  border:1px solid #e3e3e7; font-weight:800; letter-spacing:.2px;
  transition:all .25s ease; text-align:center;
}
.btn.primary{ background:var(--red); color:#fff; border-color:var(--red) }
.btn.primary:hover{ filter:brightness(.96) }
.btn.call{ background:var(--call); color:#fff; border-color:var(--call) }
.btn.call:hover{ background:var(--call-hover); border-color:var(--call-hover); transform:translateY(-1px); box-shadow:0 10px 28px rgba(37,99,235,.25) }
.btn.whatsapp{ background:#22c55e; color:#fff; border-color:#22c55e }
.btn.whatsapp:hover{ background:#16a34a; border-color:#16a34a; transform:translateY(-1px); box-shadow:0 10px 28px rgba(34,197,94,.25) }

/* ======================================================
   HEADER (FIJO)
====================================================== */
#site-header{
  position:fixed; top:0; left:0; width:100%;
  z-index:1000;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid #e5e5e5;
  backdrop-filter:saturate(180%) blur(10px);
}
.nav{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:14px; margin-right:clamp(10px,2.2vw,28px) }
.brand img{ height:64px; width:auto }
.brand-name{
  font-size:clamp(22px,2.6vw,28px); font-weight:900; letter-spacing:.3px;
  white-space:nowrap; color:#0f172a;
}

/* Menú */
.menu{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:22px;
}
.menu a{
  white-space:nowrap; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; padding:10px 12px; border-radius:10px; transition:all .25s ease;
}
.menu a:hover{ background:#eef2ff; transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.08) }

/* CTA derecha */
.cta{ flex:0 0 auto; display:flex; gap:8px; align-items:center }

/* Botón hamburguesa */
.mobile-toggle{
  display:none; width:48px; height:48px; font-size:26px; line-height:1;
  border-radius:12px; border:2px solid rgba(0,0,0,.08);
  background:#fff; color:var(--red); cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

/* Header responsive */
@media (max-width:1200px){
  .menu{ gap:16px }
  .menu a{ font-size:15px }
}
@media (max-width:980px){
  .menu{ display:none !important }
  #site-header .cta .btn{ display:none !important }
  .mobile-toggle{ display:block !important; position:fixed; right:12px; top:12px; z-index:1200 }
}

/* ======================================================
   MENÚ MÓVIL (drawer)
====================================================== */
.mobile-menu{
  position:fixed; top:0; right:0; bottom:0; width:82vw; max-width:360px;
  background:#fff; color:#111; z-index:1190;
  transform:translateX(100%); transition:transform .25s ease;
  box-shadow:-10px 0 24px rgba(0,0,0,.22);
  padding:72px 20px 20px; overflow:auto;
}
.mobile-menu::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:-1;
}
.mobile-menu.open{ transform:translateX(0) }
.mobile-menu.open::before{ opacity:1; pointer-events:auto }

.mobile-menu a{
  display:block; padding:12px 4px; font-size:18px; text-align:center;
  border:1px solid #eee; border-radius:12px; font-weight:800; background:#fafafa; margin-bottom:10px;
}
.mobile-menu .mobile-ctas{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

.menu-close{
  position:absolute; top:12px; right:14px; width:44px; height:44px; font-size:24px;
  border:0; background:transparent; color:#222; border-radius:10px; cursor:pointer;
}

/* ======================================================
   HERO
====================================================== */
.hero{
  position:relative; color:#fff;
  background:
    radial-gradient(120% 180% at 80% 20%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(90deg, #ae1916 0%, var(--brand-600) 40%, #b71c1c 100%);
  padding:3rem 0;
}
.hero .wrap{
  display:grid; align-items:center; gap:28px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:clamp(520px,78vh,860px);
}
@media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; min-height:unset } }

.hero-copy{
  max-width:720px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:22px 22px 18px; backdrop-filter:blur(6px) saturate(120%);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:8px 12px; border-radius:999px; font-weight:700; margin:2px 0 12px;
}
.hero h1{
  font-size:clamp(28px,5vw,46px); line-height:1.12; margin:0 0 10px;
  font-weight:900; letter-spacing:.2px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.text-gradient{ background:linear-gradient(90deg,#ffffff,#ffe4e4); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800 }
.hero p{ font-size:clamp(15px,2.6vw,18px); opacity:.95; margin:0 0 18px; max-width:58ch; line-height:1.55; text-shadow:0 1px 0 rgba(0,0,0,.12) }
.checks{ display:grid; gap:10px; margin:12px 0 16px }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:16px; color:#f2f2f2; white-space:nowrap }
.hero .cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px }
.hero .cta .btn{ flex:1 1 160px }
.trustbar{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.pill{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22); padding:8px 12px; border-radius:999px; font-weight:800; font-size:.95rem }
.hero-visual{ text-align:center }
.mascot{ width:min(340px,70%); margin:0 auto; filter:drop-shadow(0 12px 28px rgba(0,0,0,.35)) }
.hero-note.card{ background:#fff; color:#111; border:1px solid #ececf0; border-radius:14px; padding:10px 12px; max-width:260px; margin:12px auto 0; text-align:center; font-weight:800 }

@media (max-width:520px){
  :root{ --header-h:78px }
  .brand img{ height:48px }
  .brand-name{ font-size:clamp(20px,6vw,28px) }
  .hero{ padding:34px 0 }
  .hero .cta .btn{ flex:1 1 100% }
  .mascot{ width:64% }
}

/* ======================================================
   SECCIONES GENERALES
====================================================== */
section{ padding:64px 0 }
h2{ font-size:clamp(22px,4.2vw,34px); margin:0 0 14px }
.muted{ color:#5a5d61 }
.wc-head h2, .prj-head h2, .section-title h2, .reviews__header h2, .svc-head h2{ position:relative; display:inline-block }
.wc-head h2::after, .prj-head h2::after, .section-title h2::after, .reviews__header h2::after, .svc-head h2::after{
  content:""; position:absolute; left:0; bottom:-8px; height:4px; width:56%;
  background:linear-gradient(90deg,var(--brand-600),transparent); border-radius:999px;
}

/* ======================================================
   WHY CHOOSE US
====================================================== */
#why-choose.why-pro{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,0,0,.08), transparent 60%),
              linear-gradient(180deg,#f0f1f3 0%,#e6e8eb 100%);
  padding:70px 0 48px;
}
#why-choose .wc-head{ text-align:center; margin-bottom:18px }
#why-choose .wc-head .muted{ max-width:70ch; margin:0 auto }
#why-choose .wc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:16px }
@media (max-width:960px){ #why-choose .wc-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ #why-choose .wc-grid{ grid-template-columns:1fr } }
#why-choose .wc-card{
  position:relative; background:#fff; border:1px solid #ececf0; border-radius:16px;
  padding:20px 18px; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#why-choose .wc-card::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  background:linear-gradient(180deg,rgba(229,57,53,.12),transparent 60%); opacity:.7;
}
#why-choose .wc-card:hover{ transform:translateY(-4px); border-color:#e1e4ea; box-shadow:0 14px 32px rgba(0,0,0,.10) }
#why-choose .wc-ico{
  width:54px; height:54px; margin:4px auto 10px; border-radius:999px; display:grid; place-items:center;
  color:#fff; background:radial-gradient(circle at 30% 30%,#ff6d66,#E53935); box-shadow:0 8px 18px rgba(229,57,53,.28);
}
#why-choose .wc-card h3{ margin:8px 0 6px; font-size:18px; font-weight:800; color:#101218 }
#why-choose .wc-card p{ margin:0; color:#5a5d61; font-size:15px }
#why-choose .wc-pills{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0 8px }
#why-choose .wc-pills .pill{ background:#eef0f3; border:1px solid #e2e6ee; color:#4a5160; font-size:13.5px; padding:8px 12px; border-radius:999px }
#why-choose .wc-stats{ display:flex; gap:16px; justify-content:center; align-items:center; margin:10px 0 4px; flex-wrap:wrap }
#why-choose .stat{ display:grid; place-items:center; background:#fff; border:1px solid #ececf0; border-radius:12px; min-width:130px; padding:10px 12px; box-shadow:0 6px 16px rgba(0,0,0,.05) }
#why-choose .stat strong{ font-size:22px; line-height:1; color:#111; letter-spacing:.2px }
#why-choose .stat span{ font-size:13px; color:#60656d }
#why-choose .wc-cta{ display:flex; gap:10px; justify-content:center; margin-top:16px }
#why-choose .wc-cta .btn{ min-width:180px }

/* ======================================================
   SERVICES
====================================================== */
#services{ background:#f7f7f9; color:#0f172a; padding:56px 0 72px }
.svc-head{ text-align:center }
.svc-head .muted{ max-width:70ch; margin:0 auto 10px }
.svc-filters{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:0 auto 18px; padding:0 12px }
.svc-filters .chip{
  border:1px solid #e5e8ee; background:#fff; color:#0f172a;
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:.86rem; cursor:pointer; transition:.18s;
}
.svc-filters .chip:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.06) }
.svc-filters .chip.is-active{ background:#0f172a; color:#fff; border-color:#0f172a }

.svc-grid{ display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:1024px){ .svc-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .svc-grid{ grid-template-columns:1fr } }

.svc-card{
  background:#fff; border:1px solid #e6eaf0; border-radius:16px; overflow:hidden;
  box-shadow:0 8px 18px rgba(16,24,40,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover{ transform:translateY(-3px); box-shadow:0 16px 28px rgba(16,24,40,.12); border-color:#dde2ea }
.svc-card.is-hidden{ display:none !important }
@keyframes svcFadeIn{ from{ opacity:0; transform:translateY(6px) scale(.98) } to{ opacity:1; transform:none } }
.svc-card:not(.is-hidden){ animation:svcFadeIn .25s ease both }

/* ---- Media (fondos por servicio, con mezcla de colores) ---- */
.svc-media{
  position: relative;
  height: 60px; /* altura del “banner” */
  border-bottom: 1px solid rgba(0,0,0,.06);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  /* Colores por defecto (fallback) */
  --svc-from: #E53935;
  --svc-to:   #ff807c;
  background: linear-gradient(135deg, var(--svc-from), var(--svc-to));
}
.svc-media::before,
.svc-media::after{
  content: none !important; /* sin overlays */
}
.svc-card:hover .svc-media{ filter: brightness(0.96); }

/* ---- Paletas por servicio ---- */
.svc-media.roofing{
  --svc-from:#ff0000; --svc-to:#000000; /* rojo → rojo claro */
}
.svc-media.siding{
  --svc-from:#ff0303; --svc-to:#000000; /* azul → celeste */
}
.svc-media.gutters{
  --svc-from:#ff0303; --svc-to:#000000; /* negro → gris oscuro */
}
.svc-media.masonry{
  --svc-from:#f80000; --svc-to:#000000; /* morado → lila */
}
.svc-media.carpentry{
  --svc-from:#ff0303; --svc-to:#000000; /* verde → verde claro */
}
.svc-media.painting{
  --svc-from:#ff0303; --svc-to:#000000; /* naranja → ámbar */
}
.svc-media.windows-doors{
  --svc-from:#ff0303; --svc-to:#000000; /* celeste → azul claro */
}
.svc-media.kitchens-baths{
  --svc-from:#ff0303; --svc-to:#000000; /* rosa → fucsia claro */
}

/* ---- Body & contenido ---- */
.svc-body{ padding:18px }
.svc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.svc-top h3{ margin:0; font-size:1.18rem; font-weight:900; color:#0b1220 }
.svc-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px }
.svc-badges .pill{ display:inline-block; background:#eef0f3; border:1px solid #e2e6ee; color:#405064; border-radius:999px; padding:6px 10px; font-size:.78rem; font-weight:700 }
.svc-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px }
.svc-list li{ position:relative; padding-left:22px; color:#1f2937; line-height:1.55 }
.svc-list li::before{ content:""; position:absolute; left:0; top:.58em; width:8px; height:8px; border-radius:50%; background:var(--brand-600); box-shadow:0 0 0 3px rgba(229,57,53,.14) }
#services .svc-cta{ display:flex; gap:10px; justify-content:center; margin-top:22px }
#services .svc-cta .btn{ min-width:180px }

/* ======================================================
   PROJECTS (grid + modal)
====================================================== */
section#gallery.prj-pro{
  background: linear-gradient(180deg, #8b0000 0%, #c62828 50%, #e53935 100%);
  padding: 60px 0; color:#fff;
}
.prj-head{ text-align:center; margin-bottom:16px }
.prj-head h2{ margin:0 0 6px; color:#fff; font-size:clamp(26px,3.6vw,34px); font-weight:800 }
.prj-head .muted{ color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6) }
.prj-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) }
.prj-card{
  position:relative; border:1px solid #e6eaf0; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 8px 20px rgba(16,24,40,.12); transition:.25s;
}
.prj-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(16,24,40,.18) }
.prj-card .media{ aspect-ratio:16/10; background:#ddd; overflow:hidden }
.prj-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease }
.prj-card:hover .media img{ transform:scale(1.03) }
.count-pill{
  position:absolute; top:10px; right:10px; z-index:2;
  background:rgba(0,0,0,.6); color:#fff; font-weight:800; font-size:.8rem;
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
}

/* Modal visor */
.modal{ position:fixed; inset:0; z-index:2000; display:none; opacity:0; transition:opacity .25s ease }
.modal.open{ display:flex; align-items:center; justify-content:center; padding:4vh 2vw }
.modal.open.visible{ opacity:1 }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35) }
.modal-dialog{ position:relative; z-index:2001; background:transparent; width:auto; max-width:96vw; max-height:92vh }
.album-stage{ position:relative; display:flex; align-items:center; justify-content:center }
.album-img{
  display:block; width:auto; height:auto; max-width:96vw; max-height:90vh; object-fit:contain;
  border-radius:10px; box-shadow:0 8px 40px rgba(0,0,0,.5); background:transparent;
  opacity:0; transform:scale(.985); transition:opacity .25s ease, transform .25s ease;
}
.modal.open.visible .album-img{ opacity:1; transform:scale(1) }
.album-prev,.album-next{
  position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.45); color:#fff; cursor:pointer; font-size:20px; z-index:10000;
  transition:opacity .2s ease, transform .15s ease; opacity:0;
}
.album-prev{ left:10px } .album-next{ right:10px }
.album-stage:hover .album-prev,.album-stage:hover .album-next{ opacity:1 }
@media (hover:none){ .album-prev,.album-next{ opacity:1 } }
.album-close{
  position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:10px;
  border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.45); color:#fff; cursor:pointer; font-size:20px; z-index:10001;
}
.album-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:8px; align-items:center; z-index:10002 }
.album-dots .dot{ width:9px; height:9px; border-radius:999px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.25); cursor:pointer; transition:.15s }
.album-dots .dot.is-active{ background:#fff; border-color:#fff; transform:scale(1.25) }
@media (max-width:600px){ .album-img{ max-width:96vw; max-height:82vh } }

/* ======================================================
   REVIEWS
====================================================== */
.reviews{ padding:56px 16px; background:var(--white) }
.reviews .container{ max-width:var(--max); margin:0 auto }
.reviews__header h2{ margin:0 0 16px; font-size:clamp(28px,3vw,40px); line-height:1.1; letter-spacing:-.02em }
.reviews__summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--gray); padding:16px 20px; border-radius:18px }
.reviews__score{ display:flex; align-items:center; gap:10px; font-weight:800 }
.reviews__rating{ font-size:24px }
.reviews__stars[aria-hidden="true"] svg{ width:20px; height:20px; fill:#fbbf24 }
.reviews__google{ font-weight:900 }
.reviews__cta{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; background:var(--call); color:#fff; border-radius:999px; font-weight:800; transition:.2s transform,.2s background-color }
.reviews__cta:hover{ background:var(--call-hover); transform:translateY(-1px) }
.reviews__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin:28px 0 12px }
.review{ grid-column:span 12; background:linear-gradient(180deg,#ffffff,#fafafa); border:1px solid #ececec; border-radius:20px; padding:18px; box-shadow:0 4px 18px rgba(0,0,0,.05) }
@media (min-width:720px){ .review{ grid-column:span 6 } }
@media (min-width:1024px){ .review{ grid-column:span 4 } }
.review__head{ display:flex; align-items:center; gap:12px; margin-bottom:6px }
.avatar{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:var(--black); color:#fff }
.review__author{ margin:0; font-size:16px }
.review__time{ display:block; font-size:12px; opacity:.65 }
.review__stars-static{ font-size:18px; letter-spacing:2px; color:#fbbf24; margin:6px 0 8px }
.review__text{ margin:0 0 10px; font-size:15px; line-height:1.55 }
.review__link{ font-weight:800; color:var(--call) }
.review__link:hover{ text-decoration:underline }
.reviews__footer{ display:flex; justify-content:center; margin-top:8px }
.reviews__more{ padding:10px 16px; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:10px; font-weight:700; cursor:pointer }
.reviews__more:hover{ background:#e2e8f0 }

/* ======================================================
   CONTACT (FREE ESTIMATE)
====================================================== */
#contact.estimate-wrap{
  display:grid; grid-template-columns:min(560px,100%) 1fr; gap:32px; align-items:stretch;
  padding:48px 20px; max-width:1100px; margin:0 auto;
  background:
    radial-gradient(1200px 600px at 15% 15%, rgba(229,57,53,.06), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff5f5 45%, #fff1f0 100%);
  border-radius:18px;
}
#contact .estimate-card{
  background:#fff; border:1px solid #e7e9ee; border-radius:18px; padding:28px;
  box-shadow:0 8px 28px rgba(0,0,0,.12),0 12px 48px rgba(0,0,0,.08);
  transition:transform .25s ease, box-shadow .25s ease; position:relative;
}
#contact .estimate-card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.16),0 16px 52px rgba(0,0,0,.12) }
.estimate-card::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:3px; border-radius:999px;
  background:linear-gradient(90deg, var(--brand-600), transparent); opacity:.8;
}
#contact .est-header h1{ margin:0 0 6px; font-size:clamp(24px,4.2vw,34px); font-weight:800; color:#1b1f27; line-height:1.1 }
.est-header--pro .est-title{ position:relative }
.est-header--pro .est-title::after{ content:""; position:absolute; left:0; bottom:-8px; width:56%; height:4px; border-radius:999px; background:linear-gradient(90deg,var(--brand-600),transparent) }
#contact .est-header .sub{ margin:0 0 14px; color:#5c6270 }
#contact .estimate-form label{ display:block; font-weight:700; color:#2b3240; margin:8px 0 6px }
#contact .estimate-form input, #contact .estimate-form select, #contact .estimate-form textarea{
  width:100%; border:1px solid #dfe3ea; border-radius:12px; padding:12px 14px; font-size:16px; outline:none; background:#fff;
}
#contact .estimate-form input:focus, #contact .estimate-form select:focus, #contact .estimate-form textarea:focus{
  border-color:#E11919; box-shadow:0 0 0 3px rgba(225,25,25,.12);
}
#contact .estimate-form .grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
#contact .btn-primary{
  margin-top:12px; width:100%; background:#E11919; color:#fff; border:none;
  padding:14px 18px; font-weight:900; border-radius:14px; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease; box-shadow:0 10px 18px rgba(225,25,25,.22);
}
#contact .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 22px rgba(225,25,25,.28) }
#contact .trust{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
#contact .pill{ background:#eef0f3; border-radius:999px; padding:8px 12px; font-size:13px; color:#4a5160 }
.estimate-card--pro .est-foot .pill{ background:var(--brand-50); border:1px solid var(--brand-200); color:var(--brand-800) }
#contact .map-hero{ position:relative; border-radius:18px; overflow:hidden; min-height:620px; box-shadow:0 12px 30px rgba(15,17,21,.12) }
#contact .map-hero iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(1.05) contrast(1.02) }
#contact .map-overlay{ position:absolute; inset:0; background:radial-gradient(1200px 600px at 20% 80%,transparent 0%,rgba(15,17,21,.35) 70%); pointer-events:none }
#contact .map-badge{
  position:absolute; left:20px; bottom:20px; z-index:2;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  border:1px solid #e5e8ef; border-radius:12px; padding:12px 14px; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
#contact .map-badge strong{ display:block; color:#0f1115 }
#contact .map-badge span{ color:#4a5160; font-size:14px }

@media (max-width:900px){ #contact.estimate-wrap{ grid-template-columns:1fr } }
@media (max-width:600px){ #contact .estimate-card{ padding:20px } #contact .map-hero{ min-height:320px !important } }

/* ======================================================
   FABs FLOTANTES
====================================================== */
.quickbar{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:12px; z-index:60 }
.fab{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:900; color:#fff; text-decoration:none; transition:all .3s ease; box-shadow:0 8px 24px rgba(0,0,0,.18); border:1px solid transparent }
.fab-whatsapp{ background:#22c55e; border-color:#22c55e }
.fab-whatsapp:hover{ background:#16a34a; transform:scale(1.06); box-shadow:0 18px 40px rgba(0,0,0,.28) }
.fab-call{ background:var(--call); border-color:var(--call); animation:pulse-call 1.8s infinite }
.fab-call:hover{ background:var(--call-hover); transform:scale(1.06); box-shadow:0 18px 40px rgba(0,0,0,.28) }
@keyframes pulse-call{ 0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)} 70%{box-shadow:0 0 0 20px rgba(37,99,235,0)} 100%{box-shadow:0 0 0 0 rgba(37,99,235,0)} }

/* ======================================================
   FOOTER (oscuro, limpio)
====================================================== */
.footer-pro{ background:#0b0b0d; color:#e8e8ec; padding:48px 0 26px; border-top:1px solid rgba(255,255,255,.06) }
.footer-pro a{ color:#dbe2ff }
.footer-pro a:hover{ color:#ffffff }
.footer-grid{ display:grid; grid-template-columns:2fr 1.3fr 1.1fr; gap:34px 42px; align-items:flex-start; padding:28px 0 }
@media (max-width:960px){ .footer-grid{ grid-template-columns:1fr } }

.brand.mini{ display:flex; align-items:center; gap:14px; text-decoration:none; color:#fff; font-weight:900 }
.brand.mini img{ width:clamp(72px,6.2vw,110px); height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)) }
.brand.mini span{ font-weight:900; letter-spacing:.2px; font-size:clamp(20px,2.2vw,28px); color:#fff }

.f-desc{ margin:8px 0 12px; max-width:48ch; line-height:1.55; color:#cfd2d8 }
.footer-pro .pill{ display:inline-block; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); color:#f5f7ff; border-radius:999px; padding:6px 10px; font-weight:800; font-size:.82rem }
.f-badges{ display:flex; gap:8px; flex-wrap:wrap }

.f-col h4{ margin:0 0 10px; color:#fff; font-weight:900; letter-spacing:.2px; font-size:15px; text-transform:uppercase }
.f-list,.f-links{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.f-hours{ margin:6px 0 0; color:#d1d5db }
.footer-pro .sub{ border-top:1px solid rgba(255,255,255,.08); text-align:center; margin-top:28px; padding-top:14px; color:#aeb4bd; font-size:.92rem }

/* ======================================================
   SCROLL OFFSET PARA ANCLAS
====================================================== */
section[id]{ scroll-margin-top: calc(var(--header-h) + 40px) }

/* ======================================================
   A11y helper (solo lectores)
====================================================== */
.sr-only{
  position:absolute !important;
  width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  white-space:nowrap !important; border:0 !important;
}
/* oculto visualmente pero sigue en el DOM para que los bots lo vean */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}
/* === Polish pack para las tarjetas de servicios === */
.service-card{
  background:#fff;
  border:1px solid rgba(17,17,17,.06);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(17,17,17,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.service-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(17,17,17,.12);
  border-color:rgba(17,17,17,.10);
}

/* Franja superior “premium”: mismo degradado, con brillo sutil */
.service-card > div:first-child{
  height:64px;              /* franja más delgada */
  position:relative;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  /* si ya tienes un gradient, lo respeta; si no, este fallback rojo */
  background:linear-gradient(135deg,#7f1d1d, #E53935 55%, #ff6b67);
}
.service-card > div:first-child::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.38) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* Cuerpo y títulos */
.service-card h3{
  margin:14px 16px 10px;
  font-weight:800; letter-spacing:.2px; color:#111;
}
.service-card h3 + *{ margin-left:16px; margin-right:16px; }
.service-card .service-body{ padding:0 16px 16px; }

/* Chips (detecta clases comunes sin tocar HTML) */
.service-card [class*="tag"], 
.service-card [class*="chip"], 
.service-card [class*="badge"]{
  display:inline-block;
  padding:8px 10px;
  margin:0 8px 8px 0;
  font-size:.82rem; line-height:1;
  color:#363636;
  background:#f5f6f8;
  border:1px solid #ececee;
  border-radius:999px;
}

/* Lista de bullets con anillo rojo */
.service-card ul{ list-style:none; padding:0 0 0 0; margin:8px 0 0; }
.service-card ul li{
  position:relative;
  padding:6px 0 6px 22px;
  color:#1b1b1f; line-height:1.35;
}
.service-card ul li::before{
  content:"";
  position:absolute; left:0; top:10px;
  width:10px; height:10px; border-radius:50%;
  background:#E53935;
  box-shadow:0 0 0 3px #ffe2df; /* anillo */
}

/* Separadores suaves si tienes varias columnas */
.services-grid{ gap:22px; }

/* Opcional: variantes si alternas colores en algunas tarjetas */
.service-card.variant-blue > div:first-child{
  background:linear-gradient(135deg,#0b2a5a,#2563eb 55%,#60a5fa);
}
.service-card.variant-green > div:first-child{
  background:linear-gradient(135deg,#065f46,#059669 55%,#34d399);
}