/* Hallmark · shape: shop window lit from inside, a light home and one page per demo · genre: editorial · theme: custom (kept brand: Vitrina tokens, wordmark, Clash Grotesk and Onest) · redesign: full · job: hire (a free demo request) · idea: "the shop window with the light on: a grained orange glow is the lit glass, and each demo opens out of its card into its own page" · vibe: "lit shop glass, signal orange, big local grotesk"
 * paper: oklch(96.8% 0.006 80) · accent: oklch(68.2% 0.211 38) · display: Clash Grotesk 600 · body: Onest 400/600 · hero: the brief's line across the full width, word by word, the lead and both actions bottom left, one demo phone floating right over a drifting grained glow that dims on scroll (/); the demo's name over its own coloured glow, a laptop and a floating phone (/trabajos/<slug>/) · nav: framed wordmark, three links, quiet demo button, clear over the home glow and solid once scrolled · footer: ink with grain, a line, WhatsApp and the demo pages, the wordmark huge and cut by the bottom edge · imagery: captures of the 3 demos (the user's), product · signature: the grained shop-window glow behind the full-width line, and the demo card that opens into its page
 * axes: light/grotesk-sans/warm · posture: paper ground, the glow in orange and peach on the home hero and the contact, each demo drenched in its own colour on its page, ink bands with grain · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V5 · weakest: R, the brief asks for a lot of motion; every loop is slow, pauses off screen, and all of it stops under reduced motion */
/* Hallmark · hero-review: subagent · fix · 5 findings · 5 resolved (the glow now sits in a framed shop window with the Abierto las 24 horas sign and a glint, grain made visible, phone grown and cut by the sill, the CTA outlined in ink, no seam) · finish-review: subagent · fix · 7 findings · 7 resolved · gap: the old first screen showed all three demos, the hero now shows one as the brief asks */
/* Hallmark · dismissed 58 · the hero head runs eight words because it is the brief's own line, kept verbatim: Tu negocio ya es bueno. Que se vea. */
/* Hallmark · dismissed 23 · the one display head in accent is the guarantee on the ink band, Si la demo no te gusta, no pagás nada, and the orange glow fields are declared surfaces in the posture */
/* Hallmark · waive 29 · drifting grained glow behind the Vitrina hero, the contact and each demo hero, plus a cursor spotlight on desktop · the user asked for the grain gradient and the spotlight by name in the redesign brief */
/* Hallmark · dismissed F4 · .btn--glint is a modifier on the one primary recipe, not a second filled button */
/* Hallmark · dismissed 25 · .need__text is one sentence set at display size, a statement, not running prose */
/* Hallmark · answered F8 · one scroll idea, a single --p progress value per element; the progress bar and the JS fallback are the same pattern driven two ways */
/* Hallmark · waive 59 · the facts band sits 64px under the coloured demo hero where the paper changes · it is the caption of that hero, the ficha of the Vitrina demo, not a new section */
/* Hallmark · dropped #luzymar, #giramundos, #bastaplagas, #lm-title, #gm-title, #bp-title and the old pane, desk and phone captures · the three home blocks became cards that open /trabajos/<slug>/, as the redesign brief asks */
/* Hallmark · waive 81 · span.blob layers of the grained glow, four per lit field · they are the light behind the Vitrina glass that the brief asks for, never a picture slot or a stand-in */
/* Hallmark · waive 83 · the demo pages are made of captures of each Vitrina demo · this is a portfolio of the studio's own work, the captures are the product */
/* Hallmark · waive 47b · a laptop and a phone on each demo page, a mini phone on each home card, each holding the real demo capture · the brief asks for notebook plus phone mockups for every Vitrina demo */
/* tokens.css */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(3rem, 6.4vw + 0.4rem, 6rem);
  --text-section: clamp(2.5rem, 4.4vw + 0.6rem, 4.75rem); --text-title: clamp(2rem, 3.2vw + 0.6rem, 3.5rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-wall: clamp(2.75rem, 7vw + 0.5rem, 7.5rem);
  --text-hero: clamp(3.25rem, 7.4vw + 0.5rem, 7.5rem); --text-mega: clamp(5rem, 24vw, 22rem); --text-score: clamp(6rem, 14vw, 13rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-drift: 28s;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(46% 0.11 150); --color-live: oklch(72% 0.2 148);
  --container: 1360px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 80px; --section-gap: 104px; --section-gap-l: 128px;
  --nav-h: 72px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* Vitrina: blanco roto, tinta, un naranja señal (y su durazno para la luz del vidrio) */
  --color-paper: oklch(96.8% 0.006 80); --color-paper-2: oklch(93.4% 0.008 75); --color-paper-3: oklch(88.5% 0.01 70);
  --color-ink: oklch(18.5% 0.012 50); --color-ink-2: oklch(33% 0.012 50); --color-muted: oklch(48% 0.012 55);
  --color-rule: oklch(84% 0.01 60); --color-rule-dark: oklch(34% 0.012 50);
  --color-on-ink: oklch(95% 0.006 80); --color-on-ink-2: oklch(78% 0.008 70);
  --color-accent: oklch(68.2% 0.211 38); --color-accent-2: oklch(72% 0.19 42); --color-accent-ink: oklch(18.5% 0.012 50); --color-focus: oklch(55% 0.19 38);
  --color-peach: oklch(85% 0.085 58); --color-ember: oklch(60% 0.2 33); --color-clear: oklch(96.8% 0.006 80 / 0);
  --color-glint: oklch(99% 0.004 80 / 0.55); --color-spot: oklch(99% 0.01 80 / 0.32); --color-shadow: oklch(18% 0.02 50 / 0.42);
  /* Los colores de cada demo viven en src/projects.json y salen como tokens en projects.css */

  --font-display: "Clash Grotesk", "Arial Narrow", ui-sans-serif, system-ui, sans-serif; --font-body: "Onest", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-display);
  --radius-card: 0; --radius-frame: 0; --radius-phone: 30px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --shadow-float: 0 28px 48px -26px var(--color-shadow); --shadow-lift: 0 40px 60px -30px var(--color-shadow);
  --tracking-display: -0.025em;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 60rem) { :root { --nav-h: 64px; } }

