/* ============================================================
   VECTA — Subpáginas de solución (plantilla compartida)
   Se carga junto a vecta.css. El color se parametriza con --acc
   en <main class="sp" style="--acc:var(--indigo)"> por página.
   ============================================================ */
.sp{ --acc:var(--turquesa); }

/* —— Hero —— */
.sp-hero{ position:relative; padding:132px 0 clamp(40px,6vw,80px); overflow:hidden; }
.sp-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 60% at 12% -6%, color-mix(in srgb,var(--acc) 20%,transparent) 0%, transparent 56%),
    radial-gradient(50% 55% at 102% 4%, rgba(90,90,214,.14) 0%, transparent 56%); }
.sp-hero .container{ position:relative; z-index:1; }
.crumb{ font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:30px; display:flex; gap:9px; align-items:center; }
.crumb a{ color:var(--muted); transition:color .25s; } .crumb a:hover{ color:var(--acc); }
.crumb b{ color:var(--text); font-weight:500; } .crumb i{ color:var(--faint); font-style:normal; }
.sp-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; }
.sp-hero-copy .eyebrow{ color:var(--acc); }
.sp-hero-copy h1{ font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,4.6vw,3.7rem); line-height:1.04;
  letter-spacing:-.03em; margin:18px 0 20px; color:#fff; max-width:16ch; }
.sp-hero-copy .lead{ color:var(--text); }
.sp-cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin:30px 0 22px; }
.sp-hero-meta{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.02em; }
.sp-hero-meta b{ color:var(--acc); font-weight:500; }

/* —— Secciones —— */
.sp-section{ padding-block:clamp(48px,7vw,92px); position:relative; }
.sp-section.soft{ background:var(--bg-soft); }
.sp-head{ max-width:660px; margin-bottom:clamp(34px,5vw,58px); }
.sp-head.center{ margin-inline:auto; text-align:center; }
.sp-head .eyebrow{ color:var(--acc); }
.sp-head h2{ margin-top:16px; }
.sp-head p{ margin-top:16px; color:var(--muted); font-size:1.08rem; }

/* —— Capacidades —— */
.caps{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.caps-3{ grid-template-columns:repeat(3,1fr); }
.cap{ padding:28px; border:1px solid var(--border); border-radius:14px; background:var(--card);
  transition:border-color .35s var(--e-in), transform .4s var(--e-in); }
.cap:hover{ border-color:color-mix(in srgb,var(--acc) 40%,transparent); transform:translateY(-3px); }
.cap-ico{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); margin-bottom:14px; }
.cap-ico svg{ width:21px; height:21px; }
.cap h3{ font-size:1.15rem; margin-bottom:8px; }
.cap p{ color:var(--muted); font-size:.95rem; line-height:1.6; }

/* —— Pasos —— */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.step{ position:relative; padding:30px 26px; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.step-n{ font-family:var(--mono); font-size:12px; color:var(--acc); margin-bottom:14px; display:block; letter-spacing:.04em; }
.step h3{ font-size:1.18rem; margin-bottom:8px; }
.step p{ color:var(--muted); font-size:.95rem; line-height:1.6; }

/* —— Integraciones —— */
.integra{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border:1px solid var(--border-2);
  border-radius:999px; font-family:var(--mono); font-size:13px; color:var(--text); }
.chip i{ width:7px; height:7px; border-radius:50%; background:var(--acc); }
.integra-note{ margin-top:20px; color:var(--muted); font-size:.98rem; }

/* —— FAQ —— */
.spfaq{ max-width:760px; margin-inline:auto; }
/* Centrar la sección de FAQ (encabezado + acordeón) en todas las subpáginas */
.sp-head:has(+ .spfaq){ margin-inline:auto; text-align:center; }
.spfaq details{ border-bottom:1px solid var(--border); }
.spfaq summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center; justify-content:space-between;
  gap:24px; font-family:var(--display); font-weight:700; font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink); }
.spfaq summary::-webkit-details-marker{ display:none; }
.spfaq summary .ic{ flex-shrink:0; width:26px; height:26px; border:1px solid var(--border-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--acc); transition:transform .35s var(--e-in), background-color .3s, color .3s; }
.spfaq details[open] summary .ic{ transform:rotate(45deg); background:var(--acc); color:#00120e; }
.spfaq .a{ color:var(--muted); max-width:70ch; padding-bottom:22px; margin-top:-4px; line-height:1.7; }

/* —— CTA final —— */
.sp-cta{ text-align:center; }
.sp-cta-panel{ position:relative; overflow:hidden; border:1px solid var(--border-2); border-radius:24px;
  padding:clamp(42px,6vw,76px) clamp(24px,4vw,48px);
  background:linear-gradient(120deg, color-mix(in srgb,var(--indigo) 20%,var(--card)) 0%, color-mix(in srgb,var(--acc) 18%,var(--card)) 100%); }
.sp-cta-panel h2{ font-family:var(--serif); font-weight:700; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.025em; line-height:1.08; color:#fff; }
.sp-cta-panel p{ color:var(--text); margin:16px auto 30px; max-width:48ch; }

/* ============================================================
   Mockups (primitivos, acento con --acc) — cualquier subpágina
   ============================================================ */
.sp-hero-visual{ position:relative; }
.mk{ background:linear-gradient(180deg,var(--card),#0a0a10); border:1px solid var(--border-2); border-radius:16px;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9); overflow:hidden; }
.mk-bar{ display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border); }
.mk-bar .d{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.13); }
.mk-bar .t{ margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.mk-bar .live{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--acc); display:flex; align-items:center; gap:6px; }
.mk-bar .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--acc); animation:pulse 1.6s infinite; }
.mk-body{ padding:18px; }
/* chat */
.cc-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cc-ico{ width:32px; height:32px; border-radius:9px; background:color-mix(in srgb,var(--acc) 16%,transparent); display:flex; align-items:center; justify-content:center; color:var(--acc); flex-shrink:0; }
.cc-ico svg{ width:16px; height:16px; }
.cc-top b{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink); }
.cc-top span{ font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-left:auto; }
.bubble{ max-width:80%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.45; margin-bottom:12px; }
.bubble.in{ background:var(--bg-soft); border:1px solid var(--border); border-bottom-left-radius:4px; color:var(--text); }
.bubble.out{ background:color-mix(in srgb,var(--acc) 15%,transparent); border:1px solid color-mix(in srgb,var(--acc) 32%,transparent); border-bottom-right-radius:4px; color:var(--ink); margin-left:auto; }
.bubble .who{ display:block; font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:4px; }
.chat-done{ display:flex; align-items:center; gap:8px; padding-top:12px; margin-top:4px; border-top:1px solid var(--border); font-family:var(--mono); font-size:11.5px; color:var(--acc); }
.chat-done .k{ width:18px; height:18px; border-radius:50%; background:var(--acc); color:#00120e; display:flex; align-items:center; justify-content:center; font-size:10px; }
/* flujo */
.flow{ display:flex; flex-direction:column; gap:10px; }
.flow-node{ display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--border); border-radius:11px; background:var(--bg-soft); }
.flow-node .fi{ width:30px; height:30px; border-radius:8px; background:color-mix(in srgb,var(--acc) 16%,transparent); color:var(--acc); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.flow-node .fi svg{ width:15px; height:15px; }
.flow-node b{ font-family:var(--sans); font-weight:600; font-size:13px; color:var(--ink); }
.flow-node span{ font-family:var(--mono); font-size:10.5px; color:var(--muted); display:block; }
.flow-node .st{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--acc); }
.flow-line{ width:1px; height:12px; background:var(--border-2); margin-left:31px; }
/* búsqueda */
.searchbar{ display:flex; align-items:center; gap:10px; border:1px solid var(--border-2); border-radius:11px; padding:12px 15px; font-size:13.5px; color:var(--text); margin-bottom:14px; }
.searchbar svg{ width:16px; height:16px; color:var(--muted); }
.src{ border:1px solid var(--border); border-radius:11px; padding:13px 15px; background:var(--bg-soft); margin-bottom:10px; }
.src .sh{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.src .badge{ font-family:var(--mono); font-size:10px; color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 32%,transparent); border-radius:20px; padding:2px 9px; }
.src p{ font-size:12.5px; color:var(--muted); line-height:1.5; }
.src b{ color:var(--ink); }
/* código */
.codewin .cl{ font-family:var(--mono); font-size:12.5px; line-height:1.9; color:var(--muted); }
.codewin .cl .kw{ color:var(--indigo); } .codewin .cl .fn{ color:var(--acc); } .codewin .cl .st{ color:#e0a878; } .codewin .cl .cm{ color:var(--faint); }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.6)} }
/* onda de voz (indicador "hablando") */
.wave{ display:inline-flex; align-items:center; gap:2.5px; height:14px; margin-left:auto; }
.wave i{ width:3px; background:var(--acc); border-radius:2px; height:35%; animation:wv 1s ease-in-out infinite; }
.wave i:nth-child(2){ animation-delay:.15s } .wave i:nth-child(3){ animation-delay:.3s }
.wave i:nth-child(4){ animation-delay:.45s } .wave i:nth-child(5){ animation-delay:.2s }
@keyframes wv{ 0%,100%{height:25%} 50%{height:100%} }
/* indicador "hablando" (typing) para la reproducción en directo */
.typing{ display:inline-flex; align-items:center; gap:5px; align-self:flex-end; margin-left:auto; margin-bottom:12px;
  padding:12px 16px; border-radius:14px; border-bottom-right-radius:4px;
  background:color-mix(in srgb,var(--acc) 13%,transparent); border:1px solid color-mix(in srgb,var(--acc) 28%,transparent); }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--acc); opacity:.4; animation:typedot 1s infinite; }
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes typedot{ 0%,60%,100%{ opacity:.3; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }

/* —— Casos de uso reales (tarjetas de escenario) —— */
.uc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.ucard{ display:flex; flex-direction:column; padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--card);
  transition:border-color .35s var(--e-in), transform .4s var(--e-in); }
