/* ========================================================================== Moahu · landing V1 Modos: .static (todo visible, sin escenas largas) · .motion (escenas fijadas al scroll) El layout por defecto es el estático; .motion lo convierte en escenas. ========================================================================== */ @font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-400.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); } :root { /* Historia: dos navy cercanos al de marca (#23336a) */ --navy: #23336a; --navy-a: #1a2858; /* historia A */ --navy-b: #101a3d; /* historia B / escenario */ --ink: #f4f6fb; /* texto sobre navy */ --ink-2: #b3bddc; /* secundario sobre navy (7:1 sobre A) */ --ink-3: #8f9bc4; /* terciario, solo textos chicos de apoyo (5:1 sobre B) */ --line-dark: rgba(244, 246, 251, .12); --ink-soft: #ccd4ef; /* eslogan del hero */ --scroll-thumb: #4a5a92; --media-bg: #0f1736; /* fondo de las fotos mientras cargan */ /* Compra: claro frío */ --mist: #eef1f7; --paper: #f7f8fb; --text: #141f47; /* navy sobre claro */ --text-2: #4a5683; /* secundario sobre claro (6:1 sobre mist) */ --line-light: rgba(20, 31, 71, .14); --focus-dark: #a9bcff; --focus-light: #23336a; --gutter: clamp(20px, 5vw, 88px); --sheet-r: clamp(22px, 2.8vw, 40px); /* radio de las "hojas" en los cambios de fondo */ --wrap: 1200px; --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.4, 0, .6, 1); --nav-h: 56px; /* diferencia entre el alto grande y el chico del viewport en mobile (barra del navegador) */ --bar-gap: calc(100lvh - 100svh); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--navy-a); color: var(--ink); font: 400 17px/1.55 "Poppins", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } /* el zoom del iris (canvas de gránulos) y las entradas de productos exceden el ancho con transform: se recorta acá (clip no crea contenedor de scroll, los sticky siguen fijándose al viewport) */ main { overflow-x: clip; } img, svg, canvas, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; } button { font: inherit; color: inherit; } ::selection { background: var(--ink); color: var(--navy-a); } [data-theme="light"] ::selection { background: var(--navy-a); color: var(--ink); } :focus-visible { outline: 2px solid var(--focus-dark); outline-offset: 3px; border-radius: 6px; } [data-theme="light"] :focus-visible { outline-color: var(--focus-light); } html { scrollbar-color: var(--scroll-thumb) var(--navy-b); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .skip { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--navy-a); font-weight: 500; text-decoration: none; transform: translateY(-160%); transition: transform .3s var(--ease-out); } .skip:focus-visible { transform: none; } .wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; } /* ---------- Cambios de fondo ---------- Donde el fondo cambia de verdad (claro ↔ navy, navy → macro negra), la sección nueva entra como una hoja con las esquinas de arriba redondeadas. Sin overflow/clip (recortar con radio obliga al compositor a enmascarar todas las capas de adentro: la comunidad perdía la mitad de los cuadros): las esquinas son dos pseudo-elementos pintados del color de la sección anterior (--prev-bg). */ .products, .community, .refs, .duel, .matter, .reviews, .footer { position: relative; } .products::before, .products::after, .community::before, .community::after, .refs::before, .refs::after, .duel::before, .duel::after, .matter::before, .matter::after, .reviews::before, .reviews::after, .footer::before, .footer::after { content: ""; position: absolute; top: 0; z-index: 6; width: var(--sheet-r); height: var(--sheet-r); pointer-events: none; } .products::before, .community::before, .refs::before, .duel::before, .matter::before, .reviews::before, .footer::before { left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--sheet-r) - .5px), var(--prev-bg) var(--sheet-r)); } .products::after, .community::after, .refs::after, .duel::after, .matter::after, .reviews::after, .footer::after { right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--sheet-r) - .5px), var(--prev-bg) var(--sheet-r)); } .products { --prev-bg: var(--navy-a); } .community { --prev-bg: var(--mist); } .footer { --prev-bg: var(--paper); } /* después de las reseñas (el cierre "¿Te subís a la ola?" se sacó el 06/10) */ .matter, .reviews { --prev-bg: var(--navy-a); } .refs { --prev-bg: var(--navy-a); } .duel { --prev-bg: rgb(245, 244, 245); } /* solo para lectores de pantalla */ .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; } /* ---------- Tipografía ---------- */ .t-display { font-weight: 600; font-size: clamp(42px, 6.6vw, 96px); line-height: 1.0; letter-spacing: -0.038em; text-wrap: balance; } .t-h1 { font-weight: 600; font-size: clamp(38px, 5.2vw, 76px); line-height: 1.03; letter-spacing: -0.034em; text-wrap: balance; } .t-h2 { font-weight: 600; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance; } .t-h3 { font-weight: 500; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.25; letter-spacing: -0.018em; text-wrap: balance; } .t-lead { font-size: clamp(18px, 1.42vw, 21px); line-height: 1.5; letter-spacing: -0.005em; color: var(--ink-2); text-wrap: pretty; } [data-theme="light"] .t-lead { color: var(--text-2); } /* Revelado por palabra (main.js envuelve cada palabra en .wd > .wi) */ .wd { display: inline-block; overflow: hidden; vertical-align: top; padding: .09em 0 .12em; margin: -.09em 0 -.12em; text-indent: 0; } /* text-indent: 0 → no hereda la sangría colgada de las citas (recortaba letras) */ .wi { display: inline-block; } /* sin will-change fijo: GSAP promueve la capa solo mientras anima (eran 49 capas permanentes) */ /* ---------- Botones ---------- */ .btn { --bg: var(--ink); --fg: var(--navy-a); --bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 1.55em; border-radius: 999px; border: 1.5px solid var(--bd); background: var(--bg); color: var(--fg); font: 500 16px/1 "Poppins", sans-serif; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out); } .btn svg { width: 18px; height: 18px; flex: none; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.975); transition-duration: .1s; } .btn--sm { min-height: 44px; padding: 0 1.25em; font-size: 15px; } .btn--lg { min-height: 56px; padding: 0 1.9em; font-size: 17px; } .btn--pill { --bg: var(--ink); --fg: var(--navy-a); } .btn--pill:hover { --bg: #fff; } .btn--ghost { --bg: transparent; --fg: var(--ink); --bd: rgba(244, 246, 251, .42); } .btn--ghost:hover { --bg: var(--ink); --fg: var(--navy-a); --bd: var(--ink); } .btn--light { --bg: var(--ink); --fg: var(--navy-a); } .btn--light:hover { --bg: #fff; } .btn--navy { --bg: var(--navy-a); --fg: var(--ink); } .btn--navy:hover { --bg: var(--navy); } .btn--outline { --bg: transparent; --fg: var(--text); --bd: rgba(20, 31, 71, .3); } .btn--outline:hover { --bd: var(--text); } /* ========================================================================== NAV: pill flotante. Cambia a claro sobre las secciones de compra. ========================================================================== */ .nav { position: fixed; inset: 12px 0 auto; z-index: 50; pointer-events: none; padding-inline: 12px; } .nav__bar { pointer-events: auto; width: min(1040px, 100%); height: var(--nav-h); margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 0 6px 0 14px; border-radius: 999px; background: rgba(16, 26, 61, .72); color: var(--ink); border: 1px solid rgba(244, 246, 251, .09); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); transition: background-color .45s var(--ease-soft), color .45s var(--ease-soft), border-color .45s var(--ease-soft); } .nav--light .nav__bar { background: rgba(247, 248, 251, .8); color: var(--text); border-color: rgba(20, 31, 71, .08); } .nav__brand { display: flex; align-items: center; height: 44px; padding: 0 6px; color: inherit; } .nav__brand svg { width: 76px; height: 42px; } .nav__links { display: flex; gap: clamp(18px, 2.6vw, 34px); margin: 0 auto; } .nav__links a { font-size: 14px; font-weight: 500; text-decoration: none; opacity: .74; padding: 12px 0; transition: opacity .2s; } .nav__links a:hover { opacity: 1; } .nav__actions { position: relative; display: flex; align-items: center; gap: 4px; } .nav__cart { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: inherit; opacity: .8; transition: opacity .2s, background-color .2s; } .nav__cart:hover { opacity: 1; background: rgba(127, 140, 190, .16); } .nav__cart svg { width: 21px; height: 21px; } .nav__cart { position: relative; } .nav__cart-count, .cart-toast__count { position: absolute; top: 5px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: var(--navy-a); box-shadow: 0 0 0 2px var(--navy-a); font: 600 11px/1 "Poppins", sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; } .nav__cart-count[hidden], .cart-toast__count[hidden] { display: none; } .nav--light .nav__cart-count { background: var(--navy-a); color: var(--ink); box-shadow: 0 0 0 2px var(--paper); } .nav__cta { min-height: 44px; padding: 0 1.3em; font-size: 15px; } .nav--light .nav__cta { --bg: var(--navy-a); --fg: var(--ink); } .nav--light .nav__cta:hover { --bg: var(--navy); } @media (max-width: 900px) { .nav__links { display: none; } .nav__actions { margin-left: auto; } } .intro .nav { opacity: 0; transform: translateY(-14px); } /* ========================================================================== 01 · HERO ========================================================================== */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 28px) var(--gutter) 48px; background: var(--navy-a); text-align: center; } .hero__inner { display: flex; flex-direction: column; align-items: center; } .hero__logo { width: min(56vw, 780px, 62svh * 1.8); margin: 0; line-height: 0; color: var(--ink); } .logo { width: 100%; height: auto; overflow: visible; } .logo .ink, .logo .ink-wet { fill: currentColor; fill-rule: evenodd; } .logo .pen { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; } .hero__slogan { margin-top: clamp(26px, 4.4vh, 52px); font-weight: 500; font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -0.012em; color: var(--ink-soft); } .hero__slogan .w { display: inline-block; } .hero__cta { margin-top: clamp(26px, 4.6vh, 50px); } .hero__cta svg { transition: transform .35s var(--ease-out); } .hero__cta:hover svg { transform: translateY(3px); } /* Estado inicial de la intro (lo anima main.js). Sin JS o con movimiento reducido todo queda visible. */ .intro .logo .ink { opacity: 0; } .intro .logo .pen { visibility: hidden; } .intro .hero__slogan .w, .intro .hero__cta { opacity: 0; } @media (max-width: 760px) { .hero__logo { width: min(84vw, 62svh * 1.8); } } /* ========================================================================== Escenas fijadas al scroll (solo en .motion) ========================================================================== */ .stage { position: relative; overflow: hidden; } .motion .stage { position: sticky; top: 0; height: 100vh; height: 100lvh; } .stage-slot { position: absolute; inset: 0; } .stage-slot canvas { width: 100%; height: 100%; display: block; } /* ========================================================================== 02 · PRODUCTOS (zona clara) ========================================================================== */ .products { background: var(--mist); color: var(--text); padding: clamp(104px, 15vh, 168px) 0 clamp(88px, 12vh, 140px); } .products__head { text-align: center; max-width: 760px; margin-inline: auto; } .products__head .t-lead { margin-top: 20px; } /* Mini y Rolo en 3D (stage3d.js → poseProducts): un escenario alto, los dos parados uno al lado del otro. Debajo, nombre, medida, peso y precio de cada uno, alineados con su rolo (main.js proyecta la posición). */ .showcase { margin-top: clamp(20px, 4vh, 48px); } .showcase__stage { position: relative; height: clamp(400px, 58vh, 620px); } /* sin WebGL o con movimiento reducido: las fotos (el 3D no carga en ese caso) */ .showcase__fallback { display: none; } .no-gl .showcase__fallback, html:not(.motion) .showcase__fallback { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.25fr; align-items: end; gap: 4%; padding: 0 8%; } .showcase__fallback img { width: 100%; } .showcase__info { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 640px; margin: clamp(8px, 2vh, 20px) auto 0; } .spec { text-align: center; } .spec__name { font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.022em; line-height: 1.15; } .spec__size { margin-top: 6px; font-size: 15.5px; color: var(--text-2); } .spec__size strong { color: var(--text); font-weight: 600; } .spec__buy { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; } .spec__price { font-weight: 500; font-size: 17px; font-variant-numeric: tabular-nums; } /* con movimiento: cada rótulo se centra bajo su rolo (posición calculada) y aparece cuando el rolo llega. Sin WebGL vuelve a la grilla estática, visible. */ .motion .showcase__info { position: relative; display: block; max-width: none; height: 132px; margin-top: 0; } .motion .spec { position: absolute; left: 0; top: 0; width: 240px; margin-left: -120px; opacity: 0; } .motion.no-gl .showcase__info { display: grid; max-width: 640px; height: auto; margin-top: clamp(8px, 2vh, 20px); } .motion.no-gl .spec { position: static; width: auto; margin: 0; opacity: 1; transform: none !important; } @media (max-width: 760px) { .showcase__stage { height: 440px; } .showcase__info { gap: 12px; } .motion .spec { width: 170px; margin-left: -85px; } .spec__name { font-size: 18px; } .spec__size { font-size: 14px; } .spec__buy { flex-direction: column; gap: 8px; } } /* CTA sutil sobre la escena: aparece junto al rolo que está mostrando ejemplos (main.js lo ubica) */ .showcase__cta { position: absolute; left: 0; top: 0; z-index: 3; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--text); color: var(--ink); font: 500 14px/1 "Poppins", system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .35s var(--ease-out); box-shadow: 0 6px 18px rgba(20, 31, 71, .18); } .showcase__cta.is-on { opacity: 1; } .showcase__cta[hidden] { display: none; } .showcase__stage canvas { cursor: default; } .showcase__stage.is-hot canvas { cursor: pointer; } /* Combo: la tercera opción, debajo de Mini y Rolo y más ancha (contiene a los dos). Foto real de los dos juntos. */ .combo-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 40px); max-width: 880px; margin: clamp(32px, 5vh, 56px) auto 0; padding: 12px clamp(20px, 3vw, 36px) 12px 12px; border-radius: 28px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 31, 71, .05); transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); } @media (hover: hover) { .combo-card:hover { box-shadow: 0 14px 34px -16px rgba(20, 31, 71, .28); transform: translate3d(0, -2px, 0); } .combo-card:hover .combo-card__img img { transform: scale(1.025); } } .combo-card:focus-visible { outline: 2px solid var(--focus-light); outline-offset: 4px; } .combo-card__img { display: block; overflow: hidden; border-radius: 20px; background: #f5f5f3; } .combo-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease-out); } .combo-card__txt { display: flex; flex-direction: column; align-items: flex-start; } .combo-card__eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } .combo-card__name { margin-top: 6px; font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.025em; line-height: 1.1; } .combo-card__desc { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--text-2); } .combo-card__buy { display: flex; align-items: center; gap: 14px; margin-top: 18px; } /* entrada: aparece cuando ya llegaron Mini y Rolo (una vez; main.js → products) */ .motion .combo-card { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out), box-shadow .3s var(--ease-out); } .motion .combo-card.is-in { opacity: 1; transform: none; } @media (max-width: 760px) { /* mobile: [Mini] [Rolo] arriba (la escena 3D) y el Combo ancho abajo: se lee que contiene a los dos */ .combo-card { grid-template-columns: 1fr; gap: 14px; padding: 10px 10px 18px; border-radius: 24px; } .combo-card__img img { aspect-ratio: 16 / 10; } .combo-card__txt { padding: 0 8px; } .combo-card__buy { width: 100%; justify-content: space-between; } } /* Próximo despacho (dispatch.js): una píldora sobria, la misma en Productos y en la ficha. El contador usa cifras tabulares (no baila); el punto verde (quieto) es el mismo verde de los precios con transferencia. */ .ship { --ship-bg: #fff; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 0; padding: 8px 18px 8px 12px; border: 1px solid var(--line-light); border-radius: 999px; background: var(--ship-bg); color: var(--text); font-size: 14px; line-height: 1.35; font-variant-numeric: tabular-nums; text-align: left; } .ship[hidden] { display: none; } .ship__ic { flex: none; width: 20px; height: 20px; color: var(--navy); } .ship__t b { font-weight: 600; color: var(--navy); } .ship__sep { width: 1px; height: 14px; background: var(--line-light); } .ship__c { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); } .ship__c::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1d7a4c; } /* quieto: lo que se mueve es el contador */ .ship__left { font-weight: 600; color: var(--navy); white-space: nowrap; } .products__ship { margin-top: 26px; } @media (max-width: 760px) { .ship { gap: 2px 8px; padding: 8px 14px 8px 10px; font-size: 13px; border-radius: 18px; } .ship__sep { display: none; } } .products__perks { margin-top: clamp(48px, 7vh, 80px); text-align: center; font-size: 14.5px; color: var(--text-2); } /* ========================================================================== 03 · COMUNIDAD ========================================================================== */ .community { background: var(--navy-a); } .motion .community { height: 220vh; } .community__stage { min-height: 100svh; display: grid; place-items: center; padding: 120px var(--gutter); } .motion .community__stage { padding: 0 var(--gutter); } /* Escena de escudos: capas de profundidad (dust → far → mid → front). main.js las arma. Cada capa es una capa de GPU: el scroll solo cambia su transform/opacity (nunca repinta). Nada de filtros en vivo: la desaturación del fondo viene horneada en escudo-NN-s.webp. */ .community__field { position: absolute; inset: 0; pointer-events: none; contain: strict; } .clayer { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform, opacity; } .crest { /* caja con la proporción real del recorte (main.js reparte el tamaño por área) */ position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); transform: translate(var(--x), var(--y)) rotate(var(--r)); } .crest__in { width: 100%; height: 100%; transform-origin: 50% 100%; } .crest img { display: block; width: 100%; height: 100%; object-fit: contain; } .clayer--mid .crest__in { opacity: .92; } /* sombra propia solo en los 9 escudos de adelante: se rasteriza una vez (la capa no repinta) */ .clayer--front .crest img { filter: drop-shadow(0 16px 22px rgba(5, 10, 32, .45)); } /* La ola de estadio: una pasada finita de transform + opacity por escudo (corre en el compositor). main.js agrega .wave-go cada WAVE.period y la saca cuando todos terminaron: entre olas no queda ninguna animación viva (cero trabajo por frame). El retraso de cada escudo (su x) lo pone main.js. Valores fijos por capa (sin var() en los keyframes) = profundidad y animaciones componibles. */ .community.wave-go .crest__in { animation: ola-mid .95s linear 1 both; } .community.wave-go .clayer--front .crest__in { animation-name: ola-front; } /* capas lejanas: la ola mueve la franja entera (lift + brillo), no cada escudo */ .cband { position: absolute; top: 0; bottom: 0; } .clayer--far .cband { opacity: .5; } .clayer--dust .cband { opacity: .26; } .clayer--far .crest__in, .clayer--dust .crest__in { opacity: 1; } .community.wave-go .clayer--far .crest__in, .community.wave-go .clayer--dust .crest__in { animation: none; } .community.wave-go .clayer--far .cband { animation: ola-band-far .95s linear 1 both; } .community.wave-go .clayer--dust .cband { animation: ola-band-dust .95s linear 1 both; } @keyframes ola-band-far { 0%, 100% { transform: none; opacity: .5; } 45% { transform: translate3d(0, -16px, 0); opacity: .95; animation-timing-function: cubic-bezier(.4, 0, .6, 1); } } @keyframes ola-band-dust { 0%, 100% { transform: none; opacity: .26; } 45% { transform: translate3d(0, -10px, 0); opacity: .85; animation-timing-function: cubic-bezier(.4, 0, .6, 1); } } @keyframes ola-front { 0%, 100% { transform: none; } 45% { transform: translate3d(0, -30px, 0) rotate(-6deg) scale(1.1); animation-timing-function: cubic-bezier(.4, 0, .6, 1); } } @keyframes ola-mid { 0%, 100% { transform: none; opacity: .92; } 45% { transform: translate3d(0, -26px, 0) rotate(-7deg) scale(1.2); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .6, 1); } } @keyframes ola-far { 0%, 100% { transform: none; opacity: .5; } 45% { transform: translate3d(0, -18px, 0) rotate(-7deg) scale(1.22); opacity: .95; animation-timing-function: cubic-bezier(.4, 0, .6, 1); } } @keyframes ola-dust { 0%, 100% { transform: none; opacity: .26; } 45% { transform: translate3d(0, -11px, 0) rotate(-7deg) scale(1.22); opacity: .85; animation-timing-function: cubic-bezier(.4, 0, .6, 1); } } @media (max-width: 760px) { /* mobile: misma ola, menos amplitud */ @keyframes ola-front { 0%, 100% { transform: none; } 45% { transform: translate3d(0, -18px, 0) rotate(-5deg) scale(1.08); } } @keyframes ola-mid { 0%, 100% { transform: none; opacity: .92; } 45% { transform: translate3d(0, -15px, 0) rotate(-6deg) scale(1.15); opacity: 1; } } } /* la frase gana siempre: un halo navy detrás del texto, sin recortar los escudos */ .community__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 40% 30% at 50% 50%, rgba(26, 40, 88, .92) 0%, rgba(26, 40, 88, .7) 45%, rgba(26, 40, 88, 0) 100%), linear-gradient(180deg, var(--navy-a) 0%, rgba(26, 40, 88, 0) 14%, rgba(26, 40, 88, 0) 86%, var(--navy-a) 100%); } .community__copy { position: relative; z-index: 2; text-align: center; width: min(1000px, 100%); } .community__title { max-width: 13.5em; margin-inline: auto; text-shadow: 0 2px 30px rgba(10, 18, 48, .6); } /* las 8 palabras cambian de opacidad en cada cuadro del conteo: en su propia capa, el texto con la sombra de 30 px se rasteriza una vez y la opacidad la resuelve el compositor (sin capa se repintaba por cuadro: p95 32 → 18 ms a CPU ×4) */ .motion .community__title .wi { will-change: opacity; } .community__count { font-variant-numeric: tabular-nums; display: inline-block; text-align: center; } .community__sub { margin: 28px auto 0; max-width: 34em; color: var(--ink-soft); } @media (max-width: 760px) { .community__scrim { background: linear-gradient(180deg, rgba(26, 40, 88, 0) 26%, rgba(26, 40, 88, .9) 38%, rgba(26, 40, 88, .9) 62%, rgba(26, 40, 88, 0) 74%), linear-gradient(180deg, var(--navy-a) 0%, rgba(26, 40, 88, 0) 10%, rgba(26, 40, 88, 0) 90%, var(--navy-a) 100%); } .community__sub { margin-top: 20px; } } /* ========================================================================== 03b · REFERENTES — después de la escala, la prueba humana: Marcos Moneta y Santiago Vera Feld El fondo es el blanco de estudio de la foto (rgb 245 244 245, medido en los bordes): la imagen se funde sin marco. La foto toca el borde de abajo (ahí está la sombra del piso) y la sección siguiente entra como hoja. Arriba, solo los nombres de los dos jugadores (sin logos ni marcas de terceros). ========================================================================== */ .refs { --refs-bg: rgb(245, 244, 245); background: var(--refs-bg); color: var(--text); padding-top: clamp(96px, 12vh, 132px); overflow-x: clip; } /* los nombres arrancan debajo de la pill de navegación */ /* Los nombres de los dos jugadores: el único texto de la sección (ocupa el lugar que tenía el lockup de logos). */ .refs__names { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .5em; width: min(var(--wrap), 100% - var(--gutter) * 2); margin: 0 auto clamp(8px, 2vh, 20px); font-size: clamp(30px, 3.4vw, 50px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; color: var(--navy); text-align: center; position: relative; z-index: 1; /* por encima del aire blanco de la foto, que sube debajo */ } .refs__names span { white-space: nowrap; } .refs__and { color: var(--text-2); font-weight: 400; } .refs__figure { margin: 0; } /* espacio reservado por la proporción (cero layout shift); en desktop, hasta 1200 px. La foto trae ~18% de aire blanco arriba: se sube un poco bajo el texto (mismo fondo) para no dejar un hueco. El blanco de estudio tiene textura propia y el fondo de la sección es plano: los bordes de arriba y de los costados se funden con una máscara (solo en pantalla; el archivo no se toca y el contenido no se recorta: el fundido cae en el aire blanco, lejos de jugadores y rolos). */ .refs__img { display: block; width: min(100%, 1200px); height: auto; aspect-ratio: 2752 / 1536; margin-inline: auto; margin-top: calc(min(100vw, 1200px) * -.03); --fade-x: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); --fade-y: linear-gradient(to bottom, transparent, #000 12%); -webkit-mask-image: var(--fade-x), var(--fade-y); -webkit-mask-composite: source-in; mask-image: var(--fade-x), var(--fade-y); mask-composite: intersect; } @media (max-width: 760px) { .refs { padding-top: 100px; } .refs__names { flex-direction: column; align-items: center; gap: 2px; font-size: clamp(28px, 8.4vw, 36px); } .refs__names span.refs__and { display: none; } .refs__img { width: 100%; aspect-ratio: 1843 / 1536; margin-top: 4px; } /* recorte 6:5 con aire a los costados (los dos jugadores y todos los rolos enteros) */ } /* ========================================================================== 03c · ESCALA: 850 Mini Rolos para la Comisión de Atletas ARG. Una idea por momento: la cifra → la grilla (video grande) → el detalle (producto + nombre) → una línea que pasa a las reseñas. Mismo fondo de estudio que Referentes y el carrusel (sin hoja). La UI es neutra: el color lo ponen los videos. Movimiento (main.js → scale): scrub corto, sin pin; con reduced motion todo queda quieto y los videos no arrancan solos. ========================================================================== */ .scale { background: rgb(245, 244, 245); color: var(--text); box-shadow: 0 -1px 0 rgb(245, 244, 245), 0 1px 0 rgb(245, 244, 245); /* tapa la costura subpíxel con Referentes y el carrusel (asomaba el navy del body) */ padding: clamp(80px, 12vh, 140px) 0 clamp(56px, 8vh, 96px); overflow-x: clip; } .scale__head { width: min(var(--wrap), 100% - var(--gutter) * 2); margin: 0 auto clamp(36px, 6vh, 64px); text-align: center; } .scale__title { display: flex; flex-direction: column; align-items: center; color: var(--navy); font-weight: 600; } .scale__num { display: block; font-size: clamp(88px, 14.5vw, 210px); line-height: .84; letter-spacing: -0.065em; font-variant-numeric: tabular-nums; padding-right: .065em; /* el tracking negativo corre la cifra: se recentra */ transform-origin: 50% 85%; } .scale__what { display: block; margin-top: clamp(12px, 1.5vw, 22px); font-size: clamp(26px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.032em; } .scale__for { margin: 14px auto 0; max-width: 42em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; color: var(--text-2); text-wrap: balance; } .scale__hero { width: min(100% - var(--gutter) * 2, 1520px); margin: 0 auto; } .scale__frame { position: relative; aspect-ratio: 16 / 9; clip-path: inset(0 round 20px); background: #1d2030; } .scale__clip { position: relative; margin: 0; clip-path: inset(0 round 16px); background: #1d2030; } .scale__video { display: block; width: 100%; height: 100%; object-fit: cover; } .scale__clip--product { grid-area: p; aspect-ratio: 16 / 9; } .scale__clip--name { grid-area: n; aspect-ratio: 1; } .scale__detail { display: grid; grid-template-columns: 7fr 5fr; grid-template-areas: "p n" "l n"; align-content: start; align-items: start; column-gap: clamp(16px, 2vw, 28px); width: min(var(--wrap), 100% - var(--gutter) * 2); margin: clamp(56px, 9vh, 104px) auto 0; } .scale__line { grid-area: l; max-width: 13em; margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; } /* lockup de la colaboración: Moahu · COA · Santa Fe 2026, todo en navy y a la misma altura óptica (el escudo vertical del COA va más alto que los dos logos horizontales para pesar parecido) */ .scale__partners { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.8vw, 40px); margin-bottom: clamp(36px, 5.5vh, 56px); color: var(--navy); } .scale__moahu { width: auto; height: clamp(40px, 3.7vw, 54px); aspect-ratio: 1905 / 1060; } .scale__coa { width: auto; height: clamp(80px, 7.4vw, 108px); } .scale__games { width: auto; height: clamp(56px, 5.3vw, 78px); } .scale__sep { width: 1px; height: clamp(44px, 4.2vw, 62px); background: var(--line-light); } /* disciplinas: 2 filas x 10 columnas a la vista (5 en mobile). Scroll horizontal nativo, sin barra: se desliza con el dedo, el trackpad o arrastrando, y avanza solo, lento, cuando nadie lo toca (main.js → scaleDisciplines). */ .scale__disc { width: min(var(--wrap), 100% - var(--gutter) * 2); margin: clamp(80px, 12vh, 136px) auto 0; --col: calc(min(var(--wrap), 100vw - var(--gutter) * 2) / 10); --tile: calc(var(--col) - clamp(12px, 1.6vw, 22px)); } .scale__disc-title { margin-bottom: clamp(22px, 3.2vh, 32px); font-size: clamp(22px, 2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--navy); text-align: center; text-wrap: balance; } .scale__marquee { overflow: hidden; padding-block: 4px; pointer-events: none; user-select: none; /* marquee: no se frena con hover ni con el mouse */ -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .scale__track { display: flex; width: max-content; animation: disc-loop var(--disc-dur, 72s) linear infinite paused; will-change: transform; } .scale__marquee.is-run .scale__track { animation-play-state: running; } /* derecha → izquierda: la pista (dos copias del set) se corre exactamente una copia y vuelve a la misma imagen */ @keyframes disc-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .scale__track { animation: none; } } .scale__col { display: grid; gap: calc(var(--col) - var(--tile)); width: var(--col); justify-items: center; } .scale__icon { position: relative; width: var(--tile); height: var(--tile); border-radius: 24%; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 31, 71, .06); } .scale__icon::before { /* una celda del sprite (40 en fila): --i = índice */ content: ""; position: absolute; inset: 16%; background: var(--disc-src) no-repeat; background-size: calc(var(--n) * 100%) 100%; background-position: calc(var(--i) / (var(--n) - 1) * 100%) 0; } @media (max-width: 760px) { .scale { padding-top: 72px; } .scale__head { margin-bottom: 28px; } .scale__num { font-size: clamp(76px, 25vw, 100px); } .scale__what { margin-top: 10px; font-size: clamp(24px, 6.6vw, 28px); } .scale__for { font-size: 15px; max-width: 22em; } .scale__hero, .scale__detail { width: calc(100% - 32px); } .scale__frame { aspect-ratio: 1; clip-path: inset(0 round 18px); } .scale__detail { grid-template-columns: 1fr 58%; grid-template-areas: "p p" "l n"; align-items: end; gap: 12px 14px; margin-top: 36px; } .scale__line { margin: 0 0 4px; font-size: 20px; } .scale__clip { clip-path: inset(0 round 14px); } .scale__partners { gap: 14px; margin-bottom: 30px; } .scale__moahu { height: 34px; } .scale__coa { height: 72px; } .scale__games { height: 50px; } .scale__sep { height: 36px; } .scale__disc { width: 100%; margin-top: 64px; --col: calc((100vw - 32px) / 5); --tile: calc(var(--col) - 12px); } .scale__disc-title { font-size: 20px; padding-inline: 16px; } .scale__marquee { -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); } } /* ========================================================================== 03c · RESEÑAS DESTACADAS (carrusel): debajo de Moneta + Vera Feld, mismo fondo de estudio (continúa la foto). Scroll nativo + loop infinito que avanza solo de derecha a izquierda (main.js → topReviews): el dedo, el mouse, la rueda y las flechas lo frenan mientras dura el gesto y retoma solo. Sin JS queda el scroll-snap de siempre. ========================================================================== */ .tops { --tops-bg: rgb(245, 244, 245); --card-w: clamp(280px, 22vw, 320px); --edge: calc((100% - min(var(--wrap), 100% - var(--gutter) * 2)) / 2); background: var(--tops-bg); color: var(--text); padding: clamp(24px, 3.5vh, 40px) 0 clamp(48px, 7vh, 72px); overflow: hidden; } .tops__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; width: min(var(--wrap), 100% - var(--gutter) * 2); margin: 0 auto 16px; } .tops__title { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.02em; color: var(--navy); } .tops__nav { display: flex; gap: 8px; } .tops__arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(20, 31, 71, .16); border-radius: 50%; background: #fff; color: var(--navy); cursor: pointer; transition: border-color .2s, opacity .2s, transform .16s var(--ease-out); } .tops__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (hover: hover) { .tops__arrow:hover:not(:disabled) { border-color: rgba(20, 31, 71, .4); } } .tops__arrow:active:not(:disabled) { transform: scale(.92); } .tops__arrow:disabled { opacity: .35; cursor: default; } ul.tops__track { /* ul: le gana al reset de ul[role="list"] */ display: flex; gap: 16px; margin: 0; padding: 4px var(--edge) 12px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tops__track::-webkit-scrollbar { display: none; } .tops__track:focus-visible { outline: 2px solid var(--focus-light); outline-offset: -2px; } .tops__track.is-loop { scroll-snap-type: none; cursor: grab; } /* loop infinito (main.js → topReviews): sin snap, que pelearía con el avance continuo */ .tops__track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; } .tops__track.is-drag * { pointer-events: none; } .tops__card { flex: 0 0 var(--card-w); scroll-snap-align: start; } .tops__card figure { display: flex; flex-direction: column; height: 100%; margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(20, 31, 71, .06); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); } @media (hover: hover) { .tops__card figure:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 10px 28px -12px rgba(20, 31, 71, .22); } } .tops__media { position: relative; aspect-ratio: 16 / 10; background: #e8e8e6; } .tops__media { overflow: hidden; } .tops__media picture { position: absolute; inset: 0; } /* fuera del flujo: la caja respeta el 16:10 */ .tops__media img, .tops__media video { display: block; width: 100%; height: 100%; object-fit: cover; } .tops__media video { position: absolute; inset: 0; } .tops__media video { background: #000; object-fit: contain; } .tops__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: linear-gradient(transparent 55%, rgba(10, 18, 48, .28)); cursor: pointer; } .tops__play svg { width: 54px; height: 54px; padding: 15px 13px 15px 17px; border-radius: 50%; background: rgba(255, 255, 255, .94); fill: var(--navy); transition: transform .2s var(--ease-out); } .tops__play:hover svg { transform: scale(1.06); } .tops__stars { margin: 13px 16px 0; color: #c99a1e; font-size: 12.5px; letter-spacing: .08em; } .tops__q { margin: 4px 16px 0; } .tops__q p { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .tops__q p::before { content: "“"; } .tops__q p::after { content: "”"; } .tops__by { display: flex; flex-direction: column; gap: 1px; margin: auto 16px 0; padding: 10px 0 14px; } .tops__by cite { font-style: normal; font-size: 14.5px; font-weight: 600; color: var(--navy); } .tops__ctx { font-size: 12.5px; color: var(--text-2); } @media (max-width: 760px) { .tops { --card-w: 84vw; --edge: 20px; padding-top: 28px; } .tops__nav { display: none; } /* en mobile, el dedo */ ul.tops__track { gap: 12px; } } /* entrada: una sola vez, las tarjetas suben apenas (CSS; la clase la pone un IntersectionObserver) */ .motion .tops__card { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); } .motion .tops.is-in .tops__card { opacity: 1; transform: none; } .motion .tops.is-in .tops__card:nth-child(2) { transition-delay: .06s; } .motion .tops.is-in .tops__card:nth-child(3) { transition-delay: .12s; } .motion .tops.is-in .tops__card:nth-child(4) { transition-delay: .18s; } .motion .tops.is-in .tops__card:nth-child(n + 5) { transition-delay: .22s; } @media (prefers-reduced-motion: reduce) { .tops__card figure, .tops__arrow { transition: none; } } /* Entrada (una vez, después quietud): los nombres y la foto suben con fade. */ .refs { --ease-in-refs: cubic-bezier(.33, 1, .68, 1); } .motion .refs__names span:not(.sr-only):not(.refs__and) { display: inline-block; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .7s var(--ease-in-refs), transform .8s var(--ease-in-refs); } .motion .refs__names span:last-child { transition-delay: .12s; } .motion .refs__names.is-in span:not(.sr-only):not(.refs__and) { opacity: 1; transform: none; } .motion .refs__img { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s var(--ease-in-refs) .12s, transform .95s var(--ease-in-refs) .12s; } .motion .refs__figure.is-in .refs__img { opacity: 1; transform: none; } /* ========================================================================== 04 · MACIZO VS. HUECO ========================================================================== */ .duel { background: var(--navy-b); } .motion .duel { height: 280vh; } .duel__stage { padding: 120px var(--gutter); text-align: center; } .motion .duel__stage { padding: 0; } .duel__intro, .duel__claims { position: relative; z-index: 2; } .duel__claims { margin-top: 56px; } .claims li { font-weight: 600; font-size: clamp(34px, 4.8vw, 70px); line-height: 1.06; letter-spacing: -0.036em; } .duel__note { margin: 28px auto 0; max-width: 34em; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); text-wrap: pretty; } .duel__label { display: none; } .duel__fallback { margin: 56px auto 0; max-width: 520px; } .duel__fallback figcaption { display: flex; justify-content: space-around; margin-top: 16px; font-size: 14px; color: var(--ink-2); } .duel__disclaimer { margin-top: 32px; font-size: 13px; color: var(--ink-3); } .motion .duel__intro { position: absolute; left: 0; right: 0; top: clamp(104px, 15vh, 160px); padding: 0 var(--gutter); } .motion .duel__claims { position: absolute; left: var(--gutter); top: 50%; width: min(600px, 44vw); margin: 0; transform: translateY(-46%); text-align: left; } .motion .duel__claims .duel__note { margin-left: 0; } .motion .duel__label { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 220px; margin-left: -110px; text-align: center; opacity: 0; will-change: transform, opacity; } .duel__label strong { display: block; font-weight: 600; font-size: 17px; letter-spacing: -0.012em; } .duel__label span { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); } .motion .duel__disclaimer { position: absolute; right: var(--gutter); bottom: calc(var(--bar-gap) + 20px); margin: 0; z-index: 2; } .motion.gl .duel__fallback, .motion:not(.gl) .duel__label { display: none; } .motion:not(.gl) .duel__fallback { position: absolute; left: 50%; top: 50%; width: min(520px, 84vw); margin: 0; transform: translate(-50%, -38%); } .motion:not(.gl) .duel__intro { top: clamp(88px, 11vh, 120px); } .motion:not(.gl) .duel__claims { top: auto; bottom: calc(var(--bar-gap) + 56px); left: 0; right: 0; width: auto; transform: none; text-align: center; padding: 0 var(--gutter); } .motion:not(.gl) .claims li { font-size: clamp(26px, 3vw, 40px); } @media (max-width: 760px) { .motion .duel__intro { top: 96px; } .motion .duel__claims { left: var(--gutter); right: var(--gutter); top: 92px; width: auto; transform: none; text-align: center; } .motion .duel__claims .duel__note { margin-inline: auto; font-size: 15.5px; margin-top: 16px; } .duel__label strong { font-size: 15px; } .duel__label span { font-size: 13px; } .motion .duel__label { width: 160px; margin-left: -80px; } .motion .duel__disclaimer { left: 0; right: 0; text-align: center; } } /* ========================================================================== 05 · QUÉ HACE EL ROLO ========================================================================== */ .uses { background: var(--navy-a); padding: clamp(120px, 18vh, 200px) 0 clamp(120px, 16vh, 180px); overflow: clip; } .uses__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px 64px; align-items: end; } .use { width: min(var(--wrap), 100% - var(--gutter) * 2); margin: clamp(72px, 11vh, 132px) auto 0; display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; /* foto vertical: el texto, a media altura */ } .use--right { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); } .use:not(.use--pause) .t-h1 { font-size: clamp(34px, 3.6vw, 54px); } .use--right .use__media { order: 2; } /* fotos verticales (4:5) recortadas a resolución nativa: a 460 px de ancho entran con margen de nitidez */ .use__media { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--media-bg); } .use__media picture { display: block; width: 100%; height: 100%; } .use__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); } .use__copy .t-lead { margin-top: 16px; max-width: 26em; } .use--right .use__copy { text-align: right; } .use--right .use__copy .t-lead { margin-left: auto; } .use--pause { display: block; text-align: center; padding-block: clamp(16px, 4vh, 56px); } .use--pause .t-lead { margin-inline: auto; } .uses__who { margin-top: clamp(28px, 4vh, 48px); text-align: center; font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.015em; color: var(--ink-2); } @media (max-width: 760px) { .uses__head { grid-template-columns: 1fr; gap: 20px; } .use, .use--right { grid-template-columns: 1fr; gap: 24px; } .use--right .use__media { order: 0; } /* mobile: cuadrada (la vertical entera ocuparía más de una pantalla), cada una con su encuadre (--pos-m) */ .use__media { aspect-ratio: 1 / 1; border-radius: 20px; } .use__media img { object-position: var(--pos-m, 50% 50%); } .use--right .use__copy { text-align: left; } .use--right .use__copy .t-lead { margin-left: 0; } .use--pause, .use--pause .use__copy { text-align: left; } } /* ========================================================================== 06 + 07 · MATERIAL Y PERSONALIZACIÓN ========================================================================== */ .matter { position: relative; background: var(--navy-b); } .motion .matter { height: 470vh; } .matter .anchor { position: absolute; left: 0; top: 0; } .matter__stage { display: grid; gap: 72px; padding: 120px var(--gutter); } .motion .matter__stage { display: block; padding: 0; background: var(--stage-bg, var(--navy-b)); } .granules { display: none; } .matter__still { width: min(640px, 100%); margin-inline: auto; } .matter__intro, .matter__facts, .custom { position: relative; z-index: 2; } .matter__intro { text-align: center; } .matter__facts { max-width: 560px; margin-inline: auto; } .facts { margin-top: 28px; display: grid; gap: 14px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); } .facts li { padding-top: 14px; border-top: 1px solid var(--line-dark); } .facts strong { color: var(--ink); font-weight: 600; } .custom { max-width: 560px; margin-inline: auto; } .custom .t-lead { margin-top: 22px; } .custom__steps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; } .custom__steps span, .custom__steps button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(244, 246, 251, .24); background: transparent; font-weight: 500; font-size: 15px; cursor: pointer; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out); } .custom__steps button:hover { border-color: rgba(244, 246, 251, .6); } .custom__steps button[aria-pressed="true"] { background: var(--ink); color: var(--navy-a); border-color: var(--ink); } .custom__who { margin-top: 26px; font-size: 15.5px; color: var(--ink-2); max-width: 30em; } .custom__cta { margin-top: 34px; } .matter__intro { order: 1; } .matter__still--rolo { order: 2; } .matter__facts { order: 3; } .matter__still--custom { order: 4; margin-top: 48px; } .custom { order: 5; } .motion .granules { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; will-change: clip-path, transform; } .motion .matter__stage .stage-slot { z-index: 0; } .motion .matter__intro { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--gutter); pointer-events: none; } /* solo un título: nunca tapa los botones de personalización */ .motion .matter__intro h2 { text-shadow: 0 2px 30px rgba(6, 8, 14, .55); } .motion .matter__facts, .motion .custom { position: absolute; left: var(--gutter); top: 50%; width: min(470px, 40vw); max-width: none; margin: 0; transform: translateY(-50%); } .motion .matter__still { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(640px, 58vw); opacity: 0; transform: translate(-30%, -50%); } .motion.gl .matter__still { display: none; } .motion .matter__facts { visibility: hidden; } .motion .custom { pointer-events: none; } /* invisible por opacidad hasta su tramo, pero alcanzable con teclado */ @media (max-width: 760px) { .motion .matter__facts, .motion .custom { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(var(--bar-gap) + 32px); width: auto; transform: none; } .motion .custom .t-display { font-size: 40px; } .motion .custom .t-lead { margin-top: 12px; font-size: 16.5px; } .motion .custom__steps { margin-top: 18px; gap: 6px; flex-wrap: nowrap; } .custom__steps span, .custom__steps button { padding: 0 13px; font-size: 14px; } .motion .custom__who { display: none; } .motion .custom__cta { margin-top: 20px; } .motion .custom__steps { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .motion .custom__steps::-webkit-scrollbar { display: none; } .custom__steps button { flex: none; } .motion .matter__facts .t-h3 { font-size: 21px; } .motion .matter__still { width: 86vw; transform: translate(-50%, -78%); } } /* ========================================================================== 08 · RESEÑAS (zona clara) ========================================================================== */ .reviews { background: var(--paper); color: var(--text); box-shadow: 0 1px 0 var(--paper); /* tapa la costura subpíxel con el footer (ahora la sigue directo) */ padding: clamp(96px, 14vh, 160px) 0 clamp(88px, 12vh, 136px); } /* Tres niveles. Arriba, las protagonistas con tratamiento editorial (Moneta, el video de River, Big Tilo, el 40 de River Vóley y una cita destacada a dos columnas); el resto en grilla compacta de 3 columnas (2 en tablet, 1 en mobile). Niveles 2 y 3 en masonry (reviews.js): cada tarjeta mide lo que su contenido, sin bloques vacíos, y el orden de prioridad se conserva (cada una va a la columna más corta, de izquierda a derecha). */ .rv-head { max-width: 860px; } .rv-kicker { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; } .rv-lead { margin-top: 18px; font-size: clamp(17px, 1.4vw, 19px); color: var(--text-2); max-width: 40em; } .rv-sub { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .rv-all { margin-top: clamp(56px, 8vh, 96px); padding-top: clamp(40px, 5vh, 56px); border-top: 1px solid var(--line-light); } /* tarjeta base */ .rv-card { margin: 0; border-radius: 24px; background: #fff; box-shadow: 0 1px 0 rgba(20, 31, 71, .06), 0 16px 44px -30px rgba(20, 31, 71, .28); overflow: hidden; } .rv-quote p { font-weight: 500; letter-spacing: -0.016em; text-wrap: pretty; color: var(--text); } .rv-quote p::before { content: "“"; } .rv-quote p::after { content: "”"; } .rv-who { display: flex; align-items: center; gap: 14px; min-width: 0; } .rv-who__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .rv-name { font-style: normal; font-weight: 600; font-size: 18px; color: var(--text); } .rv-ctx { font-size: 14px; color: var(--text-2); margin-top: 2px; } .rv-av { flex: none; width: var(--av, 56px); height: var(--av, 56px); border-radius: 50%; } .rv-av--photo { object-fit: cover; background: var(--mist); } .rv-av--crest { display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--line-light); } .rv-av--crest img { width: 66%; height: 66%; object-fit: contain; } .rv-av--initials { display: grid; place-items: center; background: var(--navy-a); color: var(--ink); font-weight: 600; font-size: calc(var(--av, 56px) * .36); letter-spacing: .02em; } .rv-fact { display: inline-flex; align-self: flex-start; margin-top: 16px; padding: 6px 13px; border-radius: 999px; background: var(--mist); color: var(--text); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .rv-meta { display: flex; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--text-2); } .rv-stars { color: #c99a1e; letter-spacing: 2px; font-size: 13px; } .rv-stars__off { color: rgba(20, 31, 71, .18); } .rv-prod { font-weight: 500; } .rv-media { position: relative; background: var(--mist); overflow: hidden; } .rv-media img { width: 100%; height: 100%; object-fit: cover; } /* Moneta: pieza editorial (featured; recortes leves de aire, la escala se mantiene) */ /* video + cita grande (featured) */ /* River Vóley: el número como dato (featured) */ /* grillas: --cols manda (3 desktop, 2 tablet, 1 mobile) */ .rv-grid { --cols: 3; --gap: clamp(16px, 1.8vw, 24px); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; } .rv-grid--all { margin-top: 32px; } .rv-grid > li { display: flex; } .rv-grid > li > .rv-card { flex: 1; } /* masonry (lo activa reviews.js con 2+ columnas): posiciones absolutas; sin JS queda la grilla normal */ .rv-grid.is-masonry { display: block; position: relative; } .rv-grid.is-masonry > li { position: absolute; display: block; } /* protagonistas en grilla: cita compacta; la primera (con dato) ocupa dos columnas y conserva escala grande */ @media (min-width: 1120px) { .rv-grid--top > .rv-feat { grid-column: span 2; } } /* reseña estándar (niveles 2 y 3): foto arriba con recorte 3:2 (sin ocupar media pantalla) */ .rv-std { display: grid; height: 100%; } .rv-std { grid-template-rows: auto 1fr; } .rv-item--media .rv-media { aspect-ratio: 3 / 2; } .rv-item--media .rv-media img { object-position: 50% 40%; } .rv-std__body { display: flex; flex-direction: column; padding: 18px 20px; } .rv-std .rv-who { --av: 36px; gap: 10px; } .rv-std .rv-name { font-size: 15px; } .rv-std .rv-ctx { font-size: 12.5px; } .rv-std .rv-quote { margin-top: 10px; } .rv-std .rv-quote p { font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: 0; } .rv-std .rv-meta { margin-top: auto; padding-top: 10px; } /* filtros + paginado */ .rv-all__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 32px; } .rv-filters { display: flex; flex-wrap: wrap; gap: 8px; } .rv-chip { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-light); background: transparent; color: var(--text); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out); } .rv-chip span { margin-left: 4px; color: var(--text-2); font-weight: 400; font-size: 13px; } .rv-chip:hover { border-color: rgba(20, 31, 71, .4); } .rv-chip[aria-pressed="true"] { background: var(--navy-a); border-color: var(--navy-a); color: var(--ink); } .rv-chip[aria-pressed="true"] span { color: var(--ink-2); } .rv-pager { display: flex; justify-content: center; margin-top: 36px; } .rv-pager .btn[hidden] { display: none; } /* entrada: fade + traslado corto, una vez (una sola IntersectionObserver para todas) */ .motion [data-rv-in] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); } .motion [data-rv-in].is-in { opacity: 1; transform: none; } @media (max-width: 1119px) { .rv-grid { --cols: 2; } .rv-item--media .rv-media { aspect-ratio: 16 / 10; } /* a 2 columnas la tarjeta es más ancha: foto más baja */ } @media (max-width: 1020px) { } @media (max-width: 760px) { .rv-card { border-radius: 22px; } .rv-grid { --cols: 1; } .rv-item--media .rv-media { aspect-ratio: 16 / 10; } .rv-std .rv-quote p, .rv-item--lg .rv-std .rv-quote p { font-size: 18px; } .rv-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 8px; scrollbar-width: none; } .rv-filters::-webkit-scrollbar { display: none; } .rv-chip { flex: none; } .rv-pager .btn { width: 100%; } } .link-arrow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: clamp(40px, 6vh, 64px); font-weight: 500; text-decoration: none; } .link-arrow svg { width: 20px; height: 20px; transition: transform .35s var(--ease-out); } .link-arrow:hover { text-decoration: underline; } .link-arrow:hover svg { transform: translateX(4px); } /* ========================================================================== FOOTER ========================================================================== */ .footer { background: var(--navy-b); color: var(--ink-2); padding: clamp(80px, 12vh, 120px) 0 calc(36px + env(safe-area-inset-bottom)); font-size: 15px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.2fr; gap: 48px; } .footer__logo { width: 150px; height: 84px; color: var(--ink); } .footer__brand p { margin-top: 14px; color: var(--ink); font-weight: 500; } .footer__social { display: grid; place-items: center; width: 44px; height: 44px; margin: 18px 0 0 -10px; border-radius: 999px; color: var(--ink); } .footer__social:hover { background: rgba(244, 246, 251, .08); } .footer__social svg { width: 22px; height: 22px; } .footer__title { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink); margin-bottom: 14px; } .footer__col ul { display: grid; gap: 4px; } .footer__col a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; text-decoration: none; } .footer__col a:hover { color: var(--ink); text-decoration: underline; } .footer__col li:not(:has(a)) { padding: 11px 0; } .footer__legal { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-dark); display: grid; gap: 10px; font-size: 13px; color: var(--ink-3); } .footer__legal a { display: inline-block; padding: 12px 0; color: var(--ink-2); font-weight: 500; margin-right: 6px; } @media (max-width: 760px) { .footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .footer__grid { grid-template-columns: 1fr 1.4fr; gap: 40px 24px; } .footer__brand { grid-column: 1 / -1; } .footer__col { overflow-wrap: anywhere; } } /* ---------- WhatsApp y cookies ---------- */ .wa { position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; background: var(--ink); color: var(--navy-a); box-shadow: 0 8px 24px rgba(6, 10, 30, .28); transition: transform .35s var(--ease-out), opacity .4s; } .wa:hover { transform: translateY(-2px); } .wa svg { width: 24px; height: 24px; } .intro .wa { opacity: 0; pointer-events: none; } .cookie { position: fixed; z-index: 45; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(440px, calc(100% - 92px)); display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px 20px; border-radius: 22px; background: rgba(16, 26, 61, .9); color: var(--ink-2); font-size: 13.5px; line-height: 1.45; border: 1px solid rgba(244, 246, 251, .1); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .cookie[hidden] { display: none; } @media (max-width: 760px) { .cookie { left: 12px; width: calc(100% - 88px); padding: 12px 12px 12px 16px; font-size: 12.5px; gap: 10px; } .cookie .btn { padding: 0 1em; } } .cookie strong { color: var(--ink); font-weight: 500; } .cookie .btn { flex: none; } /* Refinamiento: el resultado conserva ambos lados y termina en quietud. */ html { scrollbar-gutter: stable; } /* las afirmaciones ocupan el lugar del título (que ya se fue): la comparación queda abajo, entera */ .motion .duel__claims { left:var(--gutter); right:var(--gutter); top:clamp(104px,15vh,150px); bottom:auto; width:auto; transform:none; text-align:center; } .motion .claims { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; } .motion .claims li { font-size:clamp(24px,2.7vw,40px); } .motion .duel__claims .duel__note { margin:14px auto 0; max-width:62em; font-size:15px; } .motion .duel__disclaimer { left:var(--gutter);right:var(--gutter);bottom:24px;text-align:center;font-size:13px; } .motion .duel__intro { top:100px; } .motion .duel__intro .t-h2 {font-size:clamp(32px,4vw,56px);} .duel-still {display:flex;gap:24px;align-items:center;} .duel-still>div{width:50%;position:relative;} .duel-still img{width:100%;object-fit:contain;} .duel-still .foam-still{height:130px;object-fit:cover;transform:scaleY(.42) rotate(8deg);} .duel-still .disc-still{position:absolute;width:40%;right:-8%;bottom:32px;transform:rotate(22deg) scaleY(.35);} .static-duel .duel__stage{padding-top:100px;} .static-duel [data-stage-slot="duel"]{position:relative;height:600px;} .static-duel .duel__fallback{display:none;} .static-duel .duel__intro{position:absolute;top:80px;left:0;right:0;} @media(max-width:759px){ .motion .duel{height:230vh;} .motion .duel__intro{top:86px;} .motion .duel__claims{top:92px;bottom:auto;} .motion .claims{gap:5px 12px;} .motion .claims li{font-size:18px;} .motion .duel__claims .duel__note{font-size:12px;line-height:1.4;margin-top:8px;} .motion .duel__disclaimer{bottom:18px;font-size:12px;line-height:1.35;} .motion .duel__label strong{font-size:13px;} .motion .duel__label span{font-size:11px;} .motion .duel__label{width:180px;margin-left:-90px;} .static-duel [data-stage-slot="duel"]{height:670px;} } @media(max-width:759px){ .motion [data-stage-slot="duel"]{top:64px;bottom:64px;} /* mobile: el canvas del duelo son dos encuadres apilados (stage3d.js → renderSplit); el filete los separa */ .motion.gl [data-stage-slot="duel"]::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(244,246,251,.14) 20%,rgba(244,246,251,.14) 80%,transparent);pointer-events:none;} .motion .duel__label span{display:none;} } .static-duel .duel__label{display:block;position:absolute;left:0;top:0;width:180px;margin-left:-90px;z-index:2;} .static-duel .duel__label span{display:none;} /* ========================================================================== COMPRA · ¿personalizar? (diálogo nativo; en mobile, hoja desde abajo) Una decisión por vez, mucho aire, una acción principal clara. ========================================================================== */ html.buy-open { overflow: hidden; } .buy { width: min(560px, calc(100% - 32px)); max-height: min(92svh, 860px); padding: 0; border: 0; border-radius: 28px; background: var(--paper); color: var(--text); overflow: auto; overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(10, 18, 48, .28); } .buy::backdrop { background: rgba(12, 18, 40, .48); } .buy[open] { animation: buy-in .42s var(--ease-out); } .buy[open]::backdrop { animation: buy-fade .42s var(--ease-out); } @keyframes buy-in { from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); } } @keyframes buy-fade { from { opacity: 0; } } .buy__panel { padding: 22px clamp(22px, 5vw, 40px) clamp(28px, 5vw, 40px); } .buy__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .buy__product { font-weight: 600; font-size: 15px; } .buy__meta { font-weight: 400; color: var(--text-2); margin-left: 6px; } .buy__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; } .buy__close:hover { background: rgba(20, 31, 71, .06); } .buy__close svg { width: 22px; height: 22px; } .buy__step { animation: buy-step .45s var(--ease-out); } @keyframes buy-step { from { opacity: 0; transform: translate3d(0, 8px, 0); } } .buy__q, .buy__title { margin-top: clamp(24px, 5vh, 44px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.08; } .buy__q { font-size: clamp(28px, 4.4vw, 38px); text-wrap: balance; } .buy__title { font-size: clamp(34px, 5vw, 46px); margin-top: 18px; } .buy__lead { margin-top: 12px; font-size: 16.5px; color: var(--text-2); max-width: 30em; } .buy__options { display: grid; gap: 12px; margin-top: clamp(28px, 5vh, 40px); } .buy__opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 22px; border: 1.5px solid var(--line-light); border-radius: 18px; background: #fff; color: var(--text); font: 500 16.5px/1.25 "Poppins", system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .25s var(--ease-out), transform .25s var(--ease-out); } .buy__opt:hover { border-color: rgba(20, 31, 71, .4); } .buy__opt:active { transform: scale(.99); } .buy__opt--custom { background: var(--text); color: var(--ink); border-color: var(--text); } .buy__opt--custom:hover { border-color: var(--text); background: #1d2a5c; } .buy__price { font-weight: 400; font-variant-numeric: tabular-nums; opacity: .78; white-space: nowrap; } .buy__back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 10px 0 0 -8px; padding: 0 10px 0 4px; border: 0; background: none; color: var(--text-2); font: 500 15px "Poppins", system-ui, sans-serif; cursor: pointer; } .buy__back svg { width: 20px; height: 20px; } .buy__drop { display: grid; justify-items: center; gap: 12px; margin-top: 24px; padding: 34px 20px 28px; border: 1.5px dashed rgba(20, 31, 71, .28); border-radius: 22px; background: #fff; text-align: center; transition: border-color .2s, background-color .2s; } .buy__drop.is-over { border-color: var(--text); background: #f1f4fb; } .buy__drop { cursor: pointer; } /* toda el área abre el selector (es un