/* ===================================================================
   NOREX — Estilos de páginas de ubicación (hub, estados, ciudades)
   Se carga solo en esas páginas; reutiliza tokens de base.css.
=================================================================== */

/* Hero con breadcrumbs */
.loc-hero{ padding-block: clamp(1.6rem, 1.2rem + 2vw, 2.6rem) clamp(3rem, 2.4rem + 4vw, 6rem); }
.loc-hero .breadcrumbs{ margin-bottom: clamp(1.4rem, 1rem + 2vw, 2.6rem); }
.loc-hero h1{ font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); }
.loc-hero .lead + .lead{ margin-top: .2rem; }
.loc-hero .quote-card .checkline{ font-size:.8rem; }
.loc-hero .quote-card .form-row{ margin-bottom:.8rem; }

.breadcrumbs ol{ display:flex; flex-wrap:wrap; gap:.4em; align-items:center; list-style:none; margin:0; padding:0; }
.breadcrumbs li{ display:inline-flex; align-items:center; gap:.4em; }
.breadcrumbs svg{ opacity:.6; }
.breadcrumbs [aria-current]{ color: rgba(255,255,255,.9); }

/* Texto largo */
.loc-split{ align-items:start; }
.loc-split p, .loc-prose p{ color: var(--ink-70); }
.loc-prose{ max-width: 68ch; }

.loc-figure{ margin:0; }
.loc-figure img{
  width:100%; height:auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius-l); box-shadow: var(--shadow-card);
  background: var(--blue-100);
}
.loc-figure figcaption{ font-size:.82rem; color: var(--slate); margin-top:.6rem; }

.loc-highlights{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  margin-top: clamp(2rem, 1.6rem + 2vw, 3rem);
}
.loc-highlights li{ border-left: 3px solid var(--blue); padding-left: 1rem; display:grid; gap:.2rem; }
.loc-highlights strong{ font-size: 1rem; }
.loc-highlights span{ font-size: .88rem; color: var(--ink-70); }
@media (max-width: 900px){ .loc-highlights{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .loc-highlights{ grid-template-columns: 1fr; } }

/* Servicios */
.loc-service{
  display:flex; flex-direction:column; gap:.9rem;
  background: var(--white); border:1px solid var(--slate-100);
  border-radius: var(--radius-l); padding: clamp(1.4rem, 1.2rem + .8vw, 2rem);
  box-shadow: var(--shadow-card);
}
.loc-service .service-block__head{ margin:0; }
.loc-service h3{ font-size: 1.08rem; margin:0; }
.loc-service p{ font-size:.94rem; color: var(--ink-70); margin:0; }
.loc-service ul{ display:grid; gap:.4rem; }
.loc-service li{ display:flex; gap:.5em; align-items:center; font-size:.88rem; color: var(--ink-70); }
.loc-service li svg{ width:15px; height:15px; color: var(--blue); flex:none; }
.loc-service .loc-link{ margin-top:auto; }

.loc-link{ display:inline-flex; align-items:center; gap:.35em; font-weight:700; font-size:.9rem; color: var(--blue); }
.loc-link:hover{ text-decoration: underline; }

/* Tarjetas de industria / ciudad */
.loc-card{
  display:block; background: var(--white); border:1px solid var(--slate-100);
  border-radius: var(--radius-m); padding: 1.4rem 1.5rem; height:100%;
}
.loc-card h3{ font-size: 1.05rem; margin-bottom:.45rem; }
.loc-card p{ font-size:.92rem; color: var(--ink-70); margin:0 0 .8rem; }
.loc-card--link{ transition: border-color .18s var(--ease), transform .18s var(--ease); }
.loc-card--link:hover{ border-color: var(--blue); transform: translateY(-2px); }

/* Pasos (lista ordenada semántica) */
.loc-steps{ list-style:none; margin:0; padding:0; }

/* Zonas de cobertura */
.loc-zones{ gap: 1rem 2rem; }
.loc-zone{ background: var(--white); border:1px solid var(--slate-100); border-radius: var(--radius-m); padding: 1.1rem 1.3rem; }
.loc-zone h3{ font-size: 1rem; margin-bottom:.3rem; }
.loc-zone h3 a{ color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.loc-zone p{ font-size:.9rem; color: var(--ink-70); margin:0; }

.loc-office{
  display:flex; gap:.8rem; align-items:flex-start;
  margin-top: 1.6rem; padding: 1rem 1.2rem;
  background: var(--white); border:1px dashed var(--slate-200); border-radius: var(--radius-m);
  font-size:.92rem;
}
.loc-office svg{ color: var(--blue); flex:none; }
.loc-office a{ color: var(--blue); font-weight:600; }

/* Hub: estados */
.loc-states{ display:grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0,1fr)); align-items:start; }
@media (max-width: 760px){ .loc-states{ grid-template-columns: 1fr; } }
.loc-state{ background: var(--white); border:1px solid var(--slate-100); border-radius: var(--radius-l); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-card); }
.loc-state h3{ margin-bottom:.4rem; }
.loc-state h3 a:hover{ color: var(--blue); }
.loc-state p{ color: var(--ink-70); }
.loc-state .loc-related{ margin-top: 1rem; }

/* Enlazado interno */
.loc-related__title{ font-size: 1.1rem; margin-bottom: 1rem; }
.loc-related{ display:flex; flex-wrap:wrap; gap:.6rem; }
.loc-related a{
  display:inline-flex; align-items:center; gap:.35em;
  font-size:.9rem; font-weight:600; color: var(--ink);
  background: var(--white); border:1px solid var(--slate-200);
  border-radius: 999px; padding:.55em 1.05em;
}
.loc-related a:hover{ border-color: var(--blue); color: var(--blue); }
.loc-related svg{ width:14px; height:14px; }

/* Checkbox de aviso dentro de .field (para que main.js lo valide) */
.field .checkline{ font-weight:500; font-size:.82rem; color: var(--ink-70); }
.field .checkline input{ width:auto; flex:none; padding:0; margin-top:.2rem; accent-color: var(--blue); }