:root{
  --ink:#0A3049;
  --ink-soft:#4A5C68;
  --brand:#0F659D;
  --brand-dark:#0A4E7C;
  --aqua:#0A6570;
  --aqua-bright:#26C6D9;
  --sand:#F3EEE3;
  --paper:#FFFEFB;
  --line:rgba(10,48,73,0.14);
  --maxw:1180px;
  --font-display:'Big Shoulders Display',system-ui,sans-serif;
  --font-body:'Roboto',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);}
section{position:relative;background:var(--paper);}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.03;
  margin:0;
  text-wrap:balance;
  letter-spacing:.2px;
}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem);}
h3{font-size:1.15rem;font-weight:700;}
p{margin:0;}

.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--aqua);
}
.eyebrow.on-dark{color:var(--aqua-bright);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:700;font-size:.98rem;
  padding:1rem 1.85rem;
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  border-radius:0;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.btn svg{flex:none;}
.btn:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:3px;}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand);}
.btn-outline:hover{background:var(--brand);color:#fff;}
.btn-outline.on-dark{color:#fff;border-color:#fff;}
.btn-outline.on-dark:hover{background:#fff;color:var(--ink);}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;}
.btn-block{width:100%;justify-content:center;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,254,251,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.85rem;}
.logo-link{display:flex;align-items:center;flex:none;}
.logo-link img{height:38px;width:auto;}
.main-nav{display:flex;align-items:center;gap:1.9rem;}
.main-nav a{
  font-size:.92rem;font-weight:500;color:var(--ink);text-decoration:none;
  position:relative;padding-block:.3rem;
}
.main-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--aqua-bright);
  transition:right .18s ease;
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{right:0;}
.main-nav a[aria-current="page"]{color:var(--brand);}
.header-actions{display:flex;align-items:center;gap:.6rem;}
.icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:0;
  color:var(--ink);background:transparent;
  transition:background .15s ease;
}
.icon-btn:hover{background:var(--sand);}
.btn-sm{padding:.7rem 1.3rem;font-size:.9rem;}
.menu-toggle{
  display:none;flex:none;width:38px;height:38px;border:none;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;
}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--ink);position:relative;
  transition:transform .2s ease,opacity .2s ease;
}
.menu-toggle span::before{position:absolute;top:-6px;}
.menu-toggle span::after{position:absolute;top:6px;}

/* ---------- hero (home) ---------- */
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;padding-block:clamp(2.5rem,6vw,5rem);
}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.2rem);margin-block:.5rem .9rem;color:var(--ink);}
.hero-lead{font-size:1.08rem;color:var(--ink-soft);max-width:46ch;margin-bottom:1.8rem;}

.hero-art{
  position:relative;aspect-ratio:1/1;background:var(--ink);
  border-radius:0;overflow:hidden;
}
.hero-art svg{position:absolute;inset:0;width:100%;height:100%;}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- efecto de agua: contenido solo dentro del hero, no toda la web ---------- */
.hero{position:relative;overflow:hidden;background:var(--paper);}
.hero .wrap{position:relative;z-index:1;}
/* la parte de abajo del hero es agua celeste: los botones necesitan su propio
   contraste ahí, no dependen de un fondo sólido detrás */
