html {
overflow-x: hidden !important;
overflow-y: auto !important;
max-width: 100% !important;
width: 100% !important;
}
body {
overflow-x: hidden !important;
overflow-y: visible !important;
max-width: 100% !important;
width: 100% !important;
position: relative;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
/* Indicador de Barra de Progreso de Lectura (v10.90) */
.reading-progress-bar {
position: fixed;
top: 0;
top: env(safe-area-inset-top, 0);
/* Alineación con muesca iOS */
left: 0;
width: 0%;
height: 3px;
background: linear-gradient(90deg, #370c31, #5a1451);
z-index: 2000000;
box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
transition: width 0.1s ease-out;
}
/* Fondo de Campo de Estrellas Global (v10.95) */
.starfield-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
background: transparent;
}
body {
background-color: transparent !important;
}
/* Asegurar que la capa de texto Hero esté siempre encima del Navbar para una transformación fluida (v20.95) */
.text-layer {
z-index: 99999998 !important;
/* Ligeramente por debajo de 99.9M para margen */
}
/* Capa de Transición de Página - Asegurar que sea el nivel más alto */
.page-transition-overlay {
z-index: 100000000 !important;
}
.main-header .logo {
letter-spacing: normal !important;
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
/* Soporte para el botón móvil "Paga Aquí" */
.nav-container .cta-button.mobile-pay-btn {
display: flex;
/* Visible por defecto en escritorio */
}
@media (max-width: 1200px) {
.nav-container {
justify-content: space-between !important;
align-items: center !important;
position: relative !important;
display: flex !important;
width: 100% !important;
padding: 0 1.5rem !important;
height: var(--navbar-height);
}
/* Ocultar enlaces de texto para evitar sobreposición */
.nav-links {
display: none !important;
}
/* Mostrar botón de menú obligatoriamente */
.mobile-menu-btn {
display: flex !important;
margin-left: auto !important;
position: relative;
z-index: 1001;
}
.nav-container .cta-button.mobile-pay-btn {
display: flex !important;
order: -1;
position: relative;
z-index: 1001;
padding: 0.5rem 0.8rem !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(55, 12, 49, 0.4) !important;
background: linear-gradient(90deg, #370c31, #5a1451);
white-space: nowrap;
height: 36px;
align-items: center;
justify-content: center;
}
/* Estilos del Logo Centrado para Móvil/Tablet */
.main-header .logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1000 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: 60px !important; /* Altura optimizada */
opacity: 1;
visibility: visible;
}
/* Logo a tamaño visible y equilibrado (30px) */
.main-header .logo .navbar-logo-img {
height: 30px !important;
min-width: 60px;
width: auto;
display: block !important;
}
/* Ocultar INICIALMENTE en el Index el logo de la navbar (GSAP lo mostrará después) */
body.index-page .main-header .logo {
opacity: 0;
visibility: hidden;
}
/* Capa de texto animada por DEBAJO de la navbar (Estrategia de Ocultado Físico) */
body.index-page .text-layer {
position: fixed !important;
pointer-events: none !important;
z-index: 500 !important; /* Detrás del fondo de la navbar */
}
/* Fondo de la barra de navegación con prioridad media */
.main-header {
z-index: 1000 !important;
}
/* Logo SVG con máxima prioridad para el relevo final */
.main-header .logo {
z-index: 1002 !important;
}
/* El logo activado desde el script (únicamente) se hace interactivo limitándolo a sus letras orgánicas */
body.index-page .hero-text {
pointer-events: none !important;
/* El contenedor externo grande no bloquea clics, solo lo hacen sus letras (vía JS) */
}
body.index-page .hero-text span,
body.index-page .hero-text .word {
pointer-events: auto !important;
cursor: pointer;
}
/* Forzar visibilidad inmediata en TODAS las páginas que no sean Index */
body:not(.index-page) .main-header .logo {
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
font-size: 3.5rem !important;
}
/* Optimizaciones de centrado para pantallas muy pequeñas */
@media (max-width: 480px) {
body .main-header .logo {
font-size: 2.2rem !important;
}
}
.mobile-menu-btn {
margin-left: auto !important;
position: relative;
z-index: 1001;
right: env(safe-area-inset-right);
/* Espacio para gestos laterales */
}
}
/* ========================================= */
/* ESTILOS DE LA SECCIÓN LÍNEA DE TIEMPO Y CONÓCENOS */
/* ========================================= */
.section-badge-conocenos {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(55, 12, 49, 0.1);
border: 1px solid rgba(55, 12, 49, 0.3);
border-radius: 50px;
margin-bottom: 1rem;
color: var(--primary-color);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-title-conocenos .highlight-text {
color: var(--primary-color);
}
/*
VISUAL TIMELINE STYLES
-----------------------
*/
/* ========================================= */
/* ESTILOS DE LÍNEA DE TIEMPO VERTICAL PREMIUM */
/* ========================================= */
.vertical-timeline-container {
position: relative;
max-width: 1200px;
margin: 80px auto;
padding: 40px 20px;
background: radial-gradient(circle at center, rgba(55, 12, 49, 0.05) 0%, transparent 70%);
}
.v-timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px; /* Aumentado ligeramente */
background: rgba(255, 255, 255, 0.12); /* Más visible */
transform: translateX(-50%);
z-index: 0;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
}
.v-timeline-progress {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 0%;
/* Animado por JS */
background: linear-gradient(to bottom, #ff2ead, #5a1451); /* Degradado más brillante */
box-shadow: 0 0 20px #ff2ead, 0 0 40px rgba(255, 46, 173, 0.4); /* Resplandor de Neón */
}
.v-timeline-items {
position: relative;
z-index: 1;
padding: 60px 0;
}
/* Resplandor de fondo flotante para robustez */
.vertical-timeline-container::before {
content: '';
position: absolute;
top: 20%;
left: 20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(55, 12, 49, 0.08) 0%, transparent 70%);
filter: blur(50px);
pointer-events: none;
z-index: -1;
}
.v-timeline-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 120px;
opacity: 0;
/* Manejado por GSAP */
}
.v-timeline-item.left {
flex-direction: row-reverse;
}
.v-timeline-item.right {
flex-direction: row;
}
.v-time-content {
width: 45%;
padding: 45px;
background: rgba(18, 18, 23, 0.8);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 40px;
position: relative;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
border-left: 4px solid rgba(55, 12, 49, 0.35);
}
.left .v-time-content {
border-left: none;
border-right: 4px solid rgba(55, 12, 49, 0.35);
}
.v-time-content:hover {
border-color: #370c31;
transform: scale(1.02) translateY(-10px);
box-shadow: 0 40px 80px rgba(55, 12, 49, 0.3);
background: rgba(22, 22, 28, 0.9);
}
/* ========================================= */
/* CONECTOR DE LÍNEA DE TIEMPO A MVV */
/* ========================================= */
.timeline-to-mvv-connector {
position: relative;
height: 200px;
width: 100%;
margin-top: -80px;
z-index: 0;
}
.connector-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: rgba(255, 255, 255, 0.05);
transform: translateX(-50%);
}
.connector-line::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: var(--connector-height, 0%);
background: linear-gradient(to bottom, var(--primary-color), transparent);
box-shadow: 0 0 15px var(--primary-color);
opacity: 0.6;
}
/* EFECTO DE ILUMINACIÓN PARA TARJETAS MVV */
.mvv-card {
transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
position: relative;
}
.mvv-card.connected {
border-color: var(--primary-color) !important;
box-shadow: 0 0 50px rgba(168, 85, 247, 0.15) !important;
transform: translateY(-10px);
}
/* Permitir que el cohete salga del contenedor sin recortes (Más seguro entre navegadores) */
.mvv-card {
overflow: visible !important;
}
.mission-icon-container {
overflow: visible !important;
z-index: 20;
}
.mvv-card.connected .mvv-icon-wrapper {
background: var(--primary-color) !important;
box-shadow: 0 0 40px var(--primary-color);
color: #fff !important;
}
.mvv-card.connected .mvv-icon-wrapper svg {
color: #fff !important;
}
.mvv-card.connected .mvv-icon-wrapper svg path,
.mvv-card.connected .mvv-icon-wrapper svg circle {
stroke: #fff !important;
}
.mvv-card.connected .mvv-icon-wrapper svg .eye-pupil,
.mvv-card.connected .mvv-icon-wrapper svg .mission-arrow-head {
fill: #370c31 !important;
}
.v-time-node {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 26px;
background: #000;
border: 3px solid #ff2ead; /* Borde más brillante */
border-radius: 50%;
z-index: 2;
box-shadow: 0 0 25px #ff2ead, 0 0 10px rgba(255, 255, 255, 0.8); /* Brillo intenso */
}
.v-time-year {
display: inline-block;
font-size: 1.3rem;
font-weight: 900;
color: #ff2ead;
/* Color brillante sugerido */
text-shadow: 0 0 10px rgba(255, 46, 173, 0.4);
/* Resplandor para visibilidad */
margin-bottom: 15px;
font-family: 'Outfit', sans-serif;
letter-spacing: 1px;
}
.v-time-content h3 {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 15px;
color: #fff;
font-family: 'Outfit', sans-serif;
}
.v-time-content p {
color: #aaa;
line-height: 1.6;
margin-bottom: 25px;
font-size: 1.05rem;
}
.v-time-btn {
background: rgba(55, 12, 49, 0.2);
border: none !important;
/* Sin contorno */
color: #fff;
padding: 10px 25px;
border-radius: 50px;
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-weight: 700;
transition: all 0.3s ease;
outline: none !important;
}
.v-time-btn:hover {
background: #5a1451;
/* Color vino más claro para hover */
color: #fff;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(55, 12, 49, 0.4);
}
/* Ajustes Móviles para Línea de Tiempo Vertical */
.visual-timeline-wrapper {
position: relative;
padding: 120px 0;
width: 100%;
max-width: 100%;
overflow-x: auto;
/* Permitir desplazamiento horizontal */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
/* Firefox */
margin-bottom: 6rem;
-webkit-mask-image: none;
/* Se eliminó la máscara para evitar cortes */
mask-image: none;
cursor: grab;
}
.visual-timeline-wrapper:active {
cursor: grabbing;
}
/* Resplandor de fondo para la línea de tiempo */
.visual-timeline-wrapper::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 200px;
background: radial-gradient(ellipse at center, rgba(55, 12, 49, 0.15) 0%, transparent 80%);
pointer-events: none;
z-index: -1;
}
.visual-timeline-wrapper::-webkit-scrollbar {
display: none;
}
.timeline-nodes-container {
display: flex;
justify-content: space-between;
align-items: center;
min-width: 3200px;
/* Expansive width for robustness */
position: relative;
padding: 0 450px;
/* Relleno masivo para evitar CUALQUIER corte, incluso al pasar el ratón */
gap: 180px;
}
/* Pista de línea punteada */
.timeline-track {
position: absolute;
top: 50%;
left: 450px;
right: 450px;
height: 4px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
transform: translateY(-50%);
z-index: 0;
overflow: hidden;
}
.timeline-track-progress {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: linear-gradient(90deg, #ff2ead, #ffffff); /* Toque blanco para brillo central */
box-shadow: 0 0 25px #ff2ead, 0 0 50px rgba(255, 46, 173, 0.6); /* Brillo expansivo */
z-index: 1;
transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Nodos Individuales */
.timeline-node {
position: relative;
z-index: 1;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline-node:hover {
transform: scale(1.1);
}
.node-circle {
width: 65px;
height: 65px;
border-radius: 50%;
background: rgba(15, 15, 20, 0.9);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 0;
color: #fff;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
z-index: 2;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 255, 255, 0.05);
}
/* Anillo de Resplandor Exterior */
.timeline-node::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85px;
height: 85px;
border-radius: 50%;
border: 1px solid rgba(168, 85, 247, 0);
transition: all 0.6s ease;
pointer-events: none;
}
.timeline-node:hover::before {
width: 140px;
height: 140px;
border-color: rgba(55, 12, 49, 0.3);
box-shadow: 0 0 30px rgba(55, 12, 49, 0.2);
}
.timeline-node .node-label-top {
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
font-size: 0.9rem;
color: var(--primary-color);
font-weight: 700;
opacity: 0;
transition: all 0.4s ease;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 2px;
}
.timeline-node:hover .node-label-top {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.timeline-node::after {
content: attr(data-year);
position: absolute;
top: 130%;
left: 50%;
transform: translateX(-50%) translateY(10px);
font-size: 1.2rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.1);
font-family: 'Outfit', sans-serif;
white-space: nowrap;
transition: all 0.4s ease;
}
.timeline-node:hover .node-circle {
width: 140px;
height: 70px;
border-radius: 35px;
font-size: 1rem;
border-color: var(--primary-color);
background: var(--primary-color);
color: #000;
box-shadow: 0 0 50px rgba(168, 85, 247, 0.5);
}
.timeline-node:hover::after {
color: #fff;
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.timeline-node.active .node-circle {
background: var(--primary-color);
border-color: var(--primary-color);
color: #000;
width: 120px;
border-radius: 30px;
font-size: 0.9rem;
box-shadow: 0 0 40px rgba(55, 12, 49, 0.4);
}
.timeline-node.active::after {
color: #fff;
opacity: 1;
}
/*
ESTILOS DE MODAL
-----------------------
*/
.timeline-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000000;
/* Muy por encima del encabezado */
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
padding: 20px;
}
.timeline-modal.active {
opacity: 1;
visibility: visible;
}
.timeline-modal-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.timeline-modal-container {
position: relative;
width: 100%;
max-width: 600px;
max-height: 85vh;
/* Altura segura para dispositivos móviles */
background: rgba(20, 20, 25, 0.98);
border: 1px solid rgba(55, 12, 49, 0.4);
border-radius: 24px;
padding: 1rem;
/* Relleno para el contenedor, el contenido tiene el suyo propio */
transform: scale(0.9) translateY(20px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8), 0 0 30px rgba(55, 12, 49, 0.1);
z-index: 2;
overflow: hidden;
/* El contenedor no se desplaza, el contenido sí */
}
.timeline-modal-scroll-area {
width: 100%;
max-height: calc(85vh - 2rem);
overflow-y: auto;
padding: 3rem 1.5rem 2rem;
-webkit-overflow-scrolling: touch;
}
/* Efecto de resplandor dentro del modal */
.timeline-modal-container::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(55, 12, 49, 0.1) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
.timeline-modal.active .timeline-modal-container {
transform: scale(1) translateY(0);
}
.timeline-modal-close {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.1);
border: none;
font-size: 1.2rem;
color: #fff;
cursor: pointer;
transition: all 0.3s;
z-index: 10;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.timeline-modal-close:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
.timeline-modal-body {
text-align: center;
}
.timeline-modal-body .timeline-panel-year {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
color: var(--primary-color);
font-family: 'Outfit', sans-serif;
font-weight: 900;
}
.timeline-modal-body .timeline-title {
font-size: 1.8rem;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.timeline-modal-body .timeline-description {
font-size: 1.1rem;
line-height: 1.6;
color: #ccc;
}
/* Sobrescritura de tarjetas de Misión, Visión y Valores (MVV) */
.mvv-grid {
margin-top: 3rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
width: 100%;
}
@media (max-width: 480px) {
.mvv-grid {
grid-template-columns: 1fr;
}
}
.mvv-grid .mvv-card {
/* Extensión de los estilos de feature-card */
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
min-height: 300px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 2.5rem;
border-radius: 16px;
transition: all 0.3s ease;
overflow: visible;
/* Crucial para el cohete volador */
}
@media (max-width: 400px) {
.mvv-grid .mvv-card {
padding: 2rem 1.2rem;
}
}
.mvv-grid .mvv-card:hover {
transform: translateY(-8px);
border-color: var(--primary-color);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}
/* Eliminar explícitamente las líneas de efecto hover de feature-card para estas tarjetas */
.mvv-grid .mvv-card::before,
.mvv-grid .mvv-card:hover::before {
display: none !important;
opacity: 0 !important;
content: none !important;
}
.mvv-icon-wrapper {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.4);
}
.mission-svg,
.vision-svg {
width: 100%;
height: 100%;
}
.eye-lid-top,
.eye-lid-bottom {
transition: d 0.2s ease;
}
.mvv-title {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #fff;
font-family: 'Outfit', sans-serif;
font-weight: 700;
}
.mvv-description {
font-size: 1rem;
color: #bbb;
line-height: 1.6;
font-size: 1rem;
}
/* ========================================= */
/* RESTAURACIÓN DE LA SECCIÓN DE ESTADÍSTICAS */
/* ========================================= */
.stats-counter-section {
padding: 2rem 1rem;
background: transparent;
color: #fff;
position: relative;
overflow: hidden;
}
.stats-particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.stats-counter-wrapper {
max-width: 1200px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;
}
.stats-counter-header {
margin-bottom: 2rem;
}
.stats-counter-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1.4rem;
background: rgba(55, 12, 49, 0.4);
/* Tono vino solicitado */
border: 1px solid rgba(255, 46, 173, 0.3);
border-radius: 50px;
margin-bottom: 1rem;
font-size: 0.9rem;
color: #ff2ead;
/* Versión más brillante solicitada para el texto */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.stats-badge-dot {
width: 8px;
height: 8px;
background: #ff2ead;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 46, 173, 0.6);
}
.stats-counter-title {
font-size: 3rem;
margin-bottom: 1rem;
background: linear-gradient(90deg, #fff, #ff2ead);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
font-weight: 900;
}
.stats-counter-description {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
max-width: 600px;
margin: 0 auto;
}
.stats-counter-grid {
display: flex !important;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 2rem;
width: 100%;
}
.stat-counter-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 2rem 1.5rem;
border-radius: 20px;
/* Restricciones de ancho ajustadas */
flex: 1;
min-width: 220px;
max-width: 300px;
/* Evitar que sea demasiado ancho */
text-align: center;
transition: all 0.3s ease;
}
.stat-counter-card:hover {
transform: translateY(-10px);
border-color: var(--primary-color);
}
.stat-counter-icon {
font-size: 3.5rem;
color: #ff2ead;
/* Tono vino brillante sólido */
margin-bottom: 1rem;
filter: drop-shadow(0 0 10px rgba(255, 46, 173, 0.3));
}
.stat-counter-number {
font-size: 3rem;
font-weight: 700;
color: #fff;
margin-bottom: 0.5rem;
/* font-family: 'Tesla'; Removed custom font */
}
.stat-counter-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Carrusel de Aliados - Configuración Base */
.companies-carousel-section {
padding: 2rem 0;
/* Sin padding lateral en PC */
background: transparent !important;
/* Fondo quitado en PC */
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
border-radius: 0 !important;
margin: 2rem auto !important;
width: 100% !important;
overflow: hidden;
position: relative;
box-shadow: none !important;
/* Quitar sombra en PC */
cursor: grab;
user-select: none;
}
.companies-carousel-section:active {
cursor: grabbing;
}
/* Solo en móvil aplicamos el fondo oscuro con glassmorphism de nuevo */
@media (max-width: 768px) {
.companies-carousel-section {
background: transparent !important;
background-color: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
margin: 0.5rem 0 !important;
padding: 1rem 0 !important;
}
}
.carousel-container {
width: 100%;
margin: 0 auto;
}
.carousel-header {
max-width: 1200px;
margin: 0 auto 3.5rem;
padding: 0 2rem;
text-align: center;
}
.carousel-title {
font-size: 3.2rem; /* Slightly larger for premium feel */
font-weight: 900;
text-transform: uppercase;
background: linear-gradient(90deg, #fff, #ff2ead);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.carousel-track-wrapper {
position: relative;
width: 100%;
overflow: hidden;
padding: 3rem 0;
/* Máscara de desvanecimiento más suave en los extremos */
mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.carousel-track {
display: flex;
gap: 4rem;
width: max-content;
will-change: transform;
}
.carousel-track:hover {
animation-play-state: paused;
}
.carousel-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-logo {
height: 160px;
width: auto;
max-width: 320px;
object-fit: contain;
filter: brightness(0) invert(1);
/* Forzar logos a blanco puro */
transition: all 0.3s ease;
opacity: 0.8;
}
/* CORPESV mantiene el gris estándar */
img[alt="CORPESV"].carousel-logo {
filter: grayscale(1) brightness(1.2) contrast(1.1) !important;
opacity: 0.8 !important;
}
/* Sumate: Gris pero mucho más brillante/blanquecino */
img[alt="Sumate"].carousel-logo {
filter: grayscale(1) brightness(1.7) contrast(1.1) !important;
opacity: 0.95 !important;
}
/* Americana destaca con mayor tamaño y blanco puro */
img[alt="Americana"].carousel-logo {
height: 180px !important;
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Fundetec: Más visible y blanco */
img[alt="Fundetec"].carousel-logo {
height: 175px !important;
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Cotradecun: Más grande y blanco */
img[alt="Cotradecun"].carousel-logo {
height: 200px !important;
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* Lonja e InterAmericana: Más visibles y blancos */
img[alt="Lonja"].carousel-logo,
img[alt="Interamericana"].carousel-logo {
height: 180px !important;
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* REGLA MAESTRA DE INTERACCIÓN: Restaura color original en hover/clic/touch */
.carousel-track .carousel-logo:hover,
.carousel-track .carousel-logo:active,
.carousel-track .carousel-logo.active,
img[alt].carousel-logo:hover,
img[alt].carousel-logo:active,
img[alt].carousel-logo.active {
filter: none !important;
-webkit-filter: none !important;
opacity: 1 !important;
transform: scale(1.1);
z-index: 10;
}
/* La animación se maneja ahora con GSAP para permitir arrastre manual */
/* ========================================= */
/* RESTAURACIÓN DE LA SECCIÓN DE TESTIMONIOS */
/* ==========================================
TESTIMONIOS DOBLE CARRUSEL (v8.65)
========================================== */
/* RESTAURACIÓN DE LA SECCIÓN DE TESTIMONIOS (v12.50 - Diseño Premium) */
.testimonials-marquee-section {
padding: 2rem 0;
background: transparent;
overflow: hidden;
position: relative;
/* Desvanecimiento eliminado para máxima visibilidad */
}
.marquee-header-container {
margin-bottom: 2rem;
}
.marquee-wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem 0;
}
.marquee-row {
display: flex;
width: 100%;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.marquee-content {
display: flex;
/* Espacio eliminado para asegurar un bucle continuo con desplazamiento del 50% */
white-space: nowrap;
will-change: transform;
}
/* Animaciones de Fila - RALENTIZADAS (v8.85) */
.marquee-row-left .marquee-content {
animation: scroll-left 70s linear infinite;
}
.marquee-row-right .marquee-content {
animation: scroll-right 70s linear infinite;
}
.marquee-row:hover .marquee-content {
animation-play-state: paused;
}
@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes scroll-right {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
/* Estilos de Tarjeta - Oscuro Premium */
/* Estilos de Tarjeta - Glassmorphism Mejorado (v12.50) */
.testimonial-marquee-card {
flex: 0 0 340px; /* Reducido para un diseño más compacto */
background: rgba(15, 15, 20, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 20px;
padding: 1.5rem; /* Menos relleno para evitar espacio muerto */
display: flex;
flex-direction: column;
gap: 0.8rem; /* Espaciado interno más ajustado */
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
white-space: normal;
margin-right: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
will-change: transform, opacity;
}
.testimonial-marquee-card:hover {
background: rgba(55, 12, 49, 0.15);
/* Sutil toque vino en hover */
border-color: rgba(255, 46, 173, 0.4);
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 40px rgba(55, 12, 49, 0.3);
}
.testimonial-marquee-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 24px;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent, rgba(55, 12, 49, 0.2));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.tm-card-header {
display: flex;
align-items: center;
gap: 1rem;
}
.tm-image {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--primary-color);
}
.tm-info h4 {
font-size: 1rem;
color: #fff;
margin: 0;
}
.tm-info span {
font-size: 0.8rem;
color: #888;
}
.tm-stars {
color: #fbbf24;
font-size: 0.9rem;
letter-spacing: 2px;
filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.3));
}
.tm-text {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
font-style: italic;
margin: 0.5rem 0; /* Espaciado ajustado */
}
.tm-footer {
display: flex;
justify-content: flex-end;
}
.tm-badge {
font-size: 0.75rem;
padding: 0.4rem 1.2rem;
background: rgba(55, 12, 49, 0.6);
/* Color vino solicitado */
color: #fff;
border-radius: 50px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid rgba(255, 46, 173, 0.2);
}
@media (max-width: 768px) {
.testimonial-marquee-card {
flex: 0 0 320px;
padding: 1.4rem;
margin-right: 1.2rem;
}
.testimonials-marquee-section {
padding: 6rem 0;
}
}
/* Micro-interacciones: Botones Globales */
.cta-button,
.full-width-button,
[role="button"] {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.cta-button:hover,
.full-width-button:hover {
transform: scale(1.05);
box-shadow: 0 0 25px rgba(55, 12, 49, 0.4);
letter-spacing: 0.5px;
}
.cta-button:active {
transform: scale(0.95);
}
.profile-name-minimal {
font-size: 1.2rem;
color: var(--primary-color);
font-family: var(--font-main);
font-weight: 700;
margin-bottom: 0.2rem;
}
.profile-role-minimal {
font-size: 0.9rem;
color: #888;
}
.carousel-nav-minimal {
display: flex;
justify-content: space-between;
position: absolute;
top: 50%;
left: -20px;
right: -20px;
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}
.carousel-btn-minimal {
pointer-events: auto;
background: rgba(20, 20, 20, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-btn-minimal:hover {
background: var(--primary-color);
transform: scale(1.1);
}
.carousel-dots-minimal {
display: flex;
justify-content: center;
gap: 0.8rem;
margin-top: 2rem;
}
.dot-minimal {
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
}
.dot-minimal.active {
background: var(--primary-color);
transform: scale(1.3);
}
/* Mobile adjustments (combined) */
/* ========================================= */
/* ESTILOS DE FORMULARIO DE CONTACTO PREMIUM */
/* ========================================= */
.contact-section {
padding: 40px 0;
position: relative;
background: transparent;
}
.contact-card {
max-width: 650px;
margin: 0 auto;
padding: 60px;
background: rgba(15, 15, 20, 0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 40px;
text-align: center;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
position: relative;
overflow: hidden;
}
.contact-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(168, 85, 247, 0.05) 0%, transparent 60%);
pointer-events: none;
z-index: -1;
}
.contact-card h2 {
font-size: 2.5rem;
font-family: 'Outfit', sans-serif;
font-weight: 900;
margin-bottom: 15px;
color: #fff;
letter-spacing: -1px;
}
.contact-card p {
color: #888;
font-size: 1.1rem;
margin-bottom: 40px;
line-height: 1.6;
}
.etc-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.input-group {
position: relative;
width: 100%;
}
.input-group input,
.input-group select {
width: 100%;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 18px 25px;
color: #fff;
font-family: 'Outfit', sans-serif;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.input-group input:focus,
.input-group select:focus {
border-color: var(--primary-color);
background: rgba(168, 85, 247, 0.05);
box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}
.input-group select {
appearance: none;
cursor: pointer;
}
.input-group select option {
background: #111;
color: #fff;
}
.input-group::after {
content: '\f078';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
color: #555;
pointer-events: none;
font-size: 0.8rem;
}
/* Estilos personalizados para select sin flecha para inputs */
.input-group:not(:has(select))::after {
display: none;
}
.contact-card .cta-button {
margin-top: 10px;
padding: 20px;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.section-subtitle {
font-size: 1.2rem;
color: #ccc;
max-width: 700px;
margin: 1rem auto 0;
}
/* Cuadrícula de Accesos Directos */
.shortcuts-section {
padding: 2rem 0 4rem;
}
.shortcuts-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
width: 100%;
}
.shortcuts-grid .shortcut-card {
flex: 1 1 calc(25% - 1.5rem);
max-width: 280px;
min-width: 240px;
}
@media (max-width: 992px) {
.shortcuts-grid .shortcut-card {
flex: 1 1 calc(50% - 1rem);
max-width: 350px;
}
}
@media (max-width: 580px) {
.shortcuts-grid .shortcut-card {
flex: 1 1 100%;
max-width: 100%;
}
}
.shortcut-card {
position: relative;
height: 260px;
border-radius: 20px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
background: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.shortcut-image-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.shortcut-image-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.4) saturate(0.8);
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.shortcut-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
z-index: 2;
display: block !important;
}
.shortcut-card:hover .shortcut-image-bg img {
transform: scale(1.05);
/* Escala reducida */
filter: brightness(0.4) saturate(0.8);
/* Mantener brillo constante (OSCURO) */
}
.shortcut-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.1);
/* Sin resplandor púrpura */
box-shadow: none;
/* Sin resplandor de sombra */
}
.shortcut-card:nth-child(1),
.shortcut-card:nth-child(2),
.shortcut-card:nth-child(3),
.shortcut-card:nth-child(4) {
background: #000 !important;
}
.shortcut-card:hover .shortcut-icon,
.shortcut-card:hover h3 {
color: #fff !important;
text-shadow: none !important;
transform: none !important;
}
.shortcut-card:hover::before,
.shortcut-card:hover::after {
display: none !important;
}
/* Lógica redundante de accesos directos eliminada */
.shortcut-content {
position: relative;
padding: 2rem;
z-index: 3;
text-align: center;
transition: all 0.4s ease;
display: flex;
flex-direction: column;
justify-content: center;
/* Centrar verticalmente */
align-items: center;
gap: 0.75rem;
width: 100%;
height: 100%;
/* Tomar toda la altura de la tarjeta para equilibrio */
}
.shortcut-content .shortcut-icon {
font-size: 2.5rem;
opacity: 0.8;
transition: all 0.4s ease;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 60px;
/* Altura fija para el área del icono */
margin-bottom: 0.5rem;
}
.shortcut-card:hover .shortcut-content .shortcut-icon {
opacity: 1;
color: #ffffff;
text-shadow: none !important;
/* Sombra eliminada */
transform: translateY(-2px);
/* Elevación sutil simple */
}
.shortcut-card:hover .shortcut-content {
background: transparent !important;
/* Cuadro de luz eliminado */
border-radius: 0;
}
.shortcut-content h3 {
font-size: 1.25rem;
font-weight: 800;
color: #fff;
margin: 0;
line-height: 1.3;
height: 3.2em;
/* Altura fija para 2 líneas de texto */
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.4s ease;
}
.shortcut-card:hover h3 {
color: #ffffff;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.15);
letter-spacing: 3px;
}
/* Configuración de Animación */
.mask-line {
overflow: hidden;
display: block;
}
.mask-text {
display: block;
will-change: transform, opacity;
}
.full-width {
width: 100% !important;
}
/* Secciones Detalladas de Programas */
.program-category-section {
padding: 8rem 0;
border-top: none;
background: transparent;
position: relative;
}
.category-title,
.section-header h2,
.section-title-conocenos {
font-size: clamp(2rem, 6vw, 3.5rem) !important;
margin-bottom: 2.5rem;
color: #ffffff !important;
font-weight: 950;
line-height: 1.1;
text-transform: uppercase;
letter-spacing: -0.02em;
font-family: var(--font-main);
background: linear-gradient(135deg, #ff2ead 0%, #ffffff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
text-align: center;
opacity: 1 !important;
transform: none !important;
}
.program-category-section.alt-bg {
background: rgba(255, 255, 255, 0.015);
}
.section-header-conocenos {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 4rem;
}
.section-badge-conocenos {
display: inline-flex;
align-items: center;
gap: 0.8rem;
padding: 0.6rem 1.4rem;
background: rgba(55, 12, 49, 0.4);
/* Color vino solicitado */
border: 1px solid rgba(85, 20, 75, 0.6);
border-radius: 50px;
color: #fff;
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(55, 12, 49, 0.3);
}
.section-badge-conocenos i {
font-size: 1rem;
color: #ff2ead;
}
.section-description-conocenos {
color: #ffffff !important;
font-size: 1.1rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
opacity: 0.95 !important;
font-weight: 400;
}
.section-badge-conocenos:hover {
background: rgba(55, 12, 49, 0.2);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(55, 12, 49, 0.2);
}
.category-header,
.section-header {
text-align: center;
margin-bottom: 3.5rem;
}
.category-desc {
color: #aaa;
max-width: 750px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.7;
}
.programs-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2.5rem;
}
.programs-grid .program-card {
flex: 0 0 calc(33.333% - 1.68rem);
max-width: 380px;
min-width: 280px;
}
@media (max-width: 900px) {
.programs-grid .program-card {
flex: 0 0 calc(50% - 1.25rem);
max-width: 400px;
min-width: 260px;
}
}
@media (max-width: 600px) {
.programs-grid .program-card {
flex: 0 0 100%;
max-width: 420px;
min-width: unset;
}
}
.program-card {
position: relative;
height: 480px;
background: transparent;
perspective: 1000px;
border: none;
overflow: visible;
opacity: 1 !important;
mix-blend-mode: normal !important;
z-index: 10;
}
/* Efecto Spotlight al pasar el ratón eliminado */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
cursor: pointer;
}
/* Manejado por GSAP */
.program-card.is-flipped .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.flip-card-front {
background: #000 !important;
/* Fondo negro sólido para evitar transparencias */
z-index: 2;
}
.flip-card-back {
background: #0a0a0a;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
z-index: 1;
}
.back-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(0.4) blur(15px);
/* Más visible pero bien difuminado */
opacity: 1 !important;
/* Cero transparencia por detrás */
z-index: -1;
}
.back-content {
position: relative;
z-index: 5;
text-align: center;
padding: 0 1rem;
}
.back-content h3 {
font-size: 1.75rem;
color: #fff;
margin-bottom: 1.2rem;
font-weight: 800;
text-transform: uppercase;
line-height: 1.2;
letter-spacing: 0.5px;
}
.program-desc {
color: #fff;
font-size: 1.1rem;
line-height: 1.5;
max-width: 95%;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
font-family: 'Outfit', sans-serif;
font-weight: 400;
opacity: 1;
}
.program-card:hover .flip-card-front,
.program-card:hover .flip-card-back {
border-color: var(--primary-color);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(168, 85, 247, 0.15);
}
.program-image-container {
position: absolute;
top: -10%;
/* Altura extra para efecto parallax */
left: 0;
width: 100%;
height: 120%;
z-index: 1;
pointer-events: none;
}
.program-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(1.1) saturate(1.1) !important;
opacity: 1 !important;
/* Totalmente sólido y nítido */
visibility: visible !important;
z-index: 50 !important;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.program-card:hover .program-image-container img {
filter: brightness(1.1) saturate(1.1);
/* Efecto de iluminación */
transform: scale(1.05);
}
.missing-image {
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
}
.missing-image::after {
content: 'Foto Pendiente';
color: rgba(255, 255, 255, 0.2);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.missing-image img {
display: none;
}
.program-info {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 4rem 2rem 2rem;
z-index: 2;
background: -webkit-linear-gradient(bottom,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0.8) 40%,
rgba(10, 10, 10, 0) 100%);
background: linear-gradient(to top,
rgba(10, 10, 10, 1) 0%,
rgba(10, 10, 10, 0.8) 40%,
transparent 100%);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.program-info h3 {
font-size: 1.25rem;
color: #fff;
margin-bottom: 1.2rem;
line-height: 1.3;
font-weight: 700;
font-family: 'Outfit', sans-serif;
}
.whatsapp-program-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
/* Aumentado de 44px */
height: 56px;
/* Aumentado de 44px */
background: rgba(255, 255, 255, 0.05);
color: white;
border-radius: 50%;
font-size: 1.8rem;
/* Aumentado de 1.4rem */
text-decoration: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.whatsapp-program-btn:hover {
transform: scale(1.15) rotate(10deg);
background: #25D366;
border-color: #25D366;
color: white;
}
@media (min-width: 1201px) {
.program-card {
background: transparent !important;
box-shadow: none !important;
}
.program-card .flip-card-front {
background: transparent !important;
}
.program-image-container img {
filter: none !important;
opacity: 1 !important;
}
.program-info {
background: -webkit-linear-gradient(bottom,
rgba(10, 10, 10, 0.96) 0%,
rgba(10, 10, 10, 0.75) 35%,
rgba(10, 10, 10, 0.45) 55%,
color-stop(75%, rgba(10, 10, 10, 0)));
background: linear-gradient(to top,
rgba(10, 10, 10, 0.96) 0%,
rgba(10, 10, 10, 0.75) 35%,
rgba(10, 10, 10, 0.45) 55%,
transparent 75%);
}
.program-info::before,
.program-info::after {
content: none !important;
}
}
.whatsapp-program-btn:hover {
transform: scale(1.1) rotate(15deg);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}
/* Adaptabilidad Móvil */
/* Sección de Preguntas Frecuentes - Acordeón Premium Glassmorphism */
.faq-section {
padding: 8rem 0;
position: relative;
background: transparent;
}
.container-small {
max-width: 850px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.faq-accordion {
margin-top: 3rem;
text-align: left;
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
.faq-category-wrapper {
margin-top: 4rem;
}
.faq-category-layout {
display: grid;
grid-template-columns: 1fr 350px;
gap: 3rem;
align-items: start;
}
@media (max-width: 1200px) {
.faq-category-layout {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.faq-image-container {
position: relative !important;
top: 0 !important;
order: 2 !important;
/* Poner la imagen debajo de las preguntas en móvil */
max-width: 300px !important;
margin: 0 auto !important;
}
.faq-category-wrapper {
margin-top: 4rem !important;
}
}
.category-title {
margin-bottom: 2rem !important;
background: linear-gradient(to right, var(--primary-color), #fff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.8rem !important;
font-weight: 700 !important;
letter-spacing: 1px;
}
.faq-image-container {
position: sticky;
top: 100px;
border-radius: 0;
overflow: visible;
border: none;
box-shadow: none;
background: transparent;
backdrop-filter: none;
transition: all 0.5s ease;
}
.faq-image-container:hover {
transform: translateY(-5px);
}
.faq-image-container img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
mix-blend-mode: lighten;
/* Elimina cualquier fondo negro del archivo de imagen */
opacity: 1;
filter: none !important;
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
/* Máscara de desvanecimiento de doble eje para asegurar bordes suaves */
-webkit-mask-image: linear-gradient(to bottom,
black 0%,
black 70%,
rgba(0, 0, 0, 0.4) 90%,
transparent 100%);
mask-image: linear-gradient(to bottom,
black 0%,
black 70%,
rgba(0, 0, 0, 0.4) 90%,
transparent 100%);
}
.faq-image-container:hover img {
transform: scale(1.05);
}
.faq-item {
background: rgba(15, 12, 25, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
margin-bottom: 1.2rem;
}
.faq-item:hover {
border-color: rgba(55, 12, 49, 0.4);
background: rgba(168, 85, 247, 0.03);
transform: translateY(-4px);
}
.faq-question {
padding: 2rem 2.5rem;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.faq-question h3 {
font-size: 1.25rem;
font-weight: 600;
color: #fff;
margin: 0;
font-family: var(--font-main);
line-height: 1.4;
}
.faq-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(55, 12, 49, 0.1);
color: var(--primary-color);
transition: all 0.4s ease;
border: 1px solid rgba(55, 12, 49, 0.2);
flex-shrink: 0;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer p {
padding: 0 2.5rem 2.2rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
margin: 0;
font-size: 1.05rem;
}
.faq-item.active {
border-color: rgba(168, 85, 247, 0.6);
background: rgba(168, 85, 247, 0.08);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.faq-item.active .faq-answer {
max-height: 600px;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
background: var(--primary-color);
color: #fff;
border-color: transparent;
}
/* ========================================= */
/* RESPONSIVE STYLES FOR ADDITIONS */
/* ========================================= */
@media (max-width: 1200px) {
.stats-counter-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.shortcuts-grid {
grid-template-columns: 1fr !important;
}
.category-title {
font-size: 2.2rem !important;
}
}
@media (max-width: 768px) {
.v-timeline-line {
left: 30px !important;
}
.v-timeline-item {
flex-direction: row !important;
justify-content: flex-start !important;
padding-left: 60px !important;
margin-bottom: 60px !important;
}
.v-time-content {
width: 100% !important;
padding: 24px !important;
border-radius: 25px !important;
}
.v-time-node {
left: 28px !important;
width: 16px !important;
height: 16px !important;
}
.stats-counter-grid {
grid-template-columns: 1fr !important;
}
.testimonials-minimal {
padding: 4rem 1.5rem !important;
}
.carousel-nav-minimal {
display: flex !important;
width: calc(100% + 1rem) !important;
left: -0.5rem !important;
justify-content: space-between;
pointer-events: none;
}
.carousel-btn-minimal {
width: 36px !important;
height: 36px !important;
background: rgba(139, 58, 126, 0.2) !important;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
pointer-events: auto;
}
}
@media (max-width: 480px) {
.v-time-content h3 {
font-size: 1.4rem !important;
}
.contact-card {
padding: 30px 20px !important;
border-radius: 25px !important;
}
/* Carousel Adjustment for Mobile */
.carousel-logo {
height: 80px !important;
/* Reduce logo size on small screens */
max-width: 180px !important;
}
.carousel-track {
gap: 2rem !important;
/* Reduce gap between logos */
}
}
/* ========================================= */
/* REFACTORIZACIÓN DE ANIMACIÓN HERO (2025) - AÑADIDO */
/* ========================================= */
.scroll-container {
height: 100vh;
/* Asegurar altura completa para el fijado (pinning) */
}
.text-layer {
position: fixed !important;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 99999998 !important;
/* Máxima prioridad: Por encima del Navbar incluso en móvil (9.9M) */
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.hero-text {
font-family: var(--font-logo);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
line-height: 1;
/* Optimized clamp:
Min 1.2rem,
Target 6.5vw (smaller than 8vw to prevent horizontal scroll),
Max 5.5rem (slightly smaller for elegance) */
font-size: clamp(1.8rem, 6.5vw, 5.5rem);
white-space: nowrap;
/* ajustamos el espaciado entre palabras para que no aparezcan tan separadas en PC */
gap: 0.8rem;
/* reducción ligera de espacio entre caracteres para una apariencia más compacta */
letter-spacing: -0.02em;
width: 100%;
max-width: 95vw;
/* Margen de seguridad para evitar recortes en los bordes */
text-align: center;
flex-wrap: nowrap !important;
}
.hero-text .word {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.hero-text .letter-e,
.hero-text .letter-t,
.hero-text .letter-c {
display: inline-block;
flex-shrink: 0;
}
.hero-text .rest {
display: inline-block;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
transform-origin: left center;
min-width: 0 !important;
width: auto;
opacity: 1;
visibility: visible;
}
/* OPTIMIZACIONES PARA TABLET Y MÓVIL (Activa la animación y corrige el diseño para evitar solapamientos hasta 1200px) */
@media (max-width: 1200px) {
.text-layer {
display: flex !important;
}
.scroll-container {
height: 100vh;
min-height: 100vh;
z-index: 5;
/* Garantiza que el hero pinado por GSAP permanezca encima de secciones posteriores (stats, carousel, etc.) */
position: relative;
}
.hero-text {
/* Tamaño ajustado para asegurar que "EMPRENDE TU CARRERA" quepa en iPad e inferiores */
font-size: clamp(1.1rem, 5.8vw, 3rem);
gap: 0.8vw;
letter-spacing: -0.02em;
width: 100%;
padding: 0 4vw;
box-sizing: border-box;
}
/* Títulos de Políticas en Móvil/Tablet (v11.30) */
.directory-hero h1,
.directory-hero .mask-text {
font-size: clamp(1.1rem, 6.8vw, 2.2rem) !important;
/* Tamaño de fuente más seguro */
word-break: keep-all !important;
overflow-wrap: normal !important;
white-space: normal !important;
padding: 0 5px !important;
box-sizing: border-box !important;
text-align: center;
line-height: 1.1 !important;
width: 100% !important;
display: block !important;
}
.directory-hero .container {
padding: 4rem 15px !important;
/* Dar más espacio al texto */
}
.policy-card h3 {
font-size: 0.9rem !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
}
/* ========================================= */
/* SECCIÓN DE POLÍTICAS (v5.93) */
/* ========================================= */
.policies-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
margin: 4rem 0;
}
@media (max-width: 900px) {
.policies-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.policy-card {
padding: 3rem 1.5rem !important;
min-height: auto !important;
}
.policy-icon {
font-size: 3.5rem !important;
}
.policy-card h3 {
font-size: 1.2rem !important;
}
}
.policy-card {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 5rem 3rem;
min-height: 320px;
background: rgba(168, 85, 247, 0.03);
border: 1px solid rgba(55, 12, 49, 0.1);
border-radius: 20px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.policy-card:hover {
transform: translateY(-15px);
background: rgba(168, 85, 247, 0.08);
border-color: rgba(55, 12, 49, 0.4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.policy-icon {
font-size: 5rem;
/* Increased heavily */
margin-bottom: 2rem;
color: #ff2ead;
background: linear-gradient(135deg, #a855f7, #ff2ead);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 15px rgba(255, 46, 173, 0.4));
transition: transform 0.4s ease;
}
.policy-card:hover .policy-icon {
transform: scale(1.1) rotate(5deg);
}
.policy-card h3 {
color: #ffffff;
font-size: 1.5rem;
font-family: var(--font-main);
font-weight: 800;
line-height: 1.4;
transition: color 0.3s ease;
}
.policy-card:hover h3 {
color: var(--primary-color);
}
/* Diseño de Contenido de Políticas - DISEÑO DIVIDIDO PREMIUM */
.policy-content-container {
max-width: 1200px;
margin: 4rem auto;
padding: 0;
background: transparent;
border: none;
backdrop-filter: none;
}
.policy-row {
display: grid;
grid-template-columns: 350px 1fr;
gap: 4rem;
margin-bottom: 6rem;
padding: 2rem 0;
border-top: 1px solid rgba(55, 12, 49, 0.1);
}
.policy-row:first-child {
border-top: none;
}
.policy-header h2 {
color: #fff;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
position: sticky;
top: 120px;
}
.policy-header h2 span {
color: var(--primary-color);
display: block;
font-size: 1.5rem;
margin-top: 0.5rem;
opacity: 0.6;
}
.policy-body {
display: flex;
flex-direction: column;
gap: 3rem;
}
.policy-intro {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 2rem;
font-weight: 500;
}
.policy-item {
margin-bottom: 1rem;
}
.policy-item h3 {
color: #fff;
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: var(--font-main);
}
.policy-item p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
font-size: 1.1rem;
margin: 0;
}
@media (max-width: 1200px) {
.policy-row {
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 4rem;
}
.policy-header h2 {
position: static;
font-size: 2rem;
}
}
@media (max-width: 768px) {
.policy-content-container {
padding: 0 1.5rem;
}
}
/* ========================================= */
/* TÍTULOS Y ENCABEZADOS MEJORADOS (v6.19) */
/* ========================================= */
.directory-hero h1,
.directory-hero .mask-text {
font-size: clamp(3rem, 10vw, 6rem);
/* Se eliminó !important para permitir sobrescrituras en móviles */
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.04em;
text-transform: uppercase;
/* Degradado Premium para el Título */
background: linear-gradient(to bottom, #ffffff 30%, rgba(255, 255, 255, 0.7) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 2rem !important;
font-family: var(--font-main);
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: block;
}
.directory-hero .container {
padding: 6rem 2rem !important;
}
.directory-hero .section-tagline {
font-size: 1.4rem !important;
opacity: 0.8 !important;
max-width: 800px !important;
margin: 0 auto !important;
}
/* Títulos de Secciones Internas */
.category-title {
letter-spacing: -0.03em;
/* Estilos consolidados arriba */
}
@media (max-width: 768px) {
.directory-hero h1,
.directory-hero h1.mask-text {
font-size: clamp(2.5rem, 12vw, 4rem) !important;
}
.category-title,
.section-title-conocenos h2,
.section-header h2 {
font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
}
}
@media (max-width: 480px) {
.category-title,
.section-title-conocenos h2 {
font-size: 1.8rem !important;
}
}
/* ========================================= */
/* ESTILOS DE LA PÁGINA PQRS - VISUALES AVANZADOS */
/* ========================================= */
.pqrs-page {
position: relative;
}
/* 1. Mejoras del Hero */
.hero-bg-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
filter: blur(100px);
z-index: 1;
pointer-events: none;
}
.bounce {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* 2. Tarjeta de Introducción */
.pqrs-intro-card {
display: flex;
background: rgba(18, 18, 23, 0.6);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 40px;
padding: 4rem;
gap: 4rem;
align-items: center;
position: relative;
overflow: hidden;
}
.pqrs-intro-content {
flex: 1;
}
.pqrs-tag {
color: var(--primary-color);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 1.5rem;
}
.pqrs-features-mini {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem 0;
}
.p-mini-item {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
}
.p-mini-item i {
color: var(--primary-color);
}
.pqrs-intro-visual {
flex: 0.8;
position: relative;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.floating-icons-container i {
position: absolute;
font-size: 2.5rem;
color: var(--primary-color);
opacity: 0.4;
filter: drop-shadow(0 0 10px var(--primary-color));
}
.float-1 {
top: 10%;
left: 10%;
animation: float 6s infinite ease-in-out;
}
.float-2 {
bottom: 20%;
right: 10%;
animation: float 8s infinite ease-in-out reverse;
}
.float-3 {
top: 50%;
right: 30%;
animation: float 7s infinite ease-in-out 1s;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-30px) rotate(10deg);
}
}
.glass-mockup {
width: 250px;
height: 350px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.mockup-line {
height: 8px;
width: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.mockup-line.short {
width: 60%;
}
.mockup-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-color);
margin-top: auto;
opacity: 0.8;
}
/* ==========================================
Efecto 'Luma Hover' (Cursor Follow Glow) - v24.60
========================================== */
.cta-button,
.wizard-btn,
#restart-pqrs-btn,
.mobile-pay-btn,
.cta-button.outline {
position: relative !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
z-index: 1;
}
.back-to-top {
position: fixed !important;
bottom: 100px !important;
right: 30px !important;
left: auto !important;
/* Forzar que no esté a la izquierda */
width: 50px !important;
height: 50px !important;
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
z-index: 9989 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
opacity: 0;
pointer-events: none;
}
/* Base Hover: Elevación y Sombra Soft */
.cta-button:hover,
.wizard-btn:hover,
.floating-cta:hover,
.back-to-top:hover,
#restart-pqrs-btn:hover,
.mobile-pay-btn:hover {
transform: translateY(-4px) scale(1.02) !important;
box-shadow: 0 15px 35px rgba(55, 12, 49, 0.4) !important;
}
@media (max-width: 768px) {
.back-to-top {
right: 15px !important;
bottom: 85px !important;
width: 45px !important;
height: 45px !important;
}
.float-whatsapp {
right: 15px !important;
bottom: 20px !important;
width: 45px !important;
height: 45px !important;
font-size: 25px !important;
}
}
/* Capa de resplandor 'Luma' mejorada */
.cta-button::before,
.wizard-btn::before,
.floating-cta::before,
.back-to-top::before,
#restart-pqrs-btn::before,
.mobile-pay-btn::before {
content: '';
position: absolute;
inset: -50%;
/* Más grande para que el gradiente sea suave */
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
rgba(255, 46, 173, 0.35) 0%,
rgba(55, 12, 49, 0.2) 40%,
transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
z-index: 1;
}
/* Solo para botones con fondo sólido (para no arruinar el degradado base) */
.cta-button:not(.outline)::before,
.floating-cta::before {
background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
rgba(255, 255, 255, 0.25) 0%,
transparent 75%);
}
.cta-button:hover::before,
.wizard-btn:hover::before,
.floating-cta:hover::before,
.back-to-top:hover::before,
#restart-pqrs-btn:hover::before,
.mobile-pay-btn:hover::before {
opacity: 1;
}
/* Proteger contenidos */
.cta-button span,
.cta-button i,
.wizard-btn span,
.wizard-btn i,
.floating-cta span,
.floating-cta i {
position: relative;
z-index: 2;
}
/* 3. Cuadrícula de Pasos Moderna */
.steps-new-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
margin-top: 4rem;
}
.step-new-card {
background: rgba(25, 25, 30, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 30px;
padding: 3rem;
position: relative;
transition: all 0.4s ease;
}
.step-new-card:hover {
background: rgba(168, 85, 247, 0.03);
border-color: var(--step-color);
transform: translateY(-10px);
}
.step-number-bg {
position: absolute;
top: -20px;
left: -20px;
font-size: 6rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.03);
line-height: 1;
pointer-events: none;
font-family: 'Outfit', sans-serif;
}
.step-icon-wrap {
width: 70px;
height: 70px;
background: #ffffff;
/* Fondo blanco para resaltar el icono oscuro */
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #370c31 !important;
/* El color oscuro solicitado */
margin-bottom: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.4);
/* Glow blanco */
border: 2px solid #370c31;
position: relative;
z-index: 2;
}
.step-new-card h3,
.step-new-card p {
position: relative;
z-index: 2;
/* Contenido por encima de los números inicialmente */
}
.step-number-bg {
position: absolute;
top: 0;
left: 0;
font-size: 3.5rem;
font-weight: 900;
color: #ff2ead !important;
/* Forzar el rosa brillante en todos, incluido el 03 */
line-height: 1;
padding: 10px;
pointer-events: none;
font-family: 'Outfit', sans-serif;
z-index: 10;
transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
opacity: 1;
/* Totalmente visible cuando está al frente */
text-shadow: 0 0 20px rgba(255, 46, 173, 0.8), 0 0 10px rgba(255, 46, 173, 0.4);
/* Brillo rosa intenso */
}
.step-new-card:hover .step-number-bg,
.step-new-card.active .step-number-bg {
z-index: 10;
/* Mantener al frente */
opacity: 0.8;
/* Ligeramente más suave pero visible */
transform: scale(0.9) translate(10px, 10px);
color: #ffffff;
}
.step-connector {
position: absolute;
top: 50%;
right: -1.5rem;
width: 3rem;
height: 2px;
background: linear-gradient(90deg, var(--step-color), transparent);
opacity: 0.2;
z-index: 1;
}
/* 4. Cuadrícula Visual del Glosario */
.glossary-visual-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.glossary-card {
background: rgba(15, 15, 20, 0.8);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 2.5rem;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.glossary-card:hover,
.glossary-card.active {
border-color: var(--primary-color);
background: linear-gradient(to bottom, rgba(168, 85, 247, 0.05), transparent);
}
.g-card-icon {
font-size: 3.5rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
opacity: 1;
/* Aumentado de 0.8 a 1 */
filter: drop-shadow(0 0 10px rgba(255, 46, 173, 0.4));
/* Añadido resplandor */
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glossary-card:hover .g-card-icon,
.glossary-card.active .g-card-icon {
animation: iconJump 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 1;
color: #fff;
}
@keyframes iconJump {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-20px) scale(1.15) rotate(5deg);
}
}
.g-card-title {
font-weight: 900;
font-size: 1.2rem;
letter-spacing: 2px;
margin-bottom: 1rem;
color: #fff;
}
.g-card-tag {
display: inline-block;
margin-top: 1.5rem;
padding: 0.3rem 0.8rem;
background: rgba(55, 12, 49, 0.1);
border: 1px solid rgba(55, 12, 49, 0.2);
border-radius: 50px;
font-size: 0.7rem;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
}
/* 5. Tarjeta CTA Premium */
.premium-cta-card {
position: relative;
background: #000;
border-radius: 40px;
padding: 6rem;
text-align: center;
overflow: hidden;
border: 1px solid rgba(55, 12, 49, 0.3);
}
.cta-glow-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, rgba(55, 12, 49, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.cta-icon-lg {
font-size: 4rem;
color: var(--primary-color);
margin-bottom: 2rem;
animation: pulse-glow 2s infinite;
}
@keyframes pulse-glow {
0%,
100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.1);
}
}
.cta-action-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
margin-top: 3rem;
}
.cta-timer-badge {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
letter-spacing: 1px;
}
/* ADAPTABILIDAD MÓVIL PARA PQRS */
@media (max-width: 1200px) {
.pqrs-intro-card {
flex-direction: column;
padding: 3rem 1.5rem;
text-align: center;
}
.steps-new-grid {
grid-template-columns: 1fr !important;
gap: 2rem !important;
}
.step-item-new {
width: 100% !important;
padding: 2rem 1.5rem !important;
}
.pqrs-page h1,
.pqrs-hero h1 {
font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
}
.step-connector {
display: none;
}
.pqrs-intro-visual {
display: none;
}
.premium-cta-card {
padding: 4rem 1.5rem;
}
}
/* ESTILOS DE FORMULARIO INCRUSTADO */
.form-embed-wrapper {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(55, 12, 49, 0.2);
border-radius: 30px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
min-height: 800px;
}
.form-embed-wrapper iframe {
position: relative;
z-index: 2;
background: #fff;
/* Los formularios de Google suelen tener fondos blancos, esto asegura que no haya parpadeos */
border-radius: 20px;
margin-top: -1px;
}
.form-loading-overlay {
position: absolute;
inset: 0;
background: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1;
gap: 1.5rem;
}
.loader-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(55, 12, 49, 0.1);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin-form 1s linear infinite;
}
@keyframes spin-form {
to {
transform: rotate(360deg);
}
}
.minimal-helper-card {
background: rgba(255, 255, 255, 0.05);
padding: 1.5rem;
border-radius: 20px;
text-align: center;
max-width: 600px;
margin: 0 auto;
border: 1px dashed rgba(255, 255, 255, 0.1);
}
.minimal-helper-card p {
margin: 0;
font-size: 0.9rem;
opacity: 0.7;
}
.minimal-helper-card a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
.minimal-helper-card a:hover {
text-decoration: underline;
}
/* ESTILOS DEL ASISTENTE PQRS (PREMIUM) */
.pqrs-wizard-container {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 40px;
padding: 3rem;
max-width: 900px;
margin: 0 auto;
position: relative;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.wizard-progress {
margin-bottom: 4rem;
position: relative;
}
.progress-track {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
transform: translateY(-50%);
z-index: 1;
border-radius: 10px;
}
.progress-bar-fill {
height: 100%;
width: 16.66%;
background: linear-gradient(90deg, var(--primary-color), #ff2ead);
box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
border-radius: 10px;
}
.progress-steps {
display: flex;
justify-content: space-between;
position: relative;
z-index: 2;
}
.step-indicator {
width: 45px;
height: 45px;
background: #1a1a1a;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
transition: all 0.4s ease;
font-size: 1.1rem;
}
.step-indicator.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
box-shadow: 0 0 25px rgba(168, 85, 247, 0.6);
transform: scale(1.15);
}
.step-indicator.completed {
background: #22c55e;
border-color: #22c55e;
color: white;
}
.wizard-step {
display: none;
animation: fadeIn 0.5s ease;
}
.wizard-step.active {
display: block;
}
.step-header {
margin-bottom: 2.5rem;
text-align: center;
}
.step-header h3 {
font-size: 2rem;
margin-bottom: 0.5rem;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.step-header p {
opacity: 0.7;
font-size: 1.1rem;
}
.reveal-up,
.section-header,
.program-card,
.v-time-item,
.benefit-card {
will-change: transform, opacity;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* El estado inicial oculto se maneja mediante GSAP para evitar el parpadeo tras la animación */
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.form-group.full-width {
grid-column: span 2;
}
.form-group label {
display: block;
margin-bottom: 0.8rem;
font-weight: 500;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1.1rem;
color: #fff;
font-family: var(--font-main);
transition: all 0.3s ease;
outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--primary-color);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 15px rgba(55, 12, 49, 0.2);
}
.form-group select option {
background-color: #1a1a1a;
color: #fff;
padding: 10px;
}
.tip-box {
background: rgba(55, 12, 49, 0.1);
border-left: 4px solid var(--primary-color);
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 2rem;
line-height: 1.6;
font-size: 0.95rem;
}
.radio-group-modern {
display: flex;
gap: 1rem;
}
.radio-tab {
flex: 1;
position: relative;
cursor: pointer;
}
.radio-tab input {
position: absolute;
opacity: 0;
}
.radio-tab span {
display: block;
padding: 1rem;
text-align: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
font-weight: 600;
}
.radio-tab input:checked+span {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.rating-group {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.rating-group label {
flex: 1;
cursor: pointer;
}
.rating-group input {
position: absolute;
opacity: 0;
}
.rating-group span {
display: block;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;
font-size: 1.5rem;
font-weight: 700;
transition: all 0.3s ease;
}
.rating-group input:checked+span {
background: var(--primary-color);
border-color: var(--primary-color);
transform: scale(1.1);
}
.rating-labels {
display: flex;
justify-content: space-between;
margin-top: 0.8rem;
opacity: 0.6;
font-size: 0.85rem;
}
.auth-card-pqrs {
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.auth-item-pqrs {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.auth-item-pqrs input[type="checkbox"] {
width: 24px;
height: 24px;
margin-top: 0.2rem;
accent-color: var(--primary-color);
}
.auth-text label {
display: block;
margin-bottom: 0.3rem;
}
.auth-text p {
font-size: 0.9rem;
opacity: 0.7;
margin: 0;
}
.wizard-nav {
margin-top: 3rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.wizard-btn {
padding: 1.2rem 2.5rem;
border-radius: 15px;
font-weight: 700;
border: none;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.05rem;
}
.prev-btn {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.prev-btn:hover {
background: rgba(255, 255, 255, 0.15);
}
.next-btn {
background: #ffffff;
color: #370c31 !important;
border: 2px solid #370c31;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.3);
}
.next-btn:hover {
background: #f8f8f8;
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.5);
}
.submit-btn {
background: #22c55e;
color: white;
}
/* Estado de Éxito */
.wizard-success-state {
text-align: center;
padding: 2rem 0;
}
.success-icon-wrap {
font-size: 6rem;
color: #22c55e;
margin-bottom: 1.5rem;
animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.success-footer {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-top: 2.5rem;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@media (max-width: 768px) {
.pqrs-wizard-container {
padding: 1.5rem;
}
.form-grid {
grid-template-columns: 1fr;
}
.form-group.full-width {
grid-column: span 1;
}
.rating-group span {
height: 50px;
font-size: 1.2rem;
}
}
/* Clases Auxiliares de GSAP (Manejado dinámicamente) */
/* Capa de Transición de Página */
.page-transition-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, #121212 0%, #000000 100%);
z-index: 15000;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
pointer-events: none;
/* El estado inicial permite clics una vez desvanecido */
}
.policy-content-container,
.content-section,
.container,
.page-content {
overflow: visible !important;
}
.policy-content-container {
max-width: 1400px;
margin: 0 auto;
position: relative;
padding-bottom: 5rem;
}
.policy-row {
display: flex;
flex-direction: row;
gap: 5rem;
margin-bottom: 15rem;
align-items: flex-start;
position: relative;
}
.policy-header {
flex: 0 0 350px;
height: auto;
z-index: 100;
}
.policy-header h2 {
position: sticky;
top: calc(var(--navbar-height) + 40px);
font-size: 3.2rem;
font-weight: 900;
color: #ffffff;
line-height: 1;
letter-spacing: -1.5px;
margin: 0 !important;
padding: 3rem;
background: rgba(15, 12, 25, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(255, 46, 173, 0.4);
border-radius: 40px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 46, 173, 0.15);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.policy-header h2 span {
display: block;
color: var(--primary-color);
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 1rem;
font-weight: 700;
opacity: 0.9;
}
.policy-body {
flex: 1;
padding-top: 1rem;
}
.policy-intro {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9) !important;
margin-bottom: 4rem;
line-height: 1.8;
text-align: left !important;
max-width: 800px;
}
.policy-item {
margin-bottom: 6rem;
padding-bottom: 4rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.policy-item:last-child {
border-bottom: none;
}
.policy-item h3 {
color: var(--primary-color);
font-size: 1.8rem;
margin-bottom: 1.5rem;
font-weight: 800;
text-align: left;
}
.policy-item p {
font-size: 1.15rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.8) !important;
text-align: left !important;
max-width: 850px;
}
/* Responsividad mejorada */
@media (max-width: 1200px) {
.policy-header {
flex: 0 0 300px;
}
.policy-header h2 {
font-size: 2.5rem;
}
}
@media (max-width: 1100px) {
.policy-row {
flex-direction: column;
gap: 2rem;
margin-bottom: 8rem;
}
.policy-header {
flex: none;
width: 100%;
position: sticky;
top: calc(var(--navbar-height) + 10px);
margin-bottom: 2rem;
}
.policy-header h2 {
padding: 1.5rem 2rem;
font-size: 2rem;
flex-direction: row;
align-items: center;
gap: 1.5rem;
justify-content: center;
border-radius: 20px;
}
.policy-header h2 span {
margin-top: 0;
font-size: 1.1rem;
}
.policy-body {
width: 100%;
}
}
@media (max-width: 768px) {
.policy-header h2 {
font-size: 1.6rem;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}
/* Mientras esté activa, debe bloquear todo y mostrar el contenido */
.page-transition-overlay.active,
body:not(.loaded) .page-transition-overlay {
pointer-events: all;
}
.transition-content {
position: relative;
z-index: 15001;
/* Explícitamente encima del fondo de la capa */
text-align: center;
}
.transition-logo-text {
font-family: var(--font-logo);
font-size: clamp(4rem, 25vw, 17.5rem) !important;
/* Totalmente responsivo para evitar recortes */
font-weight: 900;
width: auto;
max-width: 90vw;
line-height: 1;
color: var(--primary-color);
letter-spacing: -0.1em;
/* Kerning más cerrado */
background: none;
-webkit-text-fill-color: var(--primary-color);
filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.3));
margin-bottom: 40px;
position: relative;
z-index: 15002;
opacity: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.transition-logo-text .logo-letter-e {
transform: translateY(0);
}
.transition-logo-text .logo-letter-t {
margin-left: 0.08em;
/* Restaurado: separación fina con la E */
transform: translateY(0);
}
.transition-logo-text .logo-letter-c {
margin-left: -0.05em;
/* Juntada con la T */
transform: translateY(0) scale(1);
}
.transition-loader {
width: 60px;
height: 60px;
border: 4px solid rgba(55, 12, 49, 0.2);
border-top: 4px solid var(--primary-color);
border-radius: 50%;
margin: 0 auto;
animation: spin-transition 1s linear infinite;
opacity: 0;
}
@keyframes spin-transition {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* ==========================================
PERSONALIZACIÓN DEL TEMA OSCURO DE FLATPICKR (v7.60)
========================================== */
.flatpickr-calendar.etc-dark-calendar {
background: #15081b !important;
backdrop-filter: blur(15px) !important;
border: 1px solid rgba(139, 58, 126, 0.4) !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8) !important;
border-radius: 16px !important;
color: #fff !important;
padding: 10px !important;
}
/* Encabezado (Mes y Año) */
.etc-dark-calendar .flatpickr-months {
background: transparent !important;
padding-bottom: 10px !important;
}
.etc-dark-calendar .flatpickr-current-month,
.etc-dark-calendar .flatpickr-monthDropdown-months,
.etc-dark-calendar input.cur-year {
color: #fff !important;
fill: #fff !important;
font-weight: 700 !important;
}
/* Días de la semana */
.etc-dark-calendar .flatpickr-weekday {
color: rgba(255, 255, 255, 0.5) !important;
font-weight: 600 !important;
}
/* Contenedor de Días */
.etc-dark-calendar .flatpickr-innerContainer {
background: transparent !important;
}
.etc-dark-calendar .flatpickr-days {
background: transparent !important;
}
.etc-dark-calendar .flatpickr-day {
color: #fff !important;
border-radius: 10px !important;
margin: 2px !important;
border: none !important;
background: rgba(255, 255, 255, 0.03) !important;
}
/* Día Seleccionado */
.etc-dark-calendar .flatpickr-day.selected,
.etc-dark-calendar .flatpickr-day.selected:hover {
background: #8b3a7e !important;
color: #fff !important;
box-shadow: 0 0 15px rgba(139, 58, 126, 0.6) !important;
}
/* Día al pasar el ratón */
.etc-dark-calendar .flatpickr-day:hover {
background: rgba(139, 58, 126, 0.25) !important;
color: #fff !important;
}
/* Días del mes anterior/siguiente */
.etc-dark-calendar .flatpickr-day.prevMonthDay,
.etc-dark-calendar .flatpickr-day.nextMonthDay {
color: rgba(255, 255, 255, 0.15) !important;
background: transparent !important;
}
/* Flechas */
.etc-dark-calendar .flatpickr-prev-month,
.etc-dark-calendar .flatpickr-next-month {
fill: #fff !important;
color: #fff !important;
padding: 10px !important;
}
.etc-dark-calendar .flatpickr-prev-month:hover,
.etc-dark-calendar .flatpickr-next-month:hover {
color: #8b3a7e !important;
fill: #8b3a7e !important;
}
/* SVGs de Flechas */
.etc-dark-calendar .flatpickr-prev-month svg,
.etc-dark-calendar .flatpickr-next-month svg {
width: 14px !important;
height: 14px !important;
}
/* ==========================================
ESTILOS DE LA PÁGINA DE PAGOS (v7.70)
========================================== */
.payment-section {
padding: 6rem 0;
background: #000;
}
.container-large {
max-width: 1300px;
margin: 0 auto;
padding: 0 2rem;
}
.payment-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
align-items: start;
}
/* Estilos de pago consolidados movidos al bloque v9.00 a continuación */
.payment-card-header {
margin-bottom: 2rem;
text-align: center;
}
.payment-icon {
font-size: 2.5rem;
color: #370c31;
/* Color HTML solicitado para los iconos */
margin-bottom: 1.5rem;
filter: drop-shadow(0 0 10px rgba(55, 12, 49, 0.4));
}
.payment-card-header h3 {
font-size: 1.4rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
}
.payment-card-header h3 span {
display: block;
font-size: 0.9rem;
opacity: 0.6;
margin-top: 0.4rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.payment-intro {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 2rem;
line-height: 1.6;
}
.payment-steps {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
flex: 1;
}
.payment-steps li {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 1.2rem;
padding-left: 2.5rem;
position: relative;
line-height: 1.5;
}
.payment-steps li span {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background: rgba(55, 12, 49, 0.4);
color: #370c31;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
}
/* Bre-B Specific */
.breb-info {
background: rgba(0, 0, 0, 0.3);
border: 1px dashed rgba(55, 12, 49, 0.4);
border-radius: 15px;
padding: 1.5rem;
text-align: center;
margin-bottom: 2rem;
}
.breb-tag {
font-size: 0.7rem;
letter-spacing: 2px;
color: #370c31;
font-weight: 700;
}
.breb-code {
font-size: 1.8rem;
font-weight: 900;
color: #fff;
letter-spacing: 2px;
margin-top: 0.5rem;
}
.qr-methods-wrapper {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.qr-methods-wrapper .qr-container {
margin: 0;
}
@media (max-width: 600px) {
.qr-methods-wrapper {
gap: 2rem;
}
}
.qr-container {
background: #fff;
/* Fondo blanco para un mejor escaneo de QR */
padding: 1rem;
border-radius: 20px;
width: fit-content;
margin: 0 auto 2.5rem auto;
position: relative;
transition: transform 0.3s ease;
}
.qr-container:hover {
transform: scale(1.05);
}
.qr-image {
display: block;
width: 180px;
height: 180px;
}
.qr-overlay-text {
position: absolute;
bottom: -1.5rem;
left: 0;
width: 100%;
text-align: center;
font-size: 0.75rem;
color: var(--primary-color);
font-weight: 600;
}
@media (max-width: 1100px) {
.payment-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.payment-grid {
grid-template-columns: 1fr;
}
.payment-card {
padding: 2rem;
}
}
/* ==========================================
CTA FLOTANTE DE PQRS (v8.05)
========================================== */
.floating-cta {
position: fixed;
right: 30px;
bottom: 180px;
/* Por encima de Volver al inicio (100px) y WhatsApp (25px) */
background: #370c31 !important;
/* Color sólido de marca según imagen */
overflow: hidden;
/* Necesario para el efecto spotlight */
color: #fff;
padding: 0.9rem 1.6rem;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
display: flex;
align-items: center;
gap: 0.8rem;
box-shadow: 0 10px 30px rgba(55, 12, 49, 0.4);
z-index: 10000;
/* Prioridad superior */
display: none !important;
/* Oculto por defecto v2.0 */
transition: opacity 0.3s ease, visibility 0.3s, transform 0.3s ease;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(10px) scale(0.95);
}
/* Solo visible en la interfaz de PQRS */
.pqrs-page .floating-cta {
display: flex !important;
}
.floating-cta.visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.floating-cta:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 40px rgba(55, 12, 49, 0.4);
/* El degradado estático se quita para dar paso al dinámico del spotlight */
}
.floating-cta i {
font-size: 1.1rem;
}
@media (max-width: 768px) {
.floating-cta {
right: 20px;
bottom: 165px;
/* Adjust for mobile */
padding: 0.7rem 1.2rem;
font-size: 0.8rem;
}
}
/* ==========================================
MEJORA DE TÍTULOS DEL ÁREA DE DIRECTORIO (v8.25)
========================================== */
.team-section .section-header h2 {
font-size: clamp(2.5rem, 6vw, 3.6rem);
/* 20% increase from base 3rem */
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
.team-section .section-header h2 {
font-size: 2.2rem;
}
}
/* ==========================================
MEJORA DEL ACORDEÓN DE PREGUNTAS FRECUENTES (v8.30)
========================================== */
.faq-question h3 {
font-size: 1.45rem !important;
/* Increase from standard ~1.2rem */
font-weight: 700 !important;
color: #ffffff !important;
line-height: 1.4 !important;
margin-right: 1.5rem !important;
}
@media (max-width: 768px) {
.faq-question h3 {
font-size: 1.2rem !important;
}
}
/* ==========================================
BURBUJA DE NUBE DE PAGOS (v8.50)
========================================== */
.payment-section {
padding: 6rem 0;
padding-bottom: 2rem;
background: transparent;
min-height: auto; /* Remove the fixed 100vh to avoid initial gap */
}
/* QUICK ACTIONS (PSE, QR, BRE-B) - NEW STYLES (v11.00) */
.payment-quick-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
margin-bottom: 6rem;
padding: 2.5rem 3rem;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 40px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
animation: fadeInUp 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.quick-action-btns {
display: flex;
gap: 1.5rem;
}
.quick-btn {
display: flex;
align-items: center;
gap: 1.5rem;
height: 95px; /* Aumentado por solicitud de legibilidad */
padding: 0 2.5rem;
border-radius: 24px;
background: rgba(18, 18, 23, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 1.2rem; /* Texto un poco más grande para balancear */
text-decoration: none;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.quick-btn:hover {
transform: translateY(-8px) scale(1.05);
background: rgba(55, 12, 49, 0.4);
border-color: var(--primary-color);
box-shadow: 0 20px 40px rgba(55, 12, 49, 0.4);
}
.quick-btn .btn-icon {
width: 65px;
height: 65px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
font-size: 1.5rem;
}
.pse-btn .btn-icon {
background: #fff; /* White background for logo clarity */
width: 120px; /* Rectangular para el logo de PSE */
height: 65px;
border-radius: 12px;
}
.qr-btn {
background: linear-gradient(135deg, rgba(55, 12, 49, 0.6), rgba(90, 20, 81, 0.6));
border-color: rgba(255, 46, 173, 0.3);
}
/* Bre-B Display Box */
.breb-number-container {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.5rem;
}
.breb-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--primary-color);
font-weight: 800;
}
.bre-b-code-box {
display: flex;
align-items: center;
gap: 1.5rem;
background: #000;
border: 1px dashed var(--primary-color);
padding: 0.8rem 1.5rem;
border-radius: 15px;
box-shadow: 0 0 20px rgba(55, 12, 49, 0.2);
transition: all 0.3s ease;
}
.bre-b-code-box:hover {
background: rgba(55, 12, 49, 0.2);
border-style: solid;
transform: scale(1.02);
}
.bre-b-code-box span {
font-size: 1.6rem;
font-weight: 900;
color: #fff;
letter-spacing: 3px;
font-family: 'Outfit', sans-serif;
}
.copy-btn {
background: none;
border: none;
color: var(--primary-color);
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s;
padding: 5px;
}
.copy-btn:hover {
color: #fff;
transform: scale(1.2);
}
/* Notificación Flotante "Toast" (v11.10) */
.copy-toast {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
pointer-events: none;
background: var(--primary-color, #370c31);
color: #fff;
padding: 0.6rem 1.2rem;
border-radius: 12px;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 0.85rem;
box-shadow: 0 10px 30px rgba(55, 12, 49, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.copy-toast::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--primary-color, #370c31);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1100px) {
.payment-quick-actions {
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 2rem;
}
.breb-number-container {
align-items: center;
}
}
@media (max-width: 600px) {
.quick-action-btns {
flex-direction: column;
width: 100%;
}
.quick-btn {
width: 100%;
justify-content: center;
}
.bre-b-code-box span {
font-size: 1.3rem;
}
}
.payment-container-wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.payment-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-bottom: 4rem;
z-index: 100;
position: relative;
}
.payment-card {
background: rgba(255, 255, 255, 0.15);
/* Significantly increased for clarity */
border: 1px solid rgba(255, 255, 255, 0.3);
/* Clearer border */
border-radius: 24px;
padding: 2rem;
text-align: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
position: relative;
z-index: 100;
/* Higher priority */
backdrop-filter: blur(20px);
}
.payment-card:hover {
transform: translateY(-8px);
background: rgba(168, 85, 247, 0.15);
border-color: var(--primary-color);
box-shadow: 0 15px 35px rgba(55, 12, 49, 0.3);
}
.payment-card.active {
background: rgba(168, 85, 247, 0.25);
border: 2px solid var(--primary-color);
box-shadow: 0 0 40px rgba(55, 12, 49, 0.4);
}
.policy-row {
display: grid;
grid-template-columns: 350px 1fr;
gap: 6rem;
margin-bottom: 12rem;
align-items: start;
}
.policy-header {
position: sticky;
top: calc(var(--navbar-height) + 60px);
z-index: 10;
}
.policy-header h2 {
font-size: 3rem;
font-weight: 900;
color: #ffffff;
line-height: 1.1;
letter-spacing: -1px;
background: transparent !important;
backdrop-filter: none !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
}
.policy-header h2 span {
display: block;
color: var(--primary-color);
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 1rem;
font-weight: 700;
}
.policy-body {
border-left: 1px solid rgba(255, 255, 255, 0.08);
padding-left: 4rem;
}
.policy-item {
margin-bottom: 5rem;
}
.policy-item h3 {
color: var(--primary-color);
font-size: 1.6rem;
margin-bottom: 1.5rem;
font-weight: 700;
}
.policy-item p {
font-size: 1.15rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.8) !important;
text-align: left !important;
}
@media (max-width: 1100px) {
.policy-row {
grid-template-columns: 1fr;
gap: 3rem;
margin-bottom: 8rem;
}
.policy-header {
position: relative;
top: 0;
}
.policy-header h2 {
font-size: 2.22rem;
text-align: center;
}
.policy-body {
padding-left: 0;
border-left: none;
}
}
.payment-card-header {
margin-bottom: 0;
}
.payment-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1rem;
transition: transform 0.4s ease;
filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.6));
}
.payment-card:hover .payment-icon {
transform: scale(1.1);
}
.payment-card h3 {
font-size: 1.15rem;
color: #fff;
font-weight: 700;
}
.payment-card h3 span {
display: block;
font-size: 0.75rem;
opacity: 0.7;
margin-top: 0.3rem;
text-transform: uppercase;
}
/* Contenido oculto almacenado dentro de la tarjeta */
.payment-card-body {
display: none;
}
/* LA NUBE FLOTANTE - VISIBILIDAD MEJORADA (v10.35) */
.payment-cloud-bubble {
position: relative;
/* Takes space to push footer */
width: 100%;
max-width: 1000px;
margin: 3rem auto 5rem;
background: rgba(15, 8, 25, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 2px solid rgba(55, 12, 49, 0.3);
border-radius: 35px;
padding: 3.5rem;
opacity: 0;
visibility: hidden;
display: none; /* CORRECTED: Ensure it doesn't take space when hidden */
z-index: 20;
box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), 0 0 40px rgba(55, 12, 49, 0.1);
flex-direction: column;
align-items: center;
}
.payment-cloud-bubble.active {
display: flex; /* CORRECTED: Switch to flex only when active */
opacity: 1;
visibility: visible;
}
/* Indicador de flecha (Picos) */
.payment-cloud-arrow {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid rgba(55, 12, 49, 0.6);
z-index: 21;
}
.payment-cloud-arrow::after {
content: '';
position: absolute;
top: 2px;
left: -18px;
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-bottom: 18px solid rgba(15, 8, 25, 1);
}
/* Estilo de Acordeón Móvil para Tarjetas de Pago (v9.60) */
@media (max-width: 1200px) {
.payment-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.payment-cloud-bubble {
position: relative !important;
width: 100% !important;
left: 0 !important;
transform: none !important;
margin-top: 1rem !important;
padding: 2rem !important;
display: none;
/* Controlled by JS */
order: 0;
/* Default */
}
.payment-cloud-bubble.active {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.payment-cloud-arrow {
display: none !important;
/* Hide tail on mobile accordion */
}
/* Logic for injecting bubble after active card handled by JS flex 'order' or DOM movement */
}
/* Bubble Content Text Visibility (v9.10) */
.cloud-inner-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.cloud-inner-content .payment-intro {
color: #fff !important;
font-size: 1.1rem;
margin-bottom: 2.5rem;
text-align: center;
width: 100%;
}
.cloud-inner-content .payment-steps {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 0;
list-style: none;
}
.cloud-inner-content .payment-steps li {
color: rgba(255, 255, 255, 0.95) !important;
font-size: 0.95rem;
margin-bottom: 1.5rem;
text-align: center;
max-width: 600px;
}
.cloud-inner-content .payment-steps li span {
background: #370c31;
color: #fff;
box-shadow: 0 0 15px rgba(255, 46, 173, 0.4);
}
.cloud-inner-content strong {
color: #ff2ead;
font-weight: 700;
}
/* Mobile Responsiveness v9.10 */
@media (max-width: 1200px) {
.payment-grid {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
gap: 1.5rem !important;
}
.payment-card {
width: 85% !important;
max-width: 320px !important;
height: auto !important;
min-height: 120px !important;
margin: 0 auto !important;
padding: 1.5rem !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
background: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
border-radius: 20px !important;
}
.payment-icon {
margin-bottom: 0.5rem !important;
font-size: 2rem !important;
color: var(--primary-color) !important;
}
.payment-card h3 {
font-size: 1rem !important;
margin: 0 !important;
}
.payment-cloud-bubble {
position: static;
transform: none !important;
width: 100%;
margin-top: 2rem;
padding: 2.5rem 1.5rem;
border-radius: 25px;
opacity: 0;
display: none;
/* Hide when not active on mobile stack */
}
.payment-cloud-bubble.active {
display: flex !important;
opacity: 1 !important;
margin-bottom: 2rem;
}
/* ========================================= */
/* UNIFICACIÓN GLOBAL DE BOTONES (v16.70) */
/* ========================================= */
/* Todos los botones en el cuerpo de la página (Hero, Secciones, Cards) */
.cta-button {
display: flex !important;
width: 85% !important;
max-width: 320px !important;
margin: 1.5rem auto !important;
padding: 1.1rem 2rem !important;
font-size: 1rem !important;
font-weight: 800 !important;
text-align: center !important;
justify-content: center !important;
align-items: center !important;
border-radius: 50px !important;
background: linear-gradient(90deg, #370c31, #5a1451) !important;
box-shadow: 0 8px 25px rgba(55, 12, 49, 0.4) !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
transition: all 0.3s ease !important;
border: none !important;
}
.cta-button.outline {
background: #1a0618 !important;
/* Fondo sólido oscuro vino */
border: 2px solid #5a1451 !important;
opacity: 1 !important;
}
/* EXCEPCIÓN: Botón 'Paga Aquí' en la Navbar */
body:not(.pagos-page) .nav-container .cta-button {
display: inline-flex !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0.6rem 1.4rem !important;
font-size: 0.85rem !important;
font-weight: 800 !important;
z-index: 1000 !important;
position: relative !important;
border-radius: 50px !important;
box-shadow: 0 4px 15px rgba(55, 12, 49, 0.4) !important;
text-transform: none !important;
/* Mantener texto normal en nav */
letter-spacing: normal !important;
}
.hero-cta-btns {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
gap: 0 !important;
/* El margen lo da el botón */
}
.directory-hero .container,
.directory-hero {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
padding: 5rem 1rem 3rem !important;
}
.section-tagline,
.hero-badge,
.directory-hero h1 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 95vw !important;
}
.payment-cloud-arrow {
display: none;
}
}
/* FINAL MOBILE TITLE PRIORITY FIX (v11.35) */
@media (max-width: 768px) {
.directory-hero h1,
.directory-hero .mask-text {
font-size: clamp(1rem, 7vw, 2.3rem) !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
white-space: normal !important;
display: block !important;
padding: 0 10px !important;
line-height: 1.1 !important;
width: 100% !important;
}
.directory-hero .container {
padding: 3rem 10px !important;
}
}
/* ========================================= */
/* MOBILE OPACITY BOOST (v14.20) */
/* ========================================= */
/* Ensures all cards/modals are readable on mobile (less transparency) */
@media (max-width: 768px) {
.contact-card,
.promo-box,
.feature-card,
.stat-item,
.stat-counter-card,
.testimonial-marquee-card,
.testimonial-card,
.team-card,
.faq-item,
.glossary-card,
.step-new-card,
.pqrs-wizard-container,
.auth-card-pqrs,
.tip-box,
.radio-tab span,
.rating-group span,
.payment-method-card {
background-color: rgba(15, 12, 30, 0.98) !important;
/* Almost solid for mobile */
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border-color: rgba(55, 12, 49, 0.4) !important;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
}
/* Bloque removido para evitar conflictos con el carrusel de aliados */
}
@media (max-width: 1200px) {
.carousel-logo {
-webkit-filter: grayscale(100%) brightness(1.2) contrast(1.2) !important;
filter: grayscale(100%) brightness(1.2) contrast(1.2) !important;
opacity: 0.9 !important;
transition: all 0.4s ease !important;
}
/* Asegurar color en móvil al tocar/activar */
img[alt="Americana"].carousel-logo:active,
img[alt="Americana"].carousel-logo:focus {
filter: grayscale(0) brightness(1) contrast(1) !important;
}
.carousel-logo:hover,
.carousel-logo:active,
.carousel-logo:focus {
-webkit-filter: grayscale(0%) brightness(1) contrast(1) !important;
filter: grayscale(0%) brightness(1) contrast(1) !important;
opacity: 1 !important;
transform: scale(1.05) !important;
}
}
@media (max-width: 768px) {
.hero-buttons .cta-button,
.stat-icon,
.stat-counter-icon,
.nav-links a,
.category-title {
opacity: 1 !important;
}
/* FAQ answers should also be more opaque */
.faq-answer,
.faq-item.active {
background-color: rgba(20, 15, 35, 0.98) !important;
}
.faq-answer p {
color: rgba(255, 255, 255, 0.9) !important;
opacity: 1 !important;
}
/* Ensure text inside these cards is fully visible */
.contact-card p,
.promo-box p,
.feature-card p,
.testimonial-card p,
.glossary-card p,
.step-new-card p,
.stat-counter-label {
color: rgba(255, 255, 255, 0.95) !important;
opacity: 1 !important;
}
}
/* ========================================= */
/* BUSCADOR DE PROGRAMAS (v16.70) */
/* ========================================= */
.search-section {
padding: 2rem 0;
position: relative;
z-index: 100;
}
.search-wrapper {
max-width: 800px;
margin: 0 auto;
}
.search-input-group {
position: relative;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(55, 12, 49, 0.3);
border-radius: 50px;
padding: 0.5rem 1.5rem;
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.search-input-group:focus-within {
background: rgba(255, 255, 255, 0.08);
border-color: var(--primary-color);
box-shadow: 0 15px 40px rgba(55, 12, 49, 0.2);
transform: translateY(-3px);
}
.search-icon {
color: var(--primary-color);
font-size: 1.2rem;
margin-right: 1rem;
}
.search-input-group input {
flex: 1;
background: transparent;
border: none;
color: white;
padding: 1rem 0;
font-size: 1.1rem;
font-family: inherit;
outline: none;
}
.search-input-group input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.clear-search {
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
font-size: 1.2rem;
padding: 0.5rem;
display: none;
transition: color 0.3s;
}
.clear-search:hover {
color: var(--primary-color);
}
.no-results-message {
text-align: center;
padding: 5rem 2rem;
color: rgba(255, 255, 255, 0.5);
width: 100%;
font-size: 1.2rem;
}
/* ========================================= */
/* MURO DE LOGOS / ALIADOS (v16.70) */
/* ========================================= */
.partners-section {
padding: 6rem 0;
background: transparent;
}
.partners-wall-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 4rem;
align-items: center;
justify-items: center;
margin-top: 5rem;
}
.partner-logo {
width: 100%;
max-width: 242px;
/* Aumentado 10% */
height: 154px;
/* Aumentado 10% */
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
cursor: pointer;
position: relative;
/* Efecto de corral flotante */
animation: float-logo 6s ease-in-out infinite;
}
.partner-logo:hover {
animation-play-state: paused !important;
}
/* Variaciones para que no todos se muevan al mismo tiempo */
.partner-logo:nth-child(2n) {
animation-duration: 7.5s;
animation-delay: -1s;
}
.partner-logo:nth-child(3n) {
animation-duration: 9s;
animation-delay: -2.5s;
}
.partner-logo:nth-child(4n) {
animation-duration: 8.2s;
animation-delay: -0.5s;
}
@keyframes float-logo {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(4px, -6px) rotate(1deg);
}
50% {
transform: translate(-5px, 4px) rotate(-1deg);
}
75% {
transform: translate(6px, 5px) rotate(0.5deg);
}
}
.partner-logo img {
max-width: 100%;
max-height: 80%;
object-fit: contain;
filter: grayscale(100%) brightness(1) contrast(1.1);
opacity: 0.85;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.partner-logo:hover img {
filter: grayscale(0%) brightness(1) contrast(1);
opacity: 1;
transform: scale(1.1);
}
.partner-logo::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 0;
height: 2px;
background: var(--primary-color);
transition: all 0.4s ease;
transform: translateX(-50%);
box-shadow: 0 0 10px var(--primary-color);
}
.partner-logo:hover::after {
width: 60%;
}
/* Ajustes específicos para logos solicitados */
#logo-americana img {
filter: grayscale(100%) brightness(2.5) contrast(1.1) !important;
opacity: 0.9 !important;
transition: all 0.5s ease;
}
#logo-americana:hover img {
filter: grayscale(0%) brightness(1) contrast(1) !important;
opacity: 1 !important;
transform: scale(1.1);
}
#logo-cotradecun img {
transform: scale(1.4);
}
#logo-cotradecun:hover img {
transform: scale(1.55);
/* Un poco más en hover */
}
/* Distribución optimizada para el Hero en Inicio */
.hero-subtitle-highlight {
font-size: clamp(1.4rem, 3.5vw, 2rem) !important;
color: #fff !important;
margin-bottom: 2.5rem !important;
font-weight: 500 !important;
letter-spacing: 1px !important;
text-align: center !important;
opacity: 0.9 !important;
display: block !important;
line-height: 1.4 !important;
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
text-transform: uppercase !important;
}
.hero-cta-btns {
display: flex !important;
gap: 1.5rem !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
}
/* ========================================= */
/* ESTILOS PREMIUM OSCUROS PARA TODO INICIO */
/* ========================================= */
/* Eliminado .partners-section global para escritorio para dejarlo sin fondo como estaba */
/* Aplicando el desenfoque y fondo oscuro directamente a los recuadros de tarjetas */
.stat-counter-card,
.testimonial-marquee-card {
background: rgba(15, 15, 20, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 24px !important;
backdrop-filter: blur(12px) !important; /* Optimizado de 25px a 12px */
-webkit-backdrop-filter: blur(12px) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
will-change: transform, opacity; /* Capa GPU */
}
/* Responsividad para móviles */
@media (max-width: 768px) {
/* Estilo para el carrusel en móvil manejado arriba en la sección correspondiente */
.contact-card {
background: rgba(15, 15, 20, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
border-radius: 24px !important;
will-change: transform, opacity;
}
.search-wrapper {
padding: 0 1rem;
}
.search-input-group {
padding: 0.3rem 1.2rem;
}
.search-input-group input {
font-size: 0.95rem;
}
.partners-wall-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.partner-logo {
max-width: 160px;
height: 100px;
}
.partner-logo img {
filter: grayscale(100%) brightness(1.2);
/* Más brillante en móvil */
opacity: 0.9;
}
}
/* ========================================= */
/* READABILITY BOOST (v21.06) */
/* ========================================= */
:root {
--etc-text-strong: rgba(255, 255, 255, 0.98);
--etc-text-muted: rgba(255, 255, 255, 0.92);
--etc-glass-strong: rgba(15, 12, 25, 0.92);
--etc-glass-strong-2: rgba(12, 10, 22, 0.96);
}
body {
color: var(--etc-text-strong);
}
h1,
h2,
h3,
h4,
h5,
h6,
.section-title-conocenos,
.carousel-title,
.stats-counter-title,
.hero-subtitle-highlight {
color: #ffffff !important;
text-transform: uppercase !important;
}
p,
.section-description,
.section-description-conocenos,
.section-tagline,
.stats-counter-description,
.stats-counter-label,
.testimonial-card p,
.feature-card p,
.promo-box p,
.contact-card p,
.faq-answer p,
.glossary-card p,
.step-new-card p,
.timeline-modal-body .timeline-description,
.v-time-content p,
.mvv-description,
.payment-card p,
.payment-cloud-bubble p,
.no-results-message {
color: var(--etc-text-muted) !important;
}
.feature-card,
.testimonial-card,
.stat-counter-card,
.promo-box,
.contact-card,
.team-card,
.faq-item,
.faq-answer,
.glossary-card,
.step-new-card,
.pqrs-wizard-container,
.auth-card-pqrs,
.tip-box,
.payment-method-card,
.payment-card,
.payment-cloud-bubble,
.timeline-modal-container,
.v-time-content,
.mvv-card,
.search-input-group {
background-color: var(--etc-glass-strong) !important;
border-color: rgba(255, 255, 255, 0.14) !important;
}
.timeline-modal-container,
.payment-cloud-bubble {
background-color: var(--etc-glass-strong-2) !important;
}
.directory-hero h1,
.directory-hero .mask-text {
background: none !important;
-webkit-text-fill-color: #ffffff !important;
color: #ffffff !important;
text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}
.directory-hero .section-tagline {
opacity: 1 !important;
}
.program-info h3,
.program-desc {
color: #ffffff !important;
}
.program-image-container img {
filter: brightness(1) saturate(1.05) !important;
opacity: 1 !important;
}
.global-watermark-layer img {
opacity: 0.22 !important;
}
/* Navbar alignment overrides para mantener ETC a la izquierda en escritorio y el menú vertical en múvil */
@media (min-width: 1201px) {
.main-header .nav-container {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
justify-content: stretch !important;
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 4rem !important;
position: relative !important;
}
.main-header .logo {
grid-column: 1 !important;
justify-self: start !important;
margin: 0 !important;
position: relative !important;
transform: translateY(-2px) !important;
}
.nav-links {
grid-column: 2 !important;
justify-self: center !important;
display: flex !important;
position: static !important;
gap: 2.5rem !important;
margin: 0 !important;
padding: 0 !important;
flex: none !important;
}
/* Elemento fantasma para equilibrar el Grid y centrar los enlaces perfectamente */
.main-header .nav-container::after {
content: "" !important;
grid-column: 3 !important;
display: block !important;
}
}
@media (max-width: 1200px) {
.nav-links {
position: absolute !important;
top: 70px !important;
left: 0 !important;
width: 100% !important;
}
}
/* ========================================= */
/* PAGE TRANSITION OVERLAY (PRELOADER) */
/* ========================================= */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.page-transition-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 140vh;
background: #0c0c0c;
/* Negro grisáceo solicitado */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
z-index: 99999999 !important;
transform: translateY(0);
will-change: transform;
transition: none !important;
pointer-events: all;
/* MÁSCARA DE NEBLINA:
0vh a 100vh: Totalmente Negro (Sólido)
100vh a 140vh: Degradado a transparente (Neblina)
*/
-webkit-mask-image: linear-gradient(to bottom,
black 0%,
black 70%,
/* 70% de 140vh = aprox 100vh sólidos */
transparent 100%);
mask-image: linear-gradient(to bottom,
black 0%,
black 70%,
transparent 100%);
}
.transition-content {
height: 100vh;
/* Centra el logo exactamente en el visor inicial */
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
position: relative;
z-index: 2;
}
/* Base de neblina difuminada que solo se ve al subir */
.page-transition-overlay::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40vh;
background: linear-gradient(to bottom,
#0c0c0c 0%,
rgba(12, 12, 12, 0.8) 30%,
rgba(12, 12, 12, 0.4) 60%,
transparent 100%);
pointer-events: none;
}
/* Regla duplicada eliminada para permitir el tamaño gigante solicitado */
.transition-loader {
width: 50px;
height: 50px;
border: 3px solid rgba(255, 46, 173, 0.1);
border-radius: 50%;
border-top-color: #ff2ead;
animation: spin-preloader 1s linear infinite;
}
@keyframes spin-preloader {
to {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
.transition-logo-img {
height: 100px !important;
margin-bottom: 20px;
}
/* Forzar dirección de fila para el colapso horizontal del logo ETC */
.hero-text {
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
}
}
.transition-logo-img {
height: clamp(80px, 20vw, 180px); /* Tamaño gigante controlado */
width: auto;
filter: drop-shadow(0 0 18px rgba(255, 46, 173, 0.5)) drop-shadow(0 0 35px rgba(255, 46, 173, 0.25));
-webkit-filter: drop-shadow(0 0 18px rgba(255, 46, 173, 0.5)) drop-shadow(0 0 35px rgba(255, 46, 173, 0.25));
margin-bottom: 30px;
position: relative;
z-index: 5;
will-change: transform, filter;
}
.directory-hero {
padding: 6rem 0 6rem;
text-align: center;
background: radial-gradient(circle at center, rgba(55, 12, 49, 0.08) 0%, transparent 80%);
position: relative;
/* Desvanecimiento suave en la parte inferior para evitar líneas divisoras rígidas */
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.team-section {
padding: 4rem 0;
}
.team-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
}
.team-grid .team-card {
flex: 0 0 calc(33.333% - 2rem);
max-width: 350px;
min-width: 280px;
}
@media (max-width: 1024px) {
.team-grid .team-card {
flex: 0 0 calc(50% - 1.5rem);
}
}
@media (max-width: 650px) {
.team-grid .team-card {
flex: 0 0 100%;
max-width: 100%;
}
}
.team-card {
background: rgba(15, 12, 25, 0.85);
/* Fondo un poco más opaco */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(55, 12, 49, 0.3);
border-radius: 32px;
/* Esquinas más suaves */
padding: 0;
text-align: center;
width: 100%;
max-width: 350px;
height: 480px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
overflow: hidden;
z-index: 10;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.5),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.team-card:hover {
transform: translateY(-4px);
border-color: rgba(168, 85, 247, 0.45);
box-shadow:
0 0 0 1px rgba(55, 12, 49, 0.2),
0 20px 60px rgba(0, 0, 0, 0.7),
0 0 40px rgba(55, 12, 49, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* Contenedor de imagen de fondo (Background Image Container) */
.card-image-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
/* Máscara de desvanecimiento reforzada para ocultar bordes de calcomanías/fotos recortadas (v29.20) */
-webkit-mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.5) 75%, transparent 95%);
mask-image: linear-gradient(to bottom, black 40%, rgba(0,0,0,0.5) 75%, transparent 95%);
}
.card-image-bg img {
/* Forzar el llenado completo de la tarjeta incluso en móviles con reglas de seguridad estrictas (v29.20) */
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: top center;
transition: transform 0.5s ease, filter 0.5s ease;
/* Iluminación equilibrada: vívida pero no sobreexpuesta */
filter: brightness(1.15) saturate(0.95) contrast(1.05);
opacity: 1;
}
.team-card:hover .card-image-bg img {
transform: scale(1.08);
/* Zoom más dinámico */
filter: brightness(1.1);
}
/* Capa de degradado para la legibilidad del texto */
.card-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Degradado de fusión ultra-suave (v29.20) */
background:
linear-gradient(to bottom, rgba(5, 3, 15, 0.4) 0%, transparent 30%),
linear-gradient(to top, rgba(15, 12, 25, 1) 0%, rgba(15, 12, 25, 0.9) 20%, rgba(15, 12, 25, 0) 50%, transparent 100%);
z-index: 1;
}
/* Contenido de la tarjeta (Texto) */
.card-content {
position: relative;
z-index: 2;
padding: 2rem;
text-align: center;
width: 100%;
}
.team-card h3 {
font-size: 1.6rem;
margin-bottom: 0.3rem;
color: #fff;
font-weight: 900;
}
.team-card .role {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
margin-bottom: 1.2rem;
font-weight: 400;
}
.contact-links {
display: flex;
justify-content: center;
gap: 1rem;
}
.icon-link {
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.icon-link:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: scale(1.1);
}
/* Botón flotante de WhatsApp (WhatsApp Floating Button) */
.float-whatsapp {
position: fixed;
width: 50px;
height: 50px;
bottom: 30px;
right: 30px;
background-color: #25d366;
color: #FFF;
border-radius: 50px;
text-align: center;
font-size: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
z-index: 9990;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
}
.float-whatsapp:hover {
transform: scale(1.1);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
background-color: #128c7e;
/* Verde más oscuro al pasar el ratón */
color: #FFF;
}
/* Bloqueo Maestro Final de Desplazamiento Horizontal */
html,
body {
overflow-x: hidden !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
touch-action: pan-y !important;
}
.directory-hero,
.page-content,
section {
overflow-x: hidden !important;
max-width: 100% !important;
}
/* ========================================= */
/* ROBUST RESPONSIVENESS SAFETY SYSTEM (v25.0) */
/* ========================================= */
@media (max-width: 480px) {
/* Prevent text overflow in titles */
h1,
h2,
h3 {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto;
}
/* Safety for images to never exceed viewport */
img {
max-width: 100% !important;
height: auto !important;
}
/* Container padding consistency */
.container {
padding-left: 1.25rem !important;
padding-right: 1.25rem !important;
}
/* Buttons full width on very small screens if they look cramped */
.hero-cta-btns .cta-button {
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
text-align: center;
}
}
/* Tablet refinements */
@media (min-width: 769px) and (max-width: 1200px) {
.container {
max-width: 95% !important;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 3rem !important;
}
}
/* Fix for forced black backgrounds on some mobile browsers */
@media (prefers-color-scheme: dark) {
html {
background-color: #000 !important;
}
body {
background-color: transparent !important;
}
}
/* Ensure no horizontal scroll and fix double vertical scroll */
html {
overflow-x: hidden !important;
overflow-y: auto !important;
}
body {
overflow-x: hidden !important;
overflow-y: visible !important;
position: relative;
width: 100% !important;
margin: 0;
padding: 0;
}
/* FIX DEFINITIVO POSICION FLECHA SUBIR (v25.10) */
.back-to-top,
#backToTop {
right: 30px !important;
left: auto !important;
bottom: 100px !important;
position: fixed !important;
display: flex !important;
z-index: 9999 !important;
}
@media (max-width: 768px) {
.back-to-top,
#backToTop {
right: 15px !important;
left: auto !important;
bottom: 85px !important;
}
}
/* ========================================
MODAL QR DE PAGO
======================================== */
.qr-modal {
display: none;
position: fixed;
inset: 0;
z-index: 9999999;
align-items: center;
justify-content: center;
}
.qr-modal.active {
display: flex;
}
.qr-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.qr-modal-content {
position: relative;
z-index: 1;
background: linear-gradient(135deg, #1a0a18 0%, #270d24 100%);
border: 1px solid rgba(168, 85, 247, 0.3);
border-radius: 20px;
padding: 2.5rem 2rem 2rem;
max-width: 420px;
width: 90%;
text-align: center;
box-shadow: 0 0 60px rgba(90, 20, 81, 0.6);
animation: qrModalIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes qrModalIn {
from { opacity: 0; transform: scale(0.85) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.qr-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255,255,255,0.08);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
color: #fff;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.qr-modal-close:hover {
background: rgba(168, 85, 247, 0.4);
}
.qr-modal-body h3 {
font-family: var(--font-main);
color: #fff;
font-size: 1.4rem;
margin-bottom: 1.5rem;
font-weight: 700;
}
.qr-image-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.2rem;
border-radius: 12px;
overflow: hidden;
background: #fff;
padding: 0.8rem;
}
.qr-image-enlarged {
width: 100%;
max-width: 300px;
height: auto;
display: block;
}
.qr-modal-body p {
color: rgba(255,255,255,0.65);
font-size: 0.9rem;
margin: 0;
}
/* ========================================= */
/* BOTÓN FLOTANTE DE WHATSAPP */
/* ========================================= */
.whatsapp-float {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 9999;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #25d366, #128c7e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45), 0 2px 8px rgba(0,0,0,0.3);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
animation: waBounce 2.4s ease-in-out infinite;
}
.whatsapp-float i {
font-size: 2rem;
color: #fff;
line-height: 1;
}
.whatsapp-float:hover {
transform: scale(1.15) translateY(-4px);
box-shadow: 0 12px 36px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0,0,0,0.3);
animation-play-state: paused;
}
@keyframes waBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@media (max-width: 768px) {
.whatsapp-float {
bottom: 1.4rem;
right: 1.4rem;
width: 54px;
height: 54px;
box-shadow: 0 5px 18px rgba(37, 211, 102, 0.45), 0 2px 6px rgba(0,0,0,0.25);
}
.whatsapp-float i {
font-size: 1.75rem;
}
}
/* ========================================= */
/* WHATSAPP ICON OVERRIDES */
/* ========================================= */
.wa-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
flex-shrink: 0;
}
.wa-icon svg {
width: 100%;
height: 100%;
display: block;
}
.whatsapp-program-btn .wa-icon {
width: 34px;
height: 34px;
transition: transform 0.3s ease, filter 0.3s ease;
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22));
}
.whatsapp-program-btn:hover {
background: rgba(37, 211, 102, 0.14);
border-color: rgba(37, 211, 102, 0.55);
}
.whatsapp-program-btn:hover .wa-icon {
transform: scale(1.07);
filter: drop-shadow(0 0 12px rgba(37, 211, 102, 0.32));
}
.icon-link .wa-icon {
width: 24px;
height: 24px;
transition: transform 0.3s ease, filter 0.3s ease;
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}
.icon-link:hover {
background: rgba(37, 211, 102, 0.16);
border-color: rgba(37, 211, 102, 0.55);
transform: scale(1.08);
}
.icon-link:hover .wa-icon {
transform: scale(1.06);
filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.32));
}
.float-whatsapp,
.whatsapp-float {
width: 72px;
height: 72px;
bottom: max(18px, env(safe-area-inset-bottom));
right: max(18px, env(safe-area-inset-right));
background: radial-gradient(circle at center,
rgba(37, 211, 102, 0.3) 0%,
rgba(37, 211, 102, 0.14) 42%,
rgba(37, 211, 102, 0) 72%);
border-radius: 50%;
text-decoration: none;
transition: transform 0.3s ease, filter 0.3s ease;
box-shadow: none;
}
.float-whatsapp .wa-icon,
.whatsapp-float .wa-icon {
width: 56px;
height: 56px;
filter: drop-shadow(0 0 16px rgba(37, 211, 102, 0.32)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.34));
transition: transform 0.3s ease, filter 0.3s ease;
}
.whatsapp-float i {
display: none;
}
.float-whatsapp:hover,
.whatsapp-float:hover {
transform: translateY(-4px) scale(1.04);
}
.float-whatsapp:hover .wa-icon,
.whatsapp-float:hover .wa-icon {
transform: scale(1.06);
filter: drop-shadow(0 0 20px rgba(37, 211, 102, 0.42)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.38));
}
/* ========================================= */
/* SECCIÓN: TRABAJA CON NOSOTROS (WORK WITH US) */
/* ========================================= */
.trabaja-hero {
text-align: center;
padding: 2rem 0;
}
.trabaja-intro-text {
max-width: 800px;
margin: 1.5rem auto 0;
line-height: 1.7;
opacity: 0.85;
font-size: 1.05rem;
}
.works-grid-form {
display: flex;
flex-direction: column;
gap: 2.5rem;
max-width: 1100px !important;
margin: 0 auto;
}
.form-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.full-width-field {
grid-column: span 3;
}
.input-group label {
display: block;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 0.6rem;
font-weight: 600;
}
.form-files-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.file-drop-area {
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
transition: all 0.3s ease;
}
.file-drop-area:hover {
background: rgba(255, 255, 255, 0.06);
border-color: var(--primary-color);
}
.file-label {
display: block;
font-size: 0.85rem;
margin-bottom: 1rem;
color: var(--accent-color);
}
.file-input-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
}
.file-input-wrapper input[type="file"] {
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.file-custom-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 0.8rem 1.2rem;
border-radius: 8px;
font-weight: 700;
font-size: 0.9rem;
pointer-events: none;
transition: background 0.3s ease;
}
.file-input-wrapper:hover .file-custom-btn {
background: rgba(168, 85, 247, 0.3);
}
.file-name {
display: block;
margin-top: 0.8rem;
font-size: 0.8rem;
opacity: 0.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Checkbox Estilizado */
.checkbox-container {
display: flex;
align-items: center;
gap: 1rem;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 0.85rem;
user-select: none;
color: rgba(255, 255, 255, 0.7);
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 22px;
width: 22px;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 4px;
border: 1.5px solid rgba(255, 255, 255, 0.2);
}
.checkbox-container:hover input ~ .checkmark {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--primary-color);
}
.checkbox-container input:checked ~ .checkmark {
background-color: var(--primary-color);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.form-footer-works {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
margin-top: 1rem;
}
.works-submit-btn {
min-width: 240px;
display: flex;
align-items: center;
justify-content: center;
gap: 1.2rem;
}
@media (max-width: 768px) {
.form-grid, .form-files-container {
grid-template-columns: 1fr;
}
.full-width-field {
grid-column: span 1;
}
.form-footer-works {
flex-direction: column;
align-items: flex-start;
}
.works-submit-btn {
width: 100%;
}
}
/* ============================================================ */
/* BLOQUE DE CONTROL DE SCROLL GLOBAL - PRIORIDAD MÁXIMA */
/* ============================================================ */
html {
overflow-x: hidden !important;
overflow-y: auto !important;
scrollbar-gutter: auto !important;
height: auto !important;
}
body {
overflow-x: hidden !important;
overflow-y: visible !important;
height: auto !important;
min-height: 100vh;
}
.page-content,
main,
.directory-hero,
.container,
.directory-page,
#main-content {
overflow: visible !important;
overflow-y: visible !important;
height: auto !important;
min-height: 0 !important;
display: block; /* Asegurar flujo normal */
}
/* Forzar desaparición de barras internas en cualquier navegador */
* {
scrollbar-width: none !important; /* Firefox */
}
html {
scrollbar-width: auto !important; /* Firefox */
}
/* Chrome, Safari, Edge */
*::-webkit-scrollbar {
display: none !important;
}
html::-webkit-scrollbar {
display: block !important;
width: 10px;
}
html::-webkit-scrollbar-track {
background: #0f0f15;
}
html::-webkit-scrollbar-thumb {
background: #ff2ead;
border-radius: 10px;
}