/* Heliotropia · Servicios · se suma a styles.css y sobre.css */
.hero--serv .hero__bg{object-position:center top}
.hero--serv .hero__inner p{max-width:780px}
.hero--serv .hero__inner p.p2{margin-top:28px}
.sv{text-align:left;--fg:var(--blanco-a);--btn-bd:rgba(255,255,255,.4);color:var(--fg);padding:72px 0}
.sv.s-negro{background:var(--negro-a)}
.sv.s-gris{background:var(--morado-a);--fg:var(--negro-b);--btn-bd:rgba(33,33,33,.45)}
.sv.s-azul{background:var(--morado-c)}
.sv.s-lila{background:var(--morado-b);--fg:var(--negro-b);--btn-bd:rgba(33,33,33,.45)}
.sv__inner{width:min(1460px,100% - 140px);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.sv__head{display:flex;align-items:center;gap:20px}
.sv__head img{width:105px;height:105px;border-radius:50%;flex:none;object-fit:cover}
.sv__head h2{font:400 clamp(30px,3vw,40px)/1.2 var(--font-special);text-transform:uppercase;margin:0;max-width:340px}
.sv__body p{margin:0;font:400 16px/1.5 var(--font-sans)}
.sv__more{display:grid;gap:0}
.sv__more[hidden]{display:none}
.sv__more p{margin-top:24px}
.sv__tag{justify-self:start;margin-top:28px;padding:5px 18px;border-radius:var(--radius-pill);background:var(--crema-claro);color:var(--morado-c);font:400 14px/1.4 "Roca One","Young Serif",Georgia,serif}
.sv__more ul{margin:16px 0 0;padding-left:20px;display:grid;gap:4px;font:400 15px/1.5 var(--font-sans)}
.sv__more li::marker{content:"• "}
.sv__btn{margin-top:28px;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 26px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);border:1px solid var(--btn-bd);color:var(--fg);font:500 13px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.sv__btn:hover{background:rgba(255,255,255,.18)}
.sv__btn:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sv__btn .chev{transition:transform .2s}
.sv__btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.sv__btn .chev{transition:none}}
@media (max-width:1180px){.sv__inner{width:min(900px,100% - 48px);grid-template-columns:1fr;gap:28px}}
@media (max-width:860px){
  .sv{padding:48px 0}
  .sv__inner{width:calc(100% - 40px)}
  .sv__head img{width:72px;height:72px}
  .sv__head h2{font-size:28px}
  .hero--serv .hero__inner{padding-top:150px}
}