:root{
  --brand:#18a999; /* verde agua */
  --brand-2:#136f63;
  --accent:#ffc857; /* dorado coco */
  --dark:#0f172a;
  --muted:#64748b;
  --bg:#f8fafc;
  --card:#ffffff;
  --ring: rgba(24,169,153,.3);
  --red:#ef4444;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--dark); background:var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Header */
header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e2e8f0;
  backdrop-filter:saturate(180%) blur(8px);
}
.nav{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px;}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none}
.logo {
  width:36px;
  height:36px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:800;
}
.brand span{font-weight:800; color:var(--brand-2)}
nav ul{list-style:none; display:flex; gap:10px; padding:0; margin:0}
nav a{display:inline-block; text-decoration:none; color:var(--dark); padding:10px 12px; border-radius:10px; font-weight:600}
nav a:hover{background:#f1f5f9}
nav a.active{background:var(--brand); color:#fff}
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;  nav a:hover{background:#f1f5f9}
  nav a.active{background:var(--brand); color:#fff}
  border: none;
  cursor: pointer;
  z-index: 1100;
}
.menu-toggle span {
  display: block;
  height: 4px;
  width: 28px;
  background: var(--brand-2);
  border-radius: 2px;
  transition: .3s;
}
@media (max-width: 900px) {
  .nav, 
  .footer {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}
.nav, .footer {
  max-width: none;
  width: 80%;
}

@media (max-width:900px){
  .nav {
    flex-wrap: wrap;
  }
  nav ul {
    position: absolute;
    top: 60px;
    right: 20px;
    background: #fff;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 12px 0;
    min-width: 220px; /* más ancho para mejor toque */
    display: none;
    z-index: 1001;
  }
  nav ul.open {
    display: flex;
  }
  nav ul li {
    width: 100%;
  }
  nav a {
    display: block; /* hace que el enlace ocupe todo el ancho */
    width: 100%;
    padding: 16px 28px;
    border-radius: 0;
    font-size: 18px;
    color: var(--dark);
    transition: background .2s, color .2s;
  }
  nav a.active,
  nav a:hover {
    background: var(--brand);
    color: #fff;
  }
  .menu-toggle {
    display: flex;
    margin-left: auto;
  }
}

/* Hero */
.hero{max-width:1200px; margin:0 auto; padding:56px 20px 24px; display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.hero h1{font-size:clamp(28px,4vw,44px); margin:0 0 14px; line-height:1.1}
.hero p{color:var(--muted); font-size:clamp(15px,2vw,18px)}
.cta{display:flex; gap:12px; margin-top:18px}
.btn{appearance:none; border:0; background:var(--brand); color:#fff; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer}
.btn.alt{background:#fff; color:var(--brand-2); border:2px solid var(--brand);}
.hero .img{aspect-ratio:4/3; background:linear-gradient(45deg,#fff, #e2f7f4); border-radius:18px; overflow:hidden; display:grid; place-items:center; border:1px solid #e2e8f0}
.hero .img span{font-size:14px; color:var(--muted)}

/* Sections */
section{scroll-margin-top:84px}
section,
[id] {
  scroll-margin-top: 110px; /* Ajusta según la altura real de tu header */
}
.wrap{max-width:1200px; margin:0 auto; padding:40px 20px}
.title{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.title h2{margin:0; font-size:28px}
.subtitle{color:var(--muted); margin-top:6px}

/* Cards */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--card); border:1px solid #e2e8f0; border-radius:16px; padding:18px}
.card h3{margin:0 0 8px}
.tag{display:inline-block; padding:4px 8px; border-radius:999px; background:#ecfeff; color:var(--brand-2); font-size:12px; font-weight:700; border:1px solid #cffafe}

/* Products list */
.list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.li{background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px}

/* FAQ */
details{background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px; margin-bottom:10px}
summary{cursor:pointer; font-weight:700}

 
input, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #cbd5e1; outline:0}
input:focus, textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
label{font-size:14px; font-weight:600}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:12px}

/* Footer */
footer{margin-top:40px; background:#0b1220; color:#cbd5e1}
.footer{max-width:1200px; margin:0 auto; padding:26px 20px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px}
.footer a{color:#e2e8f0; text-decoration:none}
.copy{border-top:1px solid #172033; padding:12px 20px; text-align:center; font-size:12px; color:#94a3b8}

/* Floating WhatsApp */
.wa {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #25d366;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
  z-index: 1000;
  transition: box-shadow .2s;
}
.wa:hover {
  box-shadow: 0 4px 24px rgba(37,211,102,0.4);
  background: #22c35e;
}
.wa svg {
  display: block;
  width: 32px;
  height: 32px;
}

/* Slider */
.slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(45deg,#fff, #e2f7f4);
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  padding-bottom: 36px; /* espacio para los puntos */
}
.slides {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform .4s;
  position: absolute;
  top: 0; left: 0;
}
.slide {
  min-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  background: none;
  display: block;
}
.dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  width: 100%;
  display: flex;
  gap: 8px;
  justify-content: center;
  z-index: 2;
}
.dots label {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  display: inline-block;
  transition: background .2s;
}
#slide1:checked ~ .slides { transform: translateX(0%); }
#slide2:checked ~ .slides { transform: translateX(-100%); }
#slide3:checked ~ .slides { transform: translateX(-200%); }
#slide1:checked ~ .dots label[for="slide1"],
#slide2:checked ~ .dots label[for="slide2"],
#slide3:checked ~ .dots label[for="slide3"] {
  background: var(--brand);
}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding-top:24px}
  .grid{grid-template-columns:1fr}
  .list{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  nav ul{gap:4px}
  nav a{padding:8px 10px}
  .nav {
    flex-wrap: wrap;
  }
  nav ul {
    position: absolute;
    top: 60px;
    right: 20px;
    background: #fff;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border-radius: 12px;
    padding: 12px 0;
    min-width: 220px; /* más ancho para mejor toque */
    display: none;
    z-index: 1001;
  }
  nav ul.open {
    display: flex;
  }
  nav ul li {
    width: 100%;
  }
  nav a {
    display: block; /* hace que el enlace ocupe todo el ancho */
    width: 100%;
    padding: 16px 28px;
    border-radius: 0;
    font-size: 18px;
    color: var(--dark);
    transition: background .2s, color .2s;
  }
  nav a.active,
  nav a:hover {
    background: var(--brand);
    color: #fff;
  }
  .menu-toggle {
    display: flex;
    margin-left: auto;
  }
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
footer {
  flex-shrink: 0;
}

.logo-img {
  //width: 100px;
  height: 100px;
  border-radius: 50px;
  //padding: 10px;
  object-fit: contain;  @media (max-width:900px){
    ...
    nav a.active,
    nav a:hover {
      background: var(--brand);
      color: #fff;
    }
    ...
  }
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  display: block;
}
section#servicios {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
 

.row-button-product
{
	width: 100%;
    position: relative;
    z-index: 9999;
    display: flex;  
	align-items: center;
    justify-content: space-between;
}
.button-product
{
	color: #fff;
    font: 1em ;
    padding: 8px 0;
    border-radius: 30px;
    display: table;
    align-items: center;
    margin-top: 5px;
    background: #0989DA;
    cursor: pointer;
    width: 37%;
    text-align: center;
}

span.button-product 
{
    display: none;
}