/* ============================================================================
 * SECCIONES — bloques de contenido de la landing y páginas internas.
 * Requiere tokens.css cargado antes.
 * ========================================================================= */

/* --- Franja de marcas -------------------------------------------------------
 * Prueba social antes de pedir nada. El usuario reconoce las marcas y baja la
 * guardia sobre si el negocio es serio.
 * ------------------------------------------------------------------------- */

.logos__label {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-500);
  margin-bottom: var(--space-5);
}

.logos__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
}

.logos__item {
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: var(--tracking-snug);
  /* ink-500, no ink-400: los nombres de marca son texto real que el usuario
     lee para reconocer el negocio, no adorno. ink-400 daba 2.56:1 y reprobaba
     el mínimo AA de 4.5:1. Sigue siendo gris para no competir con el CTA. */
  color: var(--ink-500);
  transition: color 200ms ease;
}

.logos__item:hover { color: var(--brand-800); }

/* --- Pasos numerados --------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: paso; }

.steps .card__icon {
  font-weight: 800;
  background: var(--brand-800);
  color: var(--paper);
}

/* --- Buscador de compatibilidad ---------------------------------------------
 * Es el atajo de conversión para quien no está varado sino comparando precio.
 * ------------------------------------------------------------------------- */

.finder {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.finder__note {
  font-size: var(--text-sm);
  color: var(--ink-500);
  text-align: center;
}

/* Los select nativos traen la flecha del sistema; se reemplaza para que no
   desentone con el resto de campos. */
select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%),
                    linear-gradient(135deg, var(--ink-500) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-10);
}

select.field__input:disabled { background-color: var(--paper-3); color: var(--ink-400); }

/* --- Distritos ---------------------------------------------------------------
 * Lista escaneable, no párrafo: el usuario busca SU distrito, no lee la lista.
 * ------------------------------------------------------------------------- */

.districts {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-2);
}

.districts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

.districts li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success-600);
  flex-shrink: 0;
}

/* --- Preguntas frecuentes ---------------------------------------------------
 * <details> nativo: cero JavaScript, accesible por teclado de fábrica, y el
 * contenido queda en el HTML para que Google lo indexe.
 * ------------------------------------------------------------------------- */

.faq { display: grid; gap: var(--space-2); }

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--paper);
  overflow: hidden;
}

.faq__item[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch-min);
  padding: var(--space-4) var(--space-5);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::after {
  content: "+";
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--ink-400);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.faq__item[open] .faq__question::after { content: "−"; }

.faq__answer {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ink-600);
  max-width: 62ch;
}

/* --- CTA final ---------------------------------------------------------------- */

.cta-final { background: var(--paper-2); border-top: 1px solid var(--line); }

/* --- Catálogo ---------------------------------------------------------------
 * Las tarjetas de producto se estiran a la misma altura por la rejilla; el
 * precio y el botón se anclan abajo para que la fila quede alineada aunque
 * los nombres tengan largos distintos.
 * ------------------------------------------------------------------------- */

.producto { align-items: flex-start; }

.producto__specs {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--ink-600);
}

.producto__specs li {
  padding: var(--space-1) var(--space-2);
  background: var(--paper-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.producto__precio {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-900);
  /* Empuja precio y botón al fondo: alinea las filas de la rejilla. */
  margin-top: auto;
}

.producto__descuento {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--success-600);
}

.producto .btn { width: 100%; margin-top: var(--space-2); }

/* --- Filtros de marca (chips) ------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.chip {
  min-height: var(--touch-min);
  padding-inline: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-full);
  background: var(--paper);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.chip:hover { border-color: var(--brand-600); }

.chip--activa {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: var(--paper);
}

/* --- Estado vacío ------------------------------------------------------------
 * Filtrar y no encontrar nada es un resultado válido, no un error. El estado
 * vacío ofrece la salida (llamar) en vez de dejar al usuario en un callejón.
 * ------------------------------------------------------------------------- */

.estado-vacio {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  text-align: center;
  background: var(--paper-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}

.estado-vacio__titulo { font-size: var(--text-lg); font-weight: 700; }
.estado-vacio__texto { color: var(--ink-600); font-size: var(--text-sm); max-width: 38ch; }