/* VARECORP · marca Ruta Andina (verde andino + ámbar). Página pública www.varecorp.com */
:root{
  --verde:#0E3B36; --verde2:#155049; --ambar:#E8A33D; --ambar-t:#8A5A0B;
  --svp:#0B3FB3; --msv:#7A3B22; --carbon:#1B1F1E; --gris:#4D5653;
  --piedra:#F2F1EC; --linea:#DAD8CF; --blanco:#fff;
  --tit:"Big Shoulders Display","Archivo Narrow",Impact,sans-serif;
  --txt:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--txt);font-size:17px;line-height:1.55;color:var(--carbon);background:var(--piedra)}
img,svg{display:block}
a{color:var(--ambar-t)}a:hover{color:#5E3D06}
h1,h2,h3{font-family:var(--tit);font-weight:900;text-transform:uppercase;line-height:.95;margin:0;letter-spacing:.01em}
h2{font-size:clamp(38px,5vw,56px);color:var(--verde);margin-bottom:22px}
h3{font-size:24px;letter-spacing:.02em}
p{margin:0}
[hidden]{display:none!important}
.envoltura{max-width:1200px;margin:0 auto;padding:0 24px}
.saltar{position:absolute;left:-999px;top:8px;background:var(--ambar);color:var(--carbon);padding:10px 14px;border-radius:8px;z-index:50}
.saltar:focus{left:12px}
.antetitulo{font-size:14px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--ambar-t);margin-bottom:8px}
.nota{font-size:14px;color:var(--gris);margin-top:12px}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;text-decoration:none;border:2px solid transparent;border-radius:999px;padding:13px 26px;cursor:pointer;min-height:48px}
.boton.primario{background:var(--ambar);color:var(--carbon)}
.boton.primario:hover{background:#F0B65E;color:var(--carbon)}
.boton.secundario{background:transparent;border-color:var(--verde);color:var(--verde)}
.portada .boton.secundario{border-color:#fff;color:#fff}
.boton.contorno{border-color:var(--verde);color:var(--verde);background:transparent}
.boton.chico{padding:9px 18px;min-height:44px;font-size:15px}
.boton.ancho{width:100%}
.boton:disabled{opacity:.6;cursor:wait}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:20;background:rgba(242,241,236,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--linea)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--verde)}
.marca img{width:42px;height:42px}
.marca b{display:block;font-family:var(--tit);font-weight:900;font-size:30px;letter-spacing:.05em;line-height:1}
.marca small{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ambar-t);font-weight:700}
.nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.nav a{color:var(--carbon);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--ambar-t)}

