/* ============================================================
   AKUATICO — Landing Page
   ============================================================ */

:root{
  --navy-950: #081527;
  --navy-900: #0d2038;
  --navy-800: #14304f;
  --blue-700: #1c3f72;
  --blue-500: #3d6fa8;
  --blue-300: #7fadd8;
  --sand-50:  #f8f4ec;
  --sand-100: #f0e9da;
  --sand-200: #e4d9c3;
  --stone-600:#6d6455;
  --gold-500: #cf8a4c;
  --gold-400: #e2a768;
  --ink-900:  #16211f;
  --white:    #ffffff;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-w: 1240px;
  --radius: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--sand-50);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; font-weight:600; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.container{
  width:100%;
  max-width: var(--container-w);
  margin:0 auto;
  padding: 0 24px;
}

.icon{ width:20px; height:20px; fill:currentColor; flex-shrink:0; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight:700;
  font-size:.95rem;
  border:1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--lg{ padding: 1.05rem 2rem; font-size:1.02rem; }
.btn--full{ width:100%; justify-content:center; }

.btn--whatsapp{
  background:#25D366;
  color:#0b2b16;
  box-shadow: 0 8px 24px -8px rgba(37,211,102,.6);
}
.btn--whatsapp:hover{ background:#22c15e; }
.btn--whatsapp .icon{ width:18px; height:18px; }

.btn--ghost{
  background: rgba(255,255,255,.08);
  color:#fff;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{ background: rgba(255,255,255,.18); }

.btn--outline-light{
  background:transparent;
  color:#fff;
  border-color: rgba(255,255,255,.4);
}
.btn--outline-light:hover{ background:#fff; color: var(--navy-950); }

.btn--dark{
  background: var(--navy-950);
  color:#fff;
}
.btn--dark:hover{ background: var(--blue-700); }

.btn--gold{
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
  color:#241304;
  box-shadow: 0 10px 28px -10px rgba(207,138,76,.65);
}
.btn--gold:hover{ filter:brightness(1.05); }

/* ---------- Nav ---------- */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  padding: 18px 0;
  transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.is-scrolled{
  background: rgba(8,21,39,.85);
  backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 6px 24px -12px rgba(0,0,0,.4);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand{ display:flex; align-items:center; }
.nav__logo{
  height: 40px; width:auto;
  padding: 10px 16px;
  background: rgba(255,255,255,.94);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: height .3s var(--ease);
}
.nav.is-scrolled .nav__logo{ height:32px; }

.nav__links{
  display:flex;
  gap: 2rem;
  flex:1;
  justify-content:center;
}
.nav__links a{
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.01em;
  position:relative;
  padding: 4px 0;
}
.nav__links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover::after{ transform: scaleX(1); }

.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  padding:8px;
}
.nav__burger span{
  width:24px; height:2px; background:#fff; border-radius:2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: var(--navy-950);
}
.hero__slides{ position:absolute; inset:0; }
.hero__slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform: scale(1.08);
  transition: opacity 1.6s ease, transform 8s linear;
}
.hero__slide.is-active{
  opacity:1;
  transform: scale(1);
  z-index:1;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,15,25,.55) 0%, rgba(8,15,25,.35) 35%, rgba(8,15,25,.75) 100%);
  z-index:2;
}
.hero__content{ position:relative; z-index:3; color:#fff; max-width:760px; }

.eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--gold-400);
  margin-bottom: 1rem;
}
.eyebrow--dark{ color: var(--gold-500); }
.eyebrow.center{ display:block; text-align:center; }

