/* ============================================================ DISNEY DIPLOMADO — styles.css ============================================================ */ /* ── Waltograph ───────────────────────────────────────────── Coloca los archivos en assets/fonts/ Descarga: https://www.dafont.com/waltograph.font ─────────────────────────────────────────────────────────── */ @font-face { font-family: 'Waltograph'; src: url('assets/fonts/waltographUI.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } html { scroll-behavior: smooth; /* Esto hace que el viaje sea un deslizamiento suave */ scroll-padding-top: 80px; /* Si tienes un menú fijo arriba, esto evita que tape el título al llegar */ } /* ── Poppins: cargada vía Google Fonts en ─────────── */ /* ── Paleta oficial Disney / Mágica ─────────────────────── */ :root { --powder-blue: #F2F2F2; /* Fondo base */ --disney-gold: #D4AF37; /* Dorado prestigio */ --magic-purple: #A569BD; /* Morado mágico */ --pixie-pink: #FF69B4; /* Rosado vibrante */ --disney-red: #D9232A; /* Rojo Mickey */ --hero-overlay: rgba(10, 31, 68, 0.6); /* Capa azul marino/morado para video hero */ --disney-green: #98FB98; /* ── Nuevos resplandores mágicos ── */ --magic-glow-gold: rgba(255, 215, 0, 0.4); /* Resplandor dorado suave */ --magic-glow-pink: rgba(255, 105, 180, 0.5); /* Resplandor rosa hover */ --magic-glow-purple: rgba(165, 105, 189, 0.5); /* Resplandor morado profund.*/ --powder-blue-base: #B0E0E6; /* Fondo PowderBlue canónico */ --isla-glass: rgba(255, 255, 255, 0.2); /* Opacidad base cristal */ } /* ── Base ───────────────────────────────────────────────── */ body { background-color: var(--powder-blue); background-color: #F2F2F2; font-family: 'Poppins', sans-serif; margin: 0; } /* ── Botones ────────────────────────────────────────────── */ .btn { border-radius: 50px; transition: 0.3s; font-family: 'Poppins', sans-serif; font-weight: 700; text-decoration: none; display: inline-block; cursor: pointer; border: none; } /* CTA principal — Hero */ .btn-primary { background-color: var(--disney-red); color: #ffffff; } .btn-primary:hover { background-color: var(--disney-gold); box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5); } /* CTA secundario — resto de secciones */ .btn-secondary { background-color: var(--disney-gold); color: #ffffff; } .btn-secondary:hover { background-color: var(--magic-purple); } /* ── Hero Section ────────────────────────────────────────── */ #hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Overlay: gradiente de azul marino profundo (izquierda) → transparente (derecha) */ .overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10, 31, 68, 0.85) 0%, rgba(10, 31, 68, 0.60) 50%, rgba(10, 31, 68, 0.10) 100%); z-index: 1; } /* Wrapper posicionado sobre overlay */ .hero-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; padding: 0 2rem; } /* ── Split Grid ─────────────────────────────────────────── */ .hero-split-container { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3rem; align-items: center; } /* ── Columna izquierda ──────────────────────────────────── */ .hero-left { color: #ffffff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } .disney-magic-title { font-family: 'Waltograph', cursive; font-weight: normal; font-size: clamp(2rem, 4.5vw, 3.8rem); color: #ffffff; line-height: 1.15; margin-bottom: 0.75rem; } .disney { font-family: 'Waltograph', cursive; } .disney-magic-title .title-sub { display: block; font-size: 0.55em; font-size: 1.3em; font-family: 'Poppins', sans-serif; font-weight: 500; letter-spacing: 0.04em; color: #ffffff; } .hero-subtitle { font-family: 'Poppins', sans-serif; font-size: clamp(1.2rem, 1.5vw, 1.05rem); color: #ffffff; margin-bottom: 1.25rem; opacity: 0.9; } .hero-intro { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.15rem); color: #ffffff; margin-bottom: 1rem; line-height: 1.5; } .hero-impact { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: clamp(1.0rem, 1.3vw, 0.98rem); color: rgba(255, 255, 255, 0.85); line-height: 1.7; } /* ── Columna derecha: contiene el formulario ────────────── */ .hero-right { display: flex; flex-direction: column; } .btn-primary { padding: 0.9rem 2.2rem; font-size: 1rem; } /* ── Formulario de Inscripción — Glassmorphism ──────────── */ #form-diplomado { background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.3); padding: 2rem 1.75rem; box-shadow: 0 8px 40px rgba(10, 31, 68, 0.35); } .form-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.5rem; color: #ffffff; text-align: center; letter-spacing: 0.04em; margin: 0 0 0.4rem; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .form-subtitle { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 1.2rem; color: rgba(255, 255, 255, 0.85); text-align: center; line-height: 1.5; margin: 0 0 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.85rem; } .form-group label { font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 700; color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"] { width: 100%; padding: 0.6rem 0.85rem; border: 1px solid #ccc; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 0.87rem; color: #222; background: #fff; outline: none; transition: border-color 0.25s, box-shadow 0.25s; box-sizing: border-box; } .form-group input:focus { border-color: var(--disney-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28), 0 0 12px rgba(212, 175, 55, 0.2); } /* ── Campo de teléfono: selector + número ───────────────── */ .phone-field { display: flex; gap: 0.5rem; } #country-code { flex: 0 0 auto; padding: 0.6rem 0.5rem; border: 1px solid #ccc; border-radius: 8px; font-family: 'Poppins', sans-serif; font-size: 0.85rem; color: #222; background: #fff; outline: none; cursor: pointer; transition: border-color 0.25s, box-shadow 0.25s; } #country-code:focus { border-color: var(--disney-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28); } .phone-field input[type="tel"] { flex: 1; min-width: 0; } /* ── Botón de envío: ancho completo ─────────────────────── */ .btn-full { display: block; width: 100%; text-align: center; margin-top: 0.5rem; padding: 0.85rem; font-size: 0.95rem; box-sizing: border-box; } /* ── Animaciones de Entrada ─────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .hero-left { animation: fadeInUp 0.8s ease both; } .hero-right { animation: fadeInUp 0.8s ease 0.25s both; } /* ── Botón: efecto shine recorriendo de izq a der ───────── */ @keyframes btnShine { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .btn-primary { position: relative; overflow: hidden; background-image: linear-gradient(105deg, var(--disney-red) 0%, var(--disney-red) 40%, rgba(255, 255, 255, 0.45) 50%, var(--disney-red) 60%, var(--disney-red) 100%); background-size: 200% auto; animation: btnShine 3s linear infinite; } .btn-primary:hover { animation: none; background-image: none; background-color: var(--disney-gold); box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5); } /* ============================================================ SOLUCIÓN FINAL: HERO COMPLETO SIN CORTES ============================================================ */ @media (max-width: 1024px) { /* 1. Liberamos la sección: Que crezca lo que necesite */ #hero { height: auto !important; /* Quitamos la cárcel del 100vh */ min-height: 100vh !important; /* Como mínimo que mida la pantalla */ display: block !important; /* Flujo natural de arriba a abajo */ padding-top: 120px !important; /* Espacio para que el header NO tape el título */ padding-bottom: 60px !important; /* Respiro al final */ overflow: visible !important; /* Permitimos que se vea todo */ } /* 2. El video y la capa azul deben estirarse con el nuevo alto */ .hero-video, .overlay { position: absolute !important; height: 100% !important; width: 100% !important; object-fit: cover !important; z-index: -1; } /* 3. Contenedor de contenido: Uno debajo del otro */ .hero-content { max-width: 100% !important; padding: 0 20px !important; } .hero-split-container { display: flex !important; flex-direction: column !important; /* Texto arriba, Formulario abajo */ gap: 30px !important; height: auto !important; } /* 4. Ajustes de Texto */ .hero-left { text-align: center !important; width: 100% !important; } .disney-magic-title { font-size: 1.8rem !important; line-height: 1.2 !important; } /* 5. El Formulario: Que se vea entero */ .hero-right { width: 100% !important; } #form-diplomado { width: 100% !important; max-width: 420px !important; margin: 0 auto !important; padding: 25px 20px !important; background: rgba(255, 255, 255, 0.2) !important; /* Efecto cristal */ backdrop-filter: blur(10px) !important; border-radius: 20px !important; display: block !important; } } /* --- RESPONSIVE MOBILE (< 1024px) --- */ @media (max-width: 1024px) { .mobile-nav-toggle { display: flex; /* Aparece en móvil */ } /* Transformamos tu nav-links actual en un menú lateral */ .nav-links { position: fixed; top: 0; right: -100%; /* Escondido a la derecha */ width: 280px; height: 100vh; background: white; z-index: 1000; padding: 80px 30px; transition: right 0.4s cubic-bezier(0.77,0.2,0.05,1.0); box-shadow: -10px 0 20px rgba(0,0,0,0.1); } .nav-links ul { flex-direction: column; /* Lista vertical */ gap: 20px; align-items: flex-start; } .nav-link { font-size: 1.2rem; color: #0a1f44 !important; } /* Cuando el menú está abierto */ .main-nav.mobile-open .nav-links { right: 0; } .main-nav.mobile-open .nav-overlay { display: block; } /* Animación del botón hamburguesa a "X" */ .main-nav.mobile-open .mobile-nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .main-nav.mobile-open .mobile-nav-toggle span:nth-child(2) { opacity: 0; } .main-nav.mobile-open .mobile-nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* El botón de acción lo podemos ocultar o mover según prefieras */ .btn-nav-primary { display: none; /* Normalmente se oculta para dejar espacio al logo y hamburguesa */ } } /* ============================================================ HEADER: Barra de Navegación Principal ============================================================ */ /* ── Sticky glassmorphism nav ───────────────────────────── */ .main-nav { position: sticky; top: 0; z-index: 1000; width: 100%; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(212, 175, 55, 0.18); box-shadow: 0 2px 24px rgba(10, 31, 68, 0.08); transition: background 0.3s ease, box-shadow 0.3s ease; } /* Darker on scroll (class added by JS) */ .main-nav.scrolled { background: rgba(255, 255, 255, 0.97); box-shadow: 0 4px 32px rgba(10, 31, 68, 0.14); } /* ── Inner layout ────────────────────────────────────────── */ .nav-inner { max-width: 1300px; margin: 0 auto; padding: 0 2rem; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* ── Logo ────────────────────────────────────────────────── */ .logo-container { flex: 0 0 auto; } .logo-link { display: flex; align-items: center; text-decoration: none; } .logo-img { height: 70px; width: auto; object-fit: contain; display: block; } .logo-text { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--university-navy, #0a1f44); letter-spacing: 0.08em; } /* ── Nav links ───────────────────────────────────────────── */ .nav-links ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2rem; } .nav-link { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 1.3rem; color: #0a1f44; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; position: relative; padding-bottom: 3px; transition: color 0.25s ease; } /* Animated gold underline on hover */ .nav-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--disney-gold); border-radius: 2px; transition: width 0.3s ease; } .nav-link:hover { color: var(--disney-gold); } .nav-link:hover::after { width: 100%; } /* ── Botón de acción de navegación ────────────────────────── */ .btn-nav-primary { flex: 0 0 auto; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.3rem; color: #ffffff; background: linear-gradient(135deg, #0a1f44 0%, #1a3a6a 100%); border-radius: 50px; padding: 0.65rem 1.5rem; text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 16px rgba(10, 31, 68, 0.25); } .btn-nav-primary:hover { background: linear-gradient(135deg, var(--disney-gold) 0%, #e8c547 100%); box-shadow: 0 6px 24px rgba(212, 175, 55, 0.45); transform: translateY(-1px); color: #0a1f44; } /* ── .disney — Waltograph inline span ────────────────────── */ /* Used in nav button and any future titles */ .disney { font-family: 'Waltograph', cursive; font-weight: normal; font-size: 1.05em; /* slightly larger to account for font's x-height */ letter-spacing: 0.01em; } /* ── Responsive: colapsa nav en mobile ────────────────────── */ @media (max-width: 900px) { .nav-links { display: none; /* burger menu to be added later */ } .nav-inner { height: 60px; padding: 0 1.25rem; } .btn-nav-primary { font-size: 0.75rem; padding: 0.55rem 1.1rem; } .logo-img { height: 36px; } } /* ── PERFIL Y OBJETIVO ────────────────────── */ #perfil-objetivo-v2 { /* Esta es la línea de la "capa" usando tu azul corporativo con 75% de opacidad */ background-image: linear-gradient(rgba(10, 31, 68, 0.75), rgba(147, 164, 167, 0.75)), url('assets/img/fondo/freepik_recrea-la-img1-elimina-a-los-ninos-de-la-imagen-las-personas-deben-estar-vestidas-de-manera-corporativa-con-poses-profesionales-y-debes-crearla.jpeg'); background-size: cover; background-position: center; background-attachment: fixed; /* Opcional: para efecto parallax */ /* IMPORTANTE: Cambia el color del texto a blanco para que se lea sobre el azul */ color: #ffffff; padding: 100px 5%; font-family: 'Poppins', sans-serif; overflow: hidden; } /* Ajuste para que el texto de intro también sea blanco */ #perfil-objetivo-v2 .intro-text { color: #ffffff; font-size: 1.5em; } .disney-container { max-width: 1200px; margin: 0 auto; } /* Títulos */ .waltograph-title { font-family: 'Waltograph', cursive; font-size: clamp(3.5rem, 8vw, 5.5rem); color: #D4AF37; /* Disney Gold */ text-align: center; margin-bottom: 20px; } .intro-text { text-align: center; font-size: 1.25rem; max-width: 900px; margin: 0 auto 80px; line-height: 1.6; } .intro-text span { font-weight: 700; } /* Layout de Dos Columnas */ .dual-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-bottom: 10px; } .magic-card { text-align: center; } .card-subtitle { font-family: 'Poppins', sans-serif; font-size: 3.0rem; font-weight: 700; margin-bottom: 10px; /* --- LÓGICA DE MAGIA --- */ background: linear-gradient( 90deg, #A569BD, /* Púrpura Mágico */ #D4AF37, /* Dorado */ var(--disney-green), /* Rojo Disney */ #A569BD /* Cierra el ciclo */ ); background-size: 200% auto; -webkit-background-clip: text; /* Recorta el fondo al texto */ -webkit-text-fill-color: transparent; /* Hace el texto transparente para ver el fondo */ display: inline-block; position: relative; /* Animación del brillo y del pulso */ animation: magic-shine 4s linear infinite, magic-pulse 2s ease-in-out infinite alternate; } /* 1. Animación del brillo que recorre las letras */ @keyframes magic-shine { to { background-position: 200% center; } } /* 2. Animación de resplandor (Glow) */ @keyframes magic-pulse { from { filter: drop-shadow(0 0 2px rgba(165, 105, 189, 0.2)); } to { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.6)); transform: scale(1.1); /* Pequeño latido de crecimiento */ } } /* Imágenes 100% Redondas */ .circle-frame { width: 280px; height: 280px; margin: 0 auto 40px; border-radius: 100%; /* REDONDAS TOTALES */ border: 6px solid white; overflow: hidden; box-shadow: 0 15px 45px rgba(0,0,0,0.1); background: #fff; } .round-img { width: 100%; height: 100%; object-fit: cover; } .card-description p { margin-bottom: 15px; line-height: 1.8; font-size: 1.2em; } .card-description span { font-weight: 700; font-size: 1.3em; } /* Cierre Dorado */ .gold-footer { text-align: center; border-top: 2px solid rgba(212, 175, 55, 0.3); } .gold-footer { text-align: center; border-top: 2px solid rgba(212, 175, 55, 0.3); padding: 60px 20px; /* Un poco de aire para que respire la frase */ } .gold-footer p { font-size: 2.2rem; font-weight: 800; line-height: 1.3; margin: 0; display: inline-block; /* 1. Creamos el degradado de oro */ background: linear-gradient( to right, #D4AF37 20%, #FFF 40%, #FFF 50%, #D4AF37 70% ); background-size: 200% auto; /* 2. Recortamos el fondo al texto */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* 3. Animación infinita del brillo */ animation: shine-magic 5s linear infinite; /* 4. Sutil resplandor de fondo */ filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.2)); } /* Lógica del movimiento del brillo */ @keyframes shine-magic { to { background-position: 200% center; } } /* Ajuste para móviles */ @media (max-width: 768px) { .gold-footer p { font-size: 1.5rem; } } /* Ajustes para móviles */ @media (max-width: 850px) { .dual-layout { grid-template-columns: 1fr; } .circle-frame { width: 220px; height: 220px; } .waltograph-title { font-size: 3.5rem; } } /* ── 15 razones ────────────────────── */ #quince-razones-modelo { /* Esta es la línea de la "capa" usando tu azul corporativo con 75% de opacidad */ background-image: linear-gradient(rgba(10, 31, 68, 0.75), rgba(147, 164, 167, 0.75)), url('assets/img/fondo/back-02.webp'); background-size: cover; background-position: center; background-attachment: fixed; /* Opcional: para efecto parallax */ /* IMPORTANTE: Cambia el color del texto a blanco para que se lea sobre el azul */ color: var(--university-navy); padding: 100px 5%; font-family: 'Poppins', sans-serif; overflow: hidden; } .disney-container { max-width: 1100px; margin: 0 auto; } .incluye{ font-family: 'Poppins', sans-serif; font-size: 4.5rem; text-align: center; margin-bottom: 60px; color: var(--pixie-pink); /* Magic Purple */ } /* --- Variables de Color (Disney Palette) --- */ :root { --pixie-purple: #A569BD; /* Tu Morado Mágico original */ --disney-gold: #D4AF37; /* Dorado Real Disney */ --disney-red: #D9232A; /* Rojo Mickey */ --disney-blue: #0A1F44; /* Azul profundo del overlay */ --powder-blue: #B0E0E6; /* Azul claro mágico */ } /* --- Contenedor Principal del Título --- */ .incluye { font-family: 'Poppins', sans-serif; font-size: 4.5rem; /* Tamaño del texto principal */ text-align: center; /* Centrado horizontal */ margin-bottom: 60px; /* Espacio con la sección siguiente */ color: var(--pixie-pink); /* Color principal del texto */ position: relative; /* NECESARIO: Base para posicionar las estrellas */ display: block; /* Ocupa todo el ancho */ overflow: visible; /* Permite que las estrellas floten fuera si es necesario */ } /* --- Ajuste Sofisticado del Span (Disney) --- */ .incluye .disney { color: var(--disney-gold); /* Color dorado para la palabra Disney */ font-weight: 800; /* Grosor de la fuente */ position: relative; display: inline-block; /* CORRECCIÓN DE INTENSIDAD: Brillo mucho más suave y controlado */ /* Bajamos el radio de blur a 8px y la opacidad a 0.3 */ text-shadow: 0 0 8px rgba(212, 175, 55, 0.3); /* Pequeño pulso de luz casi imperceptible */ animation: magic-glow-soft 4s ease-in-out infinite alternate; } /* --- Estilo Base para TODAS las Estrellas --- */ .incluye .sparkle { position: absolute; /* Flotan sobre el título */ opacity: 0; /* Empiezan invisibles */ font-size: 1.2rem; /* Tamaño de la estrella ✦ */ pointer-events: none; /* No interfieren con los clics */ z-index: 10; /* Por encima de todo */ } /* --- Distribución y Color de cada Estrella (s1 a s5) --- */ /* Estrella 1: Arriba Izquierda / Color Morado */ .incluye .s1 { top: -10px; /* Posición vertical inicial */ left: 5%; /* Posición horizontal inicial */ color: var(--pixie-purple); /* Color de la estrella */ animation: sparkle-float-s1 5s infinite; /* Animación específica */ } /* Estrella 2: Centro Arriba / Color Dorado */ .incluye .s2 { top: -20px; left: 40%; color: var(--disney-gold); animation: sparkle-float-s2 6s infinite 1s; /* Retraso de 1s para desincronizar */ font-size: 1.4rem; /* Un poco más grande */ } /* Estrella 3: Arriba Derecha / Color Rojo */ .incluye .s3 { top: -5px; right: 8%; color: var(--disney-red); animation: sparkle-float-s3 5s infinite 2.5s; /* Retraso de 2.5s */ } /* Estrella 4: Abajo Izquierda / Color Powder Blue */ .incluye .s4 { bottom: 5px; /* Posición vertical final */ left: 15%; color: var(--powder-blue); animation: sparkle-float-s4 7s infinite 0.5s; font-size: 1rem; /* Un poco más pequeña */ } /* Estrella 5: Abajo Derecha / Color Dorado */ .incluye .s5 { bottom: -10px; right: 20%; color: var(--disney-gold); animation: sparkle-float-s5 6s infinite 3s; } /* --- Lógica de Animaciones (Keyframes) --- */ /* 1. Pulso de brillo suavizado para el span */ @keyframes magic-glow-soft { from { text-shadow: 0 0 5px rgba(212, 175, 55, 0.2); } to { text-shadow: 0 0 10px rgba(212, 175, 55, 0.4); } } /* 2. Keyframes de vuelo para cada estrella (Diferentes rutas para orgánico) */ /* Estrella 1: Flota suave hacia arriba y derecha */ @keyframes sparkle-float-s1 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(20px, -20px) scale(1.2) rotate(90deg); opacity: 0.8; } 80% { opacity: 0; } 100% { transform: translate(40px, -40px) scale(0); opacity: 0; } } /* Estrella 2: Vuelo más vertical y giro completo */ @keyframes sparkle-float-s2 { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; } 30% { opacity: 1; } 60% { transform: translate(5px, -30px) scale(1.1) rotate(180deg); opacity: 0.9; } 100% { transform: translate(10px, -60px) scale(0) rotate(360deg); opacity: 0; } } /* Estrella 3: Vuelo corto y desvanecimiento rápido */ @keyframes sparkle-float-s3 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 25% { opacity: 1; } 60% { transform: translate(-15px, -15px) scale(1) rotate(-45deg); opacity: 0.7; } 100% { transform: translate(-30px, -30px) scale(0); opacity: 0; } } /* Estrella 4: Flota hacia la derecha y crece */ @keyframes sparkle-float-s4 { 0% { transform: translate(0, 0) scale(0); opacity: 0; } 40% { opacity: 1; transform: translate(10px, 0) scale(1); } 80% { opacity: 0.5; transform: translate(30px, -10px) scale(1.2); } 100% { transform: translate(50px, -20px) scale(0); opacity: 0; } } /* Estrella 5: Vuelo hacia arriba con giro */ @keyframes sparkle-float-s5 { 0% { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(-20px, -35px) scale(1) rotate(180deg); opacity: 0.8; } 100% { transform: translate(-40px, -50px) scale(0) rotate(360deg); opacity: 0; } } /* --- Ajuste Mobile --- */ @media (max-width: 768px) { .incluye { font-size: 2.2rem; /* Reducimos fuente para móviles */ margin-bottom: 30px; } .incluye .sparkle { font-size: 0.8rem; /* Estrellas más pequeñas en móvil */ } } /* Bloques y Barras de Título */ .magic-block { margin-bottom: 80px; } .block-header { font-family: 'Poppins', sans-serif; font-weight: 700; color: #ffffff; padding: 12px 25px; margin-bottom: 40px; font-size: 1.7rem; letter-spacing: 1px; text-align: center; } .red-bar { background-color: #D9232A; } .purple-bar { background-color: #A569BD; } .gold-bar { background-color: #D4AF37; } /* Configuración de Círculos */ .circles-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; } .circle-item { text-align: center; } .img-frame { width: 160px; height: 160px; margin: 0 auto 20px; border-radius: 50%; /* 100% circular */ border: 4px solid #D4AF37; /* Disney Gold Ring */ overflow: hidden; background: white; } .img-frame img { width: 100%; height: 100%; object-fit: cover; } .reason-text { font-weight: 600; font-size: 1.3rem; line-height: 1.4; color: #ffffff; } /* --- Variables de Color (Reutilizando tu paleta) --- */ :root { --disney-gold: #D4AF37; /* Dorado Real */ } /* --- TÍTULO PRINCIPAL (Sin cambios) --- */ .incluye { /* ... Tus estilos de Poppins, 4.5rem, `#0A1F44`, etc. ... */ position: relative; display: block; } /* --- Ajuste del Span (Disney) (Sin cambios o con tu ajuste suave) --- */ .incluye .disney { color: var(--disney-gold); font-weight: 800; } /* --- ESTILOS DE EQUILIBRIO PARA EL ESPACIO VACÍO --- */ /* Contenedor para el primer bloque (Lugar del espacio vacío en image_21.png) */ .text-with-image-grid-fix { display: grid; /* Dividimos: 1.5fr para el texto, 1fr para la imagen */ grid-template-columns: 1.5fr 1fr; gap: 30px; /* Espacio de separación entre texto e imagen */ align-items: center; /* Centramos verticalmente la imagen con el grupo de textos */ margin-top: 20px; } /* Contenedor para los bloques 2 y 3 (stacked-list con imagen) */ .stacked-list-with-image-fix { display: grid; /* Dividimos: 1.5fr para la lista, 1fr para la imagen */ grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; /* Centramos verticalmente */ } /* Aseguramos que las listas de texto tomen el ancho de su columna */ .text-with-image-grid-fix .list-rows, .stacked-list-with-image-fix .stacked-list { flex: 1; } /* --- ESTILOS DE LA IMAGEN DE EQUILIBRIO (Tus Requisitos) --- */ .balance-image-container img { width: 100%; /* La imagen ocupa todo el ancho de su columna */ height: auto; /* Mantiene la proporción */ display: block; /* TUS REQUISITOS ESPECÍFICOS: */ border-radius: 10px; /* Pequeño borde radio 10px */ border: none !important; /* Forzamos SIN color de borde */ box-shadow: none !important; /* Forzamos SIN sombra */ background: transparent; /* Fondo transparente */ } /* --- AJUSTE RESPONSIVE: En celulares, la imagen se va abajo --- */ @media (max-width: 900px) { .text-with-image-grid-fix, .stacked-list-with-image-fix { grid-template-columns: 1fr; /* Volvemos a una sola columna */ } } /* Configuración de Listas Horizontales (Sin Cards) */ .list-rows, .stacked-list { display: flex; flex-direction: column; gap: 10px; } .list-item { display: flex; align-items: center; gap: 20px; padding: 15px 0; border-bottom: 1px solid rgba(212, 175, 55, 0.3); /* Línea dorada sutil */ color: #ffffff; } .flaticon-img { width: 55px; height: 55px; object-fit: contain; } .list-item p { font-weight: 500; margin: 0; font-size: 1.1em; } /* Layout Mixto (Imagen al lado de Lista) */ .split-layout { display: grid; grid-template-columns: 200px 1fr; gap: 50px; align-items: center; } .side-circle .img-frame { width: 180px; height: 180px; } /* Responsive */ @media (max-width: 850px) { .circles-row, .split-layout { grid-template-columns: 1fr; } .side-circle { margin-bottom: 30px; } } /* Layout Principal */ .main-split { display: flex; gap: 50px; align-items: flex-start; } .content-side { flex: 0 0 60%; /* El texto ocupa el 60% */ } .sticky-side { flex: 0 0 40%; /* La imagen ocupa el 40% */ position: sticky; top: 100px; /* Se queda a 100px del tope de la pantalla */ height: 500px; } .image-viewer { width: 100%; height: 100%; position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); } .side-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; /* Todas invisibles por defecto */ transition: opacity 0.6s ease-in-out; } .side-img.active { opacity: 1; /* Solo la activa se ve */ } /* Ajuste móvil para que no se rompa */ @media (max-width: 992px) { .main-split { flex-direction: column; } .content-side, .sticky-side { flex: 0 0 100%; width: 100%; } .sticky-side { position: relative; top: 0; height: 300px; order: -1; } } /* Layout General */ #razones-inscripcion-mix { background-color: #B0E0E6; /* PowderBlue base */ padding: 80px 0; font-family: 'Poppins', sans-serif; } .main-split { display: flex; gap: 60px; align-items: flex-start; } .content-side { flex: 0 0 60%; } /* Formulario Sticky */ .sticky-side { flex: 0 0 35%; position: sticky; top: 50px; /* Distancia del tope */ } .form-container { padding: 40px; background: rgba(255, 255, 255, 0.2); /* Integrado, no es card sólida */ border-radius: 30px; border: 2px solid #D4AF37; /* Disney Gold */ backdrop-filter: blur(10px); } .waltograph-form-title { font-family: 'Waltograph', cursive; /* */ color: #D4AF37; font-size: 2.8rem; text-align: center; margin-bottom: 30px; } /* Inputs */ .input-group { margin-bottom: 20px; } .input-group label { display: block; color: #1a2a44; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; } .input-group input { width: 100%; padding: 12px 15px; border-radius: 12px; border: 1px solid rgba(176, 224, 230, 0.8); background: white; font-family: 'Poppins', sans-serif; outline: none; transition: 0.3s; } .input-group input:focus { border-color: #A569BD; /* Magic Purple */ box-shadow: 0 0 10px rgba(165, 105, 189, 0.2); } /* BOTÓN POLVO MÁGICO */ .btn-magic-dust { width: 100%; padding: 18px; background-color: #D9232A; /* Disney Red */ color: white; border: none; border-radius: 50px; font-weight: 700; font-size: 1.1rem; cursor: pointer; position: relative; overflow: hidden; transition: 0.4s ease; z-index: 1; } /* Hover Azul Corporativo */ .btn-magic-dust:hover { background-color: #0A1F44; /* Hero Overlay Blue */ transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } /* ------------------ CONTENIDO DEL PROGRAMA ------------------------- */ #programa-completo { /* Esta es la línea de la "capa" usando tu azul corporativo con 75% de opacidad */ background-image: linear-gradient(rgba(10, 31, 68, 0.75), rgba(147, 164, 167, 0.75)), url('assets/img/fondo/5165313.webp'); background-size: cover; background-position: center; background-attachment: fixed; /* Opcional: para efecto parallax */ /* IMPORTANTE: Cambia el color del texto a blanco para que se lea sobre el azul */ color: var(--university-navy); padding: 100px 5%; font-family: 'Poppins', sans-serif; overflow: hidden; } .disney-container { max-width: 1200px; margin: 0 auto; } .waltograph-white-1 { font-family: 'Poppins', sans-serif; font-size: 4rem; text-align: center; color: var(--pixie-pink); margin-bottom: 20px; } .waltograph-white-1 { /* --- Tus Atributos Base --- */ font-family: 'Poppins', sans-serif; font-size: 4rem; text-align: center; color: var(--pixie-pink); margin-bottom: 20px; display: block; /* --- LA MAGIA DISNEY --- */ position: relative; /* 1. Animación de flotado: sube y baja muy suavemente */ /* 2. Animación de brillo: cambia el color de la sombra */ animation: disney-float 3s ease-in-out infinite alternate, disney-glow 4s linear infinite; } .waltograph-white-1 .disney { font-weight: 700; /* Un brillo extra para la palabra clave */ filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5)); } /* --- KEYFRAMES (La lógica del movimiento) --- */ /* Hace que el título flote suave como si no tuviera gravedad */ @keyframes disney-float { from { transform: translateY(0px); } to { transform: translateY(-10px); /* Sube 10px */ } } /* Crea un aura mágica que cambia de color alrededor de las letras */ @keyframes disney-glow { 0%, 100% { text-shadow: 0 0 10px rgba(165, 105, 189, 0.3); /* Resplandor Púrpura */ } 50% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.5); /* Resplandor Dorado */ } } /* --- AJUSTE PARA CELULARES --- */ @media (max-width: 768px) { .waltograph-white { font-size: 2.5rem; /* Evita que el texto se amontone en móvil */ } } .intro-text-poppins { text-align: center; max-width: 800px; margin: 0 auto 100px; font-size: 1.6rem; line-height: 1.6; opacity: 0.9; color: #ffffff; } /* Layout de Módulos */ .module-block { display: flex; align-items: center; gap: 80px; margin-bottom: 150px; } .module-block.reverse { flex-direction: row-reverse; } .module-media, .module-info { flex: 1; } /* EFECTO GOTA SIN BORDES */ .teardrop-l { width: 100%; height: auto; border-radius: 5% 10% 50% 0%; /* Punta arriba-izquierda */ object-fit: cover; } .teardrop-r { width: 100%; height: auto; border-radius: 10% 5% 0% 50%; /* Punta arriba-derecha */ object-fit: cover; } /* Textos internos */ .day-tag { display: inline-block; padding: 5px 15px; border-radius: 4px; font-weight: 700; font-size: 1.1rem; margin-bottom: 15px; color: white; } .red-tag { background-color: #D9232A; } .green-tag { background-color: #2D6A4F; } .blue-tag { background-color: #0077B6; } .purple-tag { background-color: #6A4C93; } .module-info h3 { font-size: 2.8rem; font-weight: 700; margin-bottom: 25px; color: #FFFFFF; } .content-list { list-style: none; padding: 0; margin-bottom: 30px; color: #ffffff; } .content-list li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 1.3rem; } .insight-box { font-style: italic; font-weight: 600; color: #D4AF37; /* Dorado Disney */ margin-bottom: 35px; font-size: 1.2em; } /* Botones */ .module-btns { display: flex; gap: 15px; } .btn-details, .btn-enroll { padding: 12px 30px; border: none; border-radius: 5px; font-weight: 700; cursor: pointer; transition: 0.3s; background-color: #003366; color: white; } /* --- TUS ATRIBUTOS BASE (Inamovibles) --- */ .btn-details, .btn-enroll { padding: 20px 40px; border: none; border-radius: 5px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; /* Cambié a 'all' para transiciones más suaves */ background-color: #003366; /* Tu azul oscuro */ color: white; position: relative; overflow: hidden; /* Necesario para el efecto de brillo interno */ font-size: 1.2em; } /* --- 1. EFECTO CONSTANTE: Pulso sutil (Para el botón de Inscribirse) --- */ /* Queremos que el botón de 'Inscribirse' llame más la atención que el de 'Detalles' */ .btn-enroll { animation: pulse-subtle 2s infinite; background-color: var(--pixie-pink, #A569BD); /* Usando tu morado mágico */ } /* --- 2. EFECTO HOVER: Levitación y Brillo --- */ .btn-details:hover, .btn-enroll:hover { transform: translateY(-4px); /* El botón 'levita' */ box-shadow: 0 10px 20px rgba(0, 51, 102, 0.3); /* Sombra suave para dar profundidad */ filter: brightness(1.2); /* Brilla un poco más al contacto */ } .btn-details:active, .btn-enroll:active { transform: translateY(-1px); /* Efecto de 'presionado' al hacer clic */ } /* --- 3. EFECTO DE DESTELLO (Shiny Swipe) --- */ /* Un rayo de luz que cruza el botón cada cierto tiempo */ .btn-enroll::after { content: ''; position: absolute; top: -50%; left: -100%; width: 50%; height: 200%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(45deg); animation: shiny-swipe 4s infinite; } /* --- LOGICA DE ANIMACIONES (Keyframes) --- */ /* Pulso de tamaño muy pequeño para no marear */ @keyframes pulse-subtle { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } /* El destello que cruza el botón */ @keyframes shiny-swipe { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } .btn-enroll:hover { background-color: white; color: #003366; } /* Responsive */ @media (max-width: 900px) { .module-block, .module-block.reverse { flex-direction: column; text-align: center; } .module-btns { justify-content: center; } } /* ---------------------- ¿A QUIEN VA DIRIGIDO? ----------------------- */ #audiencia-programa { background-color: #B0E0E6; /* PowderBlue */ padding: 100px 5%; font-family: 'Poppins', sans-serif; color: #1a2a44; } #audiencia-programa { /* Esta es la línea de la "capa" usando tu azul corporativo con 75% de opacidad */ background-image: linear-gradient(rgba(10, 31, 68, 0.75), rgba(147, 164, 167, 0.75)), url('assets/img/fondo/di-pdc-overview-hero_16x4.jpg.adapt.nineteen-hundred.jpg'); background-size: cover; background-position: center; background-attachment: fixed; /* Opcional: para efecto parallax */ /* IMPORTANTE: Cambia el color del texto a blanco para que se lea sobre el azul */ color: var(--university-navy); padding: 100px 5%; font-family: 'Poppins', sans-serif; overflow: hidden; } .disney-container { max-width: 1100px; margin: 0 auto; } /* Títulos en Waltograph */ .section-title-walt { font-family: 'Waltograph', cursive; font-size: 3.5rem; color: white; text-align: center; margin-bottom: 60px; } /* --- Variables de Color (Disney Palette) --- */ :root { --pixie-purple: #A569BD; /* Tu Morado Mágico original */ --disney-gold: #D4AF37; /* Dorado Real Disney */ --magic-cyan: #50C0CF; /* Azul Cyan Mágico (Tu azul cyan corporativo) */ } /* --- TÍTULO PRINCIPAL (Con efecto Velo de Galaxia) --- */ .section-title-walt, .main-title-walt { /* --- TUS ATRIBUTOS BASE (Inamovibles) --- */ font-family: 'Waltograph', cursive; font-size: 4.5rem; /* Tamaño del texto principal */ text-align: center; /* Centrado horizontal */ margin-bottom: 60px; /* Espacio con el contenido de abajo */ /* NECESARIO: Base para el posicionamiento y limitación de pseudo-elementos */ position: relative; display: block; /* Ocupa todo el ancho */ /* --- INGENIERÍA DEL NUEVO EFECTO DISNEY: "Velo de la Galaxia Mágica" --- */ /* 1. El truco maestro: El texto se vuelve transparente para dejar ver el fondo de abajo */ color: transparent !important; /* 2. Creamos un fondo con un degradado lineal complejo y colorido de Disney */ background-image: linear-gradient( to right, var(--pixie-purple) 0%, /* Púrpura */ #FFFFFF 15%, /* Blanco Brillante (Destello) */ var(--magic-cyan) 30%, /* Cyan */ #FFFFFF 45%, /* Blanco Brillante (Destello) */ var(--disney-gold) 60%, /* Dorado */ #FFFFFF 75%, /* Blanco Brillante (Destello) */ var(--pixie-purple) 90% /* Vuelve al Púrpura para bucle sin fin */ ); /* 3. Hacemos que el fondo sea mucho más ancho que el texto para que pueda fluir */ background-size: 200% auto; /* 4. Aplicamos el fondo *SÓLO* dentro de las letras (máscara de texto) */ -webkit-background-clip: text; background-clip: text; /* 5. Aseguramos compatibilidad con navegadores antiguos */ -webkit-text-fill-color: transparent; -text-fill-color: transparent; /* 6. Un resplandor exterior suave de Campanilla (campanita) */ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 20px rgba(165, 105, 189, 0.3)); /* 7. ANIMACIONES: Una para el flujo de la galaxia y otra para la "respiración" del resplandor */ animation: walt-cosmos-flow 10s linear infinite, /* Flujo de colores lento y constante */ walt-glow-breath 3s ease-in-out infinite alternate; /* Respiración del aura */ } /* Handling the span 'disney' class if it interferes. We can make it stand out more within the effect. */ .section-title-walt .disney { font-weight: 800; /* keep bold */ /* Make 'disney' word have slightly higher brightness within the effect */ filter: brightness(1.2); } /* --- Lógica de las Animaciones --- */ /* 1. Mueve el gradiente de fondo de izquierda a derecha de forma infinita */ @keyframes walt-cosmos-flow { 0% { background-position: 0% center; /* Comienza en el extremo izquierdo */ } 100% { background-position: 200% center; /* Cruza todo el texto y vuelve a empezar */ } } /* 2. Hace que el resplandor exterior "respire" (crezca y decrezca) */ @keyframes walt-glow-breath { 0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 10px rgba(165, 105, 189, 0.2)); transform: scale(1); /* Escala normal */ } 100% { /* En el punto máximo, el brillo se expande y cambia sutilmente a dorado */ filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 30px rgba(212, 175, 55, 0.6)); /* Cycles to Gold */ transform: scale(1.02); /* Crece un 2% para dar sensación de vida */ } } /* --- Ajuste Mobile --- */ @media (max-width: 768px) { .section-title-walt { font-size: 2.2rem; /* Reducimos fuente para móviles */ background-size: 150% auto; /* Menor movimiento para rendimiento en móvil */ } } .purple-text { color: white; /* Magic Purple */ } /* Grid de Audiencia (4 bloques) */ .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; } .audience-item { background: rgba(255, 255, 255, 0.4); /* Fondo translúcido integrado */ padding: 40px; border-radius: 20px; border-left: 5px solid #D4AF37; /* Detalle en Dorado */ transition: 0.3s ease; } .audience-item h3 { color: white; font-size: 1.8rem; margin-bottom: 15px; font-weight: 700; } .audience-item p { color: white; font-size: 1.2rem; line-height: 1.6; font-weight: 400; } /* Insights destacados */ .main-insight { text-align: center; font-weight: 700; font-size: 1.2rem; color: #D9232A; /* Disney Red */ margin: 40px 0 100px; letter-spacing: 1px; } /* Sección Estratégica */ .strategic-section { text-align: center; } .strategic-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 50px; } .strat-node { background: white; padding: 20px; border-radius: 12px; font-weight: 600; color: #1a2a44; box-shadow: 0 4px 15px rgba(0,0,0,0.05); font-size: 1.2rem; } .footer-insight { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 1.8rem; color: #D4AF37; /* Disney Gold */ margin-top: 40px; } /* Responsive */ @media (max-width: 850px) { .audience-grid, .strategic-list { grid-template-columns: 1fr; } .section-title-walt { font-size: 2.8rem; } } /* ...................................material........................................ */ #detalles-programa-video { position: relative; padding: 120px 5%; min-height: 100vh; overflow: hidden; /* Corta el video excedente */ display: flex; align-items: center; } /* El Video de Fondo */ .video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } #bg-video-include { width: 100%; height: 100%; object-fit: cover; /* Clave: ajusta el video al contenedor sin estirar */ } /* La Capa que creamos (Overlay) */ .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 31, 68, 0.7); /* Tu hero-overlay con un toque más de opacidad */ z-index: 1; } /* Contenido sobre el video */ .relative-content { position: relative; z-index: 2; /* Por encima del video y del overlay */ width: 100%; } /* Estilos de los bloques (se mantienen igual, pero con fondo un poco más sólido para contraste) */ .include-box { background-color: rgba(165, 105, 189, 0.9); /* Púrpura con 90% opacidad */ backdrop-filter: blur(5px); /* Toque extra de cristal moderno */ } .red-box { background-color: rgba(217, 35, 42, 0.9); } .gold-box { background-color: rgba(212, 175, 55, 0.9); } .cert-box { background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); } /*************************************CIERRE **************************************************** */ #registro-agenda-premium{ /* Esta es la línea de la "capa" usando tu azul corporativo con 75% de opacidad */ background-image: linear-gradient(rgba(10, 31, 68, 0.75), rgba(147, 164, 167, 0.75)), url('assets/img/fondo/back-01.webp'); background-size: cover; background-position: center; background-attachment: fixed; /* Opcional: para efecto parallax */ /* IMPORTANTE: Cambia el color del texto a blanco para que se lea sobre el azul */ color: var(--university-navy); padding: 100px 5%; font-family: 'Poppins', sans-serif; overflow: hidden; color: white; } .video-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .booking-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; position: relative; z-index: 2; } /* Columna Izquierda */ .quotes-stack { margin-bottom: 60px; } .mini-quote { font-size: 1.1rem; padding: 15px 20px; border-left: 3px solid #D4AF37; background: rgba(255, 255, 255, 0.05); margin-bottom: 15px; font-style: italic; } .final-manifesto p { font-size: 1.4rem; font-weight: 300; opacity: 0.8; } .gold-text { color: #D4AF37; font-size: 3.5rem; font-weight: 900; margin: 10px 0; } .waltograph-red { font-family: 'Waltograph', cursive; color: #D9232A; font-size: 5rem; line-height: 1; } /* Columna Derecha (Agenda + Form) */ .agenda-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 30px; border-radius: 20px 20px 0 0; border: 1px solid rgba(255,255,255,0.1); } .agenda-title { color: #D4AF37; font-size: 0.9rem; letter-spacing: 2px; margin-bottom: 25px; } .agenda-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } .date-circle { width: 35px; height: 35px; border: 1px solid #D4AF37; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .extra-session { margin-top: 20px; padding-top: 15px; border-top: 1px dashed rgba(212, 175, 55, 0.5); font-size: 0.85rem; color: #B0E0E6; } /* Formulario */ .main-form { background: white; padding: 40px; border-radius: 0 0 20px 20px; color: #1a2a44; } .form-heading { font-weight: 800; margin-bottom: 25px; text-align: center; } .input-box { margin-bottom: 15px; } .input-box input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #ddd; font-family: 'Poppins', sans-serif; } .btn-submit-magic { width: 100%; padding: 18px; background: #D9232A; color: white; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: 0.3s; } .btn-submit-magic:hover { background: #0A1F44; transform: translateY(-3px); } .form-footer { font-size: 0.75rem; text-align: center; margin-top: 15px; opacity: 0.6; } /* Mobile */ @media (max-width: 992px) { .booking-grid { grid-template-columns: 1fr; } .form-side { margin-top: 40px; } } #detalles-programa { padding: 100px 5%; font-family: 'Poppins', sans-serif; color: white; } .main-title-walt { font-family: 'Waltograph', cursive; color: white; font-size: 4rem; text-align: center; margin-bottom: 60px; } /* Grillas dinámicas */ .include-grid { display: flex; flex-direction: column; gap: 20px; max-width: 1200px; margin: 0 auto; } .grid-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Estilo de los Bloques */ .include-box { background-color: #A569BD; /* Magic Purple */ padding: 40px 25px; border-radius: 12px; text-align: center; position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; } .box-inner h3 { font-size: 1.6rem; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; color: white; } .box-inner p { font-size: 1.2rem; margin-bottom: 5px; opacity: 0.9; color: white; } /* Bookmark dorado del bloque 3 */ .bookmark::before { content: ''; position: absolute; top: 0; left: 20px; width: 25px; height: 40px; background-color: #D4AF37; /* Disney Gold */ clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); } /* Bloques Anchos (Tickets) */ .wide-box { padding: 35px; border-radius: 12px; display: flex; align-items: center; color: white; font-size: 1.3rem; } .red-box { background-color: #D9232A; } /* Disney Red */ .gold-box { background-color: #D4AF37; } /* Disney Gold */ .box-content { display: flex; align-items: center; gap: 25px; } .text-wrap h4 { font-size: 1.4rem; font-weight: 800; margin-bottom: 5px; } /* Bloques de Certificación */ .cert-box { background-color: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 12px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); } .cert-box h5 { color: #B0E0E6; /* Powder Blue */ font-size: 1.5rem; margin-bottom: 10px; font-weight: 700; color: white; } .cert-box p { font-size: 1.2rem; color: white; } /* Responsive */ @media (max-width: 992px) { .grid-row-3, .grid-row-2 { grid-template-columns: 1fr; } } /* Contenedor principal */ .floating-action-buttons { position: fixed; bottom: 30px; right: 30px; display: flex; flex-direction: column; gap: 15px; z-index: 99999; /* Por encima de todo, incluso del polvo mágico */ } /* Estilo base de los botones */ .float-btn { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 8px 25px rgba(0,0,0,0.2); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Botón WhatsApp (Rojo Mickey) */ .whatsapp-btn { color: white; } .whatsapp-btn svg { width: 32px; height: 32px; } /* Botón Scroll Top (Dorado Disney) */ .scroll-top-btn { background-color: #D4AF37; color: #0A1F44; /* Azul oscuro para contraste */ } .scroll-top-btn svg { width: 35px; height: 35px; } /* Efectos Hover */ .float-btn:hover { transform: translateY(-5px) scale(1.1); } .whatsapp-btn:hover { background-color: #25D366; /* Cambia a verde WhatsApp al pasar el mouse */ box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); } .scroll-top-btn:hover { background-color: #ffffff; box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4); } /* Responsive */ @media (max-width: 768px) { .float-btn { width: 30px; height: 30px; } .floating-action-buttons { bottom: 20px; right: 20px; } } /* magia */ .magic-dust { position: absolute; background: radial-gradient(circle, #D4AF37, #FFF5A5); /* Dorado a Blanco */ border-radius: 50%; pointer-events: none; /* Para que no interfiera con botones o links */ box-shadow: 0 0 8px #D4AF37; z-index: 9999; animation: sparkle-fade 1s linear forwards; } @keyframes sparkle-fade { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { /* El polvo cae un poco y se encoge hasta desaparecer */ transform: translateY(20px) scale(0); opacity: 0; } } /* ---------------------- DISCLAIMER ----------------------- */ .disclaimer-section { /* Gradiente solicitado con la opacidad del 75% */ background: linear-gradient(rgba(10, 31, 68, 0.75), rgba(147, 164, 167, 0.75)); padding: 30px 20px; display: flex; justify-content: center; align-items: center; } .disclaimer-container { max-width: 1000px; margin: 0 auto; } .disclaimer-section p { font-family: 'Poppins', sans-serif; font-size: 0.7rem; /* Tamaño muy pequeño, ideal para avisos legales */ color: #e0e0e0; /* Gris claro para que sea legible sobre el fondo oscuro */ line-height: 1.6; text-align: center; margin: 0; text-transform: none; /* Asegura que no se aplique uppercase por herencia */ letter-spacing: 0.03em; } /* Ajuste para que en móviles no sea "invisible" por lo pequeño */ @media (max-width: 600px) { .disclaimer-section p { font-size: 0.6rem; padding: 0 10px; } } /* DIVIDER */ /* ============================================================ HOTFIX DE ÚLTIMA HORA - PRIORIDAD MÁXIMA ============================================================ */ /* 1. MATAR EL SCROLL HORIZONTAL (Adiós al espacio blanco) */ html, body { overflow-x: hidden !important; width: 100% !important; margin: 0 !important; padding: 0 !important; position: relative !important; } /* 2. REPARAR EL HEADER EN MÓVIL (< 1024px) */ @media (max-width: 1024px) { /* Forzamos que el header no se rompa */ #main-nav { position: fixed !important; top: 0 !important; width: 100% !important; height: 70px !important; background: #fff !important; z-index: 99999 !important; } .nav-inner { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 0 15px !important; height: 100% !important; } /* DOMAR EL LOGO: Que no mida media pantalla */ .logo-container { max-width: 140px !important; flex: 0 0 auto !important; } .logo-img { max-height: 40px !important; width: auto !important; display: block !important; } /* OCULTAR EL BOTÓN AZUL: No cabe en la barra de arriba */ .btn-nav-primary { display: none !important; } /* TRANSFORMAR EL MENÚ EN SIDEBAR */ .nav-links { position: fixed !important; top: 0 !important; right: -100% !important; /* Escondido */ width: 280px !important; height: 100vh !important; background: #ffffff !important; box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important; padding: 80px 20px !important; transition: right 0.4s ease-in-out !important; z-index: 99998 !important; } /* Clase para abrir el menú (Activada por JS) */ .mobile-open .nav-links { right: 0 !important; } .nav-links ul { flex-direction: column !important; display: flex !important; gap: 20px !important; list-style: none !important; } /* 3. DIBUJAR LAS 3 RAYITAS (Hamburguesa) */ .mobile-nav-toggle { display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 30px !important; height: 20px !important; background: transparent !important; border: none !important; cursor: pointer !important; padding: 0 !important; z-index: 100000 !important; } .mobile-nav-toggle span { width: 100% !important; height: 3px !important; background-color: #0a1f44 !important; /* Azul oscuro */ border-radius: 5px !important; } } /* 4. FIX PARA EL HERO (Título amontonado) */ @media (max-width: 768px) { #hero { padding-top: 100px !important; text-align: center !important; } #hero h1 { font-size: 1.8rem !important; line-height: 1.2 !important; } /* Cortar cualquier dibujo de fondo que empuje la web */ .hero-content, section { overflow: hidden !important; } } /* ============================================================ FUERZA BRUTA FINAL - DESPLIEGUE DEL MENÚ ============================================================ */ @media (max-width: 1024px) { /* 1. Reset completo del contenedor de links cuando está abierto */ #main-nav.mobile-open .nav-links { display: flex !important; /* Lo obligamos a existir */ visibility: visible !important; opacity: 1 !important; position: fixed !important; top: 0 !important; right: 0 !important; /* Entra a la pantalla */ width: 80% !important; max-width: 300px !important; height: 100vh !important; background: #ffffff !important; z-index: 9999999 !important; /* Por encima de todo */ flex-direction: column !important; padding: 100px 20px 20px 20px !important; box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important; transform: none !important; /* Por si algún otro CSS lo está rotando o escalando */ } /* 2. Asegurar que la lista de links se vea */ #main-nav.mobile-open .nav-links ul { display: flex !important; flex-direction: column !important; list-style: none !important; padding: 0 !important; margin: 0 !important; gap: 20px !important; opacity: 1 !important; visibility: visible !important; } /* 3. Estilo de los textos (Azul oscuro para que se lean sobre el blanco) */ #main-nav.mobile-open .nav-links ul li a { color: #0a1f44 !important; font-size: 18px !important; font-weight: 700 !important; text-decoration: none !important; display: block !important; } } /* ============================================================ ATAQUE FINAL: FORZAR BOTÓN DE CIERRE ============================================================ */ @media (max-width: 1024px) { /* Sacamos el botón del flujo normal y lo ponemos por encima de TODO */ button#menu-toggle.mobile-nav-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; /* Lo fijamos a la pantalla */ top: 15px !important; /* Lo movemos arriba */ right: 15px !important; /* Lo pegamos a la derecha */ z-index: 999999999 !important; /* El z-index más alto posible */ width: 45px !important; /* Un poco más grande para poder tocarlo bien */ height: 45px !important; background: #0a1f44 !important; /* Le ponemos un fondo azul oscuro para que se vea */ border-radius: 5px !important; padding: 10px !important; flex-direction: column !important; justify-content: space-around !important; } /* Forzamos que las barritas sean blancas para que contrasten con el fondo azul del botón */ button#menu-toggle.mobile-nav-toggle span { display: block !important; width: 100% !important; height: 3px !important; background-color: #ffffff !important; border-radius: 2px !important; transition: 0.3s !important; } /* Transformación a X cuando esté abierto */ #main-nav.mobile-open button#menu-toggle.mobile-nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; } #main-nav.mobile-open button#menu-toggle.mobile-nav-toggle span:nth-child(2) { opacity: 0 !important; } #main-nav.mobile-open button#menu-toggle.mobile-nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; } } /* ============================================================ FIX FINAL: BOTÓN "X" FLOTANTE PARA CIERRE ============================================================ */ @media (max-width: 1024px) { /* Cuando el menú está abierto, forzamos al botón a flotar arriba */ #main-nav.mobile-open #menu-toggle { position: fixed !important; top: 15px !important; right: 15px !important; z-index: 999999999 !important; /* Z-index estratosférico */ background-color: #0a1f44 !important; /* Círculo azul oscuro */ width: 45px !important; height: 45px !important; border-radius: 50% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; border: none !important; } /* Forzamos que las 3 barritas se conviertan en una X BLANCA */ #main-nav.mobile-open #menu-toggle span { background-color: #ffffff !important; /* X Blanca */ width: 25px !important; height: 3px !important; position: absolute !important; display: block !important; transition: 0.3s !important; } /* Formamos la X */ #main-nav.mobile-open #menu-toggle span:nth-child(1) { transform: rotate(45deg) !important; } #main-nav.mobile-open #menu-toggle span:nth-child(2) { opacity: 0 !important; /* Desaparece la del medio */ } #main-nav.mobile-open #menu-toggle span:nth-child(3) { transform: rotate(-45deg) !important; } } /* ============================================================ FIX UNIVERSAL: BOTÓN DE CIERRE (FORZADO) ============================================================ */ @media (max-width: 1024px) { /* Forzamos que el ID gane por especificidad */ body #menu-toggle.mobile-nav-toggle { display: flex !important; visibility: visible !important; opacity: 1 !important; position: fixed !important; /* FIJO A LA PANTALLA, NO AL NAV */ top: 20px !important; right: 20px !important; z-index: 2147483647 !important; /* EL MÁXIMO Z-INDEX POSIBLE EN NAVEGADORES */ background-color: #0a1f44 !important; /* Azul Marino Disney */ width: 48px !important; height: 48px !important; border-radius: 50% !important; border: 2px solid #ffffff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; cursor: pointer !important; } /* Dibujamos la X blanca gruesa */ body.mobile-open #menu-toggle span { background-color: #ffffff !important; height: 4px !important; width: 25px !important; } } /* ============================================================ BLOQUE DE EMERGENCIA: APILADO VERTICAL PURO ============================================================ */ @media (max-width: 1024px) { /* 1. Liberamos la sección del alto fijo */ section#hero { display: block !important; height: auto !important; min-height: 100vh !important; padding-top: 140px !important; /* Espacio para que baje del header */ padding-bottom: 60px !important; overflow: visible !important; } /* 2. Forzamos que el contenedor NO sea un grid */ #hero .hero-split-container { display: flex !important; flex-direction: column !important; /* Texto ARRIBA, Formulario ABAJO */ width: 100% !important; gap: 40px !important; padding: 0 !important; } /* 3. Columna del Texto: Ancho total y centrada */ #hero .hero-left { width: 100% !important; max-width: 100% !important; text-align: center !important; padding: 0 10px !important; display: block !important; position: relative !important; } /* 4. Columna del Formulario: Ancho total y centrada */ #hero .hero-right { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; position: relative !important; } /* 5. El formulario propiamente dicho */ #form-diplomado { width: 100% !important; max-width: 420px !important; /* Para que no se vea gigante en tablets */ margin: 0 auto !important; padding: 25px 20px !important; box-sizing: border-box !important; } /* 6. Asegurar que las imágenes/video de fondo no se rompan */ .hero-video, .overlay { position: absolute !important; height: 100% !important; width: 100% !important; top: 0 !important; left: 0 !important; } } /* ============================================================ FIX DE DESBORDE HORIZONTAL - MÓVIL ============================================================ */ @media (max-width: 768px) { /* 1. Forzamos que TODO respete el ancho de la pantalla */ * { box-sizing: border-box !important; } /* 2. El contenedor del Hero no puede ser más ancho que el celular */ .hero-content { padding-left: 15px !important; padding-right: 15px !important; width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; } /* 3. El Grid/Flex que separa el texto del formulario */ .hero-split-container { width: 100% !important; margin: 0 !important; gap: 20px !important; /* Reducimos el espacio entre bloques */ } /* 4. EL FORMULARIO (Aquí está el corte principal) */ #form-diplomado { width: 100% !important; /* Que ocupe el ancho disponible */ max-width: 100% !important; /* Prohibido pasarse de la pantalla */ margin-left: 0 !important; margin-right: 0 !important; padding: 25px 15px !important; /* Reducimos el padding interno */ } /* 5. Los inputs del formulario */ .form-group input { width: 100% !important; max-width: 100% !important; } /* 6. El título (Waltograph) que a veces empuja por tamaño */ .disney-magic-title { font-size: 1.7rem !important; width: 100% !important; word-wrap: break-word !important; /* Si una palabra es muy larga, que se rompa */ } } /* ============================================================ REPARACIÓN SECCIÓN PERFIL Y OBJETIVO - MÓVIL ============================================================ */ @media (max-width: 768px) { /* 1. Ajuste de la sección principal */ #perfil-objetivo-v2 { padding: 60px 20px !important; /* Menos padding lateral para ganar espacio */ background-attachment: scroll; /* El fixed en móviles a veces da saltos visuales */ } /* 2. EL FIX DEL TÍTULO WALTOGRAPH (Evita que choquen las letras) */ .waltograph-title { font-size: 2.8rem !important; /* Bajamos un poco el tamaño */ line-height: 1.2 !important; /* LE DAMOS AIRE para que no se monten las líneas */ margin-bottom: 30px !important; } /* 3. Texto de introducción */ #perfil-objetivo-v2 .intro-text { font-size: 1.1rem !important; margin-bottom: 50px !important; padding: 0 10px; } /* 4. TÍTULOS DE LAS TARJETAS (Nuevo Paradigma / Diseño de la Magia) */ .card-subtitle { font-size: 1.8rem !important; /* Bajamos de 3.0rem a 1.8rem para que quepa */ margin-bottom: 20px !important; } /* 5. Ajuste de las imágenes redondas */ .circle-frame { width: 180px !important; /* Un poco más pequeñas para móvil */ height: 180px !important; margin-bottom: 25px !important; } /* 6. Párrafos de las tarjetas */ .card-description p { font-size: 1rem !important; line-height: 1.6 !important; } /* 7. Footer Dorado (Frase final) */ .gold-footer p { font-size: 1.3rem !important; padding: 0 10px; } } /* ============================================================ REPARACIÓN SECCIÓN PROGRAMA - MÓVIL ============================================================ */ @media (max-width: 768px) { /* 1. Ajuste de la sección principal */ #programa-completo { padding: 60px 15px !important; /* Menos espacio arriba/abajo */ background-attachment: scroll !important; /* El fixed da error en algunos celulares */ } /* 2. EL TÍTULO (Aquí estaba el error del nombre) */ .waltograph-white-1 { font-size: 2.2rem !important; /* Bajamos de 4rem a 2.2rem */ line-height: 1.3 !important; /* MÁS ESPACIO entre líneas para que no se monten */ margin-bottom: 20px !important; padding: 0 10px !important; } /* 3. Texto de introducción */ .intro-text-poppins { font-size: 1.1rem !important; margin-bottom: 50px !important; /* Reducimos el margen de 100px */ line-height: 1.5 !important; } /* 4. Bloques de módulos */ .module-block { gap: 30px !important; /* Menos espacio entre imagen y texto */ margin-bottom: 80px !important; /* Reducimos el margen de 150px */ } /* Títulos de los sábados/módulos */ .module-info h3 { font-size: 1.8rem !important; /* Bajamos de 2.8rem a 1.8rem */ line-height: 1.2 !important; margin-bottom: 15px !important; } /* Lista de contenidos */ .content-list li { font-size: 1rem !important; /* Texto más legible para móvil */ padding: 10px 0 !important; } /* 5. BOTONES (Para que no se amontonen) */ .module-btns { flex-direction: column !important; /* Un botón sobre otro */ gap: 12px !important; width: 100% !important; } .btn-details, .btn-enroll { width: 100% !important; /* Ancho completo en móvil */ padding: 15px 20px !important; /* Botones menos "gordos" */ font-size: 1rem !important; text-align: center !important; } /* Insight Box */ .insight-box { font-size: 1rem !important; margin-bottom: 25px !important; } } /* ============================================================ FIX RESPONSIVE: AUDIENCIA Y DETALLES DEL PROGRAMA ============================================================ */ @media (max-width: 1024px) { /* 1. SECCIONES: Quitamos alturas fijas para que respiren */ #audiencia-programa, #detalles-programa-video { height: auto !important; min-height: 100vh !important; padding: 80px 5% !important; /* Más espacio arriba y abajo */ display: block !important; } /* 2. TÍTULOS WALTograph: El problema del "amontonamiento" */ .section-title-walt, .main-title-walt { font-size: 2.2rem !important; /* Tamaño manejable */ line-height: 1.4 !important; /* INTERLINEADO CLAVE: Separa las líneas para que no choquen */ margin-bottom: 40px !important; word-wrap: break-word !important; /* Suavizamos la animación para que no se mueva tanto en móvil */ animation: walt-cosmos-flow 10s linear infinite !important; transform: none !important; /* Quitamos el scale que amontona */ } /* 3. GRIDS: De 2 columnas a 1 columna pura */ .audience-grid, .strategic-list, .include-grid, .grid-row-3, .grid-row-2 { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: 20px !important; width: 100% !important; } /* 4. CAJAS DE CONTENIDO: Que no se corten */ .audience-item, .include-box, .wide-box, .cert-box { width: 100% !important; max-width: 100% !important; height: auto !important; /* Que crezcan según el texto */ padding: 25px 20px !important; margin-bottom: 10px !important; box-sizing: border-box !important; } /* 5. TEXTOS DENTRO DE CAJAS */ .audience-item h3, .include-box h3, .wide-box h4 { font-size: 1.4rem !important; margin-bottom: 10px !important; } .audience-item p, .include-box p { font-size: 1rem !important; line-height: 1.4 !important; } /* 6. REGLA DE ORO: Evitar desborde horizontal */ .disney-container { padding: 0 10px !important; overflow: hidden !important; } } /* Fix específico para la animación que hacía crecer el texto */ @media (max-width: 768px) { @keyframes walt-glow-breath { 0% { transform: scale(1); } 100% { transform: scale(1.01); } /* Casi imperceptible para no romper layout */ } } /* ============================================================ OPERACIÓN RESCATE: BOTONES WHATSAPP ============================================================ */ /* 1. Aseguramos que el contenedor de los botones NO bloquee */ .zigzag-text, .zigzag-row, .hero-content, .side-text { pointer-events: auto !important; z-index: 10 !important; } /* 2. El botón propiamente dicho: Máxima prioridad */ a.btn-details, a.btn-enroll, .renedo-btn-action { display: inline-block !important; position: relative !important; z-index: 2147483647 !important; /* El número más alto permitido en la web */ pointer-events: all !important; /* FUERZA la interactividad */ cursor: pointer !important; touch-action: manipulation !important; /* Optimiza para toques en móvil */ } /* 3. Evitamos que cualquier overlay les pase por encima */ .video-overlay, .hero-overlay-magic, .overlay { z-index: 1 !important; pointer-events: none !important; /* ESTO ES CLAVE: El fondo no puede recibir clics */ } /* brochure */ /* --- SECCIÓN DESCARGA PROGRAMA --- */ #descarga-programa { padding: 80px 5%; background: linear-gradient(rgba(10, 31, 68, 0.8), rgba(10, 31, 68, 0.8)), url('assets/img/fondo/di-bg-footer.jpg'); /* O el fondo que prefieras */ background-size: cover; background-position: center; text-align: center; } .brochure-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; padding: 60px 40px; max-width: 800px; margin: 0 auto; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); } .brochure-text { font-family: 'Poppins', sans-serif; color: #ffffff; font-size: 1.2rem; margin-bottom: 40px; line-height: 1.6; } .brochure-actions { display: flex; justify-content: center; gap: 20px; } /* Botón Dorado (Secundario) */ .btn-secondary { padding: 1rem 2.2rem; font-family: 'Poppins', sans-serif; font-weight: 700; text-decoration: none; border-radius: 8px; background: transparent; color: var(--disney-gold); border: 2px solid var(--disney-gold); transition: all 0.3s ease; } .btn-secondary:hover { background: var(--disney-gold); color: #fff; box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); } /* Ajuste Mobile */ @media (max-width: 768px) { .brochure-actions { flex-direction: column; } .btn-primary, .btn-secondary { width: 100%; display: block; } .brochure-card { padding: 40px 20px; } } /* ============================================================ FIX DE EMERGENCIA: RECUPERAR CLIC EN BOTONES ============================================================ */ /* 1. Forzamos que los botones salten al frente de TODO */ .btn-details, .btn-enroll, .brochure-actions a, .renedo-btn-action, .btn-primary, .btn-secondary, #descarga-programa a { position: relative !important; z-index: 999999999 !important; /* Capa ultra-superior */ pointer-events: all !important; /* Obliga a recibir el clic */ cursor: pointer !important; /* Fuerza la aparición de la manito */ display: inline-block !important; } /* 2. Hacemos que los fondos y videos NO "bloqueen" el mouse */ .video-overlay, .hero-overlay-magic, .overlay, .video-background, #bg-video-include, [class*="magic-"], [class*="overlay"] { pointer-events: none !important; /* El mouse "atraviesa" estas capas */ z-index: 1 !important; } /* 3. Aseguramos que los contenedores dejen pasar el clic a sus hijos */ .disney-container, .zigzag-row, .brochure-card { pointer-events: auto !important; } /* Contenedor de la gráfica en hero-left */ .xp-disney-graphic-schedule { width: 100%; /* Ocupa el ancho completo de la columna de texto */ max-width: 650px; /* Evita que escale demasiado en pantallas masivas */ margin-top: 29px; /* Separación del texto superior */ margin-bottom: 20px; /* Separación inferior si hay elementos */ display: flex; justify-content: flex-start; /* Alineación a la izquierda con el texto */ } /* Imagen en sí */ .xp-disney-image { width: 100%; height: auto; /* Mantiene proporciones */ object-fit: contain; /* Evita recortes */ border-radius: 15px; /* Bordes redondeados sutiles */ /* Sombra sutil Disney Premium */ box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: transform 0.3s ease; /* Efecto de movimiento */ } /* Efecto hover mágico */ .xp-disney-image:hover { transform: scale(1.02); } /* Ajuste responsive para móviles */ @media (max-width: 768px) { .xp-disney-graphic-schedule { justify-content: center; /* Centrar la imagen si el hero se vuelve vertical */ margin-top: 20px; } }