/* ==================== CLEAN COLORS — styles.css ==================== */
/* Shared stylesheet for cleancolors.mx                                */
/* Fonts: Syne (headings) + DM Sans (body)                            */
/* ================================================================== */

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ---------- Skip Link (Accessibility) ---------- */
.skip-link{
  position:absolute;top:-100%;left:50%;transform:translateX(-50%);
  background:var(--aqua);color:var(--navy);padding:.8rem 1.5rem;
  border-radius:0 0 8px 8px;font-weight:700;font-size:.9rem;
  z-index:9999;transition:top .2s
}
.skip-link:focus{top:0}

/* ---------- CSS Variables ---------- */
:root{
  --navy:      #0A1E30;
  --blue-dark: #1277A8;
  --blue-mid:  #2EB5F0;
  --blue-light:#5CC8EE;
  --blue-pale: #A8E4F7;
  --aqua:      #00C9AE;
  --off-white: #F0F8FC;
  --white:     #ffffff;
  --gray:      #5A6E80;
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--navy);background:var(--off-white);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none}
ul{list-style:none}

/* ---------- Accessibility: reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==================== NAVIGATION ==================== */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 5%;
  background:rgba(10,30,48,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(92,200,238,.1);
  transition:background .3s
}
.nav-logo img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:.1rem}
.nav-links li a{
  display:block;padding:.5rem .75rem;border-radius:8px;
  font-size:.82rem;font-weight:500;color:rgba(255,255,255,.8);
  transition:all .25s
}
.nav-links li a:hover,.nav-links li a:focus-visible{color:#fff;background:rgba(92,200,238,.12)}
.nav-links li a:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-caret{font-size:.55rem;margin-left:.25rem;transition:transform .2s}
.nav-dropdown:hover .nav-caret{transform:rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:100%;left:0;min-width:180px;
  background:rgba(10,30,48,.95);backdrop-filter:blur(12px);
  border-radius:12px;padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .25s;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
  border:1px solid rgba(92,200,238,.1)
}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown-menu a{
  display:block;padding:.65rem 1.2rem;font-size:.85rem;color:rgba(255,255,255,.8);
  transition:all .2s
}
.nav-dropdown-menu a:hover{background:rgba(92,200,238,.12);color:#fff}

/* Hamburger */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;z-index:1001;background:transparent;border:none;flex-shrink:0}
.nav-hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.nav-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile nav */
@media(max-width:1140px){
  .nav-hamburger{display:flex}
  .nav-links{
    position:fixed;top:0;right:-100%;width:280px;height:100vh;
    flex-direction:column;align-items:flex-start;gap:0;
    background:rgba(10,30,48,.98);padding:5rem 2rem 2rem;
    transition:right .35s ease;
    box-shadow:-4px 0 30px rgba(0,0,0,.3);
    overflow-y:auto;
  }
  .nav-links.open{right:0}
  .nav-links li{width:100%}
  .nav-links li a{padding:.85rem 0;font-size:1rem;border-radius:0;border-bottom:1px solid rgba(92,200,238,.08)}
}
/* Overlay para cerrar menú móvil */
.nav-overlay{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.4)}
.nav-overlay.open{display:block}

/* ==================== BUTTONS ==================== */
.btn-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.9rem 2rem;border-radius:50px;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;
  color:var(--navy);background:linear-gradient(135deg,#5CC8EE,#00C9AE);
  box-shadow:0 4px 20px rgba(0,201,174,.3);
  transition:all .3s;text-decoration:none
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 6px 28px rgba(0,201,174,.45)}