.hero__title{
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height:1.05;
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
.hero__title em{
  font-style: italic;
  color: var(--gold-400);
}
.hero__subtitle{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height:1.5;
  color: rgba(255,255,255,.88);
  max-width: 560px;
  margin-bottom: 2.2rem;
}
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero__dots{
  position:absolute;
  bottom: 36px; left:50%;
  transform: translateX(-50%);
  z-index:3;
  display:flex;
  gap:10px;
}
.hero__dots button{
  width:9px; height:9px; border-radius:50%;
  background: rgba(255,255,255,.4);
  border:none;
  padding:0;
  transition: background .3s, transform .3s;
}
.hero__dots button.is-active{ background:#fff; transform: scale(1.3); }

.hero__scroll{
  position:absolute;
  right: 36px; bottom: 40px;
  z-index:3;
  width:26px; height:42px;
  border:2px solid rgba(255,255,255,.6);
  border-radius:20px;
  display:none;
}
.hero__scroll span{
  position:absolute;
  top:6px; left:50%;
  width:4px; height:8px;
  margin-left:-2px;
  background:#fff;
  border-radius:2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ opacity:1; transform: translateY(0); }
  70%{ opacity:0; transform: translateY(16px); }
  100%{ opacity:0; transform: translateY(16px); }
}
@media(min-width:640px){ .hero__scroll{ display:block; } }

/* ---------- Sections (generic) ---------- */
.section{ padding: 6.5rem 0; }
.section--dark{ background: var(--navy-950); color:#fff; }
.section__title{
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin-bottom: 1rem;
  color: var(--navy-950);
}
.section__title--light{ color:#fff; }
.section__title.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section__lead{
  font-size: 1.1rem;
  color: var(--stone-600);
  max-width: 640px;
  line-height:1.6;
  margin-bottom: 3rem;
}
.section__lead--light{ color: rgba(255,255,255,.75); }

/* ---------- Services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
}
.service-card{
  background:#fff;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: 0 14px 34px -20px rgba(20,30,50,.35);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -20px rgba(20,30,50,.45);
}
.service-card__img{
  height: 190px;
  overflow:hidden;
  position:relative;
}
.service-card__img img{
  width:100%; height:100%;
  object-fit:cover;
  transition: transform .6s var(--ease);
}
.service-card:hover .service-card__img img{ transform: scale(1.06); }
.service-card h3{ font-size:1.25rem; margin: 1.2rem 1.4rem .5rem; color: var(--navy-950); }
.service-card p{ font-size:.92rem; color: var(--stone-600); line-height:1.55; margin: 0 1.4rem 1.4rem; }

/* ---------- Portfolio Gallery ---------- */
.gallery{
  column-count: 4;
  column-gap: 1.1rem;
}
.gallery__item{
  break-inside: avoid;
  margin-bottom: 1.1rem;
  border-radius: 10px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  opacity:0;
  transform: translateY(20px);
  animation: fadeInUp .6s var(--ease) forwards;
}
@keyframes fadeInUp{ to{ opacity:1; transform:none; } }
.gallery__item img{ width:100%; aspect-ratio: 4/5; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.gallery__item:hover img{ transform: scale(1.07); }
.gallery__item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.45));
  opacity:0;
  transition: opacity .3s var(--ease);
}
.gallery__item:hover::after{ opacity:1; }

.gallery__more{ text-align:center; margin-top: 2.5rem; }

@media(max-width:1024px){ .gallery{ column-count:3; } }
@media(max-width:640px){ .gallery{ column-count:2; } }

/* ---------- Video gallery ---------- */
.video-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.video-card{
  position:relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  background-size:cover;
  background-position:center;
  border:none;
  overflow:hidden;
}
.video-card::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(8,15,25,.28);
  transition: background .3s var(--ease);
}
.video-card:hover::before{ background: rgba(8,15,25,.1); }
.video-card__play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.video-card__play svg{
  width:64px; height:64px;
  fill:#fff;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
  transition: transform .3s var(--ease);
}
.video-card:hover .video-card__play svg{ transform: scale(1.12); }

