/**
 * @summary   Main stylesheet for the MC Summit IA 2025 landing page.
 * @author    Armando Pérez, More Pepper Agency (https://morepepper.mx/)
 * @client    MC Microcomputación (https://www.microcomp.com.mx/)
 * @version   3.1.0
 * @since     2025-09-01
 * @copyright (c) 2025 MC Microcomputación. Code developed by More Pepper Agency.
 */

/* FONT DEFINITIONS */
@font-face {
    font-family: 'Cooper Hewitt';
    src: url('../fonts/cooper-hewitt/CooperHewitt-Light.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Cooper Hewitt';
    src: url('../fonts/cooper-hewitt/CooperHewitt-Book.otf') format('opentype');
    font-weight: 400; /* Normal/Book */
    font-style: normal;
}

@font-face {
    font-family: 'Cooper Hewitt';
    src: url('../fonts/cooper-hewitt/CooperHewitt-Bold.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}


/* VARIABLES & GLOBAL STYLES */
:root {
    --green: #71a850;
    --dark-blue: #00567d;
    --dark-purple: #250a50;
    --purple-1: #440c72;
    --purple-2: #633984;
    --light-grey: #cccccc;
    --grey: #f0f0f0;
    --white: #ffffff;

    --font-family: 'Cooper Hewitt', sans-serif;
    --font-size-lg: 2.2rem;
    --font-size-md: 1.3rem;
    --font-size-sm: 1.3rem;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cooper Hewitt', sans-serif;
    /* Se envuelve el fondo en un pseudo-elemento para el sangrado */
    /* Wraps the background in a pseudo-element for a bleed effect */
    color: var(--white);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    font-weight: 300; /* Use Light variant by default */
    position: relative; /* Required for the pseudo-element */
    overflow-x: hidden; /* Prevents horizontal overflow on the entire page */
}

body::before {
    content: '';
    position: fixed; /* Fixed so it doesn't move with scroll */
    top: -1%; left: -1%;
    width: 102%; height: 102%;
    background: url('../images/MC Summit AI_Fondo Agradecimiento.png') center/cover no-repeat;
    z-index: -1; /* Behind all content */
}

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

h1, h2, h3 {
    font-weight: 700; /* Bold */
    line-height: 1.2;
}

h2 {
    font-size: var(--font-size-lg);
    text-align: center;
    margin-bottom: 4rem; /* Espacio entre título y párrafo introductorio */
    /* Space between title and introductory paragraph */
    color: var(--white);
    position: relative; /* Required for pseudo-elements */
    display: flex;
    align-items: center; /* Vertically centers the lines with the text */
    width: 100%;
}

h2::before,
h2::after {
    content: '';
    flex: 1; /* Allows lines to take up available space */
    height: 2px; /* Line thickness */
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent white color */
}

h2::before {
    margin-right: 2rem; /* Space between the left line and the title */
}

h2::after {
    margin-left: 2rem; /* Space between the title and the right line */
}

section {
    /* Base vertical padding for all sections */
    padding: 6rem 0;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.section-intro {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 4rem; /* Se reduce el margen inferior para compensar el tamaño de fuente más pequeño */
    font-size: var(--font-size-sm);
}

/* UTILITY CLASS FOR ACCESSIBILITY */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Removes focus outline on mouse clicks, but keeps it for keyboard navigation */
:focus:not(:focus-visible) {
    outline: none;
}


/* HEADER */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(37, 10, 80, 0.8); /* --dark-purple with 80% opacity */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1rem 2rem; /* Internal padding */
    transform: translateY(-100%);
}

#main-header.scrolled {
    transform: translateY(0);
}

#main-header .logo {
    height: 80px;
}


#desktop-nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    align-items: center; /* Vertically aligns all menu items */
}

#desktop-nav a {
    font-weight: 400; /* Normal */
    color: var(--white);
    font-size: var(--font-size-sm);
    transition: text-shadow 0.2s;
}

#desktop-nav a:hover {
    /* Simulates bold with a text-shadow to avoid layout shift */
    text-shadow: -0.06ex 0 currentColor, 0.06ex 0 currentColor;
    text-decoration: none; /* Removes underline */
}

/* Estilos para el botón de registro en la navegación */
.btn-nav {
    background-color: var(--white);
    color: var(--green);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 400;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    transition: box-shadow 0.3s ease-in-out;
    border: none; /* Removes default browser border from <button> elements */
    display: inline-block;
}

.btn-nav span {
    color: var(--green) !important;
}

.btn-nav:hover {
    box-shadow: 0 0 15px 0 rgba(113, 168, 80, 0.7);
    text-shadow: none;
    text-decoration: none;
}

/* HERO SECTION */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding: 0; /* Hero doesn't need section padding */
    overflow: hidden;
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    z-index: 0; /* Video should be above the hero background, but below the content */
    object-fit: cover; /* Fills the space without distortion, may crop edges */
}

.hero-content {
    z-index: 1; /* Ensures content is on top of the video */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.hero-content .summit-logo {
    max-width: 80%;
    width: 700px;
    height: auto; /* Maintains aspect ratio */
}

.hero-content p {
    font-size: var(--font-size-md);
    font-weight: 300; /* Light */
}

.btn-register img {
    width: 450px;
    margin-top: 1rem; /* Add top margin to push the button down */
    transition: transform 0.2s;
}

.btn-register:hover img {
    transform: scale(1.05);
}


/* EXPO SECTION */
#expo {
    padding-bottom: 0; /* Removes the section's bottom padding */
}

.expo-intro-highlight {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

#expo .subtitle {
    text-align: center;
    max-width: 1300px;
    margin: 0 auto 4rem;
    font-size: var(--font-size-sm);
}
.expo-columns {
    display: flex;
    gap: 3rem;
    align-items: center;
}
.video-placeholder {
    flex: 0 0 450px; /* Fixed base size of 450px */
    width: 450px;
    aspect-ratio: 1 / 1; /* Square aspect ratio for the video */
    margin: 0 auto; /* Centers the video container */
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensures nothing overflows the rounded border */
    position: relative; /* Required to position the sound button */
    background-color: #000; /* Black background to fill if the poster doesn't cover everything */
    background-size: cover;
    background-position: center;
}
.video-placeholder video {
    width: 100%;
    height: 100%;
    border-radius: 15px; /* Hereda el borde redondeado del contenedor */
    object-fit: contain; /* Ensures the entire video is visible without distortion */
}

.sound-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.sound-btn img {
    width: 24px;
    border-radius: 15px;
    object-fit: contain;
}
.video-placeholder .play-button {
    position: absolute;
    cursor: pointer;
}
.play-button {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}
.play-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 30px solid var(--purple-1);
}

.expo-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.expo-text div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.expo-text img {
    width: 70px;
}


/* ASISTIR SECTION */
#asistir {
    padding-bottom: 0; /* Removes the section's bottom padding */
}
#asistir h2 {
    color: var(--white);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}
.benefit-item {
    cursor: pointer; /* Indicates the whole item is clickable */
}
.benefit-item img {
    width: 100%;
    max-width: 200px;
    height: auto; /* Maintains aspect ratio */
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    border-radius: 15px;
}

.benefit-item:hover img {
    transform: scale(1.05); /* Simple zoom effect */
    box-shadow: 0 0 20px rgba(113, 168, 80, 0.5); /* Subtle green glow */
}

/* Hides the paragraph inside the benefit-item on desktop by default */
.benefit-item p {
    display: none;
}

.benefit-item.active img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px var(--green));
}

/* Contenedor para la descripción en escritorio */
/* Container for the description on desktop */
#benefit-description-display {
    padding: 0 2rem;
    margin: 3rem auto 0;
    text-align: center;
    font-size: var(--font-size-md);
    color: var(--white);
    width: 100%;
    max-width: 900px;
    box-sizing: border-box;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

#benefit-description-display.show {
    padding: 2rem;
    max-height: 300px;
    opacity: 1;
}