/* Portada */
.portada{padding:28px 0 56px}
.portada-rejilla{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:stretch}
.portada-texto{padding:24px 0}
.portada h1{font-size:clamp(46px,8vw,96px);color:var(--verde);line-height:.86;margin:10px 0 20px}
.portada .lead{font-size:20px;color:var(--gris);max-width:560px}
.portada .botones .boton.secundario{border-color:var(--verde);color:var(--verde)}
.paisaje{position:relative;min-height:400px;border-radius:22px;background:var(--verde);overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.paisaje svg.sierra{position:absolute;inset:0;width:100%;height:100%}
.garantias{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.garantias li{display:flex;gap:10px;align-items:flex-start;background:rgba(14,59,54,.72);border-radius:12px;padding:10px 12px}
.garantias svg{width:22px;height:22px;color:var(--ambar);flex:none;margin-top:2px}
.garantias b{display:block}
.garantias span{font-size:15px;color:#E4EEEC}

/* Secciones */
.seccion{padding:64px 0}
.seccion.alterna{background:#fff}

/* Servicios: filas numeradas */
.servicios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.servicio{position:relative;background:#fff;border-radius:var(--radio);padding:26px 24px 24px 92px;border:1px solid var(--linea);display:flex;flex-direction:column;gap:8px}
.servicio .icono{position:absolute;left:22px;top:24px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--verde)}
.servicio .icono svg{width:28px;height:28px;color:var(--ambar)}
.servicio.svp .icono{background:var(--svp)}
.servicio.msv .icono{background:var(--msv)}
.servicio h3{color:var(--carbon)}
.servicio p{color:var(--gris)}
.servicio .etiqueta{align-self:flex-start;font-size:12px;font-weight:700;color:#fff;border-radius:999px;padding:4px 10px;letter-spacing:.04em}
.servicio.svp .etiqueta{background:var(--svp)}.servicio.msv .etiqueta{background:var(--msv)}
.enlace{font-weight:700;text-decoration:none;margin-top:4px}

/* Precios */
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.precio{background:var(--piedra);border-radius:var(--radio);padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--linea)}
.precio .producto{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:15px}
.precio .valor{font-family:var(--tit);font-weight:900;font-size:40px;color:var(--verde);white-space:nowrap}
.precio .valor small{font-family:var(--txt);font-size:13px;font-weight:600;color:var(--gris)}

/* Cotización */
.cot-rejilla{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:start}
.cot-intro p{color:var(--gris)}
.pasos{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.pasos li{display:flex;gap:12px;align-items:center}
.pasos b{font-family:var(--tit);font-size:30px;color:var(--ambar);width:34px}
.tarjeta{background:#fff;border-radius:20px;border:1px solid var(--linea)}
.formulario{background:var(--verde);color:#fff;border:0;padding:28px}
.formulario .nota{color:#CFE0DC}
.tipos{border:0;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.tipos legend{font-weight:700;margin-bottom:8px}
.tipos label{cursor:pointer}
.tipos input{position:absolute;opacity:0}
.tipos span{display:inline-block;border:2px solid rgba(255,255,255,.4);border-radius:999px;padding:9px 16px;font-weight:600}
.tipos input:checked+span{background:var(--ambar);border-color:var(--ambar);color:var(--carbon)}
.tipos input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.campos .c2,.campos .grupo{grid-column:1/-1}
.campos .grupo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.campos label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
.campos .opc{font-weight:400;color:#CFE0DC}
.campos input,.campos select,.campos textarea{font:inherit;font-size:16px;padding:12px 14px;border:0;border-radius:10px;background:#fff;color:var(--carbon);width:100%}
.campos [aria-invalid="true"]{outline:3px solid #FF8A65}
.trampa{position:absolute!important;left:-9999px}
.formulario .boton.primario{margin-top:16px}
.estado{margin-top:12px;font-weight:600}
.estado.ok{color:#B9F3C9}.estado.error{color:#FFD1B8}.estado a{color:#fff}

/* Ubicación */
.ubic-rejilla{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.direccion{display:flex;gap:10px;align-items:flex-start;font-size:19px;font-weight:600}
.direccion svg{width:26px;height:26px;color:var(--ambar-t);flex:none}
.horario{margin-top:10px;color:var(--gris)}
.mapa{border-radius:20px;overflow:hidden;min-height:340px;background:#DCE3DF;border:1px solid var(--linea)}
.mapa iframe{width:100%;height:100%;min-height:340px;border:0;display:block}

/* Empresas */
.empresas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.empresa{display:flex;gap:16px;align-items:center;padding:22px}
.empresa img{width:64px;height:64px;flex:none}
.empresa h3{font-size:22px}
.empresa.svp h3{color:var(--svp)}.empresa.msv h3{color:var(--msv)}
.ruc{font-size:14px;color:var(--gris);margin:4px 0}
.empresa p:last-child{color:var(--gris);font-size:15px}

/* Contacto */
.contactos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.contacto-item{display:flex;gap:12px;align-items:center;padding:18px;text-decoration:none;color:var(--carbon)}
.contacto-item svg{width:28px;height:28px;color:var(--verde);flex:none}
.contacto-item b{display:block}
.contacto-item:hover{border-color:var(--ambar)}

/* Pie */
.pie{background:var(--verde);color:#CFE0DC;position:relative;overflow:hidden}
.pie svg.sierra{width:100%;height:70px}
.pie-rejilla{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;padding-top:10px;padding-bottom:26px}
.pie b{color:#fff;font-family:var(--tit);font-weight:900;font-size:28px;letter-spacing:.05em}
.pie p{font-size:14px;margin-top:6px}
.acceso{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.acceso b{font-family:var(--txt);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#CFE0DC;width:100%}
.acceso a{color:#fff;text-decoration:none;border:1px solid #3F6F68;border-radius:999px;padding:9px 16px}
.acceso a:hover{border-color:var(--ambar)}
.derechos{font-size:13px;padding-bottom:20px;color:#9FC0BA}

@media (max-width:900px){
  .portada-rejilla,.cot-rejilla,.ubic-rejilla{grid-template-columns:1fr}
  .paisaje{min-height:320px}
  .servicios,.empresas{grid-template-columns:1fr}
  .contactos{grid-template-columns:1fr}
  .nav{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .campos,.campos .grupo{grid-template-columns:1fr}
  .servicio{padding-left:24px;padding-top:88px}
  .cabecera .boton.chico{display:none}
  .precio .valor{font-size:34px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}