/* AquaRaíz — Estilos base */
:root{
  --tint-blue: rgba(14,165,233,.28);
  --tint-green: rgba(34,197,94,.28);
  --tint-blue-strong: rgba(14,165,233,.42);
  --tint-green-strong: rgba(34,197,94,.42);
  --primary:#0ea5e9;  /* azul piscina */
  --primary-dark:#0284c7;
  --accent:#22c55e;   /* verde jardín */
  --accent-dark:#16a34a;
  --ink:#0f172a;      /* gris azulado profundo */
  --muted:#64748b;    /* texto secundario */
  --bg:#f8fafc;       /* fondo */
  --card:#ffffff;
  --ring: rgba(14,165,233,.35);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(2,8,23,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}

.container{max-width:1160px; margin:0 auto; padding:0 20px}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--primary); color:white; border:none;
  padding:.9rem 1.2rem; border-radius:999px; font-weight:600;
  text-decoration:none; box-shadow:var(--shadow);
}
.btn:hover{background:var(--primary-dark)}
.btn.outline{background:transparent; color:var(--primary); border:2px solid var(--primary)}
.btn.outline:hover{background:var(--primary); color:white}
.btn.accent{background:var(--accent)}
.btn.accent:hover{background:var(--accent-dark)}

nav.site{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background:rgba(255,255,255,.8); border-bottom:1px solid #e2e8f0;
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:.1rem 0}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none}
.brand img{height:80px; width:auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.418));}
.brand span{font-weight:800; letter-spacing:.2px; color:var(--ink)}