/* MODAL STYLES */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(37, 10, 80, 0.9);
    backdrop-filter: blur(5px);
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex; /* Display as flex to center content */
}

.modal-content {
    position: relative;
    background-color: var(--dark-blue);
    padding: 2rem;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    text-align: center;
}

.modal-content img {
    max-width: 250px;
    margin-bottom: 1.5rem;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--white);
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
}

/* AGENDA SECTION */
.agenda-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between each item */
}
#agenda {
    padding-bottom: 0; /* Removes the section's bottom padding */
}

.agenda-item {
    background-color: var(--light-grey);
    border-radius: 15px;
    display: grid;
    grid-template-columns: auto 1fr auto; /* 3 columns: icon, flexible text, and time */
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 0.8rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.agenda-item:hover {
    background-color: var(--purple-2);
    color: var(--light-grey);
}
.agenda-item:hover span,
.agenda-item:hover .time {
    color: var(--light-grey);
}
.agenda-item:last-child {
    border-bottom: none;
}
.agenda-item img {
    width: 30px;
}
.agenda-item span {
    font-size: var(--font-size-sm); color: var(--dark-blue);
    min-width: 0; /* Allows text to wrap to the next line if necessary */
}
.agenda-item .time {
    justify-self: end; /* Aligns the time to the right of its column */
    font-weight: 400; /* Normal/Book */
    color: var(--dark-blue);
    white-space: nowrap; /* Ensures the time never breaks into two lines */
}

/* REGISTRO SECTION */
#registro h2 {
    padding-bottom: 0;
    padding-bottom: 0;
}

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

#contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Make elements that should span the full width do so */
#contact-form .form-divider,
#contact-form #comentarios-wrapper,
#contact-form .dynamic-fields,
#contact-form .form-footer,
#contact-form #submit-btn {
    grid-column: 1 / -1;
}

.label-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: help;
    transform: translateY(-1px);
}

.tooltip-text {
    visibility: hidden;
    width: 320px;
    max-width: calc(100vw - 2rem); /* Ensures it doesn't overflow on small screens */
    background-color: var(--dark-purple);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the icon */
    left: 50%;
    transform: translateX(-50%); /* More robustly centers the tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

#comentarios-wrapper {
    display: none; /* Hidden by default */
}

.form-divider {
    height: 2px;
    display: none; /* Hidden by default */
    background-color: rgba(255, 255, 255, 0.3);
    margin: 1rem 0;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
}
.form-row {
    display: flex;
    gap: 1.5rem;
}
.form-row .form-group {
    flex: 1;
}

#contact-form label {
    font-size: var(--font-size-sm);
}
/* Style for the required fields asterisk */
#contact-form label:after {
    font-size: var(--font-size-sm);
}
#contact-form input, #contact-form select, #contact-form textarea {
    padding: 0.8rem;
    border-radius: 5px;
    border: none;
    font-family: 'Cooper Hewitt', sans-serif;
    font-size: var(--font-size-sm);
    transition: border-color 0.3s, box-shadow 0.3s; /* Adds transition for error state */
}

/* Style for fields with errors */
#contact-form .has-error {
    border: 2px solid #cc0000;
    box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
}

/* Overrides the default browser yellow/orange outline on invalid fields */
#contact-form .has-error:invalid,
#contact-form .has-error:focus:invalid {
    outline: none; /* Removes the default browser outline */
    border: 2px solid #cc0000;
}
/* Changes the select text color to match inputs */
select {
    color: #757575; /* Color gris para el placeholder */
}
select:valid {
    color: #000000; /* Color oscuro una vez que se selecciona una opción */
}
#contact-form textarea {
    resize: none; /* Prevents the user from resizing the textarea */
}

.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}
/* Defines the layout for dynamic field containers */
.dynamic-fields {
    display: none; /* Hidden by default, shown with JS */
    grid-template-columns: 1fr 1fr; /* Two equal-sized columns */
    gap: 1.5rem; /* Same spacing as the main form */
    align-items: end; /* Aligns fields at the bottom so inputs match */
}

.form-consent {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.form-footer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center; /* Centers the submit button */
}
.form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

