/* ========================================================= LÓGICA INTRÉPIDA — "Las Esferas" Sistema visual compartido por las 4 páginas (una por esfera). Estética: videojuego de 8/16 bits, lograda con CSS puro (sin GIFs pesados): pasos discretos (steps()), sombras duras, fuentes pixeladas y paletas de las paletas de marca ya existentes. ========================================================= */ /* Fuentes: se cargan desde en el de cada página (más rápido que @import) */ :root { /* Ancla de marca (constante en las 4 esferas) */ --verde-marca: #009583; --papel: #F1ECE0; --tinta: #0B0F0E; --blanco: #FBFAF6; /* Acentos por esfera — tomados de las paletas ya documentadas de la marca */ --acento-geosfera: #BE7138; /* tierra, paleta Threedom */ --acento-hidrosfera: #009BA8; /* turquesa, paleta Collective */ --acento-atmosfera: #8377DB; /* morado, paleta Threedom */ --acento-biosfera: #009583; /* verde marca directo */ --fuente-pixel: 'Press Start 2P', monospace; --fuente-retro: 'VT323', monospace; --radio: 0px; /* el pixel-art no usa esquinas redondeadas */ --paso-sombra: 5px; /* desplazamiento de las sombras duras, sin difuminado */ } /* -------------------- Paletas por esfera (se activan con una clase en ) -------------------- */ body.geosfera { --acento: var(--acento-geosfera); --fondo-1: #2B1D14; --fondo-2: #5A3B22; --fondo-3: #8A5A32; } body.hidrosfera { --acento: var(--acento-hidrosfera); --fondo-1: #032A33; --fondo-2: #0A4E5C; --fondo-3: #12768A; } body.atmosfera { --acento: var(--acento-atmosfera); --fondo-1: #171B33; --fondo-2: #2C3564; --fondo-3: #4A4F97; } body.biosfera { --acento: var(--acento-biosfera); --fondo-1: #071F19; --fondo-2: #0F3D2E; --fondo-3: #145C3F; } /* -------------------- Reinicio base -------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--fondo-1); color: var(--papel); font-family: var(--fuente-retro); font-size: 1.25rem; line-height: 1.5; } /* El cursor a medida oculta el del sistema (solo si JS confirma mouse real) */ body.cursor-activo, body.cursor-activo a, body.cursor-activo button { cursor: none; } h1, h2, h3 { font-family: var(--fuente-pixel); line-height: 1.5; margin: 0 0 0.7em; text-wrap: balance; } h1 { font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); } h2 { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); } h3 { font-size: 0.95rem; } p { margin: 0 0 1em; max-width: 62ch; font-size: 1.3rem; } a { color: inherit; } img, svg { display: block; max-width: 100%; image-rendering: pixelated; } ul { list-style: none; margin: 0; padding: 0; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } .contenedor { width: min(1180px, 100% - 2.5rem); margin-inline: auto; } .sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--tinta); color: var(--papel); padding: 0.75rem 1.25rem; z-index: 400; transition: top 0.2s steps(3); font-family: var(--fuente-pixel); font-size: 0.7rem; } .skip-link:focus { top: 1rem; } :focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; } /* -------------------- Fondo de "capas" con textura de tramado (dithering) -------------------- */ .fondo-capas { position: fixed; inset: 0; z-index: -2; background: repeating-linear-gradient(180deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 4px), linear-gradient(180deg, var(--fondo-1) 0%, var(--fondo-2) 55%, var(--fondo-3) 100%); } /* Escenario de siluetas que se desplaza lento (paralaje barato, sin JS) */ .fondo-escenario { position: fixed; left: 0; right: 0; bottom: 0; height: 22vh; z-index: -1; background-repeat: repeat-x; background-size: 480px 100%; background-position: 0 0; opacity: 0.55; animation: desfile-fondo 40s linear infinite; } @keyframes desfile-fondo { from { background-position-x: 0; } to { background-position-x: -480px; } } @media (prefers-reduced-motion: reduce) { .fondo-escenario { animation: none; } } /* Silueta de paisaje por esfera (SVG en línea, muy liviano, se repite sin costuras) */ body.geosfera .fondo-escenario { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 100'%3E%3Cpath d='M0,100 L0,62 L55,24 L95,52 L150,14 L205,58 L265,20 L325,60 L385,28 L440,58 L480,40 L480,100 Z' fill='%238A5A32'/%3E%3C/svg%3E"); } body.hidrosfera .fondo-escenario { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 100'%3E%3Cpath d='M0,60 C40,30 80,90 120,60 C160,30 200,90 240,60 C280,30 320,90 360,60 C400,30 440,90 480,60 L480,100 L0,100 Z' fill='%2312768A'/%3E%3C/svg%3E"); height: 16vh; } body.atmosfera .fondo-escenario { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 100'%3E%3Cellipse cx='60' cy='70' rx='55' ry='18' fill='%234A4F97'/%3E%3Cellipse cx='110' cy='58' rx='40' ry='14' fill='%234A4F97'/%3E%3Cellipse cx='260' cy='72' rx='60' ry='20' fill='%234A4F97'/%3E%3Cellipse cx='320' cy='56' rx='36' ry='13' fill='%234A4F97'/%3E%3Cellipse cx='430' cy='68' rx='50' ry='17' fill='%234A4F97'/%3E%3C/svg%3E"); height: 14vh; } body.biosfera .fondo-escenario { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 100'%3E%3Cpath d='M0,100 L0,66 L20,66 L30,40 L40,66 L60,66 L75,28 L90,66 L110,66 L120,46 L130,66 L150,66 L165,34 L180,66 L200,66 L215,50 L230,66 L250,66 L260,40 L270,66 L290,66 L305,28 L320,66 L340,66 L350,46 L360,66 L380,66 L395,34 L410,66 L430,66 L445,50 L460,66 L480,66 L480,100 Z' fill='%23145C3F'/%3E%3C/svg%3E"); } /* Textura de "scanlines" sutil, efecto CRT muy barato */ .crt::after { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0,0,0,0.09) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; opacity: 0.5; } /* -------------------- Cursor a medida (amonita fósil) -------------------- */ .cursor-amonita { position: fixed; top: 0; left: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; pointer-events: none; z-index: 999; opacity: 0; color: var(--acento, var(--verde-marca)); will-change: transform; } .cursor-amonita--visible { opacity: 1; } /* El bamboleo va en el SVG interno, no en el contenedor que JS mueve con transform: así ninguno de los dos "pisa" el transform del otro. */ .cursor-amonita svg { filter: drop-shadow(2px 2px 0 var(--tinta)); animation: bambolear-amonita 1.6s steps(4) infinite; transform-origin: 50% 50%; } @keyframes bambolear-amonita { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(14deg); } } @media (hover: none) { .cursor-amonita { display: none; } } @media (prefers-reduced-motion: reduce) { .cursor-amonita svg { animation: none; } } /* -------------------- Botones y marcos "pixel" -------------------- */ .boton-pixel { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--fuente-pixel); font-size: 0.72rem; line-height: 1.6; padding: 0.9em 1.3em; background: var(--acento); color: var(--tinta); border: 3px solid var(--tinta); box-shadow: var(--paso-sombra) var(--paso-sombra) 0 0 var(--tinta); text-decoration: none; transition: transform 0.1s steps(2), box-shadow 0.1s steps(2); } .boton-pixel:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--tinta); } .boton-pixel:active { transform: translate(var(--paso-sombra), var(--paso-sombra)); box-shadow: 0 0 0 0 var(--tinta); } .boton-pixel--fantasma { background: transparent; color: var(--papel); border-color: var(--papel); box-shadow: var(--paso-sombra) var(--paso-sombra) 0 0 rgba(0,0,0,0.4); } .marco-pixel { border: 3px solid var(--tinta); box-shadow: var(--paso-sombra) var(--paso-sombra) 0 0 var(--acento); background: rgba(11,15,14,0.55); } /* -------------------- Encabezado / selector de capas (nav compartida) -------------------- */ .encabezado { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(11,15,14,0.85); border-bottom: 3px solid var(--acento); padding-block: 0.7rem; } .encabezado__interior { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--papel); } .marca__icono { width: 28px; height: 28px; color: var(--verde-marca); } .marca__texto { font-family: var(--fuente-pixel); font-size: 0.68rem; letter-spacing: 0.02em; } .selector-capas { display: flex; gap: 0.4rem; } .selector-capas__enlace { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem; text-decoration: none; color: rgba(241,236,224,0.6); font-family: var(--fuente-pixel); font-size: 0.55rem; border: 2px solid transparent; } .selector-capas__enlace svg { width: 20px; height: 20px; } .selector-capas__enlace:hover { color: var(--papel); border-color: rgba(241,236,224,0.3); } .selector-capas__enlace--activo { color: var(--tinta); background: var(--acento); border-color: var(--tinta); } @media (max-width: 720px) { .encabezado__interior { justify-content: center; } .marca__texto { display: none; } .selector-capas__enlace span { display: none; } } /* -------------------- Héroe de cada esfera -------------------- */ .heroe-esfera { position: relative; min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 7rem 1.5rem 4rem; } .heroe-esfera__ceja { font-family: var(--fuente-pixel); font-size: 0.65rem; color: var(--acento); margin-bottom: 1.2rem; letter-spacing: 0.04em; } .heroe-esfera__titulo { max-width: 16ch; } .heroe-esfera__texto { max-width: 56ch; color: rgba(241,236,224,0.85); font-size: 1.4rem; } .heroe-esfera__acciones { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; } /* Insignia central animada (steps = look de sprite de pocos cuadros) */ .insignia-esfera { width: clamp(96px, 18vw, 160px); height: clamp(96px, 18vw, 160px); color: var(--acento); margin-bottom: 1.6rem; animation: latido-insignia 2.4s steps(6) infinite; } @keyframes latido-insignia { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.08) rotate(-6deg); } } @media (prefers-reduced-motion: reduce) { .insignia-esfera { animation: none; } } /* -------------------- Secciones genéricas -------------------- */ .seccion { padding-block: clamp(3.5rem, 4vw, 6rem); position: relative; } .seccion__titulo { text-align: center; margin-bottom: 2.5rem; } .seccion__intro { text-align: center; max-width: 60ch; margin-inline: auto 2.5rem; color: rgba(241,236,224,0.8); } /* Chips de valores / etiquetas, estilo "power-up" */ .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .chips li { font-family: var(--fuente-pixel); font-size: 0.6rem; padding: 0.7em 0.9em; background: var(--tinta); color: var(--papel); border: 2px solid var(--acento); } /* -------------------- Galería (Experiencias / Hidrósfera) -------------------- */ .galeria-experiencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.4rem; } .tarjeta-experiencia { position: relative; aspect-ratio: 4 / 5; perspective: 900px; } .tarjeta-experiencia__interior { position: relative; width: 100%; height: 100%; transition: transform 0.5s steps(8); transform-style: preserve-3d; } .tarjeta-experiencia:hover .tarjeta-experiencia__interior, .tarjeta-experiencia:focus-within .tarjeta-experiencia__interior { transform: rotateY(180deg); } .tarjeta-experiencia__cara { position: absolute; inset: 0; backface-visibility: hidden; border: 3px solid var(--tinta); display: flex; flex-direction: column; } .tarjeta-experiencia__frente { background: var(--fondo-2); } .tarjeta-experiencia__foto { flex: 1; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 6px, transparent 6px 12px), var(--fondo-3); display: flex; align-items: center; justify-content: center; color: rgba(241,236,224,0.5); } .tarjeta-experiencia__foto svg { width: 40%; height: 40%; } .tarjeta-experiencia__rotulo { font-family: var(--fuente-pixel); font-size: 0.58rem; padding: 0.6em; background: var(--tinta); color: var(--papel); } .tarjeta-experiencia__reverso { background: var(--tinta); color: var(--papel); transform: rotateY(180deg); padding: 1.1rem; justify-content: center; } .tarjeta-experiencia__reverso h3 { color: var(--acento); font-size: 0.75rem; margin-bottom: 0.6em; } .tarjeta-experiencia__reverso p { font-size: 1.05rem; margin-bottom: 0.4em; } .tarjeta-experiencia__etiqueta { display: inline-block; font-family: var(--fuente-pixel); font-size: 0.5rem; color: var(--tinta); background: var(--acento); padding: 0.4em 0.6em; margin-bottom: 0.6em; } @media (hover: none) { .tarjeta-experiencia__interior { transition: transform 0.5s steps(8); } .tarjeta-experiencia.girada .tarjeta-experiencia__interior { transform: rotateY(180deg); } } /* -------------------- Catálogo de productos (Productos / Atmósfera) -------------------- */ .catalogo-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.6rem; } .tarjeta-producto { display: flex; flex-direction: column; border: 3px solid var(--tinta); background: rgba(11,15,14,0.55); box-shadow: var(--paso-sombra) var(--paso-sombra) 0 0 var(--acento); transition: transform 0.15s steps(2); } .tarjeta-producto:hover { transform: translate(-3px, -3px); } .tarjeta-producto__caja { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 8px, transparent 8px 16px), var(--fondo-2); border-bottom: 3px solid var(--tinta); color: var(--acento); } .tarjeta-producto__caja svg { width: 46%; height: 46%; } .tarjeta-producto__cuerpo { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; flex: 1; } .tarjeta-producto__numero { font-family: var(--fuente-pixel); font-size: 0.55rem; color: var(--acento); margin-bottom: 0.6em; } .tarjeta-producto h3 { font-size: 0.8rem; margin-bottom: 0.4em; } .tarjeta-producto__ficha { display: flex; gap: 0.8rem; flex-wrap: wrap; font-family: var(--fuente-pixel); font-size: 0.5rem; color: rgba(241,236,224,0.7); margin-top: auto; padding-top: 0.8em; border-top: 1px dashed rgba(241,236,224,0.25); } /* -------------------- Blog (Ensayos / Biosfera) -------------------- */ .lista-ensayos { display: flex; flex-direction: column; gap: 1.4rem; max-width: 760px; margin-inline: auto; } .tarjeta-ensayo { border: 3px solid var(--tinta); background: rgba(11,15,14,0.5); box-shadow: var(--paso-sombra) var(--paso-sombra) 0 0 var(--acento); padding: 1.6rem 1.8rem; } .tarjeta-ensayo__meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-family: var(--fuente-pixel); font-size: 0.55rem; color: var(--acento); margin-bottom: 0.8em; } .tarjeta-ensayo h2 { font-size: 1.05rem; margin-bottom: 0.5em; } .tarjeta-ensayo p { color: rgba(241,236,224,0.85); } .tarjeta-ensayo__extracto { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s steps(6), opacity 0.4s steps(6); } .tarjeta-ensayo.abierta .tarjeta-ensayo__extracto { max-height: 40em; opacity: 1; margin-top: 0.8em; } .tarjeta-ensayo__boton { font-family: var(--fuente-pixel); font-size: 0.58rem; color: var(--tinta); background: var(--acento); padding: 0.6em 0.9em; border: 2px solid var(--tinta); } .tarjeta-ensayo__boton:hover { filter: brightness(1.1); } /* -------------------- Pie -------------------- */ .pie { border-top: 3px solid var(--acento); padding-block: 2.5rem; background: rgba(0,0,0,0.25); } .pie__interior { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .pie__nav { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 1rem; } .pie__legal { width: 100%; text-align: center; font-size: 0.95rem; opacity: 0.6; } /* -------------------- Animación de entrada: meteorito (solo Inicio) -------------------- */ .intro-meteorito { position: fixed; inset: 0; z-index: 500; background: radial-gradient(ellipse at 50% 20%, #16224a 0%, #060812 70%); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity 0.6s steps(6), visibility 0.6s steps(6); } .intro-meteorito--oculto { opacity: 0; visibility: hidden; pointer-events: none; } .intro-meteorito__estrella { position: absolute; width: 2px; height: 2px; background: #fff; opacity: 0.7; } .intro-meteorito__cuerpo { position: absolute; top: -10%; left: 8%; width: 26px; height: 26px; background: var(--acento-geosfera); box-shadow: -6px -3px 0 2px #d99a5b, -12px -6px 0 4px rgba(217,154,91,0.35); animation: caer-meteorito 2.1s cubic-bezier(.55,0,.85,.35) forwards; } @keyframes caer-meteorito { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(68vw, 78vh) rotate(35deg); } } .intro-meteorito__impacto { position: absolute; left: calc(8% + 68vw); top: calc(-10% + 78vh); width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; transform: translate(-50%, -50%) scale(0); animation: destello-impacto 0.5s steps(4) 2s forwards; } @keyframes destello-impacto { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0); box-shadow: 0 0 0 0 #fff; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 60px rgba(255,255,255,0); } } .intro-meteorito__texto { position: relative; z-index: 2; font-family: var(--fuente-pixel); color: var(--papel); font-size: 0.7rem; text-align: center; opacity: 0; animation: aparecer-texto-intro 0.4s steps(3) 0.3s forwards; } @keyframes aparecer-texto-intro { to { opacity: 0.8; } } .intro-meteorito__saltar { position: absolute; bottom: 2rem; right: 2rem; z-index: 3; font-family: var(--fuente-pixel); font-size: 0.55rem; color: var(--papel); background: transparent; border: 2px solid var(--papel); padding: 0.6em 0.9em; } @media (prefers-reduced-motion: reduce) { .intro-meteorito__cuerpo, .intro-meteorito__impacto { animation: none; display: none; } } /* -------------------- Reducción de movimiento / accesibilidad general -------------------- */ @media (hover: none) { .boton-pixel:active { transform: translate(var(--paso-sombra), var(--paso-sombra)); } }