/* ============================================================
   THUSS — servicios.css
   Servicios en el celular como tarjetas que se deslizan (servicios.js).
   En computadora no cambia nada: estas piezas no se muestran.
   ============================================================ */
.svc-card-num, .svc-card-title, .svc-guia{ display: none; }

@media (max-width: 768px){
  /* el selector con flechas se reemplaza por las tarjetas */
  .svc-nav{ display: none; }

  .svc-detail{
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: 1.5rem;
    padding: 0 1.5rem 4rem;
    scrollbar-width: none;
  }
  .svc-detail::-webkit-scrollbar{ display: none; }

  /* todas las tarjetas a la vista, una al lado de la otra; la siguiente asoma */
  .svc-panel, .svc-panel.active{
    position: relative; top: auto; left: auto; right: auto;
    opacity: 1; visibility: visible; pointer-events: auto;
    animation: none;
    flex: 0 0 86%; scroll-snap-align: start;
    background: #FFF; border: 1px solid var(--ll);
    padding: 1.25rem 1.15rem 1.4rem;
  }
  /* adentro de la tarjeta, las secciones van sin recuadro propio: así el
     texto usa todo el ancho y la tarjeta no queda tan larga */
  .svc-panel .svc-content{ gap: 1.25rem; }
  .svc-panel .svc-section{ background: none; border: none; padding: 0; }
  .svc-panel .svc-resultado{ background: var(--bg); border-left: 3px solid var(--black); padding: .9rem 1rem; }
  .svc-card-num{
    display: block;
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
    letter-spacing: .18em; color: var(--gold);
  }
  .svc-card-title{
    display: block; margin: .35rem 0 1rem;
    font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 900;
    letter-spacing: .04em; text-transform: uppercase; line-height: 1.2; color: var(--black);
  }

  /* guía arriba de las tarjetas: pista + puntitos */
  .svc-guia{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 1.5rem .5rem; }
  /* puntitos: el área táctil es más grande que el punto */
  .svc-dots{ display: flex; gap: 0; }
  .svc-dot{
    width: 24px; height: 44px; padding: 0; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .svc-dot::before{
    content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--ll);
    transition: width .3s ease, background .3s ease;
  }
  .svc-dot[aria-current="true"]::before{ width: 22px; background: var(--gold); }
  .svc-dot:focus-visible{ outline: 2px solid var(--gold); outline-offset: -6px; border-radius: 8px; }

  /* pista que se va apenas la persona desliza */
  .svc-hint{
    margin: 0; white-space: nowrap;
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--gd);
    transition: opacity .4s ease;
  }
  .svc-hint::after{ content: ' →'; display: inline-block; animation: svcHint 1.6s ease-in-out infinite; }
  .svc-hint.oculta{ opacity: 0; }
}
@keyframes svcHint{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce){ .svc-hint::after{ animation: none; } }