/* ==========================================================================
   inkbrand lab. — servicio.css (T3) · plantilla de las 6 páginas de servicio
   /webs /branding /crm /automatizacion /integraciones /seo
   Va SIN layer: le gana a site.css sin !important. Mobile first (480 · 768 · 1024 · 1280).
   Acento por página: <body data-accent="process|transform|result">.
   Solo se anima transform y opacity. Loops: como máximo 2 por pantalla, pausados fuera de pantalla.
   ========================================================================== */

/* ---------- Acento de la página (se resuelve por superficie) ---------- */
[data-accent=process] :is([data-surface],.card--featured) { --acc:var(--accent-process); --acc-bg:var(--tag-process-bg); --acc-bd:var(--tag-process-bd) }
[data-accent=transform] :is([data-surface],.card--featured) { --acc:var(--accent-transform); --acc-bg:var(--tag-transform-bg); --acc-bd:var(--tag-transform-bd) }
[data-accent=result] :is([data-surface],.card--featured) { --acc:var(--accent-result); --acc-bg:var(--tag-result-bg); --acc-bd:var(--tag-result-bd) }

main { display:block }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.svc-hero {
  padding-top:calc(var(--nav-h) + var(--promo-h) + clamp(20px,4vw,40px));
  padding-bottom:clamp(56px,7vw,104px);
  overflow:clip;
}
.svc-hero__grid { display:grid; gap:clamp(44px,6vw,64px); align-items:center }
@media (min-width:1024px) {
  .svc-hero { min-height:min(100svh,900px); display:grid; align-items:center }
  .svc-hero__grid { grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(40px,4vw,72px) }
}
.svc-hero__txt { display:grid; gap:22px; justify-items:start; min-width:0 }
.svc-h1 { font-size:clamp(2.5rem,1.1rem + 4.4vw,5.25rem); letter-spacing:-.045em; line-height:.98; max-width:13ch }
.svc-hero .lead { max-width:52ch }
.svc-hero__chips,.svc-hero__ctas { --row-gap:10px }
.svc-hero__ctas .btn { flex:1 1 auto }
@media (min-width:480px){ .svc-hero__ctas .btn { flex:0 0 auto } }

.crumbs ol { display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; font:500 .8125rem/1.2 var(--font); color:var(--fg-muted) }
.crumbs li { display:inline-flex; align-items:center; gap:6px }
.crumbs li + li::before { content:"/"; opacity:.5 }
.crumbs a { color:inherit; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; margin-block:-6px; padding-inline:5px; margin-inline:-5px } /* área de toque de 44 px sin mover el diseño */
.crumbs a:hover { color:var(--fg) }
.crumbs [aria-current] { color:var(--fg) }

.svc-sign { display:flex; align-items:center; gap:12px; font-size:var(--t-sm); color:var(--fg-muted); line-height:1.4 }
.svc-sign img { width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; box-shadow:0 0 0 2px var(--bg-section),0 0 0 3.5px var(--acc) }
.svc-sign b { color:var(--fg); font-weight:600 }

/* Entrada del texto: CSS puro bajo html.anim (no espera JS ni window.load) */
html.anim .svc-hero__txt > :not(h1) { opacity:0; translate:0 14px; animation:svc-in .6s var(--ease-smooth) forwards; animation-delay:calc(80ms + var(--d,0) * 70ms) }
.svc-hero__txt > :nth-child(2) { --d:1 } .svc-hero__txt > :nth-child(4) { --d:3 } .svc-hero__txt > :nth-child(5) { --d:4 }
.svc-hero__txt > :nth-child(6) { --d:5 } .svc-hero__txt > :nth-child(7) { --d:6 }
@keyframes svc-in { to { opacity:1; translate:0 0 } }

/* ---------- Visual del hero: capas con profundidad ---------- */
.svc-vis { position:relative; min-width:0; --px:0; --py:0 }
html.anim .svc-vis { opacity:0; animation:svc-vis-in 1s var(--ease-smooth) .2s forwards }
@keyframes svc-vis-in { from { opacity:0; transform:translateY(28px) scale(.96) } to { opacity:1; transform:none } }
/* profundidad con el mouse (servicio.js escribe --px/--py entre -1 y 1) */
.lyr { transform:translate3d(calc(var(--px) * var(--z,8) * 1px),calc(var(--py) * var(--z,8) * 1px),0); transition:transform .5s var(--ease-smooth) }
.vis-halo { position:absolute; inset:8% 4%; z-index:-1; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 30%,transparent),transparent); opacity:.55; pointer-events:none }

/* Pegatina flotante (sobre las capturas) */
.sticker {
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:16px;
  background:var(--color-card); color:var(--color-text); box-shadow:0 20px 40px -18px rgba(9,9,14,.35),0 0 0 1px rgba(9,9,14,.06);
  font:600 .8125rem/1.2 var(--font); white-space:nowrap;
}
.sticker small { display:block; font:500 .75rem/1.2 var(--font-sec); color:var(--color-muted) }
.sticker__ico { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--color-wa); color:#fff; flex:none }
.sticker__ico svg { width:18px; height:18px }
[data-theme=dark] .sticker { background:#16162A; color:var(--color-text); box-shadow:0 20px 40px -18px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08) }
[data-theme=dark] .sticker small { color:var(--color-muted) }

/* ---------- /webs: pila de 3 capturas ---------- */
.stack3 { position:relative; aspect-ratio:1/.9; max-width:560px; margin-inline:auto }
@media (min-width:1024px){ .stack3 { width:110%; max-width:none; margin:0 0 0 -10% } } /* crece hacia el hueco entre columnas, no pasa el borde derecho del contenedor */
.stack3 > .lyr { position:absolute; width:66% }
.stack3 > .lyr:nth-child(1) { top:0; right:0; z-index:1; --z:6 }
.stack3 > .lyr:nth-child(2) { top:36%; left:0; width:58%; z-index:2; --z:12 } /* 36%: arranca debajo del titular de tierral */
.stack3 > .lyr:nth-child(3) { bottom:0; right:0; width:60%; z-index:3; --z:18 } /* borde izq. al 40%: no pisa "CONSTRUYE." de trama */
.stack3 .rot { transform:rotate(var(--r,0deg)) }
.stack3 > .lyr:nth-child(1) .rot { --r:4deg } .stack3 > .lyr:nth-child(2) .rot { --r:-3deg } .stack3 > .lyr:nth-child(3) .rot { --r:0deg }
.stack3 > .lyr:nth-child(1) .float { --float-dur:7s } .stack3 > .lyr:nth-child(2) .float { --float-dur:8s; animation-delay:-2s } .stack3 > .lyr:nth-child(3) .float { --float-dur:6s; animation-delay:-4s }
.shot-169 img { aspect-ratio:16/10; object-fit:cover; object-position:top }
.stack3 .frame-browser { box-shadow:0 40px 80px -30px color-mix(in srgb,var(--color-process) 45%,transparent),0 12px 24px -12px rgba(9,9,14,.3) }
.frame-browser > .chip--demo { position:absolute; z-index:4; top:36px; right:10px }
.stack3 .sticker-lyr { position:absolute; left:auto; right:2%; bottom:-2%; z-index:4; width:auto; --z:26 } /* abajo a la der.: no pisa ningún titular */
@media (max-width:479px){ .stack3 .frame-browser { --bar:20px } .stack3 .frame-browser::after { top:6px; left:8px; width:6px; height:6px; box-shadow:10px 0 0 rgba(254,188,46,.8),20px 0 0 rgba(40,200,64,.8) } .stack3 .frame-browser__url { display:none } .frame-browser > .chip--demo { top:26px; height:20px; font-size:.6875rem } .stack3 .sticker-lyr { bottom:-7% } }

/* ==========================================================================
   MOCKUPS HTML (.mock) — ilustraciones escalables (todo en em, base = ancho/32)
   ========================================================================== */
.mock { container-type:inline-size; position:relative; width:100%; max-width:560px; margin-inline:auto }
@media (min-width:1024px){ .svc-vis > .mock { max-width:none; width:106%; margin-inline:-6% 0 } }
.mock__in { font-size:calc(100cqi / 32); position:relative; font-family:var(--font-sec); line-height:1.3 }
.mock-win {
  position:relative; border-radius:1.1em; overflow:hidden; background:#101019; color:#EDEDF6;
  box-shadow:0 3em 5em -2.5em color-mix(in srgb,var(--acc,#3B4EFC) 55%,transparent),0 0 0 1px rgba(255,255,255,.06);
}
.mock-win__bar { display:flex; align-items:center; gap:.45em; height:2.4em; padding:0 1em; background:#181824; border-bottom:1px solid rgba(255,255,255,.06) }
.mock-win__bar i { width:.6em; height:.6em; border-radius:50%; background:#FF5F57 } .mock-win__bar i:nth-child(2) { background:#FEBC2E } .mock-win__bar i:nth-child(3) { background:#28C840 }
.mock-win__bar b { margin-left:.8em; font:600 .78em/1 var(--font); color:rgba(237,237,246,.6); letter-spacing:.02em }
.mock-label { position:absolute; z-index:5; top:-.9em; right:1.2em; font:600 .72em/1 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:.55em .9em; border-radius:100px; background:var(--color-text); color:var(--color-bg) }
.mock-av { width:2em; height:2em; border-radius:50%; display:grid; place-items:center; flex:none; font:700 .72em/1 var(--font); color:#fff; background:var(--c,#3B4EFC) }

/* ---------- /crm: tablero ---------- */
.board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7em; padding:1em }
.board__head { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; margin-bottom:.2em }
.board__head b { font:700 1.1em/1 var(--font); letter-spacing:-.02em }
.board__head span { font:500 .8em/1 var(--font); color:rgba(237,237,246,.55) }
.board__col { display:grid; gap:.55em; align-content:start; padding:.6em; border-radius:.8em; background:rgba(255,255,255,.035); min-width:0 }
.board__col > p { display:flex; align-items:flex-start; gap:.45em; font:600 .74em/1.2 var(--font); color:rgba(237,237,246,.7); margin-bottom:.15em; min-height:2.4em }
.board__col > p::before { margin-top:.3em }
.board__col > p::before { content:""; width:.55em; height:.55em; border-radius:50%; background:var(--c); flex:none }
.board__col > p em { font-style:normal; margin-left:auto; color:rgba(237,237,246,.45) }
.tcard { background:#1C1C2A; border:1px solid rgba(255,255,255,.07); border-radius:.65em; padding:.6em; display:grid; gap:.4em; min-width:0 }
.tcard__top { display:flex; align-items:center; gap:.5em; min-width:0 }
.tcard__top b { font:600 .8em/1.15 var(--font); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tcard small { font-size:.7em; color:rgba(237,237,246,.55); line-height:1.3 }
.tcard .tag { justify-self:start; font:600 .64em/1 var(--font); padding:.4em .6em; border-radius:100px; background:rgba(139,164,255,.14); color:#B9C6FF }
.tcard .tag--t { background:rgba(192,128,255,.14); color:#D6B3FF } .tcard .tag--r { background:rgba(170,255,0,.14); color:#CFFF7A }
.tcard--hot { border-color:rgba(170,255,0,.45); box-shadow:0 .8em 1.6em -.8em rgba(170,255,0,.45) }
/* la tarjeta que pasa de "Nueva consulta" a "Presupuesto enviado" (una vez) */
html.anim .tcard--move { transform:translateX(calc(-100% - 1.9em)) rotate(-3deg); opacity:.001; transition:transform 1.1s var(--ease-smooth) 1.1s,opacity .4s 1.1s }
html.anim .is-live .tcard--move { transform:none; opacity:1 }
html.anim .board .tcard:not(.tcard--move) { opacity:0; transform:translateY(.8em); transition:opacity .5s,transform .6s var(--ease-smooth); transition-delay:calc(.35s + var(--i,0) * 90ms) }
html.anim .is-live .board .tcard:not(.tcard--move) { opacity:1; transform:none }
.board-note { position:absolute; right:0; bottom:-1.4em; z-index:3 }

/* ---------- /automatizacion: flujo ---------- */
.flow { position:relative; display:grid; gap:0; padding:1.4em 1.2em 1.6em; background:linear-gradient(180deg,#12121C,#0D0D14); border-radius:1.2em; color:#EDEDF6; box-shadow:0 3em 5em -2.5em color-mix(in srgb,var(--acc,#3B4EFC) 55%,transparent),0 0 0 1px rgba(255,255,255,.06) }
.flow__node { position:relative; z-index:1; display:flex; align-items:center; gap:.9em; width:78%; padding:.85em 1em; border-radius:.9em; background:#1B1B28; border:1px solid rgba(255,255,255,.08) }
.flow__node:nth-child(3) { margin-left:auto } .flow__node:nth-child(5) { margin-left:11% }
.flow__link { position:relative; height:2.2em }
.vwire { position:absolute; left:var(--x,50%); top:0; bottom:0; width:2px; overflow:hidden; border-radius:2px; background:repeating-linear-gradient(180deg,rgba(237,237,246,.22) 0 .35em,transparent .35em .7em) }
.vwire__run { position:absolute; inset:0; animation:svc-run-y 2.6s cubic-bezier(.45,0,.55,1) infinite; animation-delay:var(--wd,0s) }
.vwire__run::after { content:""; position:absolute; left:50%; bottom:0; width:.6em; height:.6em; margin-left:-.3em; border-radius:50%; background:var(--c,#AAFF00); box-shadow:0 0 .8em .15em var(--c,#AAFF00) }
.vwire__run::before { content:""; position:absolute; left:0; right:0; bottom:.3em; height:1.6em; background:linear-gradient(180deg,transparent,var(--c,#AAFF00)); opacity:.7 }
@keyframes svc-run-y { from { transform:translateY(-100%) } to { transform:translateY(0) } }
.flow__ico { width:2.6em; height:2.6em; border-radius:.75em; display:grid; place-items:center; flex:none; background:var(--c); color:var(--ci,#fff) }
.flow__ico svg { width:1.3em; height:1.3em }
.flow__node b { display:block; font:600 .95em/1.2 var(--font); letter-spacing:-.01em }
.flow__node small { display:block; margin-top:.2em; font-size:.74em; color:rgba(237,237,246,.58) }
.flow__node .when { margin-left:auto; font:600 .66em/1 var(--font); letter-spacing:.06em; text-transform:uppercase; color:rgba(237,237,246,.5); white-space:nowrap }
.wire { position:absolute; height:2px; transform-origin:0 50%; overflow:hidden; border-radius:2px; background:repeating-linear-gradient(90deg,rgba(237,237,246,.22) 0 .35em,transparent .35em .7em) }
.wire__run { position:absolute; inset:0; animation:svc-run 2.6s cubic-bezier(.45,0,.55,1) infinite; animation-delay:var(--wd,0s) }
.wire__run::after { content:""; position:absolute; right:0; top:50%; width:.6em; height:.6em; margin-top:-.3em; border-radius:50%; background:var(--c,#AAFF00); box-shadow:0 0 .8em .15em var(--c,#AAFF00) }
.wire__run::before { content:""; position:absolute; right:.3em; top:0; bottom:0; width:3.5em; background:linear-gradient(90deg,transparent,var(--c,#AAFF00)); opacity:.7 }
@keyframes svc-run { from { transform:translateX(-100%) } to { transform:translateX(0) } }
.flow__bubble { position:absolute; z-index:3; right:0; bottom:-4.2em; width:15em; padding:.75em .9em .6em; border-radius:1em 1em .3em 1em; background:#DCF8C6; color:#0B2412; box-shadow:0 1.4em 2.4em -1em rgba(0,0,0,.55); font-size:.82em; line-height:1.35 }
.flow__bubble i { display:block; margin-top:.35em; text-align:right; font-style:normal; font-size:.78em; color:#3C6E4A }
html.anim .flow__bubble { opacity:0; transform:translateY(1em) scale(.9); transform-origin:100% 100%; transition:opacity .5s 1.2s,transform .7s var(--ease-organic) 1.2s }
html.anim .is-live .flow__bubble { opacity:1; transform:none }
html.anim .flow__node { opacity:0; transform:translateX(-1em); transition:opacity .5s,transform .6s var(--ease-smooth); transition-delay:calc(.2s + var(--i,0) * 160ms) }
html.anim .is-live .flow__node { opacity:1; transform:none }

/* ---------- /integraciones: web al centro ---------- */
.hub { position:relative; aspect-ratio:32/27; border-radius:1.2em; background:radial-gradient(60% 55% at 50% 48%,rgba(123,45,255,.18),transparent 70%),linear-gradient(180deg,#12121C,#0C0C13); box-shadow:0 3em 5em -2.5em color-mix(in srgb,var(--acc,#7B2DFF) 55%,transparent),0 0 0 1px rgba(255,255,255,.06); color:#EDEDF6; overflow:hidden }
.hub::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(139,164,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(139,164,255,.07) 1px,transparent 1px); background-size:2em 2em }
.hub .wire { z-index:1; left:50%; top:48.5% }
.hub__web { position:absolute; z-index:2; left:50%; top:48.5%; width:12.5em; translate:-50% -50%; border-radius:.8em; overflow:hidden; background:#F7F7FC; color:#09090E; box-shadow:0 1.5em 3em -1em rgba(0,0,0,.7),0 0 0 .35em rgba(123,45,255,.25) }
.hub__web-bar { display:flex; gap:.3em; align-items:center; height:1.5em; padding:0 .6em; background:#E9E9F2 }
.hub__web-bar i { width:.42em; height:.42em; border-radius:50%; background:#C9C9D6 }
.hub__web-in { padding:.8em .8em .9em; display:grid; gap:.45em }
.hub__web-in b { font:700 1em/1.05 var(--font); letter-spacing:-.03em }
.hub__web-in span { height:.4em; border-radius:.2em; background:#DADAE6 } .hub__web-in span:nth-of-type(2) { width:70% }
.hub__web-in em { justify-self:start; font:600 .68em/1 var(--font); font-style:normal; padding:.55em .8em; border-radius:100px; background:#3B4EFC; color:#fff; margin-top:.2em }
.hub__node { position:absolute; z-index:2; display:flex; align-items:center; gap:.6em; padding:.6em .8em .6em .6em; border-radius:.9em; background:#1B1B28; border:1px solid rgba(255,255,255,.1); translate:-50% -50%; white-space:nowrap; box-shadow:0 1em 2em -1em rgba(0,0,0,.7) }
.hub__node b { font:600 .82em/1.15 var(--font) } .hub__node small { display:block; font-size:.68em; color:rgba(237,237,246,.55) }
.hub__node .flow__ico { width:2.2em; height:2.2em; border-radius:.6em }
html.anim .hub__node { opacity:0; transform:scale(.85); transition:opacity .5s,transform .7s var(--ease-organic); transition-delay:calc(.3s + var(--i,0) * 140ms) }
html.anim .is-live .hub__node { opacity:1; transform:none }

/* ---------- /seo: resultado en el mapa ---------- */
.maps { border-radius:1.2em; overflow:hidden; background:var(--color-card); color:#09090E; box-shadow:0 3em 5em -2.5em color-mix(in srgb,var(--acc,#467A00) 45%,rgba(9,9,14,.4)),0 0 0 1px rgba(9,9,14,.08) }
[data-theme=dark] .maps { background:#F7F7FC }
.maps__search { position:relative; z-index:2; display:flex; align-items:center; gap:.7em; margin:.9em; padding:.7em 1em; border-radius:100px; background:#fff; box-shadow:0 .3em 1em -.3em rgba(9,9,14,.25),0 0 0 1px rgba(9,9,14,.08); font:500 .9em/1 var(--font-sec) }
.maps__search svg { width:1.1em; height:1.1em; flex:none; color:#6B6B7A }
.maps__search b { font-weight:600 }
.maps__search i { width:1px; height:1.1em; background:#3B4EFC; animation:svc-caret 1s steps(1) 4 }
@keyframes svc-caret { 50% { opacity:0 } }
.maps__map { position:relative; height:11em; margin-top:-3.4em; background:
  radial-gradient(12em 5em at 78% 105%,#CFE3F5 60%,transparent 61%),
  linear-gradient(28deg,transparent 46%,#fff 46.5% 49%,transparent 49.5%),
  linear-gradient(-62deg,transparent 58%,#fff 58.5% 60.5%,transparent 61%),
  linear-gradient(90deg,transparent 30%,#FDFDFF 30.4% 31.6%,transparent 32%),
  linear-gradient(0deg,transparent 55%,#FDFDFF 55.4% 57%,transparent 57.4%),
  radial-gradient(6em 3.5em at 18% 30%,#D8EDD3 70%,transparent 71%),
  #EDEEE8 }
.pin { position:absolute; left:var(--x); top:var(--y); width:1.9em; height:1.9em; translate:-50% -100% }
.pin__dot { position:absolute; inset:0; border-radius:50% 50% 50% 0; rotate:-45deg; background:#8C8C99; box-shadow:0 .3em .6em -.2em rgba(0,0,0,.4) }
.pin__dot::after { content:""; position:absolute; inset:32%; border-radius:50%; background:#fff }
.pin--you .pin__dot { background:#E5484D }
.pin--you { width:2.4em; height:2.4em }
.pin--you::before { content:""; position:absolute; left:50%; bottom:-.35em; width:2.2em; height:.9em; margin-left:-1.1em; border-radius:50%; background:rgba(229,72,77,.35); animation:svc-pulse 2s var(--ease-smooth) infinite }
@keyframes svc-pulse { 0% { transform:scale(.5); opacity:.9 } 100% { transform:scale(2.2); opacity:0 } }
html.anim .pin { opacity:0; transform:translateY(-1.6em); transition:opacity .3s,transform .6s var(--ease-organic); transition-delay:calc(.3s + var(--i,0) * 140ms) }
html.anim .is-live .pin { opacity:1; transform:none }
.maps__list { display:grid; padding:.4em .9em .9em }
.place { display:grid; grid-template-columns:1fr auto; gap:.2em .8em; padding:.75em .2em; border-top:1px solid rgba(9,9,14,.08) }
.place:first-child { border-top:0 }
.place b { font:600 .98em/1.2 var(--font); letter-spacing:-.01em }
.place small { grid-column:1; font-size:.76em; color:#5E5E6E }
.place .stars { color:#D38B00; letter-spacing:.05em }
.place__thumb { grid-row:1 / span 3; grid-column:2; width:3.8em; height:3.8em; border-radius:.6em; background:var(--g,linear-gradient(135deg,#C9D6C0,#8FA88A)) }
.place--you { margin:.2em -.5em; padding:.8em .7em; border-radius:.9em; border:0; background:#F2FFE0; box-shadow:inset 0 0 0 1.5px #AAFF00 }
.place--you + .place { border-top:0 }
.place .you { justify-self:start; margin-top:.15em; font:700 .64em/1 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:.45em .7em; border-radius:100px; background:#09090E; color:#AAFF00 }
.place--dim { opacity:.55 }
html.anim .place--you { transform:translateY(1em); opacity:0; transition:transform .7s var(--ease-smooth) .9s,opacity .5s .9s }
html.anim .is-live .place--you { transform:none; opacity:1 }

/* ---------- /branding: tablero de marca ---------- */
.bboard { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:3.2em; gap:.6em }
.bt { position:relative; border-radius:.9em; overflow:hidden; box-shadow:0 1.6em 3em -1.6em rgba(9,9,14,.55),0 0 0 1px rgba(9,9,14,.06) }
.bt--logo { grid-column:1 / span 4; grid-row:span 3; background:#0E1411; color:#F1F3EC; display:grid; place-items:center; align-content:center; gap:.4em }
.bt--logo b { font:700 3.1em/1 var(--font); letter-spacing:.16em }
.bt--logo b i { font-style:normal; color:#C6F432 }
.bt--logo small { font:500 .72em/1 var(--font); letter-spacing:.3em; text-transform:uppercase; color:rgba(241,243,236,.55) }
.bt--pal { grid-column:5 / span 2; grid-row:span 3; display:grid; grid-template-rows:1.4fr 1fr 1fr 1fr }
.bt--pal span { display:flex; align-items:flex-end; padding:.45em .55em; font:600 .62em/1 var(--font); letter-spacing:.04em; background:var(--s); color:var(--sc,#fff) }
.bt--type { grid-column:1 / span 2; grid-row:span 2; background:#F4F1EA; color:#0E1411; display:grid; align-content:space-between; padding:.7em .8em }
.bt--type b { font:600 2.6em/1 var(--font); letter-spacing:-.04em }
.bt--type small { font:500 .66em/1.3 var(--font-sec); color:#57594F }
.bt--shot { grid-column:3 / span 4; grid-row:span 2; background:#111 }
.bt--shot img { width:100%; height:100%; object-fit:cover; object-position:var(--op,30% 55%) } /* --op por captura: que el titular entre entero */
.bt--shot .chip--demo { position:absolute; top:.6em; right:.6em; height:1.9em; font-size:.62em }
.bcard { width:11.5em; aspect-ratio:85/55; border-radius:.6em; padding:.9em; display:grid; align-content:space-between; background:#C6F432; color:#0E1411; box-shadow:0 2em 3em -1.4em rgba(9,9,14,.6) }
.bcard b { font:700 1.05em/1 var(--font); letter-spacing:.14em }
.bcard small { font:500 .62em/1.35 var(--font-sec) }
.bcard-pos { position:absolute; z-index:3; right:.6em; bottom:-2.6em }
.bcard-rot { transform:rotate(-8deg) }
html.anim .bt { opacity:0; transform:scale(.94); transition:opacity .5s,transform .7s var(--ease-smooth); transition-delay:calc(.25s + var(--i,0) * 90ms) }
html.anim .is-live .bt { opacity:1; transform:none }

/* ==========================================================================
   Marquee de beneficios (entre hero e "incluye")
   ========================================================================== */
.svc-marquee { border-block:1px solid var(--line) }
.svc-marquee .marquee__item { color:var(--fg) }

/* ==========================================================================
   2 · QUÉ INCLUYE
   ========================================================================== */
.inc-grid { display:grid; gap:14px; list-style:none; margin:0; padding:0 }
@media (min-width:768px){ .inc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px } }
@media (min-width:1024px){ .inc-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px } }
.inc-card {
  --sx:50%; --sy:0%;
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-content:start; overflow:hidden; isolation:isolate; height:100%;
}
.inc-card::before { /* luz que sigue al mouse */
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; transition:opacity var(--d-ui);
  background:radial-gradient(420px circle at var(--sx) var(--sy),color-mix(in srgb,var(--acc) 12%,transparent),transparent 60%);
}
.inc-card:hover::before { opacity:1 }
.inc-card h3 { font-size:clamp(1.125rem,1.05rem + .4vw,1.3125rem); letter-spacing:-.015em; align-self:center }
.inc-card p { grid-column:2; color:var(--fg-muted); font-size:var(--t-sm); line-height:1.55 }
.inc-ico { grid-row:span 2; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--acc-bg); border:1px solid var(--acc-bd); color:var(--acc); transition:transform var(--d-ui) var(--ease-organic) }
.inc-ico svg { width:22px; height:22px }
.inc-card:hover .inc-ico { transform:rotate(-8deg) scale(1.06) }
@media (min-width:1024px){
  .inc-card { grid-template-columns:1fr; gap:14px; padding:28px }
  .inc-card p { grid-column:1 }
  .inc-ico { grid-row:auto; width:52px; height:52px; margin-bottom:10px }
}
.inc-foot { margin-top:var(--s-md); display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; color:var(--fg-muted); font-size:var(--t-sm) }

/* ==========================================================================
   3 · ASÍ SE VE / CASO REAL
   ========================================================================== */
.case { display:grid; gap:clamp(24px,3vw,48px); align-items:center; margin-bottom:var(--s-xl) }
@media (min-width:1024px){ .case { grid-template-columns:minmax(0,7fr) minmax(0,5fr) } }
.case__vis { position:relative }
@media (max-width:1023px){ .case__vis { margin-bottom:28px } }
.case__vis .frame-browser { max-width:100% }
/* Cosmos: el parallax escala ×1.08 desde el centro y mochaba el texto del hero de la captura (pegado al borde izquierdo).
   Anclado a la izquierda, se recorta el lado derecho, que queda tapado por el cotizador superpuesto. */
.case[data-caso=cosmos] .case__vis .parallax img { transform-origin:0 50% }
.case__over { position:absolute; right:-3%; bottom:-28px; width:40%; z-index:2 }
@media (max-width:767px){ .case__over { right:-2%; bottom:-20px; width:46% } }
.case__over .frame-browser { box-shadow:0 30px 60px -24px rgba(9,9,14,.6) }
.case__txt { display:grid; gap:16px; justify-items:start }
.case__txt p { color:var(--fg-muted); max-width:44ch }
.case__chips { --row-gap:8px }
@media (min-width:1024px){ .case--rev { grid-template-columns:minmax(0,5fr) minmax(0,7fr) } .case--rev .case__vis { order:2 } }
/* Sol Ripa: el texto de su portada ocupa la mitad de abajo y la izquierda de la captura; la tarjeta superpuesta abajo a
   la derecha tapaba "forma" y "urbano". Va a la derecha, sobre el cielo: debajo de la barra del navegador y de "Índice"
   (24% ≈ 8–10% de la imagen) y más angosta, para terminar antes de la segunda línea del título. Al ras del wrap: en
   .case--rev la captura queda en la columna derecha y con right:-3% se salía. */
.case[data-caso=solripa] .case__over { top:24%; bottom:auto; right:0; width:36% }
@media (min-width:1024px){ .case--rev .case__over { right:0 } }

/* Lead de /webs: una versión si hay casos reales arriba de las demos y otra si no queda ninguno con permiso */
.section--show:not(:has(.case[data-caso]:not([hidden]))) .if-casos,.section--show:has(.case[data-caso]:not([hidden])) .if-demos { display:none }

.gallery-head { display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:16px; margin-bottom:24px }
.gallery-head h3 { font-size:var(--t-xl) }
.gallery-head p { color:var(--fg-muted); font-size:var(--t-sm); max-width:48ch }

.demo-card { position:relative; display:grid; gap:14px; text-decoration:none; color:var(--fg) }
.demo-card .frame-browser { border-radius:12px 12px 0 0 }
.demo-card .frame-browser img { aspect-ratio:4/3; object-fit:cover; object-position:top }
.demo-card__meta { display:flex; align-items:center; justify-content:space-between; gap:12px }
.demo-card__meta b { display:block; font:600 1.125rem/1.2 var(--font); letter-spacing:-.01em }
.demo-card__meta small { color:var(--fg-muted) }
.demo-card__go { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); flex:none; transition:background-color var(--d-ui),color var(--d-ui),transform var(--d-ui) var(--ease-smooth) }
.demo-card__go svg { width:16px; height:16px }
.demo-card:hover .demo-card__go { background:var(--fg); color:var(--bg-section); transform:rotate(-45deg) }
.demo-card .case-bg { padding:clamp(14px,2vw,22px) clamp(14px,2vw,22px) 0 }
@media (hover:hover){ .demo-card .frame-browser { transition:transform .6s var(--ease-smooth) } .demo-card:hover .frame-browser { transform:translateY(-8px) scale(1.02) } }
.rail--demos { --rail-col:clamp(280px,30vw,400px); padding-bottom:6px }

/* Casos reales chicos (crm) */
.cases-mini { display:grid; gap:20px; margin-top:var(--s-xl) }
@media (min-width:768px){ .cases-mini { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px } }
.case-mini { display:grid; gap:18px; align-content:start }
.case-mini__txt { display:grid; gap:10px; justify-items:start }
.case-mini__txt p:not(.eyebrow) { color:var(--fg-muted); font-size:var(--t-sm) }
/* Un solo caso con permiso: ocupa todo el ancho (en vez de media grilla con un hueco al lado) y, desde 1024, va horizontal */
@media (min-width:768px){ .cases-mini > .case-mini:only-child { grid-column:1 / -1 } }
@media (min-width:1024px){ .cases-mini > .case-mini:only-child { grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:center; column-gap:var(--s-lg) } }
.seq-note { margin-top:18px }

/* Tableros de marca de ejemplo (/branding) */
.boards { display:grid; gap:20px }
@media (min-width:768px){ .boards { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.board-demo { display:grid; gap:14px }
.board-demo .mock { max-width:none }
.board-demo .bboard { grid-auto-rows:2.6em }
.board-demo figcaption { display:flex; align-items:center; gap:10px; font:600 1rem/1.2 var(--font) }
.board-demo figcaption small { font:400 var(--t-sm)/1.3 var(--font-sec); color:var(--fg-muted) }

/* Dúo: captura/mock + texto (crm, automatización, integraciones, seo) */
.duo { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,4vw,56px); align-items:center }
@media (min-width:1024px){ .duo { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .duo--rev > :first-child { order:2 } }
.duo__txt { display:grid; gap:18px; justify-items:start; min-width:0 }
.duo__txt > p { color:var(--fg-muted); max-width:46ch }
.checks { list-style:none; margin:0; padding:0; display:grid; gap:12px }
.checks li { display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; font-size:var(--t-base) }
.checks li::before { content:""; width:24px; height:24px; border-radius:50%; margin-top:1px; background:var(--acc-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B4EFC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat; border:1px solid var(--acc-bd) }
[data-surface=dark] .checks li::before,.card--featured .checks li::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AAFF00' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") }
.checks b { font-weight:600; color:var(--fg) }
.checks span { color:var(--fg-muted) }

/* Teléfonos (crm) */
.phones { position:relative; display:flex; justify-content:center; align-items:flex-end; gap:clamp(14px,3vw,28px); padding:clamp(24px,4vw,40px) clamp(12px,3vw,32px) 0; min-height:0; min-width:0 }
.phones .frame-phone { width:min(clamp(150px,22vw,250px),calc(50% - 14px)); flex:none } /* en 320 los dos entran enteros */
/* captura sin barra de estado: la bajo por debajo del notch */
.frame-phone--pad img { box-sizing:border-box; padding-top:28px; background:#0A0A14 }
.phones > :nth-child(2) { margin-bottom:clamp(28px,5vw,64px) }
.phone-app { position:absolute; inset:0; border-radius:26px; overflow:hidden; background:#F7F7FC; color:#09090E; container-type:inline-size }
.phone-app__in { font-size:calc(100cqi / 17); padding:2.6em .9em .9em; display:flex; flex-direction:column; gap:.6em; height:100%; font-family:var(--font-sec) }
.phone-app__in > * { flex:none }
.phone-app__in > b { font:700 1.25em/1.1 var(--font); letter-spacing:-.03em }
.phone-app__in > small { font-size:.72em; color:#5E5E6E; margin-top:-.4em }
.appt { display:grid; grid-template-columns:auto 1fr; gap:.1em .6em; align-items:center; padding:.6em .65em; border-radius:.7em; background:#fff; box-shadow:0 0 0 1px rgba(9,9,14,.07) }
.appt time { grid-row:span 2; font:700 .8em/1 var(--font); padding:.5em .45em; border-radius:.45em; background:var(--tag-process-bg); color:#3B4EFC; font-variant-numeric:tabular-nums }
.appt b { font:600 .78em/1.15 var(--font) } .appt small { font-size:.64em; color:#5E5E6E }
.appt--ok time { background:rgba(170,255,0,.22); color:#467A00 }
.appt--paid small::after { content:" · pagó"; color:#467A00; font-weight:700 }
.appt--todo { background:#F6F0FF; box-shadow:0 0 0 1px rgba(123,45,255,.18) }
.appt--todo time { background:rgba(123,45,255,.14); color:#6A1FE0 }
.phone-app__stat { display:grid; grid-template-columns:1fr 1fr; gap:.4em; margin-top:.2em }
.phone-app__stat span { padding:.55em .6em; border-radius:.7em; background:#09090E; color:#F4F4FA; font:500 .6em/1.25 var(--font-sec) }
.phone-app__stat b { display:block; font:700 1.9em/1 var(--font); letter-spacing:-.03em; color:#AAFF00 }
.phone-app__stat span + span { background:#3B4EFC } .phone-app__stat span + span b { color:#fff }
.phone-app__tabs { display:flex; justify-content:space-around; margin-top:auto; padding-top:.6em; border-top:1px solid rgba(9,9,14,.08) }
.phone-app__tabs i { width:1.1em; height:1.1em; border-radius:.3em; background:#D5D5E0 } .phone-app__tabs i:first-child { background:#3B4EFC }

/* Chat (automatización) */
.chat { width:100%; max-width:420px; margin-inline:auto; border-radius:28px; overflow:hidden; background:#0B141A; color:#E9EDEF; box-shadow:0 40px 80px -40px color-mix(in srgb,var(--acc,#3B4EFC) 60%,transparent),0 0 0 1px rgba(255,255,255,.06); container-type:inline-size }
.chat__in { font-size:max(12px,calc(100cqi / 26)) }
.chat__head { display:flex; align-items:center; gap:.7em; padding:.9em 1em; background:#1F2C33 }
.chat__head b { display:block; font:600 1em/1.2 var(--font) } .chat__head small { font-size:.75em; color:#8696A0 }
.chat__body { display:grid; gap:.55em; padding:1.1em .9em 1.3em; min-height:17em; align-content:start; background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.03) 0 1px,transparent 1.5px) 0 0/1.4em 1.4em,#0B141A }
.msg { max-width:84%; padding:.55em .75em .4em; border-radius:.8em; font-size:.92em; line-height:1.4; background:#1F2C33 }
.msg i { display:block; text-align:right; font-style:normal; font-size:.7em; color:#8696A0; margin-top:.15em }
.msg--out { justify-self:end; background:#005C4B; border-top-right-radius:.2em }
.msg--in { border-top-left-radius:.2em }
.msg--auto::before { content:"Automático"; display:block; font:700 .66em/1 var(--font); letter-spacing:.08em; text-transform:uppercase; color:#AAFF00; margin-bottom:.45em }
.chat__day { justify-self:center; font:600 .7em/1 var(--font); padding:.5em .8em; border-radius:.5em; background:#1F2C33; color:#8696A0 }
html.anim .chat .msg { opacity:0; transform:translateY(.8em) scale(.96); transition:opacity .4s,transform .5s var(--ease-organic); transition-delay:calc(.3s + var(--i,0) * .9s) }
html.anim .chat.is-live .msg { opacity:1; transform:none }

/* Secuencia de 3 pasos (integraciones) */
.seq { display:grid; gap:14px; counter-reset:seq }
@media (min-width:768px){ .seq { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px } }
.seq__it { display:grid; gap:14px; align-content:start }
.seq__it > b { display:flex; align-items:center; gap:10px; font:600 1.0625rem/1.25 var(--font) }
.seq__it > b::before { counter-increment:seq; content:counter(seq); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font:700 .8125rem/1 var(--font); background:var(--acc-bg); color:var(--acc); border:1px solid var(--acc-bd); flex:none }
.seq__it > p { color:var(--fg-muted); font-size:var(--t-sm) }
.seq .mock { max-width:none }
.mini { border-radius:16px; background:var(--color-card); color:#09090E; padding:1.1em; box-shadow:0 20px 40px -24px rgba(9,9,14,.35),0 0 0 1px rgba(9,9,14,.07); display:grid; gap:.6em; font-size:max(12px,calc(100cqi / 20)); min-height:12.5em; align-content:start }
[data-theme=dark] .mini { background:#F7F7FC }
.mini__row { display:flex; justify-content:space-between; gap:1em; font-size:.82em; color:#4A4A58 }
.mini__row b { color:#09090E }
.mini__btn { margin-top:.3em; text-align:center; font:700 .85em/1 var(--font); padding:.85em; border-radius:.6em; background:#009EE3; color:#fff }
.mini__ok { display:flex; align-items:center; gap:.5em; font:600 .8em/1.2 var(--font); color:#467A00 }
.mini__ok::before { content:"✓"; width:1.5em; height:1.5em; border-radius:50%; display:grid; place-items:center; background:rgba(170,255,0,.3); font-size:.8em }
.cal { display:grid; grid-template-columns:repeat(5,1fr); gap:.3em; font:600 .66em/1 var(--font); color:#6B6B7A; text-align:center }
.cal span { padding:.4em 0 } .cal em { grid-column:span 1; font-style:normal; height:2.4em; border-radius:.35em; background:#EEEEF6 }
.cal em.ev { grid-column:span 2; display:grid; place-items:center; background:#3B4EFC; color:#fff; font-size:1em; padding:0 .3em }
.sheet { display:grid; grid-template-columns:1.4fr 1fr .8fr; border-radius:.4em; overflow:hidden; box-shadow:0 0 0 1px rgba(9,9,14,.1); font-size:.72em }
.sheet span { padding:.5em .5em; border-top:1px solid rgba(9,9,14,.08); border-left:1px solid rgba(9,9,14,.08); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#2A2A36 }
.sheet span:nth-child(3n+1) { border-left:0 }
.sheet .h { background:#E6F4EA; font-weight:700; border-top:0; color:#1E6B35 }
.sheet .new { background:#F2FFE0 }
html.anim .seq__it { opacity:0; transform:translateY(20px); transition:opacity .6s,transform .7s var(--ease-smooth); transition-delay:calc(var(--i,0) * 160ms) }
html.anim .seq.is-live .seq__it { opacity:1; transform:none }

/* Resultado de búsqueda (seo) */
.serp { border-radius:20px; background:var(--color-card); color:#09090E; padding:clamp(16px,2.4vw,26px); box-shadow:0 30px 60px -34px rgba(9,9,14,.4),0 0 0 1px rgba(9,9,14,.07); display:grid; gap:18px; container-type:inline-size }
[data-theme=dark] .serp { background:#F7F7FC }
.serp__q { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:100px; box-shadow:0 0 0 1px rgba(9,9,14,.14); font:500 .9375rem/1 var(--font-sec) }
.serp__q svg { width:18px; height:18px; color:#6B6B7A; flex:none }
.res { display:grid; gap:4px }
.res small { font-size:.8125rem; color:#4A4A58 }
.res b { font:500 1.125rem/1.3 var(--font); color:#1A0DAB; letter-spacing:-.01em }
.res p { font-size:.875rem; line-height:1.5; color:#4A4A58 }
.res--you { position:relative; padding:14px 16px; margin-inline:-8px; border-radius:14px; background:#F2FFE0; box-shadow:inset 0 0 0 1.5px #AAFF00 }
.res--dim { opacity:.5 }
.res .you { position:absolute; top:-11px; right:14px; font:700 .6875rem/1 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:100px; background:#09090E; color:#AAFF00 }

/* ==========================================================================
   4 · CÓMO TRABAJO
   ========================================================================== */
.steps { position:relative; display:grid; gap:28px; list-style:none; margin:0; padding:0 0 0 44px }
.steps__line { position:absolute; left:15px; top:6px; bottom:6px; width:2px; border-radius:2px; background:linear-gradient(180deg,#3B4EFC,#7B2DFF 55%,#AAFF00); transform-origin:top }
.steps::before { content:""; position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:var(--line) }
.step { position:relative; display:grid; gap:6px }
.step__dot { position:absolute; left:-44px; top:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font:700 .8125rem/1 var(--font); color:#fff; background:var(--c); box-shadow:0 0 0 5px var(--bg-section); font-variant-numeric:tabular-nums }
.step:nth-child(2) .step__dot { --c:#3B4EFC } .step:nth-child(3) .step__dot { --c:#7B2DFF } .step:nth-child(4) .step__dot { --c:#7B2DFF } .step:nth-child(5) .step__dot { --c:#AAFF00; color:#09090E }
.step h3 { font-size:var(--t-lg); letter-spacing:-.015em; line-height:1.25; padding-top:4px }
.step p { color:var(--fg-muted); font-size:var(--t-sm); line-height:1.6; max-width:34ch }
@media (min-width:1024px){
  .steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; padding:56px 0 0 }
  .steps::before,.steps__line { left:16px; right:16px; top:15px; bottom:auto; width:auto; height:2px }
  .steps__line { background:var(--grad-triad); transform-origin:left }
  .step__dot { left:0; top:-56px }
}
@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    html.anim .steps__line { animation:svc-grow-y linear both; animation-timeline:view(); animation-range:entry 30% cover 55% }
    @media (min-width:1024px){ html.anim .steps__line { animation-name:svc-grow-x } }
  }
}
@keyframes svc-grow-y { from { transform:scaleY(0) } to { transform:none } }
@keyframes svc-grow-x { from { transform:scaleX(0) } to { transform:none } }

/* ==========================================================================
   5 · PRECIO (oscuro, pantalla que se expande)
   ========================================================================== */
.svc-price__grid { display:grid; gap:clamp(36px,4vw,64px) }
@media (min-width:1024px){ .svc-price__grid { grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start } }
.svc-price__lead { display:grid; gap:20px; justify-items:start; align-content:start }
.big-price { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:6px; color:var(--fg) }
.big-price__pre { font:500 var(--t-lg)/1 var(--font); color:var(--fg-muted) }
.big-price__num { font:700 clamp(4.25rem,2.4rem + 8vw,9rem)/.9 var(--font); letter-spacing:-.05em; font-variant-numeric:tabular-nums; background:linear-gradient(100deg,#F4F4FA 20%,#CCFF44 60%,#AAFF00); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.04em }
.big-price__unit { font:600 var(--t-lg)/1 var(--font); color:var(--fg-muted) }
.big-price .price__ars { flex-basis:100%; font-size:.9375rem }
.svc-price__lead > p.lead { color:var(--fg-muted) }

.plans { display:grid; gap:16px }
@media (min-width:768px){ .plans { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px } }
.plan-mini { display:grid; gap:14px; align-content:start; padding:clamp(22px,2.4vw,30px) }
.plan-mini .eyebrow { color:var(--fg-muted) }
.plan-mini h3 { font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem) }
.plan-mini__top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap }
.plan-mini__plazo { font:500 var(--t-sm)/1.3 var(--font); color:var(--fg-muted) }
.plan-mini__plazo b { color:var(--fg); font-weight:600 }
.plan-mini .checks { gap:10px; margin-top:4px }
.plan-mini .checks li { font-size:var(--t-sm) }
.plan-mini .checks li::before { width:20px; height:20px; background-size:12px }
.plan-mini .checks { --x:0 }
.plan-mini .checks li { grid-template-columns:20px 1fr }
.plan-mini .link-arrow { margin-top:auto; color:var(--fg) }
.card--featured.plan-mini .price__num { color:var(--color-result) }

.sueltos { margin-top:var(--s-lg); border-top:1px solid var(--line) }
.sueltos__head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:22px 0 8px }
.sueltos__head p { font:500 var(--t-xs)/1.2 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted) }
.suelto { display:grid; grid-template-columns:1fr; gap:4px 20px; align-items:baseline; align-content:start; padding:18px 0; border-bottom:1px solid var(--line) } /* align-content:start: si el vecino ocupa 2 líneas, no se abre hueco entre título y descripción */
.suelto b { font:600 var(--t-base)/1.3 var(--font); letter-spacing:-.01em }
.suelto small { grid-column:1; color:var(--fg-muted); font-size:var(--t-sm); line-height:1.5 }
.suelto .price { column-gap:5px; margin-top:6px }
@media (min-width:480px){ .suelto { grid-template-columns:1fr auto } .suelto .price { grid-row:1 / span 2; grid-column:2; justify-content:flex-end; text-align:right; margin-top:0 } .suelto .price__ars { text-align:right } }
.suelto .price__num { font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem); color:var(--accent-result) }
.suelto .price__ars { font-size:.75rem }
@media (min-width:1024px){
  .sueltos__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px }
  /* cantidad impar: el último ocupa la fila entera (sin celda vacía abajo a la derecha) */
  .sueltos__list > .suelto:nth-child(odd):last-child:not(:first-child) { grid-column:1 / -1 }
  .sueltos__list > .suelto:nth-child(odd):last-child:not(:first-child) small { max-width:60ch }
}

/* ==========================================================================
   6 · FAQ
   ========================================================================== */
.faq-wrap { display:grid; gap:var(--s-lg) }
@media (min-width:1024px){ .faq-wrap { grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px; align-items:start } .faq-wrap > .section-head { position:sticky; top:calc(var(--nav-h) + 32px); margin-bottom:0 } }
.faq-wrap .section-head { margin-bottom:0 }

/* ==========================================================================
   7 · CIERRE
   ========================================================================== */
.svc-close { overflow:clip }
/* el brillo violeta se apaga antes del borde (sin corte recto contra el footer) */
.svc-close.bg-glow::after { -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 98%); mask-image:linear-gradient(180deg,#000 70%,transparent 98%) }
.svc-close__top { display:grid; gap:24px; justify-items:start; padding-bottom:var(--s-xl) }
.svc-close__top .hero-word { font-size:clamp(3rem,1.2rem + 9vw,9rem); max-width:12ch }
.svc-close__top > p:not(.eyebrow) { color:var(--fg-muted); font-size:var(--t-lg); max-width:48ch }
.svc-close .u-mark__svg { bottom:-.26em }
.svc-close__cta { --row-gap:14px }
.svc-close__cta .small { color:var(--fg-muted) }
.others { border-top:1px solid var(--line); padding-top:24px }
.others > p { font:500 var(--t-xs)/1.2 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:8px }
.others ul { list-style:none; margin:0; padding:0; display:grid }
@media (min-width:768px){ .others ul { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px } }
@media (min-width:1280px){ .others ul { grid-template-columns:repeat(3,minmax(0,1fr)) } }
.others a {
  position:relative; display:flex; align-items:center; gap:14px; min-height:72px; padding:12px 0; border-bottom:1px solid var(--line);
  color:var(--fg); text-decoration:none; font:600 clamp(1.125rem,1rem + .6vw,1.5rem)/1.2 var(--font); letter-spacing:-.02em;
}
.others a > span:not(.svc-ico) { flex:1; transition:transform var(--d-ui) var(--ease-smooth) }
.others a small { display:block; font:400 var(--t-sm)/1.35 var(--font-sec); letter-spacing:0; color:var(--fg-muted); margin-top:3px }
.others a > svg { width:20px; height:20px; flex:none; color:var(--fg-muted); transition:transform var(--d-ui) var(--ease-smooth),color var(--d-ui) }
.others a::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--grad-triad); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease-smooth) }
.others a:hover::after { transform:none }
.others a:hover > span:not(.svc-ico) { transform:translateX(6px) }
.others a:hover > svg { transform:translate(3px,-3px); color:var(--color-result) }

/* ==========================================================================
   Tema oscuro: detalles
   ========================================================================== */
[data-theme=dark] .stack3 .frame-browser { box-shadow:0 40px 80px -30px rgba(91,111,255,.45),0 12px 24px -12px rgba(0,0,0,.6) }

/* ==========================================================================
   Parches del shell (anotados en .pipeline/research/pedidos-shell.md para pasarlos a site.css)
   ========================================================================== */
/* FAB oculto: fuera del orden de Tab (visibility después del fundido) */
.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 .2s }
/* Sin JavaScript (data-theme lo pone el script del head): nav con fondo propio y sin FAB */
html:not([data-theme]) .nav { background:rgba(247,247,252,.94); border-bottom-color:var(--color-border); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4) }
html:not([data-theme]) .fab { display:none }

/* Seguro: si site.js/servicio.js no corren, lo animado aparece igual a los 2,5 s */
html.anim:not(.js) :is(.tcard,.flow__node,.flow__bubble,.hub__node,.pin,.place--you,.bt,.msg,.seq__it) { animation:rv-show 0s 2.5s forwards }

/* Reduced motion: nada se mueve solo */
@media (prefers-reduced-motion:reduce) {
  .wire__run { animation:none !important; transform:none !important }
  .wire__run::before { display:none }
  .pin--you::before,.maps__search i,.vwire__run { animation:none !important }
  .vwire__run::before { display:none }
  .lyr { transform:none !important }
}