/* ==============================================================================
   VELACCIO V2 — secciones: la portada (texto, showreel, servicios, trabajo,
   manifiesto) y los bloques que comparten otras páginas (palancas y esfera,
   tarjetas de trabajo, FAQ). Provenance ref: VEL-PROV-9K4XQ7M2
   ============================================================================== */

/* 12-column grid for the desktop compositions. */
.g12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 1024px) { .g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } }

/* ── portada ───────────────────────────────────────────────────────────────
   Text only, on white: one sentence that says what we do, the clients and the
   five services. The white turns into the grey of the services below, so there
   is no cut. Everything is CSS: nothing waits for a script or a video. */
.hx {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 100svh;
  padding-top: var(--hd-h);
}
.hx::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: -1; height: 140px; background: linear-gradient(transparent, var(--c-grey)); pointer-events: none; }

.hx__in { display: grid; justify-items: center; align-content: center; gap: 22px; text-align: center; padding-block: clamp(32px, 7vh, 88px) 24px; }
.hx__h {
  max-width: 15ch; font-family: var(--f-serif); font-size: clamp(2.5rem, 1.1rem + 4.8vw, 5.875rem);
  line-height: 1.02; letter-spacing: -.035em; text-wrap: balance;
}
/* each line rises out of its own mask */
.hx__ln { display: block; overflow: clip; padding-bottom: .24em; margin-bottom: -.24em; }
.hx__ln > span { display: inline-block; }
.js .hx__ln > span { animation: hx-line 1.2s var(--ease) .08s both; }
.js .hx__ln + .hx__ln > span { animation-delay: .18s; }
@keyframes hx-line { from { transform: translateY(108%); } to { transform: none; } }
.hx__em { font-style: normal; white-space: nowrap; }
.hx__lead { max-width: 42ch; font-size: clamp(1rem, .94rem + .3vw, 1.1875rem); line-height: 1.5; letter-spacing: .01em; color: var(--fg-2); text-wrap: balance; }
.hx__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.hx__ctas .bo { height: 44px; padding: 0 18px; font-size: .875rem; }
.js .hx__lead, .js .hx__ctas, .js .hx__idx li { animation: hx-in 1s var(--ease) both; }
.js .hx__lead { animation-delay: .38s; }
.js .hx__ctas { animation-delay: .48s; }
.js .hx__idx li { animation-delay: calc(.62s + var(--n, 0) * 60ms); }
@keyframes hx-in { from { opacity: 0; transform: translateY(14px); } }

/* the clients, as one-colour marks (keyed out of their app icons into
   assets/v2/logos/, painted with currentColor like the Velaccio logo) */
.hx__cl { display: grid; justify-items: center; gap: 14px; margin-top: clamp(12px, 3vh, 36px); }
.hx__cl-t { font-size: .75rem; letter-spacing: .02em; color: var(--fg-3); }
.hx__cl-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px clamp(28px, 4vw, 52px); color: var(--c-black); }
.hx__cl-l li { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; }
.cl { display: block; height: 30px; aspect-ratio: 1; background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.cl--cavviar { --m: url(../../assets/v2/logos/cavviar.png); height: 26px; }
.cl--vicio { --m: url(../../assets/v2/logos/vicio-full.png); height: 20px; aspect-ratio: 480 / 123; }
.cl--ols { --m: url(../../assets/v2/logos/ols.png); height: 42px; aspect-ratio: 191 / 120; }
.cl--vinno { --m: url(../../assets/v2/logos/vinno.png); height: 44px; aspect-ratio: 788 / 347; }
.js .hx__cl { animation: hx-in 1s var(--ease) .56s both; }

/* what we do, in five words you can click — glass pills over the light */
.hx__idx { padding: 0 var(--gutter) max(22px, env(safe-area-inset-bottom)); }
.hx__idx ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.hx__idx li:nth-child(2) { --n: 1; } .hx__idx li:nth-child(3) { --n: 2; } .hx__idx li:nth-child(4) { --n: 3; } .hx__idx li:nth-child(5) { --n: 4; }
.hx__idx a {
  display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px 0 11px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px rgba(13, 13, 13, .07); color: var(--c-black);
  font-size: .875rem; letter-spacing: .01em; white-space: nowrap;
  transition: background-color .3s var(--ease-soft), transform .5s var(--ease);
}
.hx__idx a:hover, .hx__idx a:focus-visible { background: #fff; transform: translateY(-2px); }
.hx__idx .nb { width: 20px; height: 20px; }
@media (max-width: 559px) {
  .hx__idx a { height: 36px; padding: 0 13px 0 8px; font-size: .8125rem; gap: 7px; }
  .hx__idx .nb { width: 18px; height: 18px; font-size: .625rem; }
}
@media (prefers-reduced-motion: reduce) { .hx__ln > span { animation: none !important; } }

/* ── servicios: la rejilla ──────────────────────────────────────────────────
   After inBeat's services grid, on the grey theme: white cards that say
   everything each service includes. Velaccio's turn: the piece on top of
   every card, the light following the cursor inside it, and a warm hairline
   drawn along the top on hover. */
.svx__head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); }
.svx__head p { max-width: 46ch; }
@media (min-width: 1024px) {
  .svx__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .svx__head h2 { grid-column: 1 / 7; max-width: 18em; }
  .svx__head p { grid-column: 8 / 13; }
}
.svx__grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .svx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; } .sv--ads, .sv--leads { grid-column: 1 / -1; } .sv--web { order: 1; } .sv--leads { order: 2; } }
@media (min-width: 1100px) { .svx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .sv--ads, .sv--leads { grid-column: span 2; } }

.sv { display: flex; }
.sv__card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%;
  border-radius: 20px; background: var(--svc, #fff); color: var(--c-black);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease);
}
.sv__card:hover { transform: translateY(-4px); box-shadow: 0 34px 64px -38px rgba(13, 13, 13, .38); }
.sv__card:focus-within { outline: 2px solid var(--c-black); outline-offset: 3px; }
.sv__card :focus-visible { outline: none; }

.sv__media { position: relative; aspect-ratio: 16 / 10; margin: 8px 8px 0; border-radius: 14px; overflow: hidden; background: #161616; }
.sv__media > .media, .sv__media > .art { position: absolute; inset: 0; transition: transform 1.2s var(--ease); }
.sv__media .media > img, .sv__media .media > video { object-position: 50% 30%; }
.sv__card:hover .sv__media > .media, .sv__card:hover .sv__media > .art { transform: scale(1.04); }
.sv__cap, .pv__cap {
  position: absolute; left: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: .3em; height: 24px; padding: 0 9px;
  border-radius: 999px; background: rgba(13, 13, 13, .45); color: #fff; font-size: .6875rem; letter-spacing: .02em; white-space: nowrap;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pv__k { opacity: .72; }
.sv__body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 18px 20px 22px; }
.sv__top { display: flex; align-items: center; justify-content: space-between; }
.sv__go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; transition: transform .5s var(--ease), background-color .3s, color .3s; }
.sv__go svg { width: 12px; height: 12px; }
.sv__card:hover .sv__go { transform: rotate(45deg); background: var(--c-black); color: #fff; }
.sv__card .chips > * { background: rgba(255, 255, 255, .5); }
.sv__card .sv__d, .sv__card .sv__note { color: rgba(13, 13, 13, .78); }
.sv__card .nb { box-shadow: inset 0 0 0 1px var(--c-black); }
/* the same colour on the number wherever the service is listed */
.hx__idx .nb, .nr > .nb { background: var(--svc); box-shadow: none; color: var(--c-black); }
.sv__t { font-family: var(--f-sans); font-size: clamp(1.3125rem, 1.1rem + .6vw, 1.625rem); line-height: 1.2; letter-spacing: .005em; }
.sv__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 20px; }
.sv__d { max-width: 52ch; font-size: .9375rem; line-height: 1.5; letter-spacing: .01em; color: var(--fg-2); text-wrap: pretty; }
.sv__card .chips { margin-top: auto; padding-top: 8px; }
.sv__note { font-size: .75rem; letter-spacing: .01em; color: var(--fg-2); }
@media (min-width: 1100px) {
  .sv--ads .sv__card { flex-direction: row-reverse; }
  .sv--ads .sv__media { flex: 0 0 42%; aspect-ratio: auto; margin: 8px 8px 8px 0; }
  .sv--ads .sv__body { padding: 24px 28px 28px; }
  .sv--ads .sv__t { font-size: 2.125rem; letter-spacing: -.005em; }
  /* the flagship says it as a statement */
  .sv--ads .sv__d { max-width: 26ch; font-family: var(--f-serif); font-size: clamp(1.375rem, 1rem + .7vw, 1.75rem); line-height: 1.3; letter-spacing: -.015em; color: var(--c-black); }
  /* the last row's wide card mirrors it, picture on the left */
  .sv--leads .sv__card { flex-direction: row; }
  .sv--leads .sv__media { flex: 0 0 42%; aspect-ratio: auto; margin: 8px 0 8px 8px; }
  .sv--leads .sv__body { padding: 24px 28px 28px; }
}

/* ── trabajo (la sección negra) ─────────────────────────────────────────── */
.wk__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: clamp(24px, 3vw, 36px); }
.wk__feat { position: relative; isolation: isolate; display: block; aspect-ratio: 21 / 9; margin-bottom: 12px; border-radius: 16px; overflow: hidden; color: #fff; background: #111; }
@media (max-width: 719px) { .wk__feat { aspect-ratio: 4 / 5; } }
.wk__feat > .media { position: absolute; inset: 0; z-index: -2; transition: transform 1.4s var(--ease); }
.wk__feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .62)); }
.wk__feat:hover > .media { transform: scale(1.03); }
.wk__in { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 10px; padding: clamp(18px, 3vw, 40px); }
.wk__t { font-family: var(--f-serif); font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.5rem); line-height: 1.02; letter-spacing: -.025em; }
.wk__d { max-width: 44ch; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.wk__go { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-top: 4px; padding: 0 16px; border-radius: 6px; background: #fff; color: var(--c-black); font-size: .8125rem; }
.wk__go svg { width: 12px; height: 12px; transition: transform .45s var(--ease); }
.wk__feat:hover .wk__go svg { transform: rotate(45deg); }

/* ── manifiesto: quién hace qué ─────────────────────────────────────────────
   Three rows, each thing joined to who does it by a line drawn as the rows
   come in, and only then the answer: the two the platforms already do in
   grey, the idea in black, on the brand gradient. */
.mf__in { display: grid; gap: 28px; }
@media (min-width: 1024px) {
  .mf__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .mf__label { grid-column: 1 / 5; padding-top: .7rem; }
  .mf__body { grid-column: 5 / 12; }
}
.mf__label { font-family: var(--f-sans); font-size: .8125rem; letter-spacing: .02em; color: var(--fg-2); }
.mf__body { max-width: 620px; }
.mf__row {
  display: flex; align-items: baseline; gap: 14px; padding-block: 5px;
  font-family: var(--f-serif); font-size: clamp(1.25rem, .95rem + 1.25vw, 2rem); line-height: 1.25; letter-spacing: -.02em; white-space: nowrap;
}
.mf__row:nth-child(2) { --r: 1; }
.mf__row:nth-child(3) { --r: 2; }
.mf__row::after {
  content: ""; order: 1; flex: 1; min-width: 16px; height: 1px; margin-bottom: .3em; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) calc(.2s + var(--r, 0) * .2s);
}
.mf__row dd { order: 2; }
.js .mf__row dd { opacity: 0; transition: opacity .5s var(--ease-soft) calc(.85s + var(--r, 0) * .2s); }
.mf__row--off { color: #B9B9B9; }
.mf__row:not(.mf__row--off)::after { height: 2px; background: linear-gradient(90deg, var(--c-red), var(--c-orange) 60%, var(--c-yellow)); }
.mf__who.is-in .mf__row::after, html:not(.js) .mf__row::after { transform: none; }
.js .mf__who.is-in .mf__row dd { opacity: 1; }
.mf__idea { margin-top: 18px; max-width: 40ch; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.mf__end { margin-top: clamp(48px, 5vw, 72px); }
.mf__txt { max-width: 44ch; font-size: .9375rem; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.mf__sign { margin-top: 14px; font-family: var(--f-serif); font-size: clamp(1.25rem, .95rem + 1.25vw, 2rem); line-height: 1.25; letter-spacing: -.02em; }
.mf__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (prefers-reduced-motion: reduce) {
  .mf__row::after { transform: none; transition: none; }
  .js .mf__row dd { opacity: 1; transition: none; }
}

/* ── palancas (el componente "qué incluye" de las páginas de servicio) ────── */
.lev { position: relative; padding-block: clamp(150px, 17vw, 260px) var(--sec); overflow: clip; }
.lev__head { position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; margin-bottom: clamp(96px, 12vw, 200px); }
.lev__head h2 { max-width: 520px; }
.lev__head p { max-width: 480px; }
.lev__body { position: relative; display: grid; }
.lev__list { display: grid; gap: 56px; }
.lev__it { display: grid; gap: 12px; justify-items: start; max-width: 460px; }
.lev__it .nb { margin-bottom: 6px; }
/* on a phone each step carries its orb small, beside the text, instead of a
   full-width one under it: the same motif in a quarter of the height */
@media (max-width: 1023px) {
  .lev__it { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 20px; max-width: 560px; }
  .lev__it > :not(.lev__orb-m) { grid-column: 1; }
  .lev__orb-m { grid-column: 2; grid-row: 1 / span 3; align-self: start; width: 84px; margin-top: 2px; }
  .lev__orb-m .lev__chip { display: none; }
}
.lev__vis { display: none; }
.orb { width: 100%; height: auto; overflow: visible; }
.orb circle, .orb ellipse { fill: none; stroke: currentColor; stroke-opacity: .6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lev__chip { position: absolute; left: var(--cx, 62%); top: var(--cy, 34%); display: inline-flex; align-items: center; gap: 4px; transform: translate(-9px, -50%); white-space: nowrap; transition: left .9s var(--ease), top .9s var(--ease); }
.lev__chip .nb { background: var(--bg); }
.lev__chip .tag { background: color-mix(in srgb, var(--fg) 9%, var(--bg)); }
.lev__chip .tag { height: 19px; padding: 0 5px; font-size: .75rem; }
@media (min-width: 1024px) {
  .lev__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .lev__list { grid-column: 2 / 7; gap: 0; }
  .lev__it { min-height: 40vh; align-content: center; opacity: .28; transition: opacity .6s var(--ease-soft); }
  .lev__it.is-on { opacity: 1; }
  .lev__orb-m { display: none; }
  .lev__vis { display: block; grid-column: 8 / 12; }
  .lev__sticky { position: sticky; top: calc(50vh - 210px); height: 420px; display: grid; place-items: center; }
  .lev__sticky .orb { max-width: 380px; }
}
.js .lev__it:first-child { opacity: 1; }
/* the dot icons (js/v2/dots.js) take the orb's place once they draw. The
   canvas is half as wide again as the column, so dots knocked off the icon
   fly past its edge instead of being cut there; it never takes the pointer. */
.lev__dots { position: absolute; left: 50%; top: 50%; width: 150%; max-width: none; height: auto; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-soft); }
.lev__sticky.has-dots .lev__dots { opacity: 1; }
.lev__sticky.has-dots .orb, .lev__orb-m.has-dots .orb { display: none; }
.lev__sticky.has-dots .lev__chip { left: 50%; top: auto; bottom: -6px; transform: translateX(-50%); transition: none; }
.lev__dots-m { display: block; width: 100%; height: auto; }

/* ── trabajo: la rejilla de piezas (inicio, Creative Engine, caso) ─────────── */
.work { margin-top: var(--sec); }
.work__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.work__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 900px) { .work__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.work__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 28px; }
.wcard__btn { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; }
.wcard--h .wcard__btn { aspect-ratio: 4 / 3; }
.wcard--t .wcard__btn { aspect-ratio: 9 / 16; }
.wcard__media { position: absolute; inset: 0; transition: transform 1.1s var(--ease); }
.wcard__btn:hover .wcard__media { transform: scale(1.035); }
.wcard__meta { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 10px; margin-top: 8px; }
.wcard__name { font-size: .8125rem; letter-spacing: .01em; }
.wk .wcard__btn { border-radius: 10px; }

/* ── FAQ (tarjetas, como inBeat) ──────────────────────────────────────────────
   Two independent columns of rounded cards on the grey theme, so opening one
   never moves the other column. The open card turns dark; + folds into −.
   name="faq" on each <details> keeps a single card open at a time. */
.faq__t { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.faq__cols { display: grid; gap: 12px; max-width: 1280px; margin-inline: auto; }
.faq__col { display: grid; gap: 12px; align-content: start; }
.qa {
  border-radius: 18px; background: var(--field); color: var(--fg);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.qa[open] { background: var(--inv-bg); color: var(--inv-fg); }
.qa__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding: 15px 22px 15px 24px; list-style: none; cursor: pointer;
  font-size: .875rem; font-weight: 500; line-height: 1.5; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:focus-visible { outline-offset: -4px; border-radius: 18px; }
.qa__i { position: relative; flex: none; width: 12px; height: 12px; }
.qa__i::before, .qa__i::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; margin-top: -.75px;
  border-radius: 1px; background: currentColor; transition: transform .5s var(--ease);
}
.qa__i::after { transform: rotate(90deg); }
.qa[open] .qa__i::after { transform: rotate(0deg); }
.qa__a { padding: 0 24px 24px; font-size: .875rem; line-height: 1.6; letter-spacing: .01em; opacity: .86; text-wrap: pretty; }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
@media (hover: hover) {
  .qa:not([open]):hover { background: color-mix(in srgb, var(--field) 95%, var(--fg)); }
}
@media (min-width: 900px) {
  .faq__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .faq__col { gap: 16px; }
}