/* Servicios · Lo que hacemos (vista previa). Usa los tokens de /css/dx.css. */
.dx-srv__intro { margin-bottom: clamp(28px, 4vw, 48px); }
.dx-srv__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }

/* Pestañas: columna en escritorio */
.dx-srv__tabs { position: sticky; top: calc(var(--dx-header-h) + 20px); display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--dx-line); border-radius: 12px; background: var(--dx-white); }
.dx-srv__tab {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-radius: 8px;
    background: transparent; color: var(--dx-ink); text-align: left; cursor: pointer;
    font: 600 16px/1.3 var(--dx-font);
    transition: background-color var(--dx-ease), color var(--dx-ease);
}
/* Viñeta: doble barra diagonal como la del logo «//». Gris en reposo, amarillo pleno en hover y en la activa.
   Es decorativa (CSS), así que los lectores de pantalla no la anuncian. */
.dx-srv__tab::before {
    content: ""; flex: none; width: 4px; height: 16px; margin-left: 2px; margin-right: 6px; border-radius: 1px;
    background: #C3CAD0; box-shadow: 7px 0 0 #C3CAD0; transform: skewX(-18deg);
    transition: background-color var(--dx-ease), box-shadow var(--dx-ease);
}
.dx-srv__tab:hover { background: var(--dx-soft); }
.dx-srv__tab:hover::before, .dx-srv__tab[aria-selected="true"]::before { background: var(--dx-yellow); box-shadow: 7px 0 0 var(--dx-yellow); }
.dx-srv__tab[aria-selected="true"] { background: var(--dx-soft); font-weight: 800; box-shadow: inset 0 0 0 1px var(--dx-line); }
.dx-srv__tab:focus-visible { outline: 2px solid var(--dx-charcoal); outline-offset: 2px; }

/* Panel */
.dx-srv__panel { display: grid; gap: 24px; }
.dx-srv__panel[hidden] { display: none; }
.dx-srv__panel:focus-visible { outline: 2px solid var(--dx-yellow); outline-offset: 6px; border-radius: 12px; }
.dx-srv__panel-title { margin: 0; color: var(--dx-ink); font: 800 clamp(24px, 2.4vw, 32px)/1.2 var(--dx-font); letter-spacing: -.015em; }
.dx-srv__text { max-width: 72ch; }

/* Carrusel */
.dx-srv__carousel { position: relative; }
.dx-srv__track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    border-radius: 12px; background: var(--dx-soft);
}
.dx-srv__track::-webkit-scrollbar { display: none; }
.dx-srv__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.dx-srv__slide img { display: block; width: 100%; height: auto; aspect-ratio: 11 / 7; object-fit: cover; }
.dx-srv__nav {
    position: absolute; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px;
    border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--dx-ink); cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(22, 28, 33, .45); transition: background-color var(--dx-ease), transform var(--dx-ease);
}
.dx-srv__nav:hover { background: var(--dx-yellow); }
.dx-srv__nav:focus-visible { outline: 2px solid var(--dx-yellow); outline-offset: 2px; }
.dx-srv__nav--prev { left: 14px; }
.dx-srv__nav--next { right: 14px; }
.dx-srv__counter {
    position: absolute; right: 14px; bottom: 14px; margin: 0; padding: 4px 10px; border-radius: 99px;
    background: rgba(22, 28, 33, .62); color: var(--dx-white); font: 600 13px/1.4 var(--dx-font); font-variant-numeric: tabular-nums;
}

/* Tablet y móvil: pestañas en fila desplazable sobre el panel */
@media (max-width: 1023px) {
    .dx-srv__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dx-srv__tabs {
        position: static; flex-direction: row; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-inline: -2px;
        border: 0; border-radius: 0; background: none; scroll-snap-type: x proximity; scrollbar-width: thin;
    }
    .dx-srv__tab { flex: none; width: auto; gap: 10px; padding: 9px 16px 9px 12px; border: 1px solid var(--dx-line); border-radius: 99px; background: var(--dx-white); white-space: nowrap; scroll-snap-align: start; font-size: 15px; }
    .dx-srv__tab::before { width: 3px; height: 13px; margin-right: 5px; box-shadow: 6px 0 0 #C3CAD0; }
    .dx-srv__tab:hover::before, .dx-srv__tab[aria-selected="true"]::before { box-shadow: 6px 0 0 var(--dx-yellow); }
    .dx-srv__tab[aria-selected="true"] { border-color: var(--dx-charcoal); background: var(--dx-white); box-shadow: none; }
}
@media (max-width: 559px) {
    .dx-srv__nav { width: 38px; height: 38px; margin-top: -19px; }
    .dx-srv__nav--prev { left: 8px; }
    .dx-srv__nav--next { right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .dx-srv__track { scroll-behavior: auto; }
    .dx-srv__tab, .dx-srv__nav { transition: none; }
}