.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.8rem;border-radius:50px;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;
  color:var(--blue-pale);border:2px solid rgba(168,228,247,.35);
  background:transparent;transition:all .3s;text-decoration:none
}
.btn-outline:hover{background:rgba(92,200,238,.1);border-color:rgba(168,228,247,.6);color:#fff}

/* ==================== SECTION HEADERS ==================== */
.s-label{
  display:inline-block;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;
  color:var(--aqua);background:rgba(0,201,174,.1);
  padding:.4rem 1rem;border-radius:50px;margin-bottom:1rem
}
.s-title{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.15;
  color:var(--navy);margin-bottom:1rem
}
.s-title em{color:var(--blue-mid);font-style:normal}
.s-title-white{color:var(--white)}
.s-desc{color:var(--gray);font-size:1rem;max-width:580px;line-height:1.7}
.s-header{text-align:center;margin-bottom:3rem}
.s-header .s-desc{margin:0 auto}

/* ==================== HERO ==================== */
#hero{
  position:relative;overflow:hidden;
  background:linear-gradient(170deg,#0A1E30 0%,#0E3050 50%,#093248 100%);
  padding:10rem 5% 5rem;color:#fff;min-height:85vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
}
.hero-glow{
  position:absolute;width:600px;height:600px;
  background:radial-gradient(circle,rgba(43,159,212,.15) 0%,transparent 65%);
  border-radius:50%;top:-200px;right:-100px;pointer-events:none
}
.hero-content{position:relative;z-index:2;max-width:800px;margin:0 auto}
.hero-tag{
  display:inline-block;font-size:.82rem;font-weight:600;color:var(--blue-pale);
  background:rgba(92,200,238,.1);border:1px solid rgba(92,200,238,.2);
  border-radius:50px;padding:.45rem 1.2rem;margin-bottom:1.5rem
}
.hero-h1{
  font-family:var(--font-head);font-weight:900;
  font-size:clamp(3rem,8vw,6.5rem);line-height:.95;
  letter-spacing:-.03em;margin-bottom:1.5rem
}
.hero-h1 .t1{color:#5CC8EE}
.hero-h1 .t2{color:#A8E4F7}
.hero-sub{
  font-size:1.05rem;color:rgba(255,255,255,.7);
  max-width:540px;margin:0 auto 2rem;line-height:1.7
}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-badges{
  position:relative;z-index:2;
  display:flex;gap:2rem;justify-content:center;margin-top:3.5rem;flex-wrap:wrap
}
.badge{
  background:rgba(255,255,255,.06);border:1px solid rgba(92,200,238,.15);
  border-radius:16px;padding:1.2rem 1.8rem;text-align:center;min-width:130px;
  backdrop-filter:blur(8px)
}
.badge-num{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:#5CC8EE;margin-bottom:.2rem}
.badge-label{font-size:.75rem;color:rgba(255,255,255,.6);letter-spacing:.5px}
.hero-wave{position:absolute;bottom:-1px;left:0;width:100%;height:80px;display:block}

/* Bubbles */
.bubbles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.bubble{
  position:absolute;border-radius:50%;opacity:0;
  animation:rise linear infinite;
  border:1.5px solid rgba(92,200,238,.25);
  background:radial-gradient(circle at 30% 30%,rgba(168,228,247,.15),transparent)
}
@keyframes rise{
  0%{opacity:0;transform:translateY(100vh) scale(.5)}
  10%{opacity:.7}
  90%{opacity:.3}
  100%{opacity:0;transform:translateY(-100vh) scale(1)}
}

/* ==================== SERVICES ==================== */
#servicios{padding:4rem 5%}
.services-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;max-width:1200px;margin:0 auto
}
.svc-card{
  background:var(--white);border-radius:22px;padding:2rem 1.8rem;
  border:1.5px solid rgba(0,0,0,.06);
  transition:transform .3s,box-shadow .3s
}
.svc-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(43,159,212,.12)}
.svc-icon-wrap{margin-bottom:1.2rem}
.svc-name{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--navy);margin-bottom:.5rem}
.svc-desc{font-size:.9rem;color:var(--gray);line-height:1.6}
.price-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.5rem 0;border-bottom:1px solid rgba(0,0,0,.06);
  font-size:.88rem;color:var(--gray)
}
.price-val{font-weight:700;color:var(--navy);font-family:var(--font-head)}
.price-note{
  background:var(--off-white);border-radius:12px;padding:1rem 1.2rem;
  font-size:.78rem;color:var(--gray);line-height:1.7;margin-top:1rem
}
.price-note-highlight{background:linear-gradient(135deg,rgba(0,201,174,.08),rgba(46,181,240,.08));border:1px solid rgba(0,201,174,.15)}
.xpress-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.65rem .8rem;margin-top:.6rem;
  background:linear-gradient(135deg,rgba(0,201,174,.08),rgba(46,181,240,.08));
  border-radius:10px;font-size:.9rem
}

