:root{
  --verde:#258C77;        /* extraído del logotipo */
  --verde-vivo:#00A06B;   /* gradiente del folleto */
  --verde-claro:#67BEAC;
  --carbon:#1E2422;
  --papel:#FFFFFF;
  --gris:#F2F5F4;
  --linea:#DCE5E2;
  --texto:#2A3330;
  --suave:#6B7B77;
  --display:'Archivo',system-ui,sans-serif;
  --cuerpo:'Source Sans 3',system-ui,sans-serif;
  --dato:'IBM Plex Mono',ui-monospace,monospace;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--texto);font-family:var(--cuerpo);font-weight:400;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:0 0 .5em;color:var(--carbon)}
h2{font-size:clamp(1.7rem,4vw,2.6rem)}
h2 em{font-style:normal;color:var(--verde);display:block}
h3{font-size:1.1rem;font-weight:600;letter-spacing:0}
p{margin:0 0 1em}
a{color:var(--verde)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;z-index:200;background:var(--verde);color:#fff;padding:10px 16px;font-family:var(--dato);font-size:.8rem}
section{padding:88px 0}
.gris{background:var(--gris)}
.oscuro{background:var(--carbon);color:#DCE5E2}
.oscuro h2,.oscuro h3{color:#fff}
.eyebrow{font-family:var(--dato);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--verde);display:block;margin-bottom:1.1rem}
.lead{font-size:1.15rem;color:var(--suave);max-width:64ch}
.oscuro .lead{color:#A9B8B4}

/* trama de puntos del folleto */
.puntos{display:grid;grid-template-columns:repeat(4,7px);gap:9px;margin-bottom:28px}
.puntos i{width:4px;height:4px;border-radius:50%;background:var(--verde)}
.puntos i:nth-child(4n){opacity:.35}
.puntos i:nth-child(7),.puntos i:nth-child(11),.puntos i:nth-child(12){opacity:.35}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 24px;max-width:var(--max);margin:0 auto}
.logo{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:.06em;color:var(--verde);text-decoration:none;line-height:1}
.logo small{display:block;font-family:var(--cuerpo);font-weight:400;font-size:.58rem;letter-spacing:.22em;color:var(--suave);margin-top:3px}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--dato);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);text-decoration:none}
.nav ul a:hover{color:var(--carbon)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:1px solid var(--linea);color:var(--carbon);padding:9px 12px;font-family:var(--dato);font-size:.72rem;cursor:pointer}
@media(max-width:960px){
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--linea);flex-direction:column;gap:0;padding:8px 0}
  .nav ul.open{display:flex}
  .nav ul li a{display:block;padding:14px 24px}
  .burger{display:block}
  .nav-cta .btn{display:none}
}

/* BOTONES */
.btn{display:inline-block;background:var(--verde);color:#fff;font-family:var(--dato);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;padding:14px 22px;text-decoration:none;font-weight:500;border:1px solid var(--verde);cursor:pointer}
.btn:hover{background:#1E7663;border-color:#1E7663}
.btn.ghost{background:transparent;color:var(--carbon);border-color:var(--linea)}
.btn.ghost:hover{border-color:var(--carbon);background:transparent}
.oscuro .btn.ghost{color:#fff;border-color:#3D4844}
.btn.sm{padding:10px 16px;font-size:.7rem}

/* HERO con la diagonal del folleto */
.hero{position:relative;overflow:hidden;padding:96px 0 88px;background:#fff}
.hero:before{content:"";position:absolute;top:-30%;right:-14%;width:78%;height:170%;
  background:linear-gradient(150deg,var(--verde-vivo),var(--verde) 45%,#1B7A67);
  transform:skewX(-18deg);z-index:0}
.hero .wrap{position:relative;z-index:1}
.hero .caja{max-width:640px;background:rgba(255,255,255,.94);padding:44px 40px 40px;border-left:4px solid var(--verde)}
.hero h1{font-size:clamp(2.2rem,5.6vw,3.9rem);text-transform:uppercase;max-width:16ch;line-height:1.02}
.hero p{max-width:52ch;font-size:1.15rem;color:var(--suave)}
.hero .acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.hero .fine{font-family:var(--dato);font-size:.72rem;color:var(--suave);margin-top:20px;letter-spacing:.04em}
@media(max-width:860px){.hero:before{width:100%;right:-40%;opacity:.92}.hero .caja{padding:32px 24px}}

/* FRANJA */
.franja{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linea);background:#fff}
.franja div{padding:24px 20px;border-right:1px solid var(--linea)}
.franja div:last-child{border-right:0}
.franja b{display:block;font-family:var(--display);font-size:1.9rem;font-weight:800;color:var(--verde);line-height:1}
.franja span{font-family:var(--dato);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);display:block;margin-top:8px}
@media(max-width:760px){.franja{grid-template-columns:1fr 1fr}.franja div{border-bottom:1px solid var(--linea)}.franja div:nth-child(2n){border-right:0}}

/* UNIFILAR — elemento firma */
.bus{height:3px;background:var(--verde);margin-top:52px}
.taps{display:flex}
.tap{flex:1;position:relative;padding:40px 20px 0 0;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:opacity .25s}
.tap:before{content:"";position:absolute;top:0;left:9px;width:1px;height:30px;background:var(--linea)}
.tap:after{content:"";position:absolute;top:-6px;left:5px;width:10px;height:10px;border:2px solid var(--verde);background:#fff;transform:rotate(45deg);transition:background .25s}
.oscuro .tap:after{background:var(--carbon)}
.tap .id{display:block;font-family:var(--dato);font-size:.68rem;color:var(--suave);letter-spacing:.14em}
.tap .tit{display:block;font-family:var(--display);font-weight:600;font-size:1.02rem;margin:8px 0;color:var(--carbon)}
.tap .desc{display:block;font-size:.93rem;color:var(--suave);line-height:1.5}
.taps:hover .tap{opacity:.35}
.taps .tap:hover,.taps .tap:focus-visible{opacity:1}
.taps .tap:hover:after,.taps .tap:focus-visible:after{background:var(--verde)}
@media(max-width:900px){
  .bus{display:none}
  .taps{flex-direction:column;border-left:3px solid var(--verde);margin-top:44px}
  .tap{padding:0 0 30px 26px}
  .tap:before{display:none}
  .tap:after{top:5px;left:-7px}
  .taps:hover .tap{opacity:1}
}

/* GRILLAS */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--linea);padding:26px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--verde);transform:translateY(-2px)}
.card p{font-size:.95rem;color:var(--suave);margin:0}
.card .id{font-family:var(--dato);font-size:.68rem;letter-spacing:.14em;color:var(--verde);display:block;margin-bottom:12px}

/* chevron del folleto */
.chev{display:inline-flex;align-items:center;gap:14px;margin-bottom:14px}
.chev svg{flex:none}
.chev .pill{background:var(--verde);color:#fff;font-family:var(--cuerpo);font-weight:600;font-size:1rem;padding:11px 22px;border-radius:26px}

/* SERVICIO ampliado */
.serv{border:1px solid var(--linea);background:#fff;padding:30px}
.serv ul{margin:0;padding-left:1.1em;font-size:.95rem;color:var(--suave)}
.serv li{margin-bottom:.5em}

/* CASOS */
.caso{background:#fff;border:1px solid var(--linea);display:flex;flex-direction:column}
.caso .foto{aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#EAF1EF,#EAF1EF 10px,#E1EAE7 10px,#E1EAE7 20px);border-bottom:1px solid var(--linea);display:flex;align-items:flex-end;padding:14px;font-family:var(--dato);font-size:.66rem;color:var(--suave);letter-spacing:.1em}
.caso .cuerpo{padding:22px;flex:1;display:flex;flex-direction:column}
.caso h3{font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1.18}
.caso p{font-size:.92rem;color:var(--suave);flex:1}
.caso .metrica{font-family:var(--dato);font-size:.76rem;color:var(--verde);border-top:1px solid var(--linea);padding-top:14px}

/* CHAPA */
.chapa{border:1px solid var(--linea);background:#fff;font-family:var(--dato);font-size:.8rem}
.oscuro .chapa{background:#26302D;border-color:#3D4844}
.chapa .fila{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--linea)}
.oscuro .chapa .fila{border-color:#3D4844}
.chapa .fila:last-child{border-bottom:0}
.chapa .k{color:var(--suave)}
.chapa .v a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(37,140,119,.35)}
.chapa .v a:hover{border-bottom-color:var(--verde)}
.oscuro .chapa .k{color:#8A9995}
.chapa .v{color:var(--verde);text-align:right;word-break:break-word}
.oscuro .chapa .v{color:var(--verde-claro)}

/* PROCESO */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linea);margin-top:38px;background:#fff}
.pasos>div{padding:26px 22px;border-right:1px solid var(--linea)}
.pasos>div:last-child{border-right:0}
.pasos .n{font-family:var(--dato);font-size:.7rem;letter-spacing:.16em;color:var(--verde);display:block;margin-bottom:14px}
.pasos h3{font-size:1rem;margin-bottom:.6em}
.pasos p{font-size:.9rem;color:var(--suave);margin:0}
@media(max-width:900px){.pasos{grid-template-columns:1fr}.pasos>div{border-right:0;border-bottom:1px solid var(--linea)}.pasos>div:last-child{border-bottom:0}}

/* GUARDIA */
.guardia{background:var(--carbon);color:#fff;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.guardia h3{color:#fff;font-size:1.6rem;font-weight:800;margin:0 0 .3em}
.guardia p{color:#A9B8B4;margin:0;max-width:46ch}
.guardia .n{font-family:var(--dato);font-size:.72rem;letter-spacing:.18em;color:var(--verde-claro);display:block;margin-bottom:12px}

/* TESTIMONIOS */
.quote{border-left:3px solid var(--verde);padding:6px 0 6px 24px}
.quote p{font-family:var(--display);font-weight:400;font-size:1.12rem;line-height:1.45;color:var(--carbon)}
.quote cite{font-family:var(--dato);font-size:.74rem;font-style:normal;color:var(--suave)}

/* FORMULARIO */
.form{border:1px solid var(--linea);background:#fff;padding:32px}
.progreso{font-family:var(--dato);font-size:.72rem;letter-spacing:.14em;color:var(--suave);text-transform:uppercase;margin-bottom:8px}
.barra{height:3px;background:var(--linea);margin-bottom:28px}
.barra i{display:block;height:3px;background:var(--verde);width:25%;transition:width .3s}
fieldset{border:0;padding:0;margin:0}
fieldset[hidden]{display:none}
legend{font-family:var(--display);font-weight:600;font-size:1.15rem;margin-bottom:18px;padding:0;color:var(--carbon)}
.ops{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.op{border:1px solid var(--linea);background:#fff;color:var(--carbon);font-family:var(--dato);font-size:.78rem;padding:13px 18px;cursor:pointer;min-height:46px}
.op:hover{border-color:var(--suave)}
.op[aria-pressed="true"]{border-color:var(--verde);color:var(--verde);background:#F0F7F5}
label{display:block;font-family:var(--dato);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);margin-bottom:7px}
input,select{width:100%;background:#fff;border:1px solid var(--linea);color:var(--carbon);font-family:var(--cuerpo);font-size:1rem;padding:13px 14px;margin-bottom:18px}
input:focus,select:focus{border-color:var(--verde);outline:none}
.acciones{display:flex;gap:10px;margin-top:8px}
.aviso{font-family:var(--dato);font-size:.73rem;color:var(--suave);margin-top:20px;line-height:1.6}
.ok{border:1px solid var(--verde);background:#F0F7F5;padding:26px;font-family:var(--dato);font-size:.88rem;color:var(--verde);line-height:1.7}

/* FOOTER */
footer{background:var(--carbon);color:#A9B8B4;padding:64px 0 40px;font-size:.94rem}
footer .logo{color:#fff}
footer .logo small{color:#8A9995}
footer h4{font-family:var(--dato);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-claro);font-weight:500;margin-bottom:14px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:8px}
footer a{color:#A9B8B4;text-decoration:none}
footer a:hover{color:#fff}
.legal{border-top:1px solid #3D4844;margin-top:44px;padding-top:24px;font-family:var(--dato);font-size:.72rem;color:#7C8C88;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rev.vis{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none}
}

/* fotografía */
.caso .foto{padding:0;background:#EAF1EF;position:relative}
.caso .foto picture,.caso .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.galeria figure{margin:0;background:#fff;border:1px solid var(--linea)}
.galeria .marco{aspect-ratio:4/3;position:relative;overflow:hidden;background:#EAF1EF}
.galeria picture,.galeria img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figcaption{font-family:var(--dato);font-size:.7rem;line-height:1.5;color:var(--suave);padding:10px 12px}
@media(max-width:1000px){.galeria{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.galeria{grid-template-columns:1fr}}
.hero-foto{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-foto picture,.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25)}
.hero-foto:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 38%,rgba(30,36,34,.55) 70%,rgba(37,140,119,.72) 100%)}
.nav .logo img{display:block;width:130px;height:auto}
@media(max-width:760px){.nav .logo img{width:110px}}
footer .logo img{display:block;width:150px;height:auto;filter:brightness(0) invert(1)}
.error{border:1px solid #C0392B;background:#FDEDEC;color:#922B21;padding:16px;font-family:var(--dato);font-size:.82rem}