.hero .btn-primary{background:#fff;color:var(--brand-dark);border-color:#fff;box-shadow:0 10px 26px rgba(10,48,73,.22);}
.hero .btn-primary:hover{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark);}
.hero .btn-outline{background:rgba(10,48,73,.3);color:#fff;border-color:#fff;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.hero .btn-outline:hover{background:#fff;color:var(--brand-dark);border-color:#fff;}

/* la línea de agua está fija a mitad del hero (no depende del scroll de toda la
   página) y se mueve sola, apenas, todo el tiempo: 3 capas de olas prolijas y
   suaves (bezier periódico, sin costuras) apiladas de más clara a más oscura,
   cada una a su propia velocidad, más una franja sólida abajo que continúa el
   color de la capa más profunda. */
.hero-water{
  position:absolute;left:-6%;right:-6%;top:56%;bottom:-2px;overflow:hidden;pointer-events:none;
  --wh:300px;--ww1:340px;--ww2:420px;--ww3:520px;
}
.hero-water::before{
  content:"";position:absolute;left:0;right:0;top:var(--wh);bottom:0;
  background:linear-gradient(to bottom,#4FB8D8 0%,#3CA0C4 100%);
}
/* 3 capas, cada una pintada de arriba (y=0) hasta su propia curva, de la más
   angosta/clara (adelante, tapa a las demás) a la más profunda/oscura (atrás):
   así cada franja se asoma de verdad detrás de la anterior, como olas reales
   apiladas, en vez de una sola línea con una franja sólida abajo. Los tamaños
   salen de variables (--wh/--ww1/--ww2/--ww3) para poder reescalar todo el
   patrón en mobile sin duplicar el keyframe. */
.hero-water::after{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--wh);background:#4FB8D8;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20340%20300'%3E%3Cpath%20d='M0,55%20C85,37%2085,37%20170,55%20C255,73%20255,73%20340,55%20L340,0%20L0,0%20Z'%20fill='%23EAF6F9'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20420%20300'%3E%3Cpath%20d='M0,140%20C105,114%20105,114%20210,140%20C315,166%20315,166%20420,140%20L420,0%20L0,0%20Z'%20fill='%239BDCE9'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20520%20300'%3E%3Cpath%20d='M0,225%20C130,191%20130,191%20260,225%20C390,259%20390,259%20520,225%20L520,0%20L0,0%20Z'%20fill='%234FB8D8'/%3E%3C/svg%3E");
  background-repeat:repeat-x,repeat-x,repeat-x;
  background-size:var(--ww1) var(--wh),var(--ww2) var(--wh),var(--ww3) var(--wh);
  background-position:0 0,0 0,0 0;
  animation:hero-wave-drift 26s linear infinite,hero-wave-bob 8s ease-in-out infinite;
}
@keyframes hero-wave-drift{
  from{background-position:0 0,0 0,0 0;}
  to{background-position:calc(var(--ww1) * -1) 0,var(--ww2) 0,calc(var(--ww3) * -1) 0;}
}
@keyframes hero-wave-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@media (prefers-reduced-motion:reduce){
  .hero-water::after{animation:none;}
}
@media (max-width:900px){
  .hero-water{top:60%;--wh:190px;--ww1:215px;--ww2:266px;--ww3:329px;}
}

/* ---------- espacio para foto (placeholder a reemplazar por una imagen real) ---------- */
.photo-band{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:linear-gradient(135deg,var(--sand) 0%,#DCEEF2 100%);}
.photo-band-frame{
  position:absolute;inset:14px;border:2px dashed rgba(10,48,73,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;padding:1.5rem;
}
.photo-band-frame svg{color:var(--brand);opacity:.5;}
.photo-band-label{font-family:var(--font-body);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);}
.photo-band-desc{font-size:.92rem;color:var(--ink-soft);max-width:34rem;}
@media (max-width:700px){.photo-band{aspect-ratio:4/3;}}

/* ---------- page hero (subpages) ---------- */
.page-hero{background:var(--sand);border-bottom:1px solid var(--line);}
.page-hero .wrap{padding-block:clamp(2.75rem,6vw,4.5rem);max-width:52rem;}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-block:.6rem 1rem;color:var(--ink);}
.page-hero p{font-size:1.05rem;color:var(--ink-soft);max-width:56ch;}
.page-hero .btn-row{margin-top:1.8rem;}

/* variante con foto al lado (hogares/empresas), igual que el hero de la home */
.page-hero .wrap.page-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center;max-width:none;
}
.page-hero-grid .page-hero-copy{max-width:34rem;}
.page-hero-grid h1,.page-hero-grid p{max-width:none;}
/* placeholder de foto (mismo tratamiento que .photo-band) metido en el recuadro
   cuadrado del hero, para cuando todavía no hay imagen real */
.hero-art.placeholder{background:linear-gradient(135deg,var(--sand) 0%,#DCEEF2 100%);}
.hero-art .photo-band-frame{inset:10px;}
@media (max-width:900px){
  .page-hero .wrap.page-hero-grid{grid-template-columns:1fr;padding-block:clamp(2rem,6vw,3rem);}
}

/* ---------- diferenciales ---------- */
.diffs{padding-block:clamp(3rem,6vw,5rem);}
.diffs-head{max-width:52ch;margin-bottom:2.5rem;}
.diffs-head h2{margin-top:.5rem;color:var(--ink);}
.diffs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;}
.diff-item{border-top:2px solid var(--ink);padding-top:1.1rem;}
.diff-item svg{margin-bottom:1rem;color:var(--aqua);}
.diff-item h3{color:var(--ink);margin-bottom:.5rem;}
.diff-item p{color:var(--ink-soft);font-size:.95rem;}

/* ---------- publicos (diptych, home) ---------- */
.publicos{display:grid;grid-template-columns:1fr 1fr;}
.publico{padding:clamp(3rem,6vw,5rem) clamp(1.25rem,4vw,2.5rem);}
.publico-inner{max-width:30rem;}
.publico-hogar{background:var(--sand);color:var(--ink);}
.publico-hogar .publico-inner{margin-left:auto;padding-left:clamp(0px,2vw,2rem);}
.publico-empresa{background:var(--ink);color:var(--paper);}
.publico-empresa .publico-inner{margin-right:auto;padding-right:clamp(0px,2vw,2rem);}
.publico h2{margin-block:.5rem 1rem;}
.publico-hogar h2{color:var(--ink);}
.publico-empresa h2{color:var(--paper);}
.publico-desc{font-size:1rem;margin-bottom:1.4rem;}
.publico-hogar .publico-desc{color:var(--ink-soft);}
.publico-empresa .publico-desc{color:#C9D8DE;}
.publico-list{list-style:none;margin:0 0 1.9rem;padding:0;display:flex;flex-direction:column;gap:.6rem;}
.publico-list li{display:flex;gap:.65rem;font-size:.95rem;align-items:flex-start;}
.publico-list svg{flex:none;margin-top:.2rem;color:var(--aqua);}
.publico-empresa .publico-list svg{color:var(--aqua-bright);}
.publico-icon{margin-bottom:1.3rem;color:var(--aqua);}
.publico-empresa .publico-icon{color:var(--aqua-bright);}

/* ---------- proximamente ---------- */
.proximamente{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.proximamente .wrap{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:1.1rem;
}
.badge{
  flex:none;font-family:var(--font-body);font-weight:700;font-size:.7rem;letter-spacing:.1em;
  background:var(--ink);color:var(--paper);padding:.4rem .75rem;border-radius:0;
}
.proximamente p{font-size:.95rem;color:var(--ink);}
.proximamente strong{color:var(--brand);}

/* ---------- clientes ---------- */
.clientes{padding-block:clamp(3rem,6vw,5rem);}
.clientes-head{margin-bottom:2.25rem;max-width:52ch;}
.clientes-head h2{margin-top:.5rem;color:var(--ink);}
.clientes-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.cliente-card{
  background:var(--paper);display:flex;align-items:center;justify-content:center;
  padding:.9rem;aspect-ratio:2/1;
}
.cliente-card img{
  max-height:108px;width:auto;filter:grayscale(1);opacity:.68;
  transition:filter .2s ease,opacity .2s ease;
}
.cliente-card:hover img{filter:grayscale(0);opacity:1;}
.cliente-card.cta-card{
  background:var(--brand);color:#fff;text-decoration:none;flex-direction:column;gap:.35rem;
  transition:background .15s ease;
}
.cliente-card.cta-card:hover{background:var(--brand-dark);}
.cliente-card.cta-card svg{color:#fff;}
.cliente-card.cta-card span{font-size:.82rem;font-weight:700;text-align:center;line-height:1.25;}

/* ---------- stats ---------- */
.stats{
  background:var(--ink);color:var(--paper);
  padding-block:clamp(3rem,5vw,4rem);
}
.stats .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;text-align:center;}
.stat b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.4rem,5vw,3.4rem);color:var(--aqua-bright);
  font-variant-numeric:tabular-nums;line-height:1;
}
.stat span{display:block;margin-top:.6rem;font-size:.9rem;color:#C9D8DE;}

/* ---------- steps (hogares / empresas) ---------- */
.steps{padding-block:clamp(3rem,6vw,5rem);background:var(--sand);}
.steps-head{max-width:52ch;margin-bottom:2.5rem;}
.steps-head h2{margin-top:.5rem;color:var(--ink);}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink);}
.step{padding:1.75rem 1.75rem 0 1.75rem;border-right:1px solid var(--line);}
.step:first-child{padding-left:0;}
.step:last-child{border-right:none;}
.step b{
  display:block;font-family:var(--font-display);font-size:2.6rem;font-weight:800;
  color:var(--brand);line-height:1;margin-bottom:.75rem;
}
.step h3{color:var(--ink);margin-bottom:.5rem;}
.step p{color:var(--ink-soft);font-size:.95rem;}

/* ---------- beneficios list (hogares/empresas detail) ---------- */
.detalle{padding-block:clamp(3rem,6vw,5rem);}
.detalle .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.detalle-head p.eyebrow{margin-bottom:.5rem;}
.detalle-head h2{color:var(--ink);margin-bottom:1.1rem;}
.detalle-head p.lead{color:var(--ink-soft);font-size:1.02rem;}
.detalle-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.detalle-list li{
  display:flex;gap:.9rem;align-items:flex-start;padding-block:1rem;border-top:1px solid var(--line);
}
.detalle-list li:last-child{border-bottom:1px solid var(--line);}
.detalle-list svg{flex:none;margin-top:.15rem;color:var(--brand);}
.detalle-list h3{font-size:1rem;margin-bottom:.25rem;color:var(--ink);}
.detalle-list p{font-size:.92rem;color:var(--ink-soft);}

/* ---------- faq ---------- */
.faq{padding-block:clamp(3rem,6vw,5rem);background:var(--sand);}
.faq .wrap{max-width:52rem;}
.faq-head{margin-bottom:2rem;}
.faq-head h2{margin-top:.5rem;color:var(--ink);}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.15rem 0;font-weight:700;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{flex:none;font-family:var(--font-display);font-size:1.4rem;color:var(--brand);}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item p{padding-bottom:1.25rem;color:var(--ink-soft);font-size:.95rem;max-width:60ch;}

/* ---------- agua de red (empresas, servicio secundario) ---------- */
.agua-red{padding-block:clamp(2.5rem,5vw,3.5rem);background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.agua-red-inner{max-width:42rem;}
.agua-red h3{font-family:var(--font-body);font-size:1.2rem;font-weight:700;color:var(--ink);margin-block:.5rem .85rem;}
.agua-red p{color:var(--ink-soft);font-size:.96rem;margin-bottom:1.4rem;}

/* ---------- cta final ---------- */
.cta-final{padding-block:clamp(3.5rem,7vw,6rem);}
.cta-final .wrap{max-width:640px;text-align:center;}
.cta-final h2{color:var(--ink);margin-bottom:1rem;}
.cta-final p.lead{color:var(--ink-soft);font-size:1.05rem;margin-bottom:2.2rem;}
.cta-final .btn-row{justify-content:center;margin-bottom:1.6rem;}
.cta-final .zone{font-size:.88rem;color:var(--ink-soft);}

/* ---------- contact form ---------- */
.contact-block{padding-block:clamp(3rem,6vw,5rem);}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
.contact-info h2{color:var(--ink);margin-bottom:1rem;}
.contact-info p.lead{color:var(--ink-soft);margin-bottom:1.75rem;font-size:1.02rem;}
.contact-info ul{list-style:none;margin:0 0 2rem;padding:0;display:flex;flex-direction:column;gap:1rem;}
.contact-info li{display:flex;gap:.85rem;align-items:flex-start;font-size:.96rem;}
.contact-info li svg{flex:none;margin-top:.15rem;color:var(--brand);}
.contact-info li a{text-decoration:underline;text-underline-offset:2px;}
.contact-info li span{display:block;color:var(--ink-soft);font-size:.85rem;margin-top:.15rem;}

.form-card{background:var(--sand);padding:clamp(1.5rem,3vw,2.5rem);border:1px solid var(--line);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem;}
.field label{font-size:.82rem;font-weight:700;color:var(--ink);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.96rem;color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:0;
  padding:.75rem .85rem;width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);
}
.field textarea{resize:vertical;min-height:100px;}
.radio-group{display:flex;gap:1.5rem;}
.radio-option{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink);}
.radio-option input{width:auto;accent-color:var(--brand);}
.form-note{font-size:.78rem;color:var(--ink-soft);margin-top:1rem;}
.form-note a{color:var(--brand);}
.form-success{
  display:none;border:1.5px solid var(--brand);padding:1.5rem;align-items:flex-start;gap:1rem;background:var(--paper);
}
.form-success.is-visible{display:flex;}
.form-success svg{flex:none;color:var(--brand);margin-top:.15rem;}
.form-success h3{color:var(--ink);margin-bottom:.35rem;}
.form-success p{color:var(--ink-soft);font-size:.92rem;}

