:root{
  --black:#050505;
  --charcoal:#111316;
  --deep-charcoal:#1b1b1b;
  --walnut:#3a2518;
  --dark-walnut:#24160f;
  --warm-brown:#6b4a32;
  --silver:#d8d8d8;
  --silver-dark:#8f8f8f;
  --platinum:#f2f2f2;
  --gold:#c99a3d;
  --dark-gold:#8c6829;
  --ivory:#f4efe6;
  --white:#ffffff;
  --container-max:1200px;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--black);color:var(--platinum);font-family:"Segoe UI", "Inter", "Roboto", Arial, sans-serif;line-height:1.45}
a{color:inherit}
.container{max-width:var(--container-max);margin:0 auto;padding:1rem}
/* Typography */
h1{font-family:Georgia, "Times New Roman", serif;font-size:clamp(1.8rem,3.6vw,3.6rem);letter-spacing:0.01em;margin:0 0 .6rem}
h2{font-family:Georgia, serif;font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 1rem}
h3{font-size:1.1rem;margin:.5rem 0}
.kicker{color:var(--silver-dark);font-size:.9rem}
.lead{color:var(--silver);max-width:70ch}

/* Preloader */
.preloader{position:fixed;inset:0;background:linear-gradient(180deg,var(--charcoal),var(--deep-charcoal));display:flex;align-items:center;justify-content:center;z-index:9999}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:.8rem;text-align:center}
.logo-preload{width:120px;height:auto;filter:grayscale(.1) drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.preload-copy{color:var(--silver)}

/* Header */
.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(5,5,5,.85),rgba(5,5,5,.7));backdrop-filter:blur(4px);border-bottom:1px solid rgba(255,255,255,.03);z-index:60}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:.8rem 0}
.logo{height:44px}
.nav-list{display:flex;gap:.6rem;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--silver);text-decoration:none;padding:.5rem .6rem;border-radius:6px}
.nav-list a:hover{background:linear-gradient(90deg,rgba(201,154,61,.06),rgba(255,255,255,.02));box-shadow:0 2px 8px rgba(0,0,0,.4)}
.nav-toggle{display:none}
.header-actions{display:flex;gap:.6rem;align-items:center}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;text-decoration:none;border:1px solid rgba(255,255,255,.04)}
.btn.primary{background:linear-gradient(180deg,var(--gold),var(--dark-gold));color:var(--black);font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.06);color:var(--silver)}
.link-whatsapp{color:var(--gold);font-weight:600}

/* Hero */
.hero{position:relative;padding:6rem 0;background-image:var(--hero-image);background-size:cover;background-position:center;color:var(--platinum)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,3,3,.6),rgba(10,10,10,.6));z-index:0}
.hero-inner{position:relative;display:flex;align-items:flex-start;gap:2rem;min-height:520px;padding:2rem 0;}
.hero-content{position:relative;z-index:2;max-width:62ch;padding:1rem 0;}
.hero-ctas{margin-top:1rem;display:flex;gap:.8rem;flex-wrap:wrap}
.trust-strip{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1rem;padding:0;list-style:none;color:var(--silver-dark)}
.hero-badge{position:absolute;right:2rem;bottom:1.5rem;background:rgba(36,22,15,.78);padding:.6rem 1rem;border-radius:6px;border:1px solid rgba(201,154,61,.24);color:var(--platinum);box-shadow:0 6px 18px rgba(0,0,0,.6);z-index:3}

/* subtle logo above badge to fill space */
.hero-logo{position:absolute;right:2rem;bottom:6rem;width:500px;opacity:1;pointer-events:none;display:block;z-index:1}
.hero-logo img{width:100%;height:auto;display:block;filter:grayscale(.3) blur(0.2px)}
@media (max-width:980px){
  .hero-logo{display:block;width:180px;bottom:5rem;opacity:.12}
}

/* Sections */
.section{padding:4rem 0}
.section.dark{background:linear-gradient(180deg,var(--deep-charcoal),var(--charcoal))}
.section-title{position:relative;padding-bottom:.6rem;margin-bottom:1rem}
.section-title:after{content:"";display:block;height:2px;width:48px;background:linear-gradient(90deg,var(--gold),var(--dark-gold));margin-top:.6rem;border-radius:2px}

.about-grid{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.value-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:1rem;border-radius:10px;border:1px solid rgba(255,255,255,.03)}
.about-media img{width:100%;height:auto;border-radius:8px;object-fit:cover}

.segments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:start}
.card.large{display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden}
.card.large img{width:100%;height:220px;object-fit:cover;border-radius:8px 8px 0 0;display:block;object-position: top;}
.card.large h3{margin-top:1rem}
.card.large p{margin:.8rem 0 1.2rem}

