/* ===== Clean Made — sistema de diseño «Espuma Clara» (v2, alto contraste) ===== */
:root{
  --marino:#0D3B66;
  --marino-2:#0f4675;
  --azul:#1A9FD4;
  --azul-d:#127aa8;
  --espuma:#E9F6FC;
  --coral:#FF7A5C;
  --coral-d:#e0613f;
  --niebla:#F4F6F8;
  --pizarra:#4A5A67;
  --linea:#dfeaf1;
  --blanco:#FFFFFF;
  --sans:'Poppins',system-ui,sans-serif;
  --body:'Montserrat',system-ui,sans-serif;
  --wrap:1180px;
  --r:16px;
  --shadow:0 18px 44px rgba(13,59,102,.10);
  --shadow-s:0 8px 22px rgba(13,59,102,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
body{font-family:var(--body);color:var(--marino);background:var(--blanco);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.display{font-family:var(--sans);font-weight:800;line-height:1.1;letter-spacing:-0.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;width:100%}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
.reveal{opacity:0;transform:translateY(34px)}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:16px;
  padding:15px 28px;border-radius:100px;cursor:pointer;border:0;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,background .2s}
.btn-coral{background:var(--coral);color:#fff;box-shadow:0 10px 28px rgba(255,122,92,.34)}
.btn-coral:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(255,122,92,.48);background:var(--coral-d)}
.btn-marino{background:var(--marino);color:#fff}
.btn-marino:hover{transform:translateY(-3px);background:var(--marino-2)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
.btn-outline{background:#fff;color:var(--marino);border:1.5px solid var(--linea);box-shadow:var(--shadow-s)}
.btn-outline:hover{transform:translateY(-3px);border-color:var(--azul)}
.wa-ico{width:20px;height:20px;fill:currentColor;flex:none}

/* ===== nav ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s,box-shadow .4s,padding .3s;padding:18px 0}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between}
nav .logo{position:relative;height:40px;width:160px;display:block;flex:none}
nav .logo img{position:absolute;top:0;left:0;height:40px;width:auto;transition:opacity .3s}
.logo .l-white{opacity:1}.logo .l-blue{opacity:0}
nav.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(13,59,102,.08)}
nav.solid .logo .l-white{opacity:0}
nav.solid .logo .l-blue{opacity:1}
.nav-links{display:flex;gap:30px;align-items:center;font-family:var(--sans);font-weight:500;font-size:15px}
.nav-links a.lnk{color:#fff;opacity:.9;transition:opacity .25s,color .25s}
nav.solid .nav-links a.lnk{color:var(--marino)}
.nav-links a.lnk:hover{opacity:1;color:var(--azul)}
.nav-links a.lnk.active{color:var(--azul);opacity:1}
.nav-cta{background:var(--coral);color:#fff!important;padding:11px 22px;border-radius:100px;font-weight:600;opacity:1!important;
  box-shadow:0 6px 18px rgba(255,122,92,.32);transition:transform .25s,background .2s}
.nav-cta:hover{transform:translateY(-2px);background:var(--coral-d)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative;z-index:60}
.nav-toggle span{position:absolute;left:0;height:2px;width:100%;background:#fff;border-radius:2px;transition:.3s}
nav.solid .nav-toggle span{background:var(--marino)}
.nav-toggle span:nth-child(1){top:0}.nav-toggle span:nth-child(2){top:10px}.nav-toggle span:nth-child(3){top:20px}

/* ===== sections + contrast surfaces ===== */
section{position:relative;padding:110px 0}
.sec-marino{background:var(--marino);color:#fff}
.sec-marino .eyebrow{color:#7fc4e8}
.sec-azul{background:var(--azul);color:#fff}
.sec-azul .eyebrow{color:#eaf7fd}
.sec-foam{background:var(--espuma);color:var(--marino)}
.sec-white{background:var(--blanco);color:var(--marino)}
.sec-niebla{background:var(--niebla);color:var(--marino)}
.sec-head{max-width:660px;margin-bottom:52px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(30px,4.6vw,50px);margin:14px 0 16px}
.sec-head p{font-size:18px}
.sec-marino .sec-head p,.sec-azul .sec-head p{color:rgba(255,255,255,.85)}
.sec-foam .sec-head p,.sec-white .sec-head p,.sec-niebla .sec-head p{color:var(--pizarra)}

/* wave divider */
.wave{position:absolute;left:0;width:100%;line-height:0;z-index:2;pointer-events:none}
.wave.top{top:-1px}.wave.bottom{bottom:-1px}
.wave svg{width:100%;height:80px;display:block}

/* ===== hero ===== */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;padding-top:130px;padding-bottom:80px;color:#fff;background:var(--marino);overflow:hidden}
.hero .arcs{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150vmax;height:150vmax;z-index:0;pointer-events:none;opacity:.45}
.hero .arcs svg{width:100%;height:100%}
.hero .wrap{position:relative;z-index:2}
.hero .tagpill{display:inline-flex;align-items:center;gap:8px;background:rgba(26,159,212,.18);color:#bfe6f6;
  padding:8px 16px;border-radius:100px;font-family:var(--sans);font-weight:500;font-size:13.5px;margin-bottom:24px}
.hero h1{font-size:clamp(38px,6vw,70px);margin-bottom:20px}
.hero h1 .accent{color:var(--azul)}
.hero .lead{font-size:19px;max-width:560px;color:rgba(255,255,255,.85);margin-bottom:16px}
.hero .slogan{font-family:var(--sans);font-weight:300;font-style:italic;font-size:20px;color:rgba(255,255,255,.72);margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ===== split (home: 2 líneas 50/50) ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.split-card{position:relative;border-radius:22px;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:38px;color:#fff;background:var(--marino);border:1px solid rgba(13,59,102,.08);box-shadow:var(--shadow);transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.split-card:hover{transform:translateY(-8px)}
.split-card .bg{position:absolute;inset:0;z-index:0}
.split-card.clean .bg{background:linear-gradient(160deg,#0D3B66,#127aa8)}
.split-card.film .bg{background:linear-gradient(160deg,#1A9FD4,#0D3B66)}
.split-card .bg-arc{position:absolute;right:-20%;top:-25%;width:70%;opacity:.16}
.split-card .inner{position:relative;z-index:1}
.split-card .ico{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;margin-bottom:auto}
.split-card .ico svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.7}
.split-card h3{font-size:27px;margin:22px 0 10px}
.split-card p{font-size:15.5px;color:rgba(255,255,255,.85);margin-bottom:20px}
.split-card .go{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:15px;color:#fff}
.split-card .go svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s}
.split-card:hover .go svg{transform:translateX(5px)}

/* ===== cards grid (servicios) ===== */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.stats.stats-lg .stat{background:rgba(255,255,255,.1);padding:30px 24px}
.stats.stats-lg .n{font-size:clamp(30px,4.4vw,44px)}
.stats.stats-lg .l{font-size:14.5px}
.card{background:#fff;border:1px solid var(--linea);border-radius:20px;padding:32px 28px;box-shadow:var(--shadow-s);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:#bfe0f0}
.card .ico{width:56px;height:56px;border-radius:15px;background:var(--espuma);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.card .ico svg{width:28px;height:28px;stroke:var(--azul);fill:none;stroke-width:1.7}
.card h3{font-size:20px;font-weight:600;margin-bottom:9px;color:var(--marino)}
.card p{font-size:15px;color:var(--pizarra)}
.card.feature{border-color:var(--azul);box-shadow:0 18px 44px rgba(26,159,212,.16)}
.card .badge{position:absolute;top:18px;right:18px;font-family:var(--sans);font-weight:600;font-size:11px;color:#fff;background:var(--azul);padding:4px 11px;border-radius:100px}
.card .tip{margin-top:12px;font-size:13px;color:var(--azul-d);font-weight:500;display:flex;gap:7px;align-items:flex-start}
.card .tip svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--azul);fill:none;stroke-width:2}

/* ===== before/after slider ===== */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.ba-copy h2{font-size:clamp(28px,4.2vw,48px);margin:14px 0 16px}
.ba-copy p{font-size:17px;color:var(--pizarra);margin-bottom:16px}
.ba-list{list-style:none;margin:20px 0 28px}
.ba-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;font-size:15.5px}
.ba-list .chk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--espuma);display:flex;align-items:center;justify-content:center;margin-top:2px}
.ba-list .chk svg{width:13px;height:13px;stroke:var(--azul);stroke-width:2.6;fill:none}
.ba-slider{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);cursor:ew-resize;user-select:none;background:#000}
.ba-layer{position:absolute;inset:0;background-size:cover;background-position:center}
.ba-after{background:linear-gradient(140deg,#d6edf8,#eef8fc 55%,#fff)}
.ba-before{background:linear-gradient(140deg,#0f2f4d,#26557d 60%,#3d7ba3);clip-path:inset(0 50% 0 0)}
.ba-tag{position:absolute;top:15px;font-family:var(--sans);font-weight:600;font-size:12.5px;padding:6px 14px;border-radius:100px}
.ba-tag.b{left:15px;background:rgba(13,59,102,.82);color:#fff}
.ba-tag.a{right:15px;background:rgba(255,255,255,.94);color:var(--marino)}
.ba-note{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-size:11px;color:var(--pizarra);
  background:rgba(255,255,255,.82);padding:5px 12px;border-radius:8px;white-space:nowrap}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 16px rgba(0,0,0,.3)}
.ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.ba-knob svg{width:22px;height:22px;stroke:var(--azul);stroke-width:2;fill:none}

/* ===== pasos ===== */
.pasos{position:relative}
.pasos-line{position:absolute;top:66px;left:0;width:100%;height:120px;z-index:0;pointer-events:none}
.pasos-line svg{width:100%;height:100%;overflow:visible}
.pasos-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.paso{text-align:center;padding:0 10px}
.paso .num{width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:#fff;border:2px solid var(--espuma);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:800;font-size:29px;color:var(--azul);box-shadow:var(--shadow-s)}
.paso h3{font-size:20px;font-weight:600;margin-bottom:9px}
.paso p{font-size:15px;color:var(--pizarra)}

/* ===== método (biólogo + casos) ===== */
.metodo{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.expert{background:#fff;border:1px solid var(--linea);border-radius:22px;padding:34px;box-shadow:var(--shadow-s)}
.expert .who{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.expert .ava{width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,var(--azul),var(--marino));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--sans);font-weight:800;font-size:22px;flex:none}
.expert .who h3{font-size:20px;font-weight:600}
.expert .who span{font-size:14px;color:var(--azul-d);font-weight:500}
.expert p{font-size:15.5px;color:var(--pizarra)}
.casos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.caso{background:#fff;border:1px solid var(--linea);border-radius:15px;padding:18px 18px;box-shadow:var(--shadow-s);transition:transform .3s,border-color .3s}
.caso:hover{transform:translateY(-4px);border-color:#bfe0f0}
.caso .ci{width:40px;height:40px;border-radius:11px;background:var(--espuma);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.caso .ci svg{width:21px;height:21px;stroke:var(--azul);fill:none;stroke-width:1.8}
.caso h4{font-family:var(--sans);font-weight:600;font-size:15.5px;margin-bottom:5px;color:var(--marino)}
.caso p{font-size:13px;color:var(--pizarra);line-height:1.5}

/* ===== zonas + mapa interactivo ===== */
.zonas{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.map-wrap{position:relative;background:#fff;border:1px solid var(--linea);border-radius:22px;padding:22px;box-shadow:var(--shadow-s)}
.map-wrap svg{width:100%;height:auto;display:block}
.map-coast{fill:#eaf3f8;stroke:#cfe4ef;stroke-width:1.5}
.map-sea{fill:#f4fafd}
.map-pin{cursor:pointer}
.map-pin .dot{fill:#fff;stroke:var(--azul);stroke-width:2.5;transition:all .25s}
.map-pin .ring{fill:none;stroke:var(--azul);stroke-width:2;opacity:0;transform-origin:center}
.map-pin .lbl{font-family:var(--sans);font-weight:600;font-size:13px;fill:var(--marino)}
.map-pin:hover .dot{fill:var(--espuma)}
.map-pin.on .dot{fill:var(--coral);stroke:var(--coral-d)}
.map-pin.on .lbl{fill:var(--coral-d)}
.map-pin.on .ring{opacity:1;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{r:14;opacity:.6}100%{r:26;opacity:0}}
.map-sel{margin-top:16px;font-family:var(--sans);font-weight:500;font-size:15px;color:var(--marino);min-height:24px}
.map-sel b{color:var(--coral-d)}
.zona-copy h2{font-size:clamp(28px,4vw,46px);margin:14px 0 16px}
.zona-copy p{font-size:16.5px;color:var(--pizarra)}
.zona-note{margin-top:18px;font-size:14px;color:var(--pizarra);display:flex;gap:9px;align-items:flex-start}
.zona-note svg{width:17px;height:17px;flex:none;margin-top:4px;stroke:var(--azul);fill:none;stroke-width:2}

/* ===== faq accordion ===== */
.faq{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--linea);border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-s)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:var(--sans);font-weight:600;font-size:16.5px;color:var(--marino)}
.faq-q .ic{flex:none;width:24px;height:24px;transition:transform .3s}
.faq-q .ic svg{width:24px;height:24px;stroke:var(--azul);fill:none;stroke-width:2}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a .in{padding:0 22px 20px;font-size:15.5px;color:var(--pizarra)}

/* ===== stat band ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{background:rgba(255,255,255,.12);border-radius:18px;padding:26px 22px}
.stat .n{font-family:var(--sans);font-weight:800;font-size:23px;line-height:1.15}
.stat .l{font-size:13.5px;color:rgba(255,255,255,.85);margin-top:8px}

/* ===== cta band ===== */
.cta-band{text-align:center}
.cta-band .inner{max-width:720px;margin:0 auto}
.cta-band h2{font-size:clamp(32px,5vw,58px);margin:12px 0 18px}
.cta-band p{font-size:19px;margin-bottom:32px}

/* ===== notice (contenido por confirmar) ===== */
.notice{background:#fff7ed;border:1px dashed #f0b982;border-radius:14px;padding:16px 20px;font-size:14px;color:#8a5a1e;margin-top:16px}
.notice b{color:#7a4d15}

/* ===== footer ===== */
footer{background:var(--marino);color:#fff;padding:76px 0 38px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;margin-bottom:46px}
footer .flogo{height:42px;margin-bottom:18px}
.foot-brand p{color:rgba(255,255,255,.62);font-size:15px;max-width:330px}
.foot-col h4{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7fc4e8;margin-bottom:16px}
.foot-col a,.foot-col p{display:block;color:rgba(255,255,255,.78);font-size:15px;margin-bottom:11px;transition:color .25s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:rgba(255,255,255,.5)}

/* ===== floating whatsapp ===== */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:60;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform .3s;animation:waPulse 2.6s ease-in-out infinite}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}
@keyframes waPulse{0%,100%{box-shadow:0 10px 30px rgba(37,211,102,.45)}50%{box-shadow:0 10px 42px rgba(37,211,102,.72)}}

/* ===== responsive ===== */
@media(max-width:900px){
  section{padding:80px 0}
  .split,.ba,.metodo,.zonas{grid-template-columns:1fr;gap:34px}
  .grid-3,.pasos-grid,.stats{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pasos-line{display:none}
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--marino);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);padding:40px;z-index:55}
  .nav-links.open{transform:translateX(0)}
  .nav-links a.lnk{color:#fff!important;font-size:18px}
  .nav-toggle{display:block}
}
@media(max-width:560px){
  .grid-3,.grid-2,.pasos-grid,.stats,.casos,.foot-grid{grid-template-columns:1fr}
  .wrap{padding:0 20px}
  .nav-inner{padding:0 20px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .wa-float,.map-pin.on .ring{animation:none}
}

/* ===== Hero a 2 columnas con imagen (22 jul 2026) ===== */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.hero-media{position:relative}
.hero-media img{width:100%;height:auto;border-radius:20px;box-shadow:0 34px 70px -24px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero-media{order:2;max-width:560px}}