@font-face {
    font-family: 'Monreal';
    src: url('fonts/CWGOEP+MontrealRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Reset básico y variables */
:root{
    --primary:#273063;
    --light:#f7f9fc;
    --dark:#333;
    --header-height: 80px; /* Define header height variable */
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Monreal', Arial, Helvetica, sans-serif;}
body{background:var(--light);color:var(--primary);line-height:1.6;}
a{text-decoration:none;color:inherit;}

/* Apply padding and gradient to the main content area */
main {
    padding: 8rem 1rem; /* Increased vertical padding */
    background: radial-gradient(
        circle at center, /* Shape and position */
        #ffffff 0%,      /* White at the very center */
        var(--light) 80%   /* Fade to light color towards the edges (adjust 80% as needed) */
    );
}

a{
    color: #6da5c5; /* Lighter blue */
    text-decoration: underline;
}

header a{
    text-decoration: none;
    color: var(--primary);
}

/* Header y navegación */
header{display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3); height: var(--header-height); position: relative; /* Added relative position */}
.logo{height:60px; /* Slightly smaller logo for header */ width:auto; margin-right: 1rem;}
nav ul{display:flex;gap:1rem;list-style:none;}
nav li a{padding:.5rem 1rem;border-radius:4px;color: var(--primary); font-weight: bold;}
nav li a:hover, nav li a.active{background:var(--primary);color:#fff;}

#burger{
    display:none;
    font-size: 1.8rem; /* Slightly larger icon */
    background:none;
    border:none;
    cursor:pointer;
    padding: 0.5rem; /* Add some padding for easier tapping */
    line-height: 1; /* Ensure icon is vertically centered */
    color: var(--primary); /* Use primary color */
    position: relative; /* Needed for potential icon switch pseudo-elements */
    width: 40px; /* Fixed width */
    height: 40px; /* Fixed height */
    text-align: center; /* Center icon text */
}

/* Style for the 'X' close icon state */
#burger.is-active::before {
    content: '\2715'; /* Unicode for 'X' */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff; /* Ensure it covers the burger */
}
/* Hide burger bars when 'X' is shown */
#burger.is-active span {
    display: none; /* Or use opacity/visibility if animating the burger bars */
}

/* Main logo and tagline styles for index.html - PADDING MOVED TO main */
.main-logo-section { 
    text-align: center; 
    /* padding: 4rem 1rem 2rem 1rem;  Padding now on main */
}
.main-logo {
    max-width: 80%; /* Allow logo to be larger on mobile */
    height: auto;
    max-height: 120px; /* Slightly reduce max height on mobile */
}
.tagline-section { 
    text-align: center; 
    margin-top: 2rem;
    /* padding: 1rem 2rem 3rem 2rem; Padding now on main */
}
.tagline-section h2 {
    font-size: 1.5rem; /* Smaller tagline font size on mobile */
    color: var(--dark);
    font-weight: normal;
    max-width: 90%; /* Wider max-width on mobile */
    margin: 0 auto; /* Center the text block */
}

/* Hero */
.hero {
    position: relative;
    height: 50vh; /* Default height, can be overridden */
    overflow: hidden;
    display: flex; /* Use flex for centering overlay content */
    align-items: center;
    justify-content: center;
    text-align: center; /* Center text within overlay */
}
.hero img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Default object position */
    z-index: 1; /* Image behind overlay */
}
.hero .overlay {
    position: relative; /* Changed from absolute to relative for easier z-index management */
    z-index: 2; /* Overlay on top of image */
    inset: 0; /* Replaces top, left, right, bottom: 0 */
    background: rgba(0, 0, 0, 0.3); /* Default dark overlay */
    display: flex; /* Align content vertically and horizontally */
    flex-direction: column; /* Stack content vertically */
    align-items: center;
    justify-content: center;
    color: #fff; /* Default text color for overlay */
    padding: 1rem 0;
    width: 100%; /* Ensure overlay takes full width */
    height: 100%; /* Ensure overlay takes full height */
}
.hero h1 {
    font-size: 2.5rem;
    margin: 0; /* Remove default margin */
    line-height: 1.2;
    color: var(--primary); /* Change H1 color to primary blue */
}