.menu{display:flex; gap:1rem; align-items:center}
.menu a{color:var(--ink); text-decoration:none; font-weight:600; padding:.5rem .7rem; border-radius:10px}
.menu a:hover{background:#e2f2ff}

.burger{display:none; background:transparent; border:none; font-size:1.6rem}

.hero{
  background: linear-gradient(135deg, var(--tint-blue-strong), var(--tint-green-strong));
  padding: 72px 0 56px;
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(28px, 4vw, 48px); line-height:1.1; margin:.4rem 0 1rem}
.hero p{color:var(--muted); font-size:1.05rem}
.hero-card{
  background:var(--card); border-radius:var(--radius); padding:1.2rem; box-shadow:var(--shadow);
  display:grid; gap:.8rem; border:1px solid #e2e8f0;
}
.section{padding:64px 0}
.section h2{font-size: clamp(24px, 3vw, 36px); margin:0 0 1rem}
.lead{color:var(--muted); max-width:70ch}

.grid{
  display:grid; gap:1.2rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.card{
  background:var(--card); padding:1.1rem; border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid #e2e8f0; display:flex; flex-direction:column; gap:.7rem;
}
.card .icon{height:80px; width:80px; border-radius:14px; display:grid; place-items:center; background:var(--tint-blue); place-self: center;}
.card h3{margin:.2rem 0; place-self: center;}
.card p{color:var(--muted); margin:0 0 .6rem}
.card .actions{margin-top:auto; display:flex; gap:.6rem; flex-wrap:wrap}

.pricing{display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(0,1fr))}
.price-card{border:1px solid #e2e8f0; border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:1.2rem}
.price-card h3{margin:.2rem 0}
.price{font-size:2rem; font-weight:800}
.features{list-style:none; padding:0; margin:.8rem 0; display:grid; gap:.4rem}
.features li{display:flex; gap:.5rem; align-items:flex-start}
.features li:before{content:"✓"; font-weight:800; color:var(--accent)}

.gallery{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.7rem}
.gallery img{width:100%; height:180px; object-fit:cover; border-radius:14px; border:1px solid #e2e8f0;}

.contact{display:grid; grid-template-columns:1.2fr .8fr; gap:1.2rem}
.form{
  background:var(--card); padding:1rem; border:1px solid #e2e8f0; border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.input, textarea{
  width:100%; padding:.9rem 1rem; border:1px solid #cbd5e1; border-radius:12px; outline:none;
}
.input:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
label{font-weight:600; font-size:.95rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}

footer{
  margin-top:56px; padding:26px 0; background:#0b1220; color:#cbd5e1; font-size:.95rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
footer a{color:#e2f2ff; text-decoration:none}
footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem}

.whatsapp{
  position: fixed; right:18px; bottom:18px; z-index:60;
  background:#25D366; border-radius:999px; padding:.8rem 1rem; color:white; text-decoration:none; font-weight:700;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.badge{display:inline-block; background:#e7f9ef; color:#0f5132; padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.75rem; border:1px solid #a7f3d0}

/* ---- Responsive ---- */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
  .menu{display:none; flex-direction:column; align-items:flex-start; padding:.6rem 0}
  .menu.open{display:flex}
  .burger{display:inline-block}
}


/* --- Shop (tienda) styles --- */
.plan-grid{display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top:1rem}
.plan{border:1px solid #e2e8f0; border-radius:var(--radius); background:var(--card); box-shadow:var(--shadow); padding:1rem}
.plan h4{margin:.2rem 0}
.plan .price{font-size:1.6rem; font-weight:800; margin:.2rem 0}
.plan small{color:var(--muted)}
.plan .features{margin:.6rem 0}
.plan.recommended{outline:3px solid var(--ring)}

.shop-grid{display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top:1rem}
.product-card{
  border:1px solid #e2e8f0; 
  border-radius:var(--radius); 
  background:var(--card); 
  box-shadow:var(--shadow); 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover{
  transform:translateY(-4px); 
  box-shadow:0 12px 24px rgba (0, 0, 0, 0.12);
}
.product-card img{
  width:100%; 
  height:220px; 
  object-fit:cover; 
  object-position: center; 
  border-bottom: 1px solid #e2e8f0;}
.product-body{
  padding:1rem; 
  display:flex; 
  flex-direction:column; 
  flex: 1;}
.product-title{font-weight:700; margin:0}
.price-tag{font-weight:800; font-size:1.1rem}
.badge.sm{font-size:.68rem; padding:.18rem .5rem}
.product-actions{
  display:flex; 
  gap:.6rem; 
  margin-top: auto; 
  flex-wrap:wrap
}

@media (max-width:980px){
  .plan-grid{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr}
}


/* --- Theme switcher --- */
.theme-switch{
  display:inline-flex; gap:.2rem; background:rgba(2,8,23,.06);
  border:1px solid #e2e8f0; border-radius:999px; padding:.2rem;
  align-items:center; margin-left:.5rem;
}
.theme-switch button{
  background:transparent; border:none; padding:.35rem .6rem; border-radius:999px; font-weight:700; cursor:pointer;
}
.theme-switch button.active{ background:var(--primary); color:white; }
.theme-switch button:not(.active){ color:var(--ink) }

/* --- Light/Dark themes --- */
:root[data-theme="dark"]{
  --bg:#0b1220;
  --card:#0f172a;
  --ink:#e5e7eb;
  --muted:#94a3b8;
  --primary:#38bdf8;
  --primary-dark:#0ea5e9;
  --accent:#34d399;
  --accent-dark:#10b981;
  --ring: rgba(56,189,248,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --tint-blue: rgba(56,189,248,.22);
  --tint-green: rgba(52,211,153,.22);
  --tint-blue-strong: rgba(56,189,248,.32);
  --tint-green-strong: rgba(52,211,153,.32);
}
:root[data-theme="dark"] nav.site{ background: rgba(15,23,42,.7); border-bottom:1px solid rgba(255,255,255,.06) }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .form,
:root[data-theme="dark"] .price-card{ border-color: rgba(255,255,255,.08) }
:root[data-theme="dark"] .menu a:hover{ background: rgba(56,189,248,.12) }
:root[data-theme="dark"] footer{ background:#050a16; border-top-color: rgba(255,255,255,.06) 
}
/* Modal general */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.6); z-index: 1000; }

/* Contenedor del contenido */
.modal-content { background: var(--card); border-radius: 12px; max-width: 780px; width: 92%; padding: 1.2rem; position: relative; }
.modal-media{
  position: relative; width: 100%; height: 320px;
  overflow: hidden; background: #f1f5f9; border-radius: 10px;
}

.modal-content img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  max-height: 260px;
}

.modal-content h3 {
  margin-top: 1rem;
}

.modal-content p {
  margin: .6rem 0;
  color: var(--text);
}

.modal-content .price {
  font-weight: bold;
  margin-top: .5rem;
  color: var(--accent);
}

.modal-close { position: absolute; top: 8px; right: 12px; cursor: pointer; font-size: 1.6rem; }
.modal-media .slides{ position: relative; width: 100%; height: 100%; }
.modal-media .slide{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: 0; transition: opacity .35s ease;
}
.modal-media .slide.active{ opacity: 1; }

.modal-media .nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff; border: 0; width: 36px; height: 36px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; opacity: .9;
}
.modal-media .nav.prev{ left: 10px; }
.modal-media .nav.next{ right: 10px; }

.modal-media .dots{
  position: absolute; left: 0; right: 0; bottom: 10px;
  display: flex; justify-content: center; gap: 6px;
}
.modal-media .dots button{ width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.65); cursor: pointer; }
.modal-media .dots button.active{ background: #fff; }

:root[data-theme="dark"] .modal-content{ background:#0f172a; }
:root[data-theme="dark"] .modal-media{ background:#0b1220; }
@keyframes popupFade {
  from {opacity: 0; transform: scale(0.9);}
  to {opacity: 1; transform: scale(1);}
}
/* --- Slider dentro del product-card --- */
.product-media{
  position: relative;
  width: 100%;
  height: 200px;            /* misma altura que ya usas para tus imágenes */
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

.product-media .slides{
  position: relative;
  width: 100%; height: 100%;
}

.product-media .slide{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0; transition: opacity .35s ease;
}

.product-media .slide.active{ opacity: 1; }

/* Flechas */
.product-media .nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff;
  border: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  opacity: .85; transition: opacity .2s ease;
}
.product-media .nav:hover{ opacity: 1; }
.product-media .nav.prev{ left: 8px; }
.product-media .nav.next{ right: 8px; }

/* Dots */
.product-media .dots{
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: flex; justify-content: center; gap: 6px;
}
.product-media .dots button{
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.7); cursor: pointer;
}
.product-media .dots button.active{ background: #fff; }

/* Dark mode friendly */
:root[data-theme="dark"] .product-media{ background: #0f172a; border-bottom-color: rgba(255,255,255,.08); }
:root[data-theme="dark"] .product-media .nav{ background: rgba(0,0,0,.55); }
/* --- Cierres Perimetrales: mega-card con slider + formulario --- */
.mega-card{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  background: var(--card);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  margin-top: 1.2rem;
}

/* Slider */
.closer-media{
  position: relative; width: 100%; height: 420px;
  overflow: hidden; background: #f1f5f9; border-radius: 14px;
}
.closer-media .slides{ position: relative; width: 100%; height: 100%; }
.closer-media .slide{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; opacity: 0; transition: opacity .35s ease;
}
.closer-media .slide.active{ opacity: 1; }

.closer-media .nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff; border: 0; width: 38px; height: 38px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; opacity: .95;
}
.closer-media .nav.prev{ left: 10px; }
.closer-media .nav.next{ right: 10px; }

.closer-media .dots{
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 6px;
}
.closer-media .dots button{
  width: 8px; height: 8px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.65); cursor: pointer;
}
.closer-media .dots button.active{ background: #fff; }

/* Formulario */
.closer-form h3{ margin:.2rem 0 }
.closer-form .row{ display:grid; grid-template-columns: 1fr 1fr; gap:.8rem }
.closer-form .input, .closer-form textarea{ width:100% }
.closer-form .actions .btn img{ height:18px; width:18px; margin-left:.4rem }

/* Dark mode */
:root[data-theme="dark"] .mega-card{ border-color: rgba(255,255,255,.08) }
:root[data-theme="dark"] .closer-media{ background:#0b1220 }
:root[data-theme="dark"] .closer-media .nav{ background: rgba(0,0,0,.55) }

/* Responsive */
@media (max-width: 980px){
  .mega-card{ grid-template-columns: 1fr; }
  .closer-media{ height: 280px; }
  .closer-form .row{ grid-template-columns: 1fr; }
}