html {
    height: 100%; /* Ensure html takes full height */
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    margin: 0;
    padding: 0;
    background-color: #121212; /* Dark background for the page */
    color: #e0e0e0; /* Light text color for general text */
    font-family: Arial, sans-serif;
}

.scroll-container {
    flex-grow: 1; /* Allows scroll-container to take available space */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    width: 100%;
    /* height: 100vh; */ /* Adjust if using flex-grow on body */
}

.fullscreen-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column; /* Ensure content within section flows vertically */
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* For absolute positioning of canvas inside section-one */
    overflow: hidden; /* Hide any overflow from sections themselves */
}

#particle-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind .content but above section background */
}

.content {
    z-index: 1; /* Place content above canvas */
    position: relative; /* Ensure it's layered correctly */
}

#orb-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind .content-section-two */
}

.content-section-two {
    position: relative; /* Ensure it's above the orb-canvas */
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Changed for better vertical centering of grid */
    align-items: center; /* Default alignment */
    padding: 40px 20px; /* Increased padding */
    box-sizing: border-box;
    height: 100%;
    width: 100%; /* Ensure it takes full width for alignments */
}

.section-title {
    font-size: 2.8em; /* Slightly increased */
    color: #000000;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 25px; 
    transform: translateY(-30px); /* Initial position for animation */
    width: 90%; /* Take most of the width */
    max-width: 1000px; /* Max width */
    text-align: left; /* Align text to the left */
    align-self: flex-start; /* Align self to start of flex container if parent is center */
    padding-left: 5%; /* Add some padding from the very edge */
}

#section-one .title {
    font-size: 3.5em; /* Increased size */
    color: #000000;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

#section-one .description {
    font-size: 1.2em;
    color: #333333;
    max-width: 600px;
    margin: 0 auto; /* Centering the block */
    line-height: 1.6;
    text-align: center; /* Center the text content */
}

.section-description {
    font-size: 1.4em; /* Increased font size */
    color: #333333;
    text-align: left;
    width: 90%; /* Take most of the width */
    max-width: 1000px; /* Max width */
    margin-bottom: 40px; /* Increased space */
    line-height: 1.7;
    transform: translateX(-30px); /* Initial position for animation */
    align-self: flex-start; /* Align self to start of flex container */
    padding-left: 5%; /* Add some padding from the very edge */
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 25px; /* Increased gap */
    width: 90%;
    max-width: 900px; /* Increased max width */
    margin: auto; /* This will help center it if parent is flex and align-items: center */
    transform: translateY(30px); /* Initial position for animation */
    /* flex-grow: 1; /* Allow it to take space for vertical centering if parent is space-around/between */
}

.brand-item {
    background-color: #f0f0f0;
    padding: 25px; /* Increased padding */
    text-align: center;
    border: 1px solid #dddddd;
    border-radius: 8px;
    font-size: 1.3em; /* Increased font size */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    color: #222; /* Darker color */
    /* In a real scenario, these would be img tags with logos */
}

.section-footer-text {
    font-size: 1.4em; /* Matched to section-description */
    color: #555555;
    width: 90%;
    max-width: 1000px;
    margin-top: 40px; /* Increased space from grid */
    padding-bottom: 20px;
    transform: translateY(30px); /* Initial position for animation */
    text-align: center; /* Center this text */
}

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

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Base style for items to be animated */
.animate-item {
    opacity: 0; /* Start hidden */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* State when item becomes visible */
.animate-item.is-visible {
    opacity: 1;
    transform: none; /* Reset transform or apply final transform */
}

#main-title {
    font-size: 4em; /* Adjusted size */
    margin-bottom: 0.3em;
    color: #000000; /* Black text */
    text-decoration: underline;
    text-decoration-color: #000000; /* Black underline */
    text-underline-offset: 8px; /* Optional: adjust space between text and underline */
    text-shadow: none;
    animation: fadeIn 1s ease-out forwards;
    position: relative;
    z-index: 1;
}

/* Styles for the old p and #redirect-paragraph are no longer needed as structure changed */
/* If there are other p tags that need styling, they should be addressed specifically */

#animated-text-container {
    min-height: 1.5em; /* Ensure space for the text */
    font-size: 1.8em; /* Larger text for animated words */
    color: #000000; /* Black text */
    margin-bottom: 0.5em;
    text-align: center;
}

#tagline {
    font-size: 1.5em;
    color: #000000; /* Black text */
    text-shadow: none;
    animation: fadeIn 2s ease-out forwards 1s; /* Fade in after title and animated text might start */
    opacity: 0; /* Start hidden for animation */
    margin-top: 0.5em;
    text-align: center; /* Center the text content */
    width: 100%; /* Ensure it can be centered if it's a block-like element */
}

.blinking-cursor {
    color: #000000; /* Black cursor */
    animation: blink-animation 0.8s step-end infinite;
    display: inline-block; /* Ensures it flows with text */
    margin-left: 1px; /* Adds a slight space between text and cursor */
    /* font-weight: normal; /* Ensure it's not bold, can be omitted if default is normal */
    /* To make it thinner or adjust position if needed, consider font-size or transform */
    /* For example, transform: translateX(-1px) scaleX(0.8); */
}

@keyframes blink-animation {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Styles for Section Three */
#section-three {
    background-color: #e9e9e9; /* Fallback background */
    position: relative; /* Needed for absolute positioning of the canvas */
}

#network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind .content-section-three */
}

.content-section-three {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    text-align: center; /* Default center alignment for content */
}

/* Re-use .section-title styles, but ensure it's aligned left for this section */
#section-three .section-title {
    font-size: 2.8em;
    color: #000000;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 15px; /* Reduced margin for subtitle */
    width: 90%;
    max-width: 1000px;
    text-align: left;
    align-self: flex-start;
    padding-left: 5%;
}

.section-subtitle {
    font-size: 1.4em; /* Same as other descriptions/footers */
    color: #333333;
    margin-bottom: 30px;
    max-width: 800px;
    line-height: 1.6;
}

.columns-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start; /* Align items to the top of the columns */
    width: 90%;
    max-width: 1100px;
    gap: 30px; /* Space between columns */
    margin-top: 20px;
}

.info-column {
    flex: 1; /* Each column takes equal space */
    padding: 20px;
    background-color: rgba(253, 253, 253, 0.9); /* Slight background for columns, with alpha for bg visibility */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: left; /* Text inside columns aligned left */
    /* Add transform for animation */
    opacity: 0; /* Start hidden for IntersectionObserver */
    transform: translateY(40px); /* Start slightly lower */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.info-column h3 {
    font-size: 1.5em;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.info-column p {
    font-size: 1.1em;
    color: #444444;
    line-height: 1.5;
    margin-bottom: 10px;
}

.info-column p:last-child {
    margin-bottom: 0;
}

.underlined-item {
    border-bottom: 2px solid #007bff; /* Blue underline, adjust color as needed */
    padding-bottom: 5px;
    display: inline-block; /* Important for border-bottom to only span content width */
    margin-bottom: 10px !important; /* Ensure space after underline */
}

/* Ensure h3.underlined-item also behaves correctly */
.info-column h3.underlined-item {
    display: inline-block; /* For underline to fit content */
    width: auto; /* Override any potential full-width from h3 default */
    margin-bottom: 15px; /* Keep original h3 margin */
}

/* Enhanced animation for columns when they become visible */
.columns-container.animate-item.is-visible .info-column {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for columns if .columns-container is visible */
.columns-container.animate-item.is-visible .info-column:nth-child(1) {
    transition-delay: 0.1s; /* Delay for first column */
}
.columns-container.animate-item.is-visible .info-column:nth-child(2) {
    transition-delay: 0.25s; /* Delay for second column */
}
.columns-container.animate-item.is-visible .info-column:nth-child(3) {
    transition-delay: 0.4s; /* Delay for third column */
}

/* Styles for Section Four */
#section-four {
    background-color: #f0f0f0; /* A slightly different background, can be changed */
    position: relative; /* For canvas positioning */
}

#security-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind content */
}

.content-section-four {
    position: relative; /* To sit above the canvas */
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content like title/subtitle block */
    justify-content: center;
    height: 100%;
    padding: 50px 5%;
    text-align: center; /* Default text-align for children, can be overridden */
}

/* Title and subtitle styles are inherited from .section-title and .section-subtitle */
/* .section-title is text-align: left by default */
/* .section-subtitle is text-align: center by default */

/* Ensure columns in section-four also use the same styling and animation */
#section-four .columns-container {
    /* Uses existing .columns-container styles for flex, centering, etc. */
    /* Max width can be set if needed for two columns to not be too wide */
    max-width: 1000px; /* Adjust as needed */
    margin-top: 30px; /* Space after subtitle */
}

/* #section-four .info-column inherits styles from .info-column and specific typography below */

#section-four .info-column h3 {
    font-size: 1.5em; /* Consistent with section-three */
    margin-bottom: 15px;
    color: #333;
}

#section-four .info-column p {
    font-size: 1.1em; /* Consistent with section-three */
    line-height: 1.6;
    margin-bottom: 8px;
    color: #555;
}

#section-four .info-column h3 strong {
    font-weight: bold; /* Ensured by <strong>, but can be explicit */
}

/* Section Five: GT Smart - Comunicaciones */
#section-five {
    background-color: #f0f0f0; /* Light gray, similar to section-four */
    position: relative; /* Ensure canvas positioning is relative to this section */
}

#starfield-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Starfield at the very back */
}

#comms-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Comms canvas above starfield */
}

#section-five .content-section-five {
    position: relative;
    z-index: 2; /* Content above both canvases */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content by default */
    justify-content: center;
    padding: 40px 20px;
    text-align: center; /* Default text alignment */
}

#section-five .section-title {
    align-self: flex-start; /* Override flex centering for this element */
    text-align: left; /* Align text to the left */
    width: 100%; /* Ensure it takes full width to allow left alignment */
    font-size: 2.8em;
    color: #000000; /* Black text */
    margin-bottom: 15px;
}

#section-five .section-subtitle {
    font-size: 1.6em;
    color: #000000; /* Black text */
    margin-bottom: 25px;
    max-width: 800px;
}

#section-five .section-divider {
    width: 60%;
    max-width: 300px; /* Prevent it from being too wide */
    border: 0;
    height: 1px;
    background-color: #b0c4de;
    margin: 20px auto; /* Center the divider */
}

#section-five .sub-heading {
    font-size: 1.8em;
    color: #000000; /* Black text */
    margin-top: 20px;
    margin-bottom: 10px;
}

#section-five p {
    font-size: 1.15em;
    color: #000000; /* Black text */
    line-height: 1.7;
    max-width: 700px; /* Constrain paragraph width for readability */
    margin-bottom: 20px;
}

/* Section Six: GT Smart - Data Center */
#section-six {
    background-color: #f0f0f0; /* Light gray background */
    position: relative; /* For canvas positioning */
}

#datacenter-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Canvas at the very back */
}

#section-six .content-section-six {
    position: relative;
    z-index: 1; /* Content above canvas */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    padding: 40px 20px;
    text-align: center; /* Center text within elements */
    height: 100%;
}

/* Ensure text colors are black for section-six, inheriting from general styles or explicitly setting */
#section-six .section-title,
#section-six .section-subtitle,
#section-six .sub-heading,
#section-six p {
    color: #000000; /* Black text */
}

/* Adjust title alignment for centering in this specific section */
#section-six .section-title {
    text-align: center;
    width: auto; /* Allow natural width for centering */
    align-self: center; /* Ensure it centers if flex context changes */
}

/* Style for dividers in section-six */
#section-six .section-divider {
    background-color: #b0b0b0; /* Darker gray divider for visibility */
    width: 60%; /* Consistent with other dividers */
    max-width: 300px;
    margin: 20px auto; /* Spacing and centering */
}

/* Override to ensure text in section-six is visible if .is-visible is not being applied */
#section-six .animate-item {
    opacity: 1;
    transform: none;
}

/* Section Seven: GT Smart - Infraestructura Física Unificada */
#section-seven {
    background-color: #f0f0f0; /* Light gray background */
    color: #000000; /* Black text */
    position: relative;
    overflow: hidden;
}

#spiral-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind the content */
}

.content-section-seven {
    position: relative;
    z-index: 1; /* Above the canvas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    height: 100%;
}

/* Ensure text in section-seven is visible by default, overriding .animate-item opacity */
#section-seven .animate-item {
    opacity: 1 !important;
    transform: none !important; /* Reset any transform from .animate-item */
}

/* Section Eight: Contacto */
#section-eight {
    background-color: #f0f0f0; /* Light gray background */
    color: #000000; /* Black text */
    position: relative;
    overflow: hidden;
}

#spectacular-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind the content */
}

.content-section-eight {
    position: relative;
    z-index: 1; /* Above the canvas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* This centers flex items horizontally */
    text-align: center; /* This centers text content within block elements */
    padding: 20px;
    width: 100%; /* Ensure the container itself takes full width to center its content properly */
    height: 100%;
}

#section-eight h2.section-title {
    font-size: 1.3rem; /* Matched to subtitle-contact size */
    color: #333;
    margin-bottom: 15px; /* Adjusted margin for new size */
    /* text-align and width are inherited or handled by parent .content-section-eight */
}

#section-eight p.section-subtitle {
    font-size: 1.3rem; /* Explicitly set size */
    color: #000000; /* Changed to black */
    margin-top: 0;
    margin-bottom: 200px; /* Doubled spacing again */
    /* text-align and width are inherited or handled by parent .content-section-eight */
}

#section-eight hr.section-divider {
    border: 0;
    height: 1px;
    background-color: #ccc;
    margin: 15px auto 20px auto; /* Adjusted top/bottom margin for new text sizes */
    width: 80%;
}