/* Slider testimonios */
#testimonios{padding:2rem;text-align:center;}
#testimonios blockquote{display:none;font-style:italic;font-size:1.25rem;}
#testimonios .dots{margin-top:1rem;}
#testimonios .dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ccc;margin:0 4px;cursor:pointer;}
#testimonios .dots .active{background:var(--primary);}

/* Tabs */
.tabs{margin:2rem 0;display:flex;gap:.5rem;}
.tabs button{flex:1;padding:.75rem;border:none;background:#e2e6f0;cursor:pointer;font-weight:bold;}
.tabs button.active{background:var(--primary);color:#fff;}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* Grid de tarjetas */
.grid{
    display:grid;
    gap:1.5rem;
    margin-top:1.5rem;
    margin-bottom:1.5rem;
}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}

/* Full width container to break page max-width */
.full-width-container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding: 2rem 0; /* Vertical padding */
    box-sizing: border-box;
    overflow: hidden; /* Prevent accidental horizontal scrollbars on body */
}

/* Inner container for the actual grid content */
.full-width-container .grid-content {
    max-width: 1500px; /* Allow content to be slightly wider than main container */
    margin: 0 auto;
    padding: 0 1rem; /* Padding for content edges */
    display: flex; /* Use flexbox for single row layout */
    gap: 1.5rem;
    justify-content: center; /* Center items if they don't fill the space */
    overflow-x: auto; /* Allow horizontal scroll if items overflow */
    padding-bottom: 1rem; /* Space for scrollbar if needed */
}

/* Specific override for the steps in acreditacion.html */
.full-width-container .steps-grid {
    /* Flexbox is already applied by .grid-content, just ensure centering */
    justify-content: space-evenly;
}
/* Ensure step items don't shrink excessively */
.full-width-container .steps-grid .step {
    flex: 0 0 auto; /* Don't grow, don't shrink, base size is auto (or set width) */
    width: 260px; /* Maintain approximate original width */
    /* Añadir transición para suavizar el hover */
    transition: box-shadow 0.3s ease-in-out;
}

/* Añadir estado hover para .step */
.card:hover, .step:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* Sombra sutil */
    cursor: default; /* Opcional: cambiar cursor si no es un enlace */
}

/* Specific override for the benefits grid in observatorio.html */
.full-width-container .benefits-grid {
    /* Flexbox is already applied by .grid-content */
    justify-content: space-around; /* Distribute space */
}
/* Ensure card items don't shrink excessively */
.full-width-container .benefits-grid .card {
     flex: 0 0 auto; /* Don't grow, don't shrink, base size is auto */
     width: calc(25% - 1.5rem); /* Try to fit 4 cards, adjusting for gap */
     min-width: 240px; /* Minimum width before shrinking/scrolling */
     /* Añadir transición para suavizar el hover */
     transition: box-shadow 0.1s ease-in-out;
}

.card, .step{
    box-shadow:0 2px 4px rgba(0,0,0,.3);
}

/* Añadir estado hover para .card */
.full-width-container .benefits-grid .card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra sutil */
    cursor: default; /* Opcional: cambiar cursor si no es un enlace */
}

/* Clase para margen bottom */
.mb{margin-bottom:1.5rem;}

