/* ===== Variables ===== */
:root {
  --blanco: #ffffff;
  --fondo: #f3f5ef;
  --verde: #1d6b3a;          /* color de marca */
  --verde-osc: #11361e;
  --verde-claro: #e3efe5;
  --texto: #15241a;
  --suave: #4c5a50;
  --linea: #dbe2d7;
  --amarillo: #ffc72c;       /* CTA principal */
  --amarillo-2: #f2b705;
  --wa: #177a41;             /* verde WhatsApp oscurecido: contraste AA con texto blanco */
  --wa-2: #11602f;
  --error: #b3261e;

  --font: "Barlow", system-ui, sans-serif;
  --r: 12px;
  --r-sm: 8px;
  --header-h: 68px;
  --sombra: 0 1px 2px rgba(17, 54, 30, 0.06), 0 8px 24px -12px rgba(17, 54, 30, 0.22);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
body.has-pedido { padding-bottom: 96px; }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.875rem, 3.4vw, 2.625rem); font-weight: 800; }
h3 { font-size: 1.375rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--verde-osc); outline-offset: 3px; box-shadow: 0 0 0 6px var(--amarillo); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--verde-osc); color: #fff; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }

/* Sin JavaScript: se ocultan los controles que dependen de él */
.no-js .filtros, .no-js .versiones, .no-js .pedido, .no-js .form .btn--yellow { display: none; }
.form__nojs { display: none; }
.no-js .form__nojs { display: block; }

