/* Import Google Fonts for a modern look */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Montserrat:wght@700;800&display=swap');

/* Base Body Styles for consistent typography */
body {
    font-family: 'Poppins', sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #f8f9fa; /* Light background for consistency */
}

/* ====== SECTION: ¿QUIÉNES SOMOS? (Top Section) ====== */
.section-acerca-top {
    /* Use a pseudo-element for the background image and gradient overlay */
    position: relative;
    padding: 80px 0; /* Increased padding for more space */
    z-index: 1; /* Ensure content is above pseudo-element */
    overflow: hidden; /* Hide anything that spills out */
    border-radius: 0 0 40px 40px; /* Slightly more rounded */
    box-shadow: 0 8px 30px rgba(0,0,0,0.08); /* Stronger, softer shadow */
}

.section-acerca-top::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.95), rgba(236, 236, 236, 0.95)), /* Your gradient overlay */
        url('../img/fondos/nosotros.jpg') no-repeat center center; /* Your background image */
    background-size: cover;
    background-attachment: scroll; /* Changed from fixed for better control and mobile performance */
    z-index: -1; /* Place behind content */
}

/* Badge "Firma" */
.section-acerca-top .badge.bg-warning {
    background-color: #8d7a4b !important; /* Use your primary brand color */
    color: #fff !important;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    font-weight: 700;
    padding: 0.5em 1em;
    border-radius: 5px; /* Slightly rounded for the badge */
    opacity: 0; /* For animation */
    transform: translateY(-10px); /* For animation */
    animation: slideInFromTop 0.8s forwards ease-out;
}

/* H2 Heading */
.section-acerca-top h2 {
    color: #232323;
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem; /* Larger for more impact */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    opacity: 0; /* For animation */
    transform: translateX(-30px); /* For animation */
    animation: slideInFromLeft 0.8s forwards ease-out 0.2s;
}

/* Paragraphs */
.section-acerca-top p {
    color: #4a4a4a; /* Slightly darker for better contrast */
    font-size: 1.05rem; /* Slightly refined size */
    margin-bottom: 20px; /* More space below paragraphs */
    line-height: 1.7; /* Improved readability */
    opacity: 0; /* For animation */
    transform: translateX(-30px); /* For animation */
    animation: slideInFromLeft 0.8s forwards ease-out 0.4s;
}

/* Button */
.section-acerca-top .btn.btn-warning {
    background-color: #b89b5e; /* Brand primary button color */
    border-color: #b89b5e;
    color: #fff;
    padding: 12px 30px; /* More padding for a bolder button */
    border-radius: 28px; /* Slightly more rounded */
    font-size: 1.05rem;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(184,155,94,0.3); /* Subtle initial shadow */
    opacity: 0; /* For animation */
    transform: translateY(20px); /* For animation */
    animation: fadeInUp 0.8s forwards ease-out 0.6s;
}

.section-acerca-top .btn.btn-warning:hover {
    background-color: #a3894e; /* Slightly darker on hover */
    border-color: #a3894e;
    color: #fff; /* Keep text white for better contrast */
    box-shadow: 0 8px 25px rgba(184,155,94,0.5); /* More prominent shadow on hover */
    transform: translateY(-3px); /* Subtle lift on hover */
}

/* Image */
.section-acerca-top img {
    border-radius: 16px; /* Rounded corners for the image */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* More depth */
    transition: transform 0.4s ease-in-out;
    opacity: 0; /* For animation */
    transform: scale(0.9); /* For animation */
    animation: scaleIn 0.8s forwards ease-out 0.8s;
}

.section-acerca-top img:hover {
    transform: translateY(-8px) scale(1.01); /* Subtle lift and slightly larger on hover */
}

