/* ========================================================================== Look Space — sitio de portafolio y contacto Dirección visual: «lila invertido» (ver design/*.dc.html). Estructura y comportamiento calcados de la plantilla Xpovio; paleta, tipografía y layout tomados del rediseño aprobado por el cliente. ========================================================================== */ :root{ /* Paleta oficial Look Space — lila invertido */ --violet: #8255B2; /* Cosmic Violet — acentos, contornos, bloques llenos (fondo claro) */ --lavender: #C599FF; /* Lavender Purple — degradado de barras de progreso */ --orchid: #CDA5F8; /* Light Orchid — cinta de collage, acentos sobre fondo oscuro */ --lilac: #EBE6EF; /* Lilac Gray — fondo */ --charcoal: #333333; /* Dark Charcoal — tinta de titulares, reglas, bloques oscuros */ --white: #ffffff; --body: #4a4a52; /* cuerpo de texto */ --muted: #6b6b74; /* texto apagado: stats, meta, labels */ --caption: #8a8a92; /* pie de foto */ /* Variantes solo para texto pequeño: los tonos de marca se quedan entre 4.3:1 y 3.4:1 sobre el fondo claro, por debajo del 4.5:1 que exige un texto de 11px. Los titulares, bloques y contornos siguen con el color de marca, que a ese tamaño cumple de sobra. */ --violeta-texto: #744CA0; /* 4.60:1 sobre papel, grano .4 (rgb 222,217,225) */ --apagado-texto: #5E5E66; /* 4.62:1 sobre papel, grano .4 (rgb 222,217,225) */ --pie-foto: #74747B; /* 4.64:1 sobre blanco (tarjeta, sin grano) */ --f-display: 'Sora', system-ui, sans-serif; --f-ui: 'Jost', system-ui, sans-serif; --f-body: 'Nunito Sans', system-ui, sans-serif; --wrap: 1140px; --gut: 24px; --pad-y: clamp(72px, 9vw, 130px); --ease: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box; } /* overflow-x en además de : las letras entran desplazadas 48px a la derecha y sin esto asoman una barra horizontal antes de animarse. */ html{ scroll-behavior:smooth; overflow-x:hidden; } body{ margin:0; background:var(--lilac); color:var(--body); font:400 1rem/1.85 var(--f-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.is-locked{ overflow:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } svg{ width:1em; height:1em; } .sprite{ position:absolute; width:0; height:0; } h1,h2,h3{ font-family:var(--f-display); color:var(--charcoal); margin:0; letter-spacing:-.02em; } :focus-visible{ outline:2px solid var(--violet); outline-offset:3px; } .clients :focus-visible, .footer :focus-visible{ outline-color:var(--orchid); } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .container{ position:relative; z-index:1; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); } .section{ position:relative; padding-block:var(--pad-y); } /* ── grano de papel ───────────────────────────────────────────────────── */ /* Textura compartida por cada sección sobre fondo claro (ver .paper en los artboards). No se usa en secciones que cierran a charcoal (clientes, footer). */ .paper{ position:relative; } .paper::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } /* ── piezas compartidas ───────────────────────────────────────────────── */ .eyebrow{ display:inline-flex; align-items:center; gap:.5em; font:600 .8125rem/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--violeta-texto); } .eyebrow svg{ font-size:1.1em; } .eyebrow--pill{ padding:.7em 1.2em; border:1.5px solid var(--violet); border-radius:50px; transition:background .3s var(--ease), color .3s var(--ease); } a.eyebrow--pill:hover{ background:var(--violet); color:var(--lilac); } .title{ font-size:clamp(1.85rem, 3.4vw, 3.1rem); font-weight:800; line-height:1.05; letter-spacing:-.03em; } .outline{ font-style:normal; color:transparent; -webkit-text-stroke:1.6px var(--violet); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; padding:16px 32px; border-radius:50px; font:600 .875rem/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; border:2px solid transparent; transition:.35s var(--ease); } .btn--outline{ border-color:var(--violet); color:var(--violet); } .btn--outline:hover{ background:var(--violet); color:var(--lilac); } .btn--solid{ background:var(--charcoal); color:var(--lilac); } .btn--solid:hover{ background:var(--violet); color:var(--lilac); } /* ── marquesinas ──────────────────────────────────────────────────────── */ .marquee{ display:block; overflow:hidden; position:relative; z-index:1; } .marquee__track{ display:flex; width:max-content; align-items:center; animation:mq 30s linear infinite; } .marquee__track > span{ display:inline-flex; align-items:center; gap:.35em; white-space:nowrap; padding-inline:clamp(16px,2.4vw,34px); font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.8rem, 4.4vw, 3.4rem); line-height:1.1; } @keyframes mq{ to{ transform:translateX(-50%); } } /* ── cursor ───────────────────────────────────────────────────────────── */ .cursor{ position:fixed; top:0; left:0; z-index:120; pointer-events:none; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; border:1.5px solid var(--violet); background:rgba(130,85,178,.14); opacity:0; transition:opacity .3s, transform .18s var(--ease); } .cursor.is-on{ opacity:1; } .cursor.is-big{ transform:scale(1.8); background:rgba(130,85,178,.22); } /* ══ HEADER ═══════════════════════════════════════════════════════════ */ .header{ position:fixed; inset:0 0 auto; z-index:60; background:var(--lilac); border-bottom:2px solid var(--charcoal); transition:box-shadow .4s var(--ease); } .header.is-stuck{ box-shadow:0 4px 18px rgba(51,51,51,.1); } .header__inner{ max-width:calc(var(--wrap) + 240px); margin-inline:auto; padding:18px var(--gut); display:flex; align-items:center; justify-content:space-between; } .brand img{ width:132px; } .header .brand img, .offcanvas .brand img{ filter:invert(1) brightness(.25); } .burger{ width:64px; height:64px; border-radius:50%; border:1.5px solid var(--charcoal); display:grid; place-content:center; justify-items:end; gap:7px; transition:.35s var(--ease); } .burger span{ display:block; width:26px; height:2px; background:var(--charcoal); transition:.3s var(--ease); } .burger span:last-child{ width:16px; } .burger:hover{ border-color:var(--violet); background:rgba(130,85,178,.1); } .burger:hover span{ background:var(--violet); } .burger:hover span:last-child{ width:26px; } /* ── menú a pantalla completa ─────────────────────────────────────────── */ .offcanvas{ position:fixed; inset:0; z-index:90; background:var(--lilac); display:flex; flex-direction:column; opacity:0; visibility:hidden; transform:translateY(-2%); transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; } .offcanvas.is-open{ opacity:1; visibility:visible; transform:none; } .offcanvas__bar{ max-width:calc(var(--wrap) + 240px); width:100%; margin-inline:auto; padding:18px var(--gut); display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid var(--charcoal); } .close{ font-size:2rem; color:var(--charcoal); line-height:0; transition:color .3s; } .close:hover{ color:var(--violet); } .offcanvas__body{ flex:1; max-width:calc(var(--wrap) + 240px); width:100%; margin-inline:auto; padding:0 var(--gut) 8vh; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; } .menu{ display:flex; flex-direction:column; } .menu a{ font:800 clamp(1.5rem,2.9vw,2.4rem)/1 var(--f-display); text-transform:uppercase; color:var(--charcoal); padding:.55em 0; border-bottom:2px solid var(--charcoal); transition:color .3s var(--ease), padding-left .3s var(--ease); } .menu a:hover{ color:var(--violet); padding-left:.35em; } .ghost{ margin:0; text-align:right; font:800 clamp(3rem,7.6vw,6.4rem)/.92 var(--f-display); color:rgba(51,51,51,.07); text-transform:uppercase; letter-spacing:-.03em; } /* ══ HERO ═════════════════════════════════════════════════════════════ */ .banner{ position:relative; overflow:hidden; padding:clamp(120px,16vh,170px) 0 0; } .banner__inner{ /* z-index:2, no 1: .banner__ribbon (después en el DOM) también pinta a z-index:1 y con el mismo valor gana el que va después, tapando los últimos px de la chapa que sobresale de .banner__media. */ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); } .banner__title{ grid-column:1; margin:0 0 clamp(28px,5vh,60px); font-size:clamp(2.3rem,6.4vw,5.2rem); font-weight:800; line-height:.87; text-transform:uppercase; letter-spacing:-.045em; } .banner__title .ln{ display:block; } .banner__title .boxed{ display:inline-block; margin-top:.1em; padding:.02em .28em .1em; background:var(--charcoal); color:var(--lilac); font-style:normal; } .banner__media{ grid-column:2; grid-row:1/3; position:relative; } .banner__photo{ background:var(--white); padding:10px 10px 16px; box-shadow:0 18px 40px rgba(51,51,51,.2); } .banner__photo img{ width:100%; height:clamp(160px,22vw,236px); object-fit:cover; filter:grayscale(1) contrast(1.1); } .banner__photo figcaption{ margin-top:9px; font:500 .625rem/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--pie-foto); } .banner__photo--a{ width:min(78%,262px); --reposo:rotate(4deg); transform:var(--reposo); position:relative; z-index:2; } .banner__photo--b{ width:min(68%,228px); margin:-64px 0 0 auto; --reposo:rotate(-6deg); transform:var(--reposo); position:relative; z-index:1; } .banner__photo .tape{ position:absolute; left:50%; top:-13px; transform:translateX(-50%) rotate(-3deg); width:78px; height:22px; background:rgba(205,165,248,.75); box-shadow:0 2px 6px rgba(51,51,51,.2); } .banner__badge{ position:absolute; right:-6px; bottom:-8px; z-index:3; width:clamp(92px,10vw,124px); height:clamp(92px,10vw,124px); border-radius:50%; background:var(--violet); color:#F0ECF3; display:grid; place-items:center; text-align:center; /* 4.63:1 sobre violeta, --lilac daba 4.39:1 */ transform:rotate(-10deg); font:800 clamp(.6875rem,1vw,.8125rem)/1.25 var(--f-display); text-transform:uppercase; } .banner__foot{ grid-column:1; display:flex; align-items:flex-end; flex-wrap:wrap; gap:clamp(24px,5vw,44px); padding-block:clamp(36px,6vh,60px); } .banner__text{ margin:0; max-width:38ch; flex:1 1 240px; } .stats{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(24px,4vw,34px); } .stats b{ display:block; font:800 clamp(1.7rem,3vw,2.4rem)/1 var(--f-display); color:var(--violet); } .stats span{ display:block; margin-top:.5em; font:500 .6875rem/1.4 var(--f-ui); letter-spacing:.12em; text-transform:uppercase; color:var(--apagado-texto); } .banner__ribbon{ position:relative; z-index:1; background:var(--charcoal); border-top:2px solid var(--charcoal); } .banner__ribbon .marquee__track{ padding-block:clamp(18px,3vh,26px); } .banner__ribbon .marquee__track > span{ font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--lilac); gap:clamp(20px,3vw,30px); padding-inline:clamp(10px,1.6vw,15px); } .banner__ribbon .marquee__track > span.hollow{ color:transparent; -webkit-text-stroke:1px rgba(235,230,239,.55); } .mq-spark{ color:var(--orchid); font-size:.6em; } /* ── hero: movimiento continuo (respeta prefers-reduced-motion) ──────── */ @media (prefers-reduced-motion:no-preference){ .banner__photo--a{ animation:float-a 9s ease-in-out infinite; } .banner__photo--b{ animation:float-b 7s ease-in-out infinite; animation-delay:-2s; } @keyframes float-a{ 0%,100%{ transform:rotate(4deg) translate(0,0); } 50%{ transform:rotate(3.4deg) translate(-3px,-5px); } } @keyframes float-b{ 0%,100%{ transform:rotate(-6deg) translate(0,0); } 50%{ transform:rotate(-6.7deg) translate(4px,-6px); } } .banner__photo .tape{ overflow:hidden; } .banner__photo .tape::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); transform:translateX(-120%); animation:tape-shine 7s ease-in-out infinite; } @keyframes tape-shine{ 0%,40%{ transform:translateX(-120%); } 70%,100%{ transform:translateX(120%); } } .banner__title .outline{ animation:stroke-breathe 9s ease-in-out infinite; } @keyframes stroke-breathe{ 0%,100%{ -webkit-text-stroke-width:1.6px; } 50%{ -webkit-text-stroke-width:1.3px; } } /* el texto no gira (ilegible boca abajo); gira un anillo suelto alrededor */ .banner__badge::before{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px dashed var(--violet); animation:badge-ring-spin 18s linear infinite; } @keyframes badge-ring-spin{ to{ transform:rotate(360deg); } } } /* ══ NOSOTROS ═════════════════════════════════════════════════════════ */ .agency__grid{ display:grid; grid-template-columns:minmax(240px,420px) minmax(0,1fr); gap:clamp(36px,6vw,90px); align-items:center; } .agency__media{ position:relative; padding-bottom:26px; } .agency__photo{ background:var(--white); padding:11px 11px 17px; box-shadow:0 20px 44px rgba(51,51,51,.2); } .agency__photo img{ width:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); } .agency__photo figcaption{ display:block; margin-top:9px; font:500 .625rem/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--pie-foto); } .agency__photo--a{ width:82%; --reposo:rotate(-3deg); transform:var(--reposo); position:relative; z-index:1; } .agency__photo--a img{ height:clamp(220px,26vw,330px); } .agency__photo--b{ width:70%; margin:-70px 0 0 auto; --reposo:rotate(4deg); transform:var(--reposo); position:relative; z-index:2; } .agency__photo--b img{ height:clamp(140px,17vw,176px); } .agency__photo--b .tape{ position:absolute; left:38px; top:-12px; transform:rotate(-4deg); width:70px; height:20px; background:rgba(205,165,248,.8); box-shadow:0 2px 6px rgba(51,51,51,.18); } .agency__media .bracket{ position:absolute; left:2px; bottom:0; width:64px; height:64px; border-left:2px solid var(--charcoal); border-bottom:2px solid var(--charcoal); } .agency__media .dots{ position:absolute; left:74px; bottom:6px; width:44px; height:32px; background-image:radial-gradient(var(--violet) 1.6px, transparent 1.7px); background-size:14px 14px; } .agency__content .eyebrow{ margin-bottom:1.1em; } .agency__content .title{ margin-bottom:.7em; } .agency__content p{ margin:0 0 2.2em; } .bars{ margin-bottom:2.6em; display:grid; gap:1.7em; } .bar{ display:grid; grid-template-columns:1fr auto; gap:.4em .8em; } .bar__label{ font:500 1.0625rem/1 var(--f-ui); color:var(--charcoal); } .bar__num{ font:600 .9375rem/1 var(--f-ui); color:var(--violeta-texto); } .bar__track{ grid-column:1/-1; height:6px; border-radius:4px; background:rgba(51,51,51,.14); overflow:hidden; } .bar__track i{ display:block; height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--violet),var(--lavender)); transition:width 1.4s var(--ease); } /* ══ PORTAFOLIO ═══════════════════════════════════════════════════════ */ .portfolio__head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-bottom:26px; margin-bottom:clamp(30px,5vw,58px); border-bottom:2px solid var(--charcoal); } .portfolio__head .eyebrow{ margin-bottom:1em; } .portfolio__head .title{ text-transform:uppercase; font-size:clamp(2rem,4vw,3.4rem); line-height:.95; } .portfolio__meta{ font:500 .6875rem/1.6 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--apagado-texto); text-align:right; } .works{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; } .work{ position:relative; display:flex; flex-direction:column; padding:10px; background:var(--white); box-shadow:0 10px 26px rgba(51,51,51,.13); } .work img{ width:100%; aspect-ratio:4/3.2; object-fit:cover; transition:transform .8s var(--ease); filter:grayscale(1) contrast(1.06); } .work:hover img{ transform:scale(1.06); } .work b{ display:block; margin-top:12px; font:700 .9375rem/1.25 var(--f-display); color:var(--charcoal); } .work i{ display:block; margin-top:3px; font:500 .625rem/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--violeta-texto); font-style:normal; } .work--tape .tape{ position:absolute; left:50%; top:-12px; transform:translateX(-50%) rotate(-3deg); width:74px; height:20px; background:rgba(205,165,248,.8); box-shadow:0 2px 6px rgba(51,51,51,.16); } .work--cta{ grid-column:span 2; position:relative; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; padding:26px 30px; background:var(--violet); color:var(--lilac); overflow:hidden; } .work--cta span{ position:relative; z-index:1; font:800 clamp(1.2rem,2vw,1.7rem)/1.1 var(--f-display); text-transform:uppercase; letter-spacing:-.02em; } .work__arrow{ position:relative; z-index:1; flex:none; width:56px; height:56px; border-radius:50%; border:2px solid var(--lilac); display:grid; place-content:center; font-size:24px; transition:.35s var(--ease); } .work--cta:hover .work__arrow{ background:var(--lilac); color:var(--violet); transform:rotate(45deg); } .work--cta .dots{ position:absolute; right:-20px; bottom:-20px; width:150px; height:100px; background-image:radial-gradient(rgba(235,230,239,.5) 1.6px, transparent 1.7px); background-size:14px 14px; } /* ══ SERVICIOS ════════════════════════════════════════════════════════ */ .offer{ overflow:hidden; } .offer__grid{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(36px,6vw,84px); align-items:start; } .offer__content{ position:sticky; top:130px; } .offer__content .eyebrow{ margin-bottom:1.1em; } .offer__content .title{ margin-bottom:.7em; } .offer__content p{ margin:0 0 2.4em; } .offer__badge{ margin-top:26px; width:132px; height:132px; border-radius:50%; background:var(--orchid); color:var(--charcoal); display:grid; place-items:center; text-align:center; --reposo:rotate(-8deg); transform:var(--reposo); font:800 .875rem/1.2 var(--f-display); text-transform:uppercase; } .offer__list{ list-style:none; margin:0; padding:0; border-top:2px solid var(--charcoal); } .offer__list li{ border-bottom:2px solid var(--charcoal); padding-block:clamp(22px,3vw,34px); } .num{ display:inline-flex; align-items:center; gap:.5em; margin-bottom:.85em; padding:.5em 1.05em; border:1.5px solid rgba(51,51,51,.3); border-radius:50px; font:600 .6875rem/1 var(--f-ui); letter-spacing:.16em; color:var(--body); } .num svg{ color:var(--violet); font-size:.72em; } .offer__list li a{ display:flex; align-items:center; justify-content:space-between; gap:1em; font:700 clamp(1.5rem,3vw,2.5rem)/1.15 var(--f-display); letter-spacing:-.03em; color:var(--charcoal); transition:color .35s var(--ease); } .offer__list li a .go{ font-size:.85em; color:var(--violet); opacity:0; transform:translate(-10px,10px); transition:.35s var(--ease); } .offer__list li a:hover, .offer__list li a:focus-visible{ color:var(--charcoal); } .offer__list li a:hover .go, .offer__list li a:focus-visible .go{ opacity:1; transform:none; } /* Jerarquía del artboard: el primero va activo (charcoal, flecha visible sin necesitar hover), los otros tres en reposo. El atenuado no puede depender de hover/tacto (mitad del tráfico no tiene ratón): rgba(51,51,51,.6) da 3.23:1 sobre el fondo pintado, por encima del 3:1 que exige texto grande. */ .offer__list li:first-child a .go{ opacity:1; transform:none; } .offer__list li:not(:first-child) a{ color:rgba(51,51,51,.6); } /* ══ FILOSOFÍA ════════════════════════════════════════════════════════ */ .philosophy{ overflow:hidden; padding-top:0; } .philo__ghost{ position:absolute; right:0; top:6%; z-index:0; margin:0; pointer-events:none; font:800 clamp(3.4rem,11vw,8.6rem)/.84 var(--f-display); text-transform:uppercase; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(51,51,51,.12); text-align:right; } .philo__grid{ position:relative; z-index:1; margin-top:clamp(40px,6vw,80px); display:grid; grid-template-columns:4fr 8fr; gap:clamp(30px,5vw,72px); align-items:center; } .philo__media{ margin:0; background:var(--white); padding:13px 13px 20px; --reposo:rotate(-3deg); transform:var(--reposo); box-shadow:0 22px 46px rgba(51,51,51,.22); } .philo__media img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.08); } .philo__media figcaption{ display:block; margin-top:10px; font:500 .625rem/1 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--pie-foto); } .philo__slider{ position:relative; padding-left:clamp(24px,4vw,56px); border-left:2px solid var(--charcoal); } .philo__slider > .eyebrow{ margin-bottom:1.1em; } .philo__slide{ display:none; } .philo__slide.is-active{ display:block; animation:fade .5s var(--ease); } @keyframes fade{ from{ opacity:0; transform:translateY(14px); } } .quote{ display:block; font:800 5rem/.6 var(--f-display); color:var(--violet); margin-bottom:.28em; } .philo__slide blockquote{ margin:0 0 1.6em; max-width:30ch; font:400 clamp(1.05rem,1.7vw,1.4rem)/1.6 var(--f-body); color:var(--charcoal); } .cite{ margin:0; } .cite b{ display:block; font:700 1.1rem/1.4 var(--f-display); color:var(--charcoal); } .cite i{ font:400 .875rem/1 var(--f-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--violeta-texto); font-style:normal; } .philo__nav{ position:absolute; right:0; bottom:0; display:flex; flex-direction:column; gap:12px; } .nav-btn{ width:56px; height:56px; border-radius:50%; border:2px solid var(--charcoal); color:var(--charcoal); display:grid; place-content:center; font-size:1.2rem; transition:.3s var(--ease); } .nav-btn:hover{ background:var(--violet); border-color:var(--violet); color:var(--lilac); } /* ══ CREADORES (franja) ════════════════════════════════════ */ .creators-band{ position:relative; z-index:1; background:var(--charcoal); padding-block:22px; } .creators-band .container{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px 28px; text-align:center; } .creators-band p{ margin:0; font:500 .9375rem/1.4 var(--f-ui); color:rgba(235,230,239,.78); } .creators-band .btn--outline{ padding:12px 26px; font-size:.75rem; border-color:var(--orchid); color:var(--orchid); } .creators-band .btn--outline:hover{ background:var(--orchid); color:var(--charcoal); } /* ══ BLOG ═════════════════════════════════════════════════════════════ */ .blog__head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:clamp(34px,5vw,64px); } .blog .eyebrow{ margin-bottom:1.1em; } .blog .title{ margin-bottom:0; } .blog__head .btn--outline{ border-color:var(--charcoal); color:var(--charcoal); padding:15px 28px; } .blog__head .btn--outline:hover{ background:var(--charcoal); color:var(--lilac); } .posts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); } .post{ position:relative; display:flex; flex-direction:column; padding:12px; background:var(--white); box-shadow:0 14px 32px rgba(51,51,51,.14); } .post__img{ display:block; overflow:hidden; } .post__img img{ width:100%; aspect-ratio:16/11; object-fit:cover; filter:grayscale(1) contrast(1.06); transition:transform .8s var(--ease); } .post:hover .post__img img{ transform:scale(1.06); } .post__body{ padding:18px 8px 6px; display:flex; flex-direction:column; gap:12px; } .post h3{ margin:0; font-size:clamp(1.15rem,1.9vw,1.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.28; } .post h3 a{ transition:color .3s; } .post h3 a:hover{ color:var(--violet); } .post__meta{ display:flex; align-items:center; gap:1.2em; margin:0; flex-wrap:wrap; } .post__meta time{ font:500 .6875rem/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--apagado-texto); } .post__cat{ font:500 .6875rem/1 var(--f-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--violeta-texto); } .post--tape .tape{ position:absolute; left:34px; top:-12px; transform:rotate(-3deg); width:78px; height:20px; background:rgba(205,165,248,.8); box-shadow:0 2px 6px rgba(51,51,51,.16); } /* ══ CLIENTES ═════════════════════════════════════════════════════════ */ .clients{ position:relative; padding-block:clamp(40px,6vw,58px); background:var(--charcoal); display:flex; flex-direction:column; gap:12px; } .clients__label{ display:block; padding-inline:var(--gut); font:600 .625rem/1 var(--f-ui); letter-spacing:.3em; text-transform:uppercase; color:rgba(235,230,239,.6); } .clients__track{ animation-duration:24s; } .clients__track > span{ font:600 clamp(1.2rem,2.3vw,1.8rem)/1 var(--f-display); letter-spacing:.02em; color:rgba(235,230,239,.55); padding-inline:clamp(24px,4vw,34px); transition:color .35s var(--ease); } .clients__track > span:hover{ color:var(--lilac); } /* ══ CTA ══════════════════════════════════════════════════════════════ */ .next-page{ position:relative; padding-block:clamp(40px,7vw,70px); background:var(--lilac); } .next-page__label{ display:block; text-align:center; margin-bottom:clamp(14px,2vw,22px); position:relative; z-index:1; font:600 .8125rem/1 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--apagado-texto); } .next-page .marquee__track > span{ font-size:clamp(2.4rem,7.5vw,5.6rem); color:var(--charcoal); } .next-page .marquee__track > span.hollow{ color:transparent; -webkit-text-stroke:2px var(--violet); } .next-page .mq-spark{ color:var(--violet); } /* ══ FOOTER ═══════════════════════════════════════════════════════════ */ .footer{ position:relative; padding-block:clamp(50px,7vw,84px) 34px; background:var(--charcoal); color:rgba(235,230,239,.72); } .footer__grid{ display:grid; grid-template-columns:1.5fr .8fr 1.2fr; gap:clamp(34px,5vw,72px); padding-bottom:clamp(40px,5vw,68px); } .footer h2{ font-size:1.2rem; font-weight:700; color:var(--lilac); margin-bottom:1.2em; } .footer__brand .brand{ display:inline-block; margin-bottom:1.9em; } .footer__brand .brand img{ width:148px; } .footer .btn--solid{ background:var(--lilac); color:var(--charcoal); } .footer .btn--solid:hover{ background:var(--orchid); color:var(--charcoal); } .contact{ list-style:none; margin:0 0 2.2em; padding:0; display:grid; gap:1.05em; } .contact li{ display:flex; align-items:flex-start; gap:.75em; } .contact svg{ font-size:1.2rem; color:var(--orchid); flex:none; margin-top:.15em; } .contact a{ transition:color .3s; } .contact a:hover{ color:var(--lilac); } .contact i{ font-style:normal; font-size:.875rem; color:rgba(235,230,239,.6); } .footer__nav{ display:flex; flex-direction:column; align-items:flex-start; } .footer__nav a{ padding:.42em 0; transition:color .3s, padding-left .3s var(--ease); } .footer__nav a:hover{ color:var(--lilac); padding-left:.4em; } .footer__news p{ margin:0 0 1.6em; } .news{ position:relative; display:flex; align-items:center; } .news input{ flex:1; min-width:0; padding:18px 66px 18px 22px; border-radius:50px; background:none; border:1.5px solid rgba(235,230,239,.5); color:var(--lilac); font:400 .9375rem/1 var(--f-body); } .news input::placeholder{ color:rgba(235,230,239,.6); } .news input:focus{ outline:none; border-color:var(--orchid); } .news button{ position:absolute; right:7px; width:46px; height:46px; border-radius:50%; background:var(--violet); color:var(--lilac); display:grid; place-content:center; font-size:1.15rem; transition:.3s var(--ease); } .news button:hover{ background:var(--orchid); color:var(--charcoal); } .news__msg{ position:absolute; left:22px; top:calc(100% + 8px); font:500 .8125rem/1.4 var(--f-ui); color:var(--orchid); } .footer__bar{ border-top:1px solid rgba(235,230,239,.18); padding-top:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .footer__bar p{ margin:0; font-size:.9375rem; color:rgba(235,230,239,.6); } .social{ list-style:none; display:flex; gap:10px; margin:0; padding:0; } .social a{ width:44px; height:44px; border-radius:50%; border:1.5px solid rgba(235,230,239,.28); display:grid; place-content:center; font-size:1.15rem; transition:.3s var(--ease); } .social a:hover{ background:var(--orchid); border-color:var(--orchid); color:var(--charcoal); } /* ── volver arriba ────────────────────────────────────────────────────── */ .to-top{ /* bottom:100px, no 26px: el widget de chat vive en el mismo rincón (right/bottom:24px, 62px de alto) y sin este desfase quedan superpuestos. */ position:fixed; right:26px; bottom:100px; z-index:70; width:52px; height:52px; display:grid; place-content:center; border-radius:50%; background:var(--white); color:var(--charcoal); font-size:1.1rem; box-shadow:0 10px 26px rgba(51,51,51,.22); opacity:0; visibility:hidden; transform:translateY(14px); transition:.35s var(--ease); } .to-top.is-on{ opacity:1; visibility:visible; transform:none; } /* El panel del widget (.wg__panel) crece con la conversación hasta 70vh: un desfase fijo solo cubre un largo de chat concreto. Más simple y robusto ocultar "volver arriba" mientras el chat está abierto que perseguir su altura; la burbuja para cerrarlo queda igual de alcanzable. */ .to-top:has(~ .wg.is-abierto){ opacity:0; visibility:hidden; pointer-events:none; } .to-top__ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); } .to-top__ring circle{ fill:none; stroke:var(--violet); stroke-width:2; stroke-dasharray:126; stroke-dashoffset:calc(126 - 126 * var(--p, 0)); } .to-top__icon{ position:relative; } /* ══ ANIMACIONES DE ENTRADA ═══════════════════════════════════════════ */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in{ opacity:1; transform:var(--reposo, none); } .title-anim .wd{ display:inline-block; } .title-anim .ch{ display:inline-block; opacity:0; transform:translateX(48px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i) * 18ms); } .title-anim.is-in .ch{ opacity:1; transform:none; } /* ══ RESPONSIVE ═══════════════════════════════════════════════════════ */ @media (max-width:1100px){ .works{ grid-template-columns:repeat(2,minmax(0,1fr)); } .work--cta{ grid-column:span 2; } .offer__grid{ grid-template-columns:1fr; } .offer__content{ position:static; } .philo__grid{ grid-template-columns:1fr; } .philo__media img{ aspect-ratio:16/10; } .philo__nav{ position:static; flex-direction:row; margin-top:1.8em; } .footer__grid{ grid-template-columns:1fr 1fr; } .footer__news{ grid-column:1/-1; } } @media (max-width:820px){ .cursor{ display:none; } .agency__grid{ grid-template-columns:1fr; } .banner__inner{ grid-template-columns:1fr; } /* el botón (primer hijo de .banner__foot) tiene que verse sin scroll: en mobile las fotos, solo decorativas (aria-hidden), pasan a ir después. */ .banner__media{ grid-column:1; grid-row:auto; max-width:320px; margin:0 auto clamp(32px,6vh,56px); order:2; } .banner__foot{ grid-column:1; order:1; } .portfolio__head{ flex-direction:column; align-items:flex-start; } .portfolio__meta{ text-align:left; } .posts{ grid-template-columns:1fr; } .offcanvas__body{ grid-template-columns:1fr; align-content:center; } .ghost{ display:none; } .philo__ghost{ display:none; } } @media (max-width:560px){ .works{ grid-template-columns:1fr; } .work--cta{ grid-column:1; } .footer__grid{ grid-template-columns:1fr; } .brand img{ width:108px; } .burger{ width:56px; height:56px; } .stats{ flex-direction:column; gap:22px; } /* 100% + rotate(-3deg) sacaba la caja del viewport (la rotación crece la caja delimitadora): 96% deja margen a 380/360/320px sin perder tamaño real. */ .agency__photo--a{ width:96%; } .agency__photo--b{ width:82%; } } /* ══ MOVIMIENTO REDUCIDO ══════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } .reveal{ opacity:1 !important; transform:var(--reposo, none) !important; } .title-anim .ch{ opacity:1 !important; transform:none !important; } .marquee__track{ animation:none; transform:none; } }