/* ==========================================================================
   CARRUSEL DE SERVICIOS (Reemplaza a "Nuestros Boletines Informativos")
   6 tarjetas en escritorio, 4 en laptop, 2 en tablet y 1 en móvil
   ========================================================================== */

.eps-services {
    --eps-blue: #0072ce;   /* Azul primario institucional */
    --eps-navy: #002855;   /* Azul institucional de títulos */
    --eps-gap: 16px;
    --eps-curve-h: 45px;   /* Igual al alto de la curva del hero (.wave-divider svg en estilos.css) */
    position: relative;
    z-index: 11;           /* Por encima de la curva del hero (z-index 10) para dibujar la unión */
    isolation: isolate;
    overflow: hidden;
    /* Sube hasta el borde del hero; el padding compensa para que el contenido no se mueva */
    margin-top: calc(-1 * var(--eps-curve-h));
    padding: calc(100px + var(--eps-curve-h)) 0 106px; /* Abajo: espacio extra para la curva invertida inferior */
    /* El fondo empieza debajo de la curva: en esos 45px solo se ve la curva y el hero */
    background: linear-gradient(165deg, #fbfdff 8%, #f2f9ff 75%, #e9f6ff 100%) bottom / 100% calc(100% - var(--eps-curve-h)) no-repeat;
    color: var(--eps-navy);
    /* La franja superpuesta deja pasar los clics al hero (indicadores del slider);
       el contenido de la sección los recupera abajo */
    pointer-events: none;
}

.eps-services > * {
    pointer-events: auto;
}

/* --- Unión con el hero --- */
.eps-services__bridge {
    position: absolute;
    inset: 0 0 auto;
    pointer-events: none;
    z-index: -1;
}

/* Misma geometría que la curva del hero: encaja exactamente sobre ella */
.eps-services__curve {
    display: block;
    width: calc(100% + 1.3px);
    height: var(--eps-curve-h);
}

/* Degradado que continúa el azul de la curva y se disuelve en el fondo,
   con una capa tenue que repite la forma de la curva (sin líneas ni olas) */
.eps-services__haze {
    height: 150px;
    background: linear-gradient(180deg, #dcf0fc 0%, rgba(220, 240, 252, .55) 45%, rgba(251, 253, 255, 0) 100%);
}

.eps-services__haze svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .eps-services__haze { height: 90px; }
}

/* Ondas decorativas inferiores */
.eps-services::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 128px;
    background: url('../img/SERVICIOS/DECOR/waves-bottom.svg') bottom / 100% 100% no-repeat;
    pointer-events: none;
}

/* Ondas decorativas superiores izquierdas */
.eps-services__decor--top {
    position: absolute;
    inset: 0 auto auto 0;
    width: 34%;
    max-width: 570px;
    height: 190px;
    background: url('../img/SERVICIOS/DECOR/waves-top.svg') top left / 100% 100% no-repeat;
    pointer-events: none;
    z-index: -1;
}

.eps-services__inner {
    width: min(1500px, calc(100% - 96px));
    margin: auto;
}

/* --- Encabezado --- */
.eps-services__header {
    text-align: center;
    margin: 0 0 37px;
}

.eps-services__eyebrow {
    color: var(--eps-blue);
    font-size: 13px;
    letter-spacing: 3px;
    font-weight: 700;
}

.eps-services__header h2 {
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 12px 0 16px;
    color: var(--eps-navy);
}

.eps-services__header em {
    color: var(--eps-blue);
    font-style: normal;
}

.eps-services__header p {
    font-size: clamp(14px, 1.15vw, 18px);
    line-height: 1.5;
    color: #64748b;
}

/* --- Carrusel --- */
.eps-services__carousel {
    position: relative;
}

.eps-services__viewport {
    overflow: hidden;
    outline-offset: 5px;
    padding: 14px 0 22px; /* Espacio para que la tarjeta elevada y su sombra no se corten */
}