.form-error{
  display:none;border:1.5px solid #B3261E;padding:1.5rem;align-items:flex-start;gap:1rem;background:var(--paper);margin-bottom:1.25rem;
}
.form-error.is-visible{display:flex;}
.form-error svg{flex:none;color:#B3261E;margin-top:.15rem;}
.form-error h3{color:var(--ink);margin-bottom:.35rem;}
.form-error p{color:var(--ink-soft);font-size:.92rem;}
.form-error a{color:#B3261E;text-decoration:underline;}

/* honeypot: hidden from people, still reachable by bots that fill every field */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- confirmation (gracias) ---------- */
.confirm{padding-block:clamp(4.5rem,10vw,7rem);text-align:center;}
.confirm .wrap{max-width:34rem;}
.confirm-icon{
  width:64px;height:64px;border:2px solid var(--brand);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1.75rem;
}
.confirm h1{font-size:clamp(2rem,4vw,2.9rem);color:var(--ink);margin-bottom:1rem;}
.confirm p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:2.2rem;}
.confirm .btn-row{justify-content:center;}

/* ---------- 404 ---------- */
.notfound{padding-block:clamp(5rem,12vw,8rem);text-align:center;}
.notfound .wrap{max-width:34rem;}
.notfound b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(5rem,14vw,9rem);color:var(--sand);line-height:1;
  -webkit-text-stroke:2px var(--ink);color:transparent;
}
.notfound h1{font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--ink);margin-block:1rem;}
.notfound p{color:var(--ink-soft);margin-bottom:2rem;}
.notfound .btn-row{justify-content:center;}