/* ===== Botones ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  border: 2px solid transparent; border-radius: 999px;
  font: 700 1.0625rem/1.2 var(--font);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { flex: none; }
.btn--yellow { background: var(--amarillo); color: var(--verde-osc); }
.btn--yellow:hover { background: var(--amarillo-2); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-2); }
.btn--green { background: var(--verde); color: #fff; }
.btn--green:hover { background: var(--verde-osc); }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ===== Barra superior y encabezado ===== */
.topbar { background: var(--verde); color: #fff; font-size: 0.9375rem; }
.topbar__inner { display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; }
.topbar a { font-weight: 700; text-underline-offset: 3px; }
.topbar__ship { display: none; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea);
}
.header__inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.75rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--verde); text-decoration: none;
}
.brand__logo { flex: none; width: 44px; height: 44px; }
.brand--light { color: #fff; font-size: 1.375rem; }
/* el emblema es verde: en el pie oscuro va sobre un disco blanco para que se lea */
.brand__logo--footer { width: 56px; height: 56px; padding: 3px; border-radius: 50%; background: #fff; }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.menu a:hover { color: var(--verde); text-decoration: underline; text-underline-offset: 6px; }
.header__actions { display: flex; align-items: center; gap: 8px; }

.menu-btn {
  display: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-btn__bar { width: 24px; height: 2.5px; border-radius: 2px; background: var(--verde-osc); transition: transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { transform: translateY(7.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(4) { transform: translateY(-7.5px) rotate(-45deg); }

/* ===== Hero ===== */
.hero { background: var(--fondo); padding-block: 32px 48px; }
.hero__inner { display: grid; gap: 28px; }
.hero__lead { margin-top: 16px; max-width: 46ch; font-size: 1.1875rem; color: var(--suave); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.quick { margin-top: 32px; }
.quick__label { font-weight: 700; margin-bottom: 10px; }
.quick__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.quick__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--linea); border-radius: 999px; background: #fff;
  font-weight: 600; text-decoration: none;
}
.quick__list a:hover { border-color: var(--verde); color: var(--verde); }

.hero__media { position: relative; margin: 0; order: -1; }

/* Carrusel del hero: las fotos se apilan y cambian con un fundido y un acercamiento lento */
.slider__track {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  border-radius: var(--r); background: var(--verde-claro);
}
.slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 0s 1s;
}
.slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; }
.slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform 0s 1s;   /* vuelve a su tamaño cuando ya no se ve */
}
.slide.is-active img { transform: scale(1.06); transition: transform 7s linear; }

.slider__ctrl {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px;
  border-radius: 999px; background: rgba(11, 36, 20, 0.6);
}
.slider__pause {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer;
}
.slider__pause svg { fill: currentColor; }
.slider__pause:hover { background: rgba(255, 255, 255, 0.16); }
.slider__ico-play, .slider.is-paused .slider__ico-pause { display: none; }
.slider.is-paused .slider__ico-play { display: block; }
.slider__dots { display: flex; }
.slider__dot {
  display: grid; place-items: center; width: 22px; height: 32px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.slider__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55); transition: width .3s, background-color .3s;
}
.slider__dot:hover::before { background: #fff; }
.slider__dot[aria-current="true"]::before { width: 18px; background: var(--amarillo); }
.slider__pause:focus-visible, .slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 999px; }
.no-js .slider__ctrl { display: none; }
.slider .credit { z-index: 1; }
.credit {
  position: absolute; right: 10px; top: 10px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 0.75rem; background: rgba(11, 36, 20, 0.6); color: #fff;
}
.credit a { text-underline-offset: 2px; }
.hero__badge {
  position: absolute; left: 12px; bottom: 12px;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: #fff; box-shadow: var(--sombra); font-size: 0.9375rem;
}
.hero__badge strong { display: block; font-size: 1.375rem; line-height: 1.1; color: var(--verde); }

/* ===== Beneficios ===== */
.perks { border-bottom: 1px solid var(--linea); }
.perks__list { list-style: none; margin: 0; padding-block: 28px; display: grid; gap: 20px; }
.perks li { display: flex; gap: 14px; align-items: flex-start; }
.perks svg {
  flex: none; width: 44px; height: 44px; padding: 10px; border-radius: 50%;
  background: var(--verde-claro); stroke: var(--verde); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.perks h2 { font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.perks p { color: var(--suave); font-size: 0.9375rem; }

/* ===== Catálogo ===== */
.catalogo { padding-block: 56px 72px; background: var(--fondo); }
.catalogo__head { display: grid; gap: 20px; margin-bottom: 28px; }
.catalogo__head p { margin-top: 8px; color: var(--suave); max-width: 52ch; }

.filtros {
  position: relative;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin;
  margin-inline: -20px; padding: 0 20px 6px;
}
.filtros button {
  flex: none; min-height: 44px; padding: 8px 16px;
  border: 1.5px solid var(--linea); border-radius: 999px; background: #fff;
  font: 600 1rem var(--font); color: var(--texto); cursor: pointer;
}
.filtros button:hover { border-color: var(--verde); }
.filtros button[aria-pressed="true"] { background: var(--verde); border-color: var(--verde); color: #fff; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--linea); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sombra);
  transition: border-color .2s, box-shadow .2s;
}
.card:hover { border-color: #b9c8b7; }
.card.is-selected { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra); }

/* Foto del bulto: el fondo coincide con el de las versiones JPEG (#f6f7f3) */
.card__img { overflow: hidden; aspect-ratio: 1 / 1; background: #f6f7f3; }
.card__img img {
  width: 100%; height: 100%; padding: 8px 0 0;
  object-fit: contain; object-position: center bottom;   /* completa, sin recortes ni deformación */
  transition: transform .3s ease;
}
.card:hover .card__img img { transform: scale(1.03); }
.card__img { position: relative; }
.card__control {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 3px rgba(17, 54, 30, 0.18);
  font-size: 0.8125rem; font-weight: 700; color: var(--verde-osc); --ico: 24px;
}

/* ===== Íconos de la versión Control mosca y garrapata =====
   Para cambiar los íconos, reemplazar los archivos o estas dos rutas. */
.ico { display: inline-block; flex: none; width: var(--ico, 28px); height: var(--ico, 28px); background: center / contain no-repeat; }
.ico--mosca { background-image: url("assets/img/iconos/control-mosca.svg"); }
.ico--garrapata { background-image: url("assets/img/iconos/control-garrapata.svg"); }

/* Franja que explica la versión control, antes de las tarjetas */
.control {
  display: grid; gap: 12px 18px; align-items: center;
  margin-bottom: 24px; padding: 18px;
  background: #fff; border: 1.5px solid var(--linea); border-left: 5px solid var(--verde); border-radius: var(--r);
  box-shadow: var(--sombra);
}
.control__icons { display: flex; gap: 6px; --ico: 48px; }
.control__tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--verde); }
.control h3 { margin-top: 2px; font-size: 1.375rem; }
.control__text > p:not(.control__tag) { margin-top: 6px; color: var(--suave); max-width: 68ch; }
.control__text > p.control__nota { font-size: 0.9375rem; font-weight: 600; color: var(--verde-osc); }
.control__btn { grid-column: 1 / -1; justify-self: start; }

.card__body { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 20px; flex: 1; }
.card__stage {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  background: var(--verde-claro); color: var(--verde); font-size: 0.875rem; font-weight: 700;
}
.card__info { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--suave); }
.card__info li::before { content: "✓"; margin-right: 8px; color: var(--verde); font-weight: 800; }
.card .btn { margin-top: auto; }

/* Registro ICA y ficha técnica */
.card__ica { margin-top: -6px; font-size: 0.875rem; color: var(--suave); }
.card__ica strong { color: var(--verde-osc); font-weight: 700; letter-spacing: 0.01em; }
.card__ica span { font-size: 0.8125rem; }

.ficha { border: 1.5px solid var(--linea); border-radius: var(--r-sm); background: var(--fondo); }
.ficha summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none;
  font-size: 0.9375rem; font-weight: 700; color: var(--verde);
}
.ficha summary::-webkit-details-marker { display: none; }
.ficha summary::after { content: "+"; flex: none; font-size: 1.375rem; line-height: 1; transition: transform .2s; }
.ficha[open] summary::after { transform: rotate(45deg); }
.ficha summary:hover { color: var(--verde-osc); }
.ficha__body { display: grid; gap: 12px; padding: 0 12px 12px; font-size: 0.9375rem; }
.ficha__uso { margin: 0; display: grid; gap: 8px; }
.ficha__uso dt { font-weight: 700; color: var(--verde-osc); }
.ficha__uso dd { margin: 2px 0 0; color: var(--suave); line-height: 1.4; }
.ficha__tabla { width: 100%; border-collapse: collapse; background: #fff; border-radius: 6px; overflow: hidden; font-variant-numeric: tabular-nums; }
.ficha__tabla caption { text-align: left; font-weight: 700; color: var(--verde-osc); padding-bottom: 6px; }
.ficha__tabla th, .ficha__tabla td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--linea); }
.ficha__tabla thead th { font-size: 0.8125rem; font-weight: 700; color: var(--suave); background: var(--verde-claro); }
.ficha__tabla tbody th { font-weight: 600; }
.ficha__tabla td:last-child, .ficha__tabla thead th:last-child { text-align: right; white-space: nowrap; }
.ficha__tabla tbody tr:last-child > * { border-bottom: 0; }
.ficha__nota { font-size: 0.8125rem; color: var(--suave); line-height: 1.4; }
.ficha__tabla caption span { font-weight: 600; color: var(--suave); }
/* fila que solo lleva la versión Control mosca y garrapata */
.ficha__tabla .ficha__mg > * { background: #fff8e1; }
.ficha__tabla .ficha__mg > :first-child { box-shadow: inset 3px 0 0 var(--amarillo); }
.ficha__tabla .ficha__mg--tag td {
  padding-bottom: 0; border-bottom: 0; text-align: left; white-space: normal;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; color: var(--verde-osc); --ico: 18px;
}
.ficha__mg--tag .ico { vertical-align: -4px; margin-right: 2px; }
.ficha__mg--tag .ico:nth-child(2) { margin-right: 6px; }
/* al abrir una ficha, las demás tarjetas de la fila no se estiran */
.cards:has(.ficha[open]) { align-items: start; }

/* Bultos por versión: estándar y Control mosca y garrapata */
.versiones { margin: auto 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--linea); min-width: 0; }
.versiones legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-weight: 700; }
.js .versiones + .btn { margin-top: 0; }
.qty { clear: both; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qty + .qty { margin-top: 8px; }
.qty label { min-width: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; color: var(--suave); }
.qty__ctrl { flex: none; }
/* fila de la versión control: íconos sobre el texto para que quepa en tarjetas angostas */
.qty--control { padding: 8px 6px 8px 10px; border-radius: var(--r-sm); background: var(--fondo); }
.qty--control label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--texto); }
.qty__icons { display: flex; flex: none; gap: 2px; --ico: 26px; }
.qty--control .qty__ctrl { background: #fff; }
.qty__ctrl { display: flex; align-items: center; border: 1.5px solid var(--linea); border-radius: 999px; overflow: hidden; }
.qty__btn {
  width: 44px; height: 44px; border: 0; background: #fff; cursor: pointer;
  font: 700 1.375rem/1 var(--font); color: var(--verde);
}
.qty__btn:hover { background: var(--verde-claro); }
.qty__input {
  width: 52px; height: 44px; border: 0; text-align: center;
  font: 700 1.125rem var(--font); color: var(--texto); background: #fff;
  -moz-appearance: textfield; appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.card--help {
  justify-content: center; gap: 14px; padding: 28px 22px;
  background: var(--verde-osc); border-color: var(--verde-osc); color: #fff;
}
.card--help p { color: rgba(255, 255, 255, 0.82); }
.card--help .btn { margin-top: 0; }

/* ===== Servicio: análisis con dron ===== */
.dron { background: var(--verde-osc); color: #fff; padding-block: 64px; }
.dron__tag {
  display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px;
  background: var(--amarillo); color: var(--verde-osc); font-size: 0.875rem; font-weight: 700;
}
.dron__lead { margin-top: 14px; max-width: 52ch; font-size: 1.125rem; color: rgba(255, 255, 255, 0.86); }

.dron__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.dron__intro { display: grid; gap: 28px; }
.dron__beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dron__beneficios li {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r); background: rgba(255, 255, 255, 0.05);
  font-weight: 600; line-height: 1.3;
}
.dron__beneficios strong { color: var(--amarillo); }
.dron__beneficios svg,
.dron__proceso svg {
  flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%;
  background: rgba(255, 199, 44, 0.16); stroke: var(--amarillo); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Foto de la operación con dron + para qué se usa */
.dron__escena { margin-top: 36px; display: grid; gap: 24px; align-items: center; }
.escena {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: #3f6b34;
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.6);
}
.escena__figura { margin: 0; }
.escena__credito { margin-top: 8px; font-size: 0.75rem; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
.escena__credito a { color: #fff; }
.escena__texto h3 { font-size: 1.5rem; }
.escena__texto > p { margin-top: 10px; max-width: 48ch; color: rgba(255, 255, 255, 0.84); }
.escena__usos { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.escena__usos li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: start; }
.escena__num {
  grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--amarillo); color: var(--verde-osc); font-weight: 800;
}
.escena__usos strong { font-size: 1.0625rem; line-height: 1.3; }
.escena__usos p { font-size: 0.9375rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }

/* Proceso: captura → software → mapa → suplementación */
.dron__proceso { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
.dron__proceso li {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-content: start;
  padding: 16px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r); background: rgba(255, 255, 255, 0.05);
}
.dron__proceso svg { grid-row: span 3; }
.paso__num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amarillo); }
.dron__proceso h3 { font-size: 1.0625rem; line-height: 1.25; }
.dron__proceso p { margin-top: 4px; font-size: 0.9375rem; line-height: 1.4; color: rgba(255, 255, 255, 0.8); }

/* ===== Mapa de calor de macrominerales (datos simulados) ===== */
.mapa {
  margin-top: 36px; padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: #0c2a17;
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.6);
}
.mapa__toolbar { display: grid; gap: 14px; margin-bottom: 14px; }
.mapa__aviso {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px;
  background: rgba(255, 199, 44, 0.14); border: 1px solid rgba(255, 199, 44, 0.5);
  font-size: 0.8125rem; font-weight: 700; color: var(--amarillo);
}
.mapa__aviso svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mapa__titulo { margin-top: 8px; font-size: 1.375rem; }
.mapa__selector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mapa__selector button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 52px; padding: 4px 6px; border: 1.5px solid rgba(255, 255, 255, 0.24); border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.85);
  font: 600 0.75rem var(--font); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s;
}
.mapa__selector b { font-size: 1.125rem; font-weight: 800; line-height: 1.1; color: #fff; }
.mapa__selector button:hover { border-color: rgba(255, 255, 255, 0.6); }
.mapa__selector button[aria-pressed="true"] { background: var(--amarillo); border-color: var(--amarillo); color: var(--verde-osc); }
.mapa__selector button[aria-pressed="true"] b { color: var(--verde-osc); }

.mapa__grid { display: grid; gap: 14px; }
.mapa__grid > * { min-width: 0; }
.mapa__vista { margin: 0; }

/* Lienzo: foto aérea + mapa de calor + capa vectorial */
.mapa__lienzo {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 12px;
  background: #2b3a26; touch-action: pan-y; cursor: crosshair; user-select: none;
}
.mapa__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) brightness(0.92); }
.mapa__calor {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: auto; opacity: 0; transition: opacity .6s ease;   /* el navegador suaviza la rejilla al ampliarla */
}
.mapa__calor.is-visible { opacity: 1; }
.mapa__capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mapa__capa * { vector-effect: non-scaling-stroke; }
.mapa__fuera { fill: rgba(8, 20, 12, 0.42); }
.mapa__reticula line { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.mapa__area { fill: none; stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.5; stroke-dasharray: 5 3; }
.iso { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 0.8; }
.iso--ref { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 4 3; }
.mapa__mira line { stroke: rgba(255, 255, 255, 0.7); stroke-width: 1; stroke-dasharray: 2 3; }
.mapa__mira circle { fill: none; stroke: #fff; stroke-width: 1.5; }
.mapa__lectura {
  position: absolute; z-index: 2; transform: translate(12px, calc(-100% - 10px));
  display: grid; gap: 1px; padding: 6px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap;
  background: rgba(11, 36, 20, 0.92); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); font-size: 0.8125rem;
}
.mapa__lectura strong { font-size: 0.9375rem; }
.mapa__lectura span { color: rgba(255, 255, 255, 0.75); }
.mapa__lectura.a-la-izquierda { transform: translate(calc(-100% - 12px), calc(-100% - 10px)); }
.mapa__lectura.abajo { transform: translate(12px, 12px); }
.mapa__lectura.a-la-izquierda.abajo { transform: translate(calc(-100% - 12px), 12px); }
.mapa__norte {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(11, 36, 20, 0.75); border: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 0.75rem; font-weight: 800; pointer-events: none;
}
.mapa__norte::before { content: ""; position: absolute; top: 3px; border: 4px solid transparent; border-bottom: 6px solid var(--amarillo); border-top: 0; }
.mapa__credito {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(11, 36, 20, 0.6); font-size: 0.6875rem;
}
.mapa__credito a { color: #fff; }

/* Leyenda */
.mapa__leyenda { margin-top: 12px; font-size: 0.8125rem; }
.leyenda__titulo { font-size: 0.875rem; color: rgba(255, 255, 255, 0.8); }
.leyenda__titulo span { font-weight: 700; color: #fff; }
.leyenda__escala { position: relative; margin-top: 24px; }
.leyenda__barra { height: 12px; border-radius: 3px; transition: background .4s; }
.leyenda__ref {
  position: absolute; bottom: calc(100% + 4px); height: 8px;
  border: 1.5px solid #fff; border-bottom: 0; border-radius: 3px 3px 0 0; transition: left .4s, width .4s;
}
.leyenda__ref span { position: absolute; bottom: 8px; left: 0; white-space: nowrap; font-size: 0.75rem; font-weight: 700; }
.leyenda__ref.texto-der span { left: auto; right: 0; }
.leyenda__ref.corta-der { border-right-style: dashed; border-top-right-radius: 0; }
.leyenda__ref.corta-izq { border-left-style: dashed; border-top-left-radius: 0; }
.leyenda__marcas { position: relative; height: 18px; margin-top: 2px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); }
.marca { position: absolute; top: 0; transform: translateX(-50%); }
.marca::before { content: ""; position: absolute; top: -6px; left: 50%; width: 1px; height: 6px; background: rgba(255, 255, 255, 0.7); }
.marca:first-child { transform: none; }
.marca:nth-child(2) { transform: translateX(-100%); }
.marca:first-child::before { left: 0; }
.marca:nth-child(2)::before { left: auto; right: 0; }
.marca--ref { font-weight: 700; color: #fff; }
.leyenda__claves, .reparto__claves { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.leyenda__claves li, .reparto__claves li { display: flex; align-items: center; gap: 6px; }
.clave__muestra { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.clave__linea { flex: none; width: 18px; border-top: 2px dashed #fff; }
.leyenda__criterio { margin-top: 8px; color: rgba(255, 255, 255, 0.65); line-height: 1.45; }

/* Panel del indicador */
.mapa__panel {
  padding: 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: rgba(255, 255, 255, 0.04);
}
.js .mapa__nojs { display: none; }
.no-js .mapa__selector, .no-js .mapa__leyenda { display: none; }
.panel__contenido { display: flex; flex-direction: column; gap: 14px; animation: panel-entra .35s ease; }
@keyframes panel-entra { from { opacity: 0; transform: translateY(6px); } }
.panel__kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amarillo); }
.panel__titulo { margin-top: -8px; font-size: 1.5rem; }
.panel__titulo span { font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.panel__unidad { margin-top: -10px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.75); }
.panel__funcion { font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.panel__datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel__datos div { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.panel__datos dt { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }
.panel__datos dd { margin: 2px 0 0; font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.panel__subtitulo { font-size: 0.875rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.reparto { display: flex; gap: 2px; height: 12px; margin-top: 8px; border-radius: 4px; overflow: hidden; }
.reparto span { transition: width .5s ease; }
.reparto__claves { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); }
.panel__orientacion {
  padding: 12px 14px; border-left: 3px solid var(--amarillo); border-radius: 0 10px 10px 0;
  background: rgba(255, 199, 44, 0.1); font-size: 0.9375rem; line-height: 1.45;
}
.panel__orientacion strong { color: var(--amarillo); }
.panel__refs { margin: 0; display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.panel__refs dt { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }
.panel__refs dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.panel__simulado { font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }
.btn--line-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn--line-light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* ===== Cómo comprar ===== */
.comprar { padding-block: 72px; }
.comprar__pasos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.comprar__pasos li { position: relative; display: grid; gap: 6px; padding-left: 60px; }
.comprar__pasos span {
  position: absolute; left: 0; top: -4px;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--amarillo); color: var(--verde-osc); font-size: 1.25rem; font-weight: 800;
}
.comprar__pasos p { color: var(--suave); max-width: 38ch; }

/* ===== Preguntas ===== */
.faq { padding-block: 0 72px; }
.faq__inner { display: grid; gap: 24px; }
.faq__list { display: grid; gap: 10px; }
.faq details { border: 1.5px solid var(--linea); border-radius: var(--r-sm); background: #fff; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 12px 18px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; line-height: 1; color: var(--verde); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 18px; color: var(--suave); max-width: 64ch; }

/* ===== Contacto ===== */
.contacto { background: var(--verde); color: #fff; padding-block: 64px; }
.contacto__inner { display: grid; gap: 40px; }
.contacto__inner > * { min-width: 0; }
.contacto__info > p:first-of-type { margin-top: 12px; max-width: 46ch; color: rgba(255, 255, 255, 0.86); }
.contacto__tel {
  display: inline-block; margin-top: 28px;
  font-size: clamp(1.875rem, 11vw, 3.5rem); font-weight: 800; line-height: 1; white-space: nowrap;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.contacto__tel:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.contacto__nota { margin: 6px 0 28px; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.8); }
.contacto__lista { margin: 0; }
.contacto__lista div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.contacto__lista dt { font-weight: 700; }
.contacto__lista dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.contacto__lista a { text-underline-offset: 3px; }
.contacto__lista address { font-style: normal; }
.contacto__mapa {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 44px;
  font-weight: 700; color: #fff;
}
.contacto__mapa svg { flex: none; fill: none; stroke: var(--amarillo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.form {
  display: grid; gap: 16px; padding: 22px;
  background: #fff; color: var(--texto); border-radius: var(--r);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
}
.form__row { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 0.9375rem; font-weight: 700; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 50px; padding: 10px 14px;
  font: 400 1.0625rem var(--font); color: var(--texto);
  background: #fff; border: 1.5px solid #b7c3b4; border-radius: var(--r-sm);
}
.form textarea { resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #6d7a70; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--amarillo); outline-offset: 0; border-color: var(--verde); }
.form .is-invalid { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.form__pedido { padding: 12px 14px; border-radius: var(--r-sm); background: var(--verde-claro); color: var(--verde-osc); font-weight: 600; font-size: 0.9375rem; }
.form__error { color: var(--error); font-weight: 700; font-size: 0.9375rem; }
.form__ready { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-sm); background: var(--verde-claro); }
.form__ready p { font-weight: 700; color: var(--verde-osc); }
.form__nojs { font-size: 0.9375rem; color: var(--suave); }
.form__nojs a { font-weight: 700; color: var(--verde); }

/* ===== Footer ===== */
.footer { background: var(--verde-osc); color: rgba(255, 255, 255, 0.78); padding-block: 40px; font-size: 0.9375rem; }
.footer__inner { display: grid; gap: 24px; }
.footer__brand p { margin-top: 8px; max-width: 34ch; }
.footer__nav, .footer__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer a { text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer__contact a { font-weight: 700; color: #fff; }
.footer__copy { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.15); }

/* ===== Pedido flotante ===== */
.pedido {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: #fff; border-top: 2px solid var(--verde);
  box-shadow: 0 -10px 30px -12px rgba(17, 54, 30, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: subir .25s ease-out;
}
.pedido__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.pedido__resumen { min-width: 0; font-size: 0.9375rem; }
.pedido__resumen strong { display: block; font-size: 1.125rem; color: var(--verde-osc); white-space: nowrap; }
#pedido-detalle { display: block; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pedido__acciones { display: flex; align-items: center; gap: 4px; flex: none; }
.pedido__vaciar { min-height: 44px; padding: 8px 12px; border: 0; background: none; font: 600 0.9375rem var(--font); color: var(--suave); text-decoration: underline; cursor: pointer; }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

.wa-float {
  position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa); color: #fff; box-shadow: 0 8px 20px rgba(17, 54, 30, 0.35);
}
.wa-float:hover { background: var(--wa-2); }

/* ===== Tableta ===== */
@media (min-width: 640px) {
  .dron__proceso { grid-template-columns: 1fr 1fr; }
  .wrap { padding-inline: 28px; }
  .topbar__ship { display: block; }
  .perks__list { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .comprar__pasos { grid-template-columns: repeat(3, 1fr); }
  .comprar__pasos li { padding-left: 0; padding-top: 60px; }
  .comprar__pasos span { top: 0; }
  .filtros { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .control { grid-template-columns: auto minmax(0, 1fr); }
  .control__icons { --ico: 56px; }
  .form { padding: 32px; }
  .form__row { grid-template-columns: 1fr 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer__copy { grid-column: 1 / -1; }
}

/* ===== Escritorio ===== */
@media (min-width: 960px) {
  .hero { padding-block: 56px 72px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .hero__media { order: 0; }
  .slider__track { aspect-ratio: 11 / 9; }
  .perks__list { grid-template-columns: repeat(4, 1fr); padding-block: 32px; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .catalogo__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .filtros { justify-content: flex-end; max-width: 560px; }
  .control { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 24px; gap: 24px; }
  .control__icons { --ico: 60px; }
  .control__btn { grid-column: auto; }
  .faq__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .dron { padding-block: 88px; }
  .dron__intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
  .dron__proceso { grid-template-columns: repeat(4, 1fr); }
  .dron__escena { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; margin-top: 48px; }
  .mapa { padding: 20px; }
  .mapa__toolbar { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .mapa__selector { grid-template-columns: repeat(5, 76px); }
  .mapa__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px; align-items: start; }
  .contacto { padding-block: 88px; }
  .contacto__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .footer__inner { grid-template-columns: 2fr 1fr 1fr; }
  .footer__nav, .footer__contact { flex-direction: column; }
}

/* Escritorio estrecho: cinco enlaces + WhatsApp en una sola línea */
@media (min-width: 900px) and (max-width: 1120px) {
  .header__inner { gap: 16px; }
  .menu { gap: 18px; }
  .menu a { font-size: 0.96875rem; }
}

@media (max-width: 899px) {
  .menu-btn { display: flex; }
  .menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    padding: 4px 20px 16px; background: #fff; border-bottom: 1px solid var(--linea);
    box-shadow: 0 12px 24px -16px rgba(17, 54, 30, 0.4);
    display: none;
  }
  .menu.is-open { display: flex; }
  .menu a { padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: 1.125rem; }
  .menu a:last-child { border-bottom: 0; }
  .header__actions { margin-left: auto; }
  .no-js .menu { position: static; display: none; }
  .no-js .menu-btn { display: none; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: 16px; }
  .filtros { margin-inline: -16px; padding-inline: 16px; }
  .brand { font-size: 1.5rem; }
  .header__actions .btn--sm { padding-inline: 14px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .dron__ctas .btn { flex: 1 1 100%; }
  .form { padding: 18px; }
  .pedido__vaciar { padding-inline: 8px; }
  .pedido .btn { padding-inline: 16px; }
}

/* Teléfonos estrechos (320–380 px): el botón de WhatsApp del encabezado queda solo con el icono */
@media (max-width: 380px) {
  .header__inner { gap: 12px; }
  .header .brand { gap: 8px; }
  .header .brand__logo { width: 38px; height: 38px; }
  .header__actions .btn--sm { width: 44px; padding: 0; }
  .header__wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

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