.contact-columns {
    display: flex;
    justify-content: space-between; /* Maximize space between columns */
    align-items: flex-start; /* Align items to the top of columns */
    width: 90%; /* Increased width to allow more separation */
    margin-top: 20px; /* Space above the columns */
}

.contact-column {
    flex: 1; /* Each column takes equal space */
    padding: 0 15px; /* Padding within columns */
    text-align: center; /* Center text within each column */
}

.contact-column h3 {
    margin-bottom: 10px; /* Space below column titles */
}

.contact-column p {
    margin-bottom: 5px;
}

.contact-column a {
    color: #007bff; /* Standard link color, adjust as needed */
    text-decoration: none;
}

.contact-column a:hover {
    text-decoration: underline;
}

/* Ensure text in section-eight is visible by default, overriding .animate-item opacity */
#section-eight .animate-item {
    opacity: 1 !important;
    transform: none !important; /* Reset any transform from .animate-item */
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #1a1a1a; /* Slightly different dark shade for footer */
    color: #f0f0f0; /* Light text for footer */
    width: 100%;
    box-sizing: border-box; /* Include padding in width calculation */
    position: relative; /* Keeps it in flow, after the container */
    z-index: 100; /* Ensure it's above other elements if necessary */
}

footer p {
    margin: 0;
    font-size: 1.1rem;
}

#section-two {
    background-color: #f0f0f0; /* Light gray background */
    color: #000000; /* Black text for the section overall */
}

/* Ensure specific text elements within section-two also get black/dark color */
#section-two .section-title,
#section-two .section-description,
#section-two .section-footer-text {
    color: #000000; /* Explicitly black for titles and descriptions */
}

/* .brand-item already has color: #222; which is dark, so it should be fine on #f0f0f0 background */

/* --- Responsive Design --- */

/* Medium screens (tablets, large phones) - up to 768px */
@media (max-width: 768px) {
    /* General Font Size Adjustments */
    #main-title {
        font-size: 3em; /* Slightly smaller */
    }

    .section-title {
        font-size: 2.2em; /* Smaller section titles */
        padding-left: 3%;
        width: 94%;
    }

    .section-description {
        font-size: 1.2em;
        padding-left: 3%;
        width: 94%;
    }

    .section-footer-text {
        font-size: 1.2em;
    }

    /* Section Two: Soluciones (Brands Grid) */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 20px;
        width: 95%;
    }

    /* Section Three: Servicios & Section Four: Seguridad (Info Columns) */
    .info-container {
        flex-direction: column;
        align-items: center; /* Center columns when stacked */
    }

    .info-column {
        flex-basis: 90%; /* Take more width */
        max-width: 90%;
        margin-bottom: 30px; /* Add space between stacked columns */
    }

    .info-column:last-child {
        margin-bottom: 0;
    }

    /* Section Eight: Contacto (Contact Columns) */
    .contact-columns {
        flex-direction: column;
        align-items: center; /* Center columns when stacked */
        width: 95%;
    }

    .contact-column {
        width: 90%; /* Full width when stacked */
        max-width: 400px; /* Max width for readability */
        margin-bottom: 30px;
        padding: 0;
    }

    .contact-column:last-child {
        margin-bottom: 0;
    }

    #section-eight p.section-subtitle {
        margin-bottom: 50px; /* Reduce large margin */
    }

    /* Canvas elements might need specific adjustments if content looks bad */
    /* For now, assuming they scale with their containers */
}

/* Small screens (phones) - up to 480px */
@media (max-width: 480px) {
    #main-title {
        font-size: 2.5em;
    }

    .section-title {
        font-size: 1.8em;
    }

    .section-description {
        font-size: 1.1em;
    }

    .section-footer-text {
        font-size: 1em;
    }

    /* Section Two: Soluciones (Brands Grid) */
    .brands-grid {
        grid-template-columns: 1fr; /* 1 column */
        gap: 15px;
    }

    .brand-item {
        padding: 20px;
        font-size: 1.1em;
    }

    /* Further reduce margins if necessary */
    .info-column,
    .contact-column {
        margin-bottom: 20px;
    }

    #section-eight p.section-subtitle {
        margin-bottom: 30px; /* Further reduce large margin */
    }

    /* Footer */
    footer {
        padding: 15px;
    }
    footer p {
        font-size: 1rem;
    }
}

#section-one {
    background-color: #ffffff; /* White background for section one */
    color: #000000; /* Black text for section one */
}

/* Ensure text elements within section-one also get black color if not specified */
#section-one .title,
#section-one .description,
#section-one #typewriter-text,
#section-one #typewriter-text .blinking-cursor {
    color: #000000; /* Black text */
}

#section-one #main-title {
    color: #000000; /* Black text */
    text-decoration-color: #000000; /* Black underline */
}