/* ---------- legal doc ---------- */
.legal{padding-block:clamp(3rem,6vw,4.5rem);}
.legal .wrap{max-width:44rem;}
.legal h1{font-size:clamp(2rem,3.6vw,2.6rem);color:var(--ink);margin-bottom:.5rem;}
.legal .updated{font-size:.85rem;color:var(--ink-soft);margin-bottom:2.5rem;display:block;}
.legal h2{font-family:var(--font-body);font-size:1.15rem;font-weight:700;color:var(--brand);margin-block:2.25rem .85rem;}
.legal p{color:var(--ink-soft);font-size:.98rem;margin-bottom:1rem;}
.legal ul{color:var(--ink-soft);font-size:.98rem;padding-left:1.2rem;margin-bottom:1rem;}
.legal li{margin-bottom:.5rem;}
.legal strong{color:var(--ink);}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#C9D8DE;padding-block:3.5rem 1.75rem;}
.footer-grid{
  display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.5rem;
  padding-bottom:2.5rem;border-bottom:1px solid rgba(255,254,251,.14);
}
.footer-brand img{height:34px;margin-bottom:.9rem;}
.footer-brand p{font-size:.88rem;color:#9FB3BC;max-width:26ch;}
footer h4{
  font-family:var(--font-body);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--aqua-bright);margin:0 0 1rem;font-weight:700;
}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
footer a{text-decoration:none;font-size:.92rem;color:#DCE7EA;}
footer a:hover{color:var(--paper);}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;
  padding-top:1.5rem;font-size:.78rem;color:#8FA3AC;
}
.footer-bottom a{color:#8FA3AC;text-decoration:underline;}
.footer-links{display:flex;gap:1.25rem;flex-wrap:wrap;}

/* ---------- reveal (scroll-triggered entrances) ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}
.reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .7s ease,transform .7s ease;}
.reveal-left.is-visible{opacity:1;transform:none;}
.reveal-right{opacity:0;transform:translateX(32px);transition:opacity .7s ease,transform .7s ease;}
.reveal-right.is-visible{opacity:1;transform:none;}
.publico-empresa.reveal-right{transition-delay:.1s;}

/* staggered cascades: siblings share a trigger moment, delay fans them out */
.diffs-grid .diff-item:nth-child(1){transition-delay:0s;}
.diffs-grid .diff-item:nth-child(2){transition-delay:.08s;}
.diffs-grid .diff-item:nth-child(3){transition-delay:.16s;}
.diffs-grid .diff-item:nth-child(4){transition-delay:.24s;}

.clientes-grid .cliente-card:nth-child(1){transition-delay:0s;}
.clientes-grid .cliente-card:nth-child(2){transition-delay:.06s;}
.clientes-grid .cliente-card:nth-child(3){transition-delay:.12s;}
.clientes-grid .cliente-card:nth-child(4){transition-delay:.18s;}
.clientes-grid .cliente-card:nth-child(5){transition-delay:.24s;}
.clientes-grid .cliente-card:nth-child(6){transition-delay:.3s;}
.clientes-grid .cliente-card:nth-child(7){transition-delay:.36s;}
.clientes-grid .cliente-card:nth-child(8){transition-delay:.42s;}

.steps-grid .step:nth-child(1){transition-delay:0s;}
.steps-grid .step:nth-child(2){transition-delay:.1s;}
.steps-grid .step:nth-child(3){transition-delay:.2s;}

.detalle-list li:nth-child(1){transition-delay:0s;}
.detalle-list li:nth-child(2){transition-delay:.07s;}
.detalle-list li:nth-child(3){transition-delay:.14s;}
.detalle-list li:nth-child(4){transition-delay:.21s;}
.detalle-list li:nth-child(5){transition-delay:.28s;}
.detalle-list li:nth-child(6){transition-delay:.35s;}

.faq-item:nth-of-type(1){transition-delay:0s;}
.faq-item:nth-of-type(2){transition-delay:.06s;}
.faq-item:nth-of-type(3){transition-delay:.12s;}
.faq-item:nth-of-type(4){transition-delay:.18s;}
.faq-item:nth-of-type(5){transition-delay:.24s;}

.stats .wrap .stat:nth-child(1){transition-delay:0s;}
.stats .wrap .stat:nth-child(2){transition-delay:.1s;}
.stats .wrap .stat:nth-child(3){transition-delay:.2s;}

/* hero load-in (home, plays once on page load, no JS/scroll needed) */
@keyframes rise-in{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:none;}
}
.hero-copy > *{opacity:0;animation:rise-in .7s ease forwards;}
.hero-copy > *:nth-child(1){animation-delay:.05s;}
.hero-copy > *:nth-child(2){animation-delay:.16s;}
.hero-copy > *:nth-child(3){animation-delay:.27s;}
.hero-copy > *:nth-child(4){animation-delay:.38s;}
.hero-art{opacity:0;animation:rise-in .8s ease forwards;animation-delay:.22s;}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right{opacity:1;transform:none;transition:none;}
  .hero-copy > *,.hero-art{opacity:1;animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .main-nav{display:none;}
  .main-nav.nav-open{
    display:flex !important;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;
    box-shadow:0 12px 24px -12px rgba(10,48,73,.25);
  }
  .main-nav.nav-open a{width:100%;padding-block:.7rem;border-bottom:1px solid var(--line);}
  .menu-toggle{display:flex;}
  .menu-toggle[aria-expanded="true"] span{background:transparent;}
  .menu-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}
  .hero .wrap{grid-template-columns:1fr;}
  .hero-art{aspect-ratio:16/10;order:-1;}
  .diffs-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem 1.5rem;}
  .publicos{grid-template-columns:1fr;}
  .publico-hogar .publico-inner,.publico-empresa .publico-inner{margin-inline:auto;padding-inline:0;}
  .stats .wrap{grid-template-columns:1fr;gap:2rem;}
  .steps-grid{grid-template-columns:1fr;border-top:none;}
  .step{border-right:none;border-top:2px solid var(--ink);padding:1.75rem 0 0;}
  .detalle .wrap{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .clientes-grid{grid-template-columns:repeat(2,1fr);gap:1px;}
  .cliente-card{aspect-ratio:auto;padding:1.75rem 1.25rem;}
  .cliente-card img{max-height:84px;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  .btn{padding:.9rem 1.4rem;font-size:.92rem;}
  .cliente-card{padding:1.5rem 1rem;}
  .cliente-card img{max-height:68px;}
  .cliente-card.cta-card span{font-size:.78rem;}
}