/* base.css */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 64px; --section-gap: 80px; --section-gap-l: 96px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 36px; --section-gap: 48px; --section-gap-l: 64px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }


@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--ease-out); }
}

/* Chrome */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); transition: background-color var(--dur-long) var(--ease-out); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: var(--nav-h); }
.nav__links { display: none; }
.nav__links a { color: var(--color-ink); text-decoration: none; font-size: var(--text-md); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.nav__links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.wordmark { display: inline-block; padding: 0 0.3em 0.06em; border: 2px solid var(--color-ink); border-bottom: 5px solid var(--color-accent); color: var(--color-ink); font: 600 1.625rem/1.1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; }
.wordmark { position: relative; }
.wordmark .wordmark__spark { position: absolute; right: calc(-0.25em - 1px); top: calc(-0.25em - 1px); width: 0.5em; height: 0.5em; color: var(--color-accent); stroke: var(--color-paper); stroke-width: 12px; paint-order: stroke; overflow: visible; }
.wordmark:hover { background: var(--color-paper-2); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Controls: the fill rises from the bottom on hover, the primary carries a glint */
.btn { --fill: var(--color-accent); --fill-ink: var(--color-ink); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: transparent; color: var(--color-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform 360ms var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fill); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--dur-long) var(--ease-out); }
.btn:hover { color: var(--fill-ink); }
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: translate(var(--mx, 0px), calc(var(--my, 0px) + 1px)); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn:disabled::before { transform: scaleY(0); }
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary { --fill: var(--color-ink); --fill-ink: var(--color-paper); background: var(--color-accent); border-color: var(--color-ink); color: var(--color-accent-ink); }
.btn--glint::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, var(--color-clear) 30%, var(--color-glint) 50%, var(--color-clear) 70%); transform: translateX(-120%); }
.btn--quiet { background: transparent; }
.btn__free { margin-left: 0.3em; padding: 0.12em 0.4em 0.16em; background: var(--color-ink); color: var(--color-accent); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.btn__free--caps { text-transform: uppercase; letter-spacing: 0.03em; }
.btn:hover .btn__free { background: var(--color-accent); color: var(--color-ink); }
.btn--ink { --fill: var(--color-paper); --fill-ink: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.btn--ink:hover { border-color: var(--color-ink); }
.btn--nav { min-height: 44px; padding: 0 var(--space-md); }
.btn .icon { flex-shrink: 0; }


/* The lit glass: four slow blobs, a still grain on top */
.glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--color-paper); }
.glow::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.22; mix-blend-mode: overlay; }
.blob { position: absolute; width: var(--s, 70%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--c) 0%, var(--c) 18%, var(--color-clear) 100%); opacity: var(--o, 1); will-change: transform; }
.glow--brand { background: var(--color-peach); }
.glow--brand .blob--1 { --c: var(--color-accent); --s: 70%; left: 52%; top: -44%; --o: 0.85; }
.glow--brand .blob--2 { --c: var(--color-paper); --s: 80%; left: -30%; top: -10%; }
.glow--brand .blob--3 { --c: var(--color-paper); --s: 60%; left: 4%; top: 40%; --o: 0.9; }
.glow--brand .blob--4 { --c: var(--color-ember); --s: 40%; left: 70%; top: 58%; --o: 0.7; }
.glow--hot { background: var(--color-accent); }
.glow--hot .blob--1 { --c: var(--color-peach); --s: 70%; left: -18%; top: -30%; }
.glow--hot .blob--2 { --c: var(--color-ember); --s: 66%; left: 52%; top: 30%; }
.glow--hot .blob--3 { --c: var(--color-accent-2); --s: 50%; left: 20%; top: 50%; }
.glow--hot .blob--4 { --c: var(--color-ink); --s: 30%; left: 82%; top: -6%; --o: 0.28; }
.glow--project { background: var(--pf); }
.glow--project .blob--1 { --c: var(--pd); --s: 72%; left: -26%; top: -34%; --o: 0.8; }
.glow--project .blob--2 { --c: var(--pa); --s: 46%; left: 66%; top: 46%; --o: 0.75; }
.glow--project .blob--3 { --c: var(--pf); --s: 56%; left: 30%; top: 20%; }
.glow--project .blob--4 { --c: var(--pd); --s: 40%; left: 74%; top: -20%; --o: 0.6; }
.spot { position: absolute; inset: 0; background: radial-gradient(340px circle at var(--x, 70%) var(--y, 30%), var(--color-spot), var(--color-clear) 70%); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }

@media (prefers-reduced-motion: no-preference) {
  .blob--1 { animation: drift-a 26s var(--ease-in-out) infinite alternate; }
  .blob--2 { animation: drift-b 33s var(--ease-in-out) infinite alternate; }
  .blob--3 { animation: drift-c 22s var(--ease-in-out) infinite alternate; }
  .blob--4 { animation: drift-d 38s var(--ease-in-out) infinite alternate; }
  .is-off .blob { animation-play-state: paused; }
  .js .is-spot .spot { opacity: 1; }
}
@keyframes drift-a { to { transform: translate(-22%, 16%) scale(1.12); } }
@keyframes drift-b { to { transform: translate(28%, -10%) scale(0.9); } }
@keyframes drift-c { to { transform: translate(34%, -22%) scale(1.15); } }
@keyframes drift-d { to { transform: translate(-40%, -24%) scale(1.2); } }

/* Ink bands keep a faint grain so the black is not flat */
.grain-ink { position: relative; isolation: isolate; background: var(--color-ink); color: var(--color-on-ink); }
.grain-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.06; pointer-events: none; }

/* Phones */
.phone img { width: 100%; }

/* Devices: a modern iPhone (thin bezel, round corners, Dynamic Island) and a Mac-style laptop with a notch */
.phone, .mini-phone { position: relative; display: block; margin: 0; padding: 0; border-radius: 15% / 7.1%; background: var(--color-ink); overflow: hidden; box-shadow: var(--shadow-lift); }
.phone > picture, .mini-phone > picture, .rotator__slide > picture { display: block; margin: 2.6%; aspect-ratio: 1170 / 2538; overflow: hidden; border-radius: 13% / 6%; }
.phone img, .mini-phone img { width: 100%; }
.phone::after, .mini-phone::after { content: ""; position: absolute; z-index: 2; top: 2%; left: 35%; width: 30%; height: 3.9%; border-radius: var(--radius-pill); background: var(--color-ink); pointer-events: none; }
.phone--rotator { display: grid; }
.rotator__slide { grid-area: 1 / 1; display: block; opacity: 0; transition: opacity 900ms var(--ease-in-out); }
.rotator__slide.is-on { opacity: 1; }
.rotator__slide:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; }
.laptop__screen { position: relative; padding: 1.3%; border-radius: 18px 18px 6px 6px; background: var(--color-ink); }
.laptop__screen::after, .screen::after { content: ""; position: absolute; top: 1.3%; left: 50%; width: 13%; height: 3.6%; border-radius: 0 0 10px 10px; background: var(--color-ink); translate: -50% 0; }
.laptop__screen img { border-radius: 8px 8px 2px 2px; }

/* Hero */
.hero { padding-inline: var(--space-xs); }
.hero__glass { position: relative; isolation: isolate; overflow: clip; max-width: calc(var(--container) + 2 * var(--space-3xl)); margin-inline: auto; border: 2px solid var(--color-ink); }
.ticker { display: flex; width: max-content; border-bottom: 2px solid var(--color-ink); background: var(--color-ink); color: var(--color-on-ink); }
.ticker__track { display: flex; flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
.ticker__track li { padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.ticker__track li::after { content: "/"; margin-left: var(--space-lg); color: var(--color-accent); }
.hero .glow { opacity: calc(1 - var(--p) * 0.85); }
.glass-glint { display: none; position: absolute; inset: -20% auto -20% 0; width: 22%; background: linear-gradient(100deg, var(--color-clear), var(--color-glint), var(--color-clear)); transform: translateX(-120%) skewX(-12deg); }
.js .glass-glint { display: block; opacity: 0; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-top: var(--space-xl); }
.hero__title { font-size: var(--text-hero); line-height: 0.98; letter-spacing: var(--tracking-display); }
.split__line { display: block; }
.split .w { display: inline-block; }
.hero__lead { max-width: 30ch; font-size: var(--text-lead); }
.hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-sm); margin-top: var(--space-lg); }
.hero__phone { position: relative; justify-self: center; width: min(64vw, 280px); margin: var(--space-md) 0 calc(-1 * var(--space-4xl)); rotate: -5deg; translate: 0 calc(var(--p) * -90px); }

/* Así quedan: cards, a carousel on the phone */
.work { padding-block: var(--section-gap) var(--section-gap-s); }
.work__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.work__head h2 { font-size: var(--text-section); line-height: 1; letter-spacing: var(--tracking-display); }
.work__intro { max-width: 34ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.cards { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 320px); gap: var(--space-md); margin: 0 calc(-1 * var(--gutter)); padding: var(--space-lg) var(--gutter) var(--space-xl); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; min-width: 0; }
.card__inner::after { content: ""; position: absolute; inset: -10% -40%; z-index: 2; background: linear-gradient(105deg, var(--color-clear) 42%, var(--color-glint) 50%, var(--color-clear) 58%); transform: translateX(-70%); pointer-events: none; }
.card:hover .card__inner::after { transform: translateX(70%); transition: transform 1.1s var(--ease-out); }
.card__inner { --color-focus: var(--pi); position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: var(--space-lg); border: 2px solid var(--color-ink); background: var(--pf); color: var(--pi); }
.card__inner .mini-phone { order: -1; align-self: center; width: 62%; max-width: 230px; margin-bottom: var(--space-lg); }
.card__page { container-type: size; }
.card__page img { transition: transform 900ms var(--ease-out); }
.card:hover .card__page img { transform: translateY(calc(-100% + 100cqh)); transition: transform 8s var(--ease-in-out); }
.card__inner::after { content: ""; position: absolute; inset: -10% -40%; z-index: 2; background: linear-gradient(105deg, var(--color-clear) 42%, var(--color-glint) 50%, var(--color-clear) 58%); transform: translateX(-70%); pointer-events: none; }
.card:hover .card__inner::after { transform: translateX(70%); transition: transform 1.1s var(--ease-out); }
.card__more { display: block; margin-top: var(--space-sm); font-size: var(--text-sm); font-weight: 600; }
.card__more svg { display: inline-block; width: 18px; height: 18px; margin-left: var(--space-2xs); vertical-align: -0.25em; transition: transform var(--dur-long) var(--ease-out); }
.card:hover .card__more svg { transform: translateX(4px); }
.ping { position: relative; display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-right: var(--space-xs); border-radius: 50%; background: var(--color-live); vertical-align: 0.05em; }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-live); }
@media (prefers-reduced-motion: no-preference) { .ping::after { animation: ping 1.8s var(--ease-out) infinite; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(3); opacity: 0; } }
.card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.card__name { font-size: var(--text-2xl); line-height: 1.05; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); border-radius: var(--radius-frame); }
.card__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.card__meta { color: var(--pi2); font-size: var(--text-sm); }
.card__demo { position: relative; z-index: var(--z-raised); display: inline-flex; align-items: center; margin-top: var(--space-xs); padding-block: var(--space-xs); color: var(--pi); font-size: var(--text-sm); font-weight: 600; text-underline-offset: 0.25em; }
.card__demo:hover { text-decoration-thickness: 2px; }
.card__demo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Cómo trabajo: the guarantee stays up, the steps stack under it */
.process { padding-block: var(--section-gap); }
.process__title { position: sticky; top: calc(var(--nav-h) + var(--space-md)); max-width: 15ch; padding-bottom: var(--space-lg); color: var(--color-accent); font-size: var(--text-section); line-height: 1.02; letter-spacing: var(--tracking-display); }
.stack { display: grid; gap: var(--space-3xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.stack__card { position: sticky; top: calc(var(--nav-h) + var(--stack-top, 11rem) + var(--i) * var(--stack-step, 6.75rem)); display: grid; grid-template-areas: "text" "when"; align-content: start; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-frame); background: var(--color-paper); color: var(--color-ink); box-shadow: 0 -24px 48px -32px var(--color-shadow); }
.stack__card:nth-child(2) { background: var(--color-accent); }
.stack__card:nth-child(2) .stack__text p { color: var(--color-ink); }
.stack__card:nth-child(3) { background: var(--color-paper-3); }
.stack__text { grid-area: text; display: grid; gap: var(--space-sm); }
.stack__text h3 { font-size: var(--text-title); line-height: 1.02; }
.stack__text .stack__spark { width: 0.6em; height: 0.6em; margin-left: 0.2em; vertical-align: 0.05em; color: var(--color-accent); }
.stack__card:nth-child(2) .stack__spark { color: var(--color-ink); }
.stack__text p { max-width: 45ch; font-size: var(--text-lead); color: var(--color-ink-2); }
.stack__when { grid-area: when; display: flex; align-items: flex-end; gap: var(--space-md); font-size: var(--text-lg); font-weight: 600; }
.stack__num { font: 600 clamp(4rem, 9vw, 7rem)/0.78 var(--font-display); letter-spacing: -0.04em; }

/* Rubros: two rows running opposite ways */
.trades { padding-block: var(--section-gap-s) var(--section-gap); overflow: clip; }
.trades__title { font-size: var(--text-title); line-height: 1.05; }
.marquee { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); }
.marquee__row { display: flex; width: max-content; }
.marquee__track { display: flex; flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
.marquee__track li { padding-right: 0.35em; font: 600 var(--text-wall)/1.08 var(--font-display); letter-spacing: var(--tracking-display); white-space: nowrap; }
.marquee__track li::after { content: "/"; margin-left: 0.35em; color: var(--color-accent); }
.marquee__row--outline li { color: var(--color-clear); -webkit-text-stroke: 1.5px var(--color-ink); }
.marquee__row--outline li::after { -webkit-text-stroke: 0; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 52s linear infinite; }
  .marquee__row--outline .marquee__track { animation-duration: 60s; animation-direction: reverse; }
  .marquee:hover .marquee__track, .is-off .marquee__track, .ticker:hover .ticker__track, .is-off .ticker__track { animation-play-state: paused; }
  .ticker__track { animation: marquee 40s linear infinite; }
  html { scroll-behavior: smooth; }
}
@keyframes marquee { to { transform: translateX(-100%); } }

/* Anatomía de una web: the phone puts itself together as the list goes by */
.anatomy { padding-block: var(--section-gap); }
.anatomy__title { font-size: var(--text-section); line-height: 1; letter-spacing: var(--tracking-display); }
.wire { --pad: var(--space-sm); position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; height: 100%; padding: calc(var(--pad) + 7%) var(--pad) var(--pad); border: 9px solid var(--color-ink); border-radius: 18% / 8.6%; background: var(--color-paper); box-shadow: var(--shadow-float); overflow: hidden; }
.wire__sign { align-self: center; padding: 0.35em 0.5em; border: 2px solid var(--color-ink); border-bottom: 4px solid var(--color-accent); font: 600 var(--text-sm)/1.2 var(--font-display); }
.wire__hero { display: grid; gap: var(--space-2xs); }
.wire__img { display: block; aspect-ratio: 16 / 8; border-radius: var(--space-xs); background: var(--color-paper-3); }
.wire__bar { display: block; width: 80%; height: 6px; border-radius: var(--radius-pill); background: var(--color-paper-3); }
.wire__bar--title { width: 64%; height: 10px; background: var(--color-ink-2); }
.wire__bar--short { width: 42%; }
.wire__bar--link { width: 70%; background: var(--color-ink-2); }
.wire__stars { display: flex; align-items: center; gap: var(--space-3xs); color: var(--color-accent); }
.wire__stars .wire__bar { margin-left: var(--space-xs); }
.wire__search { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2xs) var(--space-xs); padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--space-xs); }
.wire__search .wire__bar:last-child { grid-column: 2; }
.wire__lens { grid-row: span 2; width: 14px; height: 14px; border: 2px solid var(--color-ink); border-radius: 50%; }
.wire__map { position: relative; flex: 1 1 0; min-height: 40px; border-radius: var(--space-xs); background: repeating-linear-gradient(0deg, var(--color-paper-2) 0 14px, var(--color-rule) 14px 15px), var(--color-paper-2); }
.wire__pin { position: absolute; left: 34%; top: 28%; width: 16px; height: 16px; border: 3px solid var(--color-ink); border-radius: 50% 50% 50% 0; background: var(--color-accent); rotate: -45deg; }
.wire__maps-link { position: absolute; right: var(--space-2xs); bottom: var(--space-2xs); padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-xs); line-height: 1.6; }
.wire__hours { display: grid; gap: var(--space-2xs); }
.wire__cta { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-xs); margin-top: auto; font-size: var(--text-xs); font-weight: 600; text-align: center; line-height: 2.1; }
.wire__wa { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent); }
.wire__wa .icon { width: 16px; height: 16px; }
.wire__call { border: 1.5px solid var(--color-ink); border-radius: var(--radius-pill); }
.js .wire [data-part] { opacity: 0; transform: translateY(6px) scale(0.97); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .wire [data-part].is-on { opacity: 1; transform: none; }
.anatomy__track { position: relative; }
/* The phone rides a full-screen sticky stage and moves from corner to corner, or side to side on desktop */
.anatomy__stage { position: absolute; inset: 0 var(--gutter); z-index: var(--z-raised); pointer-events: none; }
.anatomy__stick { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); margin: 0; container-type: size; }
.rig { --pw: 200px; --ph: 416px; --s: 0.6; --cx: calc(50cqw - var(--pw) * var(--s) / 2 - var(--space-xs)); --cy: calc(50cqh - var(--ph) * var(--s) / 2 - var(--space-md)); --tx: var(--cx); --ty: 0px; --rx: 6deg; --ry: -20deg; --rz: -3deg; --sx: -30%; position: absolute; left: 50%; top: 50%; width: var(--pw); height: var(--ph); margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2); transform: translate(var(--tx), var(--ty)) scale(var(--s)); transition: transform 0.6s var(--ease-out); }
.rig[data-pose="2"], .rig[data-pose="4"], .rig[data-pose="6"] { --tx: calc(-1 * var(--cx)); --ry: 20deg; --sx: 30%; }
.rig[data-pose="3"], .rig[data-pose="6"] { --rx: -6deg; --rz: 4deg; }
.rig[data-pose="5"] { --rx: 8deg; --rz: -5deg; }
.phone3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); transition: transform 0.6s var(--ease-out); }
.phone3d__slice { position: absolute; inset: 0; border-radius: 18% / 8.6%; background: var(--color-ink-2); transform: translateZ(calc(var(--z) * -1.6px)); }
.phone3d__slice:last-of-type { background: var(--color-ink); }
.phone3d .wire { box-shadow: none; transform: translateZ(0.5px); }
.wire__island { position: absolute; top: 3.4%; left: 34%; width: 32%; height: 4.4%; border-radius: var(--radius-pill); background: var(--color-ink); transform: translateZ(1px); }
.phone3d__sheen { position: absolute; inset: 0; overflow: hidden; border-radius: 18% / 8.6%; transform: translateZ(1.5px); pointer-events: none; }
.phone3d__sheen::before { content: ""; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, var(--color-clear) 40%, var(--color-glint) 50%, var(--color-clear) 60%); transform: translateX(var(--sx)); transition: transform 0.6s var(--ease-out); }
.phone3d__shadow { display: none; }
.anatomy__list { margin: 0; padding: 0; list-style: none; }
.anatomy__list li { display: flex; align-items: center; min-height: 78svh; padding-right: calc(200px * 0.6 + var(--space-lg)); }
.anatomy__list li:nth-child(even) { padding-right: 0; padding-left: calc(200px * 0.6 + var(--space-lg)); }
.anatomy__list li:last-child { min-height: calc(100svh - var(--nav-h)); }
.anatomy__item { display: grid; gap: var(--space-sm); }
.anatomy__item h3 { font-size: var(--text-xl); line-height: 1.15; }
.anatomy__item h3 span { padding: 0 0.12em; background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 500ms var(--ease-out); }
.anatomy__item p { max-width: 36ch; color: var(--color-ink-2); }
.js .anatomy__item { opacity: 0.38; transition: opacity var(--dur-long) var(--ease-out); }
.js li.is-on .anatomy__item { opacity: 1; }
.js li.is-on .anatomy__item h3 span { background-size: 100% 100%; }
.anatomy__end { display: grid; gap: var(--space-md); margin-top: var(--space-2xl); }
.anatomy__price { font-size: var(--text-lead); }
.anatomy__price a { font-weight: 600; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.anatomy__price a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.extras__title { margin-top: var(--space-lg); font-size: var(--text-xl); }
.extras { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; }
.extra { display: grid; align-content: start; gap: var(--space-3xs); padding: var(--space-sm) var(--space-lg); border: 1.5px solid var(--color-ink); }
.extra dt { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; }
.extra__spark { width: 14px; height: 14px; color: var(--color-accent); }
.extra dd { margin: 0; color: var(--color-ink-2); }

/* The phone as a solid: ten slices make its thickness, the screen is the live diagram, a sheen slides as it turns */

/* Sparks: the glint of clean glass */
.spark { display: inline-block; flex-shrink: 0; width: 1em; height: 1em; }
.btn__spark { width: 16px; height: 16px; }
.biz__score { position: relative; display: inline-block; }
.biz__spark { position: absolute; top: -0.08em; right: -0.32em; width: 0.26em; height: 0.26em; color: var(--pd); }
@media (prefers-reduced-motion: no-preference) {
}

/* Contacto: the glow at full heat, the head in two lines that cross */
.contact { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-gap); color: var(--color-ink); }
.contact__title { display: grid; margin: 0 0 var(--space-2xl); padding-inline: var(--gutter); font-size: clamp(2.75rem, 9.6vw, 9.25rem); line-height: 0.96; letter-spacing: var(--tracking-display); }
.contact__line { display: block; }
.contact__line--b { justify-self: end; text-align: right; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.contact__aside { display: grid; align-content: start; justify-items: start; gap: var(--space-md); }
.contact__lead { max-width: 30ch; font-size: var(--text-lead); }
.contact__direct { margin-top: var(--space-md); font-weight: 600; }

.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-frame); background: var(--color-paper); box-shadow: var(--shadow-lift); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.field { display: grid; gap: var(--space-2xs); align-content: start; }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field__opt { color: var(--color-muted); font-weight: 400; }
.input { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: 1.5px solid var(--color-ink-2); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); transition: border-color var(--dur-short) var(--ease-out); }
textarea.input { min-height: 104px; padding: var(--space-sm) var(--space-md); resize: vertical; }
.input::placeholder { color: var(--color-muted); }
.input:hover { border-color: var(--color-ink); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-color: var(--color-ink); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
.select { position: relative; }
.select select { appearance: none; padding-right: var(--space-2xl); cursor: pointer; }
.select::after { content: ""; position: absolute; right: var(--space-md); top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field__help { min-height: 1.4em; font-size: var(--text-sm); color: var(--color-muted); }
.field__help:empty { min-height: 0; }
.field__help.is-error { color: var(--color-error); font-weight: 600; }
.form__end { display: grid; gap: var(--space-md); margin-top: var(--space-xs); }
.form__status { display: grid; gap: var(--space-sm); justify-items: start; }
.form__msg:empty { display: none; }
.form__msg { font-weight: 600; }
.form__msg.is-ok { color: var(--color-success); }
.form__msg.is-error { color: var(--color-error); }

/* Footer: the wordmark set huge and cut by the bottom edge */
.footer { display: flow-root; overflow: clip; padding-top: var(--space-3xl); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding-bottom: var(--space-2xl); }
.footer__line { max-width: 18ch; font: 600 var(--text-2xl)/1.1 var(--font-display); }
.footer__links { display: grid; gap: var(--space-xs); align-content: start; }
.footer a { color: var(--color-on-ink); text-decoration-color: var(--color-rule-dark); }
.footer__links a { font-size: var(--text-md); transition: text-decoration-color var(--dur-short) var(--ease-out); }
.footer__links a:hover { text-decoration-color: var(--color-accent); }
.footer a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.footer__links .icon { display: inline-block; margin-right: var(--space-xs); vertical-align: -0.2em; }
.footer__note { padding-top: var(--space-md); border-top: 1px solid var(--color-rule-dark); font-size: var(--text-sm); color: var(--color-on-ink-2); }
.footer__mark { display: block; width: max-content; max-width: 100%; margin: 0 auto -0.5em; padding-inline: var(--gutter); font: 600 min(21vw, 18rem)/1 var(--font-display); letter-spacing: -0.035em; text-decoration: none; }
.footer__mark span { display: inline-block; padding: 0 0.28em 0.06em; border: 0.03em solid var(--color-on-ink); border-bottom: 0.08em solid var(--color-accent); }
.footer .footer__mark:focus-visible { outline-offset: -0.2em; }

/* Demo pages */
.progress { position: fixed; top: 0; left: 0; right: 0; z-index: calc(var(--z-sticky-nav) + 1); height: 4px; background: var(--pf); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.phero, .need, .next { --color-focus: var(--pi); }
.phero { position: relative; isolation: isolate; overflow: clip; padding-block: var(--space-2xl) var(--space-3xl); color: var(--pi); }
.phero .glow { opacity: calc(1 - var(--p) * 0.5); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-2xl); }
.phero__name { font-size: clamp(3rem, 5.6vw + 0.5rem, 6.25rem); line-height: 0.96; letter-spacing: var(--tracking-display); }
.phero__place { margin-top: var(--space-md); font-size: var(--text-lead); color: var(--pi2); }
.mock { position: relative; margin: 0; padding: 0 14% var(--space-xl) 0; }
.phone--float { position: absolute; right: 0; bottom: 0; width: 25%; translate: 0 calc(var(--p) * -70px); }
.laptop__base { position: relative; height: 14px; margin-inline: -6%; border-radius: 0 0 var(--space-lg) var(--space-lg); background: var(--color-ink-2); box-shadow: var(--shadow-lift); }
.laptop__base::after { content: ""; position: absolute; left: 50%; top: 0; width: 18%; height: 5px; border-radius: 0 0 var(--space-xs) var(--space-xs); background: var(--color-ink); translate: -50% 0; }

.facts { padding-block: var(--space-2xl) var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.facts__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); margin: 0; }
.facts__row div { display: grid; gap: var(--space-2xs); align-content: start; }
.facts__row dt { font-size: var(--text-sm); color: var(--color-muted); }
.facts__row dd { margin: 0; font-weight: 600; }
.facts__row a { text-decoration-color: var(--pf); text-decoration-thickness: 2px; text-underline-offset: 0.25em; white-space: nowrap; }
.facts__row a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.biz { padding-block: var(--section-gap); }
.biz__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: end; }
.biz h2, .need h2, .did__title, .gallery__title, .brings h2, .pcta h2 { font-size: var(--text-section); line-height: 1; letter-spacing: var(--tracking-display); }
.biz__lead { max-width: 46ch; margin-top: var(--space-lg); font-size: var(--text-lead); }
.biz__rating { margin: 0; }
.biz__score { color: var(--pd); font: 600 var(--text-score)/0.82 var(--font-display); letter-spacing: -0.04em; }
.biz__rating figcaption { max-width: 30ch; margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); }

