@font-face { font-family: 'Waltograph'; src: url('assets/fonts/waltographUI.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } .disney { font-family: 'Waltograph', cursive; } 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; } /* ── Base ───────────────────────────────────────────────── */ body { background-color: var(--powder-blue); font-family: 'Poppins', sans-serif; margin: 0; } /* ============================================================ 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; } } .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; } } /* --- SECCIÓN HERO RENEDO --- */ .renedo-hero-canvas { width: 100%; min-height: 90vh; display: flex; align-items: center; justify-content: center; padding: 60px 5%; position: relative; /* No agregamos fondo por instrucción */ } .renedo-hero-inner { max-width: 1300px; width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; } /* --- BLOQUE DE TEXTO --- */ .renedo-copy-wrapper { z-index: 10; } .renedo-badge-name { font-family: 'Poppins', sans-serif; color: var(--disney-gold); font-size: 4.4rem; font-weight: 700; letter-spacing: 3px; margin-bottom: 10px; text-transform: uppercase; } .renedo-headline-main { font-family: 'Poppins', sans-serif; /* Puedes usar una Serif si quieres exactitud con la foto */ font-size: 4rem; font-weight: 800; color: #333; /* Color temporal hasta definir fondo */ line-height: 1.1; margin-bottom: 20px; } .renedo-headline-main span { color: var(--magic-purple); } .renedo-sub-credential { font-family: 'Poppins', sans-serif; font-size: 1.7rem; font-weight: 600; color: #555; margin-bottom: 15px; } .renedo-tagline-experience { font-family: 'Poppins', sans-serif; font-size: 1.3rem; font-style: italic; color: #666; margin-bottom: 40px; border-left: 4px solid var(--disney-gold); padding-left: 20px; } /* --- BOTÓN CONOCER MÁS --- */ .renedo-btn-action { display: inline-block; padding: 18px 45px; background-color: var(--disney-red); color: white; font-family: 'Poppins', sans-serif; font-weight: 700; text-decoration: none; border-radius: 5px; box-shadow: 0 10px 20px rgba(217, 35, 42, 0.3); transition: all 0.3s ease; } .renedo-btn-action:hover { transform: translateY(-5px); background-color: #b71d23; box-shadow: 0 15px 30px rgba(217, 35, 42, 0.5); } /* --- COMPOSICIÓN VISUAL (3 IMÁGENES) --- */ .renedo-visual-mural { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; } .renedo-img-layer { position: absolute; transition: transform 0.5s ease; } /* Poses secundarias (Ecos) */ .renedo-echo-top { top: 0; right: 10%; width: 60%; opacity: 0.3; /* Efecto desvanecido de la referencia */ filter: grayscale(20%); z-index: 1; } .renedo-echo-middle { bottom: 10%; left: -20%; width: 55%; opacity: 0.4; z-index: 2; } /* Imagen Principal */ .renedo-portrait-focus { width: 85%; z-index: 3; bottom: 0; } .renedo-img-layer img { width: 100%; height: auto; display: block; } /* --- CORRECCIÓN DE SCROLL Y MÁRGENES --- */ .renedo-hero-canvas { width: 100%; max-width: 100vw; /* Bloquea el ancho al visor de pantalla */ min-height: 90vh; display: flex; align-items: center; justify-content: center; padding: 60px 0; /* Eliminamos el padding lateral aquí para evitar sumas */ position: relative; overflow: hidden; /* CLAVE: Corta cualquier imagen que se salga del borde */ box-sizing: border-box; } .renedo-hero-inner { max-width: 1300px; width: 90%; /* Usamos porcentaje para dejar margen automático a los lados */ margin: 0 auto; /* Centrado horizontal perfecto */ display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; box-sizing: border-box; /* Asegura que el ancho sea real */ } /* --- AJUSTE DE IMÁGENES PARA EVITAR DESBORDE --- */ .renedo-visual-mural { position: relative; height: 600px; width: 100%; /* Asegura que el mural no sea más ancho que su columna */ display: flex; align-items: center; justify-content: center; overflow: visible; /* Permite que los ecos se vean, pero el canvas los cortará al final */ } .renedo-img-layer img { max-width: 100%; /* Las imágenes no pueden ser más grandes que su capa */ height: auto; display: block; } /* Ajuste específico para el 'Eco' derecho que suele causar el scroll */ .renedo-echo-top { top: 0; right: 0; /* Lo pegamos al borde interno, no al externo */ width: 55%; opacity: 0.3; z-index: 1; } /* --- RESPONSIVE FIX --- */ @media (max-width: 992px) { .renedo-hero-canvas { padding: 40px 0; } .renedo-hero-inner { width: 95%; /* Más espacio en móviles */ grid-template-columns: 1fr; } } /* --- RESPONSIVE --- */ @media (max-width: 992px) { .renedo-hero-inner { grid-template-columns: 1fr; text-align: center; } .renedo-tagline-experience { border-left: none; padding-left: 0; } .renedo-visual-mural { height: 450px; margin-top: 40px; } } .trust-bar { display: flex; justify-content: center; align-items: center; padding: 40px 20px; font-family: 'Times New Roman', Times, serif; /* Fuente con serifa como la imagen */ } .trust-item { display: flex; align-items: center; justify-content: center; padding: 0 40px; text-align: center; } /* Las líneas azules divisorias */ .trust-item:not(:last-child) { border-right: 2px solid #0056b3; /* Color azul de la imagen */ } .trust-item p { font-size: 3.5rem; font-weight: 500; line-height: 1.2; color: #1a1a1a; margin: 0; text-transform: uppercase; font-family: 'Poppins', sans-serif; /* Para un toque más moderno dentro del estilo clásico */ } .trust-item p span { font-family: 'Waltograph', cursive; /* Si quieres un toque más Disney en el texto */ } /* Ajuste para móviles */ @media (max-width: 768px) { .trust-bar { flex-direction: column; } .trust-item { padding: 20px 0; } .trust-item:not(:last-child) { border-right: none; border-bottom: 2px solid #0056b3; width: 50%; } } .profile-layout { display: flex; max-width: 1200px; margin: 60px auto; gap: 30px; align-items: flex-start; padding: 0 20px; } .profile-column { flex: 1; display: flex; flex-direction: column; } .center-column { flex: 1.2; /* Un poco más ancha la central para la foto principal */ } .side-column { gap: 40px; /* Espacio entre el texto y la imagen pequeña */ } .text-block p { font-family: 'Poppins', sans-serif; /* Estilo clásico de la imagen */ font-size: 18px; line-height: 1.6; color: #333; margin: 0; } .main-portrait { width: 100%; height: auto; box-shadow: 10px 10px 0px #f5f5f5; /* Efecto sutil de fondo que se ve en la imagen */ } .small-img img { width: 100%; height: auto; display: block; } /* Responsivo para móviles */ @media (max-width: 900px) { .profile-layout { flex-direction: column; align-items: center; } .center-column { order: -1; /* La foto principal arriba en móvil */ width: 80%; } .side-column { width: 100%; text-align: center; } } .section-header { text-align: center; padding: 60px 20px 20px; } .main-title { font-family: 'Poppins', sans-serif; /* Manteniendo la coherencia con el cuerpo de texto */ font-size: 5.5rem; font-weight: 700; color: #1a1a1a; text-transform: uppercase; letter-spacing: 2px; margin: 0; } .main-title span { color: var(--disney-gold); /* Resalta la palabra clave en morado mágico */ font-family: 'Waltograph', cursive; /* Si quieres un toque más Disney en el título */ } .title-underline { width: 80px; height: 4px; background-color: #0056b3; /* El mismo azul de los divisores anteriores */ margin: 20px auto 0; } /* Ajuste para pantallas pequeñas */ @media (max-width: 768px) { .main-title { font-size: 32px; } } /* Importando Poppins si no la tienes en tu proyecto aún */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); /* Asumiendo que tienes el @font-face de Waltograph definido como 'Waltograph' */ .impact-section { padding: 80px 20px; background-color: #f9f9f9; /* Un gris muy ligero para diferenciar de la sección anterior */ font-family: 'Poppins', sans-serif; } .container { max-width: 1100px; margin: 0 auto; text-align: center; } .impact-title { font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 50px; } .impact-title .highlight { color: #0056b3; /* El azul que venimos usando */ } .impact-grid { display: flex; gap: 40px; justify-content: space-between; } .impact-card { flex: 1; background: #ffffff; padding: 40px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: transform 0.3s ease; } .impact-card:hover { transform: translateY(-10px); } .impact-number { font-size: 48px; font-weight: 700; color: #0056b3; margin-bottom: 15px; display: block; } .impact-number .edition { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; } .impact-text { font-size: 16px; line-height: 1.8; color: #555; text-align: left; } /* Clase específica para Waltograph */ .disney-font { font-family: 'Waltograph', sans-serif; font-size: 1.4em; /* Suele ser más pequeña, así que la compensamos */ color: #1a1a1a; vertical-align: middle; } /* Responsivo */ @media (max-width: 768px) { .impact-grid { flex-direction: column; } .impact-title { font-size: 28px; } } .split-section { width: 100%; padding: 80px 0; background-color: #fff; font-family: 'Poppins', sans-serif; } .split-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 60px; padding: 0 20px; } /* Columna de Texto */ .content-side { flex: 1; } .split-title { font-size: 52px; font-weight: 700; color: #1a1a1a; margin-bottom: 35px; line-height: 1.1; } .split-text p { font-size: 18px; color: #444; margin-bottom: 25px; line-height: 1.6; } .flags-container { margin: 40px 0; } .flags-img { max-width: 350px; /* Ajusta según el tamaño de tus banderas */ height: auto; } /* El botón naranja del diseño */ .cta-button { display: inline-block; background-color: #ff6b35; /* Color naranja vibrante del diseño */ color: #fff; padding: 18px 35px; text-decoration: none; font-weight: 700; font-size: 14px; letter-spacing: 1px; border-radius: 4px; transition: background 0.3s ease; } .cta-button:hover { background-color: #e85a28; } /* Columna de Imagen */ .image-side { flex: 1; } .profile-portrait { width: 100%; height: auto; display: block; /* El diseño original tiene un ligero sombreado suave */ box-shadow: 20px 20px 60px rgba(0,0,0,0.05); } .profile-portrait { /* Establece un ancho máximo proporcional, por ejemplo, el 60% de su contenedor. */ /* Esto evita que se agrande demasiado si el contenedor es ancho. */ max-width: 60%; /* Mantiene la proporción de aspecto. */ height: auto; /* Asegura que la imagen sea un bloque y se centre dentro de su contenedor de columna. */ display: block; margin-left: auto; margin-right: auto; /* También puedes considerar limitar la altura máxima para que se alinee con el bloque de texto. */ /* Por ejemplo, algo como: max-height: 100vh; o una altura fija si el texto es consistente. */ /* Pero para este caso, limitar el max-width suele ser suficiente y más responsivo. */ /* El sombreado suave se mantiene como en el diseño original. */ box-shadow: 20px 20px 60px rgba(0,0,0,0.05); /* Asegura que la imagen se vea bien y no se deforme al escalar. */ object-fit: contain; /* O object-fit: cover si prefieres recortar en lugar de contener. */ } /* Responsivo para móvil */ @media (max-width: 991px) { .split-container { flex-direction: column; text-align: center; } .split-title { font-size: 38px; } .image-side { order: -1; /* La foto sube arriba en móviles */ width: 100%; } } /* ============================================================ FIX ESPECÍFICO: SECCIÓN RENEDO - MÓVIL ============================================================ */ @media (max-width: 768px) { /* 1. Ajuste de la Sección Principal */ .renedo-hero-canvas { padding: 100px 15px 40px !important; /* Espacio para el header fijo */ height: auto !important; min-height: 100vh !important; overflow: hidden !important; /* Corta cualquier imagen que se quiera salir */ } .renedo-hero-inner { width: 100% !important; display: flex !important; flex-direction: column !important; /* Apilado vertical */ text-align: center !important; gap: 20px !important; } /* 2. EL BADGE (J. RENEDO): Bajamos de 4.4rem a algo real */ .renedo-badge-name { font-size: 1.5rem !important; letter-spacing: 2px !important; margin-bottom: 5px !important; } /* 3. EL TITULAR (Experto Internacional...): Bajamos de 4rem a 2rem */ .renedo-headline-main { font-size: 2rem !important; line-height: 1.2 !important; margin-bottom: 15px !important; } /* 4. CREDENCIALES Y TAGLINE */ .renedo-sub-credential { font-size: 1.1rem !important; margin-bottom: 10px !important; } .renedo-tagline-experience { font-size: 1rem !important; border-left: none !important; /* Quitamos el borde para centrar mejor */ padding-left: 0 !important; margin-bottom: 30px !important; } /* 5. EL MURAL DE IMÁGENES (Aquí está el truco) */ .renedo-visual-mural { height: 400px !important; /* Reducimos altura en móvil */ width: 100% !important; margin-top: 20px !important; } /* Ajustamos los "ecos" para que NO se salgan de la pantalla */ .renedo-echo-top { right: 5% !important; width: 50% !important; top: 10% !important; } .renedo-echo-middle { left: 0% !important; /* No más -20%, eso rompe el ancho */ width: 45% !important; bottom: 5% !important; } .renedo-portrait-focus { width: 75% !important; /* Imagen principal un poco más pequeña */ bottom: 0 !important; } /* 6. EL BOTÓN: Que no sea gigante */ .renedo-btn-action { width: auto !important; padding: 15px 35px !important; font-size: 1rem !important; } }