/* Geocromo — paleta de marca: del satélite a la superficie */
:root {
  --papel: #F3F6F9;      /* fondo */
  --papel-2: #E4EAF1;    /* paneles, collar de la hoja */
  --tinta: #0F1B2D;      /* texto */
  --tinta-2: #4A5870;    /* texto secundario */
  --azul: #2349D6;       /* azul satélite: acento y acciones */
  --azul-oscuro: #1A37A8;
  --cian: #149BD8;       /* cian LiDAR */
  --verde: #0B9468;      /* verde esmeralda */
  --relieve: #9A6B3F;    /* curvas de nivel (convención cartográfica) */
  --riesgo: #C21E78;     /* solo para peligro en los datos */
  --hidro: var(--cian);
  --vegetacion: var(--verde);
  --sobre: var(--azul);
  --sobre-oscuro: var(--azul-oscuro);

  --display: "Montserrat", system-ui, sans-serif;
  --texto: "Montserrat", system-ui, sans-serif;
  --dato: "Martian Mono", ui-monospace, "Cascadia Mono", monospace;

  --margen: clamp(16px, 4vw, 56px);
  --ancho: 1240px;
  --linea: 1px solid var(--tinta);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--sobre);
  outline-offset: 3px;
}

/* Rótulo: las mayúsculas espaciadas con que un mapa nombra una región */
.rotulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* ---------- Barra superior ---------- */
.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px var(--margen);
  background: var(--papel);
  border-bottom: var(--linea);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.marca-simbolo {
  display: block;
  height: 30px;
  width: auto;
  flex: none;
}

.marca-nombre {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  text-transform: uppercase;
}

.menu {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.menu a {
  font-size: 0.92rem;
  text-decoration: none;
  color: var(--tinta-2);
}
.menu a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--sobre);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color 0.15s ease;
}
.boton:hover { background: var(--sobre-oscuro); }
.boton--chico { padding: 9px 14px; font-size: 0.86rem; }

.icono { width: 18px; height: 18px; fill: currentColor; flex: none; }

.enlace {
  font-weight: 600;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.enlace:hover { color: var(--sobre); }

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* ---------- Portada: la hoja de mapa ---------- */
.portada {
  position: relative;
  border-bottom: var(--linea);
}

.hoja {
  position: relative;
  height: min(86vh, 860px);
  min-height: 560px;
  overflow: hidden;
  background: var(--papel-2);
}

#terreno {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: pan-y;
}

.barrido {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--cian);
  box-shadow: 0 0 0 1px rgba(243, 246, 249, 0.55), 0 -18px 28px -8px rgba(20, 155, 216, 0.4);
  opacity: 0;
  pointer-events: none;
}

.mira {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mira::before, .mira::after {
  content: "";
  position: absolute;
  background: var(--cian);
}
.mira::before { left: 12px; top: 0; width: 2px; height: 26px; }
.mira::after { top: 12px; left: 0; height: 2px; width: 26px; }
.mira.activa { opacity: 1; }

.graticula span {
  position: absolute;
  font-family: var(--dato);
  font-stretch: 87.5%;
  font-size: 0.62rem;
  color: var(--tinta);
  background: rgba(243, 246, 249, 0.82);
  padding: 2px 5px;
  white-space: nowrap;
  pointer-events: none;
}
.graticula .lon { top: 0; transform: translateX(-50%); border-left: 1px solid var(--tinta); border-right: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); }
.graticula .lat { left: 0; transform: translateY(-50%); border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--tinta); border-right: 1px solid var(--tinta); }

.nota-hoja {
  position: absolute;
  right: var(--margen);
  bottom: 10px;
  font-family: var(--dato);
  font-stretch: 87.5%;
  font-size: 0.6rem;
  color: var(--tinta);
  background: rgba(243, 246, 249, 0.82);
  padding: 2px 6px;
}

.dato {
  position: absolute;
  right: var(--margen);
  bottom: 38px;
  font-family: var(--dato);
  font-stretch: 87.5%;
  font-size: 0.72rem;
  line-height: 1.5;
  color: #fff;
  background: var(--tinta);
  padding: 8px 12px;
  border-left: 3px solid var(--cian);
  white-space: pre;
  pointer-events: none;
}

/* Panel de lecturas: una leyenda que se puede operar */
.lecturas {
  position: absolute;
  top: 44px;
  right: var(--margen);
  width: 300px;
  background: var(--papel);
  border: var(--linea);
  padding: 16px;
}

.lecturas-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.lecturas-opciones {
  display: grid;
  gap: 6px;
}

.lecturas-opciones button {
  display: grid;
  gap: 1px;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--tinta);
  background: transparent;
  border: 1px solid rgba(15, 27, 45, 0.28);
  border-radius: 3px;
  padding: 9px 12px 9px 30px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lecturas-opciones button::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--tinta);
  border-radius: 50%;
}
.lecturas-opciones button:hover { border-color: var(--tinta); }
.lecturas-opciones button[aria-checked="true"] {
  border-color: var(--sobre);
  background: #fff;
}
.lecturas-opciones button[aria-checked="true"]::before {
  border-color: var(--sobre);
  background: var(--cian);
  box-shadow: inset 0 0 0 2px #fff;
}

.op-nombre {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
}
.op-pregunta {
  font-size: 0.82rem;
  color: var(--tinta-2);
}

.lecturas-leyenda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 27, 45, 0.28);
  font-family: var(--dato);
  font-stretch: 87.5%;
  font-size: 0.64rem;
}
.lecturas-leyenda li {
  display: flex;
  align-items: center;
  gap: 7px;
}
.lecturas-leyenda i {
  width: 16px;
  height: 11px;
  flex: none;
  border: 1px solid rgba(15, 27, 45, 0.5);
}
.lecturas-leyenda .nota {
  grid-column: 1 / -1;
  color: var(--tinta-2);
}

/* Cajetín: el bloque de título de la hoja */
.cajetin {
  position: absolute;
  left: var(--margen);
  bottom: 44px;
  width: min(640px, calc(100% - 2 * var(--margen) - 330px));
  background: var(--papel);
  border: var(--linea);
  padding: 26px 28px 28px;
  display: grid;
  gap: 16px;
}

.cajetin h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.3vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.cajetin h1 span { display: inline-block; }

.cajetin-texto {
  color: var(--tinta-2);
  max-width: 50ch;
}

/* ---------- Secciones ---------- */
.seccion {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) var(--margen) 0;
}

.seccion-cab {
  display: grid;
  gap: 12px;
  max-width: 640px;
  margin-bottom: 44px;
}
.seccion-cab h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.seccion-cab p:last-child { color: var(--tinta-2); }

/* Leyenda de servicios */
.leyenda {
  border: var(--linea);
  padding: 8px 28px;
  background: var(--papel);
  box-shadow: 6px 6px 0 var(--papel-2);
}

.leyenda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}

/* Cada columna de la leyenda es un grupo: primero se captura, después se analiza */
.grupo-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 18px 0 12px;
  border-bottom: var(--linea);
}

.entrada {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(15, 27, 45, 0.2);
}
.entrada:last-child { border-bottom: 0; }

.simbolo {
  width: 64px;
  height: 44px;
  outline: 1px solid var(--tinta);
}

.entrada h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  margin-bottom: 6px;
}
.entrada p { color: var(--tinta-2); }

.insumos {
  margin-top: 10px;
  font-family: var(--dato);
  font-stretch: 87.5%;
  font-size: 0.68rem;
  color: var(--tinta);
}
.entrada .insumos { color: var(--tinta); }

/* Preguntas por sector */
.preguntas { border-top: var(--linea); }

.preguntas li {
  display: grid;
  grid-template-columns: 200px 1fr 220px;
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid rgba(15, 27, 45, 0.2);
}

.sector {
  font-family: var(--dato);
  font-stretch: 87.5%;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
}

.pregunta {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.1vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.servicio {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--tinta-2);
}

.punto {
  width: 18px;
  height: 12px;
  flex: none;
  border: 1px solid var(--tinta);
}
.punto--riesgo { background: repeating-linear-gradient(45deg, var(--riesgo) 0 2px, #f3dfe9 2px 5px); }
.punto--raster { background: linear-gradient(135deg, #b82234, #9ca0a8 50%, #c8eeff); }
.punto--sig { background: rgba(94, 127, 79, 0.3); }
.punto--hidro { background: linear-gradient(transparent 4px, var(--hidro) 4px 7px, transparent 7px), var(--papel-2); }
.punto--dron { background: repeating-linear-gradient(var(--papel-2) 0 2px, var(--tinta) 2px 3px, var(--papel-2) 3px 4px); }
.punto--lidar { background: radial-gradient(circle, var(--relieve) 0 1px, transparent 1.4px) 0 0 / 4px 4px, var(--papel-2); }
.punto--curvas { background: repeating-linear-gradient(-20deg, var(--papel-2) 0 3px, var(--relieve) 3px 4px); }

/* Método: una poligonal de cuatro vértices */
.poligonal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  counter-reset: none;
}
.poligonal::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 18px;
  right: 18px;
  border-top: 1.5px dashed var(--tinta);
}

.poligonal li {
  position: relative;
  display: grid;
  gap: 8px;
  align-content: start;
}

.vertice {
  position: relative;
  display: grid;
  place-items: end center;
  width: 38px;
  height: 34px;
  padding-bottom: 5px;
  margin-bottom: 12px;
  font-family: var(--dato);
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: var(--tinta);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.poligonal h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
}
.poligonal p { color: var(--tinta-2); }

/* ---------- Contacto ---------- */
.contacto {
  margin-top: clamp(80px, 11vw, 140px);
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(64px, 9vw, 112px) var(--margen);
}

.contacto-caja {
  max-width: var(--ancho);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 460px);
  align-items: center;
  gap: 32px 56px;
}
.contacto-texto {
  display: grid;
  gap: 20px;
}
/* Emblema: satélite, dron y laptop alrededor de la pirámide */
.contacto-emblema {
  display: block;
  width: 100%;
  height: auto;
}
.contacto .rotulo { color: #9FB0C6; }
.contacto h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 19ch;
}
.contacto-texto > p { max-width: 58ch; color: #C9D3E0; }
.contacto .acciones { margin-top: 12px; }
.contacto .boton:focus-visible { outline-color: #fff; }
.alterno { color: #C9D3E0; font-size: 0.95rem; }
.alterno a { color: #fff; text-underline-offset: 4px; }

/* ---------- Pie ---------- */
.pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 28px var(--margen);
  font-size: 0.85rem;
  color: var(--tinta-2);
}
.pie-marca { display: flex; align-items: center; gap: 10px; }
.escala { width: 170px; height: 26px; }
.pie-datos {
  font-family: var(--dato);
  font-stretch: 87.5%;
  font-size: 0.68rem;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .cajetin { width: min(560px, calc(100% - 2 * var(--margen) - 300px)); }
  .leyenda { grid-template-columns: 1fr; }
  .leyenda-grupo + .leyenda-grupo { border-top: var(--linea); margin-top: 8px; }
  .preguntas li { grid-template-columns: 170px 1fr; }
  .preguntas .servicio { grid-column: 2; }
}

@media (max-width: 860px) {
  .menu { display: none; }
  .barra { justify-content: space-between; }

  .hoja { height: 54vh; min-height: 340px; }
  .dato { bottom: 30px; font-size: 0.64rem; padding: 6px 9px; }
  .nota-hoja { right: 8px; bottom: 6px; font-size: 0.54rem; }

  .lecturas,
  .cajetin {
    position: static;
    width: auto;
    border: 0;
  }
  .lecturas {
    padding: 14px var(--margen) 16px;
    border-bottom: var(--linea);
    background: var(--papel-2);
  }
  .lecturas-titulo { display: none; }
  .lecturas-opciones { grid-template-columns: 1fr 1fr; }
  .lecturas-opciones button { padding: 8px 10px 8px 28px; }
  .lecturas-opciones button::before { left: 10px; top: 13px; }
  .op-pregunta { font-size: 0.76rem; }
  .lecturas-leyenda { grid-template-columns: repeat(2, 1fr); }

  .cajetin { padding: 32px var(--margen) 40px; }

  .contacto-caja { grid-template-columns: 1fr; }
  .contacto-emblema { max-width: 380px; }
  .poligonal { grid-template-columns: 1fr; gap: 28px; }
  .poligonal::before {
    top: 18px;
    bottom: 18px;
    left: 19px;
    right: auto;
    border-top: 0;
    border-left: 1.5px dashed var(--tinta);
  }
  .poligonal li { grid-template-columns: 38px 1fr; column-gap: 18px; }
  .poligonal li .vertice { grid-row: span 2; margin-bottom: 0; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .marca { gap: 10px; }
  .marca-simbolo { height: 26px; }
  .marca-nombre { font-size: 0.85rem; letter-spacing: 0.3em; margin-right: -0.3em; }
  .nota-hoja { left: 8px; text-align: right; }
  .dato { bottom: 46px; }
  .leyenda { padding: 4px 18px; box-shadow: 4px 4px 0 var(--papel-2); }
  .entrada { grid-template-columns: 48px 1fr; gap: 14px; }
  .simbolo { width: 48px; height: 33px; }
  .preguntas li { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .preguntas .servicio { grid-column: auto; }
  .boton { width: 100%; justify-content: center; }
  .boton--chico { width: auto; }
}

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