/* === Mobile‑first clean theme (keeps your dark neon vibe) =================== */
:root{
  --bg:#0b0c0d;
  --panel:#101214;
  --panel-2:#14171b;
  --fg:#eef2f4;
  --muted:#a6adb4;
  --accent:#00aaff;
  --line: rgba(255,255,255,.12);
  --radius:16px;
  --pad: clamp(16px, 4vw, 32px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth  }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  line-height:1.6;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:hover,a:focus-visible{color:var(--accent)}

.page{ padding: var(--pad); max-width: 1200px; margin-inline: auto; }

/* === Header: logo | WE DO | socials =================================== */
.site-header{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items:center;
  padding: var(--pad);
  padding-bottom: 8px;
  position:sticky; top:0; z-index:20;
  background: rgba(11,12,13,.6);
  backdrop-filter: blur(10px) saturate(120%);
  border-bottom: 1px solid var(--line);
}
.brand{ display:grid; place-items:center }
.brand-ring{ position:relative; display:grid; place-items:center; width:108px; aspect-ratio:1/1; border-radius:50%; background:#0b0c0d; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 14px 36px rgba(0,0,0,.55); isolation:isolate; overflow:hidden;}
.brand-ring::before{
  content:""; position:absolute; inset:-18%;
  border-radius:50%;
  background: radial-gradient(62% 62% at 50% 44%, rgba(255,255,255,.26), transparent 76%);
  filter: blur(16px); z-index:-1;
}
.brand-logo{ width:74%; border-radius:50% }

.header-wedo{ display:grid; place-items:center }
.header-wedo-img{ width:min(82vw, 520px); border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06) }
.neon-under-wedo{ display:block; height:4px; width: min(92vw, 560px); margin:8px auto 0; border-radius:999px; background: linear-gradient(90deg, transparent, rgba(0,170,255,.55) 12%, rgba(0,170,255,.9) 50%, rgba(0,170,255,.55) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 18px rgba(0,170,255,.14);}

.socials{ justify-self:center; display:flex; gap:10px; background:rgba(255,255,255,.06); border:1px solid var(--line); padding:6px 8px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.35); }
.socials .ico{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.10); outline:1px solid rgba(255,255,255,.14); transition:transform .15s ease, outline-color .15s ease; }
.socials .ico:hover{ transform: translateY(-2px) scale(1.02); outline-color:var(--accent) }
.socials .ico svg{ width:24px; height:24px; fill: currentColor; color:#fff; display:block }

/* === Nav =============================================================== */
.top-nav{ position:sticky; top:96px; z-index:15; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:14px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05); margin: 0 auto 10px; padding:8px; width: min(1200px, calc(100% - 2*var(--pad))); }
.menu-toggle{
  appearance:none; border:1px solid var(--line); background:transparent; color:var(--fg);
  border-radius:10px; padding:.5rem .75rem; font-weight:700; cursor:pointer; width:100%;
}
.menu{
  display:none; gap:8px; flex-wrap:wrap; justify-content:center; padding-top:8px;
}
.menu.open{ display:flex }
.menu a{ padding:.55rem .85rem; border-radius:12px; border:1px solid transparent; font-weight:600 }
.menu a:hover{ background:rgba(255,255,255,.08); border-color:var(--accent) }

/* === Sections ========================================================== */
.section{ padding: 36px var(--pad); border-top:1px solid var(--line) }
.section h2{
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem);
  margin: 0 0 .6rem; line-height:1.2; text-align:center;
}
.section h2::after{
  content:""; display:block; width:84px; height:3px; margin:10px auto 0;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: drop-shadow(0 0 10px rgba(14,165,233,.45)); opacity:.9; border-radius:2px;
}

.lead{ max-width:92ch; margin:.5rem auto; color:#dfe3e7; text-align:center }
.chips{ list-style:none; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:14px 0 24px; padding:0 }
.chips li{ border:1px solid var(--line); background:var(--panel); padding:6px 10px; border-radius:999px; font-size:.92rem; color:#cbd3da }

.features{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin-top:10px }
.features article{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px }
.features h3{ margin:.1rem 0 .35rem; font-size:1.05rem }

/* Services */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; margin-top:12px }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; min-height:130px }
.card h3{ margin:.1rem 0 .35rem }

/* Gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.gallery-grid img{
  width:100%; height:220px; object-fit:cover; border-radius:12px;
  border:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  transition: transform .25s ease;
}
.gallery-grid img:hover{ transform: translateY(-3px) scale(1.01) }

/* Reviews */
.reviews-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.review{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px }
.review .stars{ color:#ffd166; font-size:1.1rem; letter-spacing:.15em }
.review footer{ color:var(--muted); margin-top:.35rem }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:14px; align-items:start }
.contact-form{ display:grid; gap:10px }
.contact-form input, .contact-form textarea{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; color:var(--fg); padding:12px }
.contact-form button{ background:var(--accent); color:#000; border:0; border-radius:12px; padding:12px 16px; font-weight:900; cursor:pointer }
.contact-details a{ color:var(--accent) }
.btn-cta{ background:var(--accent); color:#000; font-weight:900; border-radius:12px; padding:.7rem 1rem; display:inline-block; }

.site-foot{ text-align:center; color:var(--muted); border-top:1px solid var(--line); padding:28px 0 }

/* Glow ring embellishment */
.brand-ring--glow{
  position:relative;
  box-shadow:
    0 0 10px rgba(255,255,255,.75),
    0 0 26px rgba(255,255,255,.55),
    inset 0 0 14px rgba(255,255,255,.28);
  animation: ledPulseWhite 2.8s ease-in-out infinite;
}
@keyframes ledPulseWhite{
  0%,100%{ opacity:.9; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); }
  50%{ opacity:.6; filter: drop-shadow(0 0 14px rgba(255,255,255,1)); }
}

/* Larger screens tweaks */
@media (min-width: 860px){ .brand-ring{ width:138px } .header-wedo-img{ width:min(38vw, 680px) } .top-nav{ top:110px; margin: 0 auto 14px; } .menu{ display:flex } .menu-toggle{ display:none } .contact-grid{ grid-template-columns:1.2fr .8fr } .socials{ justify-self:end } } .header-wedo-img{ width:min(38vw, 640px) } .top-nav{ top:110px; margin: 0 auto 14px; } .menu{ display:flex } .menu-toggle{ display:none } .contact-grid{ grid-template-columns:1.2fr .8fr } }
  .header-wedo-img{ width:min(82vw, 520px); border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06) }
  .top-nav{ position:sticky; top:96px; z-index:15; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:14px; box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05); margin: 0 auto 10px; padding:8px; width: min(1200px, calc(100% - 2*var(--pad))); }
  .menu{ display:flex }
  .menu-toggle{ display:none }
  .contact-grid{ grid-template-columns:1.2fr .8fr }
}

/* Hero */
.hero{ display:grid; place-items:center; padding: 8px var(--pad) 18px; }
.hero-inner{ text-align:center }

.book-cta{ background:var(--accent); color:#000; font-weight:900; border-radius:12px; padding:.6rem .9rem; }
.book-cta:hover{ filter:brightness(1.1) }

/* === Mobile horizontal swipe panels ===================================== */
@media (max-width: 859px){
  .h-scroll{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .h-scroll > *{ scroll-snap-align: start; }
  /* nicer scrollbars (optional) */
  .h-scroll::-webkit-scrollbar{ height: 8px }
  .h-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 99px }
  .h-scroll::-webkit-scrollbar-track{ background: transparent }
}

.hero{ display:grid; place-items:center; padding: 8px var(--pad) 18px; }
.hero-inner{ text-align:center }
.hero .header-wedo-img{ margin-inline:auto; display:block }

/* Mobile menu vertical layout */
@media (max-width: 859px){
  .menu.open{ display:flex; flex-direction:column; gap:8px }
}

/* Mobile fixes: avoid overlap, add auto-hide */
@media (max-width: 859px){
  .top-nav{ position: static; width:auto; margin: 8px var(--pad); }
  .section{ scroll-margin-top: 92px; } /* anchor offset under hidden/revealed header */
}
.sticky-auto{ position: sticky; top:0; z-index:20; transition: transform .25s ease; }
.sticky-auto.is-hidden{ transform: translateY(-110%); }

/* Mobile drawer menu + backdrop */
@media (max-width: 859px){
  .top-nav{ position: static; width:auto; margin: 8px var(--pad); }
  .menu{ display:none; }
  .menu.open{ 
    display:flex; flex-direction:column; gap:10px; 
    position: fixed; left:0; right:0; top: calc(64px + 16px); /* header approx */
    background: linear-gradient(180deg, rgba(16,18,20,.98), rgba(16,18,20,.98));
    border-top: 1px solid var(--line);
    padding: 12px 16px 16px;
    z-index: 50;
  }
  .menu a{ padding: .9rem 1rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04) }
  .menu-toggle{ display:block; }
  .nav-backdrop{
    position: fixed; inset:0;
    background: rgba(0,0,0,.35);
    z-index: 40;
  }
  body:not(.nav-open) .nav-backdrop{ display:none }
  body.nav-open{ overflow:hidden } /* prevent background scroll */
  .section{ scroll-margin-top: 92px; }
}

/* v8: Strong mobile drawer + bigger hero */
@media (max-width: 859px){
  .hero .header-wedo-img{ width: min(96vw, 820px); }
  .neon-under-wedo{ width: min(96vw, 860px); }

  .top-nav{ position: static; width:auto; margin: 8px var(--pad); }
  .top-nav .menu{ display:none !important; }
  .top-nav .menu.open{
    display:flex !important; flex-direction:column; gap:10px;
    position: fixed; left:0; right:0;
    /* top set dynamically by JS *//
    background: linear-gradient(180deg, rgba(16,18,20,.98), rgba(16,18,20,.98));
    border-top: 1px solid var(--line);
    padding: 12px 16px 16px;
    z-index: 50;
  }
  .top-nav .menu a{ padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04) }
  .nav-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,.35); z-index: 40; }
  body:not(.nav-open) .nav-backdrop{ display:none }
  body.nav-open{ overflow:hidden }
  .section{ scroll-margin-top: 96px; }
}

/* v9: Mobile CTA + centered hero crop */
@media (max-width: 859px){
  /* Layout row: CTA grows, menu toggle compact */
  .top-nav{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px; }
  .menu-cta{ display:inline-block; text-align:center; background: var(--accent); color:#000; font-weight:900; border-radius:12px; padding:.7rem 1rem; }
  .menu-toggle{ width:44px; height:44px; padding:0; border-radius:10px; border:1px solid var(--line); background:#121418; font-weight:800; }

  /* Hide duplicate CTA inside drawer on mobile */
  .menu a.book-cta{ display:none !important; }

  /* Hero image: smaller (~-10%) and center-cropped */
  .hero .header-wedo-img{
    width: min(86vw, 760px);
    height: clamp(160px, 34vw, 260px);
    object-fit: cover;
    object-position: center center;
    display:block; margin-inline:auto;
  }
  .neon-under-wedo{ width: min(86vw, 800px); }
}

/* Hide outside CTA by default (desktop); shown on mobile via media query) */
.menu-cta{ display:none }

@media (min-width: 860px){
  .menu a.book-cta{
    display:inline-block;
    background: var(--accent);
    color:#000;
    font-weight:900;
    border-radius:12px;
    padding:.6rem .9rem;
    border: none;
  }
}

@media (max-width: 859px){
  .hero .header-wedo-img{
    object-position: 50% 45%;
    height: clamp(200px, 40vw, 300px);
    width: min(90vw, 820px);
  }
  .neon-under-wedo{ width: min(90vw, 860px); }
}

/* Hero CTA */
.hero-cta{
  display:inline-block;
  background: var(--accent);
  color:#000;
  font-weight:900;
  border-radius: 14px;
  padding:.85rem 1.15rem;
  border: none;
  box-shadow: 0 10px 28px rgba(0,170,255,.25), inset 0 0 0 1px rgba(255,255,255,.12);
}
.hero-cta:hover{ filter:brightness(1.06) }
.hero-cta:active{ transform: translateY(1px) }
.hero-inner{ display:grid; justify-items:center; gap:12px }

/* v11: Robust mobile menu + button layout */
.menu-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:.55rem .8rem; border-radius:12px;
  border:1px solid var(--line); background:#121418; color:var(--fg);
  font-weight:800; cursor:pointer;
}
.menu-toggle .menu-ico{ width:22px; height:22px; display:block }
.menu-toggle .menu-text{ line-height:1 }

/* Backdrop & drawer z-index */
.nav-backdrop{ z-index: 90; }
@media (max-width: 859px){
  .top-nav .menu.open{ z-index: 100; }
}

/* v11: Mobile menu button + minimal bar */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.menu-toggle{ display:grid; place-items:center; gap:0 }
.menu-toggle .burger-ico{ width:22px; height:22px; fill: currentColor }

@media (max-width: 859px){
  /* Make the nav just a small row with button; remove big pill container */
  .top-nav{
    background: transparent; border:0; box-shadow:none;
    margin: 8px var(--pad) 0; padding: 0;
  }
  .menu-toggle{
    width:44px; height:44px; padding:0;
    border-radius:12px; border:1px solid var(--line); background:#121418; color:#eef2f4;
    box-shadow: 0 6px 14px rgba(0,0,0,.35);
  }
  /* Drawer panel */
  .top-nav .menu{ display:none !important; }
  .top-nav .menu.open{
    display:flex !important; flex-direction:column; gap:10px;
    position: fixed; left:0; right:0;
    /* top is set by JS (header height + 12px) */
    background: linear-gradient(180deg, rgba(16,18,20,.98), rgba(16,18,20,.98));
    border-top: 1px solid var(--line);
    padding: 12px 16px 16px;
    z-index: 60;
  }
  .top-nav .menu a{ padding:.9rem 1rem; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.04) }
  .nav-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,.35); z-index: 50; }
  body:not(.nav-open) .nav-backdrop{ display:none }
  body.nav-open{ overflow:hidden }
  .section{ scroll-margin-top: 96px; }
}

/* v12: Desktop navbar cleanup */
@media (min-width: 860px){
  .menu-toggle{ display:none !important; }
  .nav-backdrop{ display:none !important; }
  .top-nav{
    position: sticky; top:110px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid var(--line); border-radius:14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
    margin: 0 auto 14px; padding:8px;
    width: min(1200px, calc(100% - 2*var(--pad)));
  }
  .top-nav .menu{
    display:flex !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    gap: 18px;
    align-items: center;
    justify-content: center;
  }
}

/* SEO H1 styling */
.page-title{
  text-align:center;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem);
  line-height:1.2;
  margin: 8px auto 10px;
  letter-spacing: .2px;
}

@media (max-width: 859px){ html{  } }

#cta_whatsapp{ color:#000 !important; }

:target::before {
  content: "";
  display: block;
  height: 140px; /* height of fixed header */
  margin-top: -140px;
}
@media (max-width: 859px){
  :target::before {
    height: 100px;
    margin-top: -100px;
  }
}


/* ---- Anchor offset fix ---- */
:root{ --anchor-offset: 140px; }
@media (max-width: 859px){
  :root{ --anchor-offset: 100px; }
}
/* Ensure sections/blocks respect fixed header when scrolled via #hash */
section[id], [id].anchor, [data-anchor="true"]{
  scroll-margin-top: var(--anchor-offset);
}


/* === Mobile: remove top nav/burger/backdrop (2025-08-13) ================= */
@media (max-width: 859px){
  :root{ --anchor-offset: 80px; } /* a bit smaller now that top bar is gone */
  .top-nav, .menu-toggle, .nav-backdrop, .top-nav .menu { display: none !important; }
  .top-nav .menu.open { display: none !important; }
  body.nav-open { overflow: auto !important; }
}

/* Map embed */
.map-embed{ position:relative; width:100%; padding-top: 56.25%; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px }