/* ============================================================
   "Sectores" — adaptado de prototipo-seccciones/nosotros/, para
   la página de Servicios (debajo del hero). Prefijado bajo
   .svc-sectores — sin reset global, nuestra paleta (sin verde).
   ============================================================ */
.svc-sectores{ background:#fff; padding:5rem 0; }
.svc-sectores .container{ max-width:1280px; margin:0 auto; padding:0 1.5rem; }

.svc-sectores-inner{ display:grid; gap:2rem; border-top:1px solid var(--border); }
@media (min-width:1024px){ .svc-sectores-inner{ grid-template-columns:repeat(12,1fr); } }

.svc-sectores-list{ list-style:none; }
@media (min-width:1024px){ .svc-sectores-list{ grid-column:span 12 / span 12; } }
.sv-sector-row{
  position:relative; display:flex; align-items:center; gap:1.25rem; width:100%;
  border:none; border-bottom:1px solid var(--border); padding-block:1rem; padding-inline:0;
  transition:border-color .3s; text-decoration:none; background:transparent; font:inherit; text-align:left; cursor:pointer;
}
.sv-sector-row:hover{ border-color: rgba(230,0,18,.6); }
.sv-sector-row-bar{ position:absolute; left:0; top:0; height:1px; width:0; background: var(--danger); transition:width .5s ease-out; }
.sv-sector-row:hover .sv-sector-row-bar{ width:100%; }
.sv-sector-code{ font-family: var(--font-display); font-size:.62rem; font-weight:700; letter-spacing:.2em; color:rgba(31,41,55,.5); transition:color .3s; }
.sv-sector-row:hover .sv-sector-code{ color: var(--danger); }
.sv-sector-icon{ flex-shrink:0; width:1.25rem; text-align:center; font-size:1.1rem; color: var(--brand); transition:all .3s; }
.sv-sector-row:hover .sv-sector-icon{ color: var(--danger); transform:scale(1.1); }
.sv-sector-name{ min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; font-family: var(--font-display); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--brand-ink); transition:transform .3s; }
@media (min-width:640px){ .sv-sector-name{ font-size:1.125rem; } }
.sv-sector-row:hover .sv-sector-name{ transform:translateX(.25rem); }
.sv-sector-dot{ flex-shrink:0; width:.375rem; height:.375rem; border-radius:50%; background: rgba(217,16,35,.3); transition:background-color .3s; }
.sv-sector-row:hover .sv-sector-dot{ background: var(--danger); }