/* ==================== GALLERY / INSTALACIONES ==================== */
#instalaciones{padding:4rem 5%;max-width:1200px;margin:0 auto}
.gi{position:relative;overflow:hidden;border-radius:28px}
.gi:hover .gi-photo{transform:scale(1.05)}
.gi-photo{transition:transform .45s ease}
.gi-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:1rem 1.5rem;
  background:linear-gradient(transparent,rgba(10,30,48,.7));
  color:#fff;font-size:.85rem;font-weight:500
}

/* ==================== PROMOTIONS ==================== */
#promociones{
  padding:4rem 5%;
  background:linear-gradient(170deg,var(--navy) 0%,#0E3050 100%)
}
#promociones .s-header{margin-bottom:2.5rem}
.promos-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;max-width:1100px;margin:0 auto
}
.promo{
  background:rgba(255,255,255,.04);border:1.5px solid rgba(92,200,238,.12);
  border-radius:22px;padding:2rem 1.8rem;
  transition:border-color .3s,box-shadow .3s
}
.promo:hover{border-color:rgba(92,200,238,.3);box-shadow:0 8px 32px rgba(43,159,212,.1)}
.promo-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.promo-icon{font-size:1.5rem}
.promo-pill{
  font-size:.72rem;font-weight:700;padding:.3rem .8rem;border-radius:50px;
  text-transform:uppercase;letter-spacing:.5px
}
.pill-sky{background:rgba(92,200,238,.15);color:var(--blue-light)}
.pill-aqua{background:rgba(0,201,174,.15);color:var(--aqua)}
.promo-title{font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:.5rem}
.promo-desc{font-size:.9rem;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:1rem}
.promo-deal{font-family:var(--font-head);font-weight:800;font-size:1.6rem;margin-bottom:.8rem}
.deal-sky{color:var(--blue-light)}
.deal-aqua{color:var(--aqua)}
.promo-hr{height:1px;background:rgba(92,200,238,.12);margin-bottom:.8rem}
.promo-note{font-size:.75rem;color:rgba(255,255,255,.4)}

/* ==================== TESTIMONIALS ==================== */
#testimonios{padding:4rem 5%}
.testi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.5rem;max-width:1100px;margin:0 auto
}
.testi{
  background:var(--white);border-radius:20px;padding:2rem 1.8rem;
  border:1.5px solid rgba(0,0,0,.06);position:relative;
  transition:transform .3s,box-shadow .3s
}
.testi:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(43,159,212,.1)}
.testi-q{
  position:absolute;top:1rem;right:1.5rem;
  font-family:var(--font-head);font-size:3.5rem;color:var(--blue-pale);
  opacity:.3;line-height:1
}
.testi-stars{color:#F59E0B;font-size:.9rem;letter-spacing:2px;margin-bottom:.8rem}
.testi-text{font-size:.92rem;color:var(--gray);line-height:1.7;margin-bottom:1.2rem}
.testi-author{display:flex;align-items:center;gap:.8rem}
.testi-av{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem
}
.av-a{background:linear-gradient(135deg,#E8F7FD,#D0E8F4)}
.av-b{background:linear-gradient(135deg,rgba(0,201,174,.15),rgba(0,201,174,.08))}
.av-c{background:linear-gradient(135deg,rgba(46,181,240,.15),rgba(46,181,240,.08))}
.av-d{background:linear-gradient(135deg,rgba(18,119,168,.15),rgba(18,119,168,.08))}
.testi-name{font-weight:700;font-size:.88rem;color:var(--navy)}
.testi-loc{font-size:.75rem;color:var(--gray)}

/* ==================== CONTACT ==================== */
#contacto{
  padding:4rem 5%;
  background:linear-gradient(170deg,var(--navy) 0%,#0E3050 100%);
  color:#fff
}
.contact-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  max-width:1100px;margin:0 auto;align-items:start
}
.contact-items{display:flex;flex-direction:column;gap:1.2rem;margin:2rem 0}
.c-item{display:flex;align-items:flex-start;gap:1rem}
.c-ico{font-size:1.3rem;flex-shrink:0;margin-top:.15rem}
.c-lbl{font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:.15rem}
.c-val{font-size:.95rem;color:rgba(255,255,255,.85);line-height:1.5}
.c-hours{
  margin-top:2rem;background:rgba(255,255,255,.05);
  border-radius:14px;padding:1.2rem 1.5rem;
  border:1px solid rgba(92,200,238,.1)
}
.c-hours h4{font-family:var(--font-head);font-size:.95rem;color:var(--blue-light);margin-bottom:.8rem}
.hours-row{display:flex;justify-content:space-between;padding:.4rem 0;font-size:.9rem}
.hours-day{color:rgba(255,255,255,.7)}
.hours-time{color:var(--blue-pale);font-weight:600}

/* Contact form */
.contact-form{
  background:rgba(255,255,255,.04);border:1.5px solid rgba(92,200,238,.12);
  border-radius:22px;padding:2rem
}
.form-title{font-family:var(--font-head);font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:.78rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.4rem}
.fg input,.fg select,.fg textarea{
  width:100%;padding:.8rem 1rem;border-radius:10px;
  border:1.5px solid rgba(92,200,238,.15);
  background:rgba(255,255,255,.05);color:#fff;font-family:var(--font-body);font-size:.9rem;
  transition:border-color .25s
}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.3)}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--blue-mid)}
.fg select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='rgba(255,255,255,.5)'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.fg select option{background:var(--navy);color:#fff}
.fg textarea{resize:vertical;min-height:100px}
.form-btn{
  width:100%;padding:1rem;border:none;border-radius:12px;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:1rem;
  color:var(--navy);background:linear-gradient(135deg,#5CC8EE,#00C9AE);
  box-shadow:0 4px 20px rgba(0,201,174,.3);transition:all .3s
}
.form-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(0,201,174,.45)}

/* ==================== FOOTER ==================== */
footer{
  background:var(--navy);color:rgba(255,255,255,.7);
  padding:3.5rem 5% 2rem;
  border-top:1px solid rgba(92,200,238,.08)
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;
  max-width:1100px;margin:0 auto
}
.f-brand img{height:38px;margin-bottom:1rem}
.f-brand p{font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.55);max-width:300px}
.f-socials{display:flex;gap:.6rem;margin-top:1.2rem}
.f-soc{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(92,200,238,.12);
  border-radius:10px;font-size:1.1rem;transition:all .25s
}
.f-soc:hover{background:rgba(92,200,238,.15);border-color:rgba(92,200,238,.3)}
.f-col h4{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:#fff;margin-bottom:1rem}
.f-col ul li{margin-bottom:.5rem}
.f-col ul li a{font-size:.88rem;color:rgba(255,255,255,.55);transition:color .2s}
.f-col ul li a:hover{color:var(--blue-light)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:2rem;margin-top:2rem;border-top:1px solid rgba(255,255,255,.06);
  font-size:.78rem;color:rgba(255,255,255,.35);
  max-width:1100px;margin-left:auto;margin-right:auto
}
.footer-bottom a{color:rgba(255,255,255,.45);transition:color .2s}
.footer-bottom a:hover{color:var(--blue-light)}

/* ==================== WHATSAPP FLOAT ==================== */
.wa-float{
  position:fixed;bottom:1.75rem;right:1.75rem;width:60px;height:60px;
  background:linear-gradient(135deg,#25D366,#128C7E);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.9rem;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,.4);z-index:999;
  transition:all .3s;animation:wa-pulse 2s ease-in-out infinite
}
.wa-float:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.5)}
@keyframes wa-pulse{
  0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4)}
  50%{box-shadow:0 4px 28px rgba(37,211,102,.6)}
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:768px){
  #hero{padding:8rem 5% 4rem;min-height:auto}
  .hero-h1{font-size:clamp(2.5rem,10vw,4rem)}
  .hero-badges{gap:1rem}
  .badge{padding:.8rem 1.2rem;min-width:100px}
  .services-grid{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:.5rem;text-align:center}
  .testi-grid{grid-template-columns:1fr}
  .promos-grid{grid-template-columns:1fr}

  /* Gallery stacking */
  #instalaciones div[style*="display:flex"][style*="gap:1.5rem"]{
    flex-direction:column!important
  }
  #instalaciones div[style*="flex:0 0 38%"],
  #instalaciones div[style*="flex:0 0 35%"]{
    flex:1 1 auto!important;min-height:280px!important
  }
}

@media(max-width:480px){
  .hero-badges{flex-direction:column;align-items:center}
  .hero-btns{flex-direction:column;align-items:center}
}