.ucard:hover{ border-color:color-mix(in srgb,var(--acc) 42%,transparent); transform:translateY(-3px); }
.ucard-head{ display:flex; align-items:center; gap:11px; }
.ucard-ico{ width:38px; height:38px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); }
.ucard-ico svg{ width:19px; height:19px; }
.ucard-sector{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.ucard-title{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em; line-height:1.2; margin-top:2px; }
.ucard-chat{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.ucard-msg{ font-size:12.5px; line-height:1.45; padding:9px 12px; border-radius:12px; }
.ucard-msg b{ display:block; font-family:var(--mono); font-size:9px; color:var(--muted); margin-bottom:3px; font-weight:500; letter-spacing:.03em; }
.ucard-msg.in{ background:var(--bg-soft); border:1px solid var(--border); border-bottom-left-radius:3px; color:var(--text); align-self:flex-start; max-width:94%; }
.ucard-msg.out{ background:color-mix(in srgb,var(--acc) 14%,transparent); border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); border-bottom-right-radius:3px; color:var(--ink); align-self:flex-end; max-width:94%; }
.ucard-out{ margin-top:14px; padding-top:13px; border-top:1px solid var(--border); display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px; color:var(--acc); }
.ucard-out .k{ width:16px; height:16px; border-radius:50%; background:var(--acc); color:#00120e; display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; }

/* —— Conmutador vertical de escenarios (uno grande a la vez) —— */
.vsw{ display:grid; grid-template-columns:minmax(240px,290px) 1fr; gap:clamp(20px,3vw,40px); align-items:stretch; }
.vsw-tabs{ display:flex; flex-direction:column; gap:10px; }
.vsw .switch-tab{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 15px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--muted); text-align:left; transition:border-color .3s var(--e-in), background-color .3s, color .3s; }
.vsw .switch-tab:hover{ border-color:var(--border-2); color:var(--text); }
.vsw .switch-tab.is-active{ border-color:color-mix(in srgb,var(--acc) 50%,transparent); background:color-mix(in srgb,var(--acc) 10%,var(--card)); color:var(--ink); }
.vsw-ico{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 15%,transparent); }
.vsw-ico svg{ width:18px; height:18px; }
.vsw-txt{ display:flex; flex-direction:column; gap:1px; line-height:1.2; min-width:0; }
.vsw-txt b{ font-family:var(--display); font-weight:700; font-size:.95rem; color:inherit; letter-spacing:-.01em; }
.vsw-txt span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* La fila la define SIEMPRE la columna de tabs: el panel se saca del flujo
   (absolute) y rellena esa altura, así el cuadro derecho nunca la sobrepasa
   —ni cuando aparece el indicador de "hablando"— porque no puede empujar. */
.vsw-panels{ position:relative; overflow:hidden; }
.vsw .switch-panel{ display:none; }
.vsw .switch-panel.is-active{ display:block; position:absolute; inset:0; animation:swIn .4s var(--e-in) both; }
@keyframes swIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Estilo LLAMADA (transcripción en directo, no chat de burbujas) — conmutador y hero */
.vsw .mk{ border:0; height:100%; }
:is(.vsw,.sp-hero-visual) .mk-body{ padding:4px 22px 20px; }
:is(.vsw,.sp-hero-visual) .cc-top{ padding:14px 0 14px; margin-bottom:4px; border-bottom:1px solid var(--border); }
:is(.vsw,.sp-hero-visual) .cc-top .wave{ height:17px; }
:is(.vsw,.sp-hero-visual) .bubble{ position:relative; max-width:none !important; width:100%; margin:0 !important; padding:13px 2px 13px 84px !important;
  background:transparent !important; border:0 !important; border-bottom:1px solid var(--border) !important; border-radius:0 !important;
  display:block; font-size:14px; line-height:1.5; }
:is(.vsw,.sp-hero-visual) .bubble .who{ position:absolute; left:2px; top:15px; display:block !important; margin:0 !important; font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
:is(.vsw,.sp-hero-visual) .bubble.in{ color:var(--text); }
:is(.vsw,.sp-hero-visual) .bubble.out{ color:var(--ink); }
:is(.vsw,.sp-hero-visual) .bubble.out .who{ color:var(--acc); }
:is(.vsw,.sp-hero-visual) .typing{ align-self:auto !important; margin:8px 0 8px 84px !important; }
:is(.vsw,.sp-hero-visual) .chat-done{ margin-top:16px; }

/* —— Conoce al agente (persona + capacidades) —— */
.meet{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; }
.meet-bullets{ list-style:none; display:flex; flex-direction:column; gap:24px; margin-top:8px; }
.meet-bullets li{ display:flex; gap:16px; align-items:flex-start; }
.meet-bico{ flex-shrink:0; width:44px; height:44px; border-radius:11px; background:color-mix(in srgb,var(--acc) 14%,transparent); border:1px solid color-mix(in srgb,var(--acc) 26%,transparent); display:flex; align-items:center; justify-content:center; color:var(--acc); margin-top:2px; }
.meet-bico svg{ width:21px; height:21px; }
.meet-bullets b{ display:block; font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); margin-bottom:4px; }
.meet-bullets span{ color:var(--muted); font-size:.95rem; line-height:1.6; }
.agent-card{ position:relative; overflow:hidden; border:1px solid var(--border-2); border-radius:20px; padding:clamp(28px,3vw,40px);
  background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 12%,var(--card)) 0%, var(--card) 62%); }
.agent-card::before{ content:""; position:absolute; top:-50px; right:-50px; width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--acc) 26%,transparent), transparent 70%); filter:blur(22px); pointer-events:none; }
.agent-card > *{ position:relative; }
.agent-avatar{ width:64px; height:64px; border-radius:18px; background:color-mix(in srgb,var(--acc) 18%,transparent); border:1px solid color-mix(in srgb,var(--acc) 34%,transparent); display:flex; align-items:center; justify-content:center; color:var(--acc); margin-bottom:20px; }
.agent-avatar svg{ width:30px; height:30px; }
.agent-name{ font-family:var(--display); font-weight:800; font-size:2rem; letter-spacing:-.02em; color:var(--ink); line-height:1; }
.agent-role{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); margin-top:9px; }
.agent-status{ display:inline-flex; align-items:center; gap:8px; margin-top:15px; font-family:var(--mono); font-size:11.5px; color:var(--text); }
.agent-status::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--acc); animation:pulse 1.8s infinite; }
.agent-badges{ display:flex; flex-wrap:wrap; gap:7px; margin-top:24px; }
.agent-badges span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; padding:6px 11px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--border-2); color:var(--text); }

/* ParticleText (port React Bits) */
.particle-text{ position:relative; display:block; width:100%; overflow:hidden; isolation:isolate; }
.particle-text__canvas{ position:absolute; inset:0; display:block; width:100%; height:100%; }
.particle-text__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.agent-particle{ height:132px; margin:0 0 4px -2px; }

/* MaskedHeading (efecto React Bits) — imagen a través de las letras */
.masked-heading{ color:transparent; -webkit-background-clip:text; background-clip:text;
  background-position:50% 50%; background-repeat:no-repeat; will-change:background-position; }
