/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 09 2026 | 11:03:15 */
/* --- SECCIÓN DETALLADA DE SERVICIOS (VERSIÓN DARK VIP) --- */
.services-detailed-section {
    background-color: var(--color-navy); /* Mismo azul oscuro del Hero */
    /* Mantenemos el padding grande para que no choque con el banner flotante */
    padding-top: 3%; 
    padding-bottom: 5%;
    position: relative;
}

/* Título de sección en Blanco/Dorado */
.section-heading-dark {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    color: #ffffff; /* Ahora blanco */
    margin-bottom: 50px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- CONTENEDOR DE LA CUADRÍCULA (GRID 2x4) --- */
.detailed-grid {
    display: grid;
    gap: 40px; /* Aumenté un poco el espacio para que se vea más elegante */
    width: 100%;
    margin-bottom: 80px;
    grid-template-columns: 1fr; 
}

/* 2. TABLETS Y ESCRITORIO (A partir de 768px en adelante) */
@media (min-width: 768px) {
    .detailed-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}


/* --- TARJETAS OSCURAS --- */
.card-detail {
    background: #0f2440;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #1f3a5e;
    display: flex;
    flex-direction: column;
    
    /* --- AQUÍ ESTÁ EL TRUCO PARA "MENOS ANCHAS" --- */
    width: 100%;           
    max-width: 380px;      /* Tope de ancho (como un teléfono grande) */
    margin: 0 auto;        /* Esto centra la tarjeta en su columna */
}

.card-detail:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border-color: #c5a059;
}

.card-image img {
    width: 100%;
    /* --- AQUÍ ESTÁ EL TRUCO PARA "MÁS LARGAS" --- */
    height: 320px;         /* Aumentado de 220px a 320px para dar verticalidad */
    object-fit: cover;
    border-bottom: 3px solid #c5a059;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.card-detail:hover .card-image img {
    opacity: 1; /* Brilla al pasar el mouse */
}

.card-content {
    padding: 25px;
    text-align: left;
	flex-grow: 1; /* Esto hace que si una descripción es corta, la tarjeta mantenga el tamaño */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-content h3 {
    font-family: 'Montserrat', sans-serif;
    color: #c5a059; /* Título dorado VIP */
	text-align:center;
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.card-content p {
    color: #b0b8c6; /* Gris azulado claro para lectura fácil sobre oscuro */
    font-size: 0.95rem;
    line-height: 1.6;card-content h3
}

/* Botón "Más Información" (Estilo Borde Dorado) */
.btn-small {
    display: inline-block;
    background-color: transparent;
    color: #c5a059;
    padding: 8px 20px;
    border: 1px solid #c5a059;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-small:hover {
    background-color: #c5a059;
    color: #000;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.4);
}


/* ESTADO HOVER: Color + Opaco + Grande */
.brands-logos img:hover {
    filter: grayscale(0%) opacity(1); /* Vuelve al color original y brillo total */
    transform: scale(1.2); /* Crece un 20% */
}

/* --- Ajustes Móvil para Servicios VIP --- */
@media (max-width: 768px) {
    .section-heading-dark {
        font-size: 1.8rem; /* Evita que el título se desborde o ocupe demasiado */
        margin-bottom: 30px;
    }
    
    .card-image img {
        height: 250px; /* Reduce un poco la altura para que la tarjeta completa quepa mejor en pantalla */
    }
}