/**
 * Lo propio de /prospeccion/: el buscador de zona.
 *
 * Vive DENTRO de .sector-cifra, que es un bloque de tinta. Todo lo que se pone
 * aquí va sobre fondo oscuro, y por eso los desplegables llevan color y borde
 * explícitos: un <select> sin ellos hereda el negro sobre negro del navegador y
 * queda ilegible. El 26/09/2026 se encontró un botón a 1,00:1 de contraste en
 * este mismo sitio — dos colores idénticos, invisible, y nada lo avisó.
 *
 * Solo tokens --kairikos-*. Si falta un color o una medida, se añade al :root
 * del tema padre; aquí no se escribe ni un hex.
 */

.pr-zona {
  margin: 0 auto var(--kairikos-sp-5);
  max-width: 44rem;
}

.pr-zona__campos {
  display: flex;
  flex-wrap: wrap;
  /* Otra vez lo de flex: sin esto los tres controles se van a la izquierda
     dentro de un bloque que está centrado, que es el desajuste que se corrigió
     en las cuatro landings sectoriales el 26/09. */
  justify-content: center;
  align-items: flex-end;
  gap: var(--kairikos-sp-3);
}

.pr-zona__campo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kairikos-sp-2);
  text-align: left;
  min-width: 12rem;
}

.pr-zona__campo > span {
  font-family: var(--kairikos-font-mono);
  font-size: var(--kairikos-fs-xs);
  letter-spacing: var(--kairikos-tr-caps);
  text-transform: uppercase;
  color: rgba(250, 246, 238, .55);
}

.pr-zona__campo select {
  width: 100%;
  padding: var(--kairikos-sp-3) var(--kairikos-sp-4);
  font-family: var(--kairikos-font-sans);
  font-size: var(--kairikos-fs-md);
  color: var(--kairikos-hueso);
  background: var(--kairikos-velo-sobre-tinta);
  border: 1px solid var(--kairikos-border-sobre-tinta);
  border-radius: var(--kairikos-radius-lg);
  /* El menú desplegado lo pinta el sistema, no la página: sin esto, en Windows
     sale texto hueso sobre fondo blanco y no se lee ninguna opción. */
  color-scheme: dark;
}

.pr-zona__campo select:focus-visible {
  outline: 2px solid var(--kairikos-hueso);
  outline-offset: 2px;
}

/* El campo trampa. No se usa `display: none` a propósito: hay bots que ignoran
   lo que está oculto así, y alguno rellena solo lo que "ve". Fuera de pantalla
   pero presente en el DOM es lo que se cala a más. Mismo patrón que el
   borrador público de web. */
.pr-zona__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- «¿Qué vendes?» ----------------------------------------------------- */

/* El campo de texto va solo en su fila y a todo el ancho: es donde se escribe
   la frase, y un cuadro estrecho invita a escribir poco. */
.pr-vendes__texto {
  width: 100%;
  margin-bottom: var(--kairikos-sp-3);
}

.pr-vendes__texto textarea {
  width: 100%;
  resize: vertical;
  min-height: 5.5rem;
  padding: var(--kairikos-sp-3) var(--kairikos-sp-4);
  font-family: var(--kairikos-font-sans);
  font-size: var(--kairikos-fs-md);
  line-height: var(--kairikos-lh-body);
  color: var(--kairikos-hueso);
  background: var(--kairikos-velo-sobre-tinta);
  border: 1px solid var(--kairikos-border-sobre-tinta);
  border-radius: var(--kairikos-radius-lg);
}

.pr-vendes__texto textarea::placeholder {
  color: rgba(250, 246, 238, .45);
}

.pr-vendes__texto textarea:focus-visible {
  outline: 2px solid var(--kairikos-hueso);
  outline-offset: 2px;
}

.pr-zona__campo span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: .8;
}

/* La propuesta. Tarjeta clara sobre la tinta, como el aviso de /captacion/:
   el resultado se lee mejor sobre papel que sobre el fondo del formulario. */
.pr-propuesta {
  max-width: 44rem;
  margin: var(--kairikos-sp-5) auto var(--kairikos-sp-3);
  padding: var(--kairikos-sp-5);
  text-align: left;
  background: var(--kairikos-hueso);
  border: 1px solid var(--kairikos-linea);
  border-radius: var(--kairikos-radius-lg);
}

.pr-propuesta__resumen {
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-body);
  color: var(--kairikos-tinta-soft);
  margin: 0 0 var(--kairikos-sp-4);
}

/* Cada tipo de negocio en su propia pastilla: son búsquedas, no frases, y se
   leen mejor sueltas que en una enumeración con comas. */
.pr-propuesta__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kairikos-sp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-propuesta__lista li {
  padding: var(--kairikos-sp-2) var(--kairikos-sp-3);
  font-size: var(--kairikos-fs-sm);
  font-weight: 600;
  color: var(--kairikos-tinta);
  background: var(--kairikos-papel);
  border: 1px solid var(--kairikos-linea);
  border-radius: var(--kairikos-radius-md);
}

.pr-propuesta__cierre {
  font-size: var(--kairikos-fs-sm);
  line-height: var(--kairikos-lh-body);
  color: var(--kairikos-tinta-soft);
  margin: var(--kairikos-sp-4) 0 0;
  padding-top: var(--kairikos-sp-3);
  border-top: 1px solid var(--kairikos-linea);
}

/* --- Precios ------------------------------------------------------------ */

/* «.sector-card .pr-precio» y no «.pr-precio» a secas: landing.css trae
   «.sector-card p { font-size: fs-sm }», que es 0-1-1 de especificidad y le gana
   a una clase sola por mucho que esta hoja se cargue después. El precio salía
   más pequeño que el nombre del escalón — se ve en cuanto miras la página, y no
   falla en ninguna parte. */
.sector-card .pr-precio {
  font-family: var(--kairikos-font-serif);
  font-size: var(--kairikos-fs-2xl);
  line-height: var(--kairikos-lh-tight);
  color: var(--kairikos-tinta);
  margin: var(--kairikos-sp-3) 0 var(--kairikos-sp-2);
}

.sector-card .pr-precio strong {
  font-weight: 400;
}

.sector-card .pr-incluye {
  font-family: var(--kairikos-font-mono);
  font-size: var(--kairikos-fs-xs);
  letter-spacing: var(--kairikos-tr-caps);
  text-transform: uppercase;
  color: var(--kairikos-tinta-soft);
  margin: 0 0 var(--kairikos-sp-3);
}

/* El pie de la sección de precios.
   Existe porque primero se reutilizó .sector-cifra__nota, que es hueso al 50 %
   pensado para el bloque de tinta: sobre papel quedaba casi invisible. Es el
   mismo fallo que el botón a 1,00:1 del 26/09 — dos colores demasiado
   parecidos, ninguna alarma, y solo se ve mirando la página. */
.pr-nota {
  font-size: var(--kairikos-fs-sm);
  color: var(--kairikos-tinta-soft);
  margin: var(--kairikos-sp-6) 0 0;
  text-align: center;
}

.pr-escalon-cta {
  margin-top: var(--kairikos-sp-4);
}

@media (max-width: 767px) {
  .pr-zona__campos {
    flex-direction: column;
    align-items: stretch;
  }

  .pr-zona__campo {
    min-width: 0;
  }

  .pr-zona__campos .btn {
    width: 100%;
    justify-content: center;
  }
}