.need { position: relative; isolation: isolate; overflow: clip; padding-block: var(--section-gap); color: var(--pi); }
.need__inner { display: grid; gap: var(--space-xl); }
.need h2 { font-size: var(--text-xl); }
.need__text { max-width: 28ch; font: 600 var(--text-display-s)/1.08 var(--font-display); letter-spacing: -0.015em; }

.did { padding-block: var(--section-gap); }
.did__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl) var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.did__item { display: grid; gap: var(--space-sm); align-content: start; }
.did__shot { margin: 0 0 var(--space-sm); overflow: hidden; border: 1px solid var(--color-rule); border-radius: var(--radius-frame); box-shadow: var(--shadow-float); }
.did__item h3 { font-size: var(--text-xl); line-height: 1.1; }
.did__item p { max-width: 45ch; color: var(--color-ink-2); }

.gallery { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.scrubber { position: relative; height: 125svh; margin-top: var(--space-xl); }
.scrubber__stick { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); display: grid; justify-items: center; }
.screen { position: relative; width: min(100%, 1100px, calc((100svh - var(--nav-h) - var(--space-3xl)) * 1.6)); margin: 0; padding: 1.1%; border-radius: 18px; background: var(--color-ink); box-shadow: var(--shadow-lift); }
.screen::after { top: 1.1%; }
.screen__view { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; }
.screen__shot { display: block; }
.screen__shot img { width: 100%; transform: translateY(calc(var(--p) * var(--travel, 0%))); }
.phones { display: grid; grid-auto-flow: column; grid-auto-columns: min(62%, 240px); gap: var(--space-lg); margin: var(--space-2xl) calc(-1 * var(--gutter)) 0; padding: var(--space-md) var(--gutter) var(--space-xl); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.phones::-webkit-scrollbar { display: none; }
.phones .phone { scroll-snap-align: start; }

.brings { padding-block: var(--section-gap) var(--space-2xl); }
.brings__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.brings__list { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.brings__list li { display: flex; align-items: center; gap: var(--space-sm); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font-size: var(--text-lg); font-weight: 600; }
.check { flex-shrink: 0; color: var(--pd); }

.pcta { padding-block: var(--space-2xl) var(--section-gap); }
.pcta__inner { display: grid; gap: var(--space-xl); }
.pcta h2 { max-width: 16ch; }
.pcta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.next { position: relative; isolation: isolate; display: block; overflow: clip; padding-block: var(--space-3xl) 0; background: var(--pf); color: var(--pi); text-decoration: none; }
.next::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: 0.16; mix-blend-mode: soft-light; }
.next__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-xl); }
.next__text { display: grid; gap: var(--space-sm); }
.next .mini-phone { justify-self: center; width: min(52vw, 220px); rotate: 4deg; margin-bottom: calc(-1 * var(--space-4xl)); transition: rotate var(--dur-long) var(--ease-out); }
.next:hover .mini-phone { rotate: 0deg; }
.next__label { font-size: var(--text-sm); color: var(--pi2); }
.next__name { font: 600 var(--text-wall)/0.98 var(--font-display); letter-spacing: var(--tracking-display); transition: transform var(--dur-long) var(--ease-out); }
.next:hover .next__name { transform: translateX(var(--space-lg)); }
.next__place { font-size: var(--text-lead); color: var(--pi2); }
.next:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -10px; }

/* Entrances, once */
@media (prefers-reduced-motion: no-preference) {
  .js .split .w { animation: word 0.8s var(--ease-out) both; animation-delay: calc(var(--i) * 55ms + 80ms); }
  .js .hero__foot { animation: rise 0.8s var(--ease-out) 0.5s both; }
  .js .hero__phone .phone { animation: rise 1s var(--ease-out) 0.65s both; }
  .js .glass-glint { animation: sweep 1.6s var(--ease-in-out) 1.1s 1 both; }
  .js .phero__text { animation: rise 0.8s var(--ease-out) 0.05s both; }
  .js .mock { animation: rise 1s var(--ease-out) 0.2s both; }
  .btn--glint::after { animation: glint 6.5s var(--ease-in-out) 2.4s infinite; }
}
@keyframes word { from { opacity: 0; transform: translateY(0.5em) rotate(3deg); } }
@keyframes sweep { 0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); } 15% { opacity: 1; } 100% { opacity: 0.6; transform: translateX(520%) skewX(-12deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } }
@keyframes glint { 0% { transform: translateX(-120%); } 16%, 100% { transform: translateX(120%); } }

/* Scroll-linked: one progress value per element, --p, driven by CSS where it can be, by main.js where it cannot */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-scrub] { animation: scrub linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    [data-scrub="exit"] { animation-range: exit 0% exit 100%; }
    [data-scrub="contain"] { animation-range: contain 0% contain 100%; }
    [data-scrub="root"] { animation-timeline: scroll(root); animation-range: normal; }
    .js [data-reveal] { animation: reveal linear both; animation-timeline: view(); animation-range: entry 4% entry 72%; }
    .js .card[data-reveal] { animation-range: entry calc(4% + var(--i) * 10%) entry calc(60% + var(--i) * 10%); }
  }
}
@keyframes scrub { from { --p: 0; } to { --p: 1; } }
@keyframes reveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .contact__line--a { transform: translateX(calc((0.5 - var(--p)) * 18%)); }
  .contact__line--b { transform: translateX(calc((var(--p) - 0.5) * 18%)); }
  .js.no-sda [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-long) var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .js.no-sda [data-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .split .w, .js .hero__foot, .js .hero__phone .phone, .js .glass-glint, .js .phero__text, .js .mock { opacity: 1; transform: none; animation: none; transition: none; }
  .blob, .btn--glint::after, .marquee__track, .ticker__track { animation: none; }
  .glass-glint { display: none; }
  .hero__phone, .phone--float { translate: none; }
  .next .mini-phone { transition: none; }
  .hero .glow, .phero .glow { opacity: 1; }
  .progress { display: none; }
  .scrubber { height: auto; }
  .marquee__row { width: auto; }
  .marquee__row--outline, .marquee__track[aria-hidden="true"], .ticker__track[aria-hidden="true"] { display: none; }
  .ticker { width: auto; }
  .ticker__track { flex-wrap: wrap; }
  .cards { transition: none; }
  .marquee__track { flex-wrap: wrap; padding-inline: var(--gutter); }
  .btn, .btn::before, .next__name, .anatomy__item h3 span, .wire [data-part] { transition: none; }
  .card:hover .card__page img, .next:hover .next__name { transform: none; }
  .card__inner::after { display: none; }
}

@media (max-width: 40rem) {
  .glow--brand .blob--1 { --s: 150%; left: 8%; top: -12%; }
  .glow--brand .blob--2 { --s: 120%; left: -58%; top: 26%; }
  .glow--brand .blob--3 { --s: 110%; left: -20%; top: 52%; }
  .glow--brand .blob--4 { --s: 90%; left: 46%; top: 58%; }
  .glow--hot .blob { --s: 130%; }
  .glow--project .blob { --s: 120%; }
}

/* 40rem and up */
@media (min-width: 40rem) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .contact__line { white-space: nowrap; }
  .form { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-xl); }
  .field--wide { grid-column: 1 / -1; }
  .form__end { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .facts__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .rig { --s: 0.8; }
  .anatomy__list li { padding-right: calc(200px * 0.8 + var(--space-2xl)); }
  .anatomy__list li:nth-child(even) { padding-left: calc(200px * 0.8 + var(--space-2xl)); }
}

/* 60rem and up */
@media (min-width: 60rem) {
  .nav__links { display: flex; gap: var(--space-xl); margin-left: auto; margin-right: var(--space-lg); }
  .hero { padding-inline: var(--space-md); }
  .hero__grid { padding-top: var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "title title" "foot phone"; column-gap: var(--space-2xl); row-gap: var(--space-xl); }
  .hero__title { grid-area: title; }
  .hero__foot { grid-area: foot; align-self: start; padding-bottom: var(--space-2xl); }
  .hero__phone { grid-area: phone; justify-self: end; width: clamp(260px, 25vw, 360px); margin: calc(-1.05 * var(--text-hero)) 4% calc(-1 * var(--space-4xl)) 0; }
  .work { padding-top: var(--section-gap-s); }
  .work__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--gap-columns); }
  /* Bento: the first demo big on the left, the others stacked; the one under the cursor takes more room */
  .cards:not(.cards--rail) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); height: min(46rem, 82svh); gap: var(--space-md); margin-inline: 0; padding-inline: 0; overflow: visible; transition: grid-template-columns 600ms var(--ease-out), grid-template-rows 600ms var(--ease-out); }
  .cards:not(.cards--rail) .card:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .cards:not(.cards--rail):has(.card:nth-child(1):hover, .card:nth-child(1):focus-within) { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 0.86fr); }
  .cards:not(.cards--rail):has(.card:nth-child(2):hover, .card:nth-child(2):focus-within) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr); grid-template-rows: minmax(0, 1.4fr) minmax(0, 0.75fr); }
  .cards:not(.cards--rail):has(.card:nth-child(3):hover, .card:nth-child(3):focus-within) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.5fr); grid-template-rows: minmax(0, 0.75fr) minmax(0, 1.4fr); }
  .cards:not(.cards--rail) .card__inner { container-type: size; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: stretch; column-gap: var(--space-lg); padding: var(--space-lg) var(--space-lg) 0; }
  .cards:not(.cards--rail) .card:first-child .card__inner { padding: var(--space-xl) var(--space-xl) 0; column-gap: var(--space-2xl); }
  .cards:not(.cards--rail) .card__body { padding-bottom: var(--space-lg); }
  .cards:not(.cards--rail) .card__more { margin-top: auto; }
  .cards:not(.cards--rail) .card__inner .mini-phone { order: 2; align-self: start; width: auto; max-width: none; height: min(calc(100cqh + var(--space-xl)), calc(38cqw * 2.108)); aspect-ratio: 1 / 2.108; margin: 0; }
  .cards:not(.cards--rail) .card:first-child .card__inner .mini-phone { height: min(calc(100cqh + var(--space-xl)), calc(46cqw * 2.108)); }
  .cards:not(.cards--rail) .card__body { gap: var(--space-2xs); }
  .cards:not(.cards--rail) .card__name { font-size: var(--text-lg); }
  .cards:not(.cards--rail) .card:first-child .card__name { font-size: var(--text-title); }
  .cards--rail { grid-auto-columns: calc((100% - 2 * var(--gap-columns)) / 3.3); gap: var(--gap-columns); }
  .stack__card { --stack-step: 6.5rem; grid-template-areas: "text when"; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); align-items: start; padding: var(--space-xl); }
  .stack__when { flex-direction: column; align-items: flex-end; text-align: right; }
  .rig { --pw: 260px; --ph: 540px; --s: 1; --ty: 0px; --tx: 25cqw; --rx: 6deg; --ry: -24deg; --rz: -3deg; --sx: -30%; }
  .rig[data-pose] { --ty: 0px; }
  .rig[data-pose="1"], .rig[data-pose="3"], .rig[data-pose="5"], .rig[data-pose="7"] { --tx: 25cqw; --ry: -24deg; --sx: -30%; }
  .rig[data-pose="2"], .rig[data-pose="4"], .rig[data-pose="6"] { --tx: -25cqw; --ry: 24deg; --sx: 30%; }
  .rig[data-pose="3"], .rig[data-pose="6"] { --rx: -6deg; --rz: 4deg; }
  .rig[data-pose="5"] { --rx: 8deg; --rz: -5deg; }
  .phone3d__shadow { display: block; position: absolute; left: 10%; bottom: calc(-1 * var(--space-2xl)); width: 80%; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, var(--color-shadow), var(--color-clear)); }
  .anatomy__list li, .anatomy__list li:nth-child(even) { min-height: 78svh; padding: 0; }
  .anatomy__list li:last-child { min-height: calc(100svh - var(--nav-h)); }
  .anatomy__item { width: 42%; }
  .anatomy__list li:nth-child(even) .anatomy__item { margin-left: auto; }
  .anatomy__item h3 { font-size: var(--text-2xl); }
  .anatomy__item p { font-size: var(--text-lead); }
  .wire { --pad: var(--space-md); gap: var(--space-sm); }
  .wire__sign { font-size: var(--text-lg); }
  .wire__stars svg { width: 16px; height: 16px; }
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
  .extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact__aside { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); align-self: start; }
  .footer__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .footer__note { grid-column: 1 / -1; }
  .phero { padding-block: var(--space-3xl) var(--space-4xl); }
  .phero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .facts__row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .biz__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); }
  .biz__rating { justify-self: end; }
  .did__list { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-3xl); }
  .did__item:nth-child(4n + 1) { grid-column: 1 / span 7; }
  .did__item:nth-child(4n + 2) { grid-column: 8 / span 5; align-self: end; }
  .did__item:nth-child(4n + 3) { grid-column: 1 / span 5; }
  .did__item:nth-child(4n + 4) { grid-column: 6 / span 7; margin-top: var(--space-3xl); }
  .scrubber { height: 240svh; }
  .phones { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); margin-inline: 0; padding-inline: 0; overflow: visible; }
  .phones .phone:nth-child(even) { translate: 0 var(--space-2xl); }
  .brings__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); }
  .pcta__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .pcta__actions { justify-content: flex-end; }
  .next__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .next__text { padding-bottom: var(--space-3xl); }
}

