:root { --red: #e31b23; --red-dark: #b50f16; --ink: #121316; --steel: #25282d; --mist: #f3f4f6; --line: #e2e4e8; --white: #fff; --background: #fff; --foreground: #17181b; --primary: #17181b; --primary-foreground: #fff; --secondary: #f1f2f4; --secondary-foreground: #17181b; --muted: #e3e5e8; --muted-foreground: #686c74; --accent: #f1f2f4; --accent-foreground: #17181b; --destructive: #e31b23; --border: #d9dce1; --input: #d9dce1; --ring: #e31b23; --radius: .625rem; }
@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
svg { width: 1.15em; height: 1.15em; stroke-width: 2.25; }
.site-shell { min-height: 100vh; overflow: hidden; }
.site-header { position: relative; z-index: 20; height: 92px; padding: 0 clamp(24px, 5vw, 76px); display: flex; align-items: center; justify-content: space-between; background: rgba(14,15,18,.98); color: #fff; border-bottom: 3px solid var(--red); }
.brand img { width: 205px; height: auto; display: block; }
.site-header nav { display: flex; gap: 30px; font-size: .9rem; font-weight: 700; }
.site-header nav a { opacity: .76; transition: .2s ease; }
.site-header nav a:hover { opacity: 1; color: #ff676c; }
.header-call { display: inline-flex; align-items: center; gap: 9px; padding: 13px 17px; background: var(--red); font-weight: 800; border-radius: 5px; }

.hero { position: relative; min-height: 680px; display: flex; align-items: center; background: #111; color: #fff; }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 48%; }
.hero-shade { background: linear-gradient(90deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.76) 42%, rgba(8,9,11,.25) 72%, rgba(8,9,11,.35) 100%), linear-gradient(0deg, rgba(8,9,11,.45), transparent 45%); }
.hero-content { position: relative; z-index: 2; width: min(720px, 90vw); margin-left: clamp(24px, 8vw, 124px); padding: 70px 0; }
.eyebrow, .kicker, .section-heading > span { color: #f15b60; font-size: .78rem; font-weight: 900; letter-spacing: .18em; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { display: block; width: 34px; height: 3px; background: var(--red); }
.hero h1 { max-width: 690px; margin: 19px 0 20px; font-size: clamp(3.2rem, 6.2vw, 6.4rem); line-height: .91; letter-spacing: -.055em; text-transform: uppercase; }
.hero-content > p { max-width: 610px; margin: 0 0 30px; color: #d7d9dd; font-size: 1.13rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta { min-width: 166px; padding: 16px 24px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; border-radius: 4px; font-weight: 900; }
.cta-primary { background: var(--red); box-shadow: 0 12px 30px rgba(227,27,35,.25); }
.cta-whatsapp { background: #21a567; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 36px; color: #e6e7ea; font-size: .88rem; font-weight: 700; }
.trust-row span { display: flex; gap: 7px; align-items: center; }
.trust-row svg { color: #ff5a60; }

.quick-band { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 24px clamp(24px, 8vw, 124px); background: var(--red); color: #fff; }
.quick-band div { display: flex; flex-direction: column; gap: 4px; }
.quick-band strong { font-size: 1.3rem; }
.quick-band span { opacity: .85; }
.quick-band > a { display: flex; align-items: center; gap: 9px; font-size: 1.35rem; font-weight: 900; }

.section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0; }
.section-heading { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-heading.left { margin-left: 0; text-align: left; }
.section-heading h2, .process-copy h2, .seo-copy h2 { margin: 10px 0 14px; font-size: clamp(2.2rem, 4vw, 3.75rem); line-height: 1.02; letter-spacing: -.045em; }
.section-heading p, .process-copy p { color: #656971; font-size: 1.05rem; line-height: 1.7; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.service-grid article { min-height: 250px; padding: 30px; border: 1px solid var(--line); border-top: 4px solid var(--red); background: #fff; box-shadow: 0 18px 45px rgba(16,18,24,.07); }
.service-grid article > svg, .service-icon { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 4px; font-size: 1rem; font-weight: 900; }
.service-grid h3 { margin: 38px 0 10px; font-size: 1.3rem; }
.service-grid p { margin: 0; color: #696d75; line-height: 1.6; }

.process-section { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; padding: 96px max(24px, calc((100% - 1180px)/2)); background: var(--ink); color: #fff; }
.process-copy p { color: #b8bbc2; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #3a3d43; }
.process-list li { display: flex; gap: 24px; align-items: center; padding: 25px 0; border-bottom: 1px solid #3a3d43; }
.process-list b { color: #ef494f; font-size: 1.5rem; }
.process-list div { display: flex; flex-direction: column; gap: 5px; }
.process-list strong { font-size: 1.08rem; }
.process-list span { color: #aeb1b8; }

.gallery-section { padding-bottom: 65px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 12px; }
.gallery-grid figure { margin: 0; overflow: hidden; background: #ddd; }
.gallery-grid .gallery-wide { grid-column: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gallery-grid figure:hover img { transform: scale(1.035); }

.areas { padding-top: 70px; }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.area-grid a { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 18px; border: 1px solid var(--line); background: #f8f9fa; transition: .2s ease; }
.area-grid a:hover, .area-grid a.active { border-color: var(--red); background: #fff; box-shadow: 0 10px 28px rgba(20,22,26,.08); transform: translateY(-2px); }
.area-grid svg, .pin { color: var(--red); flex: 0 0 auto; }
.area-grid span { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.area-grid small { color: #73777f; }
.area-grid b { color: var(--red); font-size: 1.25rem; }

.seo-copy { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; border-top: 1px solid var(--line); }
.seo-copy p { margin: 0 0 17px; color: #595e66; font-size: 1.03rem; line-height: 1.8; }
.contact-section { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 85px max(24px, calc((100% - 1180px)/2)); background: linear-gradient(120deg, #131519 0%, #292d33 100%); color: #fff; }
.contact-section > div:first-child { max-width: 630px; }
.contact-section h2 { margin: 10px 0 18px; font-size: clamp(2.1rem, 4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.contact-section p { color: #c4c7cc; }
.contact-actions { display: flex; flex-direction: column; min-width: 300px; gap: 10px; }
.contact-actions a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; color: #15171a; border-left: 5px solid var(--red); }
.contact-actions a:last-child { border-color: #20a565; }
.contact-actions svg { width: 25px; height: 25px; }
.contact-symbol { width: 25px; height: 25px; display: grid; place-items: center; color: var(--red); font-weight: 900; }
.contact-actions span { display: flex; flex-direction: column; }
.contact-actions small { color: #71757d; }
.contact-actions strong { font-size: 1.2rem; }
footer { display: flex; min-height: 160px; padding: 35px clamp(24px, 5vw, 76px); align-items: center; justify-content: space-between; gap: 25px; background: #090a0c; color: #8e9299; font-size: .9rem; }
footer img { width: 180px; height: auto; }
.mobile-bar { display: none; }

@media (max-width: 960px) {
  .site-header { height: 78px; padding: 0 20px; }
  .brand img { width: 165px; }
  .site-header nav { display: none; }
  .header-call { font-size: .85rem; }
  .hero { min-height: 640px; }
  .hero-content { margin-left: 7vw; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .process-section, .seo-copy { grid-template-columns: 1fr; gap: 35px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-section { align-items: stretch; flex-direction: column; }
  .contact-actions { min-width: 0; }
}
@media (max-width: 620px) {
  body { padding-bottom: 64px; }
  .site-header { height: 68px; }
  .brand img { width: 145px; }
  .header-call { padding: 10px 11px; font-size: 0; }
  .header-call svg { width: 22px; height: 22px; }
  .hero { min-height: 650px; align-items: flex-end; }
  .hero-image { object-position: 62% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(7,8,10,.97) 4%, rgba(7,8,10,.78) 60%, rgba(7,8,10,.26) 100%); }
  .hero-content { width: auto; margin: 0; padding: 175px 22px 40px; }
  .hero h1 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .hero-content > p { font-size: 1rem; }
  .hero-actions { flex-wrap: nowrap; }
  .cta { min-width: 0; flex: 1; padding: 15px 12px; }
  .trust-row { gap: 10px 18px; margin-top: 24px; }
  .quick-band { display: none; }
  .section { width: min(100% - 34px, 1180px); padding: 72px 0; }
  .section-heading { margin-bottom: 30px; }
  .service-grid, .area-grid { grid-template-columns: 1fr; }
  .service-grid article { min-height: 215px; }
  .process-section, .contact-section { padding: 70px 20px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; gap: 7px; }
  .gallery-grid .gallery-wide { grid-column: span 2; }
  .seo-copy { gap: 18px; }
  footer { flex-direction: column; padding: 45px 24px; text-align: center; }
  .mobile-bar { position: fixed; z-index: 60; bottom: 0; left: 0; right: 0; height: 64px; display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 -8px 25px rgba(0,0,0,.18); }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--red); color: #fff; font-weight: 900; }
  .mobile-bar a:last-child { background: #1fa365; }
}