.eps-services__track {
    display: flex;
    gap: var(--eps-gap);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* --- Tarjeta de servicio --- */
.eps-service-card {
    flex: 0 0 calc((100% - 5 * var(--eps-gap)) / 6);
    min-width: 0;
    overflow: hidden;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 9px 24px rgba(0, 40, 85, 0.09);
    border: 1px solid rgba(0, 114, 206, 0.08);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Hover y tarjeta seleccionada con clic (carrusel detenido) */
.eps-service-card:hover,
.eps-service-card.is-selected {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px -15px rgba(0, 40, 85, 0.3);
    border-color: rgba(0, 114, 206, 0.35);
}

.eps-service-card__photo {
    height: 190px;
    overflow: hidden;
    background: #d8ecfa;
}

.eps-service-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.eps-service-card:hover img,
.eps-service-card.is-selected img {
    transform: scale(1.08);
}

.eps-service-card.is-selected h3 {
    color: var(--eps-blue);
}

.eps-service-card.is-selected .eps-service-card__link {
    background: var(--eps-blue);
    color: #ffffff;
    opacity: 1;
}

.eps-service-card__body {
    padding: 18px 16px 16px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.eps-service-card h3 {
    font-size: 17px;
    line-height: 1.2;
    margin: 0 0 12px;
    font-weight: 700;
    color: var(--eps-navy);
}

.eps-service-card p {
    font-size: 14px;
    line-height: 1.48;
    color: #64748b;
}

/* Botón circular con flecha */
.eps-service-card__link {
    margin-top: auto;
    align-self: flex-end;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    background: #ddf1ff;
    color: var(--eps-blue);
    border-radius: 50%;
    font-size: 28px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.eps-service-card__link:not(.eps-service-card__link--pending):hover {
    background: var(--eps-blue);
    color: #ffffff;
}

/* Tarjeta sin URL configurada: flecha solo decorativa */
.eps-service-card__link--pending {
    opacity: 0.45;
    cursor: default;
}

/* --- Flechas laterales --- */
.eps-services__nav {
    position: absolute;
    z-index: 3;
    top: 48%;
    transform: translateY(-50%);
    height: 46px;
    width: 46px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: var(--eps-blue);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 17px rgba(0, 40, 85, 0.17);
}

.eps-services__nav--prev { left: -25px; }
.eps-services__nav--next { right: -25px; }

.eps-services__nav:hover,
.eps-services__nav:focus-visible {
    background: #e7f4ff;
}

/* --- Puntos de posición --- */
.eps-services__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.eps-services__dots button {
    height: 9px;
    width: 9px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: #c9e1f6;
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}

.eps-services__dots button[aria-current="true"] {
    background: var(--eps-blue);
    width: 22px;
}

/* Texto solo para lectores de pantalla */
.eps-services__status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Responsividad --- */
@media (max-width: 1250px) {
    .eps-service-card {
        flex-basis: calc((100% - 3 * var(--eps-gap)) / 4);
    }
}

@media (max-width: 800px) {
    .eps-services__inner {
        width: min(100% - 44px, 700px);
    }
    .eps-service-card {
        flex-basis: calc((100% - var(--eps-gap)) / 2);
    }
    .eps-service-card__photo {
        height: 170px;
    }
    .eps-services__header p br {
        display: none;
    }
    .eps-services__decor--top {
        width: 58%;
    }
}

@media (max-width: 480px) {
    .eps-services {
        padding: calc(72px + var(--eps-curve-h)) 0 88px;
    }
    .eps-services__inner {
        width: calc(100% - 44px);
    }
    .eps-service-card {
        flex-basis: 100%;
    }
    .eps-service-card__photo {
        height: 220px;
    }
    .eps-services__nav {
        width: 38px;
        height: 38px;
    }
    .eps-services__nav--prev { left: -19px; }
    .eps-services__nav--next { right: -19px; }
}

@media (prefers-reduced-motion: reduce) {
    .eps-service-card,
    .eps-service-card__photo img,
    .eps-services__dots button {
        transition: none;
    }
}

/* ==========================================================================
   ANIMACIÓN DE ENTRADA DE "TRÁMITES Y CONSULTAS EN LÍNEA"
   Se repite cada vez que la sección entra en pantalla al bajar, o al usar el
   enlace "Orientación al cliente" de la barra superior (ver js/main.js).
   ========================================================================== */

/* Deja espacio para la cabecera fija al saltar a #tramites */
.eps-services {
    scroll-margin-top: 100px;
}

/* El estado oculto solo se aplica cuando el JS está activo (.eps-reveal-ready),
   así el contenido nunca queda invisible si el script falla */
.eps-reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.9s ease;
    transition-delay: 0s;
}

.eps-reveal-ready.is-visible [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition-delay: var(--reveal-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .eps-reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* Reinicio instantáneo al repetir la animación desde el enlace */
.eps-reveal-ready.eps-reveal-reset [data-reveal] {
    transition: none;
}