/* Generado por build.mjs desde src/projects.json: no editar a mano */
:root {
  --luzymar-field: oklch(44.5% 0.157 258); --luzymar-ink: oklch(97% 0.01 250); --luzymar-ink2: oklch(88% 0.03 250); --luzymar-accent: oklch(90.6% 0.033 85); --luzymar-accentInk: oklch(30% 0.1 258); --luzymar-deep: oklch(30% 0.1 258);
  --giramundos-field: oklch(74.6% 0.093 187); --giramundos-ink: oklch(19% 0.02 60); --giramundos-ink2: oklch(27% 0.03 190); --giramundos-accent: oklch(89.6% 0.119 89); --giramundos-accentInk: oklch(19% 0.02 60); --giramundos-deep: oklch(42% 0.07 190);
  --bastaplagas-field: oklch(53.9% 0.213 27); --bastaplagas-ink: oklch(98% 0.005 30); --bastaplagas-ink2: oklch(93% 0.02 30); --bastaplagas-accent: oklch(17.8% 0.007 18); --bastaplagas-accentInk: oklch(98% 0.005 30); --bastaplagas-deep: oklch(34% 0.13 25);
}
.p-luzymar { --pf: var(--luzymar-field); --pi: var(--luzymar-ink); --pi2: var(--luzymar-ink2); --pa: var(--luzymar-accent); --pai: var(--luzymar-accentInk); --pd: var(--luzymar-deep); }
.p-giramundos { --pf: var(--giramundos-field); --pi: var(--giramundos-ink); --pi2: var(--giramundos-ink2); --pa: var(--giramundos-accent); --pai: var(--giramundos-accentInk); --pd: var(--giramundos-deep); }
.p-bastaplagas { --pf: var(--bastaplagas-field); --pi: var(--bastaplagas-ink); --pi2: var(--bastaplagas-ink2); --pa: var(--bastaplagas-accent); --pai: var(--bastaplagas-accentInk); --pd: var(--bastaplagas-deep); }