/* ============================================================ CRESTA PUBLICITARIA — style.css CSS compartido para todas las páginas del sitio ============================================================ */ /* ─── RESET & VARIABLES ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --accent: #e8b400; --accent-dark: #c49a00; --burgundy: #7d1a35; --burgundy-dk: #5e1228; --ink: #1c1c1c; --ink2: #2d2d2d; --muted: #6b6b6b; --faint: #767676; /* 4.54:1 on white — WCAG AA */ --bg: #ffffff; --bg-off: oklch(97% 0.007 10); /* burgundy-tinted neutral — brand-specific, not warm-cream */ --bg-warm: oklch(96% 0.012 10); /* hover surface, deeper burgundy tint */ --bg-dark: #111111; --border: #dbd6d9; /* burgundy-tinted border */ --border-soft: #e8e3e6; /* softer burgundy-tinted border */ } html { scroll-behavior: smooth; } body { font-family: 'Archivo', sans-serif; background: var(--bg); color: var(--ink2); line-height: 1.65; overflow-x: hidden; font-kerning: normal; font-optical-sizing: auto; } /* ─── ANIMATIONS ─── */ /* Content visible by default; JS adds .js-animations to so hidden tabs / no-JS stays readable */ /* Strong ease-out — built-in easings lack the punch intentional UI motion needs */ :root { --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); } /* Base reveal */ .js-animations .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1); } .js-animations .reveal.up { transform: translateY(14px); } .js-animations .reveal.left { transform: translateX(-14px); } .js-animations .reveal.right { transform: translateX(14px); } .reveal.visible { opacity: 1; transform: none; } .d1 { transition-delay: .1s; } .d2 { transition-delay: .2s; } .d3 { transition-delay: .3s; } .d4 { transition-delay: .4s; } /* legacy aliases used in index/letrascorporeas */ .reveal-delay-1 { transition-delay: .1s; } .reveal-delay-2 { transition-delay: .2s; } .reveal-delay-3 { transition-delay: .3s; } .reveal-delay-4 { transition-delay: .4s; } /* ─── TYPED ANIMATION VARIANTS ─── */ /* Each variant overrides the base reveal's transform distance and transition duration. Stagger delays are applied via JS (inline style) and cleared on transitionend. */ /* Hero: biggest element — most room, most time */ .js-animations .reveal-hero { transform: translateY(20px); transition: opacity 320ms var(--ease-out-strong), transform 320ms var(--ease-out-strong); } /* Section headings: subtle lift, snappy */ .js-animations .reveal-heading { transform: translateY(8px); transition: opacity 240ms var(--ease-out-strong), transform 240ms var(--ease-out-strong); } /* Service catalog rows: medium lift, staggered in JS at 80ms apart */ .js-animations .reveal-card { transform: translateY(16px); transition: opacity 280ms var(--ease-out-strong), transform 280ms var(--ease-out-strong); } /* Portfolio images: fade only — images don't need positional motion */ .js-animations .reveal-photo { transform: none; transition: opacity 200ms var(--ease-out-strong); } /* ─── NAV ─── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 3rem; background: rgba(255,255,255,0.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); transition: padding .35s ease, box-shadow .35s ease; } nav.scrolled { padding: .6rem 3rem; box-shadow: 0 2px 24px rgba(0,0,0,.07); } .nav-logo img { height: 44px; transition: height .3s; } nav.scrolled .nav-logo img { height: 36px; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { font-size: .875rem; font-weight: 400; color: var(--muted); text-decoration: none; position: relative; padding-bottom: 2px; transition: color .2s; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1.5px; background: var(--burgundy); transform: scaleX(0); transform-origin: left; transition: transform .25s; } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } .nav-links a.active { color: var(--ink); } .nav-cta { font-family: 'Barlow Condensed', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--burgundy); padding: .6rem 1.5rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 2px; text-decoration: none; transition: background .2s, transform .15s; } .nav-cta:hover { background: var(--burgundy-dk); transform: translateY(-1px); } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; /* reset