.form-actions .cf-turnstile {
    justify-self: end; /* Aligns the captcha to the right of its column */
}

.form-consent a {
    text-decoration: none;
    font-weight: 400;
    cursor: pointer; /* Ensures the hand cursor appears over the links */
}
.form-consent a:hover {
    text-decoration: underline;
}

#submit-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: filter 0.3s ease-in-out;
}

/* New glow effect for the form button */
#submit-btn:hover:not(:disabled) img {
    /* 'filter: drop-shadow' works great with SVGs and images with transparency */
    filter: drop-shadow(0 0 12px rgba(113, 168, 80, 0.8));
}

#submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
#submit-btn:disabled:hover img {
    transform: none;
}

/* PATROCINADORES SECTION */
#patrocinadores {
    padding: 6rem 0 4rem;
}

#patrocinadores h2 {
    color: var(--white);
}

.carousel-wrapper {
    margin-top: 8rem;
    width: 100%;
}

.sponsors-carousel {
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.sponsors-track {
    display: inline-flex; /* Allows width to be based on content */
    animation: scroll 20s linear infinite;
    align-items: center; /* Vertically centers all logos */
}
.sponsors-track img {
    height: 100px;
    margin: 0 4rem;
    width: auto; /* Width adjusts automatically to maintain aspect ratio */
}

/* Specific adjustment for wider logos to look visually balanced */
.sponsors-track img[alt="Dell"],
.sponsors-track img[alt="HPE"],
.sponsors-track img[alt="Veeam"],
.sponsors-track img[alt="Cisco"] {
    height: 75px;
}
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* FAQ SECTION */
#faq {
    padding-bottom: 0; /* Removes the section's bottom padding */
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    /* Se mueven los estilos de fondo a .faq-item */
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Space between each question */
}
.faq-item {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 0 1.5rem;
}
.faq-question {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}
.faq-question button {
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700; /* Bold questions */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
    text-align: left; /* Ensures question text is left-aligned */
}
.faq-toggle-icon {
    width: 60px;
    transition: transform 0.3s;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.faq-answer p {
    padding-bottom: 1rem;
    font-size: var(--font-size-sm);
}
.faq-item.active .faq-question img {
    transform: rotate(180deg);
}
.faq-item.active .faq-answer {
    max-height: 500px; /* Adjust as needed, increased for map */
}

/* FOOTER */
#main-footer {
    background-color: var(--dark-blue);
    color: var(--white);
    padding: 1.5rem 2rem;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.footer-logo {
    height: 80px;
    filter: brightness(0) invert(1);
    width: auto; /* Maintains aspect ratio */
}
#main-footer .footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}
.footer-legal {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
}
.footer-legal span {
    opacity: 0.7; /* Hace el copyright un poco menos prominente */
}
/* TOAST NOTIFICATION */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
}
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
}

.toast {
    background-color: var(--dark-blue);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 5px;
    margin-bottom: 0.5rem;
    opacity: 0;
    transition: opacity 0.5s;
}
.toast.show {
    opacity: 1;
}

/* THANK YOU PAGE */
.thank-you-page {
    background-image: url('../images/MC Summit AI_Fondo Agradecimiento.png');
    background-size: cover;
    background-position: center;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}

