/* Widgets 2 oct 2026 (va después de fusion3.css): carruseles de trabajo, planificador OOH, simulador de chat */
/* ---- carruseles de «Nuestro trabajo» ---- */
.wk-sl{position:relative;overflow:hidden}
.wk-sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 5s ease}
.wk-sl img.is-on{opacity:1;transform:scale(1)}
.wk-sl img:first-child{position:relative}
.wk-sl--web img{object-position:0 0}
.wk-sl__dots{position:absolute;left:16px;bottom:14px;display:flex;gap:6px;z-index:2}
.wk-sl__dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:width .3s,background .3s}
.wk-sl__dots span.is-on{width:22px;border-radius:4px;background:#C1D72E}
@media (prefers-reduced-motion:reduce){.wk-sl img{transition:none;transform:none}}
/* ---- franja de marcas de exterior ---- */
.lgs--ooh .lgs__h{display:flex;flex-direction:column;gap:4px;line-height:1.4;max-width:720px}
.lgs--ooh .lgs__h b{font-size:clamp(18px,1.6vw,22px)}
.lgs--ooh .lgs__h span{opacity:.75}
.lgs--ooh .lgs__cta{margin-top:6px;align-self:flex-start}
/* ---- títulos en dos líneas ---- */
.sec--steps .head h2 br{display:block}
/* ---- industrias: solo título, texto y enlace ---- */
.sec--ind .head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
/* ---- bandas oscuras en las páginas de servicio ---- */
.sec--dark .card{background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.25)!important;color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sec--dark .card h3{color:#fff}
.sec--dark .card p{color:rgba(255,255,255,.78)}
.sec--dark .card__n{color:#C1D72E}
.sec--dark .head p{color:rgba(255,255,255,.75)}
.hero--dark .svc-hero__media figcaption{color:rgba(255,255,255,.65)}
/* ---- planificador de campaña OOH (banda verde clara) ---- */
.sec--plan .op__head{max-width:720px;margin-bottom:26px}
.sec--plan .op__head h2{color:#001744}
.sec--plan .op__head p{color:#4a5570}
.op__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.op__form fieldset{border:0;margin:0 0 18px;padding:0}
.op__form legend{font-weight:700;margin-bottom:10px;color:#001744;font-size:16px}
.op__row{display:grid;grid-template-columns:1fr 1.4fr;gap:18px}
.op__chips{display:flex;flex-wrap:wrap;gap:8px}
.op__chip{font:inherit;font-size:14.5px;padding:9px 15px;border-radius:999px;border:1px solid rgba(0,23,68,.18);background:#fff;color:#001744;cursor:pointer;box-shadow:0 4px 12px rgba(0,23,68,.05);transition:background .2s,color .2s,border-color .2s,transform .2s}
.op__chip:hover{border-color:#001744;transform:translateY(-1px)}
.op__chip[aria-pressed=true]{background:#001744;border-color:#001744;color:#fff;font-weight:700}
.op__sel{font:inherit;font-size:15px;width:100%;padding:10px 14px;border-radius:14px;border:1px solid rgba(0,23,68,.18);background:#fff;color:#001744}
.op__sum{border-radius:26px;padding:22px;position:sticky;top:110px;color:#fff;background:radial-gradient(60% 80% at 85% 10%,rgba(193,215,46,.18),transparent 60%),#001744!important;box-shadow:0 22px 50px rgba(0,23,68,.25)}
.op__sumh{font-weight:800;font-size:20px;margin:0 0 12px}
.op__sum dl{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.5px}
.op__sum dt{color:#C1D72E;font-weight:700}
.op__sum dd{margin:0;color:rgba(255,255,255,.88)}
.op__empty{grid-column:1/-1;opacity:.7}
.op__go{width:100%;justify-content:center}
.op__go:disabled{opacity:.45;cursor:not-allowed}
.op__ok{margin:12px 0 0;font-size:14px;color:#C1D72E}
@media (max-width:900px){.op__grid,.op__row{grid-template-columns:1fr}.op__sum{position:relative;top:0}}
/* ---- simulador de chat ---- */
.sec--sim{background:transparent}
.cs__head{max-width:720px;margin-bottom:26px}
.cs__grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:26px;align-items:start}
.cs__phone{background:#fff;border-radius:30px;box-shadow:0 24px 60px rgba(0,23,68,.18);overflow:hidden;display:flex;flex-direction:column;height:520px}
.cs__bar{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#001744;color:#fff;font-size:15px}
.cs__av{width:30px;height:30px;border-radius:50%;background:#C1D72E;box-shadow:inset 0 0 0 6px #001744}
.cs__log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:#F5F7FB}
.cs__msg{max-width:82%;padding:10px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;animation:csIn .3s ease}
.cs__msg--bot{background:#fff;color:#1d2b4f;border-bottom-left-radius:6px;box-shadow:0 2px 8px rgba(0,23,68,.06)}
.cs__msg--me{align-self:flex-end;background:#001744;color:#fff;border-bottom-right-radius:6px}
.cs__typing{display:flex;gap:4px;width:56px}
.cs__typing i{width:7px;height:7px;border-radius:50%;background:#9aa3b5;animation:csDot 1s infinite}
.cs__typing i:nth-child(2){animation-delay:.15s}.cs__typing i:nth-child(3){animation-delay:.3s}
@keyframes csDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
@keyframes csIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cs__opts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px;border-top:1px solid #E8ECF3;min-height:58px}
.cs__opt{font:inherit;font-size:14px;padding:8px 13px;border-radius:999px;border:1.5px solid #001744;background:#fff;color:#001744;cursor:pointer;transition:background .2s,color .2s}
.cs__opt:hover{background:#C1D72E;border-color:#C1D72E}
.cs__opt--ghost{border-style:dashed}
.cs__owner{border-radius:26px;padding:22px;background:#001744!important;color:#fff;animation:csIn .4s ease}
.cs__ownh{font-weight:800;font-size:20px;margin:0 0 12px}
.cs__owner dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.5px}
.cs__owner dt{color:#C1D72E;font-weight:700}
.cs__owner dd{margin:0}
.cs__note{font-size:13px;opacity:.6;margin-top:14px}
@media (max-width:900px){.cs__grid{grid-template-columns:1fr}.cs__phone{height:480px}}

/* tarjetas numeradas: el número a la izquierda del título, el texto a lo ancho */
.card--num{grid-template-columns:30px 1fr!important}
.card--num .card__n{grid-column:1;grid-row:1;margin:0;align-self:center;white-space:nowrap}
.card--num p{grid-column:1/-1}
.cs__empty{opacity:.7;margin:0;font-size:14.5px}

/* ===== 2 oct, 18:00: textura y degradados en todos los fondos ===== */
.tex-dark{background-color:#001744!important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(60% 80% at 88% 8%,rgba(193,215,46,.16),transparent 60%),radial-gradient(55% 75% at 4% 96%,rgba(56,104,214,.30),transparent 65%)!important}
.tint-a{background-color:#F4F7E4;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 .09 0 0 0 0 .27 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(50% 90% at 100% 0%,rgba(193,215,46,.32),transparent 60%),radial-gradient(40% 70% at 0% 100%,rgba(0,23,68,.05),transparent 70%)}
.tint-b{background-color:#F2F4F9;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 .09 0 0 0 0 .27 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),radial-gradient(55% 80% at 0% 0%,rgba(56,104,214,.10),transparent 62%),radial-gradient(45% 70% at 100% 100%,rgba(193,215,46,.14),transparent 65%)}
.hero--page.tint-a,.hero--page.tint-b{border-radius:0 0 40px 40px}

/* ===== 2 oct, 18:30 ===== */
/* simulador como protagonista de la cabecera de chatbots */
.cs-hero{display:flex;flex-direction:column;align-items:center}
.cs-hero #chatsim{width:100%;max-width:440px;margin-left:auto}
.cs-hero .cs__grid{grid-template-columns:1fr;gap:12px}
.cs-hero .cs__phone{height:500px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.cs__pill{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px;border-radius:999px;background:rgba(193,215,46,.14);color:#C1D72E;font-size:13px;font-weight:700}
.cs__pill i{width:8px;height:8px;border-radius:50%;background:#C1D72E;animation:crmPing 1.6s infinite}
.cs-hero .cs__owner{background:transparent!important;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:12px 16px;animation:none}
.cs-hero .cs__ownh{font-size:14px;margin:0 0 6px;color:#C1D72E}
.cs-hero .cs__owner dl{font-size:13px;gap:4px 12px}
.cs-hero .cs__empty{font-size:13px}
/* móvil de Instagram animado */
.anim-frame{position:relative;width:100%;max-width:360px;margin-left:auto;overflow:hidden}
.anim-frame iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:transparent}
/* «Lo que es tuyo» y listas al lado del título: unidas por una línea */
.limits{column-gap:64px!important;align-items:start}
.limits>div:first-child{position:relative}
.limits>div:first-child::after{content:"";position:absolute;left:100%;top:34px;width:82px;height:2px;background:linear-gradient(90deg,rgba(193,215,46,.2),#C1D72E)}
.limits .xlist{position:relative;padding-left:56px}
.limits .xlist::before{content:"";position:absolute;left:18px;top:30px;bottom:30px;width:2px;background:linear-gradient(#C1D72E,rgba(193,215,46,.25))}
.limits .xlist li{position:relative}
.limits .xlist li::after{content:"";position:absolute;left:-38px;top:50%;width:38px;height:10px;margin-top:-5px;
  background:radial-gradient(circle at 5px 50%,#C1D72E 4px,transparent 4.5px),linear-gradient(#C1D72E,#C1D72E) no-repeat 0 50%/100% 2px;opacity:.85}
@media (max-width:900px){.limits>div:first-child::after{display:none}.limits .xlist{padding-left:34px}.limits .xlist::before{left:6px}.limits .xlist li::after{left:-28px;width:28px}}
/* embudo del email en frío */
.funnel{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:28px;align-items:start}
.funnel__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.funnel__steps li{position:relative;display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:20px;background:#001744;color:#fff;
  width:var(--w);min-width:260px;box-shadow:0 14px 30px rgba(0,23,68,.18)}
.funnel__steps b{font-size:clamp(26px,3vw,38px);color:#C1D72E;font-family:var(--font-head);min-width:78px;line-height:1}
.funnel__steps span{font-size:15px;line-height:1.35}
.funnel__steps li:last-child{background:#C1D72E;color:#001744}
.funnel__steps li:last-child b{color:#001744}
.funnel__side{border-radius:24px;padding:24px;background:#fff;box-shadow:0 14px 30px rgba(0,23,68,.10);display:flex;flex-direction:column;gap:10px}
.funnel__side b{font-size:clamp(40px,4.5vw,60px);line-height:1;color:#001744;font-family:var(--font-head)}
.funnel__side p{margin:0;color:#4a5570}
.funnel__src{font-size:13px;color:#6b7387;margin-top:12px}
@media (max-width:900px){.funnel{grid-template-columns:1fr}.funnel__steps li{width:100%!important;min-width:0}}
/* prueba de Instagram: tarjeta + qué medimos */
.igproof{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px;align-items:stretch}
.igproof .fig{margin:0}
.igproof__m{border-radius:28px;padding:26px;background:#fff;box-shadow:0 14px 30px rgba(0,23,68,.10)}
.igproof__m h3{margin:0 0 14px;font-size:20px;color:#001744}
.igproof__m ol{margin:0;padding:0;list-style:none;counter-reset:m;display:flex;flex-direction:column;gap:10px}
.igproof__m li{counter-increment:m;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;color:#1d2b4f;font-size:15px}
.igproof__m li::before{content:counter(m);width:26px;height:26px;border-radius:50%;background:#C1D72E;color:#001744;font-weight:800;font-size:13px;display:grid;place-items:center}
.igproof__m p{margin:14px 0 0;font-size:13.5px;color:#6b7387}
@media (max-width:900px){.igproof{grid-template-columns:1fr}}
/* capturas de escritorio montadas en un portátil */
.svc-hero__media--laptop{margin:0 -40px 0 0}
.svc-hero__media--laptop img{width:100%;height:auto;border-radius:0!important;box-shadow:none!important;background:none!important;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
@media (max-width:900px){.svc-hero__media--laptop{margin:0}}

/* pantalla partida: los datos aparecen a medida que el cliente contesta */
.cs__owner dd.cs__pend{opacity:.45}
.cs__owner dd.cs__new{animation:cs-new .6s ease}
@keyframes cs-new{from{background:rgba(193,215,46,.45)}to{background:transparent}}
/* 5 oct: alto reservado para los widgets que rellena el JS (la página no salta al cargar) */
.anim-frame{aspect-ratio:421/880}
.cs-hero #chatsim{min-height:674px}
#crmflow{min-height:500px}
@media (max-width:900px){#crmflow{min-height:560px}}

/* ===== piezas estrella: escena de cine bajo el texto de la cabecera ===== */
.hero--scene .svc-hero{display:block}
.hero--scene .svc-hero__txt{max-width:760px}
.scene{margin:44px 0 0;position:relative}
.scene__frame{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/9;background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
.scene__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scene__frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 120px rgba(0,10,30,.45)}
.scene__note{position:absolute;z-index:2;right:3.5%;top:var(--note-top,16%);width:min(34%,360px);display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:22px;
  background:rgba(245,245,247,.86);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 18px 40px rgba(0,0,0,.35);color:#111;font-size:14px;line-height:1.35;opacity:0;transform:translateY(-14px) scale(.97);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.scene.is-on .scene__note{opacity:1;transform:none}
.scene__ic{flex:none;width:38px;height:38px;border-radius:10px;background:#001744;position:relative}
.scene__ic::after{content:"";position:absolute;left:11px;top:9px;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#C1D72E}
.scene__tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.scene__h{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#666;text-transform:uppercase;letter-spacing:.03em}
.scene__h b{font-weight:600}.scene__h i{font-style:normal;text-transform:none}
.scene__tx strong{font-size:15px;color:#000}
.scene__cap{margin-top:14px;font-size:14px;color:rgba(255,255,255,.72)}
@media (max-width:900px){.scene{margin-top:30px}.scene__frame{border-radius:18px}.scene__note{right:3%;top:auto;bottom:5%;width:min(70%,320px);padding:10px 12px;font-size:12.5px}}
@media (min-width:901px){.scene--card-mobile .scene__note{display:none}}
.scene--note-left .scene__note{right:auto;left:3.5%}
@media (max-width:900px){.scene--note-left .scene__note{left:3%;right:auto}}
@media (prefers-reduced-motion:reduce){.scene .scene__note{opacity:1;transform:none}}