/* Tipografía profesional para toda la web */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root {
    /* Colors */
    --primary-color: #007bff;
    /*--secondary-color: #6c757d;
    --accent-color: #ffc107;
    --text-color-dark: #212529;
    --text-color-medium: #333333;
    --text-color-light: #f8f9fa;*/
    --body-bg-color: var(--bs-body-bg, #ffffff); /* Respects Bootstrap's theme switching */
    
    /*--heading-color: #1a1a1a;*/
    --link-color: var(--primary-color);
    --link-hover-color: #0056b3; /* Darkened version of #007bff */
    --footer-bg-color: #343a40;
    --footer-text-color: #f1f1f1;

    /* Typography */
    --font-family-base: 'Inter', Arial, Helvetica, sans-serif;
    --base-font-size: 18px; /* Base size for rem calculations if needed elsewhere, html will set this */
    --line-height-base: 1.7;
    --line-height-heading: 1.2;
    --letter-spacing-base: 0.01em;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}



.carousel-inner img{
    width: 85%; /* Ejemplo de ancho */
    height: 500px; /* Ejemplo de alto */
    margin: 0 auto; /* Para centrar el carrusel */
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    color: var(--heading-color);
    line-height: var(--line-height-heading);
    margin-bottom: var(--spacing-md); /* Example: using spacing variable */
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

p, li {
    font-size: 1.1rem; /* Slightly larger than base body text */
    color: var(--text-color-medium);
   /* margin-bottom: var(--spacing-md);*/
}


.navbar-nav {
    width: 100%;
    text-align: center; /* Kept as per subtask report suggestion for centering */
    /* For BS5, ensure the UL itself is a flex container with justify-content-center if this text-align isn't enough */
}

/* Removed float and display: inline-block for modern flexbox approach (handled by Bootstrap or direct ul styling) */
/* .navbar-nav > li { */
    /* float: none; */
    /* display: inline-block; */
/* } */





.card-title {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold); /* Using semibold for card titles */
    color: var(--heading-color); /* Cards can have headings too */
}

.card-text, .list-unstyled li {
    font-size: 1rem; /* Base size for card text content */
    color: var(--text-color-medium);
}

footer {
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
    padding: var(--spacing-xl) 0;
    font-family: var(--font-family-base); /* Ensure footer inherits base font */
}

footer p, footer h5 { /* Combined selector for efficiency */
    color: var(--footer-text-color);
    font-size: 1rem; /* Standardized footer text size */
    /* Removed !important, hoping specificity is enough */
}

footer a {
    color: var(--footer-text-color);
    text-decoration: none;
    /* Removed !important */
}

footer a:hover {
    text-decoration: underline; /* Standard hover effect */
}




.logo img, .footer-logo img {
    max-height: 50px;
    background: white; /* Assuming logo background should remain white for visibility */
    padding: var(--spacing-sm); /* Example: using spacing variable */
    border-radius: var(--spacing-xs); /* Example: using spacing variable */
}

.footer-social a {
    margin-right: var(--spacing-md); /* Example: using spacing variable */
    color: var(--footer-text-color); /* Ensure icon links also use footer text color */
}

/* Responsive styles adjustments */
@media (max-width: 768px) {
    html {
        font-size: 16px; /* Adjust base font size for smaller screens */
    }
    /* h1, h2, p, li rem sizes will adjust automatically based on the new html font-size */
    h1 { font-size: 2rem; } /* Specific override if needed beyond rem scaling */
    h2 { font-size: 1.5rem; } /* Specific override if needed beyond rem scaling */
    /* body font-size: 1rem; will now be 16px */
}