.thank-you-content {
    max-width: 900px;
    width: 100%;
    padding: 2rem;
    background-color: transparent;
    backdrop-filter: blur(5px);
    border-radius: 20px;
}
.thank-you-content .summit-logo {
    width: 450px; /* Reducido para un mejor balance visual */
    margin-bottom: 2rem;
}
.thank-you-content h1 {
    font-size: var(--font-size-lg);
    margin-bottom: 1rem;
}
.thank-you-content p {
    font-size: var(--font-size-md);
    margin-bottom: 2rem;
}
.thank-you-content #agenda {
    padding-top: 2rem;
    /* Alinea el texto de la agenda a la izquierda, como en la página principal */
    text-align: left;
}
.social-icons {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.social-icons img {
    width: 70px; /* Tamaño original restaurado para escritorio */
}
.social-icons a:hover img {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* Anula el bold para los botones en las páginas de gracias/términos */
.thank-you-page .btn-nav {
    font-weight: 400; /* Normal/Book weight */
}

.thank-you-content footer {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.thank-you-content footer .footer-links {
    display: flex;
    gap: 1.5rem;
}

.thank-you-content footer a {
    font-size: 1rem; /* Unifica el tamaño para todo el texto del footer */
}
.thank-you-content footer .copyright {
    font-size: 1rem;
    opacity: 0.7;
}

/* CONSENT BANNER */
#consent-banner {
    position: fixed;
    bottom: 20px;
    left: 50%;
    max-width: 450px;
    background-color: rgba(37, 10, 80, 0.8); /* --dark-purple with 80% opacity */
    backdrop-filter: blur(5px); /* Efecto de desenfoque similar al de la pág. de gracias */
    color: var(--white);
    padding: 1.5rem;
    text-align: center; /* Centra el texto */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    z-index: 1500;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transform: translateY(200%); /* Hidden way down */
    transition: transform 0.5s ease-in-out;
}

#consent-banner .btn-nav {
    align-self: flex-end;
}
#consent-banner.show {
    transform: translate(-50%, 0);
}
#consent-banner p {
    margin: 0;
}

/* BACK TO TOP BUTTON */
#back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden; /* Hidden by default */
    transition: opacity 0.3s;
}
#back-to-top-btn.show:hover {
    opacity: 1;
}
#back-to-top-btn.show {
    opacity: 0.4;
    visibility: visible;
}
#back-to-top-btn img {
    width: 60px;
    transform: rotate(180deg); /* Rotates the icon so the arrow points up */
}

#back-to-top-btn:focus {
    outline: none;
}

