/* nuestros_servicios.html y otros_servicios.html (mismo diseño) */

/* Secciones de texto + foto (.sv-alt cambia el fondo y .sv-layout-reverse invierte el orden) */
.sv{background:var(--bg)}
.sv-alt{background:var(--surface)}
.sv-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.sv-layout-reverse{grid-template-columns:1fr 1.15fr}
.sv-text h2{color:var(--brand-dark);font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:1.4rem}
:root[data-theme="dark"] .sv-text h2{color:var(--brand-light)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sv-text h2{color:var(--brand-light)}}
.sv-text .btn{margin-top:.5rem}

/* Lista con flecha */
.sv-list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.25rem}
.sv-list li{position:relative;padding-left:1.6rem;max-width:60ch}
.sv-list li::before{content:"";position:absolute;left:0;top:.35em;width:9px;height:9px;
  border-right:2px solid var(--brand-red-ink);border-bottom:2px solid var(--brand-red-ink);transform:rotate(-45deg)}

/* Foto: la ruta está en el atributo style del HTML */
.sv-image{
  aspect-ratio:1/1;
  border-radius:16px;
  border:1px solid var(--line);
  background-color:var(--surface);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.sv-alt .sv-image{background-color:var(--bg)}

@media (max-width:900px){
  .sv-layout,.sv-layout-reverse{grid-template-columns:1fr}
  .sv-image{order:-1;aspect-ratio:1/1}
}