/* ===================================================================== Manitas Bilbao — capa de diseño premium (complementa Tailwind) Vibe: "Soft Structuralism" — blancos/greys, tipografía grotesca, sombras difusas, profundidad y motion con física. Sobrio, no saturado. ===================================================================== */ :root { --ease-premium: cubic-bezier(.32, .72, 0, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* Sombras difusas por capas (ambient light), tintadas de navy */ --shadow-soft: 0 1px 2px rgba(12,32,54,.04), 0 4px 10px -2px rgba(12,32,54,.05), 0 12px 28px -8px rgba(12,32,54,.09); --shadow-float: 0 2px 4px rgba(12,32,54,.04), 0 10px 20px -6px rgba(12,32,54,.08), 0 28px 52px -14px rgba(12,32,54,.16); --shadow-hero: 0 6px 16px -6px rgba(12,32,54,.12), 0 32px 64px -20px rgba(12,32,54,.28); } html { scroll-behavior: smooth; } /* Con Lenis activo desactivamos el smooth nativo (lo gestiona JS) */ html.lenis { scroll-behavior: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } ::selection { background: #F56A16; color: #fff; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.011em; } /* Titulares Sora: tracking más apretado, óptico de display */ .font-display { letter-spacing: -0.03em; } h1.font-display, .font-display.text-4xl, .font-display.text-5xl { letter-spacing: -0.04em; } /* Focus visible coherente con la marca */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #F8873C; outline-offset: 2px; border-radius: 8px; } /* --------------------------------------------------------------------- PROFUNDIDAD — sombras y tarjetas --------------------------------------------------------------------- */ .shadow-card { box-shadow: var(--shadow-soft); transition: box-shadow .55s var(--ease-premium), transform .55s var(--ease-premium); } .shadow-card:hover { box-shadow: var(--shadow-float); } /* Cualquier tarjeta con ring que hace hover:-translate-y gana float + realce */ [class*="ring-1"].rounded-2xl, [class*="ring-1"].rounded-xl { transition: box-shadow .5s var(--ease-premium), transform .5s var(--ease-premium), border-color .5s var(--ease-premium), outline-color .5s var(--ease-premium); } .group:hover > .aspect-\[4\/3\] > img, .group:hover .group-hover\:scale-105 { will-change: transform; } /* Realce sutil superior en superficies claras (borde de luz) */ .shadow-card, .bg-white.rounded-2xl, .bg-white.rounded-xl { box-shadow: var(--shadow-soft); } /* --------------------------------------------------------------------- TIPOGRAFÍA — gradiente de acento --------------------------------------------------------------------- */ .text-gradient { background: linear-gradient(100deg, #F8873C 0%, #F56A16 55%, #E6500C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --------------------------------------------------------------------- BOTONES — física de pulsación + destello (aplicado por JS: .js-cta) --------------------------------------------------------------------- */ .js-cta { position: relative; overflow: hidden; isolation: isolate; transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium), filter .45s var(--ease-premium); } .js-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.30) 48%, transparent 62%); transform: translateX(-130%) skewX(-12deg); transition: transform .8s var(--ease-premium); } .js-cta:hover::after { transform: translateX(130%) skewX(-12deg); } .js-cta:hover { filter: brightness(1.04); box-shadow: 0 10px 26px -8px rgba(245,106,22,.5); } .js-cta:active { transform: scale(.975); } .js-cta.is-wa:hover { box-shadow: 0 10px 26px -8px rgba(37,211,102,.5); } /* --------------------------------------------------------------------- NAV — subrayado animado en escritorio --------------------------------------------------------------------- */ @media (min-width: 1024px) { header nav > a, header nav .nav-drop > a { position: relative; } header nav > a::after, header nav .nav-drop > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: #F56A16; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-premium); } header nav > a:hover::after, header nav .nav-drop:hover > a::after { transform: scaleX(1); } } /* --------------------------------------------------------------------- ACORDEONES FAQ --------------------------------------------------------------------- */ details.faq { transition: background-color .4s var(--ease-premium), box-shadow .4s var(--ease-premium); } details.faq summary { cursor: pointer; list-style: none; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary .chev { transition: transform .35s var(--ease-spring); } details.faq[open] summary .chev { transform: rotate(180deg); } details.faq[open] { box-shadow: var(--shadow-soft); } details.faq[open] summary { color: #14304B; } details.faq[open] > p { animation: faq-in .45s var(--ease-premium); } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------- MEGA-MENÚ ESCRITORIO --------------------------------------------------------------------- */ .nav-drop .drop-panel { visibility: hidden; opacity: 0; transform: translateY(10px) scale(.99); transition: opacity .22s var(--ease-premium), transform .22s var(--ease-premium), visibility 0s linear .22s; } .nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel { visibility: visible; opacity: 1; transform: translateY(0) scale(1); transition: opacity .22s var(--ease-premium), transform .22s var(--ease-premium); } /* --------------------------------------------------------------------- MENÚ MÓVIL (fix del containing block por backdrop-blur del header) --------------------------------------------------------------------- */ #menu-movil { height: calc(100vh - 64px); height: calc(100dvh - 64px); bottom: auto; } #menu-movil a, #menu-movil summary { transition: background-color .3s var(--ease-premium), color .3s var(--ease-premium); } /* --------------------------------------------------------------------- BARRA CTA FIJA MÓVIL + progreso de scroll --------------------------------------------------------------------- */ .sticky-cta { padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 24px -12px rgba(12,32,54,.25); } @media (max-width: 1023.5px) { body { padding-bottom: 64px; } .grecaptcha-badge { bottom: 84px !important; } } #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; background: linear-gradient(90deg, #F8873C, #F56A16, #E6500C); transform: scaleX(0); transform-origin: 0 50%; will-change: transform; } /* --------------------------------------------------------------------- ORBES DE GRADIENTE (inyectados por JS en secciones oscuras) Usan radial-gradient (no filter:blur) -> baratos en GPU. --------------------------------------------------------------------- */ .orb { position: absolute; border-radius: 9999px; pointer-events: none; z-index: 0; opacity: .55; mix-blend-mode: screen; animation: orb-float 18s var(--ease-premium) infinite alternate; } .orb-a { background: radial-gradient(circle at 50% 50%, rgba(245,106,22,.55) 0%, rgba(245,106,22,0) 68%); } .orb-b { background: radial-gradient(circle at 50% 50%, rgba(63,122,172,.55) 0%, rgba(63,122,172,0) 70%); } @keyframes orb-float { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4%, -6%, 0) scale(1.12); } } /* La sección oscura debe recortar los orbes y quedar como contexto */ .has-orbs { position: relative; overflow: hidden; } .has-orbs > *:not(.orb):not(.img-overlay) { position: relative; z-index: 1; } /* --------------------------------------------------------------------- RUIDO/GRANO FIJO (textura "física", muy sutil) --------------------------------------------------------------------- */ #grain { position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------- IMAGEN HERO con degradado de marca (cede ante utilidades de posición) --------------------------------------------------------------------- */ .img-overlay:not(.absolute):not(.fixed):not(.relative):not(.sticky) { position: relative; } .img-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, rgba(12,32,54,.6) 0%, rgba(12,32,54,.18) 55%, rgba(12,32,54,0) 100%); pointer-events: none; } /* Marco "double-bezel" para imágenes destacadas (aplicado por JS: .framed) */ .framed { padding: 6px; border-radius: 1.6rem; background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(241,246,251,.6)); box-shadow: var(--shadow-hero); outline: 1px solid rgba(12,32,54,.06); outline-offset: 0; } .framed > img { border-radius: calc(1.6rem - 6px); display: block; } /* --------------------------------------------------------------------- REVEAL — el estado oculto SOLO existe con JS (.js-anim). Sin JS: visible. Lo dispara IntersectionObserver añadiendo .reveal-in (robusto, sin depender de Lenis/ScrollTrigger). Red de seguridad en JS revela lo que quede. --------------------------------------------------------------------- */ .js-anim [data-reveal] { opacity: 0; transform: translateY(30px); filter: blur(6px); transition: opacity .85s var(--ease-premium), transform .85s var(--ease-premium), filter .85s var(--ease-premium); will-change: opacity, transform; } .js-anim [data-reveal].reveal-in { opacity: 1; transform: none; filter: blur(0); } @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* --------------------------------------------------------------------- TABLAS (por si quedara alguna informativa, ya sin precios) --------------------------------------------------------------------- */ .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --------------------------------------------------------------------- UTILIDADES --------------------------------------------------------------------- */ .text-balance { text-wrap: balance; } .shadow-soft { box-shadow: var(--shadow-soft); } .shadow-float { box-shadow: var(--shadow-float); } /* Chips de confianza con acabado glass sobre imágenes oscuras */ .chip-glass { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }