/* ========================================================================== AVARGADE — Soluciones Tecnológicas Sistema: Editorial Minimalism (ver DESIGN.md) Paleta monocromática · Formas rectas (0px radius) · Profundidad por línea ========================================================================== */ :root { --canvas: #ffffff; --ink: #000000; --ink-muted: #333333; --surface-tint: #5e5e5e; --surface-variant: #e2e2e2; --border-subtle: #e5e5e5; /* Fondo oscuro del bloque editorial superior (hero + servicios) */ --stage: #0a0a0b; /* Curva de easing editorial: entrada rápida, asentamiento lento */ --ease-editorial: cubic-bezier(0.23, 1, 0.32, 1); --ease-draw: cubic-bezier(0.19, 1, 0.22, 1); } html { scroll-behavior: smooth; /* Compensa la altura del nav sticky al saltar por anclas */ scroll-padding-top: 96px; } body { background-color: var(--canvas); color: var(--ink); } /* Respeta la preferencia del sistema: sin scroll animado ni movimiento */ @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; } } /* Foco visible y consistente en toda la página (accesibilidad) */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } /* -------------------------------------------------------------------------- Rejilla 12 columnas en desktop. En móvil se mantienen las 12 pistas y el contenido ocupa el ancho completo (col-span-12), lo que reproduce la rejilla fluida de 4 columnas del sistema sin romper las utilidades de Tailwind. -------------------------------------------------------------------------- */ .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; } @media (min-width: 768px) { .grid-12 { gap: 24px; } } /* -------------------------------------------------------------------------- Escenario oscuro (hero + servicios) El shader WebGL vive DENTRO de este bloque, no detrás del . El color sólido de respaldo garantiza legibilidad si WebGL no está disponible o si el usuario pidió reducir el movimiento. -------------------------------------------------------------------------- */ .stage { position: relative; isolation: isolate; background-color: var(--stage); /* Imprescindible: el canvas de abajo es `sticky` con un margen inferior negativo, así que su caja se sale de este bloque y, al ser opaco, llegaba a pintar encima de la sección «Nosotros» dejándola en negro. El recorte limita el pintado al bloque sin convertirlo en contenedor de scroll, que es lo que rompería el `sticky`. Se declaran las dos: `overflow: clip` es la forma directa y `clip-path` cubre los navegadores donde aún no está soportada. */ overflow: clip; clip-path: inset(0); } /* El canvas se queda fijo al viewport en lugar de cubrir los ~2200px del bloque completo: así la capa que el compositor repinta en cada frame mide una pantalla y no toda la sección, y el recorte a los límites de `.stage` lo hace el propio `sticky` sin necesidad de máscaras. El margen negativo evita que ocupe espacio en el flujo. */ .stage__shader { position: sticky; top: 0; display: block; width: 100%; height: 100vh; margin-bottom: -100vh; z-index: -1; pointer-events: none; } /* -------------------------------------------------------------------------- Bento cards — profundidad por línea, nunca por sombra difusa -------------------------------------------------------------------------- */ .bento-card-wrapper { perspective: 1000px; height: 100%; } .bento-card { position: relative; height: 100%; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform-style: preserve-3d; transition: transform 0.6s var(--ease-editorial), box-shadow 0.6s ease, border-color 0.6s ease; } /* Los efectos 3D solo tienen sentido con puntero fino (mouse/trackpad). En táctil se omiten para no dejar tarjetas "pegadas" en estado hover. */ @media (hover: hover) and (pointer: fine) { .bento-card:hover { transform: translateY(-5px) rotateX(2deg) rotateY(2deg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.3); border-color: transparent; /* el trazo lo dibujan los pseudo-elementos */ } .bento-card:hover::before { transform: scaleX(1); } .bento-card:hover::after { transform: scaleY(1); } .bento-card:hover .bento-card__line--bottom { transform: scaleX(1); } .bento-card:hover .bento-card__line--right { transform: scaleY(1); } .bento-card:hover .bento-card__content { transform: translateZ(25px); } } /* Trazo del borde: cada lado se dibuja desde una esquina distinta */ .bento-card::before, .bento-card::after, .bento-card__line--bottom, .bento-card__line--right { content: ""; position: absolute; background: rgba(255, 255, 255, 0.8); transition: transform 0.6s var(--ease-draw); z-index: 10; pointer-events: none; } .bento-card::before { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: left; } .bento-card::after { top: 0; bottom: 0; left: 0; width: 1px; transform: scaleY(0); transform-origin: top; } .bento-card__line--bottom { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: right; } .bento-card__line--right { top: 0; bottom: 0; right: 0; width: 1px; transform: scaleY(0); transform-origin: bottom; } /* Paralaje del contenido dentro de la tarjeta */ .bento-card__content { height: 100%; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.6s var(--ease-editorial); } /* -------------------------------------------------------------------------- Animaciones de entrada -------------------------------------------------------------------------- */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes blur-in { from { filter: blur(12px); opacity: 0; } to { filter: blur(0); opacity: 1; } } .animate-blur-in { animation: blur-in 1.5s var(--ease-editorial) both; } /* -------------------------------------------------------------------------- Panel del logo de Odoo (tarjeta de servicios) -------------------------------------------------------------------------- */ .odoo-panel { display: flex; align-items: center; justify-content: center; background-color: #0d0d0f; /* Halo tenue que despega el logo del fondo de la tarjeta */ background-image: radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.07), transparent 62% ); min-height: 220px; } /* El panel se estira hasta igualar la altura de la columna de texto, así que el logo se dimensiona sobre el ancho del panel y no sobre el de la tarjeta: con un porcentaje fijo quedaba diminuto en la franja estrecha de 768px. */ .odoo-panel__logo { position: relative; width: clamp(120px, 62%, 240px); height: auto; } /* -------------------------------------------------------------------------- Botón «Prueba Odoo» — única forma redondeada del sitio El sistema es recto en todo lo demás; la píldora aísla visualmente la acción de conversión y el pulso la mantiene viva sin robar protagonismo. -------------------------------------------------------------------------- */ @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3); } 70% { box-shadow: 0 0 0 12px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } .cta-pulse { animation: pulse-ring 1.6s cubic-bezier(0.66, 0, 0, 1) infinite; } /* Al pasar el cursor manda el estado hover, no el pulso. */ .cta-pulse:hover, .cta-pulse:focus-visible { animation-play-state: paused; box-shadow: none; } /* Reveal al hacer scroll. Sin JS o sin motion, el contenido queda visible. */ .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease-editorial), transform 0.8s var(--ease-editorial); } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } .delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-400 { transition-delay: 400ms; } .delay-500 { transition-delay: 500ms; } } /* -------------------------------------------------------------------------- Navegación -------------------------------------------------------------------------- */ .nav-link { position: relative; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background-color: currentColor; transition: width 0.3s ease-out; } .nav-link:hover::after, .nav-link:focus-visible::after, .nav-link[aria-current="true"]::after { width: 100%; } /* -------------------------------------------------------------------------- Menú móvil — panel deslizante desde la derecha -------------------------------------------------------------------------- */ .mobile-menu { position: fixed; inset: 0; z-index: 60; visibility: hidden; } .mobile-menu.is-open { visibility: visible; } .mobile-menu__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.4s var(--ease-editorial); } .mobile-menu.is-open .mobile-menu__overlay { opacity: 1; } .mobile-menu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(85vw, 380px); background: var(--canvas); border-left: 1px solid var(--ink); display: flex; flex-direction: column; padding: 24px 32px 40px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 0.45s var(--ease-editorial); } .mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); } /* Cada enlace entra escalonado una vez abierto el panel */ .mobile-menu__link { opacity: 0; transform: translateX(20px); transition: opacity 0.4s var(--ease-editorial), transform 0.4s var(--ease-editorial); } .mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: translateX(0); } .mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 120ms; } .mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 180ms; } .mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 240ms; } .mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 300ms; } /* Bloquea el scroll del documento mientras el panel está abierto */ body.is-menu-open { overflow: hidden; } /* -------------------------------------------------------------------------- Hero — titular -------------------------------------------------------------------------- */ /* «TRANSFORMADA» es una sola palabra de 12 caracteres: a los 48px fijos del token `display-lg-mobile` se sale del viewport en pantallas de 375px y no puede partirse. El tamaño fluido mantiene el 80px de escritorio y escala por debajo del ancho disponible en móvil. */ .hero-title { font-family: "EB Garamond", serif; /* El tope de 4.5rem lo fija «TRANSFORMADA»: a 768px, con los márgenes de 64px, la línea mide ~8.2 veces el tamaño de fuente y a 5rem se saldría de la columna. */ font-size: clamp(2rem, 10.5vw, 4.5rem); line-height: 1.09; letter-spacing: -0.015em; font-weight: 400; } /* A partir de 1024px el titular deja de ocupar el ancho completo y comparte fila con la imagen (8 de 12 columnas), así que la escala se recalcula sobre ese ancho menor para que «TRANSFORMADA» no invada la imagen. */ @media (min-width: 1024px) { .hero-title { font-size: clamp(3.5rem, 6.2vw, 5rem); } } /* -------------------------------------------------------------------------- Hero — seguimiento sutil del puntero -------------------------------------------------------------------------- */ .pointer-stage { --mouse-x: 50%; --mouse-y: 50%; position: relative; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .pointer-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40% ); pointer-events: none; opacity: 0; transition: opacity 0.5s ease; z-index: 0; } .pointer-stage:hover::before { opacity: 1; } .pointer-stage__text { position: relative; z-index: 1; transform: translate( calc((var(--mouse-x) - 50%) * -0.02), calc((var(--mouse-y) - 50%) * -0.02) ); transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .pointer-stage__media { transform: translate( calc((var(--mouse-x) - 50%) * 0.03), calc((var(--mouse-y) - 50%) * 0.03) ); transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); } } /* -------------------------------------------------------------------------- Formulario de contacto -------------------------------------------------------------------------- */ .field { position: relative; display: flex; flex-direction: column; } .field__input { background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 8px 0; font-family: "Hanken Grotesk", sans-serif; font-size: 16px; line-height: 24px; color: var(--ink); transition: border-color 0.3s ease; } .field__input:focus { outline: none; box-shadow: none; border-bottom-color: var(--surface-tint); } /* Subrayado que se dibuja al enfocar */ .field__underline { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--ink); transition: width 0.3s ease, background-color 0.3s ease; pointer-events: none; } .field:focus-within .field__underline { width: 100%; } /* Estado de error: la línea roja permanece aunque el campo pierda el foco */ .field.has-error .field__input { border-bottom-color: #ba1a1a; } .field.has-error .field__underline { width: 100%; background: #ba1a1a; } .field__error { font-family: "Hanken Grotesk", sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: #ba1a1a; margin-top: 8px; min-height: 16px; } /* El honeypot debe ser invisible para personas pero alcanzable por bots */ .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Estado de envío */ .form-status { font-family: "Hanken Grotesk", sans-serif; font-size: 16px; line-height: 24px; padding: 16px 20px; border: 1px solid var(--ink); } .form-status[data-state="success"] { border-color: var(--ink); background: var(--ink); color: var(--canvas); } .form-status[data-state="error"] { border-color: #ba1a1a; color: #93000a; } .submit-button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; } /* Spinner del botón durante el envío */ .spinner { width: 14px; height: 14px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Utilidades -------------------------------------------------------------------------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--canvas); padding: 12px 20px; font-family: "Hanken Grotesk", sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; } .skip-link:focus { left: 0; }