con la clase .is-typing. */
p.is-typing::after,
div.is-typing::after {
content: '_';
animation: blink 1s step-end infinite;
margin-left: 0.15rem;
font-weight: inherit;
/* Asegura que el cursor tenga el mismo grosor que el texto del párrafo. */
}
/* Elimina el contorno de foco en clics de mouse, pero lo mantiene para navegación con teclado */
:focus:not(:focus-visible) {
outline: none;
}
/* HEADER */
#main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: rgba(37, 10, 80, 0.9);
/* Más sólido para lectura */
backdrop-filter: blur(10px);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
padding: 0.8rem 2rem;
transform: translateY(-100%);
}
.header-right {
display: flex;
align-items: center;
gap: 2rem;
}
/* Clase para mostrar el header al hacer scroll hacia arriba */
#main-header.header-visible {
transform: translateY(0);
}
#main-header .logo {
height: 80px;
/* Aumenta este valor para hacer el logo del header más grande */
}
#desktop-nav ul {
list-style: none;
display: flex;
gap: 2rem;
align-items: center;
/* Alinea verticalmente todos los elementos del menú */
}
#desktop-nav a {
font-weight: 400;
/* Normal */
color: var(--white);
font-size: var(--font-size-sm);
transition: text-shadow 0.2s;
/* Transición suave para el efecto */
}
#desktop-nav a:hover {
text-shadow: 0 0 10px rgba(113, 168, 80, 0.5);
color: var(--green);
text-decoration: none;
}
/* Hamburger Menu Icon */
.hamburger-menu {
display: none;
flex-direction: column;
justify-content: space-around;
width: 30px;
height: 25px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1100;
}
.hamburger-menu span {
width: 30px;
height: 3px;
background: var(--white);
border-radius: 10px;
transition: all 0.3s linear;
position: relative;
transform-origin: 1px;
}
/* Animaciones Hamburger */
.hamburger-menu.active span:nth-child(1) {
transform: rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
transform: rotate(-45deg);
}
/* Estilos para el botón de registro en la navegación */
.btn-nav {
background-color: transparent;
color: var(--white);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-weight: 400;
transition: all 0.3s ease-in-out;
display: inline-block;
border: 1px solid var(--purple-2);
/* Borde morado */
}
.btn-nav span {
color: var(--white) !important;
/* Texto blanco */
}
.btn-nav:hover {
background-color: var(--purple-2);
/* Fondo morado al pasar el cursor */
text-shadow: none;
text-decoration: none;
}
/* --- ESTILOS DE BOTONES UNIFICADOS --- */
/* Clase base para todos los botones */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
background-color: transparent;
color: var(--white);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-weight: 400;
font-size: 1rem;
transition: all 0.3s ease;
border: 1px solid var(--purple-2);
text-decoration: none;
cursor: pointer;
}
.btn:hover {
background-color: var(--purple-2);
text-decoration: none;
text-shadow: none;
}
/* Modificador para botones con ícono */
.btn img {
width: 24px;
}
/* HERO SECTION */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--white);
padding: 0;
overflow: hidden;
/* Mantenemos esto para el contenido del hero */
background-color: transparent;
/* Hacemos el fondo del hero transparente */
}
#bg-video {
/* Cambiamos a 'fixed' para que se posicione relativo a la ventana del navegador */
position: fixed;
top: 50%;
left: 50%;
/* Asegura que el video cubra toda la sección */
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
z-index: -1;
object-fit: cover;
/* Llena el espacio sin distorsionar, puede recortar bordes */
}
.hero-content {
z-index: 1;
/* Asegura que el contenido esté sobre el video */
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
gap: 3rem;
/* Aumentado el espacio entre elementos del hero */
}
.hero-content .summit-logo {
max-width: 80%;
/* CORRECCIÓN: Se usa un ancho fijo que no depende del contenedor padre para evitar cambios de tamaño. */
width: min(600px, 80vw);
width: min(600px, 80vw);
height: auto;
/* CORRECCIÓN: Mantiene la relación de aspecto */
}
.hero-content p {
font-size: var(--font-size-md);
/* Cambiado a tamaño mediano (subtítulo) */
font-weight: 300;
/* Light */
}
/* Estilos para el subtítulo animado del hero */
#hero-subtitle {
min-height: 1.6em;
/* Evita que el layout salte mientras se escribe */
/* CORRECCIÓN: Se fuerza a una sola línea y se le da ancho completo para estabilizar el layout. */
width: 100%;
min-height: 3.2em;
/* Altura para dos líneas */
font-family: 'Courier New', Courier, monospace;
white-space: normal;
/* Permite que el texto se divida en varias líneas */
}
/* Cursor parpadeante para el subtítulo animado */
#hero-subtitle::after {
content: '_';
animation: blink 1s step-end infinite;
margin-left: 0.25rem;
}
/* ------------------------------------------------------------------- */
/* 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;
}
/* ------------------------------------------------------------------- */
/* 20. Estilos para el Banner de Cookies (Movido de index.html)
/* ------------------------------------------------------------------- */
#consent-banner {
background-color: rgba(25, 25, 30, 0.95) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* ------------------------------------------------------------------- */
/* 21. Estilos para la Sección de Presentaciones (Movido de index.html) */
/* Eliminando reglas vacías reportadas por lint */
.presentation-form-wrapper {
max-width: 500px;
margin: 2rem auto 0 auto;
}
.access-form-container {
border: 2px solid #8e44ad;
border-radius: 10px;
padding: 1.5rem;
background-color: rgba(0, 0, 0, 0.2);
}
.access-form-container h4 {
margin-top: 0;
margin-bottom: 1rem;
text-align: center;
}
.presentation-access-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.presentation-access-form input {
padding: 0.75rem;
border-radius: 5px;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
}
.presentation-intro {
max-width: 800px;
margin: 2rem auto 1rem auto;
}
.btn-hero {
display: inline-flex;
flex-direction: column;
/* Apila el icono y el texto verticalmente */
align-items: center;
gap: 0.5rem;
/* Reduce el espacio para el apilado vertical */
margin-top: 1rem;
font-size: 1rem;
/* Tamaño de fuente ajustado */
font-weight: 400;
/* CORRECCIÓN: Se quita el bold del texto */
transition: transform 0.2s ease;
width: 160px;
/* Ancho fijo para cada botón */
text-align: center;
}
/* Ajusta el tamaño de los iconos dentro de los botones del hero */
.btn-hero img,
.btn-hero i {
/* Se elimina la declaración de font-family, no es necesaria y puede causar conflictos. */
height: 40px;
font-size: 40px;
/* Tamaño para el icono de Font Awesome */
font-weight: 900;
/* Hace el ícono de check más grueso */
color: var(--white);
/* CORRECCIÓN: Asegura que los íconos de Font Awesome sean visibles */
transition: color 0.3s ease, transform 0.2s ease;
/* Añade transiciones para color y escala */
}
.btn-hero:hover {
/* Se elimina la escala del botón completo */
text-decoration: none;
}
/* Cambia el color y escala del ícono al pasar el cursor SOLO sobre el ícono */
.btn-hero i:hover {
color: var(--green);
transform: scale(1.1);
/* Añade un ligero zoom solo al ícono */
}
.hero-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
/* Permite que los botones se ajusten si no caben */
}
/* EXPO SECTION */
#expo {
/* Se añade padding superior para separar del hero */
padding-bottom: 0;
/* Se anula el padding inferior de la sección */
}
.expo-intro-highlight {
font-size: var(--font-size-lg);
font-weight: 700;
}
#expo .subtitle {
/* Se eliminan los estilos de fondo para unificar el diseño */
/* background-color: rgba(255, 255, 255, 0.8); */
/* padding: 1rem; */
/* border-radius: 10px; */
text-align: center;
max-width: 1300px;
/* Aumentamos el ancho para el párrafo más largo */
margin: 0 auto 4rem;
/* Aumenta el espacio antes de las columnas de video/texto */
align-items: center;
}
.expo-columns {
display: flex;
gap: 3rem;
align-items: center;
}
.video-placeholder {
flex: 0 0 450px;
/* CORRECCIÓN: Establece un tamaño base fijo de 450px */
width: 450px;
/* CORRECCIÓN: Ancho fijo */
aspect-ratio: 1 / 1;
/* CORRECCIÓN: Relación de aspecto cuadrada para el video */
margin: 0 auto;
/* Centra el contenedor de video en el espacio disponible */
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Asegura que nada se desborde del borde redondeado */
position: relative;
/* Necesario para posicionar el botón de sonido */
background-color: #000;
/* Fondo negro para rellenar si el poster no cubre todo */
/* CORRECCIÓN: Estilos para la imagen de fondo */
background-size: cover;
background-position: center;
}
.video-interaction-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
/* Se coloca por encima del iframe pero por debajo del botón de sonido */
}
.video-placeholder video {
width: 100%;
height: 100%;
border-radius: 15px;
/* Hereda el borde redondeado del contenedor */
object-fit: contain;
/* Asegura que el video se vea completo sin distorsionarse */
}
/* Se elimina la regla para .video-poster-img ya que la etiqueta
![]()
fue removida */
.sound-btn {
position: absolute;
bottom: 15px;
right: 15px;
background-color: transparent;
/* CORRECCIÓN: Se quita el fondo para eliminar el contorno */
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.sound-btn i {
font-size: 1.2rem;
/* Tamaño del icono */
color: var(--green);
}
.expo-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem;
}
.expo-text div {
display: flex;
flex-direction: column;
/* Cambia la dirección a columna */
align-items: flex-start;
/* Mantiene la alineación a la izquierda */
gap: 1rem;
}
.expo-text img {
width: 70px;
}
/* MODAL STYLES */
.modal {
display: none;
/* Oculto por defecto */
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;
/* Se muestra como flex para centrar el contenido */
}
/* Botón de cierre del modal */
.close-btn {
position: absolute;
top: 30px;
right: 40px;
color: var(--white);
font-size: 60px;
font-weight: 300;
cursor: pointer;
z-index: 2001;
transition: all 0.3s ease;
line-height: 1;
user-select: none;
}
.close-btn:hover {
color: var(--green);
transform: scale(1.1);
}
@media (max-width: 768px) {
.close-btn {
top: 20px;
right: 20px;
font-size: 50px;
}
}
/* Estilo base para un modal genérico, no usado por la galería */
.modal-content-base {
position: relative;
background-color: var(--dark-blue);
padding: 2rem;
border-radius: 15px;
width: 90%;
max-width: 500px;
/* Ancho estándar para modales de texto */
text-align: center;
}
/* AGENDA SECTION */
.agenda-list {
/* Los estilos se moverán a .agenda-item */
max-width: 900px;
/* Aumentado para hacer los botones más anchos */
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
/* Espacio entre cada recuadro */
}
#agenda {
padding-bottom: 0;
/* Se anula el padding inferior de la sección */
}
.agenda-item {
background-color: var(--light-grey);
/* Cambiado a un gris más visible de la paleta existente */
border-radius: 15px;
/* Bordes redondeados para cada item */
display: grid;
/* Cambiado a grid para un control de alineación preciso */
grid-template-columns: auto 1fr auto;
/* Define 3 columnas: icono, texto flexible y horario */
align-items: center;
padding: 0.5rem 1rem;
/* Reducido aún más el padding vertical */
gap: 0.8rem;
/* Reducido el espacio entre elementos */
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;
/* Reducido el tamaño del icono */
}
.agenda-item>.agenda-title {
/* Se aplica solo a los spans de título directos, no a los anidados */
font-size: var(--font-size-sm);
color: var(--dark-blue);
/* Reducido el tamaño de fuente */
min-width: 0;
/* Permite que el texto se desplace a la siguiente línea si es necesario */
}
.agenda-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
/* Espacio entre el título y el ponente */
min-width: 0;
}
.agenda-title {
font-weight: 400;
/* Normal/Book */
color: var(--dark-blue);
}
.agenda-speaker {
font-size: 0.9em;
/* Ligeramente más pequeño que el texto principal */
color: #555;
/* Cambiado de morado a un gris oscuro para mejor contraste y legibilidad */
}
.agenda-item .time {
justify-self: end;
/* Alinea el horario a la derecha de su columna */
font-weight: 400;
/* Normal/Book */
color: var(--dark-blue);
white-space: nowrap;
/* Asegura que el horario nunca se divida en dos líneas */
}
/* REGISTRO SECTION */
#registro h2 {
padding-bottom: 0;
padding-bottom: 0;
/* El color ya es blanco por la regla h2 general */
}
.form-container {
max-width: 900px;
margin: 0 auto;
}
#contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
/* Hacer que los elementos que deben ocupar todo el ancho lo hagan */
#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;
/* Se elimina el margen para estandarizar */
}
.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;
/* Ajuste para centrar visualmente el '?' que se ve un poco bajo */
transform: translateY(-1px);
}
.tooltip-text {
visibility: hidden;
width: 320px;
/* Aumentado el ancho para mejor legibilidad */
max-width: calc(100vw - 2rem);
/* Asegura que no se desborde en pantallas pequeñas */
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%);
/* Centra el tooltip de forma más robusta */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip-container:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
#comentarios-wrapper {
display: none;
/* Oculto por defecto */
}
.form-divider {
height: 2px;
/* Aumenta el grosor para que coincida con las líneas de los títulos */
display: none;
/* Oculto por defecto */
background-color: rgba(255, 255, 255, 0.3);
margin: 1rem 0;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 0.5rem;
/* Espacio uniforme debajo de cada grupo de formulario */
}
.form-row {
display: flex;
gap: 1.5rem;
}
.form-row .form-group {
flex: 1;
}
#contact-form label {
/* margin-bottom is now on .label-wrapper */
font-size: var(--font-size-sm);
/* Se elimina el margen de aquí */
}
/* Estilo para el asterisco de campos requeridos */
#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;
/* Añade transición para el estado de error */
}
/* Estilo para campos con error */
#contact-form .has-error {
border: 2px solid #cc0000;
/* Tono de rojo más oscuro */
box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
/* Sombra correspondiente al nuevo color */
}
/* Anula el contorno amarillo/naranja por defecto del navegador en campos inválidos */
#contact-form .has-error:invalid,
#contact-form .has-error:focus:invalid {
outline: none;
/* Elimina el contorno por defecto del navegador (outline) */
/* Se refuerza el borde rojo aquí para asegurar que anule cualquier estilo de navegador */
border: 2px solid #cc0000;
}
/* Cambia el color del texto del select para que coincida con los 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;
/* Evita que el usuario pueda cambiar el tamaño del textarea */
}
.char-counter {
text-align: right;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.25rem;
}
/* Define el layout para los contenedores de campos dinámicos */
.dynamic-fields {
display: none;
/* Oculto por defecto, se muestra con JS */
grid-template-columns: 1fr 1fr;
/* Dos columnas de igual tamaño */
gap: 1.5rem;
/* Mismo espaciado que el resto del formulario */
align-items: end;
/* Alinea los campos en la parte inferior para que los inputs coincidan */
}
.form-consent {
display: flex;
align-items: center;
gap: 1rem;
/* Aumentado el espacio entre el checkbox y el texto */
}
.form-footer {
display: flex;
flex-direction: column;
/* Apila los elementos verticalmente */
gap: 1.5rem;
/* Espacio entre el grupo de acciones y el botón */
align-items: center;
/* Centra el botón de envío */
}
.form-actions {
display: grid;
/* Cambiado a grid para alinearse con el resto del formulario */
grid-template-columns: 1fr 1fr;
/* Dos columnas iguales */
gap: 1.5rem;
/* Mismo espaciado que el resto del formulario */
width: 100%;
/* Ocupa todo el ancho disponible */
}
.form-actions .cf-turnstile {
justify-self: end;
/* Alinea el captcha a la derecha de su columna */
}
/* .mandatory-consent label { } - Eliminado por estar vacío */
.form-consent a {
text-decoration: none;
/* Sin subrayado por defecto */
font-weight: 400;
/* Quita el estilo bold, usa peso normal */
}
.form-consent a:hover {
text-decoration: underline;
/* Se subraya al pasar el mouse, como los demás enlaces */
}
#submit-btn {
background: none;
border: none;
cursor: pointer;
/* Añadimos la transición para el nuevo efecto de resplandor */
transition: filter 0.3s ease-in-out;
}
/* SURVEY CTA SECTION (NUEVA SECCIÓN PARA LA ENCUESTA) */
#encuesta-cta {
text-align: center;
padding: 4rem 0;
}
/* Estilos para el nuevo botón de la encuesta CTA */
.encuesta-selector-link {
display: inline-block;
/* Permite que el enlace se comporte como un bloque */
text-decoration: none;
/* Quita el subrayado del enlace */
}
/* Anula el efecto hover del enlace para que se aplique solo a la tarjeta */
.encuesta-selector-link:hover {
text-decoration: none;
}
/* Nuevo efecto de resplandor para el botón del formulario */
#submit-btn:hover:not(:disabled) img {
transform: scale(1.05);
/* Mismo efecto que otros botones */
}
/* GALLERY SECTION */
#galeria {
padding-bottom: 6rem;
}
/* Nuevo wrapper para el carrusel de galería, similar al de patrocinadores */
.gallery-carousel-wrapper {
width: 100%;
/* En escritorio, este será el contenedor de la cuadrícula */
overflow: visible;
/* CORRECCIÓN: Permite que la animación de hover no se corte */
-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);
}
/* --- ESTILOS PARA EL NUEVO SELECTOR DE GALERÍA (TARJETAS) --- */
.gallery-selector {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 5rem;
}
.selector-card {
position: relative;
width: 220px;
height: 120px;
background-color: rgba(37, 10, 80, 0.5);
border: 1px solid var(--purple-2);
border-radius: 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--light-grey);
cursor: pointer;
transition: all 0.3s ease-in-out;
overflow: hidden;
backdrop-filter: blur(5px);
}
.selector-card i {
font-size: 2.5rem;
transition: color 0.3s ease;
}
.selector-card h3 {
font-size: 1.2rem;
font-weight: 400;
margin: 0;
color: inherit;
transition: color 0.3s ease;
}
.selector-card:hover {
border-color: var(--green);
transform: translateY(-5px);
}
.gallery-selector .selector-card.active {
background-color: rgba(113, 168, 80, 0.2);
border-color: var(--green);
color: var(--white);
box-shadow: 0 0 25px rgba(113, 168, 80, 0.6);
}
.gallery-selector .selector-card.active i,
.gallery-selector .selector-card.active h3 {
color: var(--white);
text-shadow: 0 0 10px var(--green);
}
/* --- FIN DE ESTILOS PARA EL SELECTOR DE GALERÍA --- */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.gallery-grid {
display: flex;
gap: 1.5rem;
overflow-x: auto;
/* Mantenemos el scroll para responsive */
padding-bottom: 1.5rem;
/* Espacio para el scrollbar sin cortar los bordes */
/* Oculta la barra de scroll pero mantiene la funcionalidad */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
/* --- FIN AJUSTES ESCRITORIO --- */
cursor: pointer;
cursor: grab;
padding-top: 1rem;
/* CORRECCIÓN: Añade espacio superior para la animación de hover */
}
/* En modo de arrastre, el cursor cambia */
.gallery-grid.active {
cursor: grab;
/* Indica que se puede arrastrar */
user-select: none;
/* Evita la selección de texto al arrastrar */
}
.gallery-grid::-webkit-scrollbar {
display: none;
/* Chrome, Safari and Opera */
display: none;
}
/* Selector específico para los items de la galería para evitar conflictos */
.gallery-grid>.gallery-item {
border-radius: 15px;
aspect-ratio: 16 / 9;
position: relative;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 2px solid var(--purple-2);
/* Borde morado delgado */
width: 500px;
/* Ancho aumentado para escritorio */
flex-shrink: 0;
/* Evita que los items se encojan */
aspect-ratio: 16 / 9;
}
.gallery-item:hover {
transform: scale(1.02);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 12px;
/* CORRECCIÓN: Se reduce a 12px para que el borde de 2px del contenedor sea completamente visible. */
transition: filter 0.3s ease;
}
.gallery-item:hover img {
filter: blur(2px);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.3s ease;
/* Centra el contenido (el futuro ícono) */
display: flex;
align-items: center;
justify-content: center;
}
/* CORRECCIÓN: Se añade un ícono de "ojo" usando Font Awesome en lugar del SVG de "play" */
.gallery-overlay::before {
font-family: "Font Awesome 6 Free";
content: "\f06e";
/* Código Unicode para el ícono de ojo (eye) */
font-weight: 900;
font-size: 4rem;
/* Tamaño del ícono */
color: var(--white);
/* Añadimos una sombra sutil para que resalte sobre el fondo desenfocado */
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
/* Icono de Play para los videos de la galería */
.play-icon-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: rgba(37, 10, 80, 0.7);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
background-image: url('../images/MC Summit AI_Icono Play_White.svg');
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
}
.gallery-item:hover .play-icon-overlay {
opacity: 1;
}
/* Contenedor para el botón "Ver más" de la galería */
.gallery-load-more-container {
text-align: center;
/* Centra el botón */
margin-top: 2rem;
/* Añade espacio sobre el botón */
}
/* MODAL STYLES (Reutilizamos y adaptamos los existentes) */
.modal {
animation: fadeInModal 0.3s ease;
}
@keyframes fadeInModal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-content {
background-color: transparent;
width: 90%;
max-width: 1100px;
/* Más ancho para videos */
padding: 0;
max-height: 90vh;
/* Limitamos la altura máxima al 90% de la pantalla */
display: flex;
flex-direction: column;
/* CORRECCIÓN DEFINITIVA: Centra la imagen y las flechas vertical y horizontalmente */
justify-content: center;
align-items: center;
box-shadow: none;
position: relative;
/* CORRECCIÓN: Establece un contexto de posicionamiento para los elementos hijos. */
animation: zoomInModal 0.3s ease;
}
#modal-media-container {
width: 100%;
height: 100%;
position: relative;
/* CORRECCIÓN DEFINITIVA: Asegura que la imagen dentro de este contenedor esté siempre centrada. */
display: flex;
justify-content: center;
align-items: center;
}
@keyframes zoomInModal {
from {
transform: scale(0.9);
}
to {
transform: scale(1);
}
}
.modal-content img,
.modal-content iframe {
/* CORRECCIÓN DEFINITIVA: Asegura que la imagen se ajuste sin deformarse */
width: auto;
height: auto;
/* La altura se ajusta automáticamente */
max-width: 100%;
/* La imagen no puede ser más ancha que su contenedor */
max-height: 85vh;
/* La imagen no puede ser más alta que el 85% de la pantalla */
display: block;
}
/* Visor de PDF optimizado - Corrección de tamaño miniatura */
.modal-content iframe.pdf-viewer-iframe {
width: 100% !important;
height: 85vh !important;
border: none;
border-radius: 10px;
background-color: white;
/* Fondo blanco para contraste de lectura */
display: block;
}
/* Ajuste de modal para PDF */
.modal-pdf .modal-content {
max-width: 1300px;
width: 95%;
}
/* ESCUDO DE PROTECCIÓN PARA PDF */
.pdf-protection-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 1000;
/* Por encima del iframe */
cursor: default;
}
/* Protección de contenido: Evitar selección y clicks derechos en visualizadores */
.modal-content,
.presentation-card,
.gallery-item {
user-select: none;
-webkit-user-drag: none;
}
.modal-content iframe:not(.pdf-viewer-iframe) {
/* CORRECCIÓN: Se mantiene para los videos de YouTube */
width: 100%;
height: calc(90vw * (16 / 9));
}
/* Estilos para los botones de navegación del modal */
.prev-btn,
.next-btn {
/* CORRECCIÓN DEFINITIVA: Se elimina position:absolute para que hereden la posición de su contenedor (.nav-wrapper) */
cursor: pointer;
width: 44px;
padding: 10px;
/* Padding reducido para consistencia */
/* SOLUCIÓN DEFINITIVA: Se elimina el margen superior negativo que causaba la desalineación vertical. */
display: flex;
/* Añadido para poder centrar el contenido del botón (la flecha) */
align-items: center;
/* Centra la flecha verticalmente */
justify-content: center;
/* Centra la flecha horizontalmente */
color: white;
font-weight: bold;
font-size: 24px;
transition: 0.3s ease;
border-radius: 0 3px 3px 0;
border-radius: 5px;
user-select: none;
background-color: rgba(0, 0, 0, 0.3);
z-index: 10;
}
/* CORRECCIÓN: Posiciona el contenedor de las flechas de forma absoluta para que no interfiera con el contenido del modal */
.modal-content .nav-wrapper {
position: fixed;
/* CORRECCIÓN: Usa 'fixed' para que la posición no dependa del tamaño de la imagen al cargar. */
top: 50%;
left: 5%;
/* Añade un pequeño margen desde los bordes de la pantalla. */
width: 100%;
/* Ocupa todo el ancho para posicionar las flechas */
transform: translate(-5%, -50%);
/* Ajusta la transformación para centrar correctamente. */
display: flex;
/* Mantiene la alineación de las flechas */
align-items: center;
/* SOLUCIÓN DEFINITIVA: Centra los recuadros de las flechas verticalmente. */
justify-content: space-between;
/* Coloca una flecha a cada lado */
pointer-events: none;
/* Evita que el contenedor intercepte clics */
}
.next-btn {
/* CORRECCIÓN DEFINITIVA: Se elimina la propiedad 'right' que causaba el conflicto de posicionamiento. */
border-radius: 3px 0 0 3px;
pointer-events: auto;
/* Asegura que el botón sea clickeable */
}
.prev-btn:hover,
.next-btn:hover {
background-color: rgba(0, 0, 0, 0.6);
pointer-events: auto;
/* Restaura los eventos de clic solo en las flechas */
text-decoration: none;
}
.prev-btn {
/* CORRECCIÓN DEFINITIVA: Se elimina la propiedad 'left' que causaba el conflicto de posicionamiento. */
pointer-events: auto;
/* Asegura que el botón sea clickeable */
}
#submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#submit-btn:disabled:hover img {
transform: none;
}
/* PATROCINADORES SECTION */
#patrocinadores {
/* Se anula el padding horizontal para que el carrusel ocupe todo el ancho */
padding: 6rem 0 4rem;
/* Añadido espacio inferior para separar de la siguiente sección */
}
#patrocinadores h2 {
color: var(--white);
/* Hereda los estilos generales de h2, que ahora funcionarán dentro del .container */
/* CORRECCIÓN: Aumenta el espacio debajo del título de patrocinadores */
margin-bottom: 6rem;
}
.carousel-wrapper {
margin-top: 8rem;
/* Aumentado el espacio sobre el carrusel */
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;
/* CORRECCIÓN: Permite que el ancho se base en el contenido */
animation: scroll 20s linear infinite;
/* Velocidad ajustada para un movimiento más dinámico */
align-items: center;
/* CORRECCIÓN: Centra verticalmente todos los logos */
}
.sponsors-track img {
height: 100px;
/* Altura base reducida para un look más compacto */
margin: 0 4rem;
/* 128px de margen total por imagen */
width: auto;
/* El ancho se ajusta automáticamente para mantener la proporción */
}
/* Ajuste específico para logos más anchos para que se vean visualmente equilibrados */
.sponsors-track img[alt="Dell"],
.sponsors-track img[alt="HPE"],
.sponsors-track img[alt="Veeam"],
.sponsors-track img[alt="Cisco"] {
height: 75px;
/* Altura reducida proporcionalmente */
}
@keyframes scroll {
0% {
transform: translateX(0);
}
/* Se mueve la mitad de la pista. La pista tiene 14 logos. */
100% {
transform: translateX(-50%);
}
}
/* FAQ SECTION */
#faq {
/* CORRECCIÓN: Se elimina el padding inferior para reducir el espacio antes del footer */
padding-bottom: 2rem;
/* Reducido desde 6rem */
}
.faq-list {
max-width: 800px;
margin: 0 auto;
/* Se mueven los estilos de fondo a .faq-item */
display: flex;
flex-direction: column;
gap: 1rem;
/* Espacio entre cada pregunta */
}
.faq-item {
/* Se aplican los estilos de fondo a cada pregunta individualmente */
background-color: rgba(255, 255, 255, 0.1);
/* Cambiado a un gris semitransparente */
backdrop-filter: blur(5px);
border-radius: 15px;
padding: 0 1.5rem;
/* Padding horizontal, el vertical lo da .faq-question */
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
/* Interlineado reducido */
cursor: pointer;
font-size: var(--font-size-sm);
font-weight: 700;
/* Preguntas en negrita */
}
.faq-question img {
width: 60px;
transition: transform 0.3s;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, padding-bottom 0.4s ease-out;
/* Transición más suave */
}
.faq-answer p {
/* CORRECCIÓN: Se elimina el padding-bottom de aquí para que no haya doble espaciado
cuando el contenedor principal ya lo tenga. */
padding-bottom: 0;
font-size: var(--font-size-sm);
/* Normalizado a tamaño chico */
}
.faq-item.active .faq-question img {
transform: rotate(180deg);
}
.faq-item.active .faq-answer {
/* CORRECCIÓN: Aumentamos la altura máxima para dar espacio suficiente al mapa y al texto.
Añadimos padding-bottom para que el mapa no quede pegado al borde inferior. */
max-height: 600px;
padding-bottom: 1.5rem;
}
/* FOOTER */
#main-footer {
color: var(--white);
padding: 1.5rem 2rem;
/* Reducido el padding vertical */
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
/* Reducido el espacio entre la parte superior y la legal */
}
.footer-logo {
height: 80px;
/* Tamaño igualado al logo del header */
/* Se quitan efectos y se aplica filtro para hacerlo blanco */
filter: brightness(0) invert(1);
width: auto;
/* CORRECCIÓN: Mantiene la relación de aspecto */
}
#main-footer .footer-links {
display: flex;
gap: 2rem;
}
/* #main-footer .footer-links a[href*="microcomp.com.mx"] { } - Eliminado por estar vacío */
.footer-links {
display: flex;
gap: 1.5rem;
/* Espacio entre los enlaces de privacidad y términos */
}
.footer-legal {
display: flex;
width: 100%;
/* Ocupa todo el ancho para permitir la alineación */
justify-content: space-between;
/* Coloca los enlaces a la izquierda y el copyright a la derecha */
align-items: center;
font-size: var(--font-size-sm);
/* Unifica el tamaño con el resto del texto */
}
.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 img {
/* Se elimina el filtro morado para restaurar el color original de los iconos. */
filter: none;
transition: filter 0.3s ease, transform 0.2s;
}
.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%;
/* Se mantiene centrado */
width: 90%;
/* Usamos porcentaje para mejor adaptabilidad */
max-width: 700px;
/* Aumentamos aún más el ancho máximo */
backdrop-filter: blur(5px);
/* Efecto de desenfoque similar al de la pág. de gracias */
color: var(--white);
padding: 2.5rem;
/* Aumentamos más el padding */
text-align: center;
/* Centra el texto */
display: flex;
flex-direction: column;
align-items: center;
/* Centra el contenido (botón) */
gap: 1.5rem;
/* Aumentamos el espacio entre texto y botón */
z-index: 1500;
border-radius: 10px;
/* Bordes redondeados */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(200%);
/* Oculto muy abajo */
transition: transform 0.5s ease-in-out;
/* CORRECCIÓN: Se unifica el color de fondo. */
background-color: rgba(37, 10, 80, 0.8);
/* --dark-purple with 80% opacity */
}
#consent-banner.show {
transform: translate(-50%, 0);
}
#consent-banner p {
margin: 0;
/* Se mantiene */
font-size: 1.2rem;
/* Hacemos la fuente aún más grande */
}
#consent-accept-btn {
/* Ahora solo contiene estilos específicos */
border: none;
cursor: pointer;
align-self: flex-end;
/* Mantiene el botón alineado a la derecha */
}
/* CORRECCIÓN: Se añade un fondo al botón de aceptar cookies para que sea visible */
#consent-accept-btn {
background-color: var(--purple-2);
}
#consent-accept-btn:hover {
background-color: var(--green);
/* Cambia a verde en hover para consistencia */
border-color: var(--green);
}
/* BACK TO TOP BUTTON */
#back-to-top-btn {
position: fixed;
bottom: 20px;
right: 20px;
background-color: transparent;
border: none;
/* Se quita el contorno blanco */
border-radius: 50%;
width: 80px;
/* Aumentado para que el icono quepa */
height: 80px;
/* Aumentado para que el icono quepa */
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
/* Oculto por defecto */
transition: opacity 0.3s;
}
#back-to-top-btn.show:hover {
/* No se necesita efecto de fondo morado */
opacity: 1;
/* Se vuelve 100% opaco al pasar el cursor */
}
#back-to-top-btn.show {
opacity: 0.4;
/* Ligeramente más transparente para que el hover destaque más */
visibility: visible;
/* Visible cuando tiene la clase .show */
}
#back-to-top-btn img {
width: 60px;
/* Mismo tamaño que los iconos del FAQ */
transform: rotate(180deg);
/* Rota el ícono para que la flecha apunte hacia arriba */
}
/* Elimina el recuadro de foco del navegador en el botón de "regresar arriba" */
#back-to-top-btn:focus {
outline: none;
}
/* RESPONSIVENESS */
@media (max-width: 768px) {
:root {
--font-size-lg: 2rem;
--font-size-md: 1.1rem;
/* Reducido */
--font-size-sm: 0.9rem;
/* Reducido */
}
/* Se elimina la técnica de sangrado anterior, ahora se maneja en el body */
section {
padding: 4rem 1rem;
/* CORRECCIÓN: Padding vertical estandarizado para simetría */
}
/* Se anula el padding horizontal para las secciones que deben ser de ancho completo */
.hero,
#patrocinadores {
padding-top: 8rem !important;
/* SIGNIFICANT INCREASE to ensure visual separation */
padding-left: 0;
padding-right: 0;
}
#agenda {
padding-bottom: 6rem !important;
/* SIGNIFICANT INCREASE to ensure visual separation */
}
/* Ajuste específico para la sección de la encuesta CTA */
#encuesta-cta,
#galeria {
/* CORRECCIÓN: Se unifica con el padding estándar de 4rem, heredado de 'section' */
padding-top: 4rem;
padding-top: 4rem;
/* Se mantiene el padding estándar */
padding-bottom: 4rem;
}
h2 {
margin-bottom: 2.5rem;
/* Reduce el margen inferior de los títulos en móvil */
/* CORRECCIÓN: Asegura que el título no se desborde, eliminando el scroll horizontal.
Se le resta el padding de la sección (1rem a cada lado). */
max-width: calc(100vw - 2rem);
justify-content: center;
/* Centra el título cuando las líneas están ocultas */
}
.section-intro {
margin-bottom: 3rem;
/* Margen inferior reducido para móvil */
margin-bottom: 3rem;
/* Margen inferior estándar para móvil */
}
/* CORRECCIÓN: Aumenta el espacio debajo del texto de introducción de la agenda y la encuesta. */
#agenda .section-intro,
#encuesta-cta .section-intro {
margin-bottom: 4rem;
}
/* Asegura que el texto en negrita dentro de los párrafos de introducción se mantenga en móvil */
.section-intro strong {
font-weight: 700;
}
.container {
padding: 0 1rem;
}
#main-header {
justify-content: space-between;
/* Alinea el logo a la izquierda y el botón a la derecha */
padding: 0.5rem 1rem;
/* Padding ajustado para móvil */
align-items: center;
}
#main-header .logo {
height: 50px;
/* Reduce el tamaño del logo en móvil */
width: auto;
}
/* --- CORRECCIONES RESPONSIVAS ADICIONALES --- */
.hero-content .summit-logo {
width: 80%;
/* Escala el logo del hero */
max-width: 500px;
}
/* CORRECCIÓN: Reduce el tamaño del botón de navegación para móvil */
.btn-nav {
padding: 0.4rem 1.2rem;
font-size: 1rem;
}
/* Añade margen horizontal al subtítulo del hero en móvil */
.hero-content p {
margin-left: 1rem;
margin-right: 1rem;
}
/* CORRECCIÓN: Se ajusta el espacio sobre los botones del hero para mejor simetría */
.hero-buttons {
margin-top: 2rem;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.btn-hero {
width: 100% !important;
max-width: 280px;
min-width: 0 !important;
text-align: center;
}
/* Anula el estilo del texto destacado en el primer párrafo para que fluya correctamente en móvil */
.expo-intro-highlight {
font-size: inherit;
font-weight: 700;
/* Se restaura el bold para móvil */
}
.social-icons img {
width: 50px;
/* Reduce el tamaño de los iconos de redes sociales */
}
.thank-you-content .summit-logo {
width: 90%;
/* Escala el logo en la página de gracias */
max-width: 500px;
}
.legal-page .summit-logo {
width: 90%;
/* Escala el logo en la página de términos */
max-width: 300px;
}
/* CORRECCIÓN: Aumenta el ancho del contenedor en la página de gracias para que la agenda quepa correctamente */
.thank-you-content {
padding-left: 0;
padding-right: 0;
}
/* Ajustes para la sección FAQ en móvil */
.faq-list {
gap: 0.75rem;
/* Reduce el espacio entre preguntas */
}
.faq-question {
padding: 0.75rem 0;
/* Reduce el padding vertical de la pregunta */
}
.faq-question img {
width: 45px;
/* Reduce el tamaño del icono de flecha */
}
.faq-answer p {
padding-bottom: 0.75rem;
/* Reduce el padding inferior de la respuesta */
}
/* Centra el texto de la sección expo en móvil */
.expo-text div {
flex-direction: row;
/* Coloca el icono al lado del texto */
align-items: center;
/* Centra verticalmente el icono y el texto */
}
.expo-text p {
text-align: left;
/* Alinea el texto a la izquierda para que fluya junto al icono */
}
.expo-columns {
flex-direction: column;
}
/* CORRECCIÓN: Ajusta el tamaño del video de la expo para que sea responsivo */
.video-placeholder {
flex-basis: auto;
/* Permite que el tamaño se ajuste al contenido */
width: 100%;
/* Ocupa el ancho completo del contenedor */
max-width: 350px;
/* Un ancho máximo razonable para móvil */
}
/* Ajuste para que los botones del hero quepan su texto */
.btn-hero {
width: auto !important;
min-width: 160px;
padding: 1rem 1.5rem;
}
/* Reducción de tamaño de tarjetas de ponentes en móvil */
.speaker-card {
min-height: 160px !important;
padding: 1.25rem !important;
gap: 1rem !important;
}
.speaker-name {
font-size: 1.15rem !important;
}
.speaker-title {
font-size: 0.85rem !important;
}
.speaker-brand {
font-size: 0.75rem !important;
}
.dynamic-fields {
grid-template-columns: 1fr;
/* Asegura que los campos dinámicos usen una columna */
}
/* CORRECCIÓN: Anula el padding del contenedor en la pág. de gracias para que la agenda ocupe todo el ancho */
.thank-you-page #agenda.container {
padding-left: 0;
padding-right: 0;
}
#contact-form {
grid-template-columns: 1fr;
/* Cambia a una columna en móvil */
gap: 1rem;
/* Reduce el espacio vertical entre campos */
}
.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;
/* Cambia a una columna en móvil */
align-items: center;
/* Centra el captcha y el checkbox */
justify-items: center;
/* Centra los elementos horizontalmente en la cuadrícula */
}
/* Asegura que el widget de Turnstile también se centre en móvil */
.form-actions .cf-turnstile {
justify-self: center;
}
#main-footer {
padding: 1.25rem 1rem;
/* Reduce aún más el padding vertical */
}
.footer-top {
flex-direction: column;
gap: 0;
/* ELIMINADO: Este era el espacio que impedía la reducción */
margin-bottom: 1.25rem;
/* Ajustado para ser el único espacio vertical */
}
/* Oculta el logo del footer en móvil */
.footer-logo {
display: none;
}
.footer-legal {
flex-direction: column;
text-align: center;
gap: 0.5rem;
/* Reduce aún más el espacio entre enlaces y copyright */
}
.sponsors-track img {
height: 65px;
/* Altura base reducida para móvil */
width: auto;
/* El ancho se ajusta automáticamente */
margin: 0 2rem;
/* 64px de margen total */
}
/* Ajuste específico para logos anchos en móvil */
.sponsors-track img[alt="Dell"],
.sponsors-track img[alt="HPE"],
.sponsors-track img[alt="Veeam"],
.sponsors-track img[alt="Cisco"] {
height: 50px;
/* Altura reducida proporcionalmente para móvil */
}
/* CORRECCIÓN: Usa una animación diferente para móvil con la distancia correcta */
.sponsors-track {
animation-name: scroll-mobile;
}
/* CORRECCIÓN: Aumenta el espacio debajo del título de patrocinadores en móvil. */
#patrocinadores h2 {
margin-bottom: 4rem;
}
#patrocinadores h2 {
margin-bottom: 4rem;
/* Espacio ajustado para un mejor centrado vertical */
}
/* Oculta los enlaces de navegación en la barra superior excepto el último (Encuesta) */
#desktop-nav:not(.active) ul li:not(:last-child) {
display: none !important;
}
/* Asegura que todos los enlaces sean visibles dentro del menú hamburguesa */
#desktop-nav.active ul li {
display: block !important;
}
/* Anula los estilos de lista para que el botón se alinee correctamente */
#desktop-nav ul {
display: contents;
}
/* Ajusta el banner de consentimiento para que no se desborde */
#consent-banner {
left: 1rem;
right: 1rem;
bottom: 1rem;
width: auto;
/* El ancho se ajusta por los valores de left/right */
max-width: none;
/* Elimina el ancho máximo en móvil */
/* Anula la transformación de centrado de escritorio para que no se salga de la pantalla */
transform: translateY(200%);
}
#consent-banner.show {
transform: translateY(0);
/* Solo aplica la animación vertical en móvil */
}
/* --- ESTILOS CONTENEDOR ENCUESTA --- */
/* Contenedor para centrar la encuesta, similar a thank-you-page */
body.survey-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;
padding: 2rem;
}
/* --- ESTILOS ENCUESTA PROFESIONAL B2B --- */
/* Contenedor principal de la encuesta */
.survey-container {
max-width: 900px;
width: 100%;
padding: 2rem;
background-color: rgba(37, 10, 80, 0.5);
backdrop-filter: blur(10px);
border-radius: 20px;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.survey-container .summit-logo {
width: 100%;
max-width: 350px;
margin-bottom: 1.5rem;
}
.survey-container .progress-bar-container {
width: 100%;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
margin: 2rem 0;
overflow: hidden;
height: 10px;
position: relative;
}
.survey-container .progress-bar {
width: 0%;
height: 100%;
background-color: var(--green);
border-radius: 10px;
transition: width 0.4s ease-in-out;
}
.survey-container .progress-text {
position: absolute;
top: -28px;
left: 0;
font-size: 0.9rem;
color: var(--white);
opacity: 0.8;
font-weight: 700;
}
.survey-container .form-step {
display: none;
animation: fadeIn 0.5s ease-in-out;
background-color: rgba(0, 0, 0, 0.15);
padding: 2.5rem;
border-radius: 15px;
min-height: 400px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.survey-container .form-step.active {
display: block;
}
.survey-container .form-step legend {
font-size: 1.8rem;
font-weight: 700;
color: var(--white);
margin-bottom: 2.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--green);
width: 100%;
text-align: left;
}
.survey-container .form-step .form-group {
margin-bottom: 2.5rem;
text-align: left;
}
.survey-container .form-step .form-group:last-child {
margin-bottom: 0;
}
.survey-container .form-step .form-group label {
font-size: 1.2rem;
font-weight: 400;
}
.survey-container .ponencia-group {
border-left: 3px solid var(--green);
padding-left: 1.5rem;
margin-bottom: 3rem;
}
.survey-container .ponencia-group h4 {
font-size: 1.1rem;
font-weight: 700;
color: var(--white);
margin-bottom: 1.5rem;
}
.survey-container .form-step textarea,
.survey-container .form-step input[type="text"],
.survey-container .form-step input[type="email"] {
width: 100%;
margin-bottom: 1.5rem;
background-color: rgba(255, 255, 255, 0.1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 0.8rem;
border-radius: 5px;
font-family: var(--font-family);
font-size: 1rem;
}
.survey-container .form-step textarea::placeholder,
.survey-container .form-step input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.survey-container .radio-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.survey-container .radio-rating input[type="radio"] {
display: none;
}
.survey-container .radio-rating label {
width: 45px;
height: 45px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0;
}
.survey-container .radio-rating input[type="radio"]:checked+label {
background-color: var(--green);
color: var(--white);
border-color: var(--green);
transform: scale(1.1);
}
.survey-container .radio-rating label:hover {
border-color: var(--white);
background-color: rgba(255, 255, 255, 0.2);
}
.survey-container .rating-label-start,
.survey-container .rating-label-end {
font-size: 0.9rem;
opacity: 0.7;
width: 100px;
}
.survey-container .rating-label-start {
text-align: right;
}
.survey-container .rating-label-end {
text-align: left;
}
.survey-container .form-navigation {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
/* Estilos específicos para los botones de navegación de la encuesta para evitar conflictos */
.survey-container .btn-nav {
background-color: var(--white);
color: var(--green);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-weight: 400;
transition: box-shadow 0.3s ease-in-out;
display: inline-block;
border: none;
cursor: pointer;
font-family: var(--font-family);
font-size: 1rem;
}
.survey-container .btn-nav:hover {
box-shadow: 0 0 15px 0 rgba(113, 168, 80, 0.7);
}
.survey-container .btn-outline {
background-color: transparent;
border: 1px solid var(--white);
color: var(--white);
}
.survey-container .survey-footer {
margin-top: 3rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.2);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
}
.survey-container .survey-footer a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s;
}
.survey-container .survey-footer a:hover {
color: var(--white);
text-decoration: underline;
}
.survey-container .form-step.shake {
animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
/* CORRECCIÓN: Tooltips de ayuda en responsive */
.tooltip-text {
/* Nueva implementación para móvil */
/* Anulamos el posicionamiento absoluto de escritorio */
position: static;
transform: none;
visibility: visible;
/* Siempre visible en el DOM */
/* Estilos del texto */
background-color: transparent;
/* Sin fondo */
color: var(--light-grey);
text-align: left;
padding: 0.5rem 0 0 0;
/* Espacio superior para separarlo del input */
font-size: 0.85rem;
/* Lógica de animación */
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;
}
/* Clase para mostrar el tooltip con JS */
.tooltip-text.show {
opacity: 1;
max-height: 150px;
/* Altura máxima para la animación */
}
/* Baja los mensajes toast para que no se superpongan con el header en móvil */
#toast-container {
top: 100px;
/* Aumenta la distancia desde la parte superior */
left: 1rem;
right: 1rem;
}
/* Mejora el scroll en la galería móvil */
/* Mejora el scroll en la galería móvil y elimina el degradado */
.gallery-grid {
scroll-snap-type: x mandatory;
/* Mejora el scroll en la galería móvil */
}
.gallery-grid>.gallery-item {
scroll-snap-align: start;
}
/* Ajusta el tamaño de los videos en el carrusel móvil */
/* CORRECCIÓN RESPONSIVE: Unifica el carrusel a 1 columna */
#fotos .gallery-grid>.gallery-item,
#videos .gallery-grid>.gallery-item {
width: 90%;
/* Cada item ocupa el 90% del ancho para dar la sensación de 1 columna */
}
/* SOLUCIÓN FINAL: Elimina el efecto de sombra del carrusel de la galería en móvil. */
.gallery-carousel-wrapper {
-webkit-mask-image: none;
mask-image: none;
}
/* CORRECCIÓN DEFINITIVA: Oculta los botones "Ver más" de la galería en móvil, ya que se usa un carrusel. */
.gallery-load-more-container {
display: none !important;
}
/* Responsive para la sección de presentaciones */
#presentation-access-form {
flex-direction: column;
}
}
/* CORRECCIÓN RESPONSIVE: Flechas del modal de la galería */
@media (max-width: 768px) {
.modal-content {
/* CORRECCIÓN: Se restaura el flex-direction para que las flechas se coloquen debajo */
display: flex;
flex-direction: column;
gap: 1rem;
/* Espacio entre la imagen/video y las flechas */
}
/* CORRECCIÓN DEFINITIVA: Anula el posicionamiento fijo del contenedor de flechas en móvil. */
.modal-content .nav-wrapper {
position: static;
/* Restaura el flujo normal del documento. */
transform: none;
/* Anula la transformación de escritorio. */
width: auto;
/* El ancho se ajusta al contenido. */
display: flex;
/* SOLUCIÓN DEFINITIVA: Usa flex para centrar las flechas. */
align-items: center;
/* Centra verticalmente los botones de flecha. */
justify-content: center;
/* Centra las flechas horizontalmente. */
gap: 2rem;
/* Añade espacio entre las flechas. */
pointer-events: auto;
/* Asegura que el contenedor sea interactivo. */
}
/* CORRECCIÓN DEFINITIVA: Se anula el posicionamiento absoluto y se usa un contenedor flex para las flechas */
.prev-btn,
.next-btn {
position: relative;
/* Se usa relative para que no afecte el flujo */
transform: none;
margin-top: 0;
display: flex;
/* SOLUCIÓN DEFINITIVA: Usa flex para centrar el contenido del botón. */
align-items: center;
/* Centra la flecha verticalmente. */
justify-content: center;
/* Centra la flecha horizontalmente. */
border-radius: 5px;
width: 50px;
/* Ancho ligeramente mayor para un mejor toque */
padding: 10px;
/* CORRECCIÓN: Se anula el posicionamiento lateral que causa el overflow */
right: auto;
left: auto;
}
}
/* --- CORRECCIÓN: Estilos de Galería solo para ESCRITORIO --- */
@media (min-width: 769px) {
.gallery-carousel-wrapper {
-webkit-mask-image: none;
mask-image: none;
overflow: hidden;
/* CORRECCIÓN: Evita el desbordamiento en escritorio */
}
.gallery-grid {
flex-wrap: wrap;
/* Permite que los elementos se ajusten en varias líneas */
justify-content: center;
/* Centra los items en la cuadrícula */
overflow: visible;
/* CORRECCIÓN DEFINITIVA: Permite que la animación de hover no se corte en escritorio */
overflow-x: hidden;
/* Oculta el scroll horizontal en escritorio */
cursor: default;
/* Cursor normal en escritorio */
}
/* Oculta los elementos extra en la cuadrícula de escritorio */
#fotos .gallery-item:nth-child(n+7) {
display: none;
}
#videos .gallery-item:nth-child(n+5) {
display: none;
}
/* CORRECCIÓN: Ajusta la cuadrícula de fotos a 3 columnas en escritorio */
#fotos .gallery-grid {
max-width: 1600px;
/* Limita el ancho para forzar 3 columnas */
margin: 0 auto;
}
#videos .gallery-grid {
max-width: 1100px;
/* Limita el ancho para forzar 2 columnas */
margin: 0 auto;
/* Centra la cuadrícula de videos */
}
/* Cuando se activa "ver más", se muestran todos los items */
.gallery-grid.show-all .gallery-item {
display: block !important;
}
}
/* --- SECCIÓN DE PRESENTACIONES EXCLUSIVAS (REFINADO) --- */
#presentaciones {
text-align: center;
}
.presentations-tab {
padding-bottom: 5rem;
}
.presentation-access-container {
margin-bottom: 3rem;
}
.access-form-container {
background: rgba(37, 10, 80, 0.4);
border: 1px solid var(--purple-2);
border-radius: 20px;
padding: 3rem 2rem;
margin: 2rem auto;
max-width: 600px;
backdrop-filter: blur(10px);
}
.access-form-container h4 {
font-size: 1.8rem;
color: var(--white);
margin-bottom: 2rem;
}
#access-email-input {
width: 100%;
margin-bottom: 1.5rem;
padding: 1rem;
border-radius: 8px;
border: 1px solid var(--purple-2);
background-color: rgba(255, 255, 255, 0.05);
color: var(--white);
font-size: 1.1rem;
transition: border-color 0.3s;
}
#access-email-input:focus {
outline: none;
border-color: var(--green);
background-color: rgba(255, 255, 255, 0.1);
}
.presentation-intro-text {
color: var(--light-grey);
font-size: 1rem;
line-height: 1.5;
margin-bottom: 2rem;
opacity: 0.9;
}
.presentation-access-form .form-row {
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
#access-presentations-btn {
min-width: 160px;
/* Ancho fijo para evitar que crezca al cambiar texto */
padding: 0.8rem 1.5rem;
transition: all 0.3s ease;
}
/* Reutilizamos la cuadrícula de la galería pero con items específicos para cards */
.presentations-grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
gap: 2rem !important;
width: 100%;
margin: 0 auto;
max-width: 1200px;
padding: 1rem;
justify-content: center;
}
.gallery-subtitle {
font-size: 2.2rem;
color: var(--white);
margin: 3rem 0 4rem;
position: relative;
display: block;
text-align: center;
width: 100%;
}
.gallery-subtitle::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background-color: var(--green);
border-radius: 2px;
}
.presentation-card {
aspect-ratio: auto !important;
width: 100% !important;
height: 100% !important;
min-height: 350px !important;
/* Altura mínima uniforme */
background: linear-gradient(135deg, rgba(37, 10, 80, 0.9), rgba(25, 25, 50, 0.9));
padding: 2rem 1.5rem !important;
text-align: center;
display: flex !important;
flex-direction: column;
justify-content: space-between;
/* Distribución fija: Top, Middle, Bottom */
align-items: center;
border: 1px solid var(--purple-2);
border-radius: 15px !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
position: relative;
overflow: hidden;
}
@media (hover: hover) {
.presentation-card:hover {
border-color: var(--green);
box-shadow: 0 15px 40px rgba(113, 168, 80, 0.3);
transform: translateY(-10px) scale(1.02) !important;
}
}
.presentation-card .card-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
/* Asegura Marca arriba y Speaker abajo */
align-items: center;
width: 100%;
z-index: 2;
}
.presentation-card .brand-tag {
display: inline-block;
padding: 0.4rem 1.2rem;
background-color: rgba(113, 168, 80, 0.1);
color: var(--green);
border: 1px solid rgba(113, 168, 80, 0.3);
border-radius: 50px;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 1.5rem;
/* Espacio fijo respecto al título */
letter-spacing: 1.5px;
transition: all 0.3s ease;
flex-shrink: 0;
}
.presentation-card:hover .brand-tag {
background-color: var(--green);
color: var(--dark-blue);
border-color: var(--green);
}
.presentation-card h4 {
font-size: 1.2rem;
color: var(--white);
line-height: 1.3;
font-weight: 700;
text-align: center;
flex: 1;
/* Toma el espacio central */
display: flex;
align-items: center;
/* Centra el título verticalmente en el medio */
justify-content: center;
margin: 0;
padding: 0.5rem 0;
}
.presentation-card .speaker {
font-size: 0.9rem;
color: var(--light-grey);
opacity: 0.8;
font-style: normal;
font-weight: 400;
margin-top: 1.5rem;
/* Espacio fijo respecto al título */
flex-shrink: 0;
}
.speaker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.speaker-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(142, 68, 173, 0.2);
border-radius: 15px;
padding: 2.2rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
/* Distribución organizada */
min-height: 260px;
/* Altura mínima para uniformidad */
gap: 1.5rem;
position: relative;
overflow: hidden;
}
.speaker-card.highlight-card {
border: 1px solid var(--green);
background: linear-gradient(135deg, rgba(113, 168, 80, 0.1), transparent);
}
@media (hover: hover) {
.speaker-card:hover {
border-color: var(--green);
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
}
.speaker-brand {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--green);
font-weight: 700;
}
.speaker-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.speaker-name {
font-size: 1.4rem;
font-weight: 700;
color: var(--white);
}
.speaker-title {
font-size: 0.95rem;
color: var(--light-grey);
line-height: 1.4;
opacity: 0.8;
}
/* En móvil, ajustamos la cuadrícula de presentaciones */
@media (max-width: 768px) {
.presentations-grid {
display: flex !important;
flex-direction: row !important;
gap: 2rem !important;
overflow-x: auto !important;
padding-bottom: 2rem !important;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
justify-content: flex-start !important;
}
.presentation-card {
width: 240px !important;
/* Reduced from 260px */
min-width: 240px !important;
scroll-snap-align: center;
min-height: 280px !important;
/* Reduced from 320px */
padding: 1.25rem 1rem !important;
}
/* Mejora del ancho del botón de encuesta en móvil */
.encuesta-selector-link {
width: 90%;
max-width: 320px;
margin: 0 auto;
display: block;
}
.encuesta-selector-link .selector-card {
width: 100% !important;
height: auto !important;
min-height: 100px;
padding: 1.5rem !important;
margin: 0 !important;
flex: none !important;
}
.gallery-subtitle {
font-size: 1.8rem;
margin-bottom: 3rem;
}
}
@keyframes scroll-mobile {
0% {
transform: translateX(0);
}
/* Se mueve la mitad de la pista. La pista tiene 14 logos. */
100% {
transform: translateX(-50%);
}
}
/* LEGAL PAGES (TERMS & CONDITIONS) */
.legal-content {
text-align: left;
line-height: 1.6;
}
/* Párrafos con el tamaño de fuente pequeño */
.legal-content p {
font-size: var(--font-size-sm);
}
/* Subtítulos con el tamaño de fuente mediano */
.legal-content h3 {
font-size: var(--font-size-md);
/* Cambiado a tamaño mediano */
font-weight: 700;
/* Bold */
margin-bottom: 0.5rem;
/* Espacio debajo de los subtítulos */
}
/* Reduce el tamaño del logo en la página de términos */
.legal-page .summit-logo {
width: 400px;
/* Ancho reducido para el logo */
}
.legal-content .btn-nav {
font-size: var(--font-size-sm);
/* Asegura que el botón tenga el tamaño correcto */
}
.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;
/* Oculto por defecto */
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1rem;
z-index: 3000;
color: var(--white);
}
/* Estilos para la animación de texto de carga */
#loading-text {
font-family: 'Courier New', Courier, monospace;
/* Fuente de estilo "consola" */
font-size: 1.1rem;
text-align: center;
min-height: 1.5em;
/* Evita que el layout salte mientras se escribe */
}
/* Animación de cursor parpadeante */
#loading-text::after {
content: '_';
animation: blink 1s step-end infinite;
margin-left: 0.25rem;
}
@keyframes blink {
50% {
opacity: 0;
}
}
@media (max-width: 768px) {
.hamburger-menu {
display: flex;
}
#desktop-nav {
position: fixed;
top: 0;
right: -100%;
width: 80%;
height: 100vh;
background: var(--dark-purple);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.4s ease;
z-index: 1050;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
}
#desktop-nav.active {
right: 0;
}
#desktop-nav ul {
flex-direction: column;
gap: 3rem;
}
#desktop-nav a {
font-size: 1.5rem;
}
/* REAJUSTE DE SELECTOR DE GALERÍA MÓVIL */
.gallery-selector {
flex-wrap: wrap;
gap: 10px;
}
.selector-card {
flex: 1 1 45%;
width: auto;
height: 80px;
/* Reducido de 120px */
}
.selector-card i {
font-size: 2rem;
/* Reducido de 2.5rem */
}
/* El botón Presentaciones ocupa toda la fila inferior */
.selector-card[data-tab="presentaciones"] {
flex: 1 1 100%;
margin-top: 5px;
}
}