/* Contacto */
form{max-width:900px;margin:2rem auto;display:flex;flex-direction:column;gap:1rem;}
input,textarea{padding:.75rem;border:1px solid #ddd;border-radius:4px;width:100%;}
button[type="submit"]{background:var(--primary);color:#fff;border:none;padding:.75rem;border-radius:4px;cursor:pointer;}

/* Footer */
footer {
    padding: 1.5rem 1rem; /* Slightly reduced padding */
    background-color: #f1f3f5; /* Slightly darker background */
    border-top: 2px solid #dee2e6; /* Thicker and slightly darker border */
    margin-top: 3rem; 
}

.footer-content {
    max-width: 1100px; 
    margin: 0 auto;
    display: flex;
    flex-direction: column; 
    align-items: center;
    gap: 0.8rem; /* Reduced gap */
    text-align: center;
}

.footer-logo {
    max-height: 45px; /* Slightly smaller logo */
    margin-bottom: 0.5rem; /* Reduced margin */
}

.footer-links {
    display: flex;
    flex-direction: column; /* Stack links vertically */
    align-items: center; /* Center links within their column */
    gap: 0.3rem; /* Reduced gap between links */
}

.footer-links a {
    color: var(--primary); 
    text-decoration: none;
    font-size: 0.85rem; /* Slightly smaller font */
}

.copyright {
    font-size: 0.85rem; /* Slightly smaller font */
    color: #6c757d; 
    margin-top: 0.8rem; /* Reduced margin */
}

/* Footer layout for larger screens */
@media (min-width: 768px) {
    .footer-content {
        flex-direction: row; 
        justify-content: space-evenly;
        align-items: center; /* Vertically align items in the row */
        text-align: left;
        gap: 1.5rem; /* Adjust gap for horizontal layout */
    }
    .footer-logo {
        margin-bottom: 0; 
    }
    .footer-links {
        align-items: flex-start; /* Align links to the start (left) on larger screens */
        gap: 0.2rem; /* Fine-tune gap for vertical links */
        /* Remove flex-grow or similar if it takes too much space */
        flex: 0 1 auto; /* Allow shrinking but don't grow */
    }
    .copyright {
        margin-top: 0; 
        text-align: right; /* Align copyright to the right */
    }
}

/* Responsive */
@media(max-width:768px){
    header { padding: 0 1rem; } /* Consistent padding */
    nav ul{
        position:absolute;
        top: var(--header-height); /* Position below header */
        left:0;
        right:0;
        background:#fff;
        flex-direction:column;
        gap:0;
        /* display:none; --- Replaced by max-height transition */
        box-shadow: 0 4px 6px rgba(0,0,0,.1); /* Add shadow for visibility */
        z-index: 999; /* Ensure it's above content */
        border-top: 1px solid #eee; /* Separator line */
        /* Animation & Height */
        max-height: 0; /* Start closed */
        height: calc(100vh - var(--header-height)); /* Full remaining height */
        overflow-y: auto; /* Allow scrolling if needed */
        visibility: hidden; /* Hide when closed */
        transition: max-height 0.5s ease-in-out, visibility 0s linear 0.5s; /* Transition for max-height */
    }
    nav ul.open{
        /* display:flex; --- Replaced by max-height transition */
        max-height: calc(100vh - var(--header-height)); /* Open to full height */
        visibility: visible; /* Show when open */
        transition: max-height 0.5s ease-in-out, visibility 0s linear 0s;
    }
    nav li a {
        padding: 0; /* Remove padding from 'a' */
        height: 60px; /* Give a fixed height to center content */
        text-align: center;
        border-bottom: 1px solid #eee; /* Style mobile menu items */
        display: flex; /* Use flexbox for centering */
        align-items: center; /* Vertical centering */
        justify-content: center; /* Horizontal centering */
        width: 100%; /* Ensure link takes full width */
    }
    nav li:last-child a { border-bottom: none; } /* Remove border from last item */
    #burger{display: flex; align-items: center; justify-content: center;} /* Use flex to center burger content */
    .main-logo { max-width: 70%; max-height: 100px; } /* Adjust main logo further */
    .tagline-section h2 { font-size: 1.3rem; } /* Adjust tagline further */

    /* --- Acreditación page steps grid on mobile --- */
    .full-width-container .steps-grid {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally in the column */
        overflow-x: visible; /* Remove horizontal scroll */
        padding-bottom: 0; /* Remove bottom padding added for scrollbar */
    }
    .full-width-container .steps-grid .step {
        flex: none; /* Override flex settings */
        width: 90%; /* Make items take most of the width */
        max-width: 400px; /* Optional: prevent them getting too wide */
    }
    /* --- End Acreditación steps grid --- */
}

/* Add styles for maintenance mode */
body.maintenance-mode header,
body.maintenance-mode main {
    display: none;
}

#maintenanceOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/mantenimiento.jpg') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top */
    color: white; /* Adjust text color for visibility on background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add shadow for readability */
}

#maintenanceOverlay h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}


#accessButton {
    padding: 15px 30px;
    font-size: 1.2em;
    cursor: pointer;
    background-color: #4CAF50; /* Green */
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.3s ease;
}

#accessButton:hover {
     background-color: #45a049;
}

/* ---- General Grid Items Hover ---- */
.grid > * { /* Selecciona todos los hijos directos de .grid */
    transition: box-shadow 0.3s ease-in-out;
}

.grid > *:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    /* No añadir cursor default aquí, podrían ser enlaces */
}
/* ---- Fin General Grid Items Hover ---- */