/* SERVICES - grid layout responsive */
.services__card {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

@media screen and (min-width: 576px) {
    .services__card {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 992px) {
    .services__card {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Ensure each card fills its grid cell and keeps consistent height */
.services__card > .card {
    width: 100%;
    box-sizing: border-box;
    align-self: start; /* permitir crecimiento vertical al expandirse */
    display: flex; /* keep internal flex layout */
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap; /* permitir que el detalle ocupe la siguiente línea */
}

/* Tarjetas cerradas: todas del mismo tamaño y más compactas */
.services__card > .card:not(.detail-open) {
    height: 72px; /* altura fija cuando están cerradas */
    min-height: 72px;
    overflow: hidden; /* evitar que el detalle se muestre hasta abrir */
    padding: 0.55rem 0.9rem;
}

/* SERVICES */

.services {
    padding-top: 81px; /* Agrega espacio superior a la sección de servicios para separar visualmente del contenido anterior */
}

/* Asegurar que el header quede por encima si algún overlay aparece */
header{ z-index: 1000; }

.card {
    background-color: #111111; /* Fondo oscuro para las tarjetas, creando contraste con el contenido */
    transition: all 0.2s ease-in; /* Suaviza cualquier cambio visual en la tarjeta (como hover) con una transición rápida */
    border-radius: 0.5rem; /* Bordes redondeados para dar un aspecto moderno y amigable */
    position: relative; /* necesario para que el detalle absoluto se posicione respecto a la tarjeta */
    overflow: visible; /* permitir que el detalle se muestre fuera del área original de la tarjeta */
}

/* Cuando la tarjeta está abierta, estilizaremos para que el detalle parezca parte de la tarjeta */
.card.detail-open{
    background-color: var(--secondary-bg-color);
    color: #000;
    z-index: 5;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

/* Cuando la tarjeta está abierta, forzamos el estilo del logo para mantener contraste legible */
.card.detail-open .service__logo{ background: #fff !important; }
.card.detail-open .service__logo i{ color: #000 !important; }

.service__logo {
    height: 44px; /* tamaño reducido para tarjetas compactas */
    width: 44px;
    background-color: #000; /* Fondo negro para el logo, coherente con el estilo oscuro */
    border-radius: 0.5rem; /* Bordes redondeados para armonizar con la tarjeta */
    transition: all 0.2s ease-in; /* Transición suave para cambios visuales al hacer hover */
}

.service__logo i {
    font-size: x-large; /* Tamaño grande para el ícono, asegurando buena visibilidad */
    transition: all 0.2s ease-in; /* Transición suave para cambios de color o tamaño del ícono */
}

/* Estilos para el detalle integrado en la tarjeta */
.service-detail{
    /* in-flow expandable detail: ocupa toda la fila dentro de la tarjeta */
    position: relative;
    width: 100%;
    box-sizing: border-box;
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    background: var(--secondary-bg-color);
    color: #000;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    transition: max-height 320ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease, padding 220ms ease;
    padding: 0 1rem;
}
.card.detail-open .service-detail{
    max-height: 14rem; /* ajustable según contenido */
    opacity: 1;
    padding: 0.75rem 1rem 1rem 1rem;
}

/* Añadir chevron al final de la tarjeta (usando SVG inline para no depender de HTML extra) */
.card {
    /* asegurar stacking context para el pseudo-elemento */
    position: relative;
}
.card::after{
    content: '';
    position: absolute;
    right: 14px;
    top: 12px; /* ajustar para que quede centrado en la tarjeta compacta */
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 260ms ease, opacity 200ms ease;
    opacity: 0.9;
    pointer-events: none;
}
.card.detail-open::after{
    transform: rotate(180deg);
}

/* Cuando está abierto, darle una sombra y fondo sutil para destacar pero sin romper armonía */
.card.detail-open{
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    height: auto; /* permitir que la tarjeta crezca y empuje a las demás */
    overflow: visible;
}
.service-detail__content h4{ color: #000; margin:0 0 .35rem 0; }
.service-detail__content p{ color: #f4f4f4; margin:0; line-height:1.5; font-size:0.95rem; }

/* Soporta textos largos dentro del detalle (scroll interno) */
.service-detail__content{ max-height: 10rem; overflow: auto; }
.service-detail{ max-height: 12rem; }

/* DEBUG: marcador visual temporal cuando se procesa un click (se quita tras 400ms) */
.card.debug-click{ box-shadow: 0 0 0 4px rgba(80,255,120,0.12) inset; transform: translateY(-2px); transition: transform 140ms ease; }

.card:hover {
    /* Mantener hover, pero no sobreescribir el estado abierto */
    background-color: var(--secondary-bg-color);
}

.card:hover .service__logo {
    background-color: #fff; /* El fondo del logo se vuelve blanco al hacer hover, creando contraste con el ícono */
}

.card:hover .service__logo i {
    color: #000; /* El ícono se vuelve negro al hacer hover, manteniendo legibilidad sobre fondo blanco */
}


/* Mobile services polish */
@media screen and (max-width: 576px) {
    .services {
        padding-top: 3.5rem;
    }

    .services__title p {
        line-height: 1.55;
    }

    .services__card {
        gap: 0.85rem;
        margin-top: 2rem !important;
    }

    .services__card > .card:not(.detail-open) {
        height: 64px;
        min-height: 64px;
        padding: 0.45rem 0.75rem;
    }

    .service__logo {
        width: 38px;
        height: 38px;
    }

    .service__logo i {
        font-size: 1.15rem;
    }

    .service__name p {
        font-size: 0.92rem;
    }

    .service-detail__content p {
        font-size: 0.86rem;
        line-height: 1.45;
    }
}