.masked-heading.mh-reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--e-in), transform 1s var(--e-in); }
.masked-heading.mh-reveal.mh-in{ opacity:1; transform:none; }
.mh-statement{ font-family:var(--serif); font-weight:800; font-size:clamp(2.5rem,6.5vw,5.2rem); line-height:1.12; letter-spacing:-.03em; max-width:18ch; margin-inline:auto; text-align:center; padding-bottom:.16em;
  background:linear-gradient(110deg,#00d9b6 0%,#5a5ad6 44%,#7b5cff 72%,#F26B3F 100%); background-size:100% 100%; background-position:center;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* —— Personalidades de voz (carrusel infinito, estilo Vera) —— */
.voice-gallery{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.vgal-track{ display:flex; gap:16px; width:max-content; animation:vgal 55s linear infinite; }
.voice-gallery:hover .vgal-track{ animation-play-state:paused; }
@keyframes vgal{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.vcard{ --acc:var(--turquesa); flex:0 0 clamp(214px,19vw,240px); position:relative; overflow:hidden; min-height:330px; border-radius:20px; border:1px solid rgba(255,255,255,.1); padding:26px 24px; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; transition:transform .4s var(--e-in), border-color .3s, box-shadow .3s; }
.vcard.is-selected{ border-color:var(--acc); box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 65%,transparent), 0 22px 50px -26px rgba(0,0,0,.85); }
.vcard.is-selected .vcard-glow{ opacity:.6; }
.vcard::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(165deg, var(--vc-top,#0a1414) 0%, var(--vc-bot,#05070b) 100%); }
.vcard:hover{ transform:translateY(-6px); }
.vcard-glow{ position:absolute; top:18px; right:14px; width:130px; height:130px; border-radius:50%; z-index:0; background:radial-gradient(circle, var(--acc), transparent 68%); opacity:.3; filter:blur(24px); transition:opacity .3s; }
.vcard-num{ position:absolute; top:24px; left:24px; z-index:1; font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--acc); }
.vcard-eq, .vcard-name, .vcard-desc, .vcard-play{ position:relative; z-index:1; }
.vcard-eq{ display:flex; align-items:flex-end; gap:3px; height:20px; margin-bottom:16px; opacity:0; transition:opacity .3s; }
.vcard-eq i{ width:3px; height:30%; border-radius:2px; background:var(--acc); }
.vcard-name{ font-family:var(--display); font-weight:800; font-size:1.8rem; letter-spacing:-.02em; color:#fff; line-height:1.05; margin-bottom:9px; }
.vcard-desc{ font-size:12.5px; color:rgba(255,255,255,.62); line-height:1.45; margin-bottom:20px; }
.vcard-play{ display:inline-flex; align-items:center; gap:9px; width:fit-content; background:var(--acc); color:#00120e; border-radius:9px; padding:11px 18px; font-family:var(--display); font-weight:700; font-size:12.5px; transition:transform .2s var(--e-in); }
.vcard:hover .vcard-play{ transform:scale(1.04); }
.vcard-play svg{ width:13px; height:13px; fill:currentColor; }
.vcard.is-playing{ border-color:color-mix(in srgb,var(--acc) 60%,transparent); }
.vcard.is-playing .vcard-glow{ opacity:.55; animation:glowPulse 1.7s ease-in-out infinite; }
.vcard.is-playing .vcard-eq{ opacity:1; }
.vcard.is-playing .vcard-eq i{ animation:vwave 1s ease-in-out infinite; }
.vcard-eq i:nth-child(2){ animation-delay:.12s } .vcard-eq i:nth-child(3){ animation-delay:.24s }
.vcard-eq i:nth-child(4){ animation-delay:.36s } .vcard-eq i:nth-child(5){ animation-delay:.48s }
@keyframes vwave{ 0%,100%{ height:22% } 50%{ height:100% } }
@keyframes glowPulse{ 0%,100%{ opacity:.4; transform:scale(1) } 50%{ opacity:.62; transform:scale(1.14) } }

/* —— Integraciones (2 filas, logo + nombre) —— */
.ilogos{ position:relative; overflow:hidden; margin-top:clamp(30px,4vw,48px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.ilogos-row{ display:flex; align-items:center; gap:clamp(42px,5vw,74px); width:max-content; will-change:transform; }
.ilogos-row + .ilogos-row{ margin-top:clamp(18px,2.4vw,32px); }
.ilogos-row.r1{ animation:ilogosL 58s linear infinite; }
.ilogos-row.r2{ animation:ilogosR 58s linear infinite; }
.ilogos:hover .ilogos-row{ animation-play-state:paused; }
@keyframes ilogosL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes ilogosR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.ilogo-item{ display:inline-flex; align-items:center; gap:12px; flex-shrink:0; opacity:.55; transition:opacity .3s var(--e-in); }
.ilogo-item:hover{ opacity:1; }
.ilogo-item img{ height:25px; width:auto; }
.ilogo-item span{ font-family:var(--display); font-weight:600; font-size:clamp(.95rem,1.4vw,1.1rem); color:var(--text); white-space:nowrap; letter-spacing:-.01em; }
@media(prefers-reduced-motion:reduce){ .ilogos-row{ animation:none; } }

/* ═══════ Agente de WhatsApp — teléfono + chat enriquecido ═══════ */
.wa-stage{ position:relative; display:flex; justify-content:center; align-items:flex-start; padding:14px 0; }
.wa-phone{ position:relative; z-index:1; width:min(330px,84vw); border-radius:42px; padding:11px;
  background:linear-gradient(160deg,#20242c,#0b0d11); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 54px 110px -36px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07); }
.wa-notch{ position:absolute; top:20px; left:50%; transform:translateX(-50%); width:92px; height:5px; border-radius:3px; background:rgba(255,255,255,.13); z-index:3; }
.wa-screen{ position:relative; border-radius:32px; overflow:hidden; background:#0b141a; }
.wa-screen::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.045; pointer-events:none;
  background-image:radial-gradient(circle at 22% 30%,#fff 0 1px,transparent 1px),radial-gradient(circle at 72% 62%,#fff 0 1px,transparent 1px); background-size:28px 28px; }
.wa-head{ position:relative; z-index:2; display:flex; align-items:center; gap:11px; padding:16px 15px 13px; background:#1f2c33; }
.wa-back{ color:#aebac1; font-size:19px; line-height:1; margin-right:-3px; }
.wa-ava{ width:37px; height:37px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand-grad); }
.wa-ava svg{ width:19px; height:19px; }
.wa-hmeta{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.wa-hmeta b{ font-family:var(--display); font-weight:600; font-size:.92rem; color:#e9edef; }
.wa-hmeta .on{ font-size:11px; color:#4fb477; }
.wa-hicons{ margin-left:auto; display:flex; gap:17px; color:#aebac1; }
.wa-hicons svg{ width:18px; height:18px; }
.wa-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:7px; padding:16px 13px 9px; }
.wa-day{ align-self:center; background:#182229; color:#8696a0; font-size:10px; letter-spacing:.06em; padding:5px 11px; border-radius:7px; margin-bottom:4px; }
.wa-msg{ position:relative; max-width:82%; padding:7px 10px 8px; border-radius:11px; font-size:13.3px; line-height:1.46; box-shadow:0 1px 1px rgba(0,0,0,.18); }
.wa-msg.in{ align-self:flex-start; background:#202c33; color:#e9edef; border-top-left-radius:3px; }
.wa-msg.out{ align-self:flex-end; background:#3a3a7d; color:#ececff; border-top-right-radius:3px; }
.wa-msg .t{ float:right; margin:7px 0 -3px 12px; font-size:9.5px; color:rgba(233,237,239,.42); }
.wa-msg.out .t{ color:rgba(236,236,255,.5); }
.wa-quick{ align-self:flex-start; width:82%; max-width:250px; margin-top:1px; display:flex; flex-direction:column; gap:2px; }
.wa-qbtn{ display:flex; align-items:center; justify-content:center; gap:7px; padding:9px; background:#202c33; color:#8f8ff0; border-radius:9px; font-family:var(--display); font-weight:600; font-size:12.5px; }
.wa-qbtn svg{ width:14px; height:14px; }
.wa-receipt{ align-self:flex-end; display:flex; align-items:center; gap:9px; max-width:82%; padding:9px 11px; background:#3a3a7d; color:#ececff; border-radius:11px; border-top-right-radius:3px; font-size:12.3px; }
.wa-receipt .k{ width:19px; height:19px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:11px; }
/* Tarjeta de producto en el chat (catálogo) */
.wa-prod{ align-self:flex-start; width:84%; max-width:248px; border-radius:12px; overflow:hidden; background:#202c33; border-top-left-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.2); }
.wa-prod .img{ height:136px; background:#1f272e; }
.wa-prod .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.wa-prod .body{ padding:10px 12px 11px; }
.wa-prod .nm{ font-family:var(--display); font-weight:600; font-size:13px; color:#e9edef; }
.wa-prod .meta{ display:flex; align-items:center; gap:9px; margin-top:6px; }
.wa-prod .price{ font-family:var(--display); font-weight:800; font-size:15.5px; color:#fff; letter-spacing:-.01em; }
.wa-prod .stk{ font-family:var(--mono); font-size:9.5px; color:#7fd1a6; border:1px solid rgba(127,209,166,.4); border-radius:5px; padding:2px 7px; }
.wa-input{ position:relative; z-index:2; display:flex; align-items:center; gap:9px; padding:8px 12px 13px; }
.wa-input .field{ flex:1; height:38px; border-radius:20px; background:#202c33; display:flex; align-items:center; padding:0 15px; color:#5f727c; font-size:12.5px; }
.wa-send{ width:38px; height:38px; border-radius:50%; flex-shrink:0; background:var(--acc); display:flex; align-items:center; justify-content:center; color:#fff; }
.wa-send svg{ width:16px; height:16px; }
/* Chips flotantes de anotación */
.wa-chip{ position:absolute; z-index:2; display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:13px;
  background:rgba(18,20,28,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--border-2); font-family:var(--display); font-weight:600; font-size:12.5px; color:var(--ink);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.75); }
.wa-chip svg{ width:16px; height:16px; color:var(--acc); flex-shrink:0; }
.wa-chip.c1{ top:9%; left:-5%; animation:waFloat 5.5s ease-in-out infinite; }
.wa-chip.c2{ bottom:16%; right:-7%; animation:waFloat 5.5s ease-in-out infinite -2.6s; }
@keyframes waFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
@media(prefers-reduced-motion:no-preference){
  .wa-stage .wa-body > *{ opacity:0; transform:translateY(9px); animation:waIn .5s var(--e-in) forwards; animation-delay:calc(.35s + var(--i,0)*.62s); }
}
@keyframes waIn{ to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce){ .wa-chip{ animation:none; } }

/* —— Problema: notificaciones sin responder —— */
.wa-prob{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,68px); align-items:center; }
.wa-prob-copy .eyebrow{ color:var(--acc); margin-bottom:18px; }
.wa-prob-copy h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); max-width:16ch; }
.wa-prob-copy p{ margin-top:20px; color:var(--muted); font-size:1.05rem; line-height:1.65; max-width:44ch; }
.notif-stack{ display:flex; flex-direction:column; gap:12px; }
.wa-notif{ display:flex; align-items:flex-start; gap:13px; padding:14px 16px; border-radius:16px; background:var(--card); border:1px solid var(--border-2); box-shadow:0 22px 46px -30px rgba(0,0,0,.7); }
.wa-notif:nth-child(2){ opacity:.74; } .wa-notif:nth-child(3){ opacity:.5; }
.wa-notif-ico{ width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#1faa54; color:#fff; }
.wa-notif-ico svg{ width:22px; height:22px; }
.wa-notif-main{ flex:1; min-width:0; }
.wa-notif-top{ display:flex; align-items:center; gap:10px; }
.wa-notif-top b{ font-family:var(--display); font-weight:600; font-size:.94rem; color:var(--ink); }
.wa-notif-top .tm{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--muted); flex-shrink:0; }
.wa-notif-prev{ margin-top:3px; font-size:.9rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-unread{ align-self:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:#e5484d; color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wa-prob-more{ margin-top:16px; text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--muted); }

/* —— Capacidades: bento —— */
.wa-bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.wa-tile{ position:relative; overflow:hidden; border:1px solid var(--border-2); border-radius:18px; padding:22px; background:var(--card); display:flex; flex-direction:column; }
.wa-tico{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); margin-bottom:14px; }
.wa-tico svg{ width:20px; height:20px; }
.wa-tile h3{ font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.01em; color:var(--ink); }
.wa-tile p{ margin-top:7px; color:var(--muted); font-size:.92rem; line-height:1.55; }
.wa-tile.t-cat{ grid-column:span 4; grid-row:span 2; background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 12%,var(--card)) 0%, var(--card) 58%); }
.wa-tile.t-hand{ grid-column:span 2; }
.wa-tile.t-pay{ grid-column:span 2; }
.wa-tile.t-btn{ grid-column:span 2; }
.wa-tile.t-book{ grid-column:span 2; }
.wa-tile.t-lang{ grid-column:span 2; }
/* mini-visuales del bento */
.wa-mini-cat{ display:flex; gap:12px; margin-top:auto; padding-top:22px; }
.wa-mcard{ flex:1; border-radius:12px; overflow:hidden; border:1px solid var(--border-2); background:var(--bg); }
.wa-mcard .thumb{ height:74px; background:linear-gradient(140deg,#4a4ab0,#6a6ae0); }
.wa-mcard:nth-child(2) .thumb{ background:linear-gradient(140deg,#33338a,#4f4fc4); }
.wa-mcard .mc-b{ padding:9px 11px; }
.wa-mcard .mc-b b{ display:block; font-size:.78rem; color:var(--ink); font-family:var(--display); font-weight:600; }
.wa-mcard .mc-b span{ font-family:var(--mono); font-size:.72rem; color:var(--acc); }
.wa-vis{ margin-top:auto; padding-top:16px; }
.wa-pay-pill{ display:inline-flex; align-items:center; gap:9px; padding:9px 13px; border-radius:11px; background:color-mix(in srgb,var(--acc) 16%,transparent); border:1px solid color-mix(in srgb,var(--acc) 32%,transparent); font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--ink); }
.wa-pay-pill svg{ width:15px; height:15px; color:var(--acc); }
.wa-mini-btns{ display:flex; flex-direction:column; gap:6px; }
.wa-mini-btns span{ padding:8px 12px; border-radius:9px; background:color-mix(in srgb,var(--acc) 9%,transparent); border:1px solid var(--border-2); color:var(--acc); font-family:var(--display); font-weight:600; font-size:.82rem; text-align:center; }
.wa-day-chip{ display:inline-flex; align-items:baseline; gap:9px; padding:11px 15px; border-radius:12px; background:var(--bg); border:1px solid var(--border-2); }
.wa-day-chip b{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--acc); }
.wa-day-chip span{ font-family:var(--display); font-weight:800; font-size:1.35rem; color:var(--ink); letter-spacing:-.02em; }
.wa-lang{ display:flex; flex-wrap:wrap; gap:6px; }
.wa-lang span{ padding:5px 10px; border-radius:8px; background:color-mix(in srgb,var(--acc) 10%,transparent); border:1px solid var(--border-2); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text); }
.wa-hand-vis{ display:flex; align-items:center; gap:10px; }
.wa-hand-ava{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display); font-weight:700; font-size:.8rem; }
.wa-hand-ava.a1{ background:var(--acc); } .wa-hand-ava.a2{ background:#3d4657; }
.wa-hand-vis .arw{ color:var(--muted); }
.wa-hand-vis .arw svg{ width:18px; height:18px; }

/* —— Cómo funciona: línea de tiempo —— */
.wa-flow{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
.wa-flow::before{ content:""; position:absolute; top:27px; left:9%; right:9%; height:2px; z-index:0; background:linear-gradient(90deg,transparent,var(--border-2) 12%,var(--border-2) 88%,transparent); }
.wa-flow-step{ position:relative; z-index:1; }
.wa-flow-dot{ width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 15%,var(--card)); border:1px solid color-mix(in srgb,var(--acc) 34%,transparent); margin-bottom:22px; }
.wa-flow-dot svg{ width:24px; height:24px; }
.wa-flow-step h3{ font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); }
.wa-flow-step p{ margin-top:9px; color:var(--muted); font-size:.95rem; line-height:1.6; max-width:34ch; }

/* —— Integraciones: carrusel infinito (una fila, solo logos) —— */
.wa-logos{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.wa-logos-track{ display:flex; align-items:center; gap:clamp(48px,6vw,84px); width:max-content; animation:waLogos 42s linear infinite; }
.wa-logos:hover .wa-logos-track{ animation-play-state:paused; }
@keyframes waLogos{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.wa-logos img{ height:30px; width:auto; flex-shrink:0; opacity:.6; transition:opacity .3s var(--e-in); }
.wa-logos img:hover{ opacity:1; }
@media(prefers-reduced-motion:reduce){ .wa-logos-track{ animation:none; } }

/* —— Pruébalo: chat guiado por sector —— */
.wa-try{ display:grid; grid-template-columns:1fr minmax(330px,392px); gap:clamp(30px,5vw,68px); align-items:center; }
.wa-try-side{ align-self:center; }
.wa-try-side .eyebrow{ color:var(--acc); }
.wa-try-side h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.08; letter-spacing:-.02em; color:var(--ink); margin-top:16px; max-width:17ch; }
.wa-try-sub{ margin-top:16px; color:var(--muted); font-size:1.06rem; line-height:1.6; max-width:42ch; }
.wa-try-pills{ display:flex; flex-direction:column; gap:9px; margin-top:clamp(26px,3vw,36px); max-width:360px; }
.wa-try-pills .wa-pill{ width:100%; text-align:left; border-radius:12px; padding:13px 17px; }
.wa-try-stage{ justify-self:center; }
.wa-pill{ padding:9px 17px; border-radius:22px; border:1px solid var(--border-2); background:var(--card); color:var(--muted); font-family:var(--display); font-weight:600; font-size:.9rem; cursor:pointer; transition:color .25s, border-color .25s, background-color .25s; }
.wa-pill:hover:not(.is-active){ color:var(--text); border-color:var(--muted); }
.wa-pill.is-active{ background:var(--acc); border-color:var(--acc); color:#fff; }
.wa-try-stage{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.wa-phone-live{ width:min(360px,92vw); }
@media(max-width:820px){
  .wa-try{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .wa-try > *{ min-width:0; }
  .wa-try-side h2, .wa-try-sub{ max-width:none; }
  .wa-try-pills{ flex-direction:row; overflow-x:auto; scrollbar-width:none; max-width:none; margin-inline:calc(-1*var(--gutter)); padding-inline:var(--gutter); }
  .wa-try-pills::-webkit-scrollbar{ display:none; }
  .wa-try-pills .wa-pill{ width:auto; flex:0 0 auto; border-radius:22px; }
}
.wa-phone-live .wa-screen{ display:flex; flex-direction:column; height:min(600px,78vh); }
.wa-phone-live .wa-body{ flex:1; min-height:0; overflow-y:auto; scrollbar-width:none; scroll-behavior:smooth; }
.wa-phone-live .wa-body > *{ flex-shrink:0; }
@media(prefers-reduced-motion:reduce){ .wa-phone-live .wa-body{ scroll-behavior:auto; } }
.wa-phone-live .wa-body::-webkit-scrollbar{ width:0; height:0; }
.wa-phone-live .wa-msg, .wa-phone-live .wa-quick, .wa-phone-live .wa-receipt, .wa-phone-live .wa-typing{ animation:waIn .35s var(--e-in) both; }
.wa-phone-live .wa-qbtn{ cursor:pointer; transition:background-color .2s, color .2s; }
.wa-phone-live .wa-qbtn:hover{ background:color-mix(in srgb,var(--acc) 22%,#202c33); color:#fff; }
.wa-typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:11px 13px; background:#202c33; border-radius:11px; border-top-left-radius:3px; }
.wa-typing i{ width:6px; height:6px; border-radius:50%; background:#8696a0; }
@media(prefers-reduced-motion:no-preference){
  .wa-typing i{ animation:waDot 1s infinite; }
  .wa-typing i:nth-child(2){ animation-delay:.15s; } .wa-typing i:nth-child(3){ animation-delay:.3s; }
}
@keyframes waDot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
.wa-reset{ display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--muted); background:none; border:0; cursor:pointer; transition:color .25s; }
.wa-reset:hover{ color:var(--acc); }
.wa-reset svg{ width:15px; height:15px; }
.wa-try-cta{ grid-column:1 / -1; margin-top:clamp(24px,3vw,38px); display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; }
.wa-try-cta p{ color:var(--muted); font-size:1.04rem; line-height:1.55; max-width:42ch; }
.wa-try-cta p b{ color:var(--ink); font-weight:600; }

/* ═══════ Hero de voz — consola de llamada en directo ═══════ */
.cl-stage{ position:relative; }
.call-live{ position:relative; overflow:hidden; border:1px solid var(--border-2); border-radius:24px; padding:clamp(22px,2.6vw,32px);
  background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 13%,var(--card)) 0%, var(--card) 60%);
  box-shadow:0 54px 110px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.call-live::before{ content:""; position:absolute; top:-70px; right:-50px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--acc) 26%,transparent), transparent 70%); filter:blur(32px); pointer-events:none; }
.call-live > *{ position:relative; z-index:1; }
.cl-top{ display:flex; align-items:center; gap:13px; }
.cl-ava{ position:relative; width:50px; height:50px; border-radius:15px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand-grad); }
.cl-ava svg{ width:25px; height:25px; }
.cl-ava::after{ content:""; position:absolute; inset:-5px; border-radius:19px; border:1.5px solid color-mix(in srgb,var(--acc) 55%,transparent); }
.cl-id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cl-id b{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em; }
.cl-id span{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.cl-timer{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; color:var(--acc); padding:6px 11px; border-radius:8px; background:color-mix(in srgb,var(--acc) 12%,transparent); }
.cl-timer i{ width:6px; height:6px; border-radius:50%; background:var(--acc); }
.cl-wave{ display:flex; align-items:center; justify-content:center; gap:3px; height:88px; margin:28px 0 6px; }
.cl-wave i{ width:4px; border-radius:3px; height:14%;
  background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 82%,#fff), var(--acc)); }
.cl-wave i:nth-child(3n){ --h:52%; } .cl-wave i:nth-child(3n+1){ --h:90%; } .cl-wave i:nth-child(3n+2){ --h:34%; }
.cl-caption{ text-align:center; }
.cl-caption .lbl{ display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:8px; }
.cl-caption p{ font-size:1.04rem; line-height:1.5; color:var(--text); max-width:32ch; margin:0 auto; }
.cl-controls{ display:flex; justify-content:center; gap:15px; margin-top:26px; }
.cl-btn{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border:1px solid var(--border-2); color:var(--text); }
.cl-btn svg{ width:19px; height:19px; }
.cl-btn.end{ background:#e5484d; border-color:#e5484d; color:#fff; }
.cl-chip{ position:absolute; z-index:2; top:-4%; left:-6%; display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:13px;
  background:rgba(18,20,28,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--border-2); font-family:var(--display); font-weight:600; font-size:12.5px; color:var(--ink); box-shadow:0 20px 44px -22px rgba(0,0,0,.75); }
.cl-chip svg{ width:16px; height:16px; color:var(--acc); flex-shrink:0; }
@media(prefers-reduced-motion:no-preference){
  .cl-ava::after{ animation:clRing 2s ease-out infinite; }
  .cl-timer i{ animation:pulse 1.6s infinite; }
  .cl-wave i{ animation:clBar 1.1s ease-in-out infinite; animation-delay:calc(var(--i,0)*-.055s); }
  .cl-chip{ animation:waFloat 5.5s ease-in-out infinite; }
}
@keyframes clRing{ 0%{ transform:scale(.92); opacity:.6; } 100%{ transform:scale(1.28); opacity:0; } }
@keyframes clBar{ 0%,100%{ height:14%; } 50%{ height:var(--h,70%); } }

/* —— Conmutador de voz: consola de llamada por sector (subtítulos + onda) —— */
.vcall{ position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border-2); border-radius:20px;
  background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 11%,var(--card)) 0%, var(--card) 62%); }
.vcall-head{ display:flex; align-items:center; gap:10px; padding:15px 20px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:12px; color:var(--muted); }
.vcall-head b{ color:var(--text); font-weight:500; }
.vcall-live{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--acc); }
.vcall-live i{ width:7px; height:7px; border-radius:50%; background:var(--acc); }
.vcall-stage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; text-align:center; }
.vcall-ava{ position:relative; width:56px; height:56px; border-radius:17px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand-grad); }
.vcall-ava svg{ width:27px; height:27px; }
.vcall-ava::after{ content:""; position:absolute; inset:-6px; border-radius:22px; border:1.5px solid color-mix(in srgb,var(--acc) 50%,transparent); opacity:0; }
.vcall.is-speaking .vcall-ava::after{ opacity:.55; }
.vcall-wave{ display:flex; align-items:center; justify-content:center; gap:3px; height:60px; width:100%; max-width:340px; }
.vcall-wave i{ width:4px; border-radius:3px; height:12%; opacity:.45; transition:opacity .3s;
  background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 82%,#fff), var(--acc)); }
.vcall-wave i:nth-child(3n){ --h:48%; } .vcall-wave i:nth-child(3n+1){ --h:86%; } .vcall-wave i:nth-child(3n+2){ --h:30%; }
.vcall.is-speaking .vcall-wave i{ opacity:1; }
.vcall-sub{ min-height:82px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.vcall-sub .who{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.vcall.is-speaking .vcall-sub .who{ color:var(--acc); }
.vcall-sub p{ font-size:1.12rem; line-height:1.5; color:var(--ink); max-width:30ch; font-family:var(--display); font-weight:500; }
.vcall-foot{ padding:0 20px 22px; display:flex; justify-content:center; }
.vcall-outcome{ display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:11px; font-family:var(--mono); font-size:12px; color:var(--acc);
  background:color-mix(in srgb,var(--acc) 12%,transparent); border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--e-in), transform .4s var(--e-in); }
.vcall-outcome.show{ opacity:1; transform:none; }
.vcall-outcome .k{ width:18px; height:18px; border-radius:50%; flex-shrink:0; background:var(--acc); color:#00120e; display:flex; align-items:center; justify-content:center; font-size:11px; }
@keyframes vozSubIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference){
  .vcall-live i{ animation:pulse 1.6s infinite; }
  .vcall.is-speaking .vcall-ava::after{ animation:clRing 1.8s ease-out infinite; }
  .vcall.is-speaking .vcall-wave i{ animation:clBar 1.05s ease-in-out infinite; animation-delay:calc(var(--i,0)*-.05s); }
}

/* ═══════ Automatización — flujo animado (hero + runner) + drain + grid ═══════ */
.aflow-card{ position:relative; border:1px solid var(--border-2); border-radius:22px; padding:clamp(20px,2.4vw,26px);
  background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 11%,var(--card)) 0%, var(--card) 62%);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.aflow-head{ display:flex; align-items:center; gap:8px; margin-bottom:18px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.aflow-head .live{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:var(--acc); }
.aflow-head .live i{ width:7px; height:7px; border-radius:50%; background:var(--acc); }
.aflow{ display:flex; flex-direction:column; }
.aflow-node{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--border-2);
  transition:border-color .35s var(--e-in), background-color .35s, box-shadow .35s, transform .35s; }
.aflow-node.on{ border-color:color-mix(in srgb,var(--acc) 55%,transparent); background:color-mix(in srgb,var(--acc) 9%,var(--card));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 26%,transparent), 0 18px 40px -26px rgba(0,0,0,.6); }
.aflow-ic{ width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--border-2); transition:color .35s, background-color .35s, border-color .35s; }
.aflow-node.on .aflow-ic{ color:var(--acc); background:color-mix(in srgb,var(--acc) 15%,transparent); border-color:color-mix(in srgb,var(--acc) 34%,transparent); }
.aflow-ic svg{ width:22px; height:22px; }
.aflow-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.aflow-tx b{ font-family:var(--display); font-weight:700; font-size:.98rem; color:var(--ink); letter-spacing:-.01em; }
.aflow-tx span{ font-size:.85rem; color:var(--muted); }
.aflow-tag{ margin-left:auto; flex-shrink:0; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:5px 9px; border-radius:7px; border:1px solid var(--border-2); transition:color .35s, border-color .35s; }
.aflow-node.on .aflow-tag{ color:var(--acc); border-color:color-mix(in srgb,var(--acc) 34%,transparent); }
.aflow-conn{ width:2px; height:20px; margin-left:35px; background:var(--border-2); position:relative; overflow:hidden; border-radius:2px; }
.aflow-conn::after{ content:""; position:absolute; left:0; top:0; width:100%; height:60%;
  background:linear-gradient(180deg, transparent, var(--acc), transparent); opacity:0; }
.aflow.run .aflow-conn::after{ opacity:.9; animation:aPulseDown 1.4s linear infinite; }
@keyframes aPulseDown{ from{ transform:translateY(-120%); } to{ transform:translateY(330%); } }
.aflow-done{ margin-top:18px; display:flex; justify-content:center; min-height:20px; }
.aflow-done .chip2{ display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:11px; font-family:var(--mono); font-size:12px; color:var(--acc);
  background:color-mix(in srgb,var(--acc) 12%,transparent); border:1px solid color-mix(in srgb,var(--acc) 26%,transparent);
  opacity:0; transform:translateY(6px); transition:opacity .4s var(--e-in), transform .4s var(--e-in); }
.aflow-done .chip2.show{ opacity:1; transform:none; }
.aflow-done .chip2 .k{ width:18px; height:18px; border-radius:50%; flex-shrink:0; background:var(--acc); color:#231007; display:flex; align-items:center; justify-content:center; font-size:11px; }
@media(prefers-reduced-motion:no-preference){ .aflow-head .live i{ animation:pulse 1.6s infinite; } }

/* Runner firma: pills de proceso */
.arun-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:clamp(26px,3vw,38px); }
.arun-stage{ max-width:560px; margin:0 auto; }

/* Problema: lista de tareas a mano */
.adrain{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(36px,5vw,64px); align-items:center; }
.adrain-copy .eyebrow{ color:var(--acc); margin-bottom:18px; }
.adrain-copy h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); max-width:16ch; }
.adrain-copy p{ margin-top:20px; color:var(--muted); font-size:1.05rem; line-height:1.65; max-width:44ch; }
.adrain-list{ display:flex; flex-direction:column; gap:10px; }
.adrain-row{ display:flex; align-items:center; gap:13px; padding:15px 18px; border-radius:14px; background:var(--card); border:1px solid var(--border-2); }
.adrain-row .dot{ width:8px; height:8px; border-radius:50%; background:var(--acc); flex-shrink:0; opacity:.8; }
.adrain-row b{ font-family:var(--display); font-weight:600; font-size:.98rem; color:var(--ink); }
.adrain-row .hrs{ margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--acc); flex-shrink:0; }
.adrain-foot{ margin-top:16px; text-align:center; font-family:var(--mono); font-size:12px; letter-spacing:.03em; color:var(--muted); }

/* Integraciones: rejilla (muro) */
.sol-logo-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:820px; margin:0 auto; }
.sol-logo-grid .cell{ display:flex; align-items:center; justify-content:center; padding:22px 16px; border:1px solid var(--border-2); border-radius:14px; background:var(--card); }
.sol-logo-grid img{ height:27px; width:auto; opacity:.6; transition:opacity .3s var(--e-in); }
.sol-logo-grid .cell:hover img{ opacity:1; }
@media(max-width:900px){
  .adrain{ grid-template-columns:1fr; gap:34px; }
  .adrain-copy h2, .adrain-copy p{ max-width:none; }
  .sol-logo-grid{ grid-template-columns:repeat(4,1fr); }
}
@media(max-width:560px){ .sol-logo-grid{ grid-template-columns:repeat(3,1fr); } }

/* Qué automatizamos — tarjetas por área con checklist */
.auto-areas{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.area-card{ border:1px solid var(--border-2); border-radius:18px; padding:26px 24px; background:var(--card); transition:border-color .3s var(--e-in), transform .3s var(--e-in); }
.area-card:hover{ border-color:color-mix(in srgb,var(--acc) 40%,transparent); transform:translateY(-3px); }
.area-ic{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); margin-bottom:16px; }
.area-ic svg{ width:21px; height:21px; }
.area-card h3{ font-family:var(--display); font-weight:700; font-size:1.06rem; letter-spacing:-.01em; color:var(--ink); }
.area-card ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-top:16px; }
.area-card li{ display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:.92rem; line-height:1.45; }
.area-card li svg{ width:15px; height:15px; color:var(--acc); flex-shrink:0; margin-top:2px; }

/* Antes / Después */
.beforeafter{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.ba-col{ border:1px solid var(--border-2); border-radius:20px; padding:clamp(24px,3vw,34px); background:var(--card); }
.ba-col.after{ border-color:color-mix(in srgb,var(--acc) 45%,transparent); background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 12%,var(--card)) 0%, var(--card) 60%); }
.ba-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.ba-col.after .ba-tag{ color:var(--acc); }
.ba-tag i{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.ba-col ul{ list-style:none; display:flex; flex-direction:column; gap:15px; }
.ba-col li{ display:flex; align-items:flex-start; gap:12px; font-size:1rem; line-height:1.5; }
.ba-col.before li{ color:var(--muted); }
.ba-col.after li{ color:var(--text); }
.ba-ic{ flex-shrink:0; width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.ba-col.before .ba-ic{ color:var(--muted); background:rgba(255,255,255,.05); }
.ba-col.after .ba-ic{ color:#231007; background:var(--acc); }
.ba-ic svg{ width:14px; height:14px; }

@media(max-width:960px){ .auto-areas{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:700px){ .auto-areas{ grid-template-columns:1fr; } .beforeafter{ grid-template-columns:1fr; } }

/* Stack tecnológico — herramientas agrupadas por categoría */
.stack-groups{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px); }
.stack-glabel{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:8px; }
.stack-item{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid color-mix(in srgb,var(--border) 55%,transparent); }
.stack-item:last-child{ border-bottom:0; }
.stack-item img{ width:23px; height:23px; object-fit:contain; opacity:.8; flex-shrink:0; transition:opacity .3s; }
.stack-item:hover img{ opacity:1; }
.stack-item b{ font-family:var(--display); font-weight:600; font-size:.96rem; color:var(--ink); }
.stack-item span{ display:block; font-size:.78rem; color:var(--muted); margin-top:1px; }
.stack-note{ margin-top:clamp(28px,4vw,44px); text-align:center; color:var(--muted); font-size:.95rem; }
@media(max-width:900px){ .stack-groups{ grid-template-columns:repeat(2,1fr); gap:28px 32px; } }
@media(max-width:520px){ .stack-groups{ grid-template-columns:1fr; } }

/* Banda CTA intermedia (reutilizable en todas las subpáginas) */
.sp-cta-mid{ padding:clamp(18px,3vw,34px) 0; }
.sp-cta-band{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:clamp(20px,3vw,40px); flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--acc) 34%,var(--border-2)); border-radius:22px; padding:clamp(26px,3.4vw,42px) clamp(26px,3.6vw,48px);
  background:linear-gradient(120deg, color-mix(in srgb,var(--acc) 16%,var(--card)) 0%, var(--card) 66%); }
.sp-cta-band::before{ content:""; position:absolute; top:-60px; right:-40px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--acc) 24%,transparent), transparent 70%); filter:blur(30px); pointer-events:none; }
.sp-cta-band-tx{ position:relative; min-width:0; }
.sp-cta-band h3{ font-family:var(--display); font-weight:800; font-size:clamp(1.4rem,2.5vw,2rem); line-height:1.12; letter-spacing:-.02em; color:var(--ink); max-width:22ch; }
.sp-cta-band p{ margin-top:9px; color:var(--muted); font-size:1.02rem; line-height:1.5; max-width:46ch; }
.sp-cta-band .magnetic{ position:relative; flex-shrink:0; }
@media(max-width:640px){ .sp-cta-band{ flex-direction:column; align-items:flex-start; } }

/* Callback "que el agente te llame" (reutiliza el webhook de Vera) */
[id="llamar"]{ scroll-margin-top:100px; }
.cbx{ position:relative; overflow:hidden; max-width:760px; margin:0 auto; text-align:center; border:1px solid var(--border-2); border-radius:24px;
  padding:clamp(38px,5vw,64px) clamp(24px,4vw,56px);
  background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 14%,var(--card)) 0%, var(--card) 66%); box-shadow:0 50px 100px -46px rgba(0,0,0,.8); }
.cbx::before{ content:""; position:absolute; top:-90px; left:50%; transform:translateX(-50%); width:540px; height:320px;
  background:radial-gradient(ellipse, color-mix(in srgb,var(--acc) 22%,transparent), transparent 70%); filter:blur(34px); pointer-events:none; }
.cbx > *{ position:relative; }
.cbx .eyebrow{ display:inline-block; color:var(--acc); margin-bottom:16px; }
.cbx h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.9rem,4vw,3rem); line-height:1.08; letter-spacing:-.02em; color:var(--ink); max-width:20ch; margin:0 auto; }
.cbx .sub{ margin:16px auto 0; color:var(--muted); font-size:1.08rem; line-height:1.55; max-width:46ch; }
.cbx-form{ display:flex; max-width:480px; margin:30px auto 0; border:1px solid var(--border-2); border-radius:14px; overflow:hidden; background:var(--card); transition:border-color .2s var(--e-in); }
.cbx-form:focus-within{ border-color:var(--acc); }
.cbx-input{ flex:1; min-width:0; border:0; outline:none; background:transparent; color:var(--ink); font-family:var(--sans); font-size:1rem; padding:16px 18px; }
.cbx-input::placeholder{ color:var(--muted); }
.cbx-btn{ border:0; cursor:pointer; background:var(--acc); color:#00120e; font-family:var(--display); font-weight:700; font-size:.95rem; padding:16px 26px; white-space:nowrap; transition:filter .2s var(--e-in); }
.cbx-btn:hover{ filter:brightness(1.07); }
.cbx-btn:disabled{ cursor:default; opacity:.9; }
.cbx-msg{ display:none; margin-top:12px; font-size:.9rem; }
.cbx-trust{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px 22px; margin-top:22px; }
.cbx-trust span{ font-family:var(--mono); font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:7px; }
.cbx-trust span::before{ content:"✓"; color:var(--acc); }
@media(max-width:460px){ .cbx-form{ flex-direction:column; } .cbx-input{ text-align:center; } }

/* ═══════ Buscadores IA (SEO+GEO) — panel de respuesta de IA ═══════ */
.geo-panel{ position:relative; overflow:hidden; border:1px solid var(--border-2); border-radius:22px; padding:clamp(20px,2.4vw,28px);
  background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 12%,var(--card)) 0%, var(--card) 60%);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.geo-bar{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:12px; background:var(--card); border:1px solid var(--border-2); }
.geo-bar svg{ width:17px; height:17px; color:var(--muted); flex-shrink:0; }
.geo-q{ font-size:14px; color:var(--text); }
.geo-eng{ display:flex; align-items:center; gap:10px; margin:20px 2px 14px; }
.geo-ava{ width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand-grad); }
.geo-ava svg{ width:18px; height:18px; }
.geo-engname{ font-family:var(--display); font-weight:700; font-size:.94rem; color:var(--ink); }
.geo-tag{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); border-radius:20px; padding:3px 10px; }
.geo-tag i{ width:6px; height:6px; border-radius:50%; background:var(--acc); }
.geo-body{ position:relative; min-height:132px; }
.geo-thinking{ display:inline-flex; gap:5px; padding:4px 0; }
.geo-thinking i{ width:7px; height:7px; border-radius:50%; background:var(--muted); }
@media(prefers-reduced-motion:no-preference){ .geo-thinking i{ animation:waDot 1s infinite; } .geo-thinking i:nth-child(2){ animation-delay:.15s; } .geo-thinking i:nth-child(3){ animation-delay:.3s; } }
.geo-ans{ font-size:1.02rem; line-height:1.62; color:var(--text); }
.geo-ans mark{ background:color-mix(in srgb,var(--acc) 22%,transparent); color:var(--ink); font-weight:600; padding:1px 5px; border-radius:5px; }
.geo-src{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:15px; border-top:1px solid var(--border); }
.geo-src .lbl{ width:100%; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.geo-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--text); border:1px solid var(--border-2); border-radius:8px; padding:5px 10px; }
.geo-chip i{ width:6px; height:6px; border-radius:50%; background:var(--acc); flex-shrink:0; }
.geo-srcchips{ display:contents; }
.geo-attr{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--muted); }
.geo-case{ display:grid; grid-template-columns:1fr; gap:0; max-width:660px; margin:0 auto; }
.geo-case-note{ text-align:center; margin-top:18px; font-size:.95rem; color:var(--muted); }
.geo-case-note b{ color:var(--ink); font-weight:600; }
.geo-ans, .geo-src{ opacity:0; transform:translateY(8px); transition:opacity .45s var(--e-in), transform .45s var(--e-in); }
.geo-panel.show .geo-ans, .geo-panel.show .geo-src{ opacity:1; transform:none; }
.geo-panel.show .geo-thinking{ display:none; }
.geo-panel.thinking .geo-ans, .geo-panel.thinking .geo-src{ opacity:0; }

/* Problema: dónde buscan ahora */
.geo-where{ display:flex; flex-direction:column; gap:11px; }
.geo-where .geo-bar{ margin-bottom:4px; }
.geo-wrow{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:12px; background:var(--card); border:1px solid var(--border-2); }
.geo-wrow .lg{ width:30px; height:30px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); }
.geo-wrow img{ width:18px; height:18px; object-fit:contain; }
.geo-wrow b{ font-family:var(--display); font-weight:600; font-size:.94rem; color:var(--ink); }
.geo-wrow span{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted); }

/* SEO / GEO: dos frentes */
.two-front{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch; }
.front{ border:1px solid var(--border-2); border-radius:20px; padding:clamp(26px,3vw,36px); background:var(--card); }
.front.geo{ border-color:color-mix(in srgb,var(--acc) 45%,transparent); background:linear-gradient(165deg, color-mix(in srgb,var(--acc) 12%,var(--card)) 0%, var(--card) 60%); }
.front-top{ display:flex; align-items:center; gap:13px; margin-bottom:22px; }
.front-ic{ width:46px; height:46px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); }
.front-ic svg{ width:23px; height:23px; }
.front-top b{ font-family:var(--display); font-weight:800; font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); }
.front-top span{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); margin-top:3px; }
.front ul{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.front li{ display:flex; align-items:flex-start; gap:11px; color:var(--text); font-size:1rem; line-height:1.5; }
.front li svg{ width:17px; height:17px; color:var(--acc); flex-shrink:0; margin-top:2px; }

/* Dónde apareces: superficies */
.surfaces{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.surface{ display:flex; align-items:center; gap:14px; padding:20px 22px; border:1px solid var(--border-2); border-radius:16px; background:var(--card); transition:border-color .3s var(--e-in), transform .3s var(--e-in); }
.surface:hover{ border-color:color-mix(in srgb,var(--acc) 40%,transparent); transform:translateY(-3px); }
.surface .s-ic{ width:42px; height:42px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 13%,transparent); }
.surface .s-ic svg{ width:21px; height:21px; }
.surface b{ font-family:var(--display); font-weight:700; font-size:1rem; color:var(--ink); }
.surface span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; }
.geo-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:clamp(26px,3vw,36px); }
.geo-stage{ max-width:640px; margin:0 auto; }
@media(max-width:820px){ .two-front{ grid-template-columns:1fr; } .surfaces{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .surfaces{ grid-template-columns:1fr; } }

/* ═══════ Contacto ═══════ */
.vera-quick{ position:relative; overflow:hidden; border:1px solid color-mix(in srgb,var(--turquesa) 42%,var(--border-2)); border-radius:22px;
  padding:clamp(22px,2.8vw,32px) clamp(24px,3vw,40px); margin-bottom:clamp(30px,4vw,48px);
  background:linear-gradient(120deg, color-mix(in srgb,var(--turquesa) 15%,var(--card)) 0%, var(--card) 64%);
  display:grid; grid-template-columns:1fr auto; gap:clamp(20px,3vw,40px); align-items:center; }
.vera-quick::before{ content:""; position:absolute; top:-70px; right:-30px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--turquesa) 24%,transparent), transparent 70%); filter:blur(30px); pointer-events:none; }
.vq-head{ position:relative; display:flex; align-items:center; gap:15px; }
.vq-ava{ position:relative; width:52px; height:52px; border-radius:15px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--brand-grad); }
.vq-ava svg{ width:25px; height:25px; }
.vq-ava::after{ content:""; position:absolute; inset:-5px; border-radius:19px; border:1.5px solid color-mix(in srgb,var(--turquesa) 55%,transparent); }
@media(prefers-reduced-motion:no-preference){ .vq-ava::after{ animation:clRing 2s ease-out infinite; } }
.vq-head b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.1rem,1.8vw,1.35rem); letter-spacing:-.01em; color:var(--ink); }
.vq-head span{ display:block; margin-top:5px; color:var(--muted); font-size:.98rem; line-height:1.5; max-width:44ch; }
.vq-tag{ display:inline-flex; align-items:center; gap:7px; margin-bottom:8px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--turquesa); }
.vq-tag i{ width:6px; height:6px; border-radius:50%; background:var(--turquesa); }
.vq-form{ position:relative; display:flex; border:1px solid var(--border-2); border-radius:13px; overflow:hidden; background:var(--card); transition:border-color .2s var(--e-in); min-width:min(340px,100%); }
.vq-form:focus-within{ border-color:var(--turquesa); }
.vq-form input{ flex:1; min-width:0; border:0; outline:none; background:transparent; color:var(--ink); font-family:var(--sans); font-size:1rem; padding:14px 16px; }
.vq-form input::placeholder{ color:var(--muted); }
.vq-form button{ border:0; cursor:pointer; background:var(--turquesa); color:#00120e; font-family:var(--display); font-weight:700; font-size:.9rem; padding:14px 20px; white-space:nowrap; transition:filter .2s; }
.vq-form button:hover{ filter:brightness(1.07); }
.vq-form button:disabled{ cursor:default; opacity:.9; }
.vq-msg{ display:none; grid-column:1 / -1; margin-top:2px; font-size:.9rem; }
@media(max-width:760px){ .vera-quick{ grid-template-columns:1fr; } .vq-form{ min-width:0; } }

.contact{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(36px,5vw,72px); align-items:start; }
.contact-info .eyebrow{ color:var(--acc); }
.contact-info h2{ font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,3vw,2.5rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin-top:16px; max-width:16ch; }
.contact-info .sub{ margin-top:16px; color:var(--muted); font-size:1.06rem; line-height:1.6; max-width:42ch; }
.contact-next{ list-style:none; display:flex; flex-direction:column; gap:18px; margin-top:clamp(28px,4vw,40px); }
.contact-next li{ display:flex; gap:14px; align-items:flex-start; }
.contact-next .n{ flex-shrink:0; width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); }
.contact-next b{ display:block; font-family:var(--display); font-weight:600; font-size:.98rem; color:var(--ink); }
.contact-next span{ color:var(--muted); font-size:.92rem; line-height:1.5; }
.contact-direct{ margin-top:clamp(28px,4vw,38px); padding-top:24px; border-top:1px solid var(--border-2); display:flex; flex-direction:column; gap:12px; }
.contact-direct a{ display:inline-flex; align-items:center; gap:11px; color:var(--text); font-family:var(--mono); font-size:.95rem; transition:color .2s; }
.contact-direct a:hover{ color:var(--acc); }
.contact-direct a svg{ width:17px; height:17px; color:var(--acc); flex-shrink:0; }
.contact-direct .alt{ font-size:.9rem; color:var(--muted); font-family:var(--sans); }
.contact-direct .alt a{ display:inline; color:var(--acc); font-family:var(--sans); }

