/* ═══════════════════════════════════════════════════════════════════════════ LIOLI CENTER MX — hoja de estilo principal TEMA ──── La paleta cruda (ink / bone / stone / gold) es fija. Encima van los "roles" (--bg, --fg, --muted, --rule…) que SÍ cambian según el tema. Todo componente usa roles, nunca la paleta cruda: así el mismo componente funciona en claro, en oscuro y dentro de una sección forzada a oscuro. Tema por defecto: CLARO (gris cálido). Sigue prefers-color-scheme y se puede forzar con [data-theme="light" | "dark"] en . Las secciones cinematográficas (hero, banda de marca, proyectos, contacto, pie) llevan .section--noche y son oscuras SIEMPRE: ahí manda la fotografía. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. Paleta cruda ───────────────────────────────────────────────────── */ :root { --ink-000: #050506; --ink-100: #0b0b0c; --ink-200: #121214; --ink-300: #1b1b1e; --ink-400: #26262a; --bone-050: #f9f8f6; --bone-100: #f4f2ee; --bone-200: #eceae5; --bone-300: #ddd9d2; --bone-400: #c9c4bb; --stone-300: #b4afa7; --stone-400: #a09a92; --stone-500: #78736c; --stone-600: #565350; --gold-300: #d9bd8c; --gold-400: #c0a06a; --gold-500: #9d7f47; /* Tipografía */ --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif; --fs-micro: .6875rem; --fs-small: .8125rem; --fs-body: 1.0625rem; --fs-lead: clamp(1.0625rem, .9rem + .55vw, 1.375rem); --fs-h3: clamp(1.125rem, 1rem + .45vw, 1.5rem); --fs-h2: clamp(2rem, 1.15rem + 3.4vw, 4.5rem); --fs-h1: clamp(2.6rem, 1.1rem + 6.2vw, 8.2rem); --track-wide: .34em; --track-mid: .16em; /* Ritmo */ --gut: clamp(1.25rem, 5.5vw, 3.75rem); --sec-y: clamp(5rem, 11vh, 11rem); --maxw: 90rem; --measure: 38rem; /* Movimiento */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-expo: cubic-bezier(.19, 1, .22, 1); --ease-inout: cubic-bezier(.65, .05, .36, 1); --nav-h: 4.75rem; } /* ─── 2. Roles: tema claro (por defecto) ────────────────────────────────── */ :root { --bg: #efedea; --surface: #f7f5f2; --surface-2: #e3e0da; --fg: #191a1a; --fg-soft: #34342f; --muted: #6d6963; --accent: var(--gold-500); --accent-soft: var(--gold-400); --rule: rgba(25, 26, 26, .2); --rule-soft: rgba(25, 26, 26, .1); --bg-blur: rgba(239, 237, 234, .84); --shadow: rgba(45, 40, 34, .2); color-scheme: light; } /* ─── 3. Roles: tema oscuro ─────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--ink-100); --surface: var(--ink-200); --surface-2: var(--ink-300); --fg: var(--bone-100); --fg-soft: var(--bone-200); --muted: var(--stone-400); --accent: var(--gold-400); --accent-soft: var(--gold-300); --rule: rgba(244, 242, 238, .14); --rule-soft: rgba(244, 242, 238, .07); --bg-blur: rgba(11, 11, 12, .8); --shadow: rgba(0, 0, 0, .7); color-scheme: dark; } } :root[data-theme="dark"] { --bg: var(--ink-100); --surface: var(--ink-200); --surface-2: var(--ink-300); --fg: var(--bone-100); --fg-soft: var(--bone-200); --muted: var(--stone-400); --accent: var(--gold-400); --accent-soft: var(--gold-300); --rule: rgba(244, 242, 238, .14); --rule-soft: rgba(244, 242, 238, .07); --bg-blur: rgba(11, 11, 12, .8); --shadow: rgba(0, 0, 0, .7); color-scheme: dark; } /* ─── 4. Secciones siempre oscuras ──────────────────────────────────────── */ .section--noche, .hero, .marquee, .foot { --bg: var(--ink-100); --surface: var(--ink-200); --surface-2: var(--ink-300); --fg: var(--bone-100); --fg-soft: var(--bone-200); --muted: var(--stone-400); --accent: var(--gold-400); --accent-soft: var(--gold-300); --rule: rgba(244, 242, 238, .14); --rule-soft: rgba(244, 242, 238, .07); --shadow: rgba(0, 0, 0, .7); background: var(--bg); color: var(--fg); } /* ─── 5. Reset ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); } body { background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: var(--fs-body); font-weight: 300; line-height: 1.65; letter-spacing: .01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; text-rendering: optimizeLegibility; transition: background-color .5s var(--ease), color .5s var(--ease); } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; background: var(--surface-2); } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--accent); color: var(--bone-050); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 999; padding: .7rem 1.1rem; background: var(--fg); color: var(--bg); font-size: var(--fs-small); transform: translateY(-180%); transition: transform .25s; } .skip-link:focus { transform: none; } /* ─── 6. Tipografía ─────────────────────────────────────────────────────── */ .eyebrow { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--muted); } .eyebrow .num { font-variant-numeric: tabular-nums; color: var(--accent); padding-right: .7rem; border-right: 1px solid var(--rule); } .eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); animation: pulse 3s var(--ease-inout) infinite; flex: 0 0 auto; } @keyframes pulse { 50% { box-shadow: 0 0 0 9px transparent; } } .eyebrow--dot { flex-wrap: nowrap; align-items: flex-start; } .eyebrow--dot .dot { margin-top: .45em; } .h2 { font-size: var(--fs-h2); font-weight: 200; line-height: .98; letter-spacing: -.028em; max-width: 20ch; text-wrap: balance; } .h2 em, .hero__title em, .comparador-titulo em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -.005em; color: var(--fg); } .h2--center { max-width: 24ch; margin-inline: auto; text-align: center; } h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.2; letter-spacing: -.012em; } h4 { font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-mid); color: var(--muted); } .lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; color: var(--fg-soft); max-width: 46ch; text-wrap: pretty; } .lead--center { margin-inline: auto; text-align: center; } .respuesta-directa { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); max-width: 52ch; padding-left: 1.4rem; border-left: 1px solid var(--accent); text-wrap: pretty; } .respuesta-directa strong { font-weight: 500; } p { max-width: var(--measure); color: var(--muted); text-wrap: pretty; } p strong, p b { color: var(--fg); font-weight: 500; } /* ─── 7. Utilidades ─────────────────────────────────────────────────────── */ .section { padding: var(--sec-y) var(--gut); position: relative; } .section__head { max-width: var(--maxw); margin: 0 auto clamp(2.5rem, 6vw, 5rem); display: grid; gap: 1.4rem; } .grain { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .42; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } .reveal { opacity: 0; transform: translateY(1.6rem); } .reveal.is-in { opacity: 1; transform: none; transition: opacity 1s var(--ease-expo), transform 1.1s var(--ease-expo); transition-delay: var(--d, 0ms); } /* ─── 8. Botones ────────────────────────────────────────────────────────── */ .btn { --pad: 1.05rem 2rem; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: var(--pad); isolation: isolate; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--track-mid); text-transform: uppercase; border: 1px solid transparent; overflow: hidden; white-space: nowrap; transition: color .45s var(--ease), border-color .45s var(--ease); } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-expo); } .btn:hover::after, .btn:focus-visible::after { transform: scaleY(1); transform-origin: top; } .btn > * { position: relative; z-index: 1; } .btn--solid { background: var(--fg); color: var(--bg); } .btn--solid::after { background: var(--accent); } .btn--solid:hover { color: var(--bone-050); } .btn--line { border-color: var(--rule); color: var(--fg); } .btn--line::after { background: var(--fg); } .btn--line:hover { color: var(--bg); border-color: var(--fg); } .btn--ghost { border-color: var(--rule); color: var(--fg); --pad: .7rem 1.25rem; } .btn--ghost::after { background: var(--fg); } .btn--ghost:hover { color: var(--bg); border-color: var(--fg); } .btn--block { width: 100%; } .linkish { font: inherit; color: inherit; padding: 0; border-bottom: 1px solid var(--rule); } .linkish:hover { border-color: var(--accent); color: var(--accent-soft); } /* ─── 9. Cortina de entrada ─────────────────────────────────────────────── */ .curtain { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--ink-000); color: var(--bone-100); transition: opacity .7s var(--ease), visibility .7s; } .curtain.is-off { opacity: 0; visibility: hidden; } .curtain__inner { display: grid; justify-items: center; gap: 1.1rem; } .curtain__mark { width: min(46vw, 20rem); } .curtain__mark g { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw 1.5s var(--ease) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .curtain__sub { font-size: var(--fs-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--stone-500); opacity: 0; animation: fadeIn .8s .7s var(--ease) forwards; } @keyframes fadeIn { to { opacity: 1; } } /* ─── 10. Navegación ────────────────────────────────────────────────────── */ .nav { position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent; color: var(--bone-100); /* flota sobre el hero oscuro */ transition: background-color .5s var(--ease), backdrop-filter .5s, border-color .5s, color .5s, transform .5s var(--ease); } .nav.is-stuck { background: var(--bg-blur); color: var(--fg); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--rule-soft); } .nav.is-hidden { transform: translateY(-101%); } /* Mientras flota sobre el hero, los filetes deben ser claros aunque el tema de la página sea claro. Se anula por componente, no por variable, para no tener que "des-anular" los roles al fijarse. */ .nav:not(.is-stuck) .btn--ghost { color: var(--bone-100); border-color: rgba(244, 242, 238, .34); } .nav:not(.is-stuck) .btn--ghost::after { background: var(--bone-100); } .nav:not(.is-stuck) .btn--ghost:hover { color: var(--ink-100); border-color: var(--bone-100); } .nav:not(.is-stuck) .tema { border-color: rgba(244, 242, 238, .4); } .nav__bar { max-width: var(--maxw); margin: 0 auto; height: var(--nav-h); padding: 0 var(--gut); display: flex; align-items: center; gap: 1.5rem; } .mark { width: 7.5rem; color: currentColor; } .mark--lg { width: 11rem; } .nav__logo { display: flex; align-items: baseline; gap: .6rem; flex: 0 0 auto; } .nav__logo-sub { font-size: .5rem; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--gold-400); transform: translateY(-.15rem); } .nav.is-stuck .nav__logo-sub { color: var(--accent); } .nav__links { margin-left: auto; display: flex; gap: clamp(1rem, 2vw, 2.2rem); } .nav__links a { position: relative; font-size: var(--fs-micro); font-weight: 400; letter-spacing: var(--track-mid); text-transform: uppercase; color: currentColor; opacity: .62; padding: .4rem 0; transition: opacity .35s var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold-400); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-expo); } .nav__links a:hover, .nav__links a.is-active { opacity: 1; } .nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; } /* En escritorio son .nav__links quienes empujan a la derecha; en móvil, donde los enlaces se ocultan, el empuje pasa a .nav__actions (ver media query). */ .nav__actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; } .nav__links + .nav__actions { margin-left: 1.2rem; } /* Interruptor de tema */ .tema { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; opacity: .55; transition: opacity .35s var(--ease), transform .5s var(--ease-expo); } .tema:hover { opacity: 1; transform: rotate(28deg); } .tema svg { width: 1rem; height: 1rem; } .tema .ico-luna { display: none; } :root[data-theme="dark"] .tema .ico-luna, :root[data-theme="dark"] .tema .ico-sol { display: revert; } :root[data-theme="dark"] .tema .ico-sol { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tema .ico-sol { display: none; } :root:not([data-theme="light"]) .tema .ico-luna { display: revert; } } :root[data-theme="light"] .tema .ico-sol { display: revert; } :root[data-theme="light"] .tema .ico-luna { display: none; } .nav__burger { display: none; width: 2.4rem; height: 2.4rem; place-items: center; } .nav__burger span { display: block; width: 1.4rem; height: 1px; background: currentColor; transition: transform .4s var(--ease), opacity .3s; } .nav__burger span + span { margin-top: .38rem; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(.2rem) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-.2rem) rotate(-45deg); } .menu { position: fixed; inset: var(--nav-h) 0 auto; z-index: 99; background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--rule); padding: 1.5rem var(--gut) 2.25rem; display: grid; gap: 1.6rem; max-height: calc(100svh - var(--nav-h)); overflow-y: auto; } .menu[hidden] { display: none; } .menu nav { display: grid; } .menu nav a { display: flex; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 1.3rem; font-weight: 200; letter-spacing: -.02em; } .menu nav a i { font-style: normal; font-size: var(--fs-micro); color: var(--accent); letter-spacing: var(--track-mid); } .menu__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; font-size: var(--fs-small); color: var(--muted); } .menu__foot address { font-style: normal; line-height: 1.5; } /* ─── 11. Hero ──────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: calc(var(--nav-h) + 4vh) var(--gut) 0; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: -8% 0 0; z-index: -2; } .hero__media img { width: 100%; height: 108%; object-fit: cover; object-position: center 35%; animation: heroDrift 30s var(--ease-inout) infinite alternate; } @keyframes heroDrift { from { transform: scale(1.05); } to { transform: scale(1.13) translateY(-1.5%); } } .hero__veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(125% 95% at 42% 8%, rgba(11,11,12,.22) 0%, rgba(11,11,12,.66) 52%, rgba(11,11,12,.93) 100%), linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.12) 34%, rgba(11,11,12,.97) 100%); } .hero__content { max-width: var(--maxw); width: 100%; margin: 0 auto; align-self: center; display: grid; gap: clamp(1.1rem, 2.1vw, 1.9rem); justify-items: start; } .hero__title { font-size: var(--fs-h1); font-weight: 150; line-height: .88; letter-spacing: -.045em; display: grid; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > * { display: block; } .hero__title .line:nth-child(2) { padding-left: clamp(1rem, 8vw, 9rem); } .hero__title em { background: linear-gradient(96deg, var(--bone-100) 0%, var(--gold-300) 44%, var(--bone-100) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero__sub { max-width: 52ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--bone-200); } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; } .hero__facts { max-width: var(--maxw); width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-soft); border-top: 1px solid var(--rule); } /* El relleno inferior va DENTRO de la celda: si se pone en el