/* Base */
*{box-sizing:border-box}
html,body{margin:0}
:root{
  --bg:#f5f6f7;
  --surface:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --brand:#0ea5a4;
  --brand-dark:#0b7f7e;
  --ring:rgba(14,165,164,.15);
  --shadow:0 10px 30px rgba(2,8,20,.06);
}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{color:inherit;text-decoration:none}
img{
    width: 94%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  margin: 10px;
  object-position: center;}
.container{max-width:1140px;margin:0 auto;padding:20px}

/* Header / Nav */
.header{position:sticky;top:0;z-index:40;background:#0f172a;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;gap:16px;padding:40px 16px}
.brand{
    width: 100px;
    height: 100px;
    background: url('/assets/logo.png');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;}
.nav .spacer{flex:1}
.menu{display: flex;
  flex-wrap: wrap;}
.menu a{opacity:.9;padding:8px 10px;border-radius:10px}
.menu a.active,.menu a:hover{opacity:1;background:rgb(80, 199, 213)}
.hamburger{display:none;cursor:pointer;border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:10px;background:transparent;color:#fff}

/* Hero */
.heroHome {
  position: relative;
  background:url('/assets/banner.jpg') no-repeat;
  color: #fff;
  background-size:cover;
  background-position: center;
  width: 100%;
  aspect-ratio: 2.4 / 1;
}
.hero {
  position: relative;
  background:url('/assets/banner.jpg') no-repeat;
  color: #fff;
  background-size:cover;
  background-position-x: center;
  background-position-y: 64%;
  width: 100%;
  aspect-ratio: 12 / 1;
}
.hero .home {
  text-align: center;
  width: 100%;
  aspect-ratio: 2.4 / 1;
}
.hero .wrap {
  text-align: center;
  width: 100%;
  aspect-ratio: 12 / 1;
  transform-y:20%;
}
.hero h1 {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  text-shadow: 0 3px 8px rgba(0,0,0,0.5);
  bottom: -6px;
  position: absolute;
  text-align: center;
  width: 100%;
  left: 0;
}

/* Layout */
.section{background:var(--surface);border-radius:16px;padding:22px;box-shadow:var(--shadow)}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:1.2fr 1fr}
.grid.cards-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;border:1px solid #e5e7eb}
.card .p{padding:12px;font-weight:600;text-align:center}
hr.sep{border:none;border-top:1px solid #e5e7eb;margin:18px 0}
.notice{background:#eef7f6;border:1px solid #cfeeed;border-radius:14px;padding:14px}

/* Footer */
.footer{margin-top:44px;background:#0f172a;color:#e5e7eb}
.footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.footer a{color:#c7d2fe;text-decoration:underline}
.footer small{opacity:.9}
.badge{width:120px;height:120px;border-radius:999px;border:3px solid #16a34a;display:flex;align-items:center;justify-content:center;color:#16a34a;font-weight:700;margin:8px 0}

/* Floating social */
.floating{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:12px;z-index:50}
.floating a{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--shadow)}
.insta{background:url('/assets/instagram.png');background-size:cover;}
.whatsapp{background:url('/assets/whatsapp.png');background-size:cover;}

/* --- Dropdown --- */
.dropdown { position: relative; }
.dropbtn{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px; border-radius:10px;
  background:transparent; color:#fff; border:1px solid transparent;
  cursor:pointer; font: inherit;
}
.dropdown.active .dropbtn,
.dropbtn:hover{ background:rgb(80,199,213); }
.dropbtn:focus{ outline:2px solid var(--ring); outline-offset:2px; }

.chev{ transition: transform .18s ease; }
.dropdown.open .chev{ transform: rotate(180deg); }

.submenu{
  position:absolute; top: calc(100% + 8px); left:0; min-width:300px;
  background: var(--surface); color: var(--text);
  border:1px solid #e5e7eb; border-radius:12px; box-shadow: var(--shadow);
  padding:10px; display:none; flex-direction:column; gap:4px; z-index:60;
}
.dropdown.open .submenu{ display:flex; }
.submenu a{
  padding:10px 12px; border-radius:10px;
}
.submenu a:hover, .submenu a.active{
  background: #eef7f6;
}

/* Desktop hover (optional nicety) */
@media (hover:hover){
  .dropdown:hover .submenu{ display:flex; }
}

/* --- Mobile dropdown behavior (inside hamburger) --- */
@media (max-width:640px){
  .dropdown{ width:100%; }
  .dropbtn{
    width:100%; justify-content:space-between;
    border:1px solid rgba(255,255,255,.25);
    background:transparent; color:#fff;
  }
  .submenu{
    position:static; background:transparent; color:#fff;
    border:none; box-shadow:none; padding:6px 0; display:none;
  }
  .submenu a{
    padding:10px; border-radius:10px;
    background: rgba(255,255,255,.06);
  }
  .submenu a:hover, .submenu a.active{
    background: rgba(255,255,255,.12);
  }
  .nav.open .dropdown.open .submenu{ display:flex; }
}

/* Responsive */
@media (max-width:980px){
  .grid.cols-2{grid-template-columns:1fr}
  .grid.cards-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid.cards-3{grid-template-columns:1fr}
  .hamburger{display:block;margin-left:auto;position:absolute;top:10px;right:10px;}
  .menu{display:none;width:100%;padding-top:10px;gap:2px;}
  .nav.open .menu{display:flex;flex-direction:column;gap:8px;z-index: 1;padding: 30px;}
  .brand{scale: 0.6;
    position: absolute;
    top: -8px;
    left: 0;}
}