/* =========================================================================
   VARION · Inteligencia agronómica — landing (varionagro.com)
   Base: dirección B "Campo claro" (menta + navy, hairlines, pastillas de marca)
   + A "Lote vivo" (placas isométricas del mismo lote)
   + C "De los datos a la decisión" (capas de información, prescripciones, degradé de marca)
   Marca: navy #002F37 · teal #016974 · verde #167108 · verde claro #7EDE56 · menta #F4FFEC
   Tipografía web: Zalando Sans Expanded (≈ Benzin) + Sora (≈ Pacaembu)
   ========================================================================= */

/* Respaldo métrico mientras cargan las webfonts: Arial (Windows/macOS/iOS) y Roboto (Android, que no trae Arial).
   Ajustado para que el texto ocupe lo mismo antes y después de la carga (sin salto de diseño). */
@font-face { font-family: "Varion Display Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 131%; ascent-override: 75%; descent-override: 19.5%; line-gap-override: 0%; }
@font-face { font-family: "Varion Display Fallback R"; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 129.5%; ascent-override: 75%; descent-override: 19.5%; line-gap-override: 0%; }
@font-face { font-family: "Varion Text Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 300 500; size-adjust: 113%; ascent-override: 85.5%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: "Varion Text Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 600 700; size-adjust: 115%; ascent-override: 85.5%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: "Varion Text Fallback R"; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); font-weight: 300 500; size-adjust: 111.5%; ascent-override: 85.5%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: "Varion Text Fallback R"; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); font-weight: 600 700; size-adjust: 114%; ascent-override: 85.5%; descent-override: 25.6%; line-gap-override: 0%; }

