/* ==========================================================================
   CONFIGURACIÓN DEL CARRUSEL 3D (ESPECIALIDADES)
   Para cambiar el tamaño solo ajusta --card-w / --card-h (y --radio si hace falta).
   --radio = (ancho / 2) / tan(18°) ≈ ancho × 1.54  → las 10 tarjetas no se enciman.
   ========================================================================== */
.segundo-carrusel-container {
    --card-w: 420px;
    --card-h: 300px;
    --radio: 660px;
    max-width: none; /* anula el límite de 700px heredado de style.css */
    margin: 0 auto;
    padding: 80px 0;
    overflow: hidden; /* Evita scroll horizontal por la rotación 3D */
}

.icon-cards-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(var(--card-h) + 160px); /* Espacio para la perspectiva */
}

.icon-cards {
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    perspective: 2000px;
    margin: 0;
}

.icon-cards__content {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1s;
}

.icon-cards__item {
    position: absolute;
    width: var(--card-w);
    height: var(--card-h);
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 147, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #cfeaff;
    transition: all 0.3s;
    backface-visibility: hidden; /* Mejora rendimiento */
    transform: rotateY(calc(36deg * var(--i))) translateZ(var(--radio));
}

.icon-cards__item img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}

/* Posición de cada tarjeta en el círculo (10 tarjetas × 36°) */
.icon-cards__item:nth-child(1)  { --i: 0; }
.icon-cards__item:nth-child(2)  { --i: 1; }
.icon-cards__item:nth-child(3)  { --i: 2; }
.icon-cards__item:nth-child(4)  { --i: 3; }
.icon-cards__item:nth-child(5)  { --i: 4; }
.icon-cards__item:nth-child(6)  { --i: 5; }
.icon-cards__item:nth-child(7)  { --i: 6; }
.icon-cards__item:nth-child(8)  { --i: 7; }
.icon-cards__item:nth-child(9)  { --i: 8; }
.icon-cards__item:nth-child(10) { --i: 9; }

/* Laptops y tablets */
@media (max-width: 1400px) {
    .segundo-carrusel-container {
        --card-w: 340px;
        --card-h: 245px;
        --radio: 540px;
    }
}

/* Móvil: tarjetas más pequeñas para que quepan */
@media (max-width: 768px) {
    .segundo-carrusel-container {
        --card-w: 180px;
        --card-h: 140px;
        --radio: 280px;
        padding: 50px 0;
    }
}

/* ANIMACIÓN: gira infinito y se detiene en cada especialidad para poder leerla.
   50s / 10 tarjetas = 5s por tarjeta (≈3.75s quieta + 1.25s girando).
   Para cambiar la velocidad, ajusta solo los segundos. */
.step-animation {
    animation: spin 50s infinite ease-in-out;
}

/* Pausa al pasar el mouse */
.icon-cards:hover .step-animation {
    animation-play-state: paused;
}

@keyframes spin {
    0%,  7.5%  { transform: rotateY(0deg); }
    10%, 17.5% { transform: rotateY(-36deg); }
    20%, 27.5% { transform: rotateY(-72deg); }
    30%, 37.5% { transform: rotateY(-108deg); }
    40%, 47.5% { transform: rotateY(-144deg); }
    50%, 57.5% { transform: rotateY(-180deg); }
    60%, 67.5% { transform: rotateY(-216deg); }
    70%, 77.5% { transform: rotateY(-252deg); }
    80%, 87.5% { transform: rotateY(-288deg); }
    90%, 97.5% { transform: rotateY(-324deg); }
    100%       { transform: rotateY(-360deg); }
}

/* ==========================================================================
   BANNER AJOLOTE (ZOOM A LA IZQUIERDA)
   ========================================================================== */
@media (max-width: 768px) {
    .banner-Ninna-fondo img {
        height: 250px;
        object-fit: cover;
        /* Mueve el zoom hacia la IZQUIERDA (0% es izquierda total) */
        object-position: 25% center; 
    }
}