:root{
    --navy:#091826;
    --navy-2:#0F2438;
    --navy-3:#17324A;
    --cyan:#00B4D8;
    --cyan-deep:#007991;
    --black:#000000;
    --white:#FFFFFF;
    --marble:#AFB9C2;
    --bg:#FFFFFF;
    --surface:#F2F6F7;
    --ink:#091826;
    --ink-muted:rgba(9,24,38,0.64);
    --on-dark:#FFFFFF;
    --on-dark-muted:rgba(255,255,255,0.68);
    --rule:rgba(9,24,38,0.12);
    --rule-on-dark:rgba(255,255,255,0.16);
    --shadow:0 24px 60px -30px rgba(9,24,38,0.4);
    --font-display:'Cinzel','Times New Roman',serif;
    --font-body:'Josefin Sans','Century Gothic',sans-serif;
  }
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.7; }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; }
  h1,h2,h3{ font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:0.01em; }
  p{ margin:0; }
  .container{ max-width:1180px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }
  .eyebrow{ display:inline-flex; flex-direction:column; font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.22em; font-weight:600; font-size:0.78rem; color:var(--cyan-deep); margin-bottom:0.9rem; }
  .eyebrow::after{ content:""; display:block; width:42px; height:2px; background:var(--cyan); margin-top:0.6rem; }
  .on-dark .eyebrow{ color:var(--cyan); }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; font-size:0.85rem; padding:0.95rem 1.75rem; border-radius:2px; text-decoration:none; border:1.5px solid transparent; transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; }
  .btn:hover{ transform:translateY(-2px); }
  .btn:focus-visible{ outline:2.5px solid var(--cyan); outline-offset:3px; }
  .btn-primary{ background:var(--cyan); color:var(--navy); border-color:var(--cyan); }
  .btn-primary:hover{ background:var(--cyan-deep); color:var(--white); }
  .btn-ghost{ background:transparent; color:var(--on-dark); border-color:var(--rule-on-dark); }
  .btn-ghost:hover{ border-color:var(--on-dark); }
  .btn-outline{ background:transparent; color:var(--navy); border-color:var(--navy); }
  .btn-outline:hover{ background:var(--navy); color:var(--white); }

  header.site{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--rule); }
  .nav{ position:relative; display:flex; align-items:center; justify-content:space-between; padding-block:1.3rem; }
  .wordmark{ position:relative; display:flex; align-items:center; gap:0.65rem; text-decoration:none; margin-left:-0.9rem; }
  .wordmark img{ position:relative; z-index:1; height:48px; width:auto; }
  .nav-links{ display:flex; gap:2.1rem; list-style:none; margin:0; padding:0; }
  .nav-links a{ text-decoration:none; font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; font-size:0.82rem; color:var(--ink-muted); border-bottom:2px solid transparent; padding-bottom:2px; transition:color .18s ease, border-color .18s ease; }
  .nav-links a:hover{ color:var(--navy); border-color:var(--cyan); }
  .nav-actions{ display:flex; align-items:center; gap:0.75rem; }
  .nav-toggle{ display:none; background:none; border:none; padding:0.4rem; color:var(--ink); cursor:pointer; }
  .nav-cta-mobile{ display:none; }
  @media (max-width:820px){
    .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--rule); padding:0.25rem clamp(1.25rem,4vw,2.5rem) 1.5rem; box-shadow:var(--shadow); }
    .nav-links.open{ display:flex; }
    .nav-links li{ width:100%; }
    .nav-links a{ display:block; padding:0.9rem 0; border-bottom:1px solid var(--rule); }
    .nav-links li:last-child a{ border-bottom:none; }
    .nav-cta-desktop{ display:none; }
    .nav-cta-mobile{ display:block; width:100%; margin-top:0.75rem; }
    .nav-cta-mobile .btn{ display:inline-flex; width:100%; }
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  }

  section{ padding-block:clamp(4rem,8vw,6.5rem); }
  .on-dark{ background:var(--navy); color:var(--on-dark); }
  .on-surface{ background:var(--surface); }
  .section-head{ max-width:64ch; margin-bottom:clamp(2.25rem,5vw,3.25rem); }
  .section-head h2{ font-size:clamp(1.9rem,4vw,2.6rem); }
  .section-head p{ color:var(--ink-muted); margin-top:0.9rem; max-width:56ch; font-size:1.02rem; }
  .on-dark .section-head p{ color:var(--on-dark-muted); }

  /* HERO */
  .hero{ position:relative; overflow:hidden; padding-block:clamp(6rem,12vw,9rem) 0; }
  .hero::before{ content:""; position:absolute; inset:0; background:
      radial-gradient(ellipse 70% 60% at 80% 0%, rgba(0,180,216,0.16), transparent 60%),
      radial-gradient(ellipse 60% 50% at 10% 100%, rgba(0,180,216,0.10), transparent 60%);
    pointer-events:none; }
  .hero-inner{ position:relative; max-width:860px; display:grid; gap:1.6rem; padding-bottom:clamp(4rem,8vw,5.5rem); }
  .hero h1{ font-size:clamp(2.1rem,4.7vw,3.5rem); line-height:1.18; }
  .hero-sub{ max-width:52ch; font-size:1.08rem; color:var(--on-dark-muted); }
  .hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:0.5rem; }
  /* HERO DINÁMICO (portada) */
  .hero-vivo{ padding-block:clamp(4rem,8vw,6rem) 0; isolation:isolate; }
  .hero-luces{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
  .hero-luces span{ position:absolute; border-radius:50%; filter:blur(50px); background:radial-gradient(circle, rgba(0,180,216,0.5), transparent 65%); animation:deriva 22s ease-in-out infinite alternate; }
  .hero-luces span:nth-child(1){ width:560px; height:560px; top:-180px; right:-60px; opacity:0.55; }
  .hero-luces span:nth-child(2){ width:440px; height:440px; bottom:-140px; left:-120px; opacity:0.45; animation-duration:28s; animation-delay:-7s; }
  .hero-luces span:nth-child(3){ width:300px; height:300px; top:28%; left:38%; opacity:0.22; animation-duration:17s; animation-delay:-3s; }
  @keyframes deriva{
    0%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(50px,30px) scale(1.15); }
    100%{ transform:translate(-30px,60px) scale(0.92); }
  }

  .hero-grid{ position:relative; display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:center; padding-bottom:clamp(6.5rem,11vw,9rem); }
  .hero-texto{ display:grid; gap:1.5rem; }
  .hero-vivo h1{ font-size:clamp(2.1rem,3.9vw,3.2rem); line-height:1.15; }
  .hero-datos{ list-style:none; margin:0.3rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.6rem 1.5rem; font-size:0.92rem; color:var(--on-dark-muted); }
  .hero-datos li{ display:flex; align-items:center; gap:0.45rem; }
  .hero-datos svg{ width:16px; height:16px; color:var(--cyan); flex:none; }

  .hero-visual{ position:relative; justify-self:end; width:100%; max-width:440px; }
  .comparador{ --pos:50%; position:relative; aspect-ratio:3/4; border-radius:6px; overflow:hidden; background:#0a1620; cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none; box-shadow:0 40px 80px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.08); }
  .comparador img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  /* Las dos fotos no se sacaron exactamente desde el mismo lugar: este ajuste
     (calculado comparándolas) las hace coincidir para que al deslizar se vea una sola pileta.
     El primer translate+scale, igual en las dos, acerca el encuadre hacia la pileta. */
  .cmp-img-antes{ transform:translate(1.2%, -4.8%) scale(1.12) translate(5.9%, 3%) scale(1.118); }
  .cmp-img-despues{ transform:translate(1.2%, -4.8%) scale(1.12) translate(-14.9%, -4.8%) scale(1.3); }
  .cmp-antes{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
  .cmp-linea{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 14px rgba(0,0,0,0.45); pointer-events:none; }
  .cmp-manija{ position:absolute; top:50%; left:var(--pos); width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,0.35); pointer-events:none; }
  .cmp-manija svg{ width:22px; height:22px; }
  .cmp-etq{ position:absolute; bottom:14px; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; font-weight:600; color:#fff; background:rgba(9,24,38,0.68); padding:0.42rem 0.7rem 0.32rem; border-radius:2px; pointer-events:none; }
  .cmp-etq-antes{ left:14px; }
  .cmp-etq-despues{ right:14px; }
  .cmp-rango{ position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; }
  .comparador:focus-within{ outline:2.5px solid var(--cyan); outline-offset:4px; }
  .cmp-ayuda{ margin-top:0.9rem; text-align:center; font-size:0.85rem; color:var(--on-dark-muted); }
  .hero-salvavidas{ position:absolute; top:-30px; left:-30px; width:76px; height:76px; z-index:2; filter:drop-shadow(0 14px 22px rgba(0,0,0,0.45)); animation:flotar 3.6s ease-in-out infinite; }
  @media (max-width:900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-visual{ justify-self:center; max-width:400px; margin-top:0.5rem; }
    .comparador{ aspect-ratio:4/5; }
    .hero-salvavidas{ width:60px; height:60px; top:-22px; left:-14px; }
  }

  /* AGUA ANIMADA, BURBUJAS Y SALVAVIDAS (portada y página 404) */
  .agua{ position:absolute; left:0; right:0; bottom:-1px; height:clamp(70px,11vw,120px); overflow:hidden; pointer-events:none; }
  .agua svg{ position:absolute; bottom:0; left:0; width:200%; max-width:none; display:block; }
  .ola-1{ height:100%; fill:rgba(0,180,216,0.22); animation:marea 11s linear infinite; }
  .ola-2{ height:78%; fill:rgba(0,180,216,0.30); animation:marea 16s linear infinite reverse; }
  .ola-3{ height:52%; fill:var(--bg); animation:marea 22s linear infinite; }
  .hero-vivo .ola-3{ fill:var(--surface); }
  @keyframes marea{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  .burbuja{ position:absolute; bottom:12%; left:var(--x); width:var(--t); height:var(--t); border-radius:50%; border:1.5px solid rgba(0,180,216,0.45); background:rgba(0,180,216,0.08); opacity:0; pointer-events:none; animation:subir var(--d) ease-in infinite; animation-delay:var(--r); }
  @keyframes subir{
    0%{ transform:translateY(0); opacity:0; }
    15%{ opacity:1; }
    100%{ transform:translateY(-55vh); opacity:0; }
  }
  @keyframes flotar{
    0%, 100%{ transform:translateY(0) rotate(-7deg); }
    50%{ transform:translateY(-10px) rotate(7deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-luces span, .agua svg, .burbuja, .hero-salvavidas{ animation:none; }
    .burbuja{ display:none; }
  }

  /* PAGE INTRO (subpaginas) */
  .page-intro{ padding-block:clamp(1.75rem,4vw,2.5rem) 0; }
  .back-link{ display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none; font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; font-size:0.8rem; color:var(--cyan-deep); margin-bottom:0; }
  .back-link:hover{ color:var(--navy); }
  .page-intro + section{ padding-top:clamp(1.25rem,3vw,2rem); }

  /* SERVICIOS */
  .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
  @media (max-width:900px){ .services-grid{ grid-template-columns:1fr; } }
  .service-card{ background:var(--white); border:1px solid var(--rule); padding:clamp(1.9rem,3vw,2.4rem); box-shadow:var(--shadow); }
  .service-card .icon{ width:44px; height:44px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--cyan-deep); margin-bottom:1.4rem; }
  .service-card h3{ font-size:1.28rem; margin-bottom:0.7rem; }
  .service-card p{ color:var(--ink-muted); font-size:0.97rem; }

  /* PROCESO */
  .process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.75rem; }
  @media (max-width:900px){ .process-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }
  .process-step .num{ font-family:var(--font-display); font-size:2.2rem; color:var(--cyan); line-height:1; margin-bottom:0.9rem; }
  .process-step h3{ font-size:1.08rem; margin-bottom:0.5rem; }
  .process-step p{ color:var(--ink-muted); font-size:0.93rem; }

  /* VALUE PROPS */
  #por-que{ padding-bottom:clamp(1.5rem,3vw,2.5rem); }
  .value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
  @media (max-width:900px){ .value-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .value-grid{ grid-template-columns:1fr; } }
  .value-item{ display:flex; gap:0.85rem; align-items:flex-start; }
  .value-item .icon{ flex:none; width:32px; height:32px; border-radius:50%; background:rgba(0,180,216,0.14); color:var(--cyan-deep); display:flex; align-items:center; justify-content:center; }
  .value-item p{ font-size:0.95rem; padding-top:0.3rem; }

  /* ANTES Y DESPUES */
  .ba-list{ display:flex; flex-direction:column; gap:clamp(2.5rem,5vw,3.5rem); }
  .ba-case-head{ display:flex; align-items:baseline; gap:0.9rem; margin-bottom:1rem; }
  .ba-num{ font-family:var(--font-display); font-size:1.25rem; color:var(--cyan-deep); }
  .ba-case-head h3{ font-size:1.15rem; }
  .ba-pair{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0.9rem; }
  .ba-photo{ position:relative; aspect-ratio:4/3; border:none; padding:0; cursor:pointer; overflow:hidden; border-radius:3px; background:#0a1620; }
  .ba-photo:focus-visible{ outline:2.5px solid var(--cyan); outline-offset:2px; }
  .ba-photo:hover .photo-inner{ transform:scale(1.04); }
  .ba-label{ position:absolute; top:10px; left:10px; background:rgba(9,24,38,0.6); color:#fff; font-family:var(--font-body); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; padding:0.32rem 0.6rem; border-radius:2px; }
  .gallery-more{ margin-top:2.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }

  .photo-inner{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; display:block; }

  /* ANTES Y DESPUES - PREVIEW (home) */
  .ba-preview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.25rem); }
  @media (max-width:860px){ .ba-preview-grid{ grid-template-columns:1fr; } }
  .ba-preview-card h3{ font-size:1.02rem; margin-bottom:0.8rem; }
  .ba-preview-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }

  /* ANTES Y DESPUES - CARRUSEL (mobile: swipe con "peek" del siguiente + flechas + puntos) */
  .ba-carousel{ position:relative; }
  @media (max-width:640px){
    .ba-pair, .ba-preview-pair{
      display:flex;
      grid-template-columns:none;
      gap:0.7rem;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      -ms-overflow-style:none;
      padding-bottom:2px;
    }
    .ba-pair::-webkit-scrollbar, .ba-preview-pair::-webkit-scrollbar{ display:none; }
    .ba-pair .ba-photo, .ba-preview-pair .ba-photo{ flex:0 0 82%; scroll-snap-align:center; }
  }

  .ba-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:34px; height:34px; border-radius:50%; border:none; background:rgba(9,24,38,0.55); color:#fff; font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
  .ba-nav:active{ background:rgba(9,24,38,0.8); }
  .ba-nav[hidden]{ display:none; }
  .ba-nav-prev{ left:6px; }
  .ba-nav-next{ right:6px; }
  .ba-dots{ display:flex; justify-content:center; gap:0.45rem; margin-top:0.7rem; }
  .ba-dot{ width:7px; height:7px; padding:0; border:none; border-radius:50%; background:var(--rule); cursor:pointer; transition:width .2s ease, background .2s ease; }
  .ba-dot.active{ width:18px; border-radius:4px; background:var(--cyan-deep); }
  @media (min-width:641px){ .ba-nav, .ba-dots{ display:none; } }

  /* NOSOTROS */
  .about-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
  @media (max-width:860px){ .about-wrap{ grid-template-columns:1fr; } }
  .about-photo{ aspect-ratio:5/4; position:relative; width:100%; height:auto; object-fit:cover; object-position:50% 65%; display:block; }
  .about-copy p{ margin-bottom:1.1rem; color:var(--ink-muted); max-width:52ch; }

  /* FAQ */
  .faq-list{ max-width:760px; display:flex; flex-direction:column; gap:0.75rem; }
  details.faq-item{ border:1px solid var(--rule); background:var(--white); padding:0.3rem 1.4rem; }
  details.faq-item summary{ cursor:pointer; list-style:none; padding:1.05rem 0; font-family:var(--font-body); font-weight:600; font-size:1rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
  details.faq-item summary::-webkit-details-marker{ display:none; }
  details.faq-item summary::after{ content:"+"; font-family:var(--font-display); font-size:1.3rem; color:var(--cyan-deep); flex:none; transition:transform .2s ease; }
  details.faq-item[open] summary::after{ transform:rotate(45deg); }
  details.faq-item p{ padding-bottom:1.2rem; color:var(--ink-muted); font-size:0.96rem; max-width:60ch; }

  /* CTA FINAL */
  .cta-final{ text-align:center; }
  .cta-final .section-head{ margin-inline:auto; }
  .cta-final .hero-ctas{ justify-content:center; }

  footer{ background:var(--black); color:var(--marble); padding-block:clamp(2.75rem,5vw,3.5rem); }
  .foot-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.75rem; }
  .foot-brand{ display:flex; align-items:center; gap:0.75rem; }
  .foot-brand img{ height:38px; width:auto; }
  .foot-brand .name{ font-family:var(--font-display); font-size:1.05rem; color:var(--white); }
  .foot-links{ display:flex; gap:1.75rem; list-style:none; margin:0; padding:0; }
  .foot-links a{ text-decoration:none; font-size:0.85rem; color:var(--marble); }
  .foot-links a:hover{ color:var(--cyan); }

  /* LIGHTBOX */
  .lightbox{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,3rem); }
  .lightbox[hidden]{ display:none; }
  .lightbox-backdrop{ position:absolute; inset:0; background:rgba(4,10,16,0.82); }
  .lightbox-panel{ position:relative; max-width:100%; max-height:100%; }
  .lightbox-photo{ position:relative; display:inline-block; max-width:100%; line-height:0; border-radius:4px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,0.6); background:#0a1620; }
  .lightbox-img{ display:block; max-width:100%; max-height:min(88vh,900px); width:auto; height:auto; background:#0a1620; }
  .lightbox-photo img.wm{ position:absolute; right:3%; bottom:3%; width:14%; max-width:90px; min-width:44px; opacity:0.62; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
  .lightbox-close{ position:absolute; z-index:2; top:8px; right:8px; background:rgba(4,10,16,0.55); border:none; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer; padding:0.35rem 0.7rem; border-radius:50%; }
  .lightbox-close:hover{ background:rgba(4,10,16,0.8); }
  .lightbox-close:focus-visible{ outline:2.5px solid var(--cyan); }

  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in-view{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }