/* ============================================================
   VARION · Inteligencia agronómica
   Calculador de ahorro — Pulverización selectiva
   Marca: navy #002F37 · teal #016974 · verde #167108 · verde claro #7EDE56 · menta #F4FFEC
   Tipografía web: Zalando Sans Expanded (≈ Benzin) + Sora (≈ Pacaembu)
   ============================================================ */

/* Fallbacks con métricas ajustadas: evitan saltos de layout mientras cargan las webfonts */
@font-face { font-family: "Varion Display Fallback"; src: local("Arial"); size-adjust: 128%; ascent-override: 75%; descent-override: 19.5%; line-gap-override: 0%; }
@font-face { font-family: "Varion Text Fallback"; src: local("Arial"); size-adjust: 113%; ascent-override: 85.5%; descent-override: 25.6%; line-gap-override: 0%; }

:root {
  /* --- Superficies (navy de marca) --- */
  --bg:      #002F37;
  --bg-1:    #00353D;
  --panel:   #003942;
  --panel-2: #003E47;
  --ink:     #F4FFEC;   /* menta de marca */
  --ink-1:   #D8E8D8;
  --ink-2:   #ACC2B6;
  --ink-3:   #97B2AA;
  --line:    rgba(244,255,236,0.085);
  --line-2:  rgba(244,255,236,0.17);   /* TODOS los separadores de sección */
  --line-3:  rgba(244,255,236,0.045);
  --line-input: rgba(244,255,236,0.36); /* subrayado de inputs (borde de componente, no separador) */

  /* --- Mapa --- */
  --field:      #00262C;
  --field-2:    #015862;
  --field-line: rgba(244,255,236,0.06);
  --treated:    #7EDE56;
  --soil:       #003C45;   /* suelo limpio tal como se dibuja en el mapa */

  /* --- Series --- */
  --conv:   #A0A89F;   /* gris menta — convencional (línea base) */
  --terr:   #7EDE56;   /* verde claro de marca — selectivo terrestre */
  --drone:  #52A4B5;   /* teal de marca aclarado (tono del navy) — selectivo drone; ≥5:1 sobre navy, distinguible del verde con daltonismo */
  --accent: #7EDE56;

  /* --- Semáforo --- */
  --verde:    #7EDE56;
  --amarillo: #F7C948;
  --rojo:     #F4705A;

  /* --- Marca (solo decorativo, nunca texto) --- */
  --teal:  #016974;
  --green: #167108;

  /* --- Tipografía --- */
  --f-display: "Zalando Sans Expanded", "Varion Display Fallback", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-sans:    "Sora", "Varion Text Fallback", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

  --r: 2px;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }   /* nav fija 68px + 12px: el foco con Shift+Tab no queda tapado */
body {
  position: relative;
  margin: 0;
  font-family: var(--f-sans);
  color: var(--ink-1);
  background: var(--bg);
  font-size: 15px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  min-height: 100vh; overflow-x: hidden;
}
/* Profundidad sutil con los colores de marca (solo arriba: se va con el scroll, no aclara el contenido) */
body::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 100vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 620px at 50% -10%, rgba(1,105,116,0.16), transparent 62%),
    radial-gradient(900px 600px at 88% 8%, rgba(22,113,8,0.08), transparent 60%);
}
::selection { background: rgba(126,222,86,0.32); color: var(--ink); }
::placeholder { color: var(--ink-3); opacity: 1; }
a { color: var(--terr); text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Utilidades tipográficas */
.lbl { font-family: var(--f-sans); font-weight: 600; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
/* Tipografía display: cifras proporcionales (las tabulares de Zalando traen el 0 tachado y el 1 con pie; Benzin no)
   y espacio entre palabras más cerrado en mayúsculas (la fuente ancha abre mucho el espacio) */
.hero h1, .hero .eyebrow .lbl, .section-ix .ix, .mapstage__top .ix, .section-ix h2, .mapstage__top h2,
.map-hud .rng-val, .telemetry .v, .strat__rank, .strat__tot .big, .strat__flag { font-variant-numeric: proportional-nums; }
/* hueco entre palabras ≈ 0.36em constante: espacio (0.285em) + 2×tracking + word-spacing */
.hero .eyebrow .lbl, .section-ix h2, .mapstage__top h2 { letter-spacing: var(--ls); word-spacing: calc(.075em - 2 * var(--ls)); }
.strat__tot .big { word-spacing: -0.08em; }
.num { font-variant-numeric: tabular-nums; }
.sheet { max-width: 1240px; margin: 0 auto; padding: 0 28px 32px; }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: sticky; top: 0; z-index: 60; background: var(--bg); }
/* hairline con el degradé de marca (navy → teal → verde → verde claro) */
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(244,255,236,0.085) 0%, var(--teal) 30%, var(--green) 62%, var(--terr) 100%); }
.nav__in { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 68px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; min-width: 0; flex: none; }
.brand__logo { display: block; height: 42px; width: auto; }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav__link { font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); }
.nav__stat { display: flex; align-items: center; gap: 8px; }
.nav__stat .d { width: 6px; height: 6px; border-radius: 50%; background: var(--terr); }
.nav__stat-t { font-weight: 600; font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
@media (max-width: 680px) { .nav__link { display: none; } }
@media (max-width: 520px) {
  html { scroll-padding-top: 72px; }
  .nav__in { height: 60px; } .brand__logo { height: 34px; } .nav__right { gap: 0; }
  .nav__stat-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
}

/* ============================================================
   HERO · foto oficial de marca con overlay navy (como las piezas digitales)
   ============================================================ */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: min(62vw, 1000px);
  /* el borde izquierdo de la foto se funde con el fondo (sin costura vertical) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.hero__media picture, .hero__media img { display: block; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 58% 42%; }
/* La foto ya viene con el lavado de marca (navy → verde, tablet y manos sin teñir): acá solo se funde con el texto y el fondo */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(0,47,55,0.9) 18%, rgba(0,47,55,0) 55%),
    linear-gradient(0deg, var(--bg) 0%, rgba(0,47,55,0) 32%);
}
/* Pantallas ultra anchas: la foto acompaña a la columna (misma composición que a 1920) y su borde derecho se funde con el fondo */
@media (min-width: 1921px) {
  .hero__media {
    right: calc((100vw - 1920px) / 2);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 calc(100% - clamp(0px, (100vw - 1920px) / 2, 220px)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 calc(100% - clamp(0px, (100vw - 1920px) / 2, 220px)), transparent 100%);
  }
}
.hero__in { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 72px 28px 60px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.hero .eyebrow .lbl { --ls: .14em; font-family: var(--f-display); font-weight: 500; font-size: 11.5px; color: var(--ink-2); }
.hero .eyebrow::before, .hero .eyebrow::after { content: ""; width: 30px; height: 1px; flex: none; }
.hero .eyebrow::before { background: linear-gradient(90deg, var(--teal), var(--terr)); }
.hero .eyebrow::after  { background: linear-gradient(90deg, var(--terr), var(--teal)); }
.hero h1 {
  font-family: var(--f-display); font-weight: 850; font-size: clamp(32px, 5.8vw, 72px); line-height: 1.02; letter-spacing: -0.01em;
  margin: 0; color: var(--ink); max-width: 640px; overflow-wrap: break-word;
}
.hero h1 .g { color: var(--terr); }
.hero p { max-width: 560px; color: var(--ink-2); font-size: 16.5px; line-height: 1.65; margin: 24px 0 0; font-weight: 400; }
/* Laptops chicas / tablet horizontal: texto más angosto para que no pise la tablet de la foto */
@media (min-width: 961px) and (max-width: 1099px) { .hero p { max-width: 44vw; } }
/* Tablet y mobile: la foto pasa a ser una franja arriba del texto (no queda texto encima de la tablet) */
@media (max-width: 960px) {
  .hero__media { position: relative; width: auto; height: clamp(168px, min(34vw, 46vh), 340px);
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
  .hero__media img { object-position: 60% 46%; }
  .hero__media::after { background: linear-gradient(180deg, rgba(0,47,55,0) 0%, rgba(0,47,55,0.15) 45%, var(--bg) 100%); }
  .hero__in { padding: 0 28px 8px; margin-top: -36px; }
}
@media (max-width: 700px) {
  .hero__media img { object-position: 64% 50%; }
  .hero__in { margin-top: -30px; }
  .hero .eyebrow { margin-bottom: 14px; gap: 10px; }
  .hero .eyebrow .lbl { font-size: 10px; --ls: .1em; }
  .hero .eyebrow::before, .hero .eyebrow::after { width: 20px; }
  .hero h1 { font-size: min(10vw, 40px); }
  .hero p { margin-top: 14px; font-size: 15px; }
}

/* ============================================================
   MAPA
   ============================================================ */
.mapstage__top { display: flex; align-items: baseline; gap: 14px; padding: 32px 2px 16px; }
/* Leyenda en la esquina superior derecha del mapa (dentro del HUD) */
.map-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.map-legend span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-1); white-space: nowrap; }
.map-legend i { width: 10px; height: 10px; border-radius: 2px; }
.map-legend i.sw-weed { background: var(--treated); }
.map-legend i.sw-clean { background: var(--soil); box-shadow: inset 0 0 0 1px rgba(244,255,236,0.45); }

.mapframe { position: relative; background: var(--field); border: 1px solid var(--line-2); overflow: hidden; }
.map-svg { width: 100%; height: auto; display: block; }
/* HUD superior: rótulo de área + % + leyenda */
.map-hud { position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px 18px; background: linear-gradient(to bottom, rgba(0,31,36,0.82), transparent); }
.map-hud .mh-area { display: flex; align-items: baseline; gap: 10px; }
.map-hud .mh-lbl { font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-1); white-space: nowrap; }
.map-hud .rng-val { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: .9; color: var(--terr); letter-spacing: -0.01em; }

/* Telemetría (readout): altura natural; el mapa absorbe el alto sobrante de la columna */
.mapcol { min-width: 0; display: flex; flex-direction: column; container-type: inline-size; }
.telemetry { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1fr; border: 1px solid var(--line-2); border-top: none; }
.telemetry .cell { container-type: inline-size; padding: 20px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.telemetry .cell:last-child { border-right: none; }
.telemetry .cell.hi { background: linear-gradient(180deg, rgba(1,105,116,0.14), rgba(22,113,8,0.05) 70%, transparent); }
.telemetry .k { font-weight: 600; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }
/* el tamaño sigue al ancho de la celda; el número nunca se parte (solo puede bajar la unidad) */
.telemetry .v { font-family: var(--f-display); font-weight: 600; font-size: clamp(16px, 18cqi, 26px); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); min-width: 0; }
.telemetry .v .n { white-space: nowrap; }
/* cifra larga que no entra junto a su unidad: se achica (la unidad sigue siempre a la derecha) */
.telemetry .v.fit-1 .n { font-size: .84em; }
.telemetry .v.fit-2 .n { font-size: .7em; }
.telemetry .v small { font-family: var(--f-sans); font-weight: 400; font-size: 12.5px; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; }
.telemetry .cell.hi .v { color: var(--terr); }
.telemetry #roBest, .telemetry .ro-ghost .v { font-family: var(--f-sans); font-weight: 600; font-size: clamp(17px, 1.75vw, 21px); letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: normal; }
.telemetry .d { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
/* Alto estable: un "fantasma" invisible reserva el estado más alto (nombre y detalle más largos),
   así el mapa y el slider no saltan cuando cambia la estrategia óptima al mover el slider */
.telemetry .cell.hi { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; align-content: start; }
.telemetry .cell.hi > .k { grid-area: 1 / 1; }
.telemetry .cell.hi > #roBest { grid-area: 2 / 1; }
.telemetry .cell.hi > #roBestD { grid-area: 3 / 1; }
.telemetry .cell.hi > .ro-ghost { grid-area: 2 / 1 / 5 / 2; visibility: hidden; }
.telemetry #roSaveD, .telemetry #roSaveHaD { display: grid; }
.telemetry #roSaveD > span, .telemetry #roSaveHaD > span { grid-area: 1 / 1; }
.telemetry .d > .ro-ghost { visibility: hidden; }
/* columna del mapa angosta (tablet, 1001–1150 px): telemetría 2×2 */
@container (max-width: 720px) {
  .telemetry { grid-template-columns: 1fr 1fr; }
  .telemetry .cell:nth-child(2n) { border-right: none; }
  .telemetry .cell:nth-child(1), .telemetry .cell:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .telemetry .cell { padding: 18px 16px; }
  .telemetry .v { font-size: clamp(16px, 16cqi, 22px); }
}
@media (max-width: 380px) {
  .telemetry .cell { padding: 16px 12px; }
  .telemetry .k { letter-spacing: .8px; }
  .telemetry #roBest, .telemetry .ro-ghost .v { font-size: 15px; }
}
/* misma fila = mismo alto de etiqueta: los valores arrancan a la misma altura aunque una sola etiqueta haga 2 líneas
   (fila 1 "Estrategia óptima" parte hasta 429px; fila 2 "Ahorro total / por ha" hasta ~342px) */
@media (max-width: 429.98px) {
  .telemetry .cell:nth-child(-n+2) .k { min-height: 38px; min-height: 2lh; display: flex; align-items: flex-end; }
}
@media (max-width: 359.98px) {
  .telemetry .cell:nth-child(n+3) .k { min-height: 38px; min-height: 2lh; display: flex; align-items: flex-end; }
}

/* ============================================================
   Trabajo: controles + resultados
   ============================================================ */
.topgrid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 0; margin-top: 40px; border-top: 1px solid var(--line-2); }
@media (max-width: 1000px) { .topgrid { grid-template-columns: 1fr; } }
@media (max-width: 960px) { .topgrid { margin-top: 24px; } }
@media (min-width: 1001px) {
  /* el alto sobrante de la columna lo toma el marco del mapa (el lote queda centrado) */
  .mapframe { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

/* Slider abajo (solo la barra, finito) */
.map-slider { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: auto;
  padding: 14px 18px 13px; background: linear-gradient(to top, rgba(0,31,36,0.88) 45%, transparent); }
.map-slider .rng-scale { color: var(--ink-2); margin-top: 8px; }

/* Mobile: mapa más alto (overlays caen en los márgenes) */
@media (max-width: 600px) {
  /* el alto crece con el ancho para que el lote nunca toque el slider */
  .map-svg { height: max(300px, calc(102px + 50.8vw)); }
  .map-hud { padding: 10px 13px; }
  .map-hud .mh-lbl { font-size: 10.5px; letter-spacing: .8px; }
  .map-hud .rng-val { font-size: 17px; }
  .map-legend { gap: 12px; }
  .map-legend span { font-size: 11px; gap: 6px; }
  .map-legend i { width: 9px; height: 9px; }
  .map-slider { padding: 9px 13px 10px; }
  .map-slider .rng-scale { font-size: 10.5px; margin-top: 6px; }
  input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; }
  input[type=range]::-moz-range-thumb { width: 18px; height: 18px; }
}
/* Teléfonos: HUD en dos filas fijas (rótulo + % / leyenda) en lugar de cortes al azar */
@media (max-width: 440px) {
  .map-hud { flex-direction: column; align-items: flex-start; gap: 6px; }
  .map-legend { justify-content: flex-start; flex-wrap: nowrap; }
}

/* Encabezados de sección (01–07) */
.section-ix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 22px; }
.section-ix .ix, .mapstage__top .ix { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .08em; color: var(--terr); }
.section-ix h2, .mapstage__top h2 { --ls: .1em; font-family: var(--f-display); font-weight: 600; font-size: 14px; text-transform: uppercase; margin: 0; color: var(--ink); line-height: 1.35; }
.section-ix h2 { flex: 1 1 0; }   /* el título nunca se separa de su número; si no entra, baja el rótulo de la derecha */
.section-ix .r { margin-left: auto; font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 600px) { .section-ix h2, .mapstage__top h2 { font-size: 12.5px; --ls: .07em; } }

/* Configuración (panel al costado derecho del lote) */
.configcol { min-width: 0; }
@media (max-width: 1000px) { .configcol { border-left: none; border-top: 1px solid var(--line-2); margin-top: 40px; } }
.cgroup { padding: 32px 24px; border-top: 1px solid var(--line-2); }
.cgroup:first-child { border-top: none; }   /* el separador de la 1ª sección viene del topgrid (desktop) / configcol (mobile) */
.cgroup:last-child { padding-bottom: 0; }   /* el aire hasta el separador 04 lo da .results */
@media (max-width: 1000px) { .cgroup { padding: 32px 0; } .cgroup:last-child { padding-bottom: 0; } }

.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 600; font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 9px; }
.field > label .u { color: var(--ink-3); letter-spacing: 1px; }

/* Inputs estilo "instrumento": subrayado, sin caja (foco: línea de 2px + contorno para alto contraste) */
.ibox { display: flex; align-items: center; border-bottom: 1px solid var(--line-input); transition: border-color .15s, box-shadow .15s; }
.ibox:focus-within { border-color: var(--terr); box-shadow: inset 0 -1px 0 var(--terr); outline: 2px solid transparent; outline-offset: 4px; }
.ibox .pfx { color: var(--ink-3); font-size: 14px; padding-right: 4px; }
.ibox input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--ink);
  font-family: var(--f-sans); font-weight: 300; font-size: 21px; padding: 8px 0; -moz-appearance: textfield; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.ibox input::-webkit-outer-spin-button, .ibox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ibox .sfx { color: var(--ink-3); font-size: 13px; padding-left: 6px; letter-spacing: .5px; }

/* Slider · barra fina visual con área táctil amplia (22px); plano, sin halo */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; outline: none; cursor: pointer; touch-action: none;
  background: linear-gradient(90deg, var(--terr) var(--p,25%), #4A7579 var(--p,25%)) center / 100% 2px no-repeat; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--terr); border: none; box-shadow: 0 0 0 2px var(--bg); cursor: pointer; transition: box-shadow .14s; }
input[type=range]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgba(244,255,236,0.55); }
input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--terr); border: none; box-shadow: 0 0 0 2px var(--bg); cursor: pointer; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--terr); }
input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--terr); }
.rng-scale { display: flex; justify-content: space-between; font-weight: 600; font-size: 12px; letter-spacing: .3px; color: var(--ink-3); margin-top: 9px; }

/* Segmented (criterio drone): minimal, estado activo con línea (sin bloque de color) */
.seg { display: flex; gap: 0; border: 1px solid var(--line-2); }
.seg button { flex: 1; border: none; border-right: 1px solid var(--line); background: transparent; color: var(--ink-2);
  font-family: var(--f-sans); font-weight: 600; font-size: 11.5px; letter-spacing: .9px; text-transform: uppercase; padding: 11px 6px; cursor: pointer;
  transition: color .14s, background-color .14s, box-shadow .14s; }
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--ink); background: rgba(244,255,236,0.03); }
.seg button[aria-pressed="true"] { background: rgba(244,255,236,0.07); color: var(--ink); box-shadow: inset 0 -2px 0 var(--drone); }
/* Alto contraste de Windows: el segmento elegido se pinta con el color de selección del sistema */
@media (forced-colors: active) {
  .seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; box-shadow: none; border-right-color: CanvasText; }
  .seg button[aria-pressed="true"]:focus-visible { outline-color: CanvasText; }
}
.hint { font-size: 13px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.55; }

/* Tabla de insumos */
.itab { width: 100%; border-collapse: collapse; font-size: 14px; }
.itab th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); padding: 0 5px 9px; border-bottom: 1px solid var(--line-2); }
.itab th.u { text-transform: none; letter-spacing: .2px; }   /* unidades: USD/un, USD/ha */
.itab .w-dosis { width: 52px; } .itab .w-unit { width: 64px; } .itab .w-ha { width: 62px; } .itab .w-x { width: 22px; }
.itab th.n, .itab td.n { text-align: right; }
.itab td { padding: 3px 4px; border-bottom: 1px solid var(--line-3); }
.itab input { width: 100%; background: transparent; border: 1px solid transparent; color: var(--ink-1); font-family: var(--f-sans); font-size: 14px; padding: 7px 5px; outline: none; transition: border-color .14s; -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.itab input::-webkit-outer-spin-button, .itab input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.itab input.n { text-align: right; font-weight: 600; }
.itab input.i-prod { text-overflow: ellipsis; }
.itab input:hover { border-color: var(--line); }
.itab input:focus { border-color: var(--terr); }
.itab .cc { font-weight: 700; color: var(--terr); text-align: right; white-space: nowrap; font-size: 13.5px; padding-right: 5px; }
@media (max-width: 420px) {
  .itab th { padding: 0 3px 9px; }
  .itab td { padding: 3px 2px; }
  .itab input { padding: 7px 3px; }
  .itab .cc { padding-right: 3px; }
  .itab .w-dosis { width: 47px; } .itab .w-unit { width: 54px; } .itab .w-ha { width: 54px; } .itab .w-x { width: 26px; }
}
@media (max-width: 360px) { .itab th { font-size: 10.5px; } }
/* ≤359px: cada insumo en dos líneas (producto arriba, números abajo) para que el nombre nunca se corte */
@media (max-width: 359px) {
  .itab, .itab thead, .itab tbody { display: block; }
  .itab tr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 28px; align-items: center; }
  .itab .w-dosis, .itab .w-unit, .itab .w-ha, .itab .w-x { width: auto; }
  .itab thead th:first-child { display: none; }
  .itab thead tr { border-bottom: 1px solid var(--line-2); }
  .itab thead th { border-bottom: none; }
  .itab tbody tr { border-bottom: 1px solid var(--line-3); padding: 3px 0; }
  .itab tbody td { border-bottom: none; }
  .itab tbody td:first-child { grid-column: 1 / -1; padding-bottom: 0; }
  .itab tbody td:first-child input { padding-bottom: 2px; }
  .itab tbody td:last-child { justify-self: end; }
}
.xdel { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; }
.xdel:hover { color: #FF8670; background: rgba(244,112,90,0.12); }
.ifoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.addrow { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--terr); border: 1px solid var(--line-2); padding: 9px 14px; font-family: var(--f-sans); font-weight: 600; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color .14s, background-color .14s, border-color .14s; }
.addrow:hover { border-color: var(--terr); background: rgba(126,222,86,0.07); }
.itot { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.itot__v { white-space: nowrap; }
.itot b { color: var(--terr); font-weight: 700; font-size: 18px; }

/* ============================================================
   Resultados
   ============================================================ */
.results { margin-top: 32px; }
/* Cada sección: una línea separadora arriba + mismo espaciado (simétrico) */
.rblock { border-top: 1px solid var(--line-2); padding: 32px 0; }

/* Ranking de estrategias */
#strats { list-style: none; margin: 0; padding: 0; }
.strat { display: grid; grid-template-columns: 36px 1.5fr 1fr 1.1fr; align-items: center; gap: 18px;
  padding: 22px 4px; border-bottom: 1px solid var(--line); position: relative; }
.strat:last-child { border-bottom: none; padding-bottom: 0; }
@media (min-width: 761px) {
  /* una sola grilla para todas las filas: un total largo no desalinea solo su fila
     (1ª pista 40px = rango 36px + 4px de padding del li, que en subgrid se suma a esa celda) */
  #strats { display: grid; grid-template-columns: 40px 1.5fr 1fr 1.1fr; column-gap: 18px; }
  .strat { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.strat.best { background: linear-gradient(90deg, rgba(126,222,86,0.06), transparent 60%); }
.strat.best::before { content: ""; position: absolute; left: -4px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(180deg, var(--teal), var(--accent) 70%); }
.strat[data-k=conv]  { --accent: var(--conv); } .strat[data-k=terr] { --accent: var(--terr); } .strat[data-k=drone] { --accent: var(--drone); }
.strat__rank { font-family: var(--f-display); font-weight: 500; font-size: 19px; color: var(--ink-3); }
.strat__id { min-width: 0; }
.strat__id .nm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0; font-weight: 600; font-size: 15.5px; line-height: 1.6; letter-spacing: 0; color: var(--ink); }
.strat__id .nm .sw { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); flex: none; }
.strat__id .ds { font-size: 13px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.strat__bd { font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.strat__bd b { color: var(--ink-1); font-weight: 600; white-space: nowrap; }
.strat__tot { text-align: right; }
.strat__tot .tot-lbl { font-weight: 600; font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.strat__tot .big { font-family: var(--f-display); font-weight: 600; font-size: 25px; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.strat__tot .big .cur { font-family: var(--f-sans); font-weight: 400; font-size: 13.5px; color: var(--ink-3); letter-spacing: 0; }
.strat__tot .ph { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.strat__tot .sv { font-weight: 600; font-size: 12.5px; margin-top: 6px; }
.strat__tot .sv.pos { color: var(--terr); } .strat__tot .sv.neg { color: var(--rojo); } .strat__tot .sv.zero { color: var(--ink-3); }
.strat__tot .nw { white-space: nowrap; }   /* las líneas solo se cortan entre frases, nunca dejan una palabra sola */
/* "Óptima": rótulo junto al nombre de la estrategia ganadora */
.strat__flag { font-family: var(--f-display); font-weight: 600; font-size: 11.5px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
  padding: 4px 6px 3px; border: 1px solid var(--accent); border-radius: var(--r); }
@media (max-width: 760px) {
  .strat { grid-template-columns: 30px 1fr; row-gap: 14px; }
  .strat__rank { font-size: 16px; }
  .strat__bd { grid-column: 2; } .strat__tot { grid-column: 1 / -1; text-align: left; }
  /* alinear el número y el detalle por-ha con el desglose de arriba (col. 2 = 30 + gap 18) */
  .strat__tot .big, .strat__tot .ph { margin-left: 48px; }
  .strat__tot .big { white-space: normal; }   /* ≤300px: con un total de 7 cifras, "USD" baja antes que invadir el margen */
}

/* Figura técnica */
.figlegend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 16px; }
.figlegend span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.figlegend i { width: 18px; height: 2px; } .figlegend i.dash { background: none !important; border-top: 2px dashed var(--ink-3); }
.figlegend i.dot { height: 4px; background: radial-gradient(circle, var(--drone) 1.6px, transparent 1.9px) 0 50% / 6px 4px repeat-x !important; }
@media (max-width: 600px) { .figlegend { gap: 8px 16px; } .figlegend span { font-size: 12.5px; } }
.chartbox { position: relative; }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y pinch-zoom; }
.chart-svg text { font-family: var(--f-sans); font-weight: 600; fill: var(--ink-3); }
.chart-svg .gl { stroke: var(--line-3); } .chart-svg .axln { stroke: var(--line-2); }
.chart-svg .ser { fill: none; }
.cap { font-size: 13px; color: var(--ink-3); margin: 16px 0 0; line-height: 1.6; max-width: 800px; }
.cap b { color: var(--ink-2); font-weight: 600; }
.ctip { position: absolute; left: 0; top: 0; pointer-events: none; transform: translateX(-50%); z-index: 6;   /* top = borde superior real (lo calcula app.js) */
  background: var(--field); border: 1px solid var(--line-2); padding: 9px 11px; font-size: 12px; min-width: 232px;
  opacity: 0; transition: opacity .1s; }
.ctip.on { opacity: 1; }
.ctip .h { font-weight: 600; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.ctip .r { display: flex; justify-content: space-between; gap: 16px; margin-top: 4px; }
.ctip .r span { color: var(--ink-2); display: flex; align-items: center; white-space: nowrap; }
.ctip .r i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 7px; }
.ctip .r b { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Decisión */
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 620px) { .decide { grid-template-columns: 1fr; } }
.be { padding: 24px 26px 0 0; border-right: 1px solid var(--line); }
.be:last-child { border-right: none; padding-left: 26px; }
@media (max-width: 620px) { .be { border-right: none; border-bottom: 1px solid var(--line); padding: 22px 0; } .be:last-child { padding-left: 0; padding-bottom: 0; border-bottom: none; } }
.be .nm { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.be .nm .sw { width: 9px; height: 9px; border-radius: 2px; }
/* barra: riel de 1px + relleno de 3px en el color de la estrategia */
.bar { height: 3px; margin: 42px 0 40px; position: relative; }
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: rgba(244,255,236,0.45); }
.bar .fl { position: absolute; left: 0; top: 0; bottom: 0; }
/* marca del equilibrio: en el extremo de la barra (arriba) */
.bar .pe-mark { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--mc, var(--ink)); transform: translateX(-1px); }
.bar .pe-mark::after { content: attr(data-l); position: absolute; top: -22px; left: 50%; transform: translateX(var(--ls, -50%)); font-weight: 700; font-size: 14px; color: var(--mc, var(--ink)); white-space: nowrap; }
/* marca de la posición actual del lote (abajo); la etiqueta se desplaza en proporción para no salirse nunca de la barra */
.bar .now { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--ink-2); }
.bar .now::after { content: attr(data-l); position: absolute; bottom: -22px; left: 0; transform: translateX(var(--ls, -50%)); font-weight: 600; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.status { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13px; margin-top: 16px; color: var(--ink-1); }
.status .lt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lt.verde { background: var(--verde); }
.lt.amarillo { background: var(--amarillo); }
.lt.rojo { background: var(--rojo); }
.be .sub { font-size: 15px; color: var(--ink-1); margin-top: 16px; line-height: 1.5; }

/* Dictamen */
.note { position: relative; border-left: 2px solid var(--accent, var(--terr)); padding: 4px 0 4px 20px; font-size: 14.5px; line-height: 1.65; color: var(--ink-1); margin-bottom: 22px; max-width: 800px; }
.note:last-child { margin-bottom: 0; }
.note[data-k=terr] { --accent: var(--terr); } .note[data-k=drone] { --accent: var(--drone); }
.note b { color: var(--accent, var(--terr)); font-weight: 700; }

/* Footer */
.foot { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 40px; margin-top: 0; padding: 30px 0 8px; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: 12.5px; }
.foot__logo { grid-row: span 2; display: block; height: 64px; width: auto; }
.foot__disc { margin: 0; text-align: right; line-height: 1.55; }
.foot__contact { margin: 0; text-align: right; color: var(--ink-2); }
.foot__contact span { white-space: nowrap; }
.foot__contact span + span::before { content: "·"; margin: 0 .5em; color: var(--ink-3); }
.foot__contact a { color: var(--ink-2); }
.foot__contact a:hover { color: var(--terr); }
/* tablet: una sola columna, así la línea de contacto entra completa (sin "·" al principio de un renglón) */
@media (max-width: 960px) {
  .foot { grid-template-columns: 1fr; gap: 14px; }
  .foot__logo { grid-row: auto; }
  .foot__disc, .foot__contact { text-align: left; }
}
@media (max-width: 700px) {
  .foot__logo { height: 60px; }
  /* contacto apilado, como en las piezas de marca */
  .foot__contact span { display: block; line-height: 1.7; }
  .foot__contact span + span::before { content: none; }
}

:where(button, [href], input, summary):focus-visible { outline: 1px solid var(--terr); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }