/* ============================================================
   SECTORES — página única con informe de mercado (7 macro-sectores)
   ============================================================ */

html { scroll-behavior: smooth; }
#quito-norte, #quito-centro-norte, #quito-sur, #cumbaya, #tumbaco, #valle-chillos, #puembo,
#comparativa, #recomendaciones, #disclaimer {
  scroll-margin-top: 96px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.sectores-page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space-7) var(--pad-x) var(--space-8);
}

/* Hero */
.sectores-hero {
  text-align: center;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}
.sectores-hero .etiqueta-editorial { margin-bottom: var(--space-3); }
.sectores-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.sectores-hero .sectores-sub {
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto var(--space-2);
  line-height: 1.75;
}
.sectores-hero .sectores-fecha {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
}

/* Nota metodológica */
.sectores-metodo {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.sectores-metodo h2 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.sectores-metodo p,
.sectores-metodo li {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-soft);
}
.sectores-metodo ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.2rem;
}
.sectores-metodo li { margin-bottom: 6px; }

/* Índice sticky */
.sectores-indice {
  position: sticky;
  top: 84px;
  z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid var(--ink);
  margin: 0 calc(-1 * var(--pad-x)) var(--space-6);
  padding: var(--space-3) var(--pad-x);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sectores-indice ul {
  list-style: none;
  display: flex;
  gap: var(--space-4);
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}
.sectores-indice a {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.sectores-indice a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Bloque por sector */
.sector-bloque {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--line);
}
.sector-bloque:first-of-type { border-top: none; padding-top: 0; }

.sector-encabezado { margin-bottom: var(--space-5); }
.sector-encabezado h2 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.sector-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  line-height: 1.7;
}
.sector-meta strong {
  color: var(--muted);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 500;
}

.sector-copy {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
  max-width: 900px;
}

.sector-bloque h3 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-3);
}
.sector-bloque p {
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
  max-width: 900px;
}
.sector-bloque blockquote {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--line);
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.75;
  max-width: 900px;
}

/* Tablas */
.sector-tabla-wrap {
  overflow-x: auto;
  margin: var(--space-4) 0 var(--space-5);
  -webkit-overflow-scrolling: touch;
}
.sector-tabla {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.sector-tabla caption {
  text-align: left;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-2);
  caption-side: top;
}
.sector-tabla th,
.sector-tabla td {
  border: 1px solid var(--ink);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.sector-tabla th {
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--paper-2);
  color: var(--ink);
}

/* Servicios */
.sector-servicios {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  max-width: 900px;
}
.sector-servicios dt {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.sector-servicios dd {
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}

/* Fortalezas / limitaciones */
.sector-fl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
  max-width: 900px;
}
.sector-fl h4 {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.sector-fl ul {
  margin: 0;
  padding-left: 1.1rem;
}
.sector-fl li {
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.sector-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.sector-cta .btn-borde-oscuro {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.sector-cta .btn-borde-oscuro:hover {
  background: var(--ink);
  color: var(--on-dark);
}

/* Comparativa y recomendaciones */
.sectores-comparativa,
.sectores-recomendaciones {
  padding: var(--space-7) 0;
  border-top: 1px solid var(--ink);
}
.sectores-comparativa h2,
.sectores-recomendaciones h2 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin-bottom: var(--space-5);
}
.sectores-comparativa .sector-tabla { min-width: 640px; }

.recom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.recom-col h3 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.recom-col ol {
  margin: 0;
  padding-left: 1.2rem;
}
.recom-col li {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.sectores-disclaimer {
  padding: var(--space-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  margin-top: var(--space-6);
}
.sectores-disclaimer h2 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.sectores-disclaimer p {
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--muted);
}

@media (max-width: 860px) {
  .sectores-indice {
    position: sticky;
    top: 72px;
    display: block;
    height: auto;
    padding: var(--space-2) var(--pad-x);
    background: #FFFFFF;
    scroll-snap-type: x proximity;
  }
  .sectores-indice ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-3);
    position: static;
    background: transparent;
    padding: 0;
    border: none;
  }
  .sectores-indice a {
    color: var(--ink-soft);
  }
  .sectores-indice a:hover {
    color: var(--ink);
  }
  .sector-servicios,
  .sector-fl-grid,
  .recom-grid { grid-template-columns: 1fr; }
}