.cform-card{ border:1px solid var(--border-2); border-radius:22px; padding:clamp(24px,3vw,38px); background:var(--card); }
.cform{ display:flex; flex-direction:column; gap:16px; }
.cform-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cfield{ display:flex; flex-direction:column; gap:7px; }
.cfield label{ font-family:var(--display); font-weight:600; font-size:.85rem; color:var(--text); }
.cfield label .opt{ color:var(--muted); font-weight:400; }
.cfield input, .cfield textarea{ width:100%; background:var(--bg); border:1px solid var(--border-2); border-radius:11px; padding:13px 15px; color:var(--ink); font-family:var(--sans); font-size:1rem; outline:none; transition:border-color .2s var(--e-in); }
.cfield input::placeholder, .cfield textarea::placeholder{ color:var(--muted); }
.cfield input:focus, .cfield textarea:focus{ border-color:var(--acc); }
.cfield textarea{ min-height:118px; resize:vertical; line-height:1.5; }
.cform button{ margin-top:4px; border:0; cursor:pointer; background:var(--acc); color:#00120e; font-family:var(--display); font-weight:700; font-size:1rem; padding:16px 24px; border-radius:12px; transition:filter .2s var(--e-in); }
.cform button:hover{ filter:brightness(1.07); }
.cform button:disabled{ cursor:default; opacity:.85; }
.cform-note{ font-size:12px; color:var(--muted); line-height:1.5; }
.cform-note a{ color:var(--acc); }
.cform-msg{ display:none; font-size:.92rem; line-height:1.5; padding:12px 14px; border-radius:10px; }
@media(max-width:860px){ .contact{ grid-template-columns:1fr; gap:36px; } .contact-info h2, .contact-info .sub{ max-width:none; } }
@media(max-width:520px){ .cform-row{ grid-template-columns:1fr; } }

/* Hero centrado (páginas de marca: cómo trabajamos, nosotros) */
.sp-hero.center .sp-hero-copy{ max-width:800px; margin:0 auto; text-align:center; }
.sp-hero.center .sp-hero-copy h1{ max-width:none; }
.sp-hero.center .lead{ margin-inline:auto; }
.sp-hero.center .sp-cta-row{ justify-content:center; }
.sp-hero.center .sp-hero-meta{ text-align:center; }

/* ═══════ Cómo trabajamos / Nosotros — proceso vertical + credo ═══════ */
.proc{ max-width:780px; margin:0 auto; }
.proc-step{ position:relative; display:grid; grid-template-columns:54px 1fr; gap:clamp(18px,2.5vw,28px); padding-bottom:clamp(30px,4vw,44px); }
.proc-step:last-child{ padding-bottom:0; }
.proc-num{ position:relative; z-index:1; width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:1.15rem; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,var(--card)); border:1px solid color-mix(in srgb,var(--acc) 34%,transparent); }
.proc-step:not(:last-child) .proc-num::after{ content:""; position:absolute; top:60px; left:26px; width:2px; height:calc(100% - 34px); background:linear-gradient(var(--border-2), color-mix(in srgb,var(--border-2) 20%,transparent)); }
.proc-body{ padding-top:4px; }
.proc-body .ph{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); }
.proc-body h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,1.7vw,1.35rem); letter-spacing:-.01em; color:var(--ink); margin-top:7px; }
.proc-body p{ margin-top:9px; color:var(--muted); font-size:1rem; line-height:1.65; max-width:52ch; }
.proc-out{ margin-top:14px; display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--acc);
  padding:7px 12px; border-radius:9px; background:color-mix(in srgb,var(--acc) 10%,transparent); border:1px solid color-mix(in srgb,var(--acc) 24%,transparent); }
.proc-out svg{ width:14px; height:14px; flex-shrink:0; }
.creed.donts .creed-item .k{ color:var(--muted); background:rgba(255,255,255,.05); }
/* Credo / manifiesto */
.creed{ max-width:860px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,32px); }
.creed-item{ border-top:1px solid var(--border-2); padding-top:22px; }
.creed-item .k{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); margin-bottom:14px; }
.creed-item .k svg{ width:18px; height:18px; }
.creed-item b{ display:block; font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; color:var(--ink); }
.creed-item p{ margin-top:8px; color:var(--muted); font-size:.98rem; line-height:1.6; }
@media(max-width:640px){ .creed{ grid-template-columns:1fr; } }

/* ═══════ Fragmentos de código (Apps) ═══════ */
.codewin{ max-width:780px; margin:0 auto; border:1px solid var(--border-2); border-radius:16px; overflow:hidden; background:#0c0e13; box-shadow:0 44px 100px -44px rgba(0,0,0,.82); }
.codewin-bar{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.06); background:#0f1218; }
.cw-dots{ display:flex; gap:6px; flex-shrink:0; }
.cw-dots i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.13); }
.cw-tabs{ display:flex; gap:4px; margin-left:6px; overflow-x:auto; scrollbar-width:none; }
.cw-tabs::-webkit-scrollbar{ display:none; }
.cw-tab{ font-family:var(--mono); font-size:11.5px; color:var(--muted); padding:6px 12px; border-radius:8px; cursor:pointer; background:transparent; border:0; white-space:nowrap; transition:color .2s, background-color .2s; }
.cw-tab.is-active{ color:var(--acc); background:color-mix(in srgb,var(--acc) 13%,transparent); }
.codewin-body{ padding:18px 20px; overflow-x:auto; }
.cw-code{ display:none; font-family:var(--mono); font-size:13px; line-height:1.75; color:#c9d1d9; white-space:pre; margin:0; }
.cw-code.is-active{ display:block; }
.cw-code .c{ color:#6a7581; } .cw-code .k{ color:var(--acc); } .cw-code .s{ color:#7fd1a6; }
.cw-code .f{ color:#8fb8ff; } .cw-code .t{ color:#d9b3ff; } .cw-code .p{ color:#8696a0; }
@media(max-width:520px){ .cw-code{ font-size:12px; } }

/* ═══════ Apps a medida — mockup de app (navegador) + switcher ═══════ */
.appwin{ position:relative; border:1px solid var(--border-2); border-radius:16px; overflow:hidden; background:var(--card);
  box-shadow:0 54px 110px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.appwin-bar{ display:flex; align-items:center; gap:8px; padding:12px 15px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--card) 82%,#000); }
.appwin-bar .dot{ width:11px; height:11px; border-radius:50%; background:var(--border-2); }
.appwin-url{ margin-left:12px; flex:1; max-width:280px; padding:5px 12px; border-radius:7px; background:rgba(255,255,255,.04); border:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appwin-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--acc); flex-shrink:0; }
.appwin-live i{ width:6px; height:6px; border-radius:50%; background:var(--acc); }
@media(prefers-reduced-motion:no-preference){ .appwin-live i{ animation:pulse 1.6s infinite; } }
.app-shell{ display:grid; grid-template-columns:54px 1fr; min-height:352px; }
.app-side{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 0; border-right:1px solid var(--border); background:color-mix(in srgb,var(--card) 90%,#000); }
.app-side .sq{ width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.app-side .sq svg{ width:16px; height:16px; }
.app-side .sq.on{ background:color-mix(in srgb,var(--acc) 18%,transparent); color:var(--acc); }
.app-main{ padding:20px; }
.app-mh{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.app-mh b{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; }
.app-mh .pill{ margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 30%,transparent); border-radius:20px; padding:3px 10px; }
.app-view{ display:none; }
.app-view.on{ display:block; }
@media(prefers-reduced-motion:no-preference){ .app-view.on{ animation:swIn .4s var(--e-in) both; } }
.app-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.app-kpi{ border:1px solid var(--border); border-radius:11px; padding:13px 14px; background:rgba(255,255,255,.02); }
.app-kpi .l{ font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.app-kpi .n{ font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--ink); margin-top:5px; letter-spacing:-.02em; }
.app-kpi .tr{ font-family:var(--mono); font-size:10px; color:var(--acc); margin-top:3px; }
.app-bars{ display:flex; align-items:flex-end; gap:8px; height:92px; margin-top:14px; padding:14px; border:1px solid var(--border); border-radius:11px; }
.app-bars i{ flex:1; border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--acc), color-mix(in srgb,var(--acc) 35%,transparent)); }
.app-list{ margin-top:14px; }
.app-row{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--border); }
.app-row:last-child{ border-bottom:0; }
.app-av{ width:26px; height:26px; border-radius:50%; background:color-mix(in srgb,var(--acc) 18%,transparent); flex-shrink:0; }
.app-row .nm{ font-size:.86rem; color:var(--text); }
.app-row .tag{ margin-left:auto; font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:6px; background:color-mix(in srgb,var(--acc) 12%,transparent); color:var(--acc); flex-shrink:0; }
.app-cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.app-c3{ border:1px solid var(--border); border-radius:11px; padding:16px 14px; background:rgba(255,255,255,.02); }
.app-c3 .ic{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:var(--acc); background:color-mix(in srgb,var(--acc) 14%,transparent); margin-bottom:12px; }
.app-c3 .ic svg{ width:17px; height:17px; }
.app-c3 b{ display:block; font-family:var(--display); font-weight:700; font-size:.92rem; color:var(--ink); }
.app-c3 span{ font-size:.78rem; color:var(--muted); margin-top:2px; display:block; }
.app-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-bottom:14px; }
.app-day{ text-align:center; padding:10px 0; border:1px solid var(--border); border-radius:9px; }
.app-day .d{ font-family:var(--mono); font-size:9px; color:var(--muted); text-transform:uppercase; }
.app-day .n{ font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--text); margin-top:3px; }
.app-day.on{ background:color-mix(in srgb,var(--acc) 16%,transparent); border-color:color-mix(in srgb,var(--acc) 40%,transparent); }
.app-day.on .n{ color:var(--acc); }
.app-kanban{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.app-col{ background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:11px; padding:12px; }
.app-col .h{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px; }
.app-tk{ background:var(--card); border:1px solid var(--border-2); border-radius:8px; padding:10px; font-size:.78rem; color:var(--text); margin-bottom:8px; }
.app-tk .b{ display:block; height:5px; width:62%; border-radius:3px; background:color-mix(in srgb,var(--acc) 32%,transparent); margin-top:8px; }
.app-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:clamp(26px,3vw,36px); }
.app-stage{ max-width:660px; margin:0 auto; }
@media(max-width:560px){
  .app-shell{ grid-template-columns:1fr; } .app-side{ display:none; }
  .app-kpis, .app-cards3, .app-kanban{ grid-template-columns:1fr; }
  .app-week{ grid-template-columns:repeat(7,1fr); gap:4px; }
}

@media(max-width:1100px){ .uc-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px){
  .sp-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .sp-hero-copy h1{ max-width:none; }
  .caps, .caps-3{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .uc-grid{ grid-template-columns:1fr; }
  .vsw{ grid-template-columns:1fr; gap:22px; }
  .vsw-panels{ overflow:visible; }
  .vsw .switch-panel.is-active{ position:static; inset:auto; }
  .vcall{ position:static; min-height:440px; }
  .vsw-tabs{ flex-direction:row; overflow-x:auto; margin-inline:calc(-1*var(--gutter)); padding-inline:var(--gutter); scrollbar-width:none; }
  .vsw-tabs::-webkit-scrollbar{ display:none; }
  .vsw .switch-tab{ flex:0 0 auto; }
  .vsw-txt span{ display:none; }
  .meet{ grid-template-columns:1fr; gap:36px; }
  .vcard{ flex:0 0 72vw; max-width:300px; }
}
@media(max-width:960px){
  .wa-bento{ grid-template-columns:repeat(2,1fr); }
  .wa-tile.t-cat{ grid-column:1 / -1; grid-row:auto; }
}
@media(max-width:900px){
  .wa-prob{ grid-template-columns:1fr; gap:34px; }
  .wa-prob > *{ min-width:0; }
  .wa-prob-copy h2, .wa-prob-copy p{ max-width:none; }
  .wa-flow{ grid-template-columns:1fr; gap:28px; }
  .wa-flow::before{ display:none; }
  .wa-flow-dot{ margin-bottom:16px; }
}
@media(max-width:560px){
  .wa-chip, .cl-chip{ display:none; } .wa-stage{ padding:0; }
  .wa-bento{ grid-template-columns:1fr; }
  .wa-tile.t-cat, .wa-tile.t-hand, .wa-tile.t-pay, .wa-tile.t-btn, .wa-tile.t-book, .wa-tile.t-lang{ grid-column:auto; }
}