/* Layout: full-height split hero (copy left, live canvas right), then calm editorial sections.
   One signature: the "Amanecer" gradient (fucsia to naranja), used sparingly on CTAs, highlights and the contact band. */
:root {
  --bg: #F4F4F2;
  --surface: #E9E9E5;
  --card: #FFFFFF;
  --fg: #131418;
  --muted: #595B62;
  --line: #D6D6D1;
  --accent: #2D5BFF;
  --accent-2: #2D5BFF;
  --accent-ink: #1E44E0;
  --on-accent: #FFFFFF;
  --grad: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-text: linear-gradient(120deg, #1E44E0 0%, #1E44E0 100%);
  --glow: color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow: 0 30px 80px -40px color-mix(in srgb, var(--fg) 35%, transparent);
  --display: "Funnel Display", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1013; --surface: #18191E; --card: #1F2126; --fg: #EEEEEC; --muted: #A4A7AE; --line: #2C2F36;
    --accent: #4C72FF; --accent-2: #4C72FF; --accent-ink: #9DB1FF; --on-accent: #FFFFFF;
    --grad-text: linear-gradient(120deg, #9DB1FF 0%, #9DB1FF 100%);
    --glow: color-mix(in srgb, var(--accent) 22%, transparent);
    --shadow: 0 30px 80px -40px rgba(0,0,0,.8); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1013; --surface: #18191E; --card: #1F2126; --fg: #EEEEEC; --muted: #A4A7AE; --line: #2C2F36;
  --accent: #4C72FF; --accent-2: #4C72FF; --accent-ink: #9DB1FF; --on-accent: #FFFFFF;
  --grad-text: linear-gradient(120deg, #9DB1FF 0%, #9DB1FF 100%);
  --glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --shadow: 0 30px 80px -40px rgba(0,0,0,.8); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.inner { max-width: 1320px; margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 40; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
  font: 600 16px var(--body); padding: 14px 24px; border-radius: 999px; border: 1.5px solid var(--fg);
  background: transparent; color: var(--fg); transition: transform .25s var(--ease), background-position .5s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn.primary { border-color: transparent; color: var(--on-accent); background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent)) 0 0 / 200% 100%; box-shadow: 0 12px 30px -14px var(--accent); }
.btn.primary:hover { background-position: 100% 0; }
.btn.dark { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn.sm { padding: 10px 18px; font-size: 15px; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .inner { display: flex; align-items: center; gap: 20px; padding-block: 14px; }
.logo { font-family: var(--display); font-weight: 700; font-size: 21px; text-decoration: none; letter-spacing: -.02em; display: inline-flex; gap: 8px; align-items: center; }
.logo i { width: 12px; height: 12px; border-radius: 50%; background: var(--grad); display: inline-block; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 8px 14px; border-radius: 999px; color: var(--muted); transition: color .2s, background .2s; }
.nav a:hover { color: var(--fg); background: var(--surface); }
.nav a[aria-current="true"] { color: var(--fg); }
.nav a[aria-current="true"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.menu-btn { display: none; margin-left: auto; font: 600 15px var(--body); background: transparent; color: var(--fg); border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.top .mobile-nav { display: none; max-width: 1320px; margin-inline: auto; }
@media (max-width: 900px) {
  .nav, .top .btn.sm { display: none; }
  .menu-btn { display: inline-flex; }
  .top .mobile-nav { display: grid; gap: 4px; padding-block: 0 18px; }
  .top .mobile-nav[hidden] { display: none; }
  .mobile-nav a { text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 28px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .mobile-nav .btn { margin-top: 14px; justify-content: center; font-size: 17px; border-bottom: 0; }
}

/* Hero */
.hero { padding-inline: var(--gutter-l) var(--gutter-r); padding-block: clamp(56px, 8vw, 128px) 0; }
.hero-copy { max-width: 1040px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.status { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px var(--glow); }
.hero h1 { font-weight: 600; font-size: clamp(40px, 4.6vw, 92px); line-height: 1.02; letter-spacing: -.035em; }
@media (max-width: 560px) { .hero h1 br { display: none; } }
.hl { position: relative; display: inline-block; }
.hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .14em; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%232D5BFF'/%3E%3Cstop offset='1' stop-color='%232D5BFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 6 C 15 1, 25 9, 38 5 S 62 1, 75 6 S 92 8, 98 4' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hero-sub { font-size: clamp(18px, 1.25vw, 22px); color: var(--muted); max-width: 38ch; line-height: 1.45; text-wrap: balance; }
.hero .ctas { justify-content: center; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.text-link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--line); padding-bottom: 2px; transition: border-color .2s; }
.text-link:hover { border-color: var(--fg); }
.trust { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 14.5px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { width: 16px; height: 16px; flex: none; }
.trust path { fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Live canvas */
.board { max-width: 1320px; margin: clamp(56px, 7vw, 104px) auto 0; position: relative; min-width: 0; isolation: isolate; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.board-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding-inline: 24px; background: var(--card); border-bottom: 1px solid var(--line); flex: none; }
.board-file { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.board-file b { font-weight: 600; font-size: 15px; }
.board-file span { font-family: var(--mono); font-size: 13px; color: var(--muted); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.board-people { display: flex; align-items: center; gap: 14px; flex: none; }
.teams { display: flex; align-items: center; gap: 14px; }
.team { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted); }
.avatars { display: flex; }
.avatars span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 600; border: 2px solid var(--card); }
.avatars span + span { margin-left: -9px; }
.team.client .avatars span { background: var(--fg); color: var(--bg); }
.team.client .avatars span:nth-child(2) { background: var(--muted); }
.team.studio .avatars span { background: var(--grad); color: var(--on-accent); }
.teams .plus { color: var(--muted); font-weight: 600; }
.team.studio .avatars span:last-child { background: var(--fg); color: var(--bg); }
.approve { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.approve i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-size: 10px; }
@media (max-width: 960px) { .team-name { display: none; } }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); background: var(--surface); padding: 6px 12px; border-radius: 999px; }
.board-canvas { aspect-ratio: 16 / 9; position: relative; background: radial-gradient(circle, var(--line) 1.4px, transparent 1.8px) 0 0 / 26px 26px; }
.board-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 960px) {
  .board { border-radius: 20px; }
  .board-bar { padding-inline: 18px; }
  .board-canvas { aspect-ratio: 4 / 3; }
  .board-file span, .live-pill { display: none; }
}
.board .tool-bg { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.board .tool { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.board .tool-on { fill: url(#amanecer); }
.board .tool-txt { fill: var(--fg); font-family: var(--display); font-weight: 700; font-size: 24px; }
.board .sel { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 6; }
.board .handle { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.board .bubble { fill: var(--fg); }
.board .bubble-tx { fill: var(--bg); font-family: var(--body); font-weight: 500; font-size: 19px; }
.board .bubble-who { fill: var(--accent); font-family: var(--body); font-weight: 700; font-size: 19px; }
.stop-a { stop-color: var(--accent); }
.stop-b { stop-color: var(--accent-2); }
.piece { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.3,1.7,.5,1), opacity .3s ease; opacity: 0; transform: scale(.2) rotate(-20deg); }
.piece.on { opacity: 1; transform: none; }
.p-grad { fill: url(#amanecer); }
.p-ink { fill: var(--fg); }
.p-paper { fill: var(--card); stroke: var(--fg); stroke-width: 2.5; }
.p-line { fill: none; stroke: var(--fg); stroke-width: 10; stroke-linecap: round; }
.p-txt { fill: var(--fg); font-family: var(--display); font-weight: 700; }
.p-txt-inv { fill: var(--bg); font-family: var(--display); font-weight: 700; }
.cur-you .arrow { fill: var(--fg); stroke: var(--card); stroke-width: 2; }
.cur-you .tag-bg { fill: var(--fg); }
.cur-you .tag-tx { fill: var(--bg); }
.cur-me .arrow { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.cur-me .tag-bg { fill: url(#amanecer); }
.cur-me .tag-tx { fill: var(--on-accent); }
.tag-tx { font-family: var(--body); font-weight: 600; font-size: 17px; }

/* Sections */
section.block { padding-block: clamp(80px, 10vw, 128px); }
.head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 52px; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-ink); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); }
.head h2 { font-size: clamp(38px, 5.4vw, 72px); font-weight: 650; line-height: 1.02; letter-spacing: -.02em; }
.head p { color: var(--muted); max-width: 56ch; font-size: 18px; }
.note { align-self: flex-start; background: var(--card); border: 1px dashed var(--line); padding: 4px 10px; border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.reveal { transition: transform .8s var(--ease); }
.js-motion .reveal:not(.in) { transform: translateY(24px); }

/* Projects */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.grid .card:nth-child(even) { margin-top: 96px; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } .grid .card:nth-child(even) { margin-top: 0; } }
.card { text-decoration: none; display: flex; flex-direction: column; gap: 16px; }
.cover { aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--radius); overflow: hidden; position: relative; display: grid; place-items: center; transition: border-radius .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover .cover { border-radius: 36px; box-shadow: var(--shadow); }
.cover .slot { position: absolute; left: 16px; bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .75; }
.cover .view { position: absolute; right: 16px; top: 16px; background: var(--card); color: var(--fg); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s var(--ease); }
.card:hover .view, .card:focus-visible .view { opacity: 1; transform: none; }
.c1 { background: var(--grad); color: var(--on-accent); }
.c2 { background: var(--fg); color: var(--bg); }
.c3 { background: var(--surface); color: var(--fg); }
.c4 { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.art-type { font-family: var(--display); font-weight: 700; font-size: clamp(80px, 12vw, 170px); line-height: 1; letter-spacing: -.02em; display: inline-block; }
.art-dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 46%; }
.art-dots i { aspect-ratio: 1; border-radius: 8px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.art-dots i:nth-child(3n+2) { background: var(--grad); border-radius: 50%; }
.art-squiggle { width: 70%; }
.art-squiggle path { fill: none; stroke: url(#amanecer-h); stroke-width: 14; stroke-linecap: round; }
.meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.meta h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); flex-shrink: 0; }
[data-speed] { will-change: transform; }

/* Services */
.services { border-top: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 16px 48px; align-items: center; padding-block: 30px; border-bottom: 1px solid var(--line); }
.svc h3 { font-size: clamp(32px, 3.6vw, 54px); font-weight: 600; line-height: 1; letter-spacing: -.02em; transition: transform .4s var(--ease), color .3s; }
.svc:hover h3 { transform: translateX(10px); }
.svc .desc { display: flex; flex-direction: column; gap: 12px; }
.svc .desc p { font-size: 17px; color: var(--muted); max-width: 42ch; }
.svc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc li { font-size: 13px; color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 4px 11px; border-radius: 999px; }
.svc .go { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 20px; transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease); }
a.svc:hover .go { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: rotate(-45deg); }
@media (max-width: 760px) { .svc { grid-template-columns: minmax(0, 1fr) auto; } .svc .desc { grid-column: 1 / -1; grid-row: 2; } .svc .go { width: 44px; height: 44px; } }
.pack { position: relative; overflow: hidden; margin-top: 44px; background: var(--fg); color: var(--bg); border-radius: 28px; padding: clamp(28px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; justify-content: space-between; }
.pack::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -260px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent); pointer-events: none; }
.pack > * { position: relative; }
.pack h3 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 650; line-height: 1; letter-spacing: -.02em; }
.pack h3 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pack p { max-width: 44ch; color: color-mix(in srgb, var(--bg) 75%, var(--fg)); margin-top: 12px; }

/* Thinking path */
.think { background: var(--surface); }
.path-box svg { width: 100%; height: auto; display: block; overflow: visible; }
.path-box .route { fill: none; stroke: var(--fg); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.path-box .node { fill: var(--bg); stroke: var(--fg); stroke-width: 2.5; }
.path-box .node.end { fill: url(#amanecer-path); stroke: none; }
.path-box text { fill: var(--fg); font-family: var(--display); font-weight: 600; }
.path-box text.small { fill: var(--muted); font-family: var(--mono); font-weight: 400; letter-spacing: .05em; }
.path-box .runner { fill: var(--accent); }
.path-box .p-mobile { display: none; }
@media (max-width: 700px) { .path-box .p-desktop { display: none; } .path-box .p-mobile { display: block; max-width: 420px; margin-inline: auto; } }

/* Process */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.step { display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.step .n { font-family: var(--display); font-weight: 700; font-size: 56px; line-height: 1; align-self: flex-start; }
.step h3 { font-size: 26px; font-weight: 650; }
.step p { color: var(--muted); max-width: 38ch; }

/* Contact */
.cta { background: var(--grad); color: var(--on-accent); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; width: 900px; height: 900px; left: -300px; bottom: -520px; background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent); pointer-events: none; }
.cta .inner { position: relative; padding-block: clamp(80px, 10vw, 120px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 40px 64px; align-items: start; }
@media (max-width: 960px) { .cta .inner { grid-template-columns: 1fr; } }
.cta-copy { display: flex; flex-direction: column; gap: 20px; }
.cta-copy .eyebrow { color: var(--on-accent); }
.cta-copy .eyebrow::before { background: var(--on-accent); }
.cta h2 { font-size: clamp(44px, 6.4vw, 96px); font-weight: 650; line-height: .98; letter-spacing: -.025em; }
.cta p { font-size: 19px; max-width: 34ch; }
.cta :focus-visible { outline-color: var(--on-accent); }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.mail { font-family: var(--mono); font-size: 15px; }
.copy-btn { font: 600 13px var(--body); background: transparent; color: var(--on-accent); border: 1.5px solid var(--on-accent); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.apply { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; background: rgba(255,255,255,.22); border: 1px solid rgba(19,20,24,.2); border-radius: 28px; padding: clamp(20px, 3vw, 36px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (max-width: 700px) { .apply { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field.full { grid-column: 1 / -1; }
.field > label, .field legend { font-weight: 600; font-size: 15px; padding: 0; }
.field legend { margin-bottom: 10px; }
.apply input[type="text"], .apply input[type="email"], .apply select, .apply textarea {
  font: inherit; font-size: 17px; color: #131418; width: 100%; background: #FFFFFF;
  border: 1.5px solid transparent; border-radius: 12px; padding: 13px 15px; transition: border-color .2s, background .2s;
}
.apply input:focus, .apply select:focus, .apply textarea:focus { background: #FFFFFF; border-color: #131418; outline: none; }
.apply textarea { resize: vertical; min-height: 120px; }
.apply ::placeholder { color: #75777D; }
.apply option { color: #131418; background: #FFFFFF; }
.apply [aria-invalid="true"] { border-color: #131418; border-style: dashed; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip { background: transparent; color: #131418; border: 1.5px solid rgba(19,20,24,.55); border-radius: 999px; padding: 10px 18px; cursor: pointer; font: 500 16px var(--body); transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: #131418; background: rgba(255,255,255,.25); }
.chip-in:checked + .chip::before { content: "✓ "; }
.chip-in:checked + .chip { background: #131418; color: #FFFFFF; border-color: #131418; }
.chip-in:focus-visible + .chip { outline: 3px solid var(--on-accent); outline-offset: 3px; }
.submit-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px; }
.cta .btn.dark { background: #131418; color: #FFFFFF; border-color: #131418; }
.form-msg { font-weight: 600; font-size: 15px; max-width: 46ch; }

/* Footer */
footer .inner { padding-block: 56px 36px; display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
footer .tagline { color: var(--muted); margin-top: 10px; max-width: 32ch; }
footer h4 { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer ul a { text-decoration: none; }
footer ul a:hover { color: var(--accent-ink); }
.legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px solid var(--line); padding-top: 22px; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { footer .inner { grid-template-columns: 1fr 1fr; } footer .brand-col { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Service pages */
a.svc { color: inherit; text-decoration: none; }
.svc .more { font-weight: 600; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
.svc .more span { transition: transform .25s var(--ease); }
a.svc:hover .more span { transform: translateX(4px); }
a.svc:hover h3 { color: var(--accent-ink); }
.crumb { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--fg); }
.svc-hero { padding-block: clamp(48px, 8vw, 112px) clamp(40px, 6vw, 80px); }
.svc-hero .inner { display: flex; flex-direction: column; gap: 22px; }
.svc-hero h1 { font-size: clamp(60px, 10vw, 160px); font-weight: 600; line-height: .95; letter-spacing: -.035em; }
.svc-hero .lead { font-size: clamp(19px, 1.6vw, 24px); max-width: 38ch; line-height: 1.45; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 14.5px; }
.fact b { font-weight: 600; }
.svc-hero .ctas { margin-top: 10px; }
.incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .incl { grid-template-columns: 1fr; } }
.inc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.inc i { width: 14px; height: 14px; border-radius: 50%; background: var(--grad); }
.inc h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.inc p { color: var(--muted); font-size: 16px; }
.extras { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 28px; }
.extras span:first-child { font-weight: 600; margin-right: 6px; }
.extras .x { font-size: 14px; border: 1px dashed var(--line); border-radius: 999px; padding: 5px 12px; color: var(--muted); }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .timeline { grid-template-columns: 1fr; } }
.tl { border-top: 2px solid var(--fg); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.tl .when { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.tl h3 { font-size: 22px; font-weight: 600; }
.tl p { color: var(--muted); font-size: 16px; }
.note-small { color: var(--muted); font-size: 14px; margin-top: 18px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 650; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 22px; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: baseline; font-size: 18px; }
.checks li::before { content: "✓"; color: var(--accent-ink); font-weight: 700; }
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin-top: 10px; }
.others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .others { grid-template-columns: 1fr; } }
.other { text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: border-color .25s, transform .25s var(--ease); }
.other:hover { border-color: var(--fg); transform: translateY(-3px); }
.other h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 650; letter-spacing: -.02em; }
.other p { color: var(--muted); margin-top: 6px; }
.other .go-arrow { font-size: 26px; }
.cta-simple { background: var(--grad); color: var(--on-accent); }
.cta-simple .inner { padding-block: clamp(72px, 9vw, 112px); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.cta-simple h2 { font-size: clamp(40px, 6vw, 88px); font-weight: 650; line-height: 1; letter-spacing: -.025em; max-width: 14ch; }
.cta-simple p { font-size: 19px; max-width: 40ch; }
.cta-simple .btn.dark { background: #131418; color: #FFFFFF; border-color: #131418; }
/* Home: contact band now points to the cotizador */
.cz-preview { background: rgba(255,255,255,.22); border: 1px solid rgba(19,20,24,.2); border-radius: 28px; padding: clamp(22px, 3vw, 36px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; gap: 10px; }
.cz-preview ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.cz-preview li { counter-increment: s; list-style: none; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.7); color: #131418; border-radius: 14px; padding: 14px 16px; font-weight: 600; font-size: 17px; }
.cz-preview li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: #131418; color: #FFFFFF; display: grid; place-items: center; font-size: 14px; flex: none; }
.cz-preview .time { font-size: 14px; font-weight: 600; text-align: right; }
.cz-preview li a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 14px; width: 100%; }
.cz-preview .time { color: #131418; }

/* Minimal color: neutrals plus one accent, no two-tone gradient */
:root { --accent-2: #2D5BFF; --grad-text: linear-gradient(120deg, var(--accent-ink), var(--accent-ink)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-2: #4C72FF; --grad-text: linear-gradient(120deg, var(--accent-ink), var(--accent-ink)); } }
:root[data-theme="dark"] { --accent-2: #4C72FF; --grad-text: linear-gradient(120deg, var(--accent-ink), var(--accent-ink)); }

/* Quote bands in ink instead of a full color field */
.cta, .cta-simple { background: var(--fg); color: var(--bg); }
.cta::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
.cta-copy .eyebrow { color: var(--bg); }
.cta-copy .eyebrow::before { background: var(--accent); }
.cta :focus-visible, .cta-simple :focus-visible { outline-color: var(--accent); }
.copy-btn { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.cta .btn.dark, .cta-simple .btn.dark { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.cz-preview { background: color-mix(in srgb, var(--bg) 5%, transparent); border-color: color-mix(in srgb, var(--bg) 14%, transparent); }
.cz-preview li { background: color-mix(in srgb, var(--bg) 8%, transparent); color: var(--bg); }
.cz-preview li::before { background: var(--accent); color: #FFFFFF; }
.cz-preview .time { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.bd-chip:nth-child(3) { --c: var(--card); }

/* Minimal pass: hairlines instead of shadows, accent only where you act, more air */
:root { --shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: none; } }
:root[data-theme="dark"] { --shadow: none; }
.btn.primary { box-shadow: none; }
.eyebrow { color: var(--muted); }
.eyebrow::before { display: none; }
.nav a[aria-current="true"]::before { background: var(--fg); }
section.block { padding-block: clamp(96px, 12vw, 168px); }
.head { margin-bottom: clamp(40px, 5vw, 64px); }
.head h2, .cta h2 { font-size: clamp(34px, 4.2vw, 58px); font-weight: 600; letter-spacing: -.025em; line-height: 1.04; }
.c1 { background: var(--surface); color: var(--fg); }
.art-dots i:nth-child(3n+2) { background: var(--fg); }
.c2 .art-dots i:nth-child(3n+2) { background: var(--bg); }
.art-squiggle path { stroke: var(--fg); }
.step { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0 0; }
.step .n { font-size: 14px; font-family: var(--mono); font-weight: 500; color: var(--muted); }
.pack::before, .cta::before { display: none; }
.pack h3 span { background: none; color: inherit; }
.cta .inner { grid-template-columns: 1fr; }
.board-file b { font-size: 14px; }
.team.studio .avatars span { background: var(--fg); color: var(--bg); }
.board .sel, .board .handle { stroke: var(--fg); }
.cur-me .arrow { fill: var(--fg); }
.cur-me .tag-bg { fill: var(--fg); }
.cur-me .tag-tx { fill: var(--bg); }
.board .bubble-who { fill: var(--bg); }
footer .inner.foot1 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.foot1 nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot1 nav a { text-decoration: none; }
.foot1 nav a:hover { color: var(--fg); }
.foot1 .logo { color: var(--fg); }
.art-name { font-size: clamp(44px, 6.4vw, 104px); letter-spacing: -.035em; }

/* Real screenshots */
.shotimg { background: var(--surface); }
.shotimg img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cs-cover.shotimg { aspect-ratio: 16 / 10; }
.g-phone { background: var(--surface); padding: 6% 0; }
.g-phone img { height: 100%; width: auto; max-width: 70%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border: 6px solid var(--fg); border-radius: 28px; display: block; }
.cover.cimg { background: var(--surface); }
.cover.cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.card:hover .cover.cimg img { transform: scale(1.03); }
.cover.cimg .view { z-index: 1; }

/* GROULI logo, light and dark */
.logo-img { height: 22px; width: auto; display: block; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-img { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
:root[data-theme="dark"] .logo-img { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.foot1 .logo-img { height: 20px; }
.lr-link img { height: 34px; width: auto; border-radius: 4px; background: #FFFFFF; }

/* Recognitions */
.recog { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.recog .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.recog img { height: 44px; width: auto; border-radius: 8px; filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s; }
.recog img:hover { filter: none; opacity: 1; }
.recog-strip { padding-block: 32px 0; }
.recog-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .recog-cards { grid-template-columns: 1fr; } }
.recog-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; background: var(--card); }
.recog-card img { height: 56px; width: auto; align-self: flex-start; border-radius: 8px; }
.recog-card p { color: var(--muted); }

/* Footer v2 and recognitions strip (shared by every page) */
footer .inner.foot2 { display: flex; flex-direction: column; gap: 28px; padding-block: 48px 32px; border-top: 0; color: var(--muted); font-size: 14px; }
.foot2 a { text-decoration: none; color: inherit; transition: color .2s; }
.foot2 a:hover { color: var(--fg); }
.f-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.f-top nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.f-top .logo-img { height: 20px; }
.f-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.f-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.foot2 .lr-link { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 5px 14px 5px 5px; background: var(--card); color: var(--fg); font-weight: 500; }
.foot2 .lr-link img { height: 32px; width: auto; border-radius: 7px; background: #FFFFFF; display: block; }
.foot2 .lr-link:hover { border-color: var(--fg); }
.recog-strip { max-width: 1320px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 48px; }
.recog-strip img { height: 40px; width: auto; border-radius: 0; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; }
.recog-strip img:hover { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .recog-strip img { mix-blend-mode: normal; border-radius: 8px; } }
:root[data-theme="dark"] .recog-strip img { mix-blend-mode: normal; border-radius: 8px; }
.recog-card img { mix-blend-mode: multiply; }

.recog-strip .rg { display: inline-flex; align-items: center; gap: 16px; }
.recog-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

/* Recognition dialogs */
.recog-btn { background: none; border: 0; padding: 4px; margin: 0; cursor: pointer; border-radius: 10px; display: inline-flex; transition: transform .25s var(--ease); }
.recog-btn:hover { transform: translateY(-2px); }
.recog-btn:hover img { filter: none; opacity: 1; }
button.recog-card { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; transition: border-color .25s, transform .25s var(--ease); }
button.recog-card:hover { border-color: var(--fg); transform: translateY(-3px); }
.recog-card .more { font-weight: 600; font-size: 15px; color: var(--accent-ink); }
dialog.rdlg { border: 0; padding: 32px 28px 28px; border-radius: 24px; width: min(420px, calc(100vw - 32px)); background: var(--card); color: var(--fg); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); text-align: center; overflow: hidden; }
dialog.rdlg[open] { animation: dlgIn .45s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 12px; }
dialog.rdlg::backdrop { background: rgba(12,12,14,.45); backdrop-filter: blur(4px); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.rdlg-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer; }
.rdlg-x:hover { border-color: var(--fg); }
.rdlg-logo { height: 52px; width: auto; }
.rdlg h3 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin-top: 4px; }
.rdlg-sub { color: var(--muted); font-size: 15.5px; max-width: 30ch; }
.rdlg-stat { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px; margin: 6px 0 2px; }
.rdlg-stat b { font-family: var(--display); font-weight: 650; font-size: 56px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rdlg-stat span { font-family: var(--display); font-weight: 650; font-size: 40px; color: var(--accent-ink); }
.rdlg-stat small { flex-basis: 100%; color: var(--muted); font-size: 14px; margin-top: 4px; }
.rdlg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 320px; }
.rdlg-chips i { font-style: normal; font-weight: 600; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--surface); }
.rdlg[open] .rdlg-chips i { animation: chipPop .5s var(--ease) both; }
.rdlg-chips i:nth-child(1) { animation-delay: .35s; } .rdlg-chips i:nth-child(2) { animation-delay: .45s; } .rdlg-chips i:nth-child(3) { animation-delay: .55s; }
.rdlg-chips i:nth-child(4) { animation-delay: .65s; } .rdlg-chips i:nth-child(5) { animation-delay: .75s; } .rdlg-chips i:nth-child(6) { animation-delay: .85s; }
@keyframes chipPop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.rdlg-steps { list-style: none; margin: 10px 0 4px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.rdlg-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px; background: var(--line); }
.rdlg-steps::after { content: ""; position: absolute; left: 12.5%; top: 9px; height: 2px; width: 0; background: var(--accent); }
.rdlg[open] .rdlg-steps::after { animation: stepLine 1.6s var(--ease) .3s forwards; }
@keyframes stepLine { to { width: 75%; } }
.rdlg-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rdlg-steps li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); position: relative; z-index: 1; }
.rdlg[open] .rdlg-steps li::before { animation: stepDot .3s var(--ease) forwards; }
.rdlg[open] .rdlg-steps li { animation: stepTxt .3s var(--ease) forwards; }
.rdlg-steps li:nth-child(1), .rdlg-steps li:nth-child(1)::before { animation-delay: .3s !important; }
.rdlg-steps li:nth-child(2), .rdlg-steps li:nth-child(2)::before { animation-delay: .8s !important; }
.rdlg-steps li:nth-child(3), .rdlg-steps li:nth-child(3)::before { animation-delay: 1.3s !important; }
.rdlg-steps li:nth-child(4), .rdlg-steps li:nth-child(4)::before { animation-delay: 1.8s !important; }
@keyframes stepDot { to { background: var(--accent); border-color: var(--accent); } }
@keyframes stepTxt { to { color: var(--fg); } }
.rdlg-foot { font-size: 15px; color: var(--muted); max-width: 32ch; }
.rdlg-foot strong { color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  dialog.rdlg[open], .rdlg[open] .rdlg-chips i { animation: none; }
  .rdlg-steps::after { width: 75%; animation: none !important; }
  .rdlg-steps li::before { background: var(--accent); border-color: var(--accent); animation: none !important; }
  .rdlg-steps li { color: var(--fg); animation: none !important; }
}

/* Costa 21: timeline and photo collage */
.cl-timeline { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.cl-timeline::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px; background: var(--line); }
.cl-timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-weight: 600; font-size: clamp(13px, 1.3vw, 17px); }
.cl-timeline li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); position: relative; z-index: 1; }
.cl-timeline li:last-child::before { background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.collage { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 16vw, 230px); gap: 12px; }
.cl-item { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.cl-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.cl-item:hover img { transform: scale(1.04); }
.cl-item figcaption { position: absolute; left: 10px; bottom: 10px; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--fg); }
.cl-item.empty img { display: none; }
.cl-item.empty::after { content: "Foto: " attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cl-item.empty figcaption { display: none; }
.cl-v { grid-row: span 2; }
.cl-h { grid-column: span 2; }
.cl-s { grid-column: span 1; }
.cl-b { grid-column: span 2; grid-row: span 2; }
.cover-fb img, .cover.cimg.fb img { object-position: 50% 45%; }
.cs-cover.cover-fb { aspect-ratio: 16 / 8; overflow: hidden; position: relative; }
.cs-cover.cover-fb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Costa 21: video pair */
.cs-vids { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 16px; justify-content: center; }
.cs-vid { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-vid video, .cs-vid iframe, .yt-facade { width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: block; object-fit: cover; }
.cs-vid iframe { border: 0; }
.cs-vid figcaption { font-size: 14px; color: var(--muted); text-align: center; }
.cs-vid figcaption a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.yt-facade { position: relative; cursor: pointer; padding: 0; background-size: cover; background-position: center; overflow: hidden; color: #fff; font: inherit; }
.yt-facade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15) 55%); }
.yt-facade b { position: absolute; left: 18px; right: 18px; bottom: 18px; font-family: var(--display); font-size: 22px; font-weight: 650; text-align: left; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--accent); transition: transform .3s var(--ease); }
.yt-play::after { content: ""; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { transform: scale(1.08); }
@media (max-width: 760px) { .cs-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .yt-facade b { font-size: 16px; left: 12px; bottom: 12px; } }
@media (max-width: 760px) { .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-timeline li { font-size: 12px; } }
.cover-fb.empty img { display: none; }
.cover-fb.empty { background: var(--fg); color: var(--bg); display: grid; place-items: center; }
.cover-fb.empty::after { content: attr(data-label); font-family: var(--display); font-weight: 650; font-size: clamp(48px, 9vw, 150px); letter-spacing: -.04em; }
.cover.cimg.fb.empty { background: var(--fg); }
.cover.cimg.fb.empty img { display: none; }
.cover.cimg.fb.empty::after { content: attr(data-label); color: var(--bg); font-family: var(--display); font-weight: 650; font-size: clamp(44px, 6.4vw, 104px); letter-spacing: -.035em; }
.brief-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.brief-band h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.brief-band p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
/* Contact band: full-width studio map */
.map-band { position: relative; overflow: hidden; background: #0B0D14; height: clamp(420px, 42vw, 600px); }
.map-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; }
/* the drawn map only shows while Google loads, in the same black and white, then Google fades in */
.map-band-img { filter: grayscale(1) brightness(.62) contrast(1.15); }
.map-band-gmap { opacity: 0; transition: opacity .8s var(--ease); }
.map-band-gmap.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .map-band-gmap { transition: none; } }
.map-band-gmap { position: absolute; left: 0; right: 0; bottom: 0; top: -160px; width: 100%; height: calc(100% + 160px); border: 0; filter: grayscale(1) invert(.92) contrast(.92) brightness(.95); }
.map-pin { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; animation: mapPulse 2.4s ease-out infinite; }
@keyframes mapPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 26px transparent; } }
@media (prefers-reduced-motion: reduce) { .map-pin { animation: none; box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); } }
.map-band-wrap { position: relative; height: 100%; display: flex; align-items: center; pointer-events: none; }
.map-band-wrap .inner { width: 100%; }
.map-card { pointer-events: auto; max-width: 340px; display: grid; gap: 6px; padding: 26px 28px; border-radius: 20px; background: rgba(11,13,20,.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.1); color: #fff; }
.map-card .eyebrow { color: #9DB1FF; }
.map-card .eyebrow::before { background: #9DB1FF; }
.map-card b { font-family: var(--display); font-weight: 650; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.025em; line-height: 1.05; }
.map-card > span:not(.eyebrow) { font-size: 16px; color: #C9D2EC; line-height: 1.5; }
.map-card a { margin-top: 10px; justify-self: start; font-weight: 600; font-size: 15px; color: #9DB1FF; text-decoration: underline; text-underline-offset: 3px; }
.map-card a:hover { color: #fff; }
.map-card a:focus-visible { outline: 2px solid #9DB1FF; outline-offset: 3px; }
.map-credit { position: absolute; right: 12px; bottom: 8px; font-size: 10px; color: rgba(255,255,255,.45); }
@media (max-width: 640px) {
  .map-band { height: 600px; }
  .map-band-wrap { align-items: flex-end; padding-bottom: 64px; }
  .map-card { max-width: none; }
}
/* Home: smaller works under the featured cases */
.more-works { margin-top: clamp(56px, 7vw, 96px); }
.mw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.mini { display: grid; gap: 12px; text-decoration: none; color: inherit; }
.mini-cover { display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.mini-cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s var(--ease); }
.mini:hover .mini-cover img, .mini:focus-visible .mini-cover img { transform: scale(1.04); }
.mini-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mini-meta b { font-weight: 600; font-size: 16px; line-height: 1.3; }
.mini-meta small { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 14px; }
@media (max-width: 860px) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hero: real-work reel (data-hero="reel") or the original canvas animation (data-hero="canvas") */
.board-reel { display: none; position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.board-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.board[data-hero="reel"] .board-reel { display: block; }
.board[data-hero="reel"] .board-canvas { display: none; }
@media (max-width: 640px) { .board-reel { aspect-ratio: 4 / 3; } }
/* Bold style (data-style="bold" on <html>, set in _fuente/seo.py). Everything here is off in classic. */
.h-clip, .side-word, .scroll-band { display: none; }
[data-style="bold"] .h-clip { display: inline-block; position: relative; width: 1.7em; height: .74em; margin: 0 .04em; border-radius: 999px; overflow: hidden; vertical-align: .02em; background: var(--surface); }
[data-style="bold"] .h-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
[data-style="bold"] .has-side { position: relative; }
[data-style="bold"] .side-word { display: block; position: absolute; left: var(--gutter-l); top: clamp(48px, 6vw, 96px); writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-weight: 700; font-size: clamp(72px, 8.4vw, 150px); line-height: .82; letter-spacing: -.03em; text-transform: uppercase; color: var(--accent); pointer-events: none; user-select: none; }
[data-style="bold"] .has-side > .inner { padding-left: clamp(84px, 9vw, 168px); }
[data-style="bold"] .scroll-band { display: block; overflow: hidden; padding: clamp(32px, 5vw, 72px) 0; }
[data-style="bold"] .sb-line { white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(56px, 9vw, 150px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; will-change: transform; }
[data-style="bold"] .sb-fill { color: var(--fg); }
[data-style="bold"] .sb-stroke { color: transparent; -webkit-text-stroke: 1.5px var(--fg); transform: translate3d(-30%, 0, 0); }
@media (max-width: 860px) {
  [data-style="bold"] .side-word { display: none; }
  [data-style="bold"] .has-side > .inner { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .sb-stroke { transform: none; } }
@media (max-width: 560px) { [data-style="bold"] .hero h1 .h-clip { display: none; } }
/* Bold style: BBDO-like header (logo corner + hamburger, full-screen menu) on every page */
[data-style="bold"] .top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-style="bold"] .top .nav, [data-style="bold"] .top .inner > .btn { display: none; }
[data-style="bold"] .menu-btn { display: inline-flex; position: relative; width: 46px; height: 46px; padding: 0; margin-left: auto; border: 0; border-radius: 50%; font-size: 0; color: var(--fg); background: transparent; z-index: 32; }
[data-style="bold"] .menu-btn::before, [data-style="bold"] .menu-btn::after { content: ""; position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), top .35s var(--ease); }
[data-style="bold"] .menu-btn::before { top: 15px; box-shadow: 0 7px 0 currentColor; }
[data-style="bold"] .menu-btn::after { top: 29px; }
[data-style="bold"] .menu-btn[aria-expanded="true"]::before { top: 22px; box-shadow: none; transform: rotate(45deg); }
[data-style="bold"] .menu-btn[aria-expanded="true"]::after { top: 22px; transform: rotate(-45deg); }
[data-style="bold"] .menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[data-style="bold"] .top .logo { position: relative; z-index: 32; }
[data-style="bold"] .top .mobile-nav { display: flex; flex-direction: column; justify-content: center; gap: 0; position: fixed; inset: 0; z-index: 31; max-width: none; margin: 0; padding: 96px var(--gutter-r) 48px var(--gutter-l); background: var(--accent); color: #fff; }
[data-style="bold"] .top .mobile-nav[hidden] { display: none; }
[data-style="bold"] .mobile-nav a { color: #fff; border: 0; padding: 4px 0; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 8vw, 120px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; text-decoration: none; transition: opacity .2s, transform .3s var(--ease); }
[data-style="bold"] .mobile-nav a:hover { transform: translateX(10px); }
[data-style="bold"] .mobile-nav .btn { align-self: flex-start; margin-top: 36px; font-size: 18px; text-transform: none; letter-spacing: 0; background: #fff; color: var(--accent-ink); border-color: #fff; box-shadow: none; }
[data-style="bold"] .top:has(.mobile-nav:not([hidden])) .menu-btn { color: #fff; }
[data-style="bold"] .top:has(.mobile-nav:not([hidden])) .logo-img { display: none; }
[data-style="bold"] .top:has(.mobile-nav:not([hidden])) .logo-dark { display: block; }
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .menu-btn::before, [data-style="bold"] .menu-btn::after, [data-style="bold"] .mobile-nav a { transition: none; } }

/* Bold style: home hero is a full-screen video, the header floats on it until you scroll past */
.hero-bg { display: none; }
[data-style="bold"] .top.on-video { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; transition: background .3s, border-color .3s; }
[data-style="bold"] .top.on-video.past-hero { background: var(--bg); border-bottom-color: var(--line); }
[data-style="bold"] .top.on-video:not(.past-hero) .menu-btn { color: #fff; }
[data-style="bold"] .top.on-video:not(.past-hero) .logo-img { display: none; }
[data-style="bold"] .top.on-video:not(.past-hero) .logo-dark { display: block; }
[data-style="bold"] .hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 0; display: flex; align-items: flex-end; overflow: hidden; background: #0d0e12; isolation: isolate; }
[data-style="bold"] .hero-bg { display: block; position: absolute; inset: 0; z-index: -1; }
[data-style="bold"] .hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-style="bold"] .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,11,15,.88) 0%, rgba(10,11,15,.35) 45%, rgba(10,11,15,.15) 70%, rgba(10,11,15,.45) 100%); }
[data-style="bold"] .hero .board { display: none; }
[data-style="bold"] .hero-copy { max-width: none; width: 100%; margin: 0; align-items: flex-start; text-align: left; gap: 18px; padding: 0 var(--gutter-r) clamp(48px, 8vh, 96px) var(--gutter-l); color: #fff; }
[data-style="bold"] .hero h1 { font-size: clamp(48px, 7.2vw, 132px); line-height: .96; font-weight: 650; letter-spacing: -.04em; color: #fff; }
[data-style="bold"] .hero h1 .grad-text { color: #8FA6FF; -webkit-text-fill-color: #8FA6FF; background: none; }
[data-style="bold"] .hero-sub { color: rgba(255,255,255,.82); max-width: 44ch; text-wrap: pretty; }
[data-style="bold"] .h-clip { border: 1px solid rgba(255,255,255,.25); }
@media (max-width: 560px) {
  [data-style="bold"] .hero h1 { font-size: 48px; }
  [data-style="bold"] .hero-copy { padding-bottom: 40px; }
}
/* Bold hero fixes: align with the logo, readable recognitions on video, menu button padding */
[data-style="bold"] .hero-copy { padding-left: max(var(--gutter-l), calc((100% - 1320px) / 2)); padding-right: max(var(--gutter-r), calc((100% - 1320px) / 2)); padding-bottom: clamp(110px, 16vh, 160px); }
[data-style="bold"] .top .mobile-nav { padding-left: max(var(--gutter-l), calc((100% - 1320px) / 2)); padding-right: max(var(--gutter-r), calc((100% - 1320px) / 2)); }
[data-style="bold"] .hero .recog-strip { position: absolute; left: max(var(--gutter-l), calc((100% - 1320px) / 2)); right: max(var(--gutter-r), calc((100% - 1320px) / 2)); bottom: 28px; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.18); justify-content: flex-start; gap: 12px 40px; }
[data-style="bold"] .hero .recog .lbl { color: rgba(255,255,255,.7); }
[data-style="bold"] .hero .recog img { filter: brightness(0) invert(1); mix-blend-mode: normal; opacity: .85; height: 34px; }
[data-style="bold"] .hero .recog img:hover { opacity: 1; filter: brightness(0) invert(1); }
[data-style="bold"] .mobile-nav .btn { padding: 15px 26px; font-weight: 600; }
@media (max-width: 560px) {
  [data-style="bold"] .hero-copy { padding-bottom: 150px; }
  [data-style="bold"] .hero .recog-strip { gap: 10px 22px; bottom: 20px; }
  [data-style="bold"] .hero .recog img { height: 26px; }
  [data-style="bold"] .hero .recog .lbl { font-size: 10px; }
}
[data-style="bold"] .hero .recog .rg { display: inline-flex; flex-direction: row; align-items: center; gap: 14px; }
/* Map: no drawn fallback, just a quiet dark placeholder until Google Maps loads */
.map-band { background: #151515 radial-gradient(circle, rgba(255,255,255,.07) 1.2px, transparent 1.6px) 0 0 / 24px 24px; }
.map-wait { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; }
.map-wait .map-pin { position: static; margin: 0; }
.map-wait small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.map-band-gmap.ready + .map-band-wrap, .map-band:has(.map-band-gmap.ready) .map-wait { }
.map-band:has(.map-band-gmap.ready) .map-wait { display: none; }
/* Intro (bold style only): giant GROULI over the blurred hero video, letters go from lead grey to cobalt one by one */
.intro { display: none; }
[data-style="bold"] .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: rgba(13,14,18,.7); -webkit-backdrop-filter: blur(26px) saturate(.6); backdrop-filter: blur(26px) saturate(.6); animation: introOut .8s cubic-bezier(.76,0,.24,1) 2.55s forwards; }
.intro-logo { width: 94vw; max-height: 70vh; overflow: visible; }
.il { fill: #3b3c40; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(14%); animation: ilIn .55s cubic-bezier(.2,.8,.2,1) calc(.1s + var(--i) * .07s) forwards, ilPaint .5s ease calc(1.05s + var(--i) * .17s) forwards; }
@keyframes ilIn { to { opacity: 1; transform: none; } }
@keyframes ilPaint { 0% { fill: #3b3c40; } 45% { fill: #2b3a7a; } 100% { fill: #2D5BFF; } }
@keyframes introOut { to { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); visibility: hidden; } }
@media (max-width: 640px) { .intro-logo { width: 92vw; } }
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .intro { display: none; } }
[data-style="bold"] .hero-bg .hb-mob { display: none; }
@media (max-width: 760px) and (orientation: portrait) { [data-style="bold"] .hero-bg .hb-desk { display: none; } [data-style="bold"] .hero-bg .hb-mob { display: block; } }
/* Bold style: process as a dark band, giant outlined numbers that fill cobalt one after another */
.step-tags { display: none; }
[data-style="bold"] .proc { background: #0d0e12; color: #fff; padding-block: clamp(88px, 11vw, 160px); }
[data-style="bold"] .proc .eyebrow { color: #9DB1FF; }
[data-style="bold"] .proc .eyebrow::before { background: #9DB1FF; }
[data-style="bold"] .proc h2 { color: #fff; font-size: clamp(44px, 6vw, 96px); letter-spacing: -.035em; }
[data-style="bold"] .proc .steps { position: relative; gap: clamp(24px, 3vw, 48px); margin-top: clamp(40px, 5vw, 72px); padding-top: 34px; }
[data-style="bold"] .proc .steps::before, [data-style="bold"] .proc .steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.14); }
[data-style="bold"] .proc .steps::after { background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 3s cubic-bezier(.45,0,.35,1); }
[data-style="bold"] .proc .steps.go::after { transform: scaleX(1); }
[data-style="bold"] .proc .step { position: relative; border: 0; padding: 0; gap: 14px; }
[data-style="bold"] .proc .step::before { content: ""; position: absolute; top: -41px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #0d0e12; border: 2px solid rgba(255,255,255,.3); transition: background .4s, border-color .4s; transition-delay: calc(var(--i) * 1.1s + .15s); }
[data-style="bold"] .proc .steps.go .step::before { background: var(--accent); border-color: var(--accent); }
[data-style="bold"] .proc .step .n { font-family: var(--display); font-weight: 700; font-size: clamp(96px, 11vw, 176px); line-height: .85; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.35); transition: color 1s, -webkit-text-stroke-color 1s; transition-delay: calc(var(--i) * 1.1s + .2s); }
[data-style="bold"] .proc .steps.go .step .n { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
[data-style="bold"] .proc .step h3 { color: #fff; font-size: clamp(28px, 2.4vw, 38px); margin-top: 8px; }
[data-style="bold"] .proc .step p { color: rgba(255,255,255,.7); font-size: 17px; }
[data-style="bold"] .step-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0; }
[data-style="bold"] .step-tags li { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
@media (max-width: 860px) {
  [data-style="bold"] .proc .steps { padding-top: 0; padding-left: 34px; gap: 44px; }
  [data-style="bold"] .proc .steps::before, [data-style="bold"] .proc .steps::after { left: 7px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  [data-style="bold"] .proc .steps::after { transform: scaleY(0); transform-origin: top; }
  [data-style="bold"] .proc .steps.go::after { transform: scaleY(1); }
  [data-style="bold"] .proc .step::before { top: 6px; left: -34px; }
  [data-style="bold"] .proc .step .n { font-size: 88px; }
}
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .proc .steps::after, [data-style="bold"] .proc .step::before, [data-style="bold"] .proc .step .n { transition: none; } }
/* Bold menu: translucent cobalt over a blurred page, slow BBDO-like open and close */
[data-style="bold"] .top .mobile-nav { background: rgba(45, 91, 255, .78); -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1); animation: menuIn .7s cubic-bezier(.76,0,.24,1) both; }
[data-style="bold"] .top .mobile-nav.closing { animation: menuOut .52s cubic-bezier(.76,0,.24,1) both; }
[data-style="bold"] .top .mobile-nav a { opacity: 0; transform: translateY(40px); animation: menuLink .7s cubic-bezier(.2,.8,.2,1) forwards; }
[data-style="bold"] .top .mobile-nav a:nth-child(1) { animation-delay: .28s; }
[data-style="bold"] .top .mobile-nav a:nth-child(2) { animation-delay: .36s; }
[data-style="bold"] .top .mobile-nav a:nth-child(3) { animation-delay: .44s; }
[data-style="bold"] .top .mobile-nav a:nth-child(4) { animation-delay: .52s; }
[data-style="bold"] .top .mobile-nav a:nth-child(5) { animation-delay: .62s; }
[data-style="bold"] .top .mobile-nav.closing a { animation: none; opacity: 1; transform: none; }
@keyframes menuIn { from { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } }
@keyframes menuOut { from { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } }
@keyframes menuLink { to { opacity: 1; transform: none; } }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .top .mobile-nav, [data-style="bold"] .top .mobile-nav a { animation: none; opacity: 1; transform: none; } }
[data-style="bold"] .proc + #faq { padding-top: clamp(88px, 10vw, 150px); }
/* More works: 4 per row, image-only covers in one shape, name below */
.mini-cover { aspect-ratio: 4 / 5; }
.mini-cover img { object-position: center; }
.mini-cover video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .mini-meta { flex-direction: column; align-items: flex-start; gap: 2px; } .mini-meta b { font-size: 15px; } }
.minis { align-items: start; }
.mini { align-content: start; }

/* Service pages v2: animation first, few words */
.s2-hero { padding-block: clamp(40px, 6vw, 88px) clamp(32px, 4vw, 56px); }
.s2-hero .inner { display: flex; flex-direction: column; gap: 18px; }
.s2-hero h1 { font-size: clamp(60px, 10vw, 156px); font-weight: 600; line-height: .95; letter-spacing: -.035em; }
.s2-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.s2-lead { font-size: clamp(19px, 1.6vw, 24px); }
.quote-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.quote-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.stage {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%; margin-top: 18px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(circle, var(--line) 1.4px, transparent 1.8px) 0 0 / 26px 26px, var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
@media (max-width: 700px) { .stage { aspect-ratio: 4 / 3.4; border-radius: 20px; } }
.stage * { position: absolute; }
@keyframes pop { 0%, 6% { transform: scale(0); } 16%, 86% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes rise { 0%, 6% { opacity: 0; transform: translateY(18px); } 16%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Marketing: story ad, profile feed, live analytics and notifications */
.mk-ad { left: 7%; top: 9%; width: 17%; aspect-ratio: 9 / 16; border-radius: 18px; background: var(--grad); box-shadow: var(--shadow); overflow: hidden; rotate: -7deg; animation: floaty 6s ease-in-out infinite; }
.mk-seg { left: 7%; right: 7%; top: 3.5%; height: 1.4%; display: flex; gap: 4%; }
.mk-seg i { position: relative; flex: 1; border-radius: 4px; background: rgba(255,255,255,.4); overflow: hidden; }
.mk-seg i::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform-origin: left; transform: scaleX(0); animation: seg 6s linear infinite; }
.mk-seg i:nth-child(2)::after { animation-name: seg2; }
.mk-seg i:nth-child(3)::after { animation-name: seg3; }
@keyframes seg { 0% { transform: scaleX(0); } 33%, 100% { transform: scaleX(1); } }
@keyframes seg2 { 0%, 33% { transform: scaleX(0); } 66%, 100% { transform: scaleX(1); } }
@keyframes seg3 { 0%, 66% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.mk-ad-top { left: 8%; top: 8%; display: flex; align-items: center; gap: 6%; width: 84%; }
.mk-ad-top i { position: relative; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #131418; border: 2px solid #FFFFFF; }
.mk-ad-top b { position: relative; height: .5em; width: 46%; border-radius: 4px; background: rgba(19,20,24,.45); font-size: clamp(8px, 1vw, 14px); }
.mk-ad-title { left: 8%; right: 8%; top: 20%; font-family: var(--display); font-weight: 700; color: #FFFFFF; font-size: clamp(12px, 1.6vw, 26px); line-height: 1; letter-spacing: -.02em; }
.mk-ad-prod { left: 50%; top: 60%; width: 58%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #131418; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); }
.mk-ad-prod::after { content: ""; position: absolute; inset: 26%; border-radius: 28%; background: linear-gradient(140deg, #FFFFFF, rgba(255,255,255,.25)); animation: spin 8s linear infinite; }
.mk-ad-cta { left: 10%; right: 10%; bottom: 5%; height: 8.5%; border-radius: 999px; background: #FFFFFF; color: #131418; font-weight: 600; font-size: clamp(9px, 1vw, 14px); display: grid; place-items: center; }

.mk-phone { left: 50%; top: 50%; width: 21%; aspect-ratio: 9 / 19; translate: -50% -50%; background: var(--card); border: 7px solid var(--fg); border-radius: 34px; overflow: hidden; box-shadow: var(--shadow); }
.mk-notch { left: 50%; top: 1.6%; width: 30%; height: 2.4%; translate: -50% 0; background: var(--fg); border-radius: 999px; z-index: 2; }
.mk-prof { left: 7%; top: 7.5%; width: 21%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--accent), var(--accent-2), var(--accent)); animation: spin 6s linear infinite; }
.mk-prof::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: var(--fg); border: 3px solid var(--card); }
.mk-stats { left: 36%; right: 7%; top: 9%; display: flex; gap: 8%; }
.mk-stats i { position: relative; flex: 1; height: 1.1em; font-size: clamp(6px, .7vw, 10px); }
.mk-stats i::before { content: ""; position: absolute; left: 0; right: 15%; top: 0; height: 45%; border-radius: 3px; background: var(--fg); }
.mk-stats i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; border-radius: 3px; background: var(--line); }
.mk-bio { left: 7%; top: 18%; width: 60%; height: 1.2%; border-radius: 3px; background: var(--line); }
.mk-hl { left: 7%; right: 7%; top: 22.5%; display: flex; gap: 6%; }
.mk-hl i { position: relative; flex: 1; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); }
.mk-hl i:first-child { border-color: var(--accent); }
.mk-grid { left: 0; right: 0; top: 33%; bottom: 0; overflow: hidden; }
.mk-posts { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; animation: feed 16s linear infinite; }
.mk-posts > i { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; font-style: normal; font-family: var(--display); font-weight: 700; font-size: clamp(7px, .9vw, 14px); }
.po-a { background: var(--grad); color: #FFFFFF; }
.po-b { background: var(--fg); color: var(--accent); }
.po-c { background: var(--surface); }
.po-c::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--grad); }
.po-d { background: var(--card); border: 1px solid var(--line); }
.po-d::before, .po-d::after { content: ""; position: absolute; left: 18%; height: 7%; border-radius: 3px; background: var(--fg); }
.po-d::before { top: 38%; right: 18%; }
.po-d::after { top: 54%; right: 40%; background: var(--line); }
.po-e { background: var(--grad); color: var(--fg); }
.po-f { background: var(--fg); }
.po-f::after { content: ""; position: absolute; left: 42%; top: 36%; border-left: 10px solid #FFFFFF; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.po-g { background: var(--surface); color: var(--fg); letter-spacing: .04em; }
.po-h { background: var(--grad); }
.po-h::after { content: ""; position: absolute; width: 40%; aspect-ratio: 1; border-radius: 30%; background: var(--fg); rotate: 12deg; }
.po-i { background: var(--fg); color: var(--bg); }

.mk-stat { right: 6%; top: 11%; width: 27%; aspect-ratio: 1.6; background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.mk-stat .lbl { left: 7%; top: 9%; font-family: var(--mono); font-size: clamp(8px, .8vw, 12px); letter-spacing: .08em; color: var(--muted); }
.mk-stat .num { left: 7%; top: 19%; font-family: var(--display); font-weight: 700; font-size: clamp(16px, 2.3vw, 36px); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-stat .delta { right: 7%; top: 10%; font-size: clamp(8px, .85vw, 12px); font-weight: 700; padding: .3em .7em; border-radius: 999px; background: var(--grad); color: var(--on-accent); }
.mk-stat svg { left: 0; right: 0; bottom: 0; width: 100%; height: 55%; overflow: visible; }
.mk-area { fill: url(#mk-fill); opacity: .35; animation: areaIn 8s var(--ease) infinite; }
@keyframes areaIn { 0%, 8% { opacity: 0; } 40%, 90% { opacity: .35; } 100% { opacity: 0; } }
.mk-line { fill: none; stroke: url(#mk-stroke); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 340; animation: draw2 8s var(--ease) infinite; }
@keyframes draw2 { 0%, 6% { stroke-dashoffset: 340; } 40%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.mk-dot { fill: var(--accent); animation: dotIn 8s var(--ease) infinite; }
@keyframes dotIn { 0%, 38% { opacity: 0; } 42%, 90% { opacity: 1; } 100% { opacity: 0; } }

.mk-notes { right: 6%; bottom: 9%; width: 29%; display: flex; flex-direction: column; gap: 8px; }
.mk-note { position: relative; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .65em .85em; font-size: clamp(9px, 1vw, 14px); font-weight: 500; box-shadow: var(--shadow); white-space: nowrap; animation: toast 8s var(--ease) infinite; }
.mk-note:nth-child(2) { animation-delay: .9s; }
.mk-note:nth-child(3) { animation-delay: 1.8s; }
@keyframes toast { 0%, 4% { opacity: 0; transform: translateX(40px); } 12%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(20px); } }
.mk-note .av { position: relative; width: 2em; height: 2em; flex: none; border-radius: 50%; background: var(--fg); }
.mk-note:nth-child(2) .av { background: var(--grad); }
.mk-note:nth-child(3) .av { background: var(--accent-2); }
.mk-note small { position: relative; margin-left: auto; color: var(--muted); font-size: .85em; }
.mk-heart { color: var(--accent); font-size: clamp(14px, 1.8vw, 26px); animation: heart 3.2s ease-out infinite; }
.mk-heart.h1 { left: 61%; top: 64%; }
.mk-heart.h2 { left: 63%; top: 70%; animation-delay: .8s; }
.mk-heart.h3 { left: 60%; top: 74%; animation-delay: 1.6s; color: var(--accent-2); }
.mk-heart.h4 { left: 62.5%; top: 68%; animation-delay: 2.4s; }
@keyframes heart { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(30%, -260%) scale(1.15); } }
@media (max-width: 700px) {
  .mk-phone { width: 34%; }
  .mk-ad { left: 4%; width: 24%; }
  .mk-stat { right: 3%; width: 34%; }
  .mk-notes { display: none; }
}

/* Ad platforms */
.mk-chip { display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border-radius: 999px; background: var(--fg); color: var(--bg); font-size: clamp(8px, .9vw, 13px); font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); }
.mk-chip i { position: relative; width: .6em; height: .6em; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 3px rgba(61,220,132,.25); }
.mk-chip.meta { left: 3%; top: 4%; rotate: -4deg; z-index: 3; }
.mk-ad-spons { left: 30%; top: 12.4%; font-size: clamp(6px, .6vw, 9px); font-weight: 600; color: rgba(255,255,255,.8); }
.mk-g { left: 4%; bottom: 6%; width: 31%; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 1.6% 1.8%; display: flex; flex-direction: column; gap: .45em; font-size: clamp(8px, .95vw, 14px); animation: rise 8s var(--ease) infinite .4s; z-index: 2; }
.mk-g * { position: relative; }
.mk-g-search { display: flex; align-items: center; gap: .6em; border: 1px solid var(--line); border-radius: 999px; padding: .4em .8em; color: var(--muted); }
.mk-g-search svg { position: relative; width: 1em; height: 1em; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.mk-g-search b { font-weight: 500; color: var(--fg); overflow: hidden; white-space: nowrap; border-right: 2px solid var(--accent); animation: typeq 8s steps(18) infinite; width: 0; }
@keyframes typeq { 0%, 6% { width: 0; } 30%, 100% { width: 9.5em; } }
.mk-g-top { display: flex; align-items: center; gap: .5em; margin-top: .3em; }
.mk-g-top strong { font-weight: 700; }
.mk-g-top span { color: var(--muted); }
.mk-g-title { font-family: var(--display); font-weight: 650; font-size: 1.25em; color: var(--accent-ink); letter-spacing: -.01em; }
.mk-g-line { height: .45em; border-radius: 4px; background: var(--line); width: 92%; }
.mk-g-line.s { width: 64%; }
.mk-chip.google { left: 25%; bottom: 33%; rotate: 3deg; z-index: 3; }
@media (max-width: 700px) { .mk-g { width: 44%; } .mk-chip.google { left: 30%; bottom: 36%; } }

/* Branding: palette chips, logo construction, type specimen, applications */
.bd-pal { left: 5%; top: 11%; width: 15%; height: 78%; }
.bd-chip { left: 0; top: 0; width: 100%; height: 62%; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 7%; transform-origin: 50% 100%; animation: fan 8s var(--ease) infinite; }
.bd-chip::before { content: ""; position: absolute; left: 7%; right: 7%; top: 5%; height: 68%; border-radius: 8px; background: var(--c); }
.bd-chip b { left: 9%; bottom: 14%; font-family: var(--mono); font-size: clamp(7px, .8vw, 12px); font-weight: 500; letter-spacing: .04em; }
.bd-chip span { left: 9%; bottom: 5%; font-size: clamp(6px, .7vw, 10px); color: var(--muted); }
.bd-chip:nth-child(1) { --c: var(--fg); --r: -14deg; --y: 0%; }
.bd-chip:nth-child(2) { --c: var(--accent); --r: -5deg; --y: 12%; animation-delay: .15s; }
.bd-chip:nth-child(3) { --c: var(--accent-2); --r: 4deg; --y: 24%; animation-delay: .3s; }
.bd-chip:nth-child(4) { --c: var(--surface); --r: 13deg; --y: 36%; animation-delay: .45s; }
@keyframes fan { 0%, 8% { transform: translateY(var(--y)) rotate(0deg); } 22%, 84% { transform: translateY(var(--y)) rotate(var(--r)); } 100% { transform: translateY(var(--y)) rotate(0deg); } }

.bd-logo { left: 25%; top: 9%; width: 42%; height: 64%; background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.bd-logo svg { left: 0; top: 0; width: 100%; height: 100%; }
.bd-guide-l { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 600; opacity: .55; animation: guide 8s var(--ease) infinite; }
@keyframes guide { 0%, 4% { stroke-dashoffset: 600; } 30%, 80% { stroke-dashoffset: 0; opacity: .55; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.bd-m1 { fill: url(#bd-grad); transform-box: fill-box; transform-origin: center; animation: m1 8s var(--ease) infinite; }
.bd-m2 { fill: var(--fg); transform-box: fill-box; transform-origin: center; animation: m2 8s var(--ease) infinite; }
@keyframes m1 { 0%, 14% { transform: translateX(-60%) scale(.6); opacity: 0; } 30%, 88% { transform: none; opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
@keyframes m2 { 0%, 22% { transform: translateX(80%) rotate(45deg) scale(.6); opacity: 0; } 38%, 88% { transform: rotate(0deg); opacity: 1; } 100% { opacity: 0; } }
.bd-word { fill: var(--fg); font-family: var(--display); font-weight: 650; letter-spacing: -.02em; animation: wordIn 8s var(--ease) infinite; }
@keyframes wordIn { 0%, 36% { opacity: 0; transform: translateY(8px); } 46%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.bd-tagl { fill: var(--muted); font-family: var(--mono); letter-spacing: .12em; animation: wordIn 8s var(--ease) infinite .3s; }

.bd-type { right: 5%; top: 9%; width: 27%; height: 38%; background: var(--fg); color: var(--bg); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.bd-type .lbl { left: 8%; top: 10%; font-family: var(--mono); font-size: clamp(7px, .75vw, 11px); letter-spacing: .1em; opacity: .7; }
.bd-type .aa { left: 7%; top: 18%; font-family: var(--display); font-size: clamp(38px, 6.6vw, 104px); line-height: 1; animation: weight 4s ease-in-out infinite alternate; }
@keyframes weight { 0% { font-weight: 300; } 100% { font-weight: 800; } }
.bd-type .name { right: 8%; top: 22%; text-align: right; font-size: clamp(8px, .85vw, 13px); line-height: 1.5; opacity: .8; }
.bd-type .abc { left: 8%; bottom: 10%; right: 8%; font-family: var(--display); font-size: clamp(8px, 1vw, 15px); letter-spacing: .08em; opacity: .6; white-space: nowrap; overflow: hidden; }
.bd-type .bar { left: 8%; right: 8%; bottom: 26%; height: 2px; background: color-mix(in srgb, var(--bg) 20%, transparent); }
.bd-type .bar::after { content: ""; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: slider 4s ease-in-out infinite alternate; }
@keyframes slider { from { left: 0; } to { left: calc(100% - 8px); } }

.bd-cardwrap { right: 12%; bottom: 10%; width: 20%; aspect-ratio: 1.75; perspective: 800px; }
.bd-card { left: 0; top: 0; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip 8s var(--ease) infinite; }
@keyframes flip { 0%, 40% { transform: rotateY(0deg); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.bd-face { left: 0; top: 0; width: 100%; height: 100%; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow); }
.bd-face.front { background: var(--fg); }
.bd-face.front::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--grad); }
.bd-face.back { background: var(--card); border: 1px solid var(--line); transform: rotateY(180deg); }
.bd-face.back::before { content: ""; position: absolute; left: 10%; top: 24%; width: 46%; height: 9%; border-radius: 3px; background: var(--fg); }
.bd-face.back::after { content: ""; position: absolute; left: 10%; top: 44%; width: 34%; height: 6%; border-radius: 3px; background: var(--line); box-shadow: 0 1.6em 0 var(--line); }
.bd-app { right: 5%; bottom: 13%; width: 6.5%; aspect-ratio: 1; border-radius: 24%; background: var(--grad); box-shadow: var(--shadow); animation: floaty 5s ease-in-out infinite; }
.bd-app::after { content: ""; position: absolute; inset: 30%; border-radius: 26%; background: var(--fg); }

.bd-row { left: 25%; top: 77%; width: 42%; height: 15%; display: flex; gap: 3%; }
.bd-row > i { position: relative; flex: 1; border-radius: 12px; box-shadow: var(--shadow); animation: rise 8s var(--ease) infinite; }
.bd-row > i:nth-child(1) { background: var(--grad); animation-delay: .9s; }
.bd-row > i:nth-child(2) { background: var(--card); border: 1px solid var(--line); animation-delay: 1.1s; }
.bd-row > i:nth-child(2)::before { content: ""; position: absolute; left: 12%; top: 30%; width: 50%; height: 14%; border-radius: 4px; background: var(--fg); }
.bd-row > i:nth-child(2)::after { content: ""; position: absolute; left: 12%; top: 54%; width: 34%; height: 10%; border-radius: 4px; background: var(--accent); }
.bd-row > i:nth-child(3) { background: var(--fg); animation-delay: 1.3s; }
.bd-row > i:nth-child(3)::after { content: ""; position: absolute; left: 50%; top: 50%; height: 50%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--accent); }
@media (max-width: 700px) { .bd-pal { width: 18%; } .bd-logo { left: 27%; width: 44%; } .bd-cardwrap { width: 26%; right: 4%; bottom: 8%; } .bd-app, .bd-row { display: none; } }

/* Branding layout v2: an ordered board with generous gutters (4 to 6% between pieces) */
.bd-pal { left: 6%; top: 10%; width: 13%; height: 80%; }
.bd-chip { left: 0; top: var(--t); width: 100%; height: 21%; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); transform-origin: left center; animation: chipIn 8s var(--ease) infinite; }
.bd-chip::before { left: 8%; top: 14%; bottom: 14%; right: auto; height: auto; width: 34%; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent); }
.bd-chip b { left: 50%; top: 26%; bottom: auto; font-size: clamp(7px, .75vw, 11px); }
.bd-chip span { left: 50%; top: 54%; bottom: auto; font-size: clamp(6px, .65vw, 10px); }
.bd-chip:nth-child(1) { --t: 0%; animation-delay: 0s; }
.bd-chip:nth-child(2) { --t: 26.3%; animation-delay: .15s; }
.bd-chip:nth-child(3) { --t: 52.6%; animation-delay: .3s; }
.bd-chip:nth-child(4) { --t: 79%; animation-delay: .45s; }
@keyframes chipIn { 0%, 6% { opacity: 0; transform: translateX(-24px); } 16%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(-12px); } }
.bd-logo { left: 24%; top: 10%; width: 36%; height: 56%; }
.bd-type { right: 6%; top: 10%; width: 30%; height: 38%; }
.bd-type .aa { font-size: clamp(30px, 5.2vw, 84px); top: 22%; }
.bd-cardwrap { left: 64%; right: auto; top: 56%; bottom: auto; width: 19%; }
.bd-app { left: 87.5%; right: auto; top: 56%; bottom: auto; width: 6.5%; }
.bd-row { left: 24%; top: 72%; width: 36%; height: 18%; gap: 4%; }
@media (max-width: 700px) {
  .bd-pal, .bd-row, .bd-app { display: none; }
  .bd-logo { left: 5%; top: 8%; width: 52%; height: 84%; }
  .bd-type { right: 5%; top: 8%; width: 34%; height: 44%; }
  .bd-cardwrap { left: auto; right: 5%; top: 60%; width: 34%; }
}

/* Web: a full page scrolling in the browser, phone, speed gauge, code and leads */
.wb-win { left: 21%; top: 8%; width: 54%; height: 84%; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.wb-bar { left: 0; right: 0; top: 0; height: 8%; border-bottom: 1px solid var(--line); background: var(--card); z-index: 2; display: flex; align-items: center; gap: 6px; padding-left: 2.6%; }
.wb-bar i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.wb-bar i:first-child { background: var(--accent); }
.wb-bar b { position: relative; margin-left: 4%; flex: 0 0 46%; height: 52%; border-radius: 999px; background: var(--surface); font-weight: 500; font-size: clamp(7px, .75vw, 11px); color: var(--muted); display: flex; align-items: center; padding-left: 4%; }
.wb-view { left: 0; right: 0; top: 8%; bottom: 0; overflow: hidden; }
.wb-page { left: 0; right: 0; top: 0; height: 240%; animation: scrollpage 12s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes scrollpage { 0%, 22% { transform: translateY(0); } 40%, 52% { transform: translateY(-28%); } 70%, 84% { transform: translateY(-58%); } 100% { transform: translateY(0); } }
.wb-page .nav { left: 5%; right: 5%; top: 2%; height: 3%; }
.wb-page .nav::before { content: ""; position: absolute; left: 0; top: 20%; width: 4%; aspect-ratio: 1; border-radius: 50%; background: var(--grad); }
.wb-page .nav::after { content: ""; position: absolute; right: 0; top: 10%; width: 14%; height: 80%; border-radius: 999px; background: var(--fg); }
.wb-page .links { left: 40%; top: 2.8%; width: 30%; height: 1.2%; background: repeating-linear-gradient(90deg, var(--line) 0 18%, transparent 18% 26%); border-radius: 3px; }
.wb-page .h1 { left: 5%; top: 9%; width: 46%; height: 4.4%; border-radius: 6px; background: var(--fg); }
.wb-page .h1b { left: 5%; top: 14.6%; width: 34%; height: 4.4%; border-radius: 6px; background: var(--fg); }
.wb-page .sub { left: 5%; top: 21%; width: 38%; height: 1.4%; border-radius: 3px; background: var(--line); box-shadow: 0 1.1em 0 var(--line); }
.wb-page .cta { left: 5%; top: 27%; width: 16%; height: 3.4%; border-radius: 999px; background: var(--grad); }
.wb-page .img { right: 5%; top: 8.5%; width: 38%; height: 22%; border-radius: 14px; background: var(--grad); overflow: hidden; }
.wb-page .img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; translate: -50% -50%; border-radius: 30%; background: var(--fg); animation: spin 10s linear infinite; }
.wb-page .logos { left: 5%; right: 5%; top: 35%; height: 2%; background: repeating-linear-gradient(90deg, var(--surface) 0 15%, transparent 15% 21.25%); border-radius: 4px; }
.wb-page .feat { top: 40%; width: 28%; height: 13%; border-radius: 12px; background: var(--surface); }
.wb-page .feat::before { content: ""; position: absolute; left: 12%; top: 14%; width: 20%; aspect-ratio: 1; border-radius: 30%; background: var(--grad); }
.wb-page .feat::after { content: ""; position: absolute; left: 12%; top: 58%; width: 66%; height: 9%; border-radius: 3px; background: var(--line); box-shadow: 0 .9em 0 var(--line); }
.wb-page .f1 { left: 5%; } .wb-page .f2 { left: 36%; } .wb-page .f3 { left: 67%; }
.wb-page .quote { left: 5%; right: 5%; top: 58%; height: 14%; border-radius: 14px; background: var(--surface); }
.wb-page .quote::before { content: "“"; position: absolute; left: 5%; top: 4%; font-family: var(--display); font-size: clamp(22px, 3vw, 48px); color: var(--accent); }
.wb-page .quote::after { content: ""; position: absolute; left: 14%; top: 34%; width: 60%; height: 9%; border-radius: 3px; background: color-mix(in srgb, var(--fg) 55%, transparent); box-shadow: 0 1.3em 0 var(--line); }
.wb-page .band { left: 5%; right: 5%; top: 76%; height: 11%; border-radius: 14px; background: var(--grad); }
.wb-page .band::after { content: ""; position: absolute; right: 6%; top: 34%; width: 20%; height: 32%; border-radius: 999px; background: var(--fg); }
.wb-page .foot { left: 5%; right: 5%; top: 91%; height: 6%; border-top: 1px solid var(--line); background: repeating-linear-gradient(90deg, var(--surface) 0 12%, transparent 12% 20%) 0 40% / 100% 18% no-repeat; }
.wb-cursor { left: 40%; top: 60%; width: 1.8%; min-width: 13px; aspect-ratio: 1 / 1.4; z-index: 3; animation: wclick 12s var(--ease) infinite; }
.wb-cursor svg { position: relative; width: 100%; height: 100%; }
.wb-cursor path { fill: var(--fg); stroke: var(--card); stroke-width: 2; }
@keyframes wclick { 0%, 6% { left: 50%; top: 70%; transform: scale(1); } 16% { left: 29%; top: 38%; transform: scale(1); } 18% { transform: scale(.75); } 21%, 100% { left: 29%; top: 38%; transform: scale(1); } }
.wb-ripple { left: 28.3%; top: 37%; width: 3%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; z-index: 3; animation: ripple 12s ease-out infinite; }
@keyframes ripple { 0%, 17% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(.6); } 26%, 100% { opacity: 0; transform: scale(2.4); } }
.wb-mob { right: 4%; top: 18%; width: 14%; aspect-ratio: 9 / 19; background: var(--card); border: 5px solid var(--fg); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.wb-mob .wb-page { height: 300%; }
.wb-mob .h1 { width: 80%; height: 3.4%; top: 7%; } .wb-mob .h1b { width: 60%; height: 3.4%; top: 11.5%; }
.wb-mob .sub { width: 80%; top: 17%; } .wb-mob .cta { width: 50%; height: 2.6%; top: 22%; }
.wb-mob .img { left: 5%; right: 5%; width: auto; top: 27%; height: 14%; }
.wb-mob .feat { left: 5%; width: 90%; height: 9%; } .wb-mob .f1 { top: 45%; } .wb-mob .f2 { top: 56%; } .wb-mob .f3 { top: 67%; }
.wb-gauge { left: 4%; top: 12%; width: 14%; aspect-ratio: 1 / 1.15; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.wb-gauge svg { left: 16%; top: 10%; width: 68%; }
.wb-ring-bg { fill: none; stroke: var(--surface); stroke-width: 9; }
.wb-ring { fill: none; stroke: url(#wb-grad); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 251; transform: rotate(-90deg); transform-origin: 50% 50%; animation: ring 12s var(--ease) infinite; }
@keyframes ring { 0%, 6% { stroke-dashoffset: 251; } 30%, 90% { stroke-dashoffset: 8; } 100% { stroke-dashoffset: 251; } }
.wb-gauge .ok { left: 50%; top: 36%; translate: -50% 0; font-family: var(--display); font-weight: 700; font-size: clamp(12px, 1.6vw, 24px); }
.wb-gauge .lbl { left: 0; right: 0; bottom: 10%; text-align: center; font-size: clamp(8px, .85vw, 13px); font-weight: 600; }
.wb-code { left: 4%; bottom: 10%; width: 23%; background: var(--fg); border-radius: 14px; box-shadow: var(--shadow); padding: 3% 3.4%; display: flex; flex-direction: column; gap: .55em; font-size: clamp(8px, .9vw, 13px); z-index: 2; }
.wb-code > i { position: relative; height: .55em; border-radius: 3px; transform-origin: left; animation: codeline 6s steps(12) infinite; }
.wb-code > i:nth-child(1) { width: 40%; background: var(--accent); }
.wb-code > i:nth-child(2) { width: 70%; margin-left: 10%; background: color-mix(in srgb, var(--bg) 45%, transparent); animation-delay: .4s; }
.wb-code > i:nth-child(3) { width: 55%; margin-left: 10%; background: var(--accent-2); animation-delay: .8s; }
.wb-code > i:nth-child(4) { width: 62%; margin-left: 20%; background: color-mix(in srgb, var(--bg) 30%, transparent); animation-delay: 1.2s; }
.wb-code > i:nth-child(5) { width: 30%; background: var(--accent); animation-delay: 1.6s; }
@keyframes codeline { 0% { transform: scaleX(0); } 20%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.wb-toast { right: 14%; bottom: 7%; display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 600; font-size: clamp(9px, 1vw, 14px); white-space: nowrap; z-index: 3; animation: toast 12s var(--ease) infinite 2.4s; }
.wb-toast i { position: relative; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-style: normal; color: var(--on-accent); font-size: .8em; }
@media (max-width: 700px) { .wb-win { left: 4%; width: 66%; } .wb-mob { width: 22%; } .wb-gauge, .wb-code, .wb-toast { display: none; } }

/* Includes: icon tiles, one line each */
.s2-incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .s2-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s2-inc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; align-items: center; gap: 16px; transition: border-color .25s, transform .25s var(--ease); }
.s2-inc:hover { border-color: var(--fg); transform: translateY(-3px); }
.s2-ico { width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--surface); display: grid; place-items: center; transition: background .3s, transform .4s var(--ease); }
.s2-ico svg { width: 26px; height: 26px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.s2-inc:hover .s2-ico { background: var(--grad); transform: rotate(-8deg); }
.s2-inc:hover .s2-ico svg { stroke: var(--on-accent); }
.s2-inc h3 { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -.01em; }
/* Phones: the six items become one numbered list inside a single card, so long words never squeeze */
@media (max-width: 600px) {
  .s2-incl { grid-template-columns: 1fr; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; counter-reset: inc; }
  .s2-inc { counter-increment: inc; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); padding: 14px 18px; gap: 14px; }
  .s2-inc:last-child { border-bottom: 0; }
  .s2-inc:hover { transform: none; }
  .s2-ico { width: 40px; height: 40px; border-radius: 11px; }
  .s2-ico svg { width: 20px; height: 20px; }
  .s2-inc h3 { flex: 1; font-size: 17px; line-height: 1.25; }
  .s2-inc::after { content: counter(inc, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
}

/* Flow: four steps light up along a line */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 36px; }
.flow::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 47px; height: 2px; background: var(--line); }
.flow .fill { position: absolute; left: 12.5%; top: 47px; height: 2px; width: 0; background: var(--grad); animation: fillx 6s var(--ease) infinite; }
@keyframes fillx { 0%, 5% { width: 0; } 80%, 92% { width: 75%; } 100% { width: 75%; opacity: 0; } }
.flow .st { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.flow .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); animation: light 6s var(--ease) infinite; }
.flow .st:nth-child(2) .dot { animation-delay: 0s; }
.flow .st:nth-child(3) .dot { animation-delay: 1.5s; }
.flow .st:nth-child(4) .dot { animation-delay: 3s; }
.flow .st:nth-child(5) .dot { animation-delay: 4.5s; }
@keyframes light { 0%, 20% { background: var(--grad); border-color: transparent; transform: scale(1.15); } 30%, 100% { background: var(--fg); border-color: var(--fg); transform: scale(1); } }
.flow h3 { font-size: clamp(15px, 1.5vw, 20px); font-weight: 600; }
@media (max-width: 560px) { .flow h3 { font-size: 13px; } .flow .dot { width: 18px; height: 18px; } .flow::before, .flow .fill { top: 44px; } }

.s2-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .s2-others { grid-template-columns: 1fr; } }
.s2-other { text-decoration: none; display: flex; justify-content: space-between; align-items: center; padding: 26px 28px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); transition: border-color .25s, transform .25s var(--ease); }
.s2-other:hover { border-color: var(--fg); transform: translateY(-3px); }
.s2-other h3 { font-size: clamp(26px, 3vw, 38px); font-weight: 650; letter-spacing: -.02em; }
.s2-other span { font-size: 26px; transition: transform .25s var(--ease); }
.s2-other:hover span { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::before, .stage *::after, .flow .fill, .flow .dot { animation: none !important; }
  .flow .fill { width: 75%; }
  .flow .dot { background: var(--fg); border-color: var(--fg); }
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cotizador */
.cz-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cz-top .inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.cz-close { text-decoration: none; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.cz-close:hover { color: var(--fg); }
.cz-progress { max-width: 1320px; margin-inline: auto; display: flex; align-items: center; gap: 14px; padding-bottom: 12px; }
.cz-progress span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cz-track { flex: 1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cz-track i { display: block; height: 100%; width: 20%; border-radius: 999px; background: var(--grad); transition: width .5s var(--ease); }
.cz-main { min-height: calc(100vh - 120px); min-height: calc(100svh - 120px); display: flex; align-items: flex-start; }
.cz-main > .inner { width: 100%; max-width: 820px; padding-block: clamp(40px, 7vw, 96px) 64px; }
.cz-step { display: flex; flex-direction: column; gap: 28px; }
.cz-step[hidden] { display: none; }
.cz-step.enter { animation: czIn .45s var(--ease); }
@keyframes czIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cz-step h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; }
.cz-hint { color: var(--muted); font-size: 16px; margin-top: -14px; }
.cz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cz-opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .cz-opts, .cz-opts.three { grid-template-columns: 1fr; } }
.cz-opt {
  font: 600 18px var(--body); color: var(--fg); text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 20px 22px; min-height: 76px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.cz-opt:hover { border-color: var(--fg); transform: translateY(-2px); }
.cz-opt .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--surface); display: grid; place-items: center; transition: background .2s; }
.cz-opt .ic svg { width: 22px; height: 22px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cz-opt .tick { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; display: grid; place-items: center; font-size: 13px; color: transparent; transition: background .2s, border-color .2s, color .2s; }
.cz-opt[aria-pressed="true"], .cz-opt[aria-checked="true"] { border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cz-opt[aria-pressed="true"] .ic, .cz-opt[aria-checked="true"] .ic { background: var(--grad); }
.cz-opt[aria-pressed="true"] .tick, .cz-opt[aria-checked="true"] .tick { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.cz-fields { display: grid; gap: 18px; }
.cz-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .cz-fields.two { grid-template-columns: 1fr; } }
.cz-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cz-field.full { grid-column: 1 / -1; }
.cz-field label { font-weight: 600; font-size: 15px; }
.cz-field label small { font-weight: 400; color: var(--muted); }
.cz-field input, .cz-field textarea {
  font: inherit; font-size: 17px; color: var(--fg); width: 100%; background: var(--card);
  border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; transition: border-color .2s, box-shadow .2s;
}
.cz-field textarea { resize: vertical; min-height: 120px; }
.cz-field input:focus, .cz-field textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.cz-field [aria-invalid="true"] { border-color: var(--accent-ink); }
.cz-cur { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); align-self: flex-start; }
.cz-cur button { font: 600 15px var(--body); border: 0; background: transparent; color: var(--muted); padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.cz-cur button[aria-pressed="true"] { background: var(--card); color: var(--fg); box-shadow: 0 2px 8px -4px rgba(0,0,0,.25); }
.cz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cz-chip { font: 500 15px var(--body); color: var(--fg); background: transparent; border: 1.5px solid var(--line); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.cz-chip:hover { border-color: var(--fg); }
.cz-chip[aria-checked="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cz-nav[hidden], .cz-done [hidden] { display: none !important; }
.cz-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.cz-back { font: 600 16px var(--body); background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 10px 0; }
.cz-back:hover { color: var(--fg); }
.cz-back[hidden] { display: inline-block !important; visibility: hidden; }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.cz-err { color: var(--accent-ink); font-weight: 600; font-size: 15px; min-height: 1.4em; }
.cz-done { text-align: left; }
.cz-done .big { width: 72px; height: 72px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-size: 32px; color: var(--on-accent); animation: popIn .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.cz-done .lead { font-size: clamp(18px, 1.6vw, 22px); color: var(--muted); max-width: 40ch; }
.cz-summary { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; display: grid; gap: 10px; }
.cz-summary div { display: flex; justify-content: space-between; gap: 16px; font-size: 15.5px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.cz-summary div:last-child { border-bottom: 0; padding-bottom: 0; }
.cz-summary dt { color: var(--muted); }
.cz-summary dd { margin: 0; font-weight: 600; text-align: right; }
.cz-note { font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cz-step.enter, .cz-done .big { animation: none; } }

/* Home: contact band now points to the cotizador */
.cz-preview { background: rgba(255,255,255,.22); border: 1px solid rgba(19,20,24,.2); border-radius: 28px; padding: clamp(22px, 3vw, 36px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; gap: 10px; }
.cz-preview ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.cz-preview li { counter-increment: s; display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.7); color: #131418; border-radius: 14px; padding: 14px 16px; font-weight: 600; font-size: 17px; }
.cz-preview li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; background: #131418; color: #FFFFFF; display: grid; place-items: center; font-size: 14px; flex: none; }
.cz-preview .time { font-size: 14px; font-weight: 600; text-align: right; }

/* Minimal color: neutrals plus one accent, no two-tone gradient */
:root { --accent-2: #2D5BFF; --grad-text: linear-gradient(120deg, var(--accent-ink), var(--accent-ink)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-2: #4C72FF; --grad-text: linear-gradient(120deg, var(--accent-ink), var(--accent-ink)); } }
:root[data-theme="dark"] { --accent-2: #4C72FF; --grad-text: linear-gradient(120deg, var(--accent-ink), var(--accent-ink)); }

/* Quote bands in ink instead of a full color field */
.cta, .cta-simple { background: var(--fg); color: var(--bg); }
.cta::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
.cta-copy .eyebrow { color: var(--bg); }
.cta-copy .eyebrow::before { background: var(--accent); }
.cta :focus-visible, .cta-simple :focus-visible { outline-color: var(--accent); }
.copy-btn { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 40%, transparent); }
.cta .btn.dark, .cta-simple .btn.dark { background: var(--accent); color: #FFFFFF; border-color: var(--accent); }
.cz-preview { background: color-mix(in srgb, var(--bg) 5%, transparent); border-color: color-mix(in srgb, var(--bg) 14%, transparent); }
.cz-preview li { background: color-mix(in srgb, var(--bg) 8%, transparent); color: var(--bg); }
.cz-preview li::before { background: var(--accent); color: #FFFFFF; }
.cz-preview .time { color: color-mix(in srgb, var(--bg) 70%, transparent); }
.bd-chip:nth-child(3) { --c: var(--card); }

/* Case study pages */
.cs-hero { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 48px); }
.cs-hero .inner { display: flex; flex-direction: column; gap: 18px; }
.cs-hero h1 { font-size: clamp(56px, 9vw, 144px); font-weight: 600; line-height: .95; letter-spacing: -.035em; }
.cs-lead { font-size: clamp(19px, 1.6vw, 24px); max-width: 36ch; }
.cs-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; max-width: 760px; }
.cs-meta dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { margin: 4px 0 0; font-weight: 600; }
@media (max-width: 560px) { .cs-meta { grid-template-columns: 1fr 1fr; } }
.cs-sample { display: inline-flex; align-self: flex-start; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 4px 10px; }

.slot-art { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: grid; place-items: center; }
.slot-art figcaption, .slot-art .cap { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: inherit; opacity: .6; }
.cs-cover { aspect-ratio: 16 / 8; background: var(--fg); color: var(--bg); }
.cs-cover b { font-family: var(--display); font-weight: 650; font-size: clamp(48px, 9vw, 150px); letter-spacing: -.04em; }
.cs-cover b i { font-style: normal; color: var(--accent); }

.cs-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; }
@media (max-width: 760px) { .cs-story { grid-template-columns: 1fr; } }
.cs-story h2 { font-size: 14px; font-family: var(--mono); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.cs-story p { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; letter-spacing: -.01em; font-family: var(--display); font-weight: 500; max-width: 30ch; }

.cs-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.cs-gallery .g-wide { grid-column: span 6; aspect-ratio: 16 / 7; }
.cs-gallery .g-half { grid-column: span 3; aspect-ratio: 1; }
.cs-gallery .g-third { grid-column: span 2; aspect-ratio: 3 / 4; }
@media (max-width: 760px) { .cs-gallery .g-half, .cs-gallery .g-third { grid-column: span 6; aspect-ratio: 4 / 3; } }
.t-logo { background: var(--card); }
.t-logo b { font-family: var(--display); font-weight: 650; font-size: clamp(36px, 6vw, 96px); letter-spacing: -.035em; }
.t-logo b i { font-style: normal; color: var(--accent); }
.t-palette { background: var(--card); grid-template-columns: repeat(4, 1fr); padding: 12%; gap: 6%; align-content: center; }
.t-palette i { aspect-ratio: 1 / 1.6; border-radius: 12px; background: var(--c); border: 1px solid var(--line); }
.t-type { background: var(--fg); color: var(--bg); }
.t-type b { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 10vw, 160px); line-height: 1; }
.t-social { background: var(--surface); padding: 12%; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: center; }
.t-social i { aspect-ratio: 1; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.t-social i:nth-child(3n+1) { background: var(--fg); border-color: var(--fg); }
.t-social i:nth-child(5) { background: var(--accent); border-color: var(--accent); }
.t-phone { background: var(--surface); }
.t-phone span { width: 34%; aspect-ratio: 9 / 18; border: 5px solid var(--fg); border-radius: 22px; background: var(--card); display: block; }
.t-web { background: var(--surface); }
.t-web span { width: 76%; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: block; position: relative; }
.t-web span::before { content: ""; position: absolute; left: 8%; top: 18%; width: 48%; height: 12%; border-radius: 6px; background: var(--fg); }
.t-web span::after { content: ""; position: absolute; left: 8%; top: 38%; width: 22%; height: 8%; border-radius: 999px; background: var(--accent); }
.t-pack { background: var(--card); }
.t-pack span { width: 38%; aspect-ratio: 1; background: var(--fg); border-radius: 10px; display: grid; place-items: center; color: var(--bg); font-family: var(--display); font-weight: 650; font-size: clamp(14px, 1.6vw, 22px); }

.cs-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .cs-results { grid-template-columns: 1fr; } }
.cs-results div { border-top: 1px solid var(--line); padding-top: 20px; }
.cs-results b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(44px, 5.6vw, 84px); letter-spacing: -.03em; line-height: 1; }
.cs-results span { color: var(--muted); }
.cs-quote { max-width: 900px; }
.cs-quote p { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 3vw, 44px); line-height: 1.2; letter-spacing: -.02em; }
.cs-quote footer, .cs-quote .who { margin-top: 20px; color: var(--muted); font-size: 15px; }
.cs-next { display: flex; justify-content: space-between; align-items: center; gap: 24px; text-decoration: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(32px, 5vw, 56px); }
.cs-next small { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.cs-next b { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 6vw, 88px); letter-spacing: -.03em; line-height: 1; transition: color .25s; }
.cs-next .go { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 24px; flex: none; transition: background .3s, color .3s, transform .3s var(--ease); }
.cs-next:hover b { color: var(--accent-ink); }
.cs-next:hover .go { background: var(--fg); color: var(--bg); transform: rotate(-45deg); }
.cs-gap { padding-block: clamp(64px, 8vw, 120px) 0; }

/* About, legal, complaints book, blog and 404 */
.pg-hero { padding-block: clamp(40px, 6vw, 88px) clamp(28px, 4vw, 48px); }
.pg-hero .inner { display: flex; flex-direction: column; gap: 18px; }
.pg-hero h1 { font-size: clamp(44px, 7vw, 112px); font-weight: 600; line-height: .98; letter-spacing: -.035em; max-width: 14ch; }
.pg-lead { font-size: clamp(19px, 1.6vw, 24px); max-width: 40ch; color: var(--muted); }
.pg-gap { padding-block: clamp(64px, 8vw, 120px) 0; }
.pg-end { padding-bottom: clamp(64px, 8vw, 120px); }

.video-slot { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--fg); color: var(--bg); display: grid; place-items: center; border: 1px solid var(--line); }
.video-slot .play { width: clamp(64px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.video-slot .play::after { content: ""; margin-left: 6%; border-left: 22px solid #FFFFFF; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.video-slot .cap { position: absolute; left: 18px; bottom: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.about-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; }
@media (max-width: 760px) { .about-text { grid-template-columns: 1fr; } }
.about-text p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }
.principles div { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.principles h3 { font-size: 22px; font-weight: 600; }
.principles p { color: var(--muted); }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .team { grid-template-columns: 1fr 1fr; } }
.member { display: flex; flex-direction: column; gap: 10px; }
.member .ph { aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.member.ai .ph { background: var(--fg); color: var(--bg); font-family: var(--display); font-size: 48px; letter-spacing: 0; }
.member b { font-weight: 600; }
.member span { color: var(--muted); font-size: 15px; }

.doc { max-width: 760px; }
.doc h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; margin: 40px 0 12px; letter-spacing: -.01em; }
.doc p, .doc li { color: var(--muted); font-size: 17px; line-height: 1.65; }
.doc p + p { margin-top: 10px; }
.doc ul { padding-left: 20px; margin: 8px 0; }
.doc strong { color: var(--fg); }
.doc .updated { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.doc .fill { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--fg); padding: 0 4px; border-radius: 4px; }

.lr { max-width: 860px; display: flex; flex-direction: column; gap: 36px; }
.lr fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); margin: 0; display: grid; gap: 16px; }
.lr legend { font-weight: 600; font-size: 18px; padding: 0 8px; }
.lr .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .lr .grid2 { grid-template-columns: 1fr; } }
.lr select { font: inherit; font-size: 17px; color: var(--fg); width: 100%; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.lr .radio-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lr .radio-row label { display: inline-flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px; cursor: pointer; flex: 1 1 240px; font-weight: 500; }
.lr .radio-row label small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.lr .radio-row input { margin-top: 4px; accent-color: var(--accent); }
.lr .provider { font-size: 15px; color: var(--muted); display: grid; gap: 4px; }
.lr .provider b { color: var(--fg); }
.lr .legal-note { font-size: 14px; color: var(--muted); }
.lr .check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.lr .check input { margin-top: 4px; accent-color: var(--accent); }
.lr-done { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.lr-done[hidden] { display: none; }
.lr-done b.num { font-family: var(--mono); font-size: 20px; }

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } }
.post { text-decoration: none; display: flex; flex-direction: column; gap: 14px; }
.post .ph { aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--display); font-weight: 650; font-size: clamp(40px, 5vw, 72px); color: var(--fg); transition: border-radius .4s var(--ease); }
.post:nth-child(2) .ph { background: var(--fg); color: var(--bg); }
.post:hover .ph { border-radius: 36px; }
.post .tg { font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.post h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.post:hover h3 { color: var(--accent-ink); }
.post p { color: var(--muted); }
.article { max-width: 720px; }
.article .meta-line { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.article h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; margin: 44px 0 12px; letter-spacing: -.015em; }
.article p, .article li { font-size: 18px; line-height: 1.7; color: color-mix(in srgb, var(--fg) 82%, var(--bg)); }
.article p + p { margin-top: 14px; }
.article ul { padding-left: 22px; }

.nf { min-height: calc(100vh - 160px); min-height: calc(100svh - 160px); display: grid; place-items: center; text-align: center; padding-block: 64px; }
.nf .inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.nf .big { font-family: var(--display); font-weight: 650; font-size: clamp(120px, 24vw, 340px); line-height: .9; letter-spacing: -.05em; display: inline-flex; align-items: center; }
.nf .big i { display: inline-block; width: .74em; height: .74em; border-radius: 50%; background: var(--accent); margin: 0 .02em; animation: nfbob 3s ease-in-out infinite; }
@keyframes nfbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.06em); } }
.nf p { color: var(--muted); font-size: 19px; max-width: 34ch; }
.nf .ctas { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .nf .big i { animation: none; } }

.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.foot-legal a { text-decoration: none; }
.foot-legal a:hover { color: var(--fg); }
.lr-link { display: inline-flex; align-items: center; gap: 8px; }
.lr-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.lr[hidden], .lr [hidden] { display: none !important; }

/* Real case pages: screenshot slots and an "included" list */
.shot { background: var(--surface); color: var(--muted); }
.shot .shot-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cs-incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .cs-incl { grid-template-columns: 1fr; } }
.cs-incl li { border-top: 1px solid var(--line); padding-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.3; letter-spacing: -.01em; }
.cs-hero .ctas { margin-top: 8px; }

/* Real screenshots */
.shotimg { background: var(--surface); }
.shotimg img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.cs-cover.shotimg { aspect-ratio: 16 / 10; }
.g-phone { background: var(--surface); padding: 6% 0; }
.g-phone img { height: 100%; width: auto; max-width: 70%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border: 6px solid var(--fg); border-radius: 28px; display: block; }
.cover.cimg { background: var(--surface); }
.cover.cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.card:hover .cover.cimg img { transform: scale(1.03); }
.cover.cimg .view { z-index: 1; }

/* GROULI logo, light and dark */
.logo-img { height: 22px; width: auto; display: block; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-img { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
:root[data-theme="dark"] .logo-img { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; }
.foot1 .logo-img { height: 20px; }
.lr-link img { height: 34px; width: auto; border-radius: 4px; background: #FFFFFF; }

/* Recognitions */
.recog { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.recog .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.recog img { height: 44px; width: auto; border-radius: 8px; filter: grayscale(1); opacity: .85; transition: filter .3s, opacity .3s; }
.recog img:hover { filter: none; opacity: 1; }
.recog-strip { padding-block: 32px 0; }
.recog-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .recog-cards { grid-template-columns: 1fr; } }
.recog-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 16px; background: var(--card); }
.recog-card img { height: 56px; width: auto; align-self: flex-start; border-radius: 8px; }
.recog-card p { color: var(--muted); }

/* Footer v2 and recognitions strip (shared by every page) */
footer .inner.foot2 { display: flex; flex-direction: column; gap: 28px; padding-block: 48px 32px; border-top: 0; color: var(--muted); font-size: 14px; }
.foot2 a { text-decoration: none; color: inherit; transition: color .2s; }
.foot2 a:hover { color: var(--fg); }
.f-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.f-top nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.f-top .logo-img { height: 20px; }
.f-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.f-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.foot2 .lr-link { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 5px 14px 5px 5px; background: var(--card); color: var(--fg); font-weight: 500; }
.foot2 .lr-link img { height: 32px; width: auto; border-radius: 7px; background: #FFFFFF; display: block; }
.foot2 .lr-link:hover { border-color: var(--fg); }
.recog-strip { max-width: 1320px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 48px; }
.recog-strip img { height: 40px; width: auto; border-radius: 0; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; }
.recog-strip img:hover { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .recog-strip img { mix-blend-mode: normal; border-radius: 8px; } }
:root[data-theme="dark"] .recog-strip img { mix-blend-mode: normal; border-radius: 8px; }
.recog-card img { mix-blend-mode: multiply; }

.recog-strip .rg { display: inline-flex; align-items: center; gap: 16px; }
.recog-card h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

/* Recognition dialogs */
.recog-btn { background: none; border: 0; padding: 4px; margin: 0; cursor: pointer; border-radius: 10px; display: inline-flex; transition: transform .25s var(--ease); }
.recog-btn:hover { transform: translateY(-2px); }
.recog-btn:hover img { filter: none; opacity: 1; }
button.recog-card { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; transition: border-color .25s, transform .25s var(--ease); }
button.recog-card:hover { border-color: var(--fg); transform: translateY(-3px); }
.recog-card .more { font-weight: 600; font-size: 15px; color: var(--accent-ink); }
dialog.rdlg { border: 0; padding: 32px 28px 28px; border-radius: 24px; width: min(420px, calc(100vw - 32px)); background: var(--card); color: var(--fg); box-shadow: 0 40px 90px -30px rgba(0,0,0,.5); text-align: center; overflow: hidden; }
dialog.rdlg[open] { animation: dlgIn .45s var(--ease); display: flex; flex-direction: column; align-items: center; gap: 12px; }
dialog.rdlg::backdrop { background: rgba(12,12,14,.45); backdrop-filter: blur(4px); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.rdlg-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer; }
.rdlg-x:hover { border-color: var(--fg); }
.rdlg-logo { height: 52px; width: auto; }
.rdlg h3 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; margin-top: 4px; }
.rdlg-sub { color: var(--muted); font-size: 15.5px; max-width: 30ch; }
.rdlg-stat { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px; margin: 6px 0 2px; }
.rdlg-stat b { font-family: var(--display); font-weight: 650; font-size: 56px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rdlg-stat span { font-family: var(--display); font-weight: 650; font-size: 40px; color: var(--accent-ink); }
.rdlg-stat small { flex-basis: 100%; color: var(--muted); font-size: 14px; margin-top: 4px; }
.rdlg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 320px; }
.rdlg-chips i { font-style: normal; font-weight: 600; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--surface); }
.rdlg[open] .rdlg-chips i { animation: chipPop .5s var(--ease) both; }
.rdlg-chips i:nth-child(1) { animation-delay: .35s; } .rdlg-chips i:nth-child(2) { animation-delay: .45s; } .rdlg-chips i:nth-child(3) { animation-delay: .55s; }
.rdlg-chips i:nth-child(4) { animation-delay: .65s; } .rdlg-chips i:nth-child(5) { animation-delay: .75s; } .rdlg-chips i:nth-child(6) { animation-delay: .85s; }
@keyframes chipPop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.rdlg-steps { list-style: none; margin: 10px 0 4px; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.rdlg-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px; background: var(--line); }
.rdlg-steps::after { content: ""; position: absolute; left: 12.5%; top: 9px; height: 2px; width: 0; background: var(--accent); }
.rdlg[open] .rdlg-steps::after { animation: stepLine 1.6s var(--ease) .3s forwards; }
@keyframes stepLine { to { width: 75%; } }
.rdlg-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rdlg-steps li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); position: relative; z-index: 1; }
.rdlg[open] .rdlg-steps li::before { animation: stepDot .3s var(--ease) forwards; }
.rdlg[open] .rdlg-steps li { animation: stepTxt .3s var(--ease) forwards; }
.rdlg-steps li:nth-child(1), .rdlg-steps li:nth-child(1)::before { animation-delay: .3s !important; }
.rdlg-steps li:nth-child(2), .rdlg-steps li:nth-child(2)::before { animation-delay: .8s !important; }
.rdlg-steps li:nth-child(3), .rdlg-steps li:nth-child(3)::before { animation-delay: 1.3s !important; }
.rdlg-steps li:nth-child(4), .rdlg-steps li:nth-child(4)::before { animation-delay: 1.8s !important; }
@keyframes stepDot { to { background: var(--accent); border-color: var(--accent); } }
@keyframes stepTxt { to { color: var(--fg); } }
.rdlg-foot { font-size: 15px; color: var(--muted); max-width: 32ch; }
.rdlg-foot strong { color: var(--fg); }
@media (prefers-reduced-motion: reduce) {
  dialog.rdlg[open], .rdlg[open] .rdlg-chips i { animation: none; }
  .rdlg-steps::after { width: 75%; animation: none !important; }
  .rdlg-steps li::before { background: var(--accent); border-color: var(--accent); animation: none !important; }
  .rdlg-steps li { color: var(--fg); animation: none !important; }
}

/* Nosotros: copy left, vertical team gallery right */
.about-hero { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 64px; align-items: center; }
.about-copy { display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 860px) { .about-hero { grid-template-columns: 1fr; } }
.team-media { position: relative; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; justify-self: end; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.team-media .slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s var(--ease); }
.team-media .slide.on { opacity: 1; }
.team-media .slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-media .slide.empty img { display: none; }
.team-media .slide.empty::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.team-media .dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; z-index: 1; }
.team-media .dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--fg) 30%, transparent); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.team-media .dots button[aria-pressed="true"] { width: 24px; background: var(--fg); }
@media (prefers-reduced-motion: reduce) { .team-media .slide { transition: none; } }

/* Costa 21: timeline and photo collage */
.cl-timeline { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.cl-timeline::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 9px; height: 2px; background: var(--line); }
.cl-timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; font-weight: 600; font-size: clamp(13px, 1.3vw, 17px); }
.cl-timeline li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); position: relative; z-index: 1; }
.cl-timeline li:last-child::before { background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent); }
.collage { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 16vw, 230px); gap: 12px; }
.cl-item { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.cl-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.cl-item:hover img { transform: scale(1.04); }
.cl-item figcaption { position: absolute; left: 10px; bottom: 10px; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--fg); }
.cl-item.empty img { display: none; }
.cl-item.empty::after { content: "Foto: " attr(data-label); position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cl-item.empty figcaption { display: none; }
.cl-v { grid-row: span 2; }
.cl-h { grid-column: span 2; }
.cl-s { grid-column: span 1; }
.cl-b { grid-column: span 2; grid-row: span 2; }
.cover-fb img, .cover.cimg.fb img { object-position: 50% 45%; }
.cs-cover.cover-fb { aspect-ratio: 16 / 8; overflow: hidden; position: relative; }
.cs-cover.cover-fb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Costa 21: video pair */
.cs-vids { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 16px; justify-content: center; }
.cs-vid { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-vid video, .cs-vid iframe, .yt-facade { width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: block; object-fit: cover; }
.cs-vid iframe { border: 0; }
.cs-vid figcaption { font-size: 14px; color: var(--muted); text-align: center; }
.cs-vid figcaption a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.yt-facade { position: relative; cursor: pointer; padding: 0; background-size: cover; background-position: center; overflow: hidden; color: #fff; font: inherit; }
.yt-facade::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15) 55%); }
.yt-facade b { position: absolute; left: 18px; right: 18px; bottom: 18px; font-family: var(--display); font-size: 22px; font-weight: 650; text-align: left; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--accent); transition: transform .3s var(--ease); }
.yt-play::after { content: ""; position: absolute; left: 27px; top: 22px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #fff; }
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { transform: scale(1.08); }
@media (max-width: 760px) { .cs-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .yt-facade b { font-size: 16px; left: 12px; bottom: 12px; } }
@media (max-width: 760px) { .collage { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cl-timeline li { font-size: 12px; } }
.cover-fb.empty img { display: none; }
.cover-fb.empty { background: var(--fg); color: var(--bg); display: grid; place-items: center; }
.cover-fb.empty::after { content: attr(data-label); font-family: var(--display); font-weight: 650; font-size: clamp(48px, 9vw, 150px); letter-spacing: -.04em; }
.cover.cimg.fb.empty { background: var(--fg); }
.cover.cimg.fb.empty img { display: none; }
.cover.cimg.fb.empty::after { content: attr(data-label); color: var(--bg); font-family: var(--display); font-weight: 650; font-size: clamp(44px, 6.4vw, 104px); letter-spacing: -.035em; }
/* Costa 21: video tiles + lightbox */
.cl-vidtile .cl-open { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 50%); cursor: pointer; }
.cl-vidtile:hover .yt-play, .cl-open:focus-visible .yt-play { transform: scale(1.08); }
.cl-vidtile figcaption { pointer-events: none; }
.vid-dlg { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.vid-dlg::backdrop { background: rgba(10,10,12,.82); backdrop-filter: blur(6px); }
.vid-dlg[open] { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: vidIn .35s var(--ease); }
.vid-box video, .vid-box iframe { display: block; height: min(82vh, 760px); aspect-ratio: 9 / 16; width: auto; max-width: 92vw; border: 0; border-radius: 18px; background: #000; }
.vid-cap { margin: 0; color: #fff; font-size: 14px; text-align: center; }
.vid-cap a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vid-x { position: absolute; top: -6px; right: -54px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 24px; line-height: 1; cursor: pointer; }
@media (max-width: 760px) { .vid-x { right: 6px; top: 6px; z-index: 2; } }
@keyframes vidIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .vid-dlg[open] { animation: none; } }
/* Behind the scenes row */
.bts-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bts-item { aspect-ratio: 9 / 16; }
@media (max-width: 900px) { .bts-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Web loop: animated scroll through a client site */
.web-loop { margin: 0 0 16px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.wl-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.wl-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.wl-bar span { margin: 0 auto; transform: translateX(-24px); font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--card); padding: 4px 16px; border-radius: 999px; }
.wl-view { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: #fff; }
.wl-view img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; display: block; animation: wlScroll 30s infinite; will-change: transform; }
.web-loop:hover .wl-view img { animation-play-state: paused; }
@keyframes wlScroll {
  0.00% { transform: translateY(-0.000%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  7.46% { transform: translateY(-0.000%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  12.36% { transform: translateY(-13.958%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  19.82% { transform: translateY(-13.958%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  24.73% { transform: translateY(-25.068%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  32.19% { transform: translateY(-25.068%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  37.09% { transform: translateY(-39.880%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  44.55% { transform: translateY(-39.880%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  49.45% { transform: translateY(-51.275%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  56.91% { transform: translateY(-51.275%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  61.81% { transform: translateY(-66.372%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  69.27% { transform: translateY(-66.372%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  74.18% { transform: translateY(-75.488%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  81.64% { transform: translateY(-75.488%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  86.54% { transform: translateY(-87.181%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  94.00% { transform: translateY(-87.181%); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .wl-view img { animation: none; } }
@media (max-width: 560px) { .wl-bar { height: 30px; } .wl-bar span { font-size: 10px; padding: 2px 10px; } }
/* Web process: crossfading photos synced with steps */
.wp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-bottom: clamp(40px, 5vw, 72px); }
.wp-media { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.wp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: wpFade 16s infinite; }
.wp-media img:nth-child(2), .wp-steps li:nth-child(2), .wp-steps li:nth-child(2)::after { animation-delay: 4s; }
.wp-media img:nth-child(3), .wp-steps li:nth-child(3), .wp-steps li:nth-child(3)::after { animation-delay: 8s; }
.wp-media img:nth-child(4), .wp-steps li:nth-child(4), .wp-steps li:nth-child(4)::after { animation-delay: 12s; }
.wp-text h3 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -.02em; line-height: 1.1; margin: 10px 0 28px; }
.wp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wp-steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0 18px; border-top: 1px solid var(--line); opacity: .4; animation: wpStep 16s infinite; }
.wp-steps li::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent); animation: wpBar 16s linear infinite; }
.wp-steps li > span { font-size: 13px; color: var(--accent-ink); padding-top: 3px; }
.wp-steps b { font-weight: 600; font-size: 18px; }
.wp-steps p { margin: 4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
@keyframes wpFade { 0% { opacity: 0; transform: scale(1.05); } 4%, 25% { opacity: 1; } 29% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes wpStep { 0%, 25% { opacity: 1; } 29%, 100% { opacity: .4; } }
@keyframes wpBar { 0% { width: 0; } 25% { width: 100%; } 26%, 100% { width: 0; } }
@media (max-width: 860px) { .wp { grid-template-columns: 1fr; } .wp-media { max-width: 460px; } }
@media (prefers-reduced-motion: reduce) {
  .wp-media img, .wp-steps li, .wp-steps li::after { animation: none; }
  .wp-media img:first-child { opacity: 1; }
  .wp-steps li { opacity: 1; }
}
/* Three phones in a row */
.cs-gallery:has(> .phones) { display: block; margin-top: clamp(16px, 2vw, 28px); }
.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 64px); padding: clamp(32px, 5vw, 72px) clamp(16px, 6vw, 110px); border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.phone { margin: 0; padding: 10px; border-radius: 44px; background: #111214; box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); }
.phone:nth-child(2) { transform: translateY(clamp(16px, 3vw, 40px)); }
.phone-screen { position: relative; aspect-ratio: 390 / 844; border-radius: 34px; overflow: hidden; background: #fff; padding-top: 12%; }
.phone-screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 999px; background: #111214; z-index: 1; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (max-width: 640px) { .phones { gap: 10px; padding: 24px 12px 40px; } .phone { padding: 5px; border-radius: 22px; } .phone-screen { border-radius: 18px; } .phone-screen::before { top: 5px; height: 10px; } }
/* Flipbook */
.flip { outline: none; }
.flip-stage { perspective: 2800px; padding: clamp(24px, 3.5vw, 48px) clamp(12px, 3vw, 48px); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.book { position: relative; width: min(100%, 820px); margin: 0 auto; aspect-ratio: 1190 / 842; transition: transform .9s cubic-bezier(.645,.045,.355,1); }
.book.at-start { transform: translateX(-25%); }
.book.at-end { transform: translateX(25%); }
.leaf { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.645,.045,.355,1); cursor: pointer; }
.leaf.flipped { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: #fff; box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); }
.face img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.face.back { transform: rotateY(180deg); }
.face.front::after, .face.back::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.face.front::after { background: linear-gradient(to right, rgba(0,0,0,.16), rgba(0,0,0,0) 7%); }
.face.back::after { background: linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0) 7%); }
.leaf:not(.flipped):hover .face.front { box-shadow: 0 22px 44px -20px rgba(0,0,0,.5); }
.flip-ui { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.flip-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 18px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.flip-btn:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.flip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.flip-btn:disabled { opacity: .35; cursor: default; }
.flip-count { min-width: 210px; text-align: center; font-size: 13px; color: var(--muted); }
.flip-hint { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.flip-hint a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.flip:focus-visible .flip-stage { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 640px) { .flip-count { min-width: 0; font-size: 12px; } .flip-btn { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .book, .leaf { transition: none; } }
/* Brief generator */
.cz-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bf-tag { display: block; margin-bottom: 14px; color: var(--accent-ink); }
.bf-sub { margin: 28px 0 12px; font-weight: 600; font-size: 15px; }
.bf-sub small { font-weight: 400; color: var(--muted); }
.bf-page .cz-step .cz-cur { margin-bottom: 14px; }
.bf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 28px 0 8px; }
.bf-sent { font-weight: 600; color: var(--accent-ink); }
.bf-doc { margin-top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: clamp(24px, 5vw, 56px); }
.bf-doc-head { border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 8px; }
.bf-doc-head .mono { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.bf-doc-head h2 { font-family: var(--display); font-weight: 650; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.03em; line-height: 1.05; margin: 10px 0 6px; }
.bf-doc-head p { margin: 0; color: var(--muted); font-size: 14px; }
.bf-doc section { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.bf-doc section > .mono { font-size: 13px; color: var(--muted); padding-top: 3px; }
.bf-doc h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.bf-doc p, .bf-doc li { margin: 0; font-size: 16px; line-height: 1.55; }
.bf-doc ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.bf-doc footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font-size: 13px; color: var(--muted); }
.bf-restart { margin-top: 20px; background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media print {
  .bf-page .cz-top, .bf-page .cz-nav, .bf-page .bf-result > :not(.bf-doc) { display: none !important; }
  .bf-page, .bf-page .cz-main { background: #fff !important; color: #111 !important; min-height: 0; }
  .bf-page .cz-main > .inner { padding: 0; max-width: none; }
  .bf-doc { border: 0; padding: 0; margin: 0; background: #fff; color: #111; }
  .bf-doc section { break-inside: avoid; }
  @page { size: A4; margin: 18mm; }
}
/* Home: brief promo band */
.brief-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.brief-band h2 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.brief-band p { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
/* Brief fixes: full-width fields, consent row, active currency, Otros field, contact block */
.cz-fields.two > .full { grid-column: 1 / -1; }
.cz-field.cz-consent { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; cursor: pointer; }
.cz-field.cz-consent input { width: 20px; height: 20px; min-height: 0; flex: none; margin: 2px 0 0; padding: 0; border-radius: 4px; box-shadow: none; accent-color: var(--fg); }
.cz-field.cz-consent span { line-height: 1.5; }
.bf-otros { grid-column: span 2; justify-content: center; }
@media (max-width: 640px) { .bf-otros { grid-column: 1 / -1; } }
.bf-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 24px 0 0; padding: 20px; border-radius: 14px; background: var(--surface); }
.bf-contact dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bf-contact dd { margin: 6px 0 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .bf-contact { grid-template-columns: 1fr; } }
/* Brief: WhatsApp send button */
.btn.bf-wsp { display: inline-flex; align-items: center; gap: 10px; }
.btn.bf-wsp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
/* Selection states: cobalt tint, so choices never look like the black action buttons */
.cz-chip[aria-checked="true"], .cz-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.cz-chip[aria-checked="true"]::before, .cz-chip[aria-pressed="true"]::before { content: "✓ "; }
.cz-chip:hover { border-color: var(--accent); }
.cz-cur { border: 1.5px solid var(--line); background: var(--card); }
.cz-cur button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cz-opt:hover { border-color: var(--accent); }
.cz-opt[aria-pressed="true"], .cz-opt[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.cz-opt[aria-pressed="true"] .tick, .cz-opt[aria-checked="true"] .tick { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.cz-field.cz-consent input { accent-color: var(--accent); }
/* Step forms: the nav bar stays fixed at the bottom so "Siguiente" never moves */
.cz-main .cz-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0;
  padding: 14px max(var(--gutter-r), calc((100vw - 820px) / 2)) calc(14px + env(safe-area-inset-bottom)) max(var(--gutter-l), calc((100vw - 820px) / 2));
  background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.cz-main .cz-nav .cz-err { flex: 1; text-align: center; margin: 0; }
.cz-main > .inner { padding-bottom: 140px; }
/* Anti-spam honeypot: off screen for people, visible to bots */
.hp-field { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Nosotros: film roll wall */
.team-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-media::after, .pola-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.roll { padding-block: clamp(32px, 5vw, 72px); }
.pola-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); align-items: start; }
.pola-col:nth-child(2) { padding-top: clamp(24px, 4vw, 64px); }
.pola { --r: -1.6deg; position: relative; break-inside: avoid; margin: 0 0 clamp(24px, 3vw, 40px); padding: 10px 10px 0; background: #F3EFE6; color: #26241F; border-radius: 4px; transform: rotate(var(--r)); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 34px -18px rgba(0,0,0,.45); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.pola:nth-child(2) { --r: 1.8deg; } .pola:nth-child(3) { --r: -.8deg; }
.pola-col:nth-child(2) .pola:nth-child(1) { --r: 2.2deg; } .pola-col:nth-child(2) .pola:nth-child(2) { --r: -2.4deg; } .pola-col:nth-child(2) .pola:nth-child(4) { --r: 1.4deg; }
.pola-col:nth-child(3) .pola:nth-child(1) { --r: 1.1deg; } .pola-col:nth-child(3) .pola:nth-child(2) { --r: -1.9deg; } .pola-col:nth-child(3) .pola:nth-child(3) { --r: 2deg; }
.pola::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.04); transform: rotate(calc(var(--r) * -2)); z-index: 2; backdrop-filter: blur(1px); }
.pola:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 28px 50px -20px rgba(0,0,0,.5); z-index: 3; }
.pola-media { position: relative; overflow: hidden; background: #1a1a1a; }
.pola-media img, .pola-media video { width: 100%; height: auto; display: block; }
.pola figcaption { display: flex; align-items: baseline; gap: 10px; padding: 14px 4px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pola figcaption span { color: #8A8578; }
.rec { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF4A3D; animation: recBlink 1.4s steps(2, start) infinite; }
@keyframes recBlink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .pola { transition: none; } .rec::before { animation: none; } }
@media (max-width: 760px) { .pola-wall { display: block; columns: 2; column-gap: 14px; padding-top: 10px; } .pola-col { display: contents; } .pola { display: inline-block; width: 100%; } }
@media (max-width: 560px) { .pola { padding: 6px 6px 0; } .pola figcaption { font-size: 10px; padding: 10px 2px 12px; gap: 6px; flex-direction: column; } .pola::before { width: 60px; height: 18px; margin-left: -30px; top: -8px; } }
/* Trabajos: full-screen vertical feed */
.wk-page { overflow: hidden; }
.wk-top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gutter-r) 16px var(--gutter-l); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wk-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.wk-title b { margin-left: 10px; color: var(--fg); font-weight: 500; }
.wk-feed { height: 100vh; height: 100svh; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; outline: none; scrollbar-width: none; }
.wk-feed::-webkit-scrollbar { display: none; }
.wk { box-sizing: border-box; height: 100vh; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; padding: 84px calc(var(--gutter-r) + 40px) 48px var(--gutter-l); }
.wk-inner { width: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.wk-media { position: relative; }
.wk-loop { margin: 0; }
.wk .wl-view img { animation: wkScroll 20s cubic-bezier(.65,0,.35,1) infinite; animation-play-state: paused; }
.wk.active .wl-view img { animation-play-state: running; }
@keyframes wkScroll { 0%, 12% { transform: translateY(0); } 30%, 38% { transform: translateY(calc(var(--end, 66.667%) * -.33)); } 56%, 64% { transform: translateY(calc(var(--end, 66.667%) * -.66)); } 82%, 92% { transform: translateY(calc(var(--end, 66.667%) * -1)); } 100% { transform: translateY(0); } }
.wk-phone { position: absolute; right: -3%; bottom: -10%; width: 21%; z-index: 2; }
.wk-phone.phone { padding: 6px; border-radius: 26px; }
.wk-phone .phone-screen { border-radius: 21px; }
.wk-phone .phone-screen::before { top: 6px; height: 12px; }
.wk-info h2 { font-size: clamp(34px, 4vw, 60px); font-weight: 600; line-height: 1.02; letter-spacing: -.03em; margin: 14px 0 16px; }
.wk-info p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.55; max-width: 38ch; }
.wk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.wk-side { position: fixed; right: max(12px, calc(var(--gutter-r) - 28px)); top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wk-dots { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wk-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 25%, transparent); cursor: pointer; transition: height .3s var(--ease), background .3s; }
.wk-dots button[aria-current="true"] { height: 28px; background: var(--fg); }
.wk-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 16px; cursor: pointer; }
.wk-arrow:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.wk-arrow:focus-visible, .wk-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wk-hint { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: opacity .4s; pointer-events: none; }
.wk-hint span { display: inline-block; animation: wkBob 1.6s ease-in-out infinite; }
.wk-hint.gone { opacity: 0; }
@keyframes wkBob { 50% { transform: translateY(4px); } }
.wk-swipe { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px; scrollbar-width: thin; }
.wk-swipe img { flex: 0 0 100%; width: 100%; height: min(68svh, 620px); object-fit: contain; scroll-snap-align: center; background: var(--surface); border-radius: 18px; }
@media (max-width: 860px) {
  .wk { padding: 76px 16px 44px; align-items: flex-start; }
  .wk-inner { grid-template-columns: 1fr; gap: 26px; padding-top: 4vh; }
  .wk-phone { width: 20%; right: 4%; bottom: 8%; }
  .wk-title { white-space: nowrap; font-size: 11px; }
  .wk-info h2 { font-size: 32px; margin: 10px 0 10px; }
  .wk-info p { font-size: 15px; }
  .wk-cta { margin-top: 18px; }
  .wk-side { right: 6px; } .wk-arrow { display: none; }
  .wk-title b { margin-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .wk .wl-view img { animation: none; } .wk-hint span { animation: none; } .mini-cover img { transition: none; } }
/* Trabajos: folders that flip front/back */
.wk-folder { display: grid; justify-items: center; gap: 14px; }
.fold { position: relative; border: 0; padding: 0; background: none; cursor: pointer; perspective: 2200px; height: min(66svh, 640px); aspect-ratio: 69 / 100; }
.fold-card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.645,.045,.355,1); }
.fold[aria-pressed="true"] .fold-card { transform: rotateY(180deg); }
.fold-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.08); }
.fold-back { transform: rotateY(180deg); }
.fold:hover .fold-card { transform: rotateY(-8deg); }
.fold[aria-pressed="true"]:hover .fold-card { transform: rotateY(172deg); }
.fold:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.fold-hint { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fold-hint span { color: var(--fg); }
@media (max-width: 860px) { .fold { height: 52svh; } }
@media (prefers-reduced-motion: reduce) { .fold-card { transition: none; } .fold:hover .fold-card { transform: none; } .fold[aria-pressed="true"]:hover .fold-card { transform: rotateY(180deg); } }
.fold.fold-card-shape { height: auto; width: min(100%, 620px); aspect-ratio: 931 / 568; }
.fold-card-shape .fold-card img { border-radius: 10px; }
@media (max-width: 860px) { .fold.fold-card-shape { height: auto; width: 100%; } }
/* Bold style (data-style="bold" on <html>, set in _fuente/seo.py). Everything here is off in classic. */
.h-clip, .side-word, .scroll-band { display: none; }
[data-style="bold"] .h-clip { display: inline-block; position: relative; width: 1.7em; height: .74em; margin: 0 .04em; border-radius: 999px; overflow: hidden; vertical-align: .02em; background: var(--surface); }
[data-style="bold"] .h-clip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
[data-style="bold"] .has-side { position: relative; }
[data-style="bold"] .side-word { display: block; position: absolute; left: var(--gutter-l); top: clamp(48px, 6vw, 96px); writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); font-weight: 700; font-size: clamp(72px, 8.4vw, 150px); line-height: .82; letter-spacing: -.03em; text-transform: uppercase; color: var(--accent); pointer-events: none; user-select: none; }
[data-style="bold"] .has-side > .inner { padding-left: clamp(84px, 9vw, 168px); }
[data-style="bold"] .scroll-band { display: block; overflow: hidden; padding: clamp(32px, 5vw, 72px) 0; }
[data-style="bold"] .sb-line { white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(56px, 9vw, 150px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; will-change: transform; }
[data-style="bold"] .sb-fill { color: var(--fg); }
[data-style="bold"] .sb-stroke { color: transparent; -webkit-text-stroke: 1.5px var(--fg); transform: translate3d(-30%, 0, 0); }
@media (max-width: 860px) {
  [data-style="bold"] .side-word { display: none; }
  [data-style="bold"] .has-side > .inner { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .sb-stroke { transform: none; } }
@media (max-width: 560px) { [data-style="bold"] .hero h1 .h-clip { display: none; } }
/* Bold style: BBDO-like header (logo corner + hamburger, full-screen menu) on every page */
[data-style="bold"] .top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-style="bold"] .top .nav, [data-style="bold"] .top .inner > .btn { display: none; }
[data-style="bold"] .menu-btn { display: inline-flex; position: relative; width: 46px; height: 46px; padding: 0; margin-left: auto; border: 0; border-radius: 50%; font-size: 0; color: var(--fg); background: transparent; z-index: 32; }
[data-style="bold"] .menu-btn::before, [data-style="bold"] .menu-btn::after { content: ""; position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), box-shadow .35s var(--ease), top .35s var(--ease); }
[data-style="bold"] .menu-btn::before { top: 15px; box-shadow: 0 7px 0 currentColor; }
[data-style="bold"] .menu-btn::after { top: 29px; }
[data-style="bold"] .menu-btn[aria-expanded="true"]::before { top: 22px; box-shadow: none; transform: rotate(45deg); }
[data-style="bold"] .menu-btn[aria-expanded="true"]::after { top: 22px; transform: rotate(-45deg); }
[data-style="bold"] .menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
[data-style="bold"] .top .logo { position: relative; z-index: 32; }
[data-style="bold"] .top .mobile-nav { display: flex; flex-direction: column; justify-content: center; gap: 0; position: fixed; inset: 0; z-index: 31; max-width: none; margin: 0; padding: 96px var(--gutter-r) 48px var(--gutter-l); background: var(--accent); color: #fff; }
[data-style="bold"] .top .mobile-nav[hidden] { display: none; }
[data-style="bold"] .mobile-nav a { color: #fff; border: 0; padding: 4px 0; font-family: var(--display); font-weight: 700; font-size: clamp(44px, 8vw, 120px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; text-decoration: none; transition: opacity .2s, transform .3s var(--ease); }
[data-style="bold"] .mobile-nav a:hover { transform: translateX(10px); }
[data-style="bold"] .mobile-nav .btn { align-self: flex-start; margin-top: 36px; font-size: 18px; text-transform: none; letter-spacing: 0; background: #fff; color: var(--accent-ink); border-color: #fff; box-shadow: none; }
[data-style="bold"] .top:has(.mobile-nav:not([hidden])) .menu-btn { color: #fff; }
[data-style="bold"] .top:has(.mobile-nav:not([hidden])) .logo-img { display: none; }
[data-style="bold"] .top:has(.mobile-nav:not([hidden])) .logo-dark { display: block; }
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .menu-btn::before, [data-style="bold"] .menu-btn::after, [data-style="bold"] .mobile-nav a { transition: none; } }

/* Bold style: home hero is a full-screen video, the header floats on it until you scroll past */
.hero-bg { display: none; }
[data-style="bold"] .top.on-video { position: fixed; left: 0; right: 0; top: 0; background: transparent; border-bottom-color: transparent; transition: background .3s, border-color .3s; }
[data-style="bold"] .top.on-video.past-hero { background: var(--bg); border-bottom-color: var(--line); }
[data-style="bold"] .top.on-video:not(.past-hero) .menu-btn { color: #fff; }
[data-style="bold"] .top.on-video:not(.past-hero) .logo-img { display: none; }
[data-style="bold"] .top.on-video:not(.past-hero) .logo-dark { display: block; }
[data-style="bold"] .hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 0; display: flex; align-items: flex-end; overflow: hidden; background: #0d0e12; isolation: isolate; }
[data-style="bold"] .hero-bg { display: block; position: absolute; inset: 0; z-index: -1; }
[data-style="bold"] .hero-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-style="bold"] .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,11,15,.88) 0%, rgba(10,11,15,.35) 45%, rgba(10,11,15,.15) 70%, rgba(10,11,15,.45) 100%); }
[data-style="bold"] .hero .board { display: none; }
[data-style="bold"] .hero-copy { max-width: none; width: 100%; margin: 0; align-items: flex-start; text-align: left; gap: 18px; padding: 0 var(--gutter-r) clamp(48px, 8vh, 96px) var(--gutter-l); color: #fff; }
[data-style="bold"] .hero h1 { font-size: clamp(48px, 7.2vw, 132px); line-height: .96; font-weight: 650; letter-spacing: -.04em; color: #fff; }
[data-style="bold"] .hero h1 .grad-text { color: #8FA6FF; -webkit-text-fill-color: #8FA6FF; background: none; }
[data-style="bold"] .hero-sub { color: rgba(255,255,255,.82); max-width: 44ch; text-wrap: pretty; }
[data-style="bold"] .h-clip { border: 1px solid rgba(255,255,255,.25); }
@media (max-width: 560px) {
  [data-style="bold"] .hero h1 { font-size: 48px; }
  [data-style="bold"] .hero-copy { padding-bottom: 40px; }
}
/* Bold hero fixes: align with the logo, readable recognitions on video, menu button padding */
[data-style="bold"] .hero-copy { padding-left: max(var(--gutter-l), calc((100% - 1320px) / 2)); padding-right: max(var(--gutter-r), calc((100% - 1320px) / 2)); padding-bottom: clamp(110px, 16vh, 160px); }
[data-style="bold"] .top .mobile-nav { padding-left: max(var(--gutter-l), calc((100% - 1320px) / 2)); padding-right: max(var(--gutter-r), calc((100% - 1320px) / 2)); }
[data-style="bold"] .hero .recog-strip { position: absolute; left: max(var(--gutter-l), calc((100% - 1320px) / 2)); right: max(var(--gutter-r), calc((100% - 1320px) / 2)); bottom: 28px; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.18); justify-content: flex-start; gap: 12px 40px; }
[data-style="bold"] .hero .recog .lbl { color: rgba(255,255,255,.7); }
[data-style="bold"] .hero .recog img { filter: brightness(0) invert(1); mix-blend-mode: normal; opacity: .85; height: 34px; }
[data-style="bold"] .hero .recog img:hover { opacity: 1; filter: brightness(0) invert(1); }
[data-style="bold"] .mobile-nav .btn { padding: 15px 26px; font-weight: 600; }
@media (max-width: 560px) {
  [data-style="bold"] .hero-copy { padding-bottom: 150px; }
  [data-style="bold"] .hero .recog-strip { gap: 10px 22px; bottom: 20px; }
  [data-style="bold"] .hero .recog img { height: 26px; }
  [data-style="bold"] .hero .recog .lbl { font-size: 10px; }
}
[data-style="bold"] .hero .recog .rg { display: inline-flex; flex-direction: row; align-items: center; gap: 14px; }
/* Bold menu: translucent cobalt over a blurred page, slow BBDO-like open and close */
[data-style="bold"] .top .mobile-nav { background: rgba(45, 91, 255, .78); -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1); animation: menuIn .7s cubic-bezier(.76,0,.24,1) both; }
[data-style="bold"] .top .mobile-nav.closing { animation: menuOut .52s cubic-bezier(.76,0,.24,1) both; }
[data-style="bold"] .top .mobile-nav a { opacity: 0; transform: translateY(40px); animation: menuLink .7s cubic-bezier(.2,.8,.2,1) forwards; }
[data-style="bold"] .top .mobile-nav a:nth-child(1) { animation-delay: .28s; }
[data-style="bold"] .top .mobile-nav a:nth-child(2) { animation-delay: .36s; }
[data-style="bold"] .top .mobile-nav a:nth-child(3) { animation-delay: .44s; }
[data-style="bold"] .top .mobile-nav a:nth-child(4) { animation-delay: .52s; }
[data-style="bold"] .top .mobile-nav a:nth-child(5) { animation-delay: .62s; }
[data-style="bold"] .top .mobile-nav.closing a { animation: none; opacity: 1; transform: none; }
@keyframes menuIn { from { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } }
@keyframes menuOut { from { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } }
@keyframes menuLink { to { opacity: 1; transform: none; } }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { [data-style="bold"] .top .mobile-nav, [data-style="bold"] .top .mobile-nav a { animation: none; opacity: 1; transform: none; } }
/* Libro de Reclamaciones: copy of the sheet after sending, printable */
.lr-copy { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 20px; margin: 28px 0 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.lr-copy dt { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.lr-copy dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 560px) { .lr-copy { grid-template-columns: 1fr; } .lr-copy dd { margin-bottom: 8px; } }
@media print { .top, footer, .pg-hero, .lr-done .ctas, #lr-preview, .skip { display: none !important; } .lr-copy { border: 0; padding: 0; } }
/* Libro de Reclamaciones: entry point to the external book */
.lr-gate { display: grid; grid-template-columns: auto 1fr; gap: 24px 32px; align-items: start; max-width: 860px; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.lr-gate img { width: 96px; height: auto; border-radius: 8px; }
.lr-gate p { margin: 0 0 14px; line-height: 1.6; }
.lr-gate .ctas { margin: 8px 0 18px; }
@media (max-width: 560px) { .lr-gate { grid-template-columns: 1fr; } }
/* Nosotros: the studio polaroid, bigger, leading the wall */
.pola-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; margin: 0 0 clamp(28px, 4vw, 48px); }
.pola.pola-big { --r: 1.6deg; margin: 0; }
.pola.pola-big-l { --r: -1.8deg; margin-top: clamp(16px, 3vw, 40px); }
@media (max-width: 760px) { .pola-feature { grid-template-columns: 1fr; } .pola.pola-big-l { margin-top: 0; } }
@media (max-width: 760px) { .pola.pola-big { width: 100%; } }