/* ---------- Diferenciadores ---------- */
.diff__grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items:center;
}
.diff__media{ border-radius: var(--radius); overflow:hidden; box-shadow: 0 30px 60px -30px rgba(20,30,50,.4); }
.diff__media img{ height:100%; object-fit:cover; }
.diff__item{
  display:flex;
  gap: 1.3rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--sand-200);
}
.diff__item:last-child{ border-bottom: 1px solid var(--sand-200); }
.diff__num{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--gold-500);
  min-width: 3ch;
}
.diff__item h3{ font-size:1.15rem; margin-bottom:.35rem; color:var(--navy-950); }
.diff__item p{ color: var(--stone-600); font-size:.95rem; line-height:1.55; }

@media(max-width:900px){
  .diff__grid{ grid-template-columns:1fr; }
  .diff__media img{ width:100%; max-height:360px; object-fit:cover; }
}

/* ---------- Brands carousel ---------- */
.section--brands{ padding-bottom: 4.5rem; text-align:center; }
.brands-carousel{
  overflow:hidden;
  position:relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands-track{
  display:flex;
  align-items:center;
  gap: 4rem;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.brands-carousel:hover .brands-track{ animation-play-state: paused; }
.brands-track img{
  height: 46px;
  width:auto;
  object-fit:contain;
  filter: grayscale(1) opacity(.55);
  transition: filter .35s var(--ease);
}
.brands-track img:hover{ filter:grayscale(0) opacity(1); }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Soluciones de Agua ---------- */
.section--water{ background: var(--sand-100); }
.water__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items:center;
}
.water__list{ display:flex; flex-direction:column; gap:.7rem; margin: 1.6rem 0 2.2rem; }
.water__list li{
  position:relative;
  padding-left: 1.6rem;
  color: var(--ink-900);
  font-weight:600;
  font-size:.98rem;
}
.water__list li::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:8px; height:8px;
  background: var(--blue-500);
  border-radius:50%;
}
.water__media{ border-radius: var(--radius); overflow:hidden; box-shadow: 0 30px 60px -30px rgba(20,30,50,.35); }

@media(max-width:900px){ .water__grid{ grid-template-columns:1fr; } .water__media{ order:-1; } }

/* ---------- Testimonials ---------- */
.section--testimonials{ text-align:center; }
.testimonials-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  text-align:left;
  margin-top: 1rem;
}
.testimonial-card{
  margin:0;
  background: var(--sand-100);
  border-radius: var(--radius);
  padding: 1.8rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.testimonial-card blockquote{
  margin:0;
  font-size:.98rem;
  line-height:1.6;
  color: var(--ink-900);
}
.testimonial-card figcaption{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:auto;
}
.testimonial-card figcaption div{ display:flex; flex-direction:column; font-size:.85rem; }
.testimonial-card figcaption strong{ color: var(--navy-950); }
.testimonial-card figcaption span{ color: var(--stone-600); }
.testimonial-card__avatar{
  width:40px; height:40px;
  border-radius:50%;
  background: var(--blue-700);
  color:#fff;
  font-family: var(--font-display);
  font-weight:600;
  font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ---------- Contact ---------- */
.section--contact{
  background: var(--navy-950);
  color:#fff;
  position:relative;
}
.contact__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
}
.contact__list{ display:flex; flex-direction:column; gap:1.1rem; margin: 1.8rem 0 2.2rem; }
.contact__list li{ display:flex; align-items:center; gap:.9rem; }
.contact__list .icon{ color: var(--gold-400); }
.contact__list a{ font-weight:600; }
.contact__list a:hover{ color: var(--gold-400); }

.contact__social{ display:flex; gap:1rem; }
.contact__social a{
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  transition: background .3s, border-color .3s;
}
.contact__social a:hover{ background: var(--gold-400); border-color: var(--gold-400); }
.contact__social svg{ width:19px; height:19px; fill:#fff; }

.contact__form-wrap{
  background:#fff;
  border-radius: var(--radius);
  padding: 2.2rem;
  color: var(--ink-900);
}
.contact__form{ display:flex; flex-direction:column; gap:1.1rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.contact__form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; font-weight:700; color: var(--stone-600); }
.contact__form input,
.contact__form select,
.contact__form textarea{
  font-family: inherit;
  font-size:.98rem;
  padding: .8rem .9rem;
  border-radius:8px;
  border: 1.5px solid var(--sand-200);
  background: var(--sand-50);
  color: var(--ink-900);
  resize: vertical;
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus{
  outline:none;
  border-color: var(--blue-500);
}
.form__note{ font-size:.85rem; color: var(--stone-600); text-align:center; }
.form__note a{ color: var(--blue-500); font-weight:700; }

@media(max-width:900px){ .contact__grid{ grid-template-columns:1fr; } .form__row{ grid-template-columns:1fr; } }

.map-embed{
  height: 380px;
  margin-top: 4rem;
  filter: saturate(0) contrast(1.05) brightness(.9);
}

/* ---------- Footer ---------- */
.footer{ background: var(--navy-900); color: rgba(255,255,255,.75); padding: 4.5rem 0 0; }
.footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer__logo{
  height:36px;
  margin-bottom:1rem;
  padding: 10px 16px;
  background: rgba(255,255,255,.94);
  border-radius: 10px;
}
.footer__brand p{ font-size:.9rem; line-height:1.6; max-width:280px; }
.footer__col h4{ color:#fff; font-size:.95rem; margin-bottom:1.1rem; letter-spacing:.02em; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; font-size:.92rem; }
.footer__col a:hover{ color: var(--gold-400); }
.footer__bottom{ padding: 1.6rem 24px; text-align:center; font-size:.82rem; }

@media(max-width:800px){
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0;
  background: rgba(6,12,20,.94);
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:88vw; max-height:86vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox__close{
  position:absolute; top:22px; right:28px;
  background:none; border:none; color:#fff; font-size:2.2rem; line-height:1;
}
.lightbox__nav{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border:none; color:#fff;
  width:52px; height:52px; border-radius:50%; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s;
}
.lightbox__nav:hover{ background: rgba(255,255,255,.25); }
.lightbox__prev{ left: 20px; }
.lightbox__next{ right: 20px; }

/* ---------- Video modal ---------- */
.video-modal{
  position:fixed; inset:0;
  background: rgba(6,12,20,.94);
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
}
.video-modal.is-open{ display:flex; }
.video-modal video{ max-width:90vw; max-height:86vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); }

/* ---------- Floating WhatsApp ---------- */
.fab-whatsapp{
  position:fixed;
  bottom: 26px; right: 26px;
  width: 58px; height:58px;
  background:#25D366;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,.4);
  z-index:150;
  animation: pulse 2.6s ease-in-out infinite;
}
.fab-whatsapp svg{ width:30px; height:30px; fill:#fff; }
.fab-whatsapp:hover{ transform: scale(1.07); }
@keyframes pulse{
  0%,100%{ box-shadow: 0 10px 30px -6px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.5); }
  50%{ box-shadow: 0 10px 30px -6px rgba(0,0,0,.4), 0 0 0 12px rgba(37,211,102,0); }
}

/* ---------- Mobile nav ---------- */
@media(max-width: 900px){
  .nav__links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width: min(320px, 80vw);
    background: var(--navy-950);
    flex-direction:column;
    justify-content:center;
    gap: 2rem;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    z-index:199;
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__links a{ font-size:1.15rem; }
  .nav__burger{ display:flex; }
  .nav__cta .btn span{ display:none; }
  .nav__cta .btn{ padding:.7rem; }
  .nav__cta .icon{ width:20px; height:20px; }
}

@media(max-width:640px){
  .section{ padding: 4rem 0; }
  .hero__actions{ flex-direction:column; align-items:flex-start; }
  .map-embed{ height:280px; }
}

/* Burger open state (icon morph via JS toggling class on nav) */
.nav__burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }