/* ==========================================================================
   inkbrand lab. — home.css (T1). Sin layer: le gana a site.css sin !important.
   Mobile first · breakpoints 480 · 768 · 1024 · 1280.
   Motion: solo transform/opacity; lo scroll-driven va en @supports + sin reduced-motion + html.anim.
   ========================================================================== */

/* ---------- Orden de secciones y modo "demos como trabajos" ----------
   Si T6 oculta #trabajos (menos de 2 casos reales con permiso), #portfolio sube a su lugar
   y cambian los textos marcados con .only-casos / .only-demos. home.js mueve además el nodo. */
.home { display:flex; flex-direction:column; --s-2xl:clamp(56px,2.4vw + 48px,96px); --s-xl:clamp(32px,2vw + 24px,56px) }
.home > * { min-width:0 }
#hero { order:1 } .home > .marquee { order:2 } #trabajos { order:3 } #problemas { order:4 } #servicios { order:5 }
#precios { order:6 } #quienes { order:7 } #portfolio { order:8 } #faq { order:9 } #contacto { order:10 }
.home:has(> #trabajos[hidden]) > #portfolio { order:3; padding-top:calc(var(--s-2xl) * .5) }
/* .demo-card.only-demos: sin el doble selector, .demo-card{display:grid} (misma especificidad, más abajo) le ganaba */
.only-demos,.demo-card.only-demos { display:none }
body:has(#trabajos[hidden]) .only-casos { display:none }
body:has(#trabajos[hidden]) .only-demos { display:revert }
body:has(#trabajos[hidden]) .btn.only-demos { display:inline-flex }
body:has(#trabajos[hidden]) .demo-card.only-demos { display:grid }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero { padding-top:calc(var(--nav-h) + var(--promo-h) + 16px); padding-bottom:26px; overflow:clip }
.hero__bg { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.hero__bg::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(55% 38% at 92% 8%,rgba(59,78,252,.20),transparent 70%),
    radial-gradient(45% 32% at 8% 96%,rgba(123,45,255,.14),transparent 70%);
}
.hero__spot {
  position:absolute; left:0; top:0; width:720px; height:720px; margin:-360px 0 0 -360px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(59,78,252,.13),rgba(123,45,255,.06) 55%,transparent);
  opacity:0; transform:translate3d(var(--sx,70vw),var(--sy,40vh),0); transition:opacity .8s; will-change:transform;
}
.hero.is-lit .hero__spot { opacity:1 }
[data-theme=dark] .hero__bg::before {
  background:
    radial-gradient(55% 40% at 92% 10%,rgba(91,111,255,.26),transparent 70%),
    radial-gradient(45% 34% at 6% 96%,rgba(155,80,255,.20),transparent 70%);
}

.hero__grid { display:grid; gap:36px; align-items:center }
.hero__txt { display:grid; gap:16px; justify-items:start; min-width:0 }
.hero__title { font-size:clamp(2.75rem,1rem + 5.2vw,6.5rem); max-width:12.5ch }
.hero__title .hw { display:inline-block }
.hero__title .u-mark { z-index:0 }
.hero__lead { max-width:40ch }
.hero__ctas { display:grid; gap:10px; width:100% }
.hero__ctas .btn { white-space:normal; text-align:center; padding-inline:20px }
.hero__meta { display:grid; gap:10px; justify-items:start }
.hero__sign { display:flex; align-items:center; gap:12px; font-size:var(--t-sm); line-height:1.45; color:var(--fg-muted); max-width:44ch }
.hero__sign > span { text-wrap:balance }
.hero__sign .nw { white-space:nowrap } /* los cortes caen entre frases: nunca queda un "La" suelto */
.hero__sign img { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px var(--color-bg),0 0 0 3.5px var(--color-transform) }
@media (min-width:480px) {
  .hero__ctas { display:flex; flex-wrap:wrap; width:auto }
  .hero__ctas .btn { white-space:nowrap }
}
/* Celular: WhatsApp queda como único botón fuerte; el secundario pasa a link (mantiene 44 px táctiles)
   y las capturas del rail suben y entran más grandes arriba del pliegue (390x844). */
@media (max-width:767px) {
  .hero__ctas { gap:4px }
  .hero__ctas .btn--secondary {
    min-height:44px; padding-block:6px; background:none; border-color:transparent;
    text-decoration:underline; text-underline-offset:5px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  }
  .hero__ctas .btn--secondary:hover { border-color:transparent; text-decoration-color:currentColor }
  .hero__meta { gap:8px }
}

/* Rail de capturas (solo < 1024) */
.hero__rail { --rail-col-m:200px; justify-self:stretch; width:calc(100% + 2 * var(--gutter)); margin:2px calc(-1 * var(--gutter)) 0; gap:14px; padding-bottom:8px }
.hero__shot { position:relative; margin:0 }
.hero__shot .chip { position:absolute; left:8px; bottom:8px; height:24px; font-size:.75rem }
.chip--app { background:var(--color-result); border-color:transparent; color:#09090E; font-weight:600 }
.hero__shot img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; background:var(--color-surface); box-shadow:0 18px 36px -20px rgba(9,9,14,.45),0 0 0 1px var(--color-border) }
@media (max-width:767px) {
  .hero__rail { --rail-col-m:250px }
  .hero__shot img { border-radius:14px }
}

/* Entrada del hero: CSS puro (no espera JS) y corta, porque arranca recién con el primer pintado (y en mobile
   eso llega después de site.js). H2 del plan: última palabra del H1 completa a los 312 ms del primer pintado
   (9×8+240); los CTA se ven desde el primer pintado (solo suben 10 px, sin fundido). La hoja de Google Fonts
   ya no bloquea el pintado (preload + media=print, en el <head> de index.html). */
html.anim .hero__in { opacity:0; transform:translateY(12px); animation:hero-in .26s var(--ease-smooth) forwards; animation-delay:calc(var(--d,0) * 20ms) }
html.anim .hero__ctas.hero__in { opacity:1; animation-name:hero-rise; animation-delay:0s }
html.anim .hero__title .hw { opacity:0; transform:translateY(.25em); animation:hero-in .24s var(--ease-smooth) forwards; animation-delay:calc(var(--w,0) * 8ms) }
@keyframes hero-in { to { opacity:1; transform:none } }
@keyframes hero-rise { from { transform:translateY(10px) } to { transform:none } }

/* ---------- Mesa de trabajos (desde 1024) ---------- */
.mesa { display:none }
@media (min-width:1024px) {
  .hero { min-height:min(100svh,900px); display:grid; align-items:center; padding-top:calc(var(--nav-h) + var(--promo-h) + 28px); padding-bottom:56px }
  .hero__grid { grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:clamp(16px,2vw,28px) }
  .hero__txt { grid-column:1 / 8; gap:24px }
  .hero__rail { display:none }
  .hero__meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px }
  .mesa { display:block; grid-column:8 / 13; position:relative; height:clamp(440px,40vw,600px); margin-right:calc(-.5 * var(--gutter)); perspective:1600px }
}
/* 1024-1179: CTAs en una fila y chip + firma arriba del pliegue (1024x768) */
@media (min-width:1024px) and (max-width:1179px) {
  .hero__title { font-size:3.625rem }
  .hero__txt { gap:20px }
  .hero__ctas { flex-wrap:nowrap; gap:10px }
  .hero__ctas .btn { padding-inline:16px; font-size:.9375rem }
}
.mesa__stage { position:absolute; inset:0; transform:rotateY(calc(var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -4deg)); transform-style:preserve-3d }
.mesa__it { position:absolute; width:var(--w,70%); z-index:var(--zi,1) }
.mesa__par { transform:translate3d(calc(var(--mx,0) * var(--z,1) * 12px),calc(var(--my,0) * var(--z,1) * 10px),0) }
.mesa__rot { transform:rotate(var(--r,0deg)) }
.mesa .frame-browser { border-radius:12px; box-shadow:0 40px 80px -30px rgba(59,78,252,.38),0 14px 28px -14px rgba(9,9,14,.30),0 0 0 1px rgba(9,9,14,.06) }
[data-theme=dark] .mesa .frame-browser { box-shadow:0 40px 90px -30px rgba(91,111,255,.45),0 14px 28px -14px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08) }
.mesa .frame-browser img { aspect-ratio:16/10; object-fit:cover }
.mesa .chip--demo { position:absolute; z-index:4; top:40px; right:12px; box-shadow:0 6px 16px -6px rgba(0,0,0,.4) }
/* H3: cada pieza tapa solo la parte de la de atrás que no tiene titular (los titulares de las demos van
   arriba a la izquierda): travesía pisa el cuarto de abajo a la derecha de tierral, y el panel del gimnasio
   el cuarto de abajo a la izquierda de travesía. */
.mesa__it--a { --w:64%; left:-4%; top:0; --r:-4deg; --zi:1 }
.mesa__it--b { --w:64%; right:1%; top:32%; --r:3deg; --zi:2 }
.mesa__it--c { --w:64%; left:-3%; top:67%; --r:-2deg; --zi:3 }
.mesa__it--phone { --w:19%; right:3%; top:66%; --r:7deg; --zi:4 }
.mesa__it--phone .frame-phone { border-width:6px; border-radius:26px; box-shadow:0 40px 70px -24px rgba(9,9,14,.55),0 0 0 1px rgba(255,255,255,.06) }
.mesa__it--phone .frame-phone img { border-radius:20px }
.mesa__it--phone .frame-phone--notch::before { top:4px; height:12px }
.mesa__it--toast { --w:auto; right:7%; top:97%; --zi:5 }
.mesa__it--badge { --w:112px; right:5%; top:3%; --zi:6 }

.toast {
  display:grid; grid-template-columns:36px auto auto; align-items:center; gap:10px; padding:10px 14px 10px 10px; width:max-content; max-width:300px;
  border-radius:16px; background:rgba(255,255,255,.86); color:#09090E;
  -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:0 24px 50px -18px rgba(9,9,14,.35),0 0 0 1px rgba(9,9,14,.06);
}
[data-theme=dark] .toast { background:rgba(21,21,29,.86); color:#F4F4FA; box-shadow:0 24px 50px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08) }
.toast__ico { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--color-wa); color:#fff }
.toast__ico .i { width:20px; height:20px }
.toast__txt { display:grid; gap:2px; font:500 .8125rem/1.3 var(--font-sec) }
.toast__txt b { font:600 .8125rem/1.2 var(--font) }
.toast__txt span { opacity:.72 }
.toast__time { align-self:start; font:500 .75rem/1 var(--font); opacity:.55 }

.seal { width:112px; height:112px; overflow:visible; filter:drop-shadow(0 14px 22px rgba(110,170,0,.35)) }
.seal__bg { fill:#AAFF00 }
.seal__txt { font:600 10px/1 var(--font); text-transform:uppercase; fill:#09090E }
.seal__flask { color:#09090E }

/* Entrada de la mesa (CSS puro): cada pieza sube y aparece; después flota */
html.anim .mesa__it { opacity:0; translate:0 40px; animation:mesa-in .8s var(--ease-smooth) forwards; animation-delay:calc(300ms + var(--n,0) * 120ms) }
html.anim .mesa__it--toast { translate:0 16px; scale:.92; animation-name:mesa-pop; animation-delay:1.05s }
@keyframes mesa-in { to { opacity:1; translate:0 0 } }
@keyframes mesa-pop { to { opacity:1; translate:0 0; scale:1 } }
.mesa__it--a { --sx2:-26px; --sy2:-46px; --sr2:-3deg }
.mesa__it--b { --sx2:40px; --sy2:-22px; --sr2:3deg }
.mesa__it--c { --sx2:-18px; --sy2:36px; --sr2:-1deg }
.mesa__it--phone { --sx2:34px; --sy2:56px; --sr2:4deg }
.mesa__it--toast { --sx2:-40px; --sy2:-12px; --sr2:0deg }
@keyframes mesa-spread { to { transform:translate3d(var(--sx2,0),var(--sy2,0),0) rotate(var(--sr2,0deg)) } }
@keyframes seal-rot { to { rotate:1turn } }

/* ==========================================================================
   3 · TRABAJOS
   ========================================================================== */
.trabajos .section-head { margin-bottom:var(--s-lg) }
.work { position:relative; container-type:inline-size; --case-bg:var(--case,var(--color-surface)) }
[data-theme=dark] .work { --case-bg:color-mix(in srgb,var(--case,#15151D) 14%,#0E0E1E) }
.work--app { --case-bg:var(--case) }
.work__in { display:grid; gap:18px }
.work__shot { position:relative; overflow:hidden; aspect-ratio:16/10; border-radius:var(--r-lg); background:var(--case-bg); padding:clamp(16px,6cqi,32px) clamp(16px,6cqi,32px) 0 }
.work__shot > .frame-browser,.work__shot > .shot-comp { transition:transform .6s var(--ease-smooth) }
.work__shot--phone { display:grid; justify-items:center; padding-top:22px }
.work__shot--phone .frame-phone { width:min(40%,220px); border-width:clamp(5px,1.8cqi,8px); border-radius:clamp(20px,7cqi,36px); transition:transform .6s var(--ease-smooth) }
/* bordes y muesca proporcionales al ancho: en el rail del celular el teléfono mide ~110px y con 26px de radio la
   esquina se comía el encabezado de la pantalla ("Entrenando / Apolo Día 1") */
.work__shot--phone .frame-phone img { border-radius:clamp(15px,5.2cqi,26px) }
.work__shot--phone .frame-phone--notch::before { top:clamp(4px,1.2cqi,6px); height:clamp(12px,3.8cqi,20px) }
.work__meta { display:grid; gap:10px; align-content:start; justify-items:start }
.work__meta > p:not(.eyebrow) { color:var(--fg-muted); font-size:var(--t-base); line-height:1.55 }
.work__meta .row { --row-gap:8px }
.work-quote { font:500 var(--t-base)/1.5 var(--font-sec); border-left:2px solid var(--color-transform); padding-left:14px }
@media (hover:hover) and (pointer:fine) {
  .work:hover .work__shot > .frame-browser,.work:hover .work__shot > .shot-comp,.work:hover .work__shot--phone .frame-phone { transform:translateY(-8px) scale(1.02) }
}
.work .card__link { position:static }
.work .card__link::after { content:""; position:absolute; inset:0; z-index:2; border-radius:var(--r-lg) }

.work--feat { margin-bottom:clamp(16px,2vw,28px) }
/* Cosmos: el parallax escala ×1.08 desde el centro y mochaba el texto del hero de la captura (está pegado al borde
   izquierdo). Anclado a la izquierda, lo que se recorta es el lado derecho, que tapa el cotizador superpuesto. */
.work--feat .work__shot > .frame-browser.parallax img { transform-origin:0 50% }
.work__over { position:absolute; z-index:2; right:5%; bottom:6%; width:38%; border-radius:10px; box-shadow:0 30px 60px -20px rgba(9,9,14,.55) }
@media (min-width:1024px) {
  .work--feat .work__in { grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; column-gap:var(--s-lg) }
  .work--feat .work__meta .h3 { font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem) }
}

/* resto: rail en mobile, filas flexibles desde 1024 (se adaptan a cuántas cards tengan permiso) */
.works { --rail-col-m:82vw; width:calc(100% + 2 * var(--gutter)); margin-inline:calc(-1 * var(--gutter)) }
/* tablet: columna más angosta para que asome la tercera card (con 46vw entraban 2 justas y no se veía que había más) */
@media (min-width:768px) { .works { --rail-col:min(42vw,400px) } }
@media (min-width:1024px) {
  .works { display:flex; flex-wrap:wrap; gap:clamp(16px,2vw,28px); width:auto; margin:0; padding:0; overflow:visible; scroll-snap-type:none }
  .works > .work { flex:1 1 calc((100% - 2 * 28px) / 3); min-width:300px }
  /* con 4 cards: 2 filas de 2 (en formato horizontal desde 560px de card) en vez de 3 + 1 suelta */
  .works:has(> .work:nth-child(4):last-child) > .work { flex-basis:calc(50% - 14px) }
}
@container (min-width:560px) {
  /* arriba y no al centro: si una card de la fila tiene más texto (p. ej. "Ver portfolio"), su captura bajaba
     y las de una misma fila arrancaban a distinta altura */
  .work:not(.work--feat) .work__in { grid-template-columns:minmax(0,45%) minmax(0,1fr); align-items:start; column-gap:28px }
  /* celular: en la card horizontal la captura mide ~260px y al 40% el teléfono quedaba de ~80px */
  .work:not(.work--feat) .work__shot--phone { padding-top:16px }
  .work:not(.work--feat) .work__shot--phone .frame-phone { width:min(70%,240px); border-width:6px; border-radius:24px }
  .work:not(.work--feat) .work__shot--phone .frame-phone img { border-radius:18px }
  .work:not(.work--feat) .work__shot--phone .frame-phone--notch::before { top:4px; height:12px }
  /* barra del navegador: el marco mide ~190px y la URL centrada entre los 3 puntos se cortaba con "…".
     Puntos más chicos y la URL (la real, completa) arranca después de ellos, con letra más chica */
  .work:not(.work--feat) .frame-browser { --bar:22px }
  .work:not(.work--feat) .frame-browser::after { top:calc(var(--bar) / 2 - 3px); left:9px; width:6px; height:6px; box-shadow:10px 0 0 rgba(254,188,46,.8),20px 0 0 rgba(40,200,64,.8) }
  .work:not(.work--feat) .frame-browser__url { top:3px; left:37px; right:6px; translate:none; min-width:0; max-width:none; height:16px; padding:0 6px; font-size:9px; line-height:16px }
}
/* lo mismo en celulares angostos (320): las cards del rail miden ~260px y las URL también se cortaban */
@container (max-width:320px) {
  .work .frame-browser { --bar:22px }
  .work .frame-browser::after { top:calc(var(--bar) / 2 - 3px); left:9px; width:6px; height:6px; box-shadow:10px 0 0 rgba(254,188,46,.8),20px 0 0 rgba(40,200,64,.8) }
  .work .frame-browser__url { top:3px; left:37px; right:6px; translate:none; min-width:0; max-width:none; height:16px; padding:0 6px; font-size:9px; line-height:16px }
}

/* ==========================================================================
   4 · PROBLEMAS
   ========================================================================== */
.problemas .section-head { margin-bottom:var(--s-md) }
@media (min-width:1024px) {
  .problemas .section-head { grid-template-columns:minmax(0,10fr) minmax(0,2fr); margin-bottom:20px }
  .problemas .h2 { max-width:32ch; text-wrap:balance }
}
.probs { --rail-col-m:80vw; gap:14px; margin:0 calc(-1 * var(--gutter)); list-style:none; padding-block:4px 14px }
.prob {
  position:relative; display:grid; gap:8px; align-content:start; padding:10px 10px 22px;
  border-radius:var(--r-xl); background:var(--card-bg); border:1px solid var(--color-border-strong);
  transition:transform var(--d-ui) var(--ease-smooth),box-shadow var(--d-ui);
}
.prob > :not(.prob__art) { padding-inline:12px }
.prob__num { font:600 .8125rem/1 var(--font); letter-spacing:.12em; font-variant-numeric:tabular-nums; margin-top:6px }
.prob__title { font:600 var(--t-lg)/1.25 var(--font); letter-spacing:-.015em }
.prob__txt { color:var(--fg-muted); font-size:var(--t-sm); line-height:1.6 }
@media (hover:hover) and (pointer:fine) { .prob:hover { transform:translateY(-4px); box-shadow:var(--shadow-card) } }
@media (min-width:1024px) {
  .probs { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; overflow:visible; scroll-snap-type:none }
  .prob { padding:12px 12px 20px }
  .prob > :not(.prob__art) { padding-inline:16px }
}
/* número y título en la misma línea ("01  Respondés…"): una fila menos por card */
.prob { grid-template-columns:auto minmax(0,1fr); column-gap:10px }
.prob__art,.prob__txt { grid-column:1 / -1 }
.prob > .prob__num { margin-top:0; padding-right:0; align-self:baseline }
.prob > .prob__title { padding-left:0; align-self:baseline }
.problemas__more { margin-top:var(--s-sm) }
.problemas .section-head__aside { display:none }
@media (min-width:1024px) { .problemas__more { display:none } .problemas .section-head__aside { display:grid } }

.prob__art { position:relative; height:128px; border-radius:calc(var(--r-xl) - 8px); overflow:hidden; margin-bottom:8px; display:grid; align-content:center; gap:7px; padding:14px 18px }
@media (min-width:1024px) {
  .prob__art { height:112px; gap:6px; padding-block:8px }
  .prob__art--notes .note { aspect-ratio:5 / 4 }
  .prob__art .bub { padding-block:6px }
}
.prob__art--chat { background:linear-gradient(160deg,var(--tag-process-bg),transparent 90%),var(--color-bg); justify-items:start }
.prob__art--notes { background:linear-gradient(160deg,var(--tag-transform-bg),transparent 90%),var(--color-bg); grid-template-columns:repeat(3,1fr); align-items:center; gap:10px }
.prob__art--search { background:linear-gradient(160deg,var(--tag-result-bg),transparent 90%),var(--color-bg) }
[data-theme=dark] .prob__art { background-color:var(--color-surface) }
.bub {
  position:relative; padding:7px 12px; border-radius:14px 14px 14px 4px; max-width:88%;
  background:#fff; color:#09090E; font:500 .8125rem/1.2 var(--font-sec); box-shadow:0 6px 14px -8px rgba(9,9,14,.25);
}
.bub:nth-child(2) { margin-left:10% }
.bub--n { position:absolute; right:16px; top:14px; padding:6px 10px; border-radius:var(--pill); background:var(--btn-primary); color:#fff; font:700 .75rem/1 var(--font) }
.note {
  display:grid; place-items:center; aspect-ratio:1; padding:8px; text-align:center;
  font:600 .75rem/1.3 var(--font); color:#09090E; border-radius:4px 4px 14px 4px;
  box-shadow:0 10px 18px -10px rgba(9,9,14,.35); rotate:-6deg;
}
.note:nth-child(1) { background:#E9FFB8 }
.note:nth-child(2) { background:#EEE3FF; rotate:4deg; translate:0 -6px }
.note:nth-child(3) { background:#E3E8FF; rotate:-2deg; translate:0 8px }
.note s { opacity:.55 }
.srch { display:flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:var(--pill); background:#fff; color:rgba(9,9,14,.7); font:500 .8125rem/1 var(--font-sec); box-shadow:0 6px 14px -8px rgba(9,9,14,.25) }
.srch svg { width:14px; height:14px; flex:none }
.res { display:flex; align-items:center; gap:8px; font:600 .75rem/1 var(--font); color:var(--fg-muted); padding-left:4px }
.res i { width:14px; height:14px; border-radius:50%; background:currentColor; opacity:.35; flex:none }
.res--top { color:var(--fg) }
.res--top i { background:#E5484D; opacity:1 }
.res--you { color:var(--fg-muted); opacity:.7; text-decoration:line-through; text-decoration-color:rgba(229,72,77,.7) }
/* piezas que aparecen cuando la card entra */
html.anim .prob .bub,html.anim .prob .note,html.anim .prob .res {
  opacity:0; transform:translateY(10px) scale(.94);
  transition:opacity .5s var(--ease-smooth),transform .6s var(--ease-organic); transition-delay:calc(250ms + var(--b,0) * 140ms);
}
html.anim .prob.in .bub,html.anim .prob.in .note,html.anim .prob.in .res { opacity:1; transform:none }
html.anim .prob.in .res--you { opacity:.7 }

/* ==========================================================================
   5 · SERVICIOS (oscuro)
   ========================================================================== */
.servicios { overflow:clip; isolation:isolate }
.servicios__halo { position:absolute; z-index:-1; left:50%; top:-10%; width:min(1200px,160vw); aspect-ratio:2/1; translate:-50% 0; pointer-events:none; background:radial-gradient(closest-side,rgba(123,45,255,.22),rgba(59,78,252,.08) 55%,transparent) }
.manif-row { display:grid; gap:var(--s-lg); margin-bottom:var(--s-xl) }
.manif { font:600 clamp(1.75rem,1rem + 3vw,3.25rem)/1.1 var(--font); letter-spacing:-.03em; text-wrap:balance; color:var(--color-on-dark) }
.manif .t-process { color:var(--color-process-soft) } .manif .t-transform { color:var(--color-transform-soft) } .manif .t-result { color:var(--color-result) }
.mw { display:inline-block }
.method { --rail-col-m:80vw; gap:12px; margin:0 calc(-1 * var(--gutter)); list-style:none; padding-block:2px 8px }
.method__it { display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start; padding:16px; border-radius:var(--r-lg); background:rgba(255,255,255,.03); border:1px solid var(--line) }
/* mobile/tablet: ícono al lado del título y el texto a todo el ancho (card más baja) */
@media (max-width:1023px) {
  .manif-row { gap:24px; margin-bottom:28px }
  .method { --rail-col-m:86vw }
  .method__it { grid-template-columns:40px minmax(0,1fr); gap:10px 12px; align-items:center; align-content:start; padding:14px }
  .method__it > div { display:contents }
  .method__art { width:40px; height:40px }
  .method__t { margin:0 }
  .method__it p { grid-column:1 / -1 }
  .svc-head { margin-bottom:28px }
}
.method__art { width:52px; height:52px; color:var(--color-on-dark) }
.method__t { font:600 1.0625rem/1.3 var(--font); letter-spacing:-.01em; margin-bottom:4px }
.method__it p { font-size:var(--t-sm); line-height:1.55; color:var(--fg-muted) }
@media (min-width:1024px) {
  .manif-row { grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; column-gap:var(--s-xl) }
  .method { grid-auto-flow:row; grid-template-columns:1fr; gap:10px; margin:0; padding:0; overflow:visible; scroll-snap-type:none }
}
.svc-head { margin-bottom:var(--s-md) }
.svc-grid { display:grid; gap:10px; margin:0; padding:0; list-style:none }
.svc-grid > li { display:grid }
.svc-card {
  --acc:var(--color-process);
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 14px; align-items:start; padding:16px; overflow:hidden; isolation:isolate;
  border-radius:var(--r-lg); text-decoration:none;
}
.svc-card .svc-ico { width:44px; height:44px; grid-row:1 / span 2 }
.svc-card__body { display:grid; gap:4px; min-width:0 }
.svc-card__t { font:600 1.0625rem/1.3 var(--font); letter-spacing:-.01em; color:var(--fg) }
.svc-card__p { font-size:var(--t-sm); line-height:1.5; color:var(--fg-muted) }
.svc-card__foot { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; font:500 .875rem/1 var(--font); color:var(--fg-muted) }
/* En mobile va una versión corta de la descripción (escrita, no cortada con …) */
.svc-card__s { display:none }
@media (max-width:767px) {
  .svc-grid { gap:8px }
  .svc-card { padding:11px 14px 11px 12px }
  .svc-card__l { display:none }
  .svc-card__s { display:inline }
  .svc-card__foot { margin-top:4px }
  .svc-card__go { font-size:0; gap:0 }
  .svc-card__go .i { width:18px; height:18px }
}
.svc-card__price { font-variant-numeric:tabular-nums }
.svc-card__go { display:inline-flex; align-items:center; gap:6px; color:var(--fg); font-weight:600 }
.svc-card__go .i { width:16px; height:16px; transition:transform var(--d-ui) var(--ease-smooth) }
.svc-card::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--acc); transform:scaleX(.16); transform-origin:left; transition:transform .5s var(--ease-smooth) }
.svc-card::after { content:""; position:absolute; z-index:-1; inset:-40% -20% auto auto; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 26%,transparent),transparent); opacity:0; transition:opacity .5s }
@media (hover:hover) and (pointer:fine) {
  .svc-card:hover { transform:translateY(-4px); border-color:rgba(244,244,250,.22) }
  .svc-card:hover::before { transform:scaleX(1) }
  .svc-card:hover::after { opacity:1 }
  .svc-card:hover .svc-card__go .i { transform:translateX(4px) }
}
@media (min-width:768px) { .svc-grid { grid-template-columns:1fr 1fr; gap:14px } }
@media (min-width:1024px) {
  .svc-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px }
  .svc-card { grid-template-columns:1fr; gap:14px; padding:24px 24px 20px; min-height:212px; grid-template-rows:auto 1fr auto }
  .svc-card .svc-ico { grid-row:auto }
  .svc-card__t { font-size:1.375rem; line-height:1.2; letter-spacing:-.02em }
  .svc-card__foot { grid-column:1; padding-top:14px; border-top:1px solid var(--line) }
}

/* ==========================================================================
   6 · PRECIOS
   ========================================================================== */
.precios-home .section-head { margin-bottom:var(--s-md) }
.plans .price__ars { font-size:.875rem } /* G5: ≥ 14px a 390 */
.plans { --rail-col-m:82vw; gap:14px; padding-block:18px 22px; align-items:stretch }
.plan { display:flex; flex-direction:column; gap:12px; min-width:0 }
.plan .price__num { font-size:clamp(2.5rem,2rem + 1.6vw,3.25rem) }
.plan__top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px }
.plan__who { letter-spacing:.1em }
.plan__name { font:600 1.5rem/1.15 var(--font); letter-spacing:-.02em }
.plan__plazo { font:500 .875rem/1.3 var(--font); color:var(--fg-muted) }
.plan__plazo::before { content:""; display:inline-block; vertical-align:1px; margin-right:9px; width:8px; height:8px; border-radius:50%; background:var(--accent-result); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-result) 22%,transparent) }
.plan__frase { font:500 var(--t-base)/1.45 var(--font-sec); color:var(--fg) }
.plan__list { list-style:none; margin:0; padding:0; display:grid; align-content:start; gap:10px; font-size:.9375rem; line-height:1.45; color:var(--fg-muted) }
.plan__list li { display:grid; grid-template-columns:18px 1fr; gap:10px }
.plan__list li::before {
  content:""; width:18px; height:18px; margin-top:1px; border-radius:50%;
  background:var(--tag-process-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233B4EFC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
}
[data-theme=dark] .plan__list li::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%238BA4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.plan--feat .plan__list li::before { background-color:rgba(170,255,0,.14); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23AAFF00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.plan__more { font-size:.9375rem; color:var(--fg-muted) }
.plan__more > summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font:600 .875rem/1 var(--font); color:var(--fg); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;
}
.plan__more > summary::-webkit-details-marker { display:none }
.plan__more > summary::after { content:"+"; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--line); font-size:.875rem; transition:rotate var(--d-ui) var(--ease-smooth) }
.plan__more[open] > summary::after { rotate:45deg }
.plan__more > summary:hover { text-decoration-color:currentColor }
.plan__more > .plan__list { margin:6px 0 12px }
.plan__more > p { font-size:.875rem; line-height:1.55 }
.plan__ahorro { font:500 .875rem/1.4 var(--font); color:var(--fg-muted); font-variant-numeric:tabular-nums }
.plan__ahorro b { color:var(--accent-result); font-weight:600 }
.plan__cta { margin-top:auto }
.plan--feat { box-shadow:0 40px 90px -30px rgba(123,45,255,.55),0 0 0 1px rgba(170,255,0,.10) }
.plan--feat .plan__frase { color:var(--color-on-dark) }
.plans__progress { margin-top:4px }
@media (max-width:1023px) { .plans .plan--feat { order:-1 } }
/* Desde 1024: las 3 cards comparten filas (subgrid) ⇒ nombre, precio, plazo y CTA quedan a la misma altura
   aunque el recomendado tenga badge o una card no tenga ahorro. 9 filas: top · nombre · precio · plazo ·
   frase · lista · más · ahorro · CTA (el CTA siempre en la última). */
@media (min-width:1024px) {
  .precios-home { padding-top:calc(var(--s-2xl) * .82); padding-bottom:calc(var(--s-2xl) * .72) }
  .precios-home .section-head { grid-template-columns:minmax(0,8fr) minmax(0,4fr); column-gap:var(--s-md); margin-bottom:24px }
  .precios-home .section-head__aside .lead { font-size:1.125rem }
  .plans {
    display:grid; grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(9,auto); gap:10px 20px; align-items:stretch;
    max-width:calc(var(--wrap) + 2 * var(--gutter)); margin-inline:auto; padding:8px var(--gutter) 4px; overflow:visible; scroll-snap-type:none;
  }
  .plan { display:grid; grid-row:span 9; grid-template-rows:subgrid; row-gap:10px; align-content:start; padding:26px }
  .plan > * { min-width:0 }
  .plan > .plan__who,.plan__top { align-self:start }
  .plan__cta { grid-row:-2 / -1; align-self:end }
  .plan__more > summary { min-height:28px }
  .plans__progress { display:none }
  /* Recomendado: sube con translate (no margin: el subgrid cambiaría la altura de las filas de las 3 cards;
     .rv anima transform, así que no chocan). En celular no aplica: ahí ya va primera con order:-1. */
  .plans { padding-top:24px }
  .plans .plan--feat { translate:0 -14px; box-shadow:0 50px 110px -34px rgba(123,45,255,.65),0 0 0 1px rgba(170,255,0,.18) }
  .plans .plan--feat .price__num { font-size:clamp(3.25rem,2.4rem + 1.8vw,4rem); text-shadow:0 0 36px rgba(170,255,0,.35) }
  .plans .plan--feat .badge { box-shadow:0 0 0 4px rgba(170,255,0,.12) }
}
@supports not (grid-template-rows:subgrid) { @media (min-width:1024px) { .plan { display:flex; flex-direction:column } } }
.precios-home__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:var(--s-sm); padding-top:var(--s-sm); border-top:1px solid var(--line) }
.precios-home__foot p { color:var(--fg-muted); font-size:var(--t-base); max-width:46ch }
@media (min-width:1024px) { .precios-home__foot { margin-top:8px } .precios-home__foot p { max-width:none } }

/* ==========================================================================
   7 · QUIÉN + CÓMO TRABAJO
   ========================================================================== */
.qs { display:grid; gap:var(--s-lg); align-items:center }
.qs__photo { position:relative; justify-self:center; width:min(54vw,210px); margin:0 0 8px }
.qs__photo::before { content:""; position:absolute; inset:-22%; z-index:0; border-radius:50%; background:radial-gradient(closest-side,rgba(123,45,255,.22),transparent 70%); pointer-events:none }
.qs__photo::after { /* muestra "de laboratorio": marco desplazado con la tríada */
  content:""; position:absolute; z-index:0; inset:14px -14px -14px 14px; border-radius:var(--r-xl);
  padding:1.5px; background:var(--grad-triad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.qs__frame { position:relative; z-index:1; aspect-ratio:4/5; border-radius:var(--r-xl); overflow:hidden; background:var(--color-surface); box-shadow:0 30px 60px -30px rgba(9,9,14,.45) }
.qs__frame img { width:100%; height:100%; object-fit:cover }
.qs__badge {
  position:absolute; z-index:2; left:-14px; bottom:22px; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
  border-radius:var(--pill); background:var(--card-bg); color:var(--fg); font:600 .8125rem/1 var(--font); box-shadow:0 14px 30px -12px rgba(9,9,14,.35),0 0 0 1px var(--color-border)
}
.qs__txt { display:grid; gap:18px; justify-items:start; min-width:0 }
.qs__body { font-size:var(--t-base); line-height:1.65; color:var(--fg-muted); max-width:58ch }
.qs__facts { display:grid; gap:0; margin:0; padding:0; list-style:none; width:100%; border-top:1px solid var(--line) }
.qs__facts li { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; padding:12px 0; border-bottom:1px solid var(--line) }
.qs__facts b { font:600 1.0625rem/1.2 var(--font); letter-spacing:-.01em }
.qs__facts span { font-size:var(--t-sm); color:var(--fg-muted) }
.qs__links { display:flex; flex-wrap:wrap; gap:8px }
.qs__link { display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 12px; border-radius:var(--pill); border:1px solid var(--line); color:var(--fg); text-decoration:none; font:600 .8125rem/1 var(--font); transition:border-color var(--d-fast),background-color var(--d-fast) }
.qs__link:hover { border-color:var(--fg) }
.qs__link svg { width:16px; height:16px }
/* Mobile/tablet (H6): foto chica al lado de los 3 datos, en vez de foto grande + lista.
   Orden visual: eyebrow · H2 · [foto | datos] · texto · links (nada enfocable cambia de orden). */
@media (max-width:1023px) {
  .quienes { overflow-x:clip }
  .qs { grid-template-columns:minmax(0,clamp(136px,40%,260px)) minmax(0,1fr); grid-template-areas:"eye eye" "h2 h2" "photo facts" "body body" "links links"; gap:18px 18px; align-items:start }
  .qs__txt { display:contents }
  .qs__txt > .eyebrow { grid-area:eye }
  .qs__txt > .h2 { grid-area:h2; margin-top:-4px }
  .qs__photo { grid-area:photo; width:auto; justify-self:stretch; margin:0 0 10px }
  .qs__photo::after { inset:10px -10px -10px 10px }
  .qs__facts { grid-area:facts; align-self:center; gap:10px; border-top:0 }
  .qs__facts li { display:grid; gap:2px; padding:9px 0 0; border-bottom:0; border-top:2px solid var(--line) }
  .qs__facts li:nth-child(1) { border-top-color:var(--accent-process) }
  .qs__facts li:nth-child(2) { border-top-color:var(--accent-transform) }
  .qs__facts li:nth-child(3) { border-top-color:var(--accent-result) }
  .qs__body { grid-area:body }
  .qs__links { grid-area:links }
  .qs__badge { left:-8px; bottom:12px; height:30px; padding:0 11px; gap:7px }
  .proc__steps { gap:18px }
}
@media (max-width:599px) { .qs__badge-x { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap } }
@media (min-width:1024px) {
  .qs__txt { gap:12px }
  .qs__body { line-height:1.6 }
}
@media (min-width:1024px) {
  .qs { grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s-xl) }
  .qs__photo { width:clamp(260px,23vw,330px); margin:0; justify-self:start }
  .qs__facts { grid-template-columns:repeat(3,1fr); gap:20px; border:0 }
  .qs__facts li { display:grid; align-content:start; padding:14px 0 0; border-bottom:0; border-top:2px solid var(--line) }
  .qs__facts li:nth-child(1) { border-top-color:var(--accent-process) }
  .qs__facts li:nth-child(2) { border-top-color:var(--accent-transform) }
  .qs__facts li:nth-child(3) { border-top-color:var(--accent-result) }
}

.proc { position:relative; margin-top:var(--s-lg) }
@media (min-width:1024px) { .proc { margin-top:44px } }
.proc > .anchor-alias { position:absolute }
.proc__head { display:grid; gap:12px; margin-bottom:var(--s-md) }
.proc__title { font:600 var(--t-xl)/1.15 var(--font); letter-spacing:-.02em }
.proc__steps { position:relative; display:grid; gap:22px; margin:0; padding:0 0 0 58px; list-style:none }
.proc__steps::before,.proc__steps::after { content:""; position:absolute; left:21px; top:22px; bottom:22px; width:2px; border-radius:2px; background:var(--line) }
.proc__steps::after { background:linear-gradient(180deg,#3B4EFC,#7B2DFF 55%,#AAFF00); transform-origin:top }
.proc__step { position:relative; display:grid; gap:6px }
.proc__dot { position:absolute; left:-58px; top:0; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--card-bg); color:var(--pc); box-shadow:inset 0 0 0 1.5px var(--pc),0 8px 20px -10px rgba(9,9,14,.3) }
.proc__dot svg { width:20px; height:20px }
.proc__n { font:600 .75rem/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--pc) }
.proc__step h4 { margin:0; font:600 1.1875rem/1.25 var(--font); letter-spacing:-.015em }
.proc__step p:not(.proc__n) { font-size:.9375rem; line-height:1.55; color:var(--fg-muted) }
@media (min-width:1024px) {
  .proc { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,9fr); column-gap:var(--s-lg); align-items:start }
  .proc__steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:0 }
  .proc__steps::before,.proc__steps::after { left:22px; right:22px; top:21px; bottom:auto; width:auto; height:2px; background:var(--line) }
  .proc__steps::after { background:var(--grad-triad); transform-origin:left }
  .proc__dot { position:relative; left:0; margin-bottom:12px }
}

/* ==========================================================================
   8 · DEMOS POR RUBRO
   ========================================================================== */
.portfolio__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:var(--s-md) }
.portfolio .lead { max-width:52ch }
.portfolio__head .section-head { margin-bottom:0 }
.portfolio__side { display:none }
.portfolio { padding-top:calc(var(--s-2xl) * .7); padding-bottom:calc(var(--s-2xl) * .8) }
.portfolio .section-head { gap:12px }
.portfolio__cta-m { margin-top:16px }
/* 320 px: "Quiero una así para mi negocio" en una línea medía 313 px y se cortaba; puede partirse en dos */
.portfolio__cta-m .btn { max-width:100%; white-space:normal; text-align:center; line-height:1.2; padding-block:8px }
.portfolio .rail-progress { margin-top:14px }
@media (min-width:1024px) { .demo-card__shot { aspect-ratio:16/11 } }
@media (min-width:768px) {
  .portfolio__side { display:flex; align-items:center; gap:14px }
  .portfolio__cta-m { display:none }
}
.demos { --rail-col-m:78vw; gap:18px; padding-block:6px 14px }
.demo-card {
  position:relative; display:grid; gap:14px; padding:10px 10px 14px; border-radius:var(--r-xl);
  background:var(--card-bg); border:1px solid var(--color-border-strong); color:var(--fg); text-decoration:none;
  transition:transform var(--d-ui) var(--ease-smooth),box-shadow var(--d-ui),border-color var(--d-ui);
}
.demo-card__shot { position:relative; display:block; aspect-ratio:3/2; border-radius:14px; overflow:hidden; background:#15151D }
.demo-card__shot img { width:100%; height:100%; object-fit:cover }
/* chip abajo a la derecha: arriba a la izquierda pisaba los titulares de las capturas (van todos ahí) */
.demo-card__shot .chip--demo { position:absolute; z-index:2; right:10px; bottom:10px }
/* Travesía: el titular arranca alto; encuadre desde arriba para que el parallax no corte "Cada" */
.demo-card__shot--top img { object-position:50% 0 }
.demo-card__shot--phone { display:grid; justify-items:center; padding-top:22px; background:radial-gradient(70% 60% at 50% 30%,rgba(123,45,255,.35),transparent 70%),#15151D }
.demo-card__shot--phone .frame-phone { width:42%; border-width:7px; border-radius:28px }
.demo-card__shot--phone .frame-phone img { border-radius:21px }
.demo-card__meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-inline:8px }
.demo-card__meta > span:first-child { display:grid; gap:8px; justify-items:start; min-width:0 }
.demo-card__meta b { font:600 1.25rem/1.15 var(--font); letter-spacing:-.02em }
.demo-card__go { display:inline-flex; align-items:center; gap:6px; flex:none; font:600 .875rem/1 var(--font); color:var(--accent-process) }
.demo-card__go .i { width:16px; height:16px; transition:transform var(--d-ui) var(--ease-smooth) }
/* Zoom lento de la captura al pasar el mouse. Va con `scale` (propiedad aparte) porque el .parallax anima el
   `transform` del mismo img: se componen, no se pisan. */
.demo-card__shot img { transition:scale .7s var(--ease-smooth) }
@media (min-width:1024px) {
  .demo-card { padding:12px 12px 18px }
  .demo-card__meta b { font-size:1.375rem }
}
@media (hover:hover) and (pointer:fine) {
  .demo-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-card); border-color:color-mix(in srgb,var(--color-process) 35%,transparent) }
  .demo-card:hover .demo-card__shot img { scale:1.045 }
  .demo-card:hover .demo-card__go .i { transform:translate(2px,-2px) }
}

/* ==========================================================================
   9 · FAQ
   ========================================================================== */
.faq-home__head { gap:14px }
.faq-home__head .link-arrow { justify-self:start } /* sin esto el link ocupa todo el ancho de la grilla */
@media (min-width:1024px) {
  .faq-home__grid { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s-xl); align-items:start }
  .faq-home__head { position:sticky; top:calc(var(--nav-h) + 32px); margin-bottom:0 }
}

/* ==========================================================================
   10 · CONTACTO (oscuro)
   ========================================================================== */
.contacto { overflow:clip; --glow-x1:12%; --glow-y1:8%; --glow-x2:92%; --glow-y2:92% }
.contacto__title { margin:-4px 0 6px; font:700 clamp(2.625rem,1rem + 4.2vw,5.25rem)/.95 var(--font); letter-spacing:-.045em; max-width:11ch; color:var(--color-on-dark) }
.contacto__title .u-mark { z-index:0 }
.contacto__grid { display:grid; gap:24px; align-items:start }
.contacto__aside > .eyebrow { margin-bottom:-4px }
.contacto__aside { display:grid; gap:18px; justify-items:start }
.contacto__wa { width:100% }
.contacto__info { display:grid; gap:4px; margin:0; padding:0; list-style:none; color:var(--fg-muted); font-size:var(--t-sm) }
.contacto__info a { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--fg); text-decoration:none }
.contacto__info a:hover { text-decoration:underline; text-underline-offset:4px }
.contacto__info svg { width:18px; height:18px; flex:none; color:var(--fg-muted) }
.contacto__info .status { min-height:32px; color:var(--fg) }
.contacto__me { display:flex; align-items:center; gap:12px }
.contacto__me img { width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--surface-dark),0 0 0 3.5px var(--color-transform-soft) }
.contacto__me p { display:grid; gap:2px; font-size:var(--t-sm); color:var(--fg-muted); line-height:1.4 }
.contacto__me b { color:var(--fg); font:600 .9375rem/1.2 var(--font) }
.contacto__or { display:flex; align-items:center; gap:14px; width:100%; margin-top:6px; color:var(--fg-muted); font:500 .8125rem/1.3 var(--font); letter-spacing:.04em }
.contacto__or::before,.contacto__or::after { content:""; flex:1; height:1px; background:var(--line) }
/* Formulario y estado "enviado" con el mismo brillo que la tarjeta recomendada: vidrio + borde en degradé */
.contacto__form,.contacto__ok {
  position:relative; border-radius:var(--r-2xl);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 60%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 50px 120px -50px rgba(123,45,255,.6);
}
.contacto__form::before,.contacto__ok::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg,rgba(170,255,0,.45),rgba(59,78,252,.25) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.contacto__form { display:grid; gap:16px; padding:clamp(20px,3vw,40px) }
.contacto__row { display:grid; gap:18px }
.contacto__form textarea.field__input { min-height:96px }
.field__opt { font-weight:400; color:var(--fg-muted) }
.contacto__send { justify-self:start }
.contacto__note { font-size:.875rem; color:var(--fg-muted) }
.contacto .field__hint { font-size:.875rem } /* G5: ≥ 14px a 390 */
@media (max-width:1023px) {
  .contacto__grid { gap:20px }
  .contacto__aside { gap:14px }
  .contacto__form { gap:14px }
  .contacto__row { gap:14px }
}
.contacto__ok { display:grid; gap:16px; justify-items:start; padding:clamp(22px,3vw,40px) }
.contacto__ok-ico { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--color-result); color:#09090E }
.contacto__ok-ico svg { width:26px; height:26px }
.contacto__ok-t { font:600 var(--t-xl)/1.2 var(--font); letter-spacing:-.02em; outline:none }
@media (min-width:768px) {
  .contacto__row { grid-template-columns:1fr 1fr }
  .contacto__wa { width:auto }
}
@media (min-width:1024px) {
  .contacto__grid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s-xl) }
  .contacto__form,.contacto__ok { grid-column:2; grid-row:1 }
  .contacto__aside { grid-column:1; grid-row:1; gap:22px; position:sticky; top:calc(var(--nav-h) + 24px) }
  .contacto__or { display:none }
}

/* ==========================================================================
   Parches del shell (anotados en pedidos-shell.md; borrar cuando pasen a site.css)
   ========================================================================== */
/* G6: el verde de texto #467A00 da 4,497:1 sobre #EEEEF6 ("Paso 4" de #quienes). #3F6E00 ≈ 5,3:1 */
/* (las superficies soft no redeclaran --accent-result: lo heredan ya resuelto, por eso va también acá) */
.home { --color-result-ink:#3F6E00 }
html:not([data-theme=dark]) .home { --accent-result:var(--color-result-ink) }
/* G14: el foco no puede caer en algo que todavía está apareciendo */
html.anim .rv:focus-within,html.anim .rv-clip:focus-within { opacity:1; transform:none; clip-path:none; transition:none; animation:none }
/* G19: el aro de .card--featured es un ::before de un descendiente: `.is-offscreen *` no lo pausa */
.is-offscreen *::before,.is-offscreen *::after { animation-play-state:paused }
/* H6: footer dentro de su presupuesto (≤ 700 px a 1440, ≤ 1.000 px a 390) */
.footer { padding-top:36px }
.footer__word { margin-bottom:24px }
.footer__grid { padding-block:28px }
.footer__bottom { padding-top:20px }
@media (max-width:767px) {
  .footer__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 16px }
  .footer__col:first-child,.footer__col:last-child { grid-column:1 / -1 }
  .footer__col:last-child ul { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px }
  .footer__col:last-child li:first-child,.footer__col:last-child li:last-child { grid-column:1 / -1 }
}
@media (min-width:1024px) {
  .footer { padding-top:48px }
  .footer__word { margin-bottom:28px }
  .footer__grid { padding-block:40px }
  .footer__col a { padding-block:7px }
}

/* FAB del shell (pedido anotado en pedidos-shell.md): con opacity:0 seguía en el orden del Tab (G14).
   visibility:hidden lo saca del Tab; al esconderse espera a que termine el fade. Sin JS no se muestra. */
.fab { transition:opacity .2s,transform .2s var(--ease-smooth),visibility 0s }
.fab.is-hidden,body.drawer-open .fab { visibility:hidden; transition:opacity .2s,transform .2s var(--ease-smooth),visibility 0s linear .2s }
html:not([data-theme]) .fab { display:none }
/* si el Tab llega justo cuando está apareciendo (fundido desde 0), se muestra entero de una */
.fab:not(.is-hidden):focus-visible { opacity:1; transform:none; transition:none }

/* En los rails de mobile las cards se ven de entrada (si no, la que asoma queda invisible) */
@media (max-width:1023px) { html.anim .rail > .rv { opacity:1; transform:none } }
/* rails que sangran fuera del .wrap hasta el borde de la pantalla */
.hero__rail,.works,.probs,.method { max-width:none }

/* Ancho de columna de los rails desde tablet */
@media (min-width:768px) {
  .probs,.method { --rail-col:min(44vw,380px) }
  .plans { --rail-col:min(58vw,400px) }
  .demos { --rail-col:clamp(280px,27vw,360px) }
}
/* Demos más grandes desde 1024 (va acá y no en la sección 8 para ganarle a la regla de 768 de arriba) */
@media (min-width:1024px) { .demos { --rail-col:min(38vw,500px); gap:24px } }

/* ==========================================================================
   Scroll-driven (Chrome/Edge/Safari 26): solo con soporte, sin reduced-motion y con html.anim
   ========================================================================== */
@supports (animation-timeline:scroll()) {
  @media (prefers-reduced-motion:no-preference) {
    html.anim .mesa__spread { animation:mesa-spread linear both; animation-timeline:scroll(root); animation-range:0 85vh }
    html.anim .seal { animation:seal-rot linear both; animation-timeline:scroll(root) }
  }
}
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    html.anim .mw { animation:mw-fill linear both; animation-timeline:view(); animation-range:entry 100% cover calc(36% + var(--k,0) * .7%) }
    html.anim .proc__steps::after { animation:proc-draw linear both; animation-timeline:view(); animation-range:entry 30% cover 55% }
    html.anim .qs__photo::after { animation:qs-shift linear both; animation-timeline:view(); animation-range:entry 0% cover 60% }
  }
}
@keyframes mw-fill { from { opacity:.16 } to { opacity:1 } }
@keyframes proc-draw { from { transform:scale(1,0) } to { transform:none } }
@media (min-width:1024px) { @keyframes proc-draw { from { transform:scale(0,1) } to { transform:none } } }
@keyframes qs-shift { from { transform:translate(-14px,-14px) } to { transform:none } }

/* Demo de gimnasio en #portfolio: el notch no tapa la pantalla (igual que en /crm) */
.demo-card .frame-phone--pad img { box-sizing:border-box; padding-top:28px; background:#0A0A14 }
/* Celulares de 320px: "Ver demo" baja de renglón en vez de salirse de la tarjeta */
@media (max-width:359px) { .demo-card__meta { flex-wrap:wrap; row-gap:10px } }