.two-col{display:grid;grid-template-columns:1fr 360px;gap:2rem}
.infographic{width:100%;border-radius:8px;border:1px solid rgba(255,255,255,.04);box-shadow:0 6px 20px rgba(0,0,0,.6)}
.accent-line{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:2rem 0}

.dinamo-steps .tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.dinamo-steps .tabs button{background:transparent;border:1px solid rgba(255,255,255,.04);padding:.5rem .7rem;border-radius:6px;color:var(--silver);cursor:pointer}
.dinamo-steps .tab-panels{margin-top:1rem}
.panel{display:none;padding:1rem;background:linear-gradient(180deg,rgba(255,255,255,.01),rgba(255,255,255,.02));border-radius:8px}
.panel.active{display:block}

.metrics{display:flex;gap:1.5rem;margin-top:2rem;flex-wrap:wrap}
.metric{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:1.3rem 1rem;border-radius:8px;text-align:center;min-width:170px;flex:1}
.number{font-family:Georgia,serif;font-size:2rem;color:var(--gold)}
.result-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;padding:1rem 0}
.result-cards .card{padding:1.1rem}

.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.service-grid .card{padding:1.2rem;min-height:auto;}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.gallery figure{position:relative;overflow:hidden;border-radius:8px}
.gallery img{width:100%;height:140px;object-fit:cover;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{padding:.6rem;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);position:absolute;left:0;right:0;bottom:0;color:var(--silver);font-size:.9rem}

/* Team collage */
.team-grid{display:flex;justify-content:center;align-items:center;padding:1rem 0}
.team-grid img{width:100%;max-width:980px;height:auto;object-fit:cover;border-radius:10px;border:1px solid rgba(255,255,255,.03);box-shadow:0 10px 30px rgba(0,0,0,.6)}

.contact-grid{display:grid;grid-template-columns:360px 1fr;gap:1rem}
.contact-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));padding:1rem;border-radius:8px}
.contact-form label{display:block;margin-top:.6rem;color:var(--silver-dark)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:.6rem;border-radius:6px;border:1px solid rgba(255,255,255,.04);background:transparent;color:var(--platinum);margin-top:.3rem}
.form-actions{display:flex;gap:.6rem;margin-top:1rem}

.site-footer{background:linear-gradient(180deg,var(--charcoal),var(--deep-charcoal));padding:2rem 0;color:var(--silver)}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.footer-nav{list-style:none;display:flex;gap:1rem;padding:0;margin:0}
.legal{margin-top:1rem;border-top:1px solid rgba(255,255,255,.03);padding-top:1rem;color:var(--silver-dark)}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:9999}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-img{max-width:92%;max-height:86%;border-radius:6px}
.lightbox-close{position:absolute;top:2rem;right:2rem;background:transparent;border:none;color:var(--platinum);font-size:1.4rem}

.back-to-top{position:fixed;right:1rem;bottom:1rem;background:var(--gold);color:var(--black);width:44px;height:44px;display:grid;place-items:center;border-radius:12px;text-decoration:none;font-size:1.2rem}

/* Responsive */
@media (max-width:980px){
  .header-inner{padding:.6rem 0}
  .logo{height:40px}
  .about-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .segments-grid{grid-template-columns:1fr}
  .segments-grid .card.large img{height:180px}
  .nav-list{display:none;flex-direction:column;background:linear-gradient(180deg,var(--charcoal),var(--deep-charcoal));position:absolute;top:64px;right:1rem;left:1rem;padding:0.6rem;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.6);}
  .nav-list a{display:block;padding:.8rem 1rem}
  .nav-toggle{display:inline-block}
  .header-actions{display:none}

  /* Stack hero vertically on small screens */
  .hero{padding:3.2rem 0}
  .hero-inner{flex-direction:column;align-items:flex-start;gap:1rem;min-height:auto;padding:1rem 0}
  .hero-content{padding:0}
  .hero-badge{right:1rem;bottom:1rem}
  .hero-logo{display:none}

  /* Contact/grid stack */
  .contact-grid{grid-template-columns:1fr}
  .contact-card{order:0}

  /* Gallery and images */
  .gallery img{height:120px}
  .team-grid img{max-width:100%;width:100%;}

  /* Footer stacked */
  .footer-inner{flex-direction:column;align-items:flex-start;gap:.8rem}
  .footer-nav{flex-wrap:wrap}

  /* Buttons and badges */
  .btn{padding:.6rem .8rem}
  .back-to-top{right:.6rem;bottom:.6rem;width:40px;height:40px;border-radius:50%}
}

@media (max-width:600px){
  h1{font-size:clamp(1.6rem,5vw,2.2rem)}
  .lead{font-size:.95rem}
  .segments-grid .card.large img{height:160px}
  .gallery img{height:100px}
  .metric{min-width:140px;padding:.9rem}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
