.services{background:#efefef;color:#000;padding:clamp(48px,7vw,90px) var(--pad-x) clamp(40px,6vw,70px)}
.services__title{margin:0 0 clamp(36px,5vw,64px);text-align:center;font-size:clamp(26px,3.2vw,35px);font-weight:700;letter-spacing:-.015em;line-height:1.15}
.services__stage{position:relative;max-width:1200px;margin:0 auto}

/* Tarjeta */
.services__card{display:grid;grid-template-columns:42.3% 1fr;min-height:318px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 -10px 30px rgba(0,0,0,.04),0 12px 30px rgba(0,0,0,.06)}
.services__media{position:relative;background:linear-gradient(to top right,#ff2a2f 0%,#ff8e94 35%,#ffe4e5 75%,#fdf0f0 100%)}
.services__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.services__media img[hidden]{display:none}
.services__body{display:flex;flex-direction:column;justify-content:center;padding:32px clamp(24px,4.4vw,56px) 32px clamp(24px,2.8vw,30px)}
.services__num{font-size:22px;font-weight:400;margin:0 0 8px}
.services__name{font-size:clamp(19px,1.9vw,22px);font-weight:700;margin:0 0 14px;letter-spacing:-.01em}
.services__text{font-size:14px;line-height:1.65;font-weight:500;margin:0;max-width:56ch}
.services__media,.services__body{transition:opacity .25s ease}
.services__card.is-changing .services__media,.services__card.is-changing .services__body{opacity:0}
.services__card[hidden]{display:none}

/* Botón de la ficha (lleva al formulario) */
.services__cta{align-self:flex-start;display:inline-block;margin-top:22px;padding:12px 22px;background:var(--red);color:#fff;border-radius:999px;font:700 12px/1 var(--font);letter-spacing:.01em;box-shadow:0 8px 16px rgba(224,36,30,.24);transition:background .2s,transform .2s}
.services__cta:hover{background:#000;transform:translateY(-1px)}

/* Flechas */
.services__arrow{position:absolute;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;border:0;background:#fff;color:#000;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12);transition:background .2s,color .2s}
.services__arrow:hover{background:var(--red);color:#fff}
.services__arrow svg{width:16px;height:16px}
.services__arrow--prev{left:-34px}
.services__arrow--next{right:-34px}

/* Pestañas */
.services__tabs{display:grid;grid-template-columns:repeat(8,1fr);max-width:1140px;margin:clamp(28px,3.4vw,40px) auto 0}
.services__tab{position:relative;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:none;border:1px solid transparent;border-radius:9px;color:#555;font:500 8.5px/1 var(--font);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.services__tab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.services__tab+.services__tab::after{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:1px;background:#e2e2e2}
.services__tab:hover{color:var(--red)}
.services__tab[aria-selected="true"]{background:#f0d4d6;border-color:var(--red);color:var(--red)}
.services__tab[aria-selected="true"]::after{display:none}
.services__tab[aria-selected="true"]::before{content:"";position:absolute;left:50%;bottom:100%;height:20px;width:1px;background:var(--red)}

@media(max-width:900px){
  .services__arrow--prev{left:8px}
  .services__arrow--next{right:8px}
  .services__arrow{top:150px;margin-top:0}
}
@media(max-width:720px){
  .services__card{grid-template-columns:1fr}
  .services__media{height:300px}
  .services__arrow{top:130px}
  .services__text{font-size:13px}
  /* Todas las opciones a la vista: cuadrícula de 4 x 2 */
  .services__tabs{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
  .services__tab{height:auto;min-height:64px;padding:10px 4px;gap:7px;background:#fff;border-color:#e4e4e4;font-size:8px;letter-spacing:.06em;line-height:1.2;text-align:center}
  .services__tab+.services__tab::after,.services__tab[aria-selected="true"]::before{display:none}

  /* Deslizar con el dedo: todas las fichas en fila con scroll-snap */
  .services__arrow{display:none}
  .services__track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 calc(var(--pad-x) * -1);padding:4px var(--pad-x) 24px;scroll-padding:0 var(--pad-x);scrollbar-width:none}
  .services__track::-webkit-scrollbar{display:none}
  .services__track .services__card,.services__track .services__card[hidden]{display:grid;grid-template-rows:auto 1fr;flex:0 0 88%;scroll-snap-align:center;scroll-snap-stop:always}
}
@media(prefers-reduced-motion:reduce){.services__media,.services__body{transition:none}}