/* RESPONSIVENESS */
@media (max-width: 768px) {
    :root {
        --font-size-lg: 2rem;
        --font-size-md: 1.1rem;
        --font-size-sm: 0.9rem;
    }
    section {
        padding: 4rem 1rem;
    }

    /* Removes horizontal padding for full-width sections */
    .hero,
    #patrocinadores {
        padding-left: 0;
        padding-right: 0;
    }

    #registro {
        padding-bottom: 2.5rem;
    }

    h2 {
        justify-content: center; /* Centers the title when lines are hidden */
    }

    h2::before,
    h2::after {
        display: none; /* Hides side lines on mobile */
    }

    /* Ensures bold text within intro paragraphs is maintained on mobile */
    .section-intro strong {
        font-weight: 700;
    }

    .container {
        padding: 0 1rem;
    }
    #main-header {
        /* This ensures the logo and button are on opposite ends */
        justify-content: space-between;
        /* Symmetrical padding for a balanced look. */
        padding: 1rem 1.25rem;
    }

    #main-header .logo {
        height: 45px; /* Slightly smaller for better balance on small screens */
    }

    .hero-content .summit-logo {
        width: 80%;
        max-width: 500px;
    }
    .btn-register img {
        width: 90%;
        max-width: 350px;
        }

        .hero-content p {
            margin-left: 1rem;
            margin-right: 1rem;
    }
    .expo-intro-highlight {
        font-size: inherit;
        font-weight: 700;
    }
    .social-icons img {
        width: 50px;
    }
    .thank-you-content .summit-logo {
        width: 90%;
        max-width: 500px;
    }
    .legal-page .summit-logo {
        width: 90%;
        max-width: 300px;
    }

    .thank-you-content {
        padding-left: 0;
        padding-right: 0;
    }

    /* Ajustes para la sección FAQ en móvil */
    .faq-list {
        gap: 0.75rem;
    }
    .faq-question {
        padding: 0.75rem 0;
    }
    .faq-question img {
        width: 45px;
    }
    .faq-answer p {
        padding-bottom: 0.75rem;
    }
    .expo-text div {
        flex-direction: row;
        align-items: center;
    }

    .expo-text p {
        text-align: left;
    }

    .expo-columns {
        flex-direction: column;
    }

    .video-placeholder {
        flex-basis: auto;
        width: 100%;
        max-width: 350px;
    }
    .dynamic-fields {
        grid-template-columns: 1fr;
    }
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Centers the last grid item if it's odd */
    .benefits-grid .benefit-item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 50%;
    }

    .thank-you-page .agenda-item span {
        font-size: var(--font-size-sm);
    }

    .thank-you-page #agenda.container {
        padding-left: 0;
        padding-right: 0;
    }


    .benefit-item img {
        max-width: 140px;
    }

    #contact-form {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    .form-footer {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .form-actions {
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
    }

    .form-actions .cf-turnstile {
        justify-self: center;
    }

    #main-footer {
        padding: 1.25rem 1rem;
    }

    .footer-top {
        flex-direction: column;
        gap: 0;
        margin-bottom: 1.25rem;
    }

    .footer-logo {
        display: none;
    }

    .footer-legal {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    .sponsors-track img {
        height: 65px;
        width: auto;
        margin: 0 2rem;
    }
    
    .sponsors-track img[alt="Dell"],
    .sponsors-track img[alt="HPE"],
    .sponsors-track img[alt="Veeam"],
    .sponsors-track img[alt="Cisco"] {
        height: 50px;
    }

    .sponsors-track {
        animation-name: scroll-mobile;
    }

    #patrocinadores .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #patrocinadores h2 {
        margin-bottom: 6rem; /* Aumentado aún más el espacio para un mejor centrado vertical */
        /* Increased space for better vertical centering */
    }

    #desktop-nav {
        /* This ensures the nav container doesn't take full width,
           allowing space-between on the header to work correctly. */
    }

    #desktop-nav ul {
        justify-content: flex-end; /* Keeps the button to the right */
    }

    /* Hides all navigation links except the last one (Register) */
    #desktop-nav ul li:not(:last-child) {
        display: none;
    }

    #consent-banner {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        width: auto;
        max-width: none;
        transform: translateY(200%); 
    }

    #consent-banner.show {
        transform: translateY(0);
    }

    /* On mobile, reverts to the original behavior of showing text below the image */
    .benefit-item p {
        display: block;
        font-size: var(--font-size-sm);
        margin-top: 1rem;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
    }

    .benefit-item.active p {
        max-height: 300px;
        opacity: 0.8;
    }
    
    .tooltip-text { /* New implementation for mobile */
        position: static;
        transform: none;
        visibility: visible; /* Always visible in the DOM */

        background-color: transparent;
        color: var(--light-grey);
        text-align: left;
        padding: 0.5rem 0 0 0;
        font-size: 0.85rem;

        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
    }

    /* Class to show the tooltip with JS */
    .tooltip-text.show {
        opacity: 1;
        max-height: 150px;
    }

    /* Lowers toast messages to avoid overlapping with the header on mobile */
    #toast-container {
        top: 100px;
        left: 1rem;
        right: 1rem;
    }

}

@media (max-width: 480px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes scroll-mobile {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* LEGAL PAGES (TERMS & CONDITIONS) */
.legal-content {
    text-align: left;
    line-height: 1.6;
}

.legal-content p {
    font-size: var(--font-size-sm);
}

.legal-content h3 {
    font-size: var(--font-size-md);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.legal-page .summit-logo {
    width: 400px;
    height: auto; /* Maintains aspect ratio */
}

.legal-content .btn-nav {
    font-size: var(--font-size-sm);
}

.thank-you-page .btn-nav {
    font-weight: 400; /* Normal/Book weight */
}

/* LOADING OVERLAY */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(37, 10, 80, 0.9); /* --dark-purple with 90% opacity */
    backdrop-filter: blur(5px);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    z-index: 3000;
    color: var(--white);
}

#loading-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    text-align: center;
    min-height: 1.5em; /* Prevents layout shift while typing */
}

/* Blinking cursor animation */
#loading-text::after {
    content: '_';
    animation: blink 1s step-end infinite;
    margin-left: 0.25rem;
}

@keyframes blink {
    50% { opacity: 0; }
}
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}