* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav-buttons {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 1000;
}


.hamburger-menu {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background: #ac152e;
    margin: 5px 0;
    transition: 0.3s;
}
.hamburger-menu.open span {
    background: white;
}

.side-panel {
    position: fixed;
    top: 0;
    right: -300px;
    width: 250px;
    height: 100vh;
    background: rgba(227, 30, 36, 0.95);
    padding: 80px 20px;
    transition: 0.3s;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.side-panel.active {
    right: 0;
}

.nav-button {
    background: linear-gradient(135deg, #e31e24 0%, #c9252d 100%);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
    font-size: 0.9em;
    transition: all 0.3s ease;
    padding: 10px 20px;
}

.nav-button:hover {
    background: #e31e24;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.3);
}

@media (max-width: 768px) {
    .nav-buttons {
        display: none;
    }
    
    .hamburger-menu {
        display: block;
    }

    .side-panel .nav-button {
        display: block;
        width: 100%;
        margin-bottom: 15px;
        text-align: center;
        background: transparent;
        font-size: 1.1em;
        color: white;
    }

    .side-panel .nav-button:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .cta-button {
        /* Styles are now consolidated in the global .cta-button rule */
    }
}

body {
    font-family: Helvetica, Verdana, sans-serif, 'Arial';
    color: #333;
    line-height: 1.6;
    background-color: white;
}

.hero {
    height: 100vh;
    background-color: #2c0507; /* A dark reddish-brown to match the image */
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-content-logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}

.logo-privacidad {
    width: auto;
    max-height: 80px; /* Set max-height to fit within the header */
}

@media (max-width: 768px) {
    .hero-content-logo {
        top: 10px;
        left: 10px;
    }
    .logo-privacidad {
        width: 100px;
    }
}

.hero-small {
    height: 105px; /* Adjust height for legal pages */
    background-image: url('/assets/hero-section-long.webp'); /* Apply background image directly */
    background-color: transparent !important; /* Ensure background image is visible */
    background-size: cover; /* Ensure the entire image is visible */
    background-position: top; /* Show the top of the image */
    background-attachment: fixed;
    position: relative; /* Ensure z-index works */
    z-index: 1; /* Bring to front to avoid being covered */
}

/* Ensure that the .hero background color is not applied when .hero-small is present */
.hero.hero-small {
    background-color: transparent !important;
}

@media (max-width: 768px) {
    .hero-small {
        height: 105px; /* Further adjust height for mobile on legal pages */
    }
}

.hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: none;
    z-index: 0;
}

.hero-small::before {
    background: none; /* Ensure no background is applied to the pseudo-element */
    content: ''; /* Keep content to maintain structure if needed, but remove background */
}

.hero-content {
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 60px;
    text-align: center;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero h1 {
    font-size: 3em;
    margin-bottom: 20px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    animation: fadeIn 1.5s ease;
}

.hero p {
    font-size: 1.5em;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: fadeIn 2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cta-button {
    display: inline-block;
    padding: 18px 45px;
    background: linear-gradient(135deg, #e31e24 0%, #c9252d 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(227, 30, 36, 0.4);
    animation: pulse 2s infinite;
    margin-bottom: 5%;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(227, 30, 36, 0.6);
    animation: none;
    background: linear-gradient(135deg, #ff3339 0%, #e31e24 100%);
}

.section {
    padding: 50px 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

h2, h3 {
    text-align: center;
    margin-bottom: 30px;
    color: #e31e24;
    line-height: 1.1em;
}
h2 {
    font-size: 2em; /* Adjusted h2 size to be smaller than h1 */
    margin-top: 40px; /* Added space above h2 */
}
h3 {
    font-size: 1.5em;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns for larger screens */
    gap: 40px;
    margin-top: 40px;
    padding: 0 50px; /* 50px padding on the sides */
}

@media (max-width: 768px) {
    .about-grid {
        grid-template-columns: 1fr; /* 1 column for smaller screens */
        padding: 0 20px; /* Adjust padding for smaller screens */
    }
}

.feature-card {
    background: linear-gradient(135deg, #ffe3e3 0%, #e3ffff 100%);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.1);
    border: 2px solid #ffcccc;
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(227, 30, 36, 0.2);
}

.feature-icon {
    font-size: 3em;
    margin-bottom: 20px;
}

.feature-card h3 {
    margin-bottom: 15px;
}

.gallery-section {
    padding: 40px 20px; /* Reduced top padding */
}

.gallery-section h2 {
    font-size: 42px;
    margin-bottom: 40px;
    color: #C41E3A; /* Specific color for gallery section h2 */
}

.gallery-feature-card {
    background: linear-gradient(135deg, #ffe3e3 0%, #e3ffff 100%);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.1);
    border: 2px solid #ffcccc;
    margin: 0 auto; /* Center the card */
    max-width: 1200px; /* Limit width for better appearance */
}

.gallery-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(227, 30, 36, 0.2);
}

.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    justify-content: center; /* Center the grid itself */
    justify-items: center; /* Center items within the grid cells */
}

@media (max-width: 768px) {
    .gallery-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px; /* Add some padding for scrollbar */
        gap: 10px; /* Reduce gap between items for better fit */
        padding-left: 20px; /* Add padding to the left of the first item */
        padding-right: 20px; /* Add padding to the right of the last item */
    }
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    aspect-ratio: 4/3;
    flex-shrink: 0; /* Prevent items from shrinking in flex container */
    scroll-snap-align: center; /* Snap to center of item */
}

@media (max-width: 768px) {
    .gallery-item {
        width: calc(100vw - 60px); /* Adjust width to account for new padding and gap */
        max-width: 400px; /* Max width for mobile items */
        height: 220px; /* Adjusted height for gallery items on mobile */
    }
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Use 'cover' to fill the container, cropping if necessary */
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: rgba(0,0,0,0.7);
    color: white;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .gallery-caption {
        transform: translateY(0); /* Always visible on mobile */
        position: absolute; /* Keep absolute positioning */
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.8); /* Darker background for contrast */
        padding: 10px;
        font-size: 0.9em;
        height: auto; /* Allow height to adjust to content */
        min-height: 40px; /* Ensure a minimum height for visibility */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gallery-item:hover .gallery-caption {
        transform: translateY(0); /* Override hover effect on mobile */
    }
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

.form-section {
    background-image: url('/assets/hero-section-long.webp');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    color: white;
}

.form-section h2 {
    color: white;
}

form {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255,255,255,0.15);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(30px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.form-group {
    margin-bottom: 25px;
}

.form-group.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.form-group.checkbox-group input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
    transform: scale(1.2); /* Slightly larger checkbox */
    accent-color: #e31e24; /* Accent color for the checkbox */
}

.form-group.checkbox-group label {
    margin-bottom: 0; /* Remove bottom margin for alignment */
    display: inline; /* Ensure label flows with checkbox */
    font-size: 0.9em; /* Adjust font size for consistency */
}

.form-group.checkbox-group label a {
    color: white; /* Ensure link color is white */
    text-decoration: underline; /* Underline links for clarity */
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input, textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 0.75em; /* Reduced font size */
    background: rgba(255,255,255,0.95);
    font-family: 'Arial', sans-serif; /* Ensure consistent font */
    font-weight: normal; /* Ensure consistent font weight */
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #e31e24 0%, #c9252d 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

footer {
    background-image: url('/assets/hero-section-long.webp');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    color: white;
    text-align: center;
    padding: 40px 20px; /* Define padding here */
    position: relative; /* Needed for pseudo-element positioning */
    overflow: hidden; /* Ensures pseudo-element doesn't overflow */
}

footer::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent overlay */
    z-index: 0;
    top: 0;
    left: 0;
}

footer .container {
    position: relative; /* Ensures content is above the overlay */
    z-index: 1;
}

footer p {
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2em;
    }
    
    .hero p {
        font-size: 1.2em;
    }
    
    h2, h3 {
        font-size: 2em;
    }
    
    .logo {
        max-width: 400px;
    }

    .hero {
        /* These properties are already defined globally or handled by other properties */
    }

    .hero-content {
        bottom: auto;
        top: 75%; /* Lo movemos más abajo */
        transform: translateY(-50%);
    }

    .cta-button {
        padding: 15px 35px;
        font-size: 1.1em;
        margin-bottom: 30%; /* Adjusted to be above the cookie banner on mobile */
    }

    .nav-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-button {
        font-size: 0.8em;
    }
    footer {
        background: #1A222C; /* Specific background for mobile footer */
    }

    /* Specific styles for legal pages hero section on mobile */
    .hero[data-full-image="/assets/hero-section.webp"] {
        background-position: center; /* Center the background image */
        background-size: contain; /* Ensure the entire image is visible */
        background-repeat: no-repeat; /* Prevent image repetition */
    }
}

@media (max-width: 768px) {
    .gallery-wrapper {
        justify-content: flex-start; /* Align gallery to start for proper carousel scrolling */
    }

    .gallery-grid {
        justify-content: flex-start; /* Align gallery items to start on mobile */
    }

    .form-section {
        background-attachment: scroll;
        background-position: center center;
        background-size: cover;
    }
}

.content-blur-wrapper {
    position: relative;
    background-image: url('/assets/hero-section-long.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 50px 0; /* Adjust padding as needed */
}

.content-blur-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.15); /* Light overlay for blur effect */
    backdrop-filter: blur(30px); /* Much wider blur */
    z-index: 0;
}

.content-blur-wrapper .container {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background for content */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.content-blur-wrapper h3, .content-blur-wrapper p, .content-blur-wrapper strong, .content-blur-wrapper a, .content-blur-wrapper ul, .content-blur-wrapper li, .content-blur-wrapper table, .content-blur-wrapper thead, .content-blur-wrapper tbody, .content-blur-wrapper tr, .content-blur-wrapper th, .content-blur-wrapper td {
    color: #333; /* Ensure text is readable over the blurred background */
}

.content-wrapper h1 {
    font-size: 2.5em; /* Explicitly set h1 size for content-wrapper */
    text-align: left;
    margin-bottom: 20px;
    color: #e31e24;
}

.content-wrapper h2 {
    text-align: left; /* Align h2 to the left within content-wrapper */
    font-size: 1.8em; /* Set h2 size, smaller than h1 */
    margin-top: 40px; /* Keep the added space above h2 */
    color: #e31e24; /* Ensure h2 color is consistent */
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default, controlled by JS */
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-width: 500px;
    text-align: justify;
    position: relative;
    animation: fadeInModal 0.3s ease-out;
    color: #333;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-content h2 {
    margin-bottom: 20px;
    font-size: 2em;
}

.modal-content p {
    font-size: 1.1em;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Cookie Banner Styles */
.cookie-banner {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Align items to the center */
    justify-content: space-between; /* Push text to left, buttons to right */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px 25px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    font-size: 0.9em;
    line-height: 1.4;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 15px; /* Add gap for spacing */
}

.cookie-banner p {
    margin-bottom: 0; /* Remove bottom margin for flex alignment */
    margin-right: 5px; /* Adjusted space between text and toggle */
    flex-grow: 1; /* Allow text to take up available space */
    width: min-content;
}

.cookie-banner a {
    color: #e31e24;
    text-decoration: underline;
    font-weight: bold;
}

.cookie-toggle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the toggle within the wrapper */
    margin: 0 auto; /* Center the wrapper itself */
    padding: 10px 0; /* Add some vertical padding */
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 45px; /* Reduced width */
    height: 25px; /* Reduced height */
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17px; /* Reduced height */
    width: 17px; /* Reduced width */
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #e31e24;
}

input:focus + .slider {
    box-shadow: 0 0 1px #e31e24;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px); /* Adjusted for new width */
    -ms-transform: translateX(20px); /* Adjusted for new width */
    transform: translateX(20px); /* Adjusted for new width */
}

/* Rounded sliders */
.slider.round {
    border-radius: 25px; /* Adjusted for new height */
}

.slider.round:before {
    border-radius: 50%;
}


.cookie-banner-actions .cta-button,
.cookie-banner-actions .secondary-button,
.cookie-banner-actions .tertiary-button {
    padding: 8px 16px;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.cookie-banner-actions {
    margin-right: 70px;
    margin-bottom: 0;
    justify-content: flex-end;
}

.secondary-button {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--light);
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .cookie-banner {
        position: fixed; /* Ensure it remains fixed on mobile */
        flex-direction: row; /* Revert to row for text and toggle on same line */
        align-items: center; /* Center items vertically */
        padding: 20px 25px;
        justify-content: space-between; /* Push toggle to the right */
    }

    .cookie-banner p {
        margin-right: 5px;
        margin-left: auto;
        width: min-content;
        text-align: left; /* Center text on small screens */
    }

    .cookie-toggle-wrapper {
        margin-right: 20px;
        width: auto; /* Allow width to adjust */
        justify-content: flex-end; /* Align toggle to the right within its wrapper */
        margin-top: -10px; /* Remove top margin */
    }
}

.close-cookie-banner {
    background: none;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    right: auto;
    top: auto;
    transform: none;
    line-height: 1;
    padding: 0 5px;
    position: absolute; /* Position absolutely within the banner */
    top: 10px; /* 10px from the top */
    right: 10px; /* 10px from the right */
    transform: none; /* Remove any transform */
    margin: 0; /* Remove any margins */
}

.close-cookie-banner:hover {
    color: #e31e24;
}

.modal-content .cta-button {
    margin: 20px;
    padding: 12px 30px;
    font-size: 1em;
    text-align: center;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: #e31e24;
    text-decoration: none;
    cursor: pointer;
}