:root{
  --navy:#002F37;
  --teal:#016974;
  --green:#167108;
  --lgreen:#7EDE56;
  --mint:#F4FFEC;
  --white:#FFFFFF;

  --ink:#002F37;
  --ink-2:#3B6264;              /* texto secundario sobre menta/blanco */
  --ink-3:#4F7273;              /* pies de foto y leyendas */
  --line:rgba(0,47,55,.16);
  --line-strong:rgba(0,47,55,.88);

  --on-dark:#F4FFEC;
  --on-dark-2:rgba(244,255,236,.8);
  --line-dark:rgba(244,255,236,.2);

  --grad:linear-gradient(90deg,#002F37 0%,#016974 34%,#167108 66%,#7EDE56 100%);
  --seg1:linear-gradient(90deg,#002F37,#016974);
  --seg2:linear-gradient(90deg,#016974,#167108);
  --seg3:linear-gradient(90deg,#167108,#7EDE56);
  --seg4:linear-gradient(90deg,#7EDE56,#F4FFEC);

  --display:"Zalando Sans Expanded","Varion Display Fallback","Varion Display Fallback R","Helvetica Neue",Arial,sans-serif;
  --text:"Sora","Varion Text Fallback","Varion Text Fallback R","Segoe UI",Roboto,Arial,sans-serif;

  --g:clamp(18px, 4.6vw, 64px);           /* margen lateral */
  --max:1440px;                            /* ancho máximo con márgenes */
  --edge:max(var(--g), calc((100% - var(--max)) / 2 + var(--g)));  /* borde del contenido (en % del ancho útil, sin la barra de scroll) */
  --nav-h:84px;
  --sec:clamp(88px, 10vw, 152px);          /* aire vertical de las secciones */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 8px); }
body{
  margin:0; background:var(--mint); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-variant-numeric:proportional-nums; margin:0; color:inherit; font-weight:640; overflow-wrap:break-word; }
ol,ul{ list-style:none; margin:0; padding:0; }
figure{ margin:0; }
p{ margin:0; }
[hidden]{ display:none !important; }

.wrap{ max-width:var(--max); margin-inline:auto; padding-inline:var(--g); }

.skip{
  position:absolute; left:12px; top:-60px; z-index:50;
  background:var(--navy); color:var(--mint); padding:10px 16px; border-radius:999px;
  font:600 14px/1 var(--text); text-decoration:none;
}
.skip:focus{ top:12px; }
.skip:focus-visible{ border-radius:999px; }
@media (min-width: 360px){ .keep{ display:inline-block; } }   /* frases que pasan juntas a la línea siguiente; si no entran (texto ampliado), se parten por dentro */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:2px; }
.band--grad :focus-visible, .contact :focus-visible, .foot :focus-visible{ outline-color:var(--lgreen); }

/* ---------- piezas comunes ---------- */
.kicker{
  display:flex; align-items:center; gap:12px; margin:0;
  font:600 12px/1.3 var(--text); letter-spacing:.18em; text-transform:uppercase; color:var(--teal);
}
.kicker__pill{ flex:none; width:28px; height:10px; border-radius:999px; background:var(--grad); }
.kicker--dark{ color:var(--on-dark); }
.kicker--dark .kicker__pill{ background:linear-gradient(90deg,#016974,#167108 40%,#7EDE56 78%,#F4FFEC); }
.aims .kicker__pill{ background:linear-gradient(90deg,#002F37,#167108 45%,#7EDE56 80%,#F4FFEC); }   /* sobre el tramo teal de la banda: arranca en navy y salta el teal (que es el color del fondo ahí), así se ve la pastilla entera */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:52px; padding:0 26px 0 28px; border-radius:999px; white-space:nowrap;
  font:600 15px/1 var(--text); letter-spacing:.01em; text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}
.btn--navy{ background:var(--navy); color:var(--mint); }
.btn--navy:hover{ background:var(--teal); }
.btn--mint{ background:var(--mint); color:var(--navy); }
.btn--mint:hover{ background:var(--lgreen); }
.btn--sm{ min-height:42px; padding:0 20px; font-size:14px; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font:600 15px/1 var(--text); color:var(--ink); text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(50% + 14px) / 100% 1px no-repeat;
}
.link-arrow:hover{ color:var(--teal); }
.link-arrow--dark{ color:var(--mint); }
.link-arrow--dark:hover{ color:var(--lgreen); }

.cap{ font:400 13px/1.5 var(--text); color:var(--ink-3); letter-spacing:.01em; }
.lede, .sec__intro, .step__p, .presc__item p, .svc__p, .vals__item p, .aims__d, .calc__desc, .cap{ text-wrap:pretty; }
.cap--dark{ color:rgba(244,255,236,.86); }   /* un poco más claro: va sobre el tramo teal de la banda */

.sec{ padding-block:var(--sec); }
.sec__intro{ color:var(--ink-2); font-size:clamp(16px, 1.2vw, 18px); line-height:1.65; max-width:34em; }
.sec__intro + .sec__intro{ margin-top:1em; }

h2{ font-size:clamp(30px, 3.4vw, 50px); line-height:1.07; letter-spacing:-.02em; text-wrap:balance; }

.sec__head{
  display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:28px; align-items:end;
}
.sec__head .kicker{ grid-column:1 / -1; }
.sec__head h2{ grid-column:1 / span 7; align-self:start; }
.sec__head .sec__intro{ grid-column:8 / -1; }

/* leyendas */
.legend{ display:flex; flex-wrap:wrap; gap:6px 18px; font:500 12.5px/1.4 var(--text); color:var(--ink-3); }
.legend li, .legend span{ display:inline-flex; align-items:center; gap:8px; }
.sw{ display:inline-block; flex:none; width:22px; height:10px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(0,47,55,.45); }   /* el mismo contorno navy que separa las zonas en los esquemas (≥3:1 en la muestra más clara) */
.sw--hi{ background:var(--green); } .sw--mid{ background:var(--lgreen); } .sw--lo{ background:#D3EDC3; }
.lg{ display:inline-block; flex:none; }
.lg--pass{ width:22px; height:10px; background:linear-gradient(90deg, rgba(22,113,8,.25) 0 33%, rgba(22,113,8,.55) 33% 66%, rgba(22,113,8,.85) 66%); border-radius:2px; }
.lg--line{ width:22px; height:0; border-top:1.5px solid var(--teal); }
.lg--ring{ width:11px; height:11px; border-radius:50%; border:1.3px solid var(--navy); background:radial-gradient(circle, var(--navy) 1.6px, transparent 2px); }
.legend--fig:has(.ramp){ flex-wrap:nowrap; column-gap:8px; }   /* misma separación muestra/texto que las demás leyendas */
.legend--fig:has(.ramp) > span:last-child{ text-wrap:balance; }
.legend--dark{ color:var(--on-dark-2); }
.lg--seed{ width:22px; height:10px; background:radial-gradient(circle, var(--mint) 1.05px, transparent 1.45px) 0 0 / 5.5px 5px; }
.sw--weed{ background:var(--lgreen); box-shadow:none; }
/* Referencias del mapa de malezas real (colores tomados del mapa) */
.maplegend{ margin-top:26px; }
.maplegend__t{ margin:0 0 10px; font:600 11.5px/1.3 var(--text); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.maplegend .legend{ list-style:none; margin:0; padding:0; }
.sw--m-clean{ background:#64A46E; } .sw--m-weed{ background:#D29A45; } .sw--m-high{ background:#8E4840; }
.ramp{ display:inline-flex !important; gap:2px !important; }
.ramp i{ display:block; width:11px; height:10px; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,47,55,.45); }
.ramp i:nth-child(1){ background:#D5E7E5; } .ramp i:nth-child(2){ background:#8DBDC0; }
.ramp i:nth-child(3){ background:#3F8D95; } .ramp i:nth-child(4){ background:var(--teal); }
.ramp--dark i{ box-shadow:inset 0 0 0 1px rgba(244,255,236,.3); }
.ramp--dark i:nth-child(1){ box-shadow:inset 0 0 0 1px rgba(244,255,236,.7); }
.ramp--dark i:nth-child(1){ background:rgba(1,105,116,.6); } .ramp--dark i:nth-child(2){ background:#6EACAA; } .ramp--dark i:nth-child(3){ background:rgba(244,255,236,.95); }

/* =============================== NAV =============================== */
.nav{
  position:sticky; top:0; z-index:30; background:var(--mint);
  box-shadow:0 1px 0 transparent; transition:box-shadow .2s ease;
}
.nav.is-scrolled{ box-shadow:0 1px 0 var(--line); }
.nav__in{ height:var(--nav-h); display:flex; align-items:center; gap:clamp(20px, 2.6vw, 40px); }
.nav__brand{ display:block; flex:none; margin-left:-2px; }
.nav__brand img{ width:172px; height:auto; }
.nav__links{ margin-left:auto; display:flex; gap:clamp(18px, 2.1vw, 34px); }
.nav__links a{ font:500 14px/1 var(--text); color:var(--ink-2); text-decoration:none; padding:10px 0; }
.nav__links a:hover{ color:var(--ink); }
.nav__toggle{
  margin-left:auto; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 2px;
  background:none; border:0; color:var(--ink); cursor:pointer;
  font:600 14px/1 var(--text);
}
.nav__toggle-i{ position:relative; width:20px; height:10px; }
.nav__toggle-i::before, .nav__toggle-i::after{
  content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .2s ease, top .2s ease;
}
.nav__toggle-i::before{ top:0; } .nav__toggle-i::after{ top:8.5px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-i::before{ top:4.25px; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-i::after{ top:4.25px; transform:rotate(-45deg); }

.menu{
  position:absolute; left:0; right:0; top:100%;
  background:var(--mint); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  max-height:calc(100svh - var(--nav-h)); overflow-y:auto; scroll-padding-block:8px 30px;
}
.menu__list{ display:grid; padding-block:6px 26px; }
.menu__list li{ border-top:1px solid var(--line); }
.menu__list li:first-child{ border-top:0; }
.menu__list a:not(.btn){ display:block; padding:17px 0; font:600 19px/1.2 var(--display); text-decoration:none; color:var(--ink); }
.menu__list .menu__cta{ border-top:0; padding-top:18px; }
.menu__cta .btn{ width:100%; }

/* =============================== HÉROE =============================== */
.hero{
  container-type:inline-size;
  display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  align-items:center; column-gap:clamp(40px, 5vw, 88px);
  padding-left:var(--edge); padding-top:clamp(8px, 2vh, 24px);
}
.hero__text{ max-width:640px; padding-block:24px; }
.kicker--hero{ flex-wrap:wrap; row-gap:6px; }
.kicker__sep{ width:18px; height:1px; background:currentColor; opacity:.5; }
.hero h1{
  margin:26px 0 28px;
  font-weight:660; font-size:clamp(34px, 4.2vw, 64px); line-height:1.04; letter-spacing:-.022em;
  text-wrap:balance; color:var(--ink);
}
.hero .hl{ color:var(--green); }
.lede{ font-size:clamp(17px, 1.3vw, 19px); line-height:1.6; color:var(--ink-2); max-width:30em; }
.hero__actions{ margin-top:40px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; }

.hero__media img{
  width:100%; height:clamp(420px, min(calc(100svh - var(--nav-h) - 196px), 52vw), 700px);
  object-fit:cover; object-position:58% 50%;
  border-radius:999px 0 0 999px; background:#2C4A3A;
}
/* 100cqw = ancho del contenido de .hero (sin su margen izquierdo): da el mismo borde que la grilla en pantallas > 1440 px */

/* valores */
.values{ margin-top:clamp(28px, 3.6vh, 44px); border-block:1px solid var(--line); }
.values__in{ display:flex; align-items:center; gap:32px; min-height:84px; padding-block:18px; }
.values__label{ flex:none; width:clamp(150px, 16vw, 220px); font:600 12px/1.3 var(--text); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.values__list{ flex:1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); }
.values__list li{
  display:flex; align-items:center; gap:14px; padding:6px 24px;
  font:600 clamp(15px, 1.2vw, 18px)/1.25 var(--display); letter-spacing:-.005em;
  border-left:1px solid var(--line);
}
.vpill{ display:block; flex:none; width:34px; height:12px; border-radius:999px; }
.vpill--1{ background:var(--seg1); } .vpill--2{ background:var(--seg2); } .vpill--3{ background:var(--seg3); }

/* =============================== QUÉ HACEMOS =============================== */
.que{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:28px; align-items:start; }
.que__head{ grid-column:1 / -1; }
.que__head h2{ margin-top:28px; }
.que__text{ grid-column:1 / span 4; }
.capas{ grid-column:6 / -1; }
.capas__fig{ display:grid; grid-template-columns:minmax(0, 1fr) 290px; }
.capas__pic img{ width:100%; height:auto; }
.capas__labels{ position:relative; }
.capas__h{
  position:absolute; left:12px; top:var(--y); transform:translateY(calc(-50% - 34px));
  font:600 11.5px/16px var(--text); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.capas__src li{
  position:absolute; left:0; right:0; top:var(--y); transform:translateY(-50%);
  display:flex; align-items:baseline; gap:12px; padding-left:12px;
  font:500 clamp(13.5px, 1.05vw, 15px)/1.25 var(--text); color:var(--ink);
}
.capas__n{ flex:none; min-width:26px; font:650 12px/1 var(--display); font-variant-numeric:proportional-nums; color:var(--teal); letter-spacing:.02em; }
.capas__res{ position:absolute; left:0; right:0; bottom:calc(100% - var(--y) - 40.5px); padding-left:12px; }   /* mismo lugar que top:var(--y) − 35px con su alto normal (75,5 px), pero anclado abajo: si el texto crece, crece hacia arriba */
.capas__res .capas__h{ position:static; transform:none; margin-bottom:8px; }
.capas__res .capas__h--res{ color:var(--green); }
.capas__res-t{ font:640 17px/22px var(--display); letter-spacing:-.005em; color:var(--ink); }
.capas__res .legend{ margin-top:12px; }

/* =============================== MÉTODO =============================== */
.sec--metodo{ background:var(--white); }
.steps{
  --sg:clamp(40px, 5vw, 80px);
  margin-top:clamp(56px, 7vw, 104px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--sg);
  border-top:1px solid var(--line-strong);
}
.step{ position:relative; padding-top:30px; display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:0; align-content:start; }
.step + .step::before{ content:""; position:absolute; top:0; bottom:0; left:calc(var(--sg) / -2); border-left:1px solid var(--line); }
.step__n{
  font:300 clamp(64px, 6.4vw, 100px)/.9 var(--text); letter-spacing:-.04em; color:var(--navy);
  font-variant-numeric:proportional-nums; margin-left:-.065em;   /* compensa el margen lateral del glifo: la tinta arranca en el borde de la columna */
}
.step h3{ margin-top:22px; font-weight:640; font-size:clamp(19px, 1.5vw, 22px); line-height:1.22; letter-spacing:-.01em; text-wrap:balance; }
.step__fig{ margin-top:28px; }
.step__fig img{ width:100%; height:auto; }
.legend--fig{ margin-top:16px; }
.step__p{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-2); font-size:15.5px; line-height:1.65; max-width:30em; }

/* =============================== MANEJO VARIABLE (banda degradé) =============================== */
.band--grad{
  --ramp:clamp(120px, 15vw, 230px);
  color:var(--on-dark);
  padding-top:var(--sec); padding-bottom:calc(var(--sec) * .45 + var(--ramp));
  background:
    linear-gradient(180deg, #167108 0%, #3A951F 22%, #7EDE56 52%, #C2F0A8 78%, #F4FFEC 100%) bottom / 100% var(--ramp) no-repeat,
    linear-gradient(180deg, #002F37 0%, #002F37 22%, #01434C 48%, #016974 74%, #0E6D45 90%, #167108 100%) top / 100% calc(100% - var(--ramp) + 1px) no-repeat;
}
.band--grad .sec__intro{ color:var(--on-dark-2); }
.band--grad + .sec{ padding-top:calc(var(--sec) * .6); }    /* el remate claro de la banda ya hace de aire */
.presc{
  --pg:clamp(40px, 5vw, 80px);
  margin-top:clamp(56px, 6.5vw, 96px);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--pg);
}
.presc__item{ position:relative; }
.presc__item + .presc__item::before{ content:""; position:absolute; top:0; bottom:0; left:calc(var(--pg) / -2); border-left:1px solid var(--line-dark); }
.presc__item img{ width:100%; height:auto; }
.presc__item h3{ margin-top:30px; font-size:clamp(19px, 1.5vw, 22px); line-height:1.22; letter-spacing:-.01em; text-wrap:balance; }
.presc__item p{ margin-top:12px; color:var(--on-dark-2); font-size:15.5px; line-height:1.6; max-width:30em; }

.aims{ margin-top:clamp(72px, 8vw, 120px); }
.aims__list{
  --ag:clamp(40px, 5vw, 80px);
  margin-top:26px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--ag);
  border-top:1px solid rgba(244,255,236,.5);
}
.aims__list li{ position:relative; padding-top:26px; display:grid; gap:12px; align-content:start; }
.aims__list li + li::before{ content:""; position:absolute; top:0; bottom:0; left:calc(var(--ag) / -2); border-left:1px solid var(--line-dark); }
.aims__w{ font:640 clamp(26px, 2.7vw, 40px)/1.05 var(--display); letter-spacing:-.02em; }
.aims__d{ color:var(--on-dark); font-size:clamp(15px, 1.15vw, 17px); line-height:1.5; max-width:24em; }

/* =============================== SERVICIOS =============================== */
.services{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:48px; }
.services__head{ grid-column:1 / span 4; align-self:start; position:sticky; top:calc(var(--nav-h) + 48px); }
.services__head h2{ margin:28px calc((100% + 24px) / -4) 28px 0; }   /* el título usa también la columna libre de al lado: «Del diagnóstico» entra en una línea */
.svc{ grid-column:6 / -1; border-top:1px solid var(--line-strong); }
.svc__row{
  display:grid; grid-template-columns:clamp(64px, 7vw, 96px) minmax(0,1fr); column-gap:12px;
  padding:32px 0 36px; border-bottom:1px solid var(--line);
}
.svc__n{
  grid-row:1 / span 3; margin-top:-1px;
  font:600 15px/1 var(--display); font-variant-numeric:proportional-nums; color:var(--teal); letter-spacing:.02em;
}
.svc__n::after{ content:""; display:block; width:30px; height:10px; border-radius:999px; margin-top:14px; }
.svc__row:nth-child(1) .svc__n::after{ background:var(--seg1); }
.svc__row:nth-child(2) .svc__n::after{ background:var(--seg2); }
.svc__row:nth-child(3) .svc__n::after{ background:var(--seg3); }
.svc__row:nth-child(4) .svc__n::after{ background:var(--seg4); box-shadow:inset 0 0 0 1px rgba(0,47,55,.1); }
.svc__tag{ font:600 11.5px/1.3 var(--text); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.svc__row h3{ margin-top:10px; font-weight:630; font-size:clamp(20px, 1.9vw, 28px); line-height:1.15; letter-spacing:-.015em; text-wrap:balance; }
.svc__p{ margin-top:12px; color:var(--ink-2); font-size:16px; line-height:1.65; max-width:36em; }

/* =============================== PULVERIZACIÓN SELECTIVA =============================== */
.sec--sel{ background:var(--white); }
.sel{
  container-type:inline-size;
  display:grid; grid-template-columns:minmax(0, 1.04fr) minmax(0, .96fr);
  align-items:center; column-gap:clamp(40px, 5.5vw, 104px);
  padding-right:var(--edge);
}
.sel__media img{
  width:100%; height:clamp(380px, 44vw, 640px);
  object-fit:cover; object-position:40% 50%;
  border-radius:0 999px 999px 0; background:#6E8F5A;
}
.sel__text{ min-width:0; }
.sel__text h2{ margin:28px 0 30px; }
.sel__steps{ border-top:1px solid var(--line-strong); }
.sel__steps li{
  display:grid; grid-template-columns:40px minmax(0,36em); gap:12px; align-items:baseline;
  padding:14px 0; border-bottom:1px solid var(--line);
  font-size:16px; line-height:1.55; color:var(--ink);
}
.sel__n{ font:600 12.5px/1 var(--display); font-variant-numeric:proportional-nums; color:var(--teal); letter-spacing:.02em; }

.calc{
  margin-top:44px; display:grid; gap:10px;
  padding-top:22px; border-top:1px solid var(--line-strong);
  text-decoration:none; color:var(--ink);
}
.calc__label{ font:600 11.5px/1.3 var(--text); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); }
.calc__title{ font:620 clamp(19px, 1.55vw, 22px)/1.25 var(--display); letter-spacing:-.01em; text-wrap:balance; }
.calc__desc{ color:var(--ink-2); font-size:15.5px; line-height:1.6; max-width:36em; }
.calc__go{
  margin-top:10px; justify-self:start; display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:0 22px; border-radius:999px; background:var(--navy); color:var(--mint);
  font:600 15px/1 var(--text); transition:background-color .2s ease;
}
.calc:hover .calc__go{ background:var(--teal); }
.calc:hover .calc__title{ color:var(--teal); }

/* =============================== ENFOQUE =============================== */
.aim{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:28px; }
.aim__k{ grid-column:1 / span 3; align-self:start; padding-top:.9em; }
.aim__body{ grid-column:4 / -1; }
.aim__quote{
  font:540 clamp(25px, 2.8vw, 42px)/1.22 var(--display); letter-spacing:-.016em; color:var(--ink);
  text-wrap:pretty; max-width:26em;
}
.vals{
  --vg:clamp(28px, 3.4vw, 56px);
  margin-top:clamp(48px, 5vw, 72px); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:var(--vg);
  border-top:1px solid var(--line-strong);
}
.vals__item{ position:relative; padding-top:26px; }
.vals__item + .vals__item::before{ content:""; position:absolute; top:0; bottom:0; left:calc(var(--vg) / -2); border-left:1px solid var(--line); }
.vals__item h3{ margin-top:18px; font-size:clamp(18px, 1.45vw, 21px); line-height:1.2; letter-spacing:-.01em; text-wrap:balance; }
.vals__item p{ margin-top:10px; color:var(--ink-2); font-size:15.5px; line-height:1.6; }

/* =============================== CONTACTO + PIE =============================== */
.contact{
  --pill-w:clamp(30px, 4.2vw, 62px); --pill-h:calc(var(--pill-w) * 2.8);
  position:relative; background:var(--navy); color:var(--mint);
  margin-top:calc(var(--pill-h) / 2);
  padding-top:var(--sec);
}
.contact__pills{ position:absolute; top:calc(var(--pill-h) / -2); right:var(--edge); display:flex; gap:clamp(8px, 1vw, 16px); }
.bp{ display:block; width:var(--pill-w); height:var(--pill-h); border-radius:999px; }
.bp--1{ background:var(--seg1); box-shadow:inset 0 0 0 1px rgba(244,255,236,.16); }
.bp--2{ background:linear-gradient(90deg,#016974,#167108); }
.bp--3{ background:var(--seg3); }
.bp--4{ background:linear-gradient(90deg,#7EDE56,#E6FCD9); }
.bp--5{ background:linear-gradient(90deg,#F4FFEC,#FFFFFF); box-shadow:inset 0 0 0 1px rgba(0,47,55,.08); }

.contact__in{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:24px; row-gap:48px; align-items:end; }
.contact__lead{ grid-column:1 / span 6; }
.contact h2{ margin:28px 0 36px; font-size:clamp(36px, 4.6vw, 66px); font-weight:660; letter-spacing:-.022em; line-height:1.02; }
.contact__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; }
.contact__list{ grid-column:8 / -1; margin:0; }
.contact__list div{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:16px; align-items:baseline; padding:15px 0; border-top:1px solid var(--line-dark); }
.contact__list div:first-child{ border-top-color:rgba(244,255,236,.5); }
.contact__list div:last-child{ border-bottom:1px solid var(--line-dark); }
.contact__list dt{ font:600 11.5px/1.3 var(--text); letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-2); }
.contact__list dd{ margin:0; font:500 clamp(16px, 1.3vw, 19px)/1.3 var(--display); letter-spacing:-.005em; overflow-wrap:anywhere; }
.contact__list a{ text-decoration:none; }
.contact__list dd a{ display:inline-block; padding:12px; margin:-12px; }
.contact__list dd a:focus-visible{ outline-offset:-9px; }   /* anillo a 3 px del texto, como el resto: no pisa la etiqueta de arriba (el área táctil no cambia) */
.contact__list a:hover{ color:var(--lgreen); }

.foot{ background:var(--navy); color:var(--mint); padding-top:clamp(72px, 8vw, 112px); }
.foot__in{
  display:flex; align-items:center; gap:20px 40px; flex-wrap:wrap;
  padding-block:30px 36px; border-top:1px solid var(--line-dark);
}
.foot__brand img{ width:140px; height:auto; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:0 26px; margin-left:auto; }
.foot__nav a{ font:500 13.5px/1 var(--text); color:var(--on-dark-2); text-decoration:none; padding:12px 0; }
.foot__nav a:hover{ color:var(--lgreen); }
.foot__c{ font-size:13px; color:var(--on-dark-2); }

/* =============================== RESPONSIVE =============================== */
@media (max-width: 1300px){
  .que__text{ grid-column:1 / -1; }
  .que__text .sec__intro{ max-width:40em; }
  .capas{ grid-column:1 / -1; margin-top:clamp(20px, 3vw, 52px); }

  .kicker--hero{ display:grid; grid-template-columns:28px auto; column-gap:12px; row-gap:6px; justify-content:start; }
  .kicker--hero > span:last-child{ grid-column:2; }
  .kicker__sep{ display:none; }
  .capas__fig{ grid-template-columns:minmax(0, 1fr) 300px; max-width:920px; }
}

@media (max-width: 1180px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
  .nav__cta{ margin-left:auto; }
  .nav__cta + .nav__toggle{ margin-left:0; }

  .values__in{ flex-direction:column; align-items:stretch; gap:12px; padding-block:22px 18px; }
  .values__label{ width:auto; }
  .values__list li:first-child{ padding-left:0; border-left:0; }


  .steps{ grid-template-columns:1fr; border-top:0; }
  .step + .step::before{ display:none; }
  .step{
    padding:32px 0 48px; border-top:1px solid var(--line-strong);
    display:grid; grid-row:auto; grid-template-rows:none; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); column-gap:48px; align-content:start;
  }
  .step > *{ grid-column:1; }
  .step .step__fig{ grid-column:2; grid-row:1 / span 4; margin-top:0; }
  .step:last-child{ padding-bottom:0; }

  .presc{ grid-template-columns:1fr; row-gap:56px; }
  .presc__item + .presc__item::before{ display:none; }
  .presc__item{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:48px; align-items:center; }
  .presc__fig{ grid-row:1 / span 2; }
  .presc__item h3{ margin-top:0; align-self:end; }
  .presc__item p{ align-self:start; }
}

@media (min-width: 1181px){
  .nav__toggle, .menu{ display:none !important; }
  .presc__item{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start; }   /* títulos y textos arrancan a la misma altura en las tres columnas */
}

@media (max-width: 860px){
  :root{ --nav-h:68px; }
  .nav__brand img{ width:138px; }

  .hero{ grid-template-columns:minmax(0, 1fr); padding-left:0; padding-top:12px; row-gap:36px; }
  .hero__text{ padding:12px var(--g) 0; }
  .hero h1{ margin:20px 0 22px; }
  .hero__actions{ margin-top:30px; }
  .hero__media{ padding-left:var(--g); }
  .hero__media img{ height:auto; aspect-ratio:1.2; object-position:60% 50%; }

  .values{ margin-top:40px; }
  .values__in{ gap:10px; padding-block:24px 10px; }
  .values__list{ width:100%; grid-template-columns:1fr; }
  .values__list li{ border-left:0; border-top:1px solid var(--line); padding:14px 0; }
  .values__list li:first-child{ border-top:0; }

  .sec__head{ grid-template-columns:minmax(0, 1fr); }
  .que{ grid-template-columns:minmax(0, 1fr); }
  .sec__head h2, .sec__head .sec__intro{ grid-column:1; }


  .aims__list{ grid-template-columns:1fr; }
  .aims__list li{ padding:22px 0; border-bottom:1px solid var(--line-dark); }
  .aims__list li + li::before{ display:none; }

  .services{ grid-template-columns:1fr; row-gap:40px; }
  .services__head, .svc{ grid-column:1; position:static; }
  .services__head h2{ margin-right:0; }
  .svc__row{ grid-template-columns:56px minmax(0,1fr); padding:26px 0 30px; }

  .sel{ grid-template-columns:1fr; padding-right:0; row-gap:40px; }
  .sel__media{ padding-right:var(--g); }
  .sel__media img{ height:auto; aspect-ratio:1.12; }
  .sel__text{ padding-inline:var(--g); }

  .aim{ grid-template-columns:1fr; }
  .aim__k, .aim__body{ grid-column:1; padding-top:0; }
  .vals{ grid-template-columns:1fr; border-top:0; }
  .vals__item{ padding:22px 0 24px; border-top:1px solid var(--line); }
  .vals__item:first-child{ border-top-color:var(--line-strong); }
  .vals__item:last-child{ border-bottom:1px solid var(--line); }
  .vals__item + .vals__item::before{ display:none; }

  .contact__in{ grid-template-columns:minmax(0, 1fr); }
  .contact__lead, .contact__list{ grid-column:1; }
  .contact__list div{ grid-template-columns:96px minmax(0,1fr); }
  .foot__nav{ margin-left:0; width:100%; }
}

@media (max-width: 899px){
  .capas__fig{ display:block; }
  .capas__pic img{ max-width:560px; }
  .capas__labels{ margin-top:28px; }
  .capas__h{ position:static; transform:none; padding-bottom:10px; }
  .capas__src li{ position:static; transform:none; padding:11px 0; border-top:1px solid var(--line); }
  .capas__src li:first-child{ border-top-color:var(--line-strong); }
  .capas__src li:last-child{ border-bottom:1px solid var(--line); }
  .capas__res{ position:static; margin-top:24px; padding-left:0; }
}

@media (min-width: 560px) and (max-width: 860px){
  .hero__media img{ aspect-ratio:1.45; }
  .sel__media img{ aspect-ratio:1.4; }
}

@media (max-width: 639px){
  .step{ display:block; padding:28px 0 52px; }
  .step .step__fig{ margin-top:24px; }
  .presc__item{ display:block; }
  .presc__item h3{ margin-top:26px; }
}

@media (max-width: 559px){
  .nav__cta{ display:none; }
  .nav__toggle{ margin-left:auto !important; }
}

/* héroe: anchos de título y de botones que no cambian al pasar de la fuente de respaldo a la webfont (sin salto al cargar) */
@media (max-width: 860px){
  .hero h1{ max-width:13.5em; }
}
@media (min-width: 421px) and (max-width: 463px){
  .hero h1{ max-width:11.8em; }
}
@media (max-width: 479px){
  .hero__actions{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 420px){
  body{ font-size:16px; }
  .hero h1{ font-size:min(34px, 9.5vw); }
  .btn{ padding:0 22px; }
  .hero__actions{ gap:14px 24px; }
  .contact__list div{ grid-template-columns:1fr; gap:6px; }
  .svc__row{ grid-template-columns:44px minmax(0,1fr); }
}

/* pantallas angostas: los botones pueden partir su texto (en la práctica, sólo con texto ampliado o por debajo de 330 px) */
@media (max-width: 359px){
  .btn{ white-space:normal; text-align:center; line-height:1.25; padding-block:10px; }
}
/* pantallas de menos de 330 px (p. ej. pantalla externa de un plegable): guiones de corte en los títulos */
@media (max-width: 329px){
  h1, h2, h3{ hyphens:auto; }
}

/* teléfonos grandes en horizontal: el encabezado fijo de Servicios no entra en la pantalla */
@media (max-height: 500px){
  .services__head{ position:static; }
}

/* ventanas de escritorio bajas (p. ej. 1366×768 con las barras del navegador): título un poco más chico para que el botón del héroe entre */
@media (min-width: 861px) and (max-height: 700px){
  .hero h1{ font-size:clamp(34px, min(4.2vw, 7.6vh), 64px); margin:20px 0 22px; }
  .hero__actions{ margin-top:28px; }
}

/* alto contraste de Windows: las muestras de las leyendas, las pastillas y los botones conservan su forma */
@media (forced-colors: active){
  .sw, .ramp i, .lg--pass, .lg--seed, .kicker__pill, .vpill, .svc__n::after, .bp{ forced-color-adjust:none; }
  .btn, .calc__go{ border:2px solid; }
  .nav__toggle-i::before, .nav__toggle-i::after{ forced-color-adjust:none; background:ButtonText; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}