@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;800&display=swap');
:root{
  --ink:#0F3B4F; --muted:#4A6877; --bg:#FBFDFE; --aqua:#1D9CC7; --aqua-d:#167EA3;
  --foam:#E6F4F9; --lemon:#7AA424; --line:#D3E5EE; --red:#C0392B;
  --font:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
.wrap{width:min(1080px,92%);margin:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--aqua);outline-offset:2px}

/* nav */
#nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav-in{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0}
.logo{display:block;line-height:0}
.logo img{border-radius:50%;display:block}
.flogo{border-radius:50%;background:#fff}
nav{display:flex;gap:.3rem}
nav a{padding:.45rem .9rem;border-radius:99px;text-decoration:none;font-weight:600}
nav a:hover{background:var(--foam)}
nav a[aria-current]{background:var(--ink);color:#fff}

/* botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--aqua-d);color:#fff;border:2px solid var(--aqua-d);padding:.7rem 1.3rem;border-radius:99px;font:600 1rem var(--font);text-decoration:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--ink);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-light{background:var(--lemon);color:#fff;border-color:var(--lemon)}
.btn-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-wa{background:#1FA855;border-color:#1FA855}
.btn-sm{padding:.35rem .9rem;font-size:.9rem}
.btn-danger{background:var(--red);border-color:var(--red)}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--foam);padding:6rem 0 5.5rem}
.hero h1{font-size:clamp(2.8rem,8vw,5.6rem);line-height:1;font-weight:800;letter-spacing:-.04em}
.lead{max-width:34rem;font-size:1.2rem;color:var(--muted);margin-top:1.4rem}
.bub{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.35) 60%,rgba(29,156,199,.25));border:2px solid rgba(255,255,255,.8);animation:float 7s ease-in-out infinite}
.hero-logo{position:absolute;right:7%;top:50%;width:min(340px,30vw);aspect-ratio:1;border-radius:50%;box-shadow:0 20px 50px rgba(15,59,79,.18);animation:float 7s ease-in-out infinite}
.b1{display:none}
.b2{width:110px;height:110px;right:26%;bottom:8%;animation-delay:-2s}
.b3{width:60px;height:60px;right:4%;bottom:18%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-14px)}}
.hero-logo{margin-top:-170px;transform:none}

/* secciones */
.sec{padding:4.5rem 0}
h2{font-size:2rem;letter-spacing:-.02em;margin-bottom:1rem}
.h1s{font-size:2.6rem;letter-spacing:-.03em;line-height:1.1;margin-bottom:.8rem}
p+p{margin-top:1rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.facts{list-style:none;padding:0;display:grid;gap:1rem}
.facts li{border-left:5px solid var(--lemon);padding:.2rem 0 .2rem 1rem}
.facts b{display:block;font-size:1.1rem}.facts span{color:var(--muted)}
.band{background:var(--ink);color:#fff}
.band p{margin-bottom:1.5rem;color:#CFE3E7}
.band .btn{background:var(--lemon);border-color:var(--lemon);color:#fff}
.band .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.center{text-align:center}
.two .btn{margin-top:1.4rem}

/* productos */
.bar{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
.bar .actions{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.4rem}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.prod img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--foam)}
.prod .body{padding:1rem 1.1rem 1.2rem}
.prod h3{font-size:1.15rem}
.prod p{color:var(--muted);font-size:.95rem;margin:.3rem 0 .6rem}
.price{font-size:1.2rem}
.prod .actions{margin-top:.9rem}
.empty{grid-column:1/-1;color:var(--muted);padding:2rem 0}

/* formularios */
.form{display:grid;gap:1rem}
.card.form{padding:1.6rem}
label{display:grid;gap:.3rem;font-weight:600}
input,textarea{font:inherit;padding:.65rem .8rem;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--aqua);outline:none}
small{color:var(--muted)}
.err{color:var(--red);font-weight:600}
dialog{border:none;border-radius:16px;padding:1.6rem;width:min(440px,92%);box-shadow:0 20px 60px rgba(16,48,58,.3)}
dialog::backdrop{background:rgba(16,48,58,.55)}
dialog .actions{margin-top:.4rem}
#prev{width:100%;max-height:180px;object-fit:cover;border-radius:10px}

/* footer */
footer{background:var(--ink);color:#CFE3E7;padding-top:2.5rem}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.foot-ig{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-weight:600;color:#fff}
.copy{text-align:center;font-size:.85rem;padding:1.6rem 0;opacity:.7}

@media(max-width:760px){
  .two{grid-template-columns:1fr;gap:2rem}
  .hero{padding:4rem 0}.hero-logo{display:none}
  .nav-in{flex-direction:column;gap:.5rem}
}
@media(prefers-reduced-motion:reduce){.bub,.hero-logo{animation:none}}