@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;700&display=swap'); :root { --bg-dark: #ffffff; --text-light: #f5f5f0; --accent: #d4c8b8; --font-primary: 'Outfit', sans-serif; } /* ========================================================================== ÍNDICE 1. ESCALA TIPOGRÁFICA 2. ESTILOS EDITORIALES COMPARTIDOS 3. BARRA DE NAVEGACIÓN 4. MENÚ HAMBURGUESA 5. FOOTER 6. COMPONENTES UI GLOBALES (Botones y Formularios) 7. MEDIA QUERIES (TABLET & MOBILE) ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; height: auto; display: block; } body, html { font-family: var(--font-primary); background-color: var(--bg-dark); color: var(--text-light); overflow-x: clip; /* Fix for position: sticky breaking on mobile */ scroll-behavior: smooth; } /* Fondo con WebGL */ #webgl-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; opacity: 0.6; } /* Estilos todas las páginas */ /* 1. ESCALA TIPOGRÁFICA */ h1, .hero-title, .about-hero-title { font-size: clamp(5rem, 6vw, 8rem); font-weight: 100; text-transform: uppercase; line-height: 1.1; letter-spacing: -2px; } h2 { font-size: clamp(5rem, 5vw, 6.5rem); font-weight: 150; text-transform: uppercase; line-height: 1.1; letter-spacing: 1px; } h3 { font-size: clamp(3rem, 3vw, 5rem); font-weight: 200; text-transform: uppercase; line-height: 1.2; letter-spacing: 1px; } h4 { font-size: 1.5rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; } h5 { font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; } h6 { font-size: 0.85rem; font-weight: 400; text-transform: uppercase; letter-spacing: 4px; color: var(--accent); } p { font-size: clamp(1.1rem, 1.5vw, 1.6rem); font-weight: 200; line-height: 1.85; } p.slider { text-align: left; font-size: clamp(2rem, 2.5rem, 4rem); font-weight: 200; line-height: 1.1; letter-spacing: 2px; } .cookie-banner-text p { font-size: clamp(1rem, 1.2vw, 1.25rem); font-weight: 200; line-height: 1.85; } /* PAG PROYECTOS */ .grid-item-subtitle { font-size: clamp(1rem, 1.2vw, 1.25rem); font-weight: 200; line-height: 1.85; text-align: justify; text-justify: auto; } /* 2. ESTILOS EDITORIALES COMPARTIDOS */ .thex-editorial-title { margin-bottom: 2rem; text-align: left !important; width: 100%; } .thex-editorial-text { line-height: 1.8; color: #666; font-weight: 200; text-align: left !important; width: 100%; } /* 3. BARRA DE NAVEGACIÓN */ .header { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 4rem; display: flex; background-color: transparent; /* Changed from rgba(0,0,0,0.4) for cleaner start */ color: white; justify-content: space-between; align-items: center; z-index: 102; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease; } .header.header--hidden { transform: translateY(-100%); pointer-events: none; } /* Botón de idioma flotante — aparece debajo del hamburger al hacer scroll */ /* NOTA: cuando está flotando, el JS lo mueve al directamente para evitar el bug de position:fixed en hijos de elementos con transform */ .lang-toggle-btn { transition: color 0.3s ease; } .lang-toggle-btn.lang-btn--floating { position: fixed; /* menu-btn: top=32px, height=60px → borde inferior en 92px. Añadimos 8px de separación → 100px */ top: 100px; right: 2rem; width: 60px; height: 36px; display: flex !important; align-items: center; justify-content: center; background: #111111; color: #ffffff !important; border-radius: 20px; font-size: 0.85rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; z-index: 199; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; animation: langBtnSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: auto; } .lang-toggle-btn.lang-btn--floating:hover { background: #222; border-color: rgba(255, 255, 255, 0.25); } @keyframes langBtnSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .header-right { display: flex; align-items: center; gap: 2rem; margin-right: 3.5rem; /* Closer to the 60px menu-btn (fixed at 2rem) */ height: 60px; } .logo { height: 40px; } .logo img { height: 120%; width: auto; object-fit: contain; } .nav { display: flex; gap: 3rem; } .nav a { color: var(--text-light); text-decoration: none; font-size: 1.1rem; /* Slightly refined for better alignment */ text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s ease; display: flex; align-items: center; height: 100%; } .nav a:hover { color: var(--accent); } /* ─── TABLET (768px – 1024px) ──────────────────────────────── */ /* ─── MOBILE (≤ 767px) ─────────────────────────────────────── */ /* ─── MOBILE S (≤ 480px) ────────────────────────────────────── */ .menu-btn { position: fixed; top: 32px; /* Centrado verticalmente (padding 32px + header-right 60px = 124px; centro 62px; 62 - 30 = 32px) */ right: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 60px; height: 60px; background: #111111; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; cursor: pointer; z-index: 200; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); animation: menuPulse 3s infinite; } @keyframes menuPulse { 0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.4); } 70% { box-shadow: 0 0 0 15px rgba(17, 17, 17, 0); } 100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); } } .menu-btn:hover { background: #222; transform: scale(1.05); animation: none; /* Stop pulsing on hover like the chatbot */ } .hamburger-line { width: 24px; height: 1.5px; background-color: #fff; transition: all 0.4s ease; } .menu-btn.active .hamburger-line:nth-child(1) { transform: translateY(4px) rotate(45deg); color: var(--bg-dark); } .menu-btn.active .hamburger-line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } /* 4. MENÚ HAMBURGUESA */ .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 1); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 101; display: flex; align-items: center; padding: 0 10vw; visibility: hidden; opacity: 0; transition: visibility 0.5s ease, opacity 0.5s ease; } .menu-overlay.is-open { visibility: visible; opacity: 1; } .menu-container { width: 100%; display: flex; flex-direction: column; justify-content: center; height: 100%; } .overlay-nav { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 1rem; } .overlay-link { font-size: clamp(2.5rem, 4vw, 4rem) !important; font-weight: 300; text-transform: uppercase; text-decoration: none; color: var(--text-light); opacity: 0; transform: translateY(20px); transition: color 0.3s ease, opacity 0.5s ease 0.2s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s; line-height: 1.2 !important; letter-spacing: 1px !important; } .menu-overlay.is-open .overlay-link { opacity: 1; transform: translateY(0); } .overlay-link:hover { color: var(--accent); } .overlay-footer { display: flex; justify-content: right; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; color: var(--accent); opacity: 0; transition: opacity 0.5s ease 0.4s; } /* Evitar que la tipografía global de páginas individuales afecte al overlay */ .menu-overlay p, .overlay-footer p { font-size: 0.85rem; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; line-height: 1.4; color: var(--accent); } .menu-overlay.is-open .overlay-footer { opacity: 1; } .social-links { display: flex; gap: 1.7rem; } .social-links a { color: var(--text-light); text-decoration: none; transition: color 0.3s ease; } .social-links a:hover { color: var(--accent); } .social-links img { height: 30px; margin: 0 6px; filter: brightness(0) invert(1); transition: opacity 0.3s ease, transform 0.3s ease; } .social-links a:hover img { opacity: 0.7; transform: translateY(-2px); } /* --- 4.COLORES MODO CLARO --- */ body.light-theme { background-color: #ffffff; color: #111111; } body.light-theme .header { background-color: rgba(255, 255, 255, 0.95); border-bottom: 1px solid #eeeeee; } body.light-theme .overlay-link { color: #ffffff; } body.light-theme .nav a { color: #111111; } body.light-theme .nav a:hover { color: #666666; } body.light-theme .hamburger-line { background-color: #111111; } body.light-theme .menu-btn.active .hamburger-line:nth-child(1) { background-color: #ffffff; } body.light-theme .menu-btn.active .hamburger-line:nth-child(2) { background-color: #ffffff; } /* 5. FOOTER */ .footer { position: relative; background-color: var(--bg-dark); padding: 4rem 2rem; z-index: 10; background-color: #000000; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; max-width: 1200px; margin: 0 auto; color: var(--text-light); gap: 2rem; } .footer-grid h4 { font-size: 1.2rem; margin-bottom: 1rem; color: #ffffff; font-weight: 400; } .footer-grid p { color: #888; margin-bottom: 0.5rem; font-size: 0.9rem; font-weight: 400; } .footer-grid a { display: block; color: #888; text-decoration: none; margin-bottom: 0.5rem; font-size: 0.9rem; transition: color 0.3s; } .footer-grid a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-wrap: wrap; gap: 1.5rem; } .footer-social { display: flex; gap: 1.5rem; align-items: center; } .footer-social a { display: flex; align-items: center; justify-content: center; } .footer-social img { height: 22px; filter: brightness(0) invert(1); transition: opacity 0.3s ease; } .footer-social a:hover img { opacity: 0.7; } .footer-copyright p { color: #888; margin: 0; font-size: 0.9rem; font-weight: 400; } .about-content-section { padding: 5vh var(--page-margin, 8vw); display: flex; flex-direction: column; align-items: center; justify-content: center; } .section-body { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: flex-start; } /* 6. COMPONENTES UI GLOBALES (Botones y Formularios) */ /* --- Utilidades --- */ .text-center { text-align: center; } .fade-in-up { opacity: 0; transform: translateY(40px); } /* --- Formularios --- */ .form-group { display: grid; gap: 8px; } .form-group label { font-weight: 600; color: #000000; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 14px 16px; border: 1px solid #cfcfcf; border-radius: 10px; font-size: 1rem; font-weight: 300; background: #fff; font-family: inherit; color: #111; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #333; } .checkbox-group { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; } .checkbox-group input { margin-top: 4px; } /* ========================================================================== AJUSTES MÓVILES (AL FINAL PARA EVITAR SOBREESCRITURAS) ========================================================================== */ /* ─── TABLET menú hamburguesa (768–1024px) ──────────────────── */ /* ─── MOBILE menú hamburguesa (≤ 767px) ────────────────────── */ /* ─── MOBILE LANDSCAPE (Horizontal) ────────────────────────── */ /* ─── DESKTOP AND LARGE TABLET (≥ 1024px) ──────────────────── */ /* ========================================================================== 7. MEDIA QUERIES (TABLET & MOBILE) ========================================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .header { padding: 1.5rem 3rem; } .header-right { margin-right: 4rem; } .logo { height: 34px; } h1 { font-size: clamp(5.5rem, 7vw, 10rem); font-weight: 150; text-transform: uppercase; line-height: 0.9; letter-spacing: -2px; } h2 { font-size: clamp(3.5rem, 6vw, 7rem); } h3 { font-size: clamp(2.8rem, 5vw, 5rem); } p { font-size: 1.3rem; } /* Footer tablet: dos columnas con spacing correcto */ .footer { padding: 3.5rem 3rem; } .footer-grid { gap: 3rem; } .footer-bottom { padding-top: 1.5rem; margin-top: 2.5rem; } } @media (max-width: 767px) { .header { padding: 1rem 1.5rem; } .nav { display: none; } .logo { height: 30px; } /* Tipografía reducida para móvil */ h1, .hero-title, .about-hero-title { font-size: clamp(3.5rem, 10vw, 5.5rem); font-weight: 150; text-transform: uppercase; line-height: 0.9; letter-spacing: -2px; } h2 { font-size: clamp(2.4rem, 9vw, 4rem); letter-spacing: 0px; } h3 { font-size: clamp(2rem, 8vw, 3.5rem); letter-spacing: 0px; } h4 { font-size: 1.6rem; } h5 { font-size: 1.2rem; } h6 { font-size: 1.05rem; } p { font-size: 1.2rem; line-height: 1.8; } /* Footer en dos columnas */ .footer-grid { flex-direction: row; flex-wrap: wrap; gap: 1rem; } .footer-grid>div { flex: 1; min-width: 45%; } .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; margin-top: 2rem; } .footer-social { display: none !important; } } @media (max-width: 480px) { .footer-grid { flex-direction: column; gap: 2rem; } .footer-grid>div { min-width: 100%; } .footer { padding: 2.5rem 1.5rem; } } @media (max-width: 768px) { .section-body { width: 82%; } } @media (min-width: 768px) and (max-width: 1024px) { .menu-btn { top: 28px; right: 1.5rem; width: 52px; height: 52px; } .lang-toggle-btn.lang-btn--floating { top: 92px; right: 1.5rem; } .overlay-link { font-size: clamp(2rem, 5vw, 2.8rem) !important; } } @media (max-width: 767px) { /* Menú hamburguesa centrado con el logo en móvil */ .menu-btn { top: 24px !important; /* padding 16px + header-right 60px = 92px; centro 46px; 46 - 22 = 24px */ right: 1rem !important; width: 44px !important; height: 44px !important; } .lang-toggle-btn.lang-btn--floating { top: 80px !important; /* 24px + 44px + 12px */ right: 1rem !important; width: 44px !important; height: 32px !important; font-size: 0.85rem !important; } /* Mejoras visuales del menú hamburguesa en móvil */ /* Menu overlay mobile fixes */ .menu-overlay { padding: 0 2rem; } /* Ocultar el logo de la cabecera si el menú está abierto */ body.menu-open .header .logo { display: none; } .overlay-nav { gap: 2rem; /* Más espacio para respirar entre enlaces */ margin-bottom: 3rem; } .overlay-link { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; /* Tamaño responsive y equilibrado para móvil */ } .overlay-footer { flex-direction: column-reverse; align-items: flex-start; gap: 1.5rem; padding-top: 1.5rem; /* Ajuste del padding superior */ } .social-links { gap: 1.2rem; /* Ligero ajuste para que no se vean demasiado apretados */ } .social-links img { height: 22px; /* Tamaño un poco más equilibrado */ margin: 0; } } @media (max-height: 500px) and (orientation: landscape) { .menu-overlay { align-items: flex-start; padding-top: 5rem; /* Espacio para el botón de cerrar */ padding-bottom: 2rem; overflow-y: auto; /* Permite scroll si el contenido es más alto que la pantalla */ } .menu-container { justify-content: flex-start; height: auto; min-height: min-content; } .overlay-nav { flex-direction: row; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 2rem; } .overlay-link { font-size: clamp(1.2rem, 6vh, 1.8rem) !important; /* Ajustar el tamaño a la altura disponible */ } .overlay-footer { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 1.5rem; margin-top: auto; } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: 3fr 1fr; } } @media (max-width: 1024px) { .footer-icons-row { justify-content: center !important; } } @media (max-width: 767px) { .footer-grid, .footer-scroll-index .footer-grid { grid-template-columns: 1fr !important; display: grid !important; text-align: center; } .footer-icons-row { justify-content: center !important; } }