/* Keyframe Animations for Quienes Somos Top */
@keyframes slideInFromTop {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFromLeft {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    to { opacity: 1; transform: scale(1); }
}


/* ====== SECTION: CONSTANTES EN NUESTROS IDEALES (Bottom Section) ====== */
.section-nuestro-compromiso {
    background: linear-gradient(180deg, #f5f7fa 0%, #ffffff 100%); /* Softer, modern gradient */
    border-radius: 40px 40px 0 0; /* Matching top section radius */
    box-shadow: 0 -8px 30px rgba(0,0,0,0.06); /* Softer shadow for lift */
    position: relative;
    z-index: 1;
    padding: 80px 0 100px 0; /* More padding at bottom */
    overflow: hidden;
}

/* Main title */
.section-nuestro-compromiso h2.fw-bold.text-center {
    color: #232323;
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem; /* Larger title for impact */
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 60px; /* More space below heading */
    text-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Subtle text shadow */
    opacity: 0;
    transform: translateY(-30px);
    animation: fadeInDown 1s forwards ease-out;
}

@keyframes fadeInDown {
    to { opacity: 1; transform: translateY(0); }
}

/* Card styles */
.section-nuestro-compromiso .card {
    background: #fff !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.07); /* Deeper initial shadow */
    border: 1px solid #e0e0e0 !important; /* Lighter, more subtle border */
    border-radius: 20px !important; /* Consistent rounded corners */
    padding: 35px 25px !important; /* Adjusted padding */
    transition: all 0.4s cubic-bezier(.25, .8, .25, 1); /* Smoother transition */
    height: 100%; /* Ensure consistent height for cards */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 0; /* For animation */
    transform: translateY(40px) scale(0.95); /* For animation */
    animation: cardPopUp 0.7s forwards ease-out;
}

/* Stagger animation for cards */
.section-nuestro-compromiso .col-md-4:nth-child(1) .card { animation-delay: 0.3s; }
.section-nuestro-compromiso .col-md-4:nth-child(2) .card { animation-delay: 0.5s; }
.section-nuestro-compromiso .col-md-4:nth-child(3) .card { animation-delay: 0.7s; }

@keyframes cardPopUp {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.section-nuestro-compromiso .card:hover {
    box-shadow: 0 15px 40px rgba(184,155,94,0.25); /* More prominent, branded shadow on hover */
    border-color: #b89b5e !important; /* Highlight border with brand color */
    transform: translateY(-12px) scale(1.02); /* More noticeable lift and slight scale */
}

/* Number badge inside cards */
.section-nuestro-compromiso .badge.bg-warning {
    background: linear-gradient(135deg, #b89b5e 0%, #d4c08b 100%) !important; /* Richer gradient */
    color: #fff !important;
    font-weight: 700;
    font-size: 1.5rem !important; /* Larger number */
    width: 60px; /* Larger circular badge */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(184,155,94,0.4); /* Stronger badge shadow */
    border: 4px solid #ffffff; /* White border for pop */
    margin-bottom: 20px; /* More space below the badge */
    transition: all 0.3s ease;
}

.section-nuestro-compromiso .card:hover .badge.bg-warning {
    background: linear-gradient(135deg, #a3894e 0%, #b89b5e 100%) !important; /* Darker gradient on hover */
    box-shadow: 0 6px 20px rgba(184,155,94,0.6); /* More intense shadow on hover */
    transform: translateY(-3px); /* Subtle lift for the badge too */
}

/* Card titles */
.section-nuestro-compromiso h5.fw-bold {
    color: #232323;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem; /* Larger for better hierarchy */
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card paragraphs */
.section-nuestro-compromiso p.mb-0 {
    color: #555; /* Softer gray for body text */
    font-size: 1rem;
    line-height: 1.7;
    /* margin-bottom: 0; (already handled by Bootstrap's mb-0) */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .section-acerca-top {
        padding: 60px 0;
    }
    .section-acerca-top h2 {
        font-size: 2.5rem;
    }
    .section-acerca-top p {
        font-size: 1rem;
    }
    .section-nuestro-compromiso {
        padding: 60px 0 80px 0;
    }
    .section-nuestro-compromiso h2 {
        font-size: 2.5rem;
        margin-bottom: 40px;
    }
    .section-nuestro-compromiso .badge.bg-warning {
        width: 50px;
        height: 50px;
        font-size: 1.3rem !important;
    }
    .section-nuestro-compromiso .card {
        padding: 30px 20px !important;
    }
    .section-nuestro-compromiso h5 {
        font-size: 1.2rem;
    }
}

@media (max-width: 767.98px) {
    .section-acerca-top,
    .section-nuestro-compromiso {
        border-radius: 0; /* Remove border-radius on small screens */
        padding: 40px 0 20px 0; /* Adjusted padding */
    }
    .section-acerca-top h2,
    .section-acerca-top p,
    .section-acerca-top .badge,
    .section-acerca-top .btn,
    .section-acerca-top img {
        text-align: center; /* Center content on mobile for the top section */
        /* Disable animations on mobile for performance/simplicity */
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .section-acerca-top .col-lg-6 {
        text-align: center; /* Ensures content centers when columns stack */
    }
    .section-acerca-top img {
        margin-top: 30px; /* Add space above image on mobile */
    }
    .section-acerca-top h2 {
        font-size: 2rem;
        margin-bottom: 15px;
    }
    .section-nuestro-compromiso h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    .section-nuestro-compromiso .card {
        margin-bottom: 25px; /* Add space between cards vertically */
        /* Disable animations on mobile */
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .section-nuestro-compromiso .badge.bg-warning {
        width: 40px;
        height: 40px;
        font-size: 1.1rem !important;
        margin-bottom: 15px;
    }
    .section-nuestro-compromiso h5 {
        font-size: 1rem;
    }
    .section-nuestro-compromiso p {
        font-size: 0.95rem;
    }
}





/* Estilos para los botones del acordeón (encabezados) */
.custom-accordion-button {
    background-color: #f8f9fa; /* Color de fondo similar al de la imagen */
    color: #333; /* Color del texto */
    font-weight: bold;
    border-bottom: 1px solid #dee2e6; /* Separador entre elementos */
    padding: 1rem 1.25rem; /* Ajustar el padding si es necesario */
    text-align: left; /* Alinear el texto a la izquierda */
}

.custom-accordion-button:not(.collapsed) {
    background-color: #4b5278; /* Color de fondo para el elemento abierto, similar al de la imagen */
    color: #fff; /* Color del texto para el elemento abierto */
}

/* Cambiar el color del icono de flecha del acordeón */
.custom-accordion-button::after {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(285deg) brightness(100%) contrast(100%); /* Hace la flecha blanca en estado abierto */
}

.custom-accordion-button.collapsed::after {
    filter: none; /* Vuelve la flecha a su color original en estado colapsado */
}

/* Estilos para el cuerpo del acordeón (contenido) */
.custom-accordion-body {
    background-color: #f8f9fa; /* Color de fondo del cuerpo por defecto */
    padding: 1.5rem; /* Padding para el contenido */
}

/* Estilos específicos para el cuerpo de la misión */
.custom-accordion-mission-body {
    background-color: #4b5278; /* Color de fondo oscuro para el cuerpo de la misión */
    color: #fff; /* Color del texto para el cuerpo de la misión */
    border-radius: 0; /* Asegurarse de que no tenga bordes redondeados */
}

/* Estilo para el icono dentro del cuerpo de la misión */
.custom-accordion-icon {
    width: 80px; /* **Aumentado de 60px a 80px** */
    height: 80px; /* **Aumentado de 60px a 80px** */
    /* Puedes añadir más estilos para el icono si es necesario, como `object-fit: contain;` */
}

/********************Experiencia legal************************/
.seccion-compromiso {
    background-image: url('../img/fondos/fondo_acerca.png'); /* Ruta de la imagen de fondo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}