/* ==========================================================================
   crm.cool · Recreaciones interactivas de funcionalidades
   Solo se carga en las páginas que las usan. Estados: .demo[data-active="1|2|3"]
   ========================================================================== */

/* Estructura general -------------------------------------------------------*/
.showcase { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.showcase__visual { position: sticky; top: calc(var(--header-h) + 28px); }
.showcase__steps { list-style: none; margin: 0; padding: 16vh 0 26vh; display: grid; gap: 0; }
.shstep { display: block; min-height: 30vh; }
.shstep__in { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.3rem 1.5rem; border-radius: var(--radius-lg);
  background: transparent; border: 1px solid transparent; transition: all .45s cubic-bezier(.2, .8, .2, 1); }
.shstep h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.shstep p { color: var(--muted); font-size: .96rem; }
.shstep__n { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: .95rem; background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); transition: all .45s cubic-bezier(.2, .8, .2, 1); }
.js .shstep__in { opacity: .45; }
.js .shstep.is-active .shstep__in { opacity: 1; background: #fff; border-color: var(--blue-100); box-shadow: var(--shadow); }
.shstep.is-active .shstep__n { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -4px rgba(30, 96, 232, .6); }

/* Marco de la demo ---------------------------------------------------------*/
.demo { font-size: 14px;
  --d-violet: #7c3aed; --d-violet-50: #f1ebff; --d-amber: #d97706; --d-amber-50: #fef3c7;
  --d-teal: #0d9488; --d-teal-50: #d9f5f1; --d-indigo: #4f46e5; --d-pink: #db2777; }
.demo--panel .demo__screen { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .9rem; box-shadow: var(--shadow); }
.demo__screen { position: relative; }

/* Atenuación de los pasos aún no alcanzados (solo con JS) */
.js .demo [data-at] { transition: opacity .5s ease, transform .5s ease, filter .5s ease; }
.js .demo[data-active="1"] .demo__screen [data-at="2"],
.js .demo[data-active="1"] .demo__screen [data-at="3"],
.js .demo[data-active="1"] .demo__screen [data-at="4"],
.js .demo[data-active="1"] .demo__screen [data-at="5"],
.js .demo[data-active="1"] .demo__screen [data-at="6"],
.js .demo[data-active="2"] .demo__screen [data-at="3"],
.js .demo[data-active="2"] .demo__screen [data-at="4"],
.js .demo[data-active="2"] .demo__screen [data-at="5"],
.js .demo[data-active="2"] .demo__screen [data-at="6"],
.js .demo[data-active="3"] .demo__screen [data-at="4"],
.js .demo[data-active="3"] .demo__screen [data-at="5"],
.js .demo[data-active="3"] .demo__screen [data-at="6"],
.js .demo[data-active="4"] .demo__screen [data-at="5"],
.js .demo[data-active="4"] .demo__screen [data-at="6"],
.js .demo[data-active="5"] .demo__screen [data-at="6"] { opacity: .18; transform: translateY(5px); filter: saturate(.3); }

/* Bloques que solo se ven en su propio paso */
.demo .only { display: none; }
.demo[data-active="1"] .only[data-at="1"],
.demo[data-active="2"] .only[data-at="2"],
.demo[data-active="3"] .only[data-at="3"],
.demo[data-active="4"] .only[data-at="4"],
.demo[data-active="5"] .only[data-at="5"],
.demo[data-active="6"] .only[data-at="6"] { display: grid; animation: dm-only-in .5s cubic-bezier(.22, .8, .26, 1) both; }
@keyframes dm-only-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .demo .only { animation: none; } }

/* 1 · Pipeline -------------------------------------------------------------*/
.kb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; --col: calc((100% - 1.8rem - 1.5rem) / 3); }
.kb__col { background: var(--bg); border-radius: 10px; padding: .5rem; display: grid; gap: .4rem; align-content: start; min-height: 215px; }
.kb__col b { font-size: .68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kb__col i { height: 34px; border-radius: 7px; background: #fff; border: 1px solid var(--line); }
.kb__col:last-child i { border-left: 3px solid var(--green); }
.kb__deal { position: absolute; top: 2.9rem; left: .9rem; width: var(--col); padding: .55rem .6rem; border-radius: 9px;
  background: #fff; border: 1px solid var(--blue); box-shadow: 0 10px 24px -8px rgba(30, 96, 232, .5); display: grid; gap: .35rem;
  transform: translateX(0); transition: transform .7s cubic-bezier(.65, 0, .35, 1), border-color .4s ease, box-shadow .4s ease; z-index: 2; }
.demo[data-active="2"] .kb__deal { transform: translateX(calc(100% + .75rem)); }
.demo[data-active="3"] .kb__deal { transform: translateX(calc(200% + 1.5rem)); border-color: var(--green); box-shadow: 0 10px 24px -8px rgba(23, 145, 74, .45); }
.kb__av { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--d-violet), var(--d-indigo)); color: #fff; display: grid; place-items: center; font-size: .6rem; font-weight: 800; font-family: var(--font-head); }
.kb__who b { display: block; font-size: .76rem; color: var(--ink); font-family: var(--font-head); }
.kb__who em { font-style: normal; font-size: .7rem; color: var(--muted); }
.kb__src { font-size: .62rem; color: var(--d-amber); background: var(--d-amber-50); border-radius: 999px; padding: .12rem .45rem; justify-self: start; }
.demo[data-active="3"] .kb__src { color: var(--green); background: var(--green-50); }

/* 2 · Automatizaciones -----------------------------------------------------*/
.fl { display: grid; justify-items: center; gap: 0; }
.fl__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: min(290px, 100%); margin-bottom: .55rem;
  padding: .45rem .7rem; border-radius: 10px; background: var(--ink); color: #fff; }
.fl__name { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 600; font-family: var(--font-head); }
.fl__state { font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #86efac; display: flex; align-items: center; gap: .3rem; }
.fl__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.fl__kind { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: .05rem; }
.fl__txt { min-width: 0; }
.fl__cond { display: flex; align-items: center; gap: .6rem; width: min(290px, 100%); padding: .5rem .7rem; border-radius: 11px;
  background: linear-gradient(135deg, #fff, var(--cyan-50)); border: 1px solid var(--blue-100); box-shadow: var(--shadow-sm); }
.fl__ic--cond { background: var(--d-teal-50); color: var(--d-teal); }
.fl__cond .fl__kind { color: var(--d-teal); }
.fl__y, .fl__n { position: absolute; top: -.6rem; z-index: 2; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: .1rem .4rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.fl__y { left: 25%; margin-left: -12px; color: var(--green); border-color: #bde7cc; }
.fl__n { right: 25%; margin-right: -12px; color: var(--d-amber); border-color: #fcd9a3; }
.fl__stats { display: flex; justify-content: center; gap: 1.4rem; width: 100%; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--line-2); }
.fl__stats span { display: grid; justify-items: center; font-size: .62rem; color: var(--muted); line-height: 1.3; }
.fl__stats b { font-family: var(--font-head); font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.fl__node { display: flex; align-items: center; gap: .6rem; width: min(290px, 100%); padding: .5rem .7rem; border-radius: 11px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.fl__node b { display: block; font-size: .8rem; font-family: var(--font-head); color: var(--ink); }
.fl__node em { font-style: normal; font-size: .7rem; color: var(--muted); }
.fl__ic { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-size: .8rem; }
.fl__node--wa .fl__ic { background: #e7f8ee; color: #1faa59; }
.fl__node--trig .fl__ic { background: var(--d-amber-50); color: var(--d-amber); }
.fl__node--wait .fl__ic { background: var(--d-violet-50); color: var(--d-violet); }
.fl__node--trig .fl__kind { color: var(--d-amber); } .fl__node--wait .fl__kind { color: var(--d-violet); }
.fl__node--alt { border-color: #fcd9a3; } .fl__node--alt .fl__kind { color: var(--d-amber); }
.fl__node--ok .fl__kind { color: var(--green); }
.fl__node--ok { border-color: var(--green); }
.fl__node--ok .fl__ic { background: var(--green-50); color: var(--green); }
.fl__node--alt .fl__ic { background: var(--d-amber-50); color: var(--d-amber); }
.fl__link { width: 2px; height: 20px; background: var(--line-2); position: relative; overflow: hidden; }
.fl__link::after { content: ""; position: absolute; inset: 0 0 auto; height: 0; background: var(--blue); transition: height .5s ease .1s; }
.demo[data-active="2"] .fl__link::after, .demo[data-active="3"] .fl__link::after { height: 100%; }
.fl__spark { position: absolute; left: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); opacity: 0; }
.demo[data-active="2"] .fl__spark, .demo[data-active="3"] .fl__spark { opacity: 1; animation: spark 1.8s linear infinite; }
@keyframes spark { from { transform: translateY(-8px); } to { transform: translateY(22px); } }
.fl__branch { position: relative; width: min(380px, 100%); height: 24px; }
.fl__branch::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 12px; margin-left: -1px; background: var(--line-2); }
.fl__branch i { position: absolute; left: 25%; right: 25%; top: 12px; height: 2px; background: var(--line-2); }
.fl__branch i::before, .fl__branch i::after { content: ""; position: absolute; top: 0; width: 2px; height: 12px; background: var(--line-2); }
.fl__branch i::before { left: 0; } .fl__branch i::after { right: 0; }
.demo[data-active="3"] .fl__branch::before { background: var(--blue); }
.demo[data-active="3"] .fl__branch i { background: linear-gradient(90deg, var(--green), var(--d-amber)); }
.demo[data-active="3"] .fl__branch i::before { background: var(--green); }
.demo[data-active="3"] .fl__branch i::after { background: var(--d-amber); }
.fl__split { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; width: min(380px, 100%); }
.fl__split .fl__node { width: auto; }

/* Cabecera de automatizaciones: flujo que se enciende paso a paso (main.js · [data-chain]) */
.chain { display: grid; justify-items: center; max-width: 460px; margin-inline: auto; }
.chain__chip { position: relative; z-index: 2; display: inline-flex; gap: .45rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .4rem .85rem .4rem .45rem; font-size: .8rem; font-weight: 600; box-shadow: var(--shadow-lg); margin-bottom: 14px; }
.chain__chip .i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-size: .7rem; }
/* Tarjetas */
.chain__c { position: relative; width: 100%; max-width: 360px; display: flex; align-items: center; gap: .75rem; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .65rem .9rem .65rem .65rem; box-shadow: 0 12px 30px -20px rgba(11, 27, 58, .45); transition: border-color .4s, box-shadow .4s, opacity .4s; }
.chain__c > .i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--muted); font-size: .95rem; flex-shrink: 0; transition: background .4s, color .4s; }
.chain__c b { display: block; font-family: var(--font-head); font-size: .9rem; }
.chain__c em { font-style: normal; font-size: .78rem; color: var(--muted); }
.chain__c::after { content: "\2713"; font-weight: 800; position: absolute; right: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; font-size: .7rem; display: grid; place-items: center; border: 2px solid #fff; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.chain__c.is-on { border-color: var(--blue-100); box-shadow: 0 16px 34px -18px rgba(30, 96, 232, .45); }
.chain__c.is-on > .i { background: var(--c, var(--blue)); color: #fff; }
.chain__c.is-on::after { opacity: 1; transform: none; }
/* Conectores centrados */
.chain__k { position: relative; width: 2px; height: 24px; background: var(--line); }
.chain__k::after { content: ""; position: absolute; inset: 0; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
.chain__k.is-on::after { transform: none; }
/* Bifurcación tras la condición: barra horizontal entre los centros de las dos ramas */
.chain__split { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.chain__split::before, .chain__split::after { content: ""; position: absolute; top: 0; left: calc(25% - 3.5px); right: calc(25% - 3.5px); height: 2px; background: var(--line); }
.chain__split::after { background: var(--blue); right: 50%; transform: scaleX(0); transform-origin: right; transition: transform .45s ease; }
.chain__split.is-on::after { transform: none; }
.chain__b { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; }
.chain__b .chain__c { padding: .55rem .7rem .55rem .55rem; }
.chain__b .chain__c > .i { width: 32px; height: 32px; font-size: .8rem; border-radius: 10px; }
.chain__b .chain__c b { font-size: .8rem; }
.chain__b .chain__c em { font-size: .72rem; }
.chain__b--no .chain__c { opacity: .45; }
.chain__won { display: inline-flex; align-items: center; gap: .45rem; background: var(--green); color: #fff; border-radius: 999px; padding: .45rem .95rem .45rem .5rem; font-weight: 700; font-size: .85rem; white-space: nowrap; box-shadow: 0 12px 26px -10px rgba(23, 145, 74, .6); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .4s, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.chain__won b { color: #fff; font-family: var(--font-head); }
.chain__won .i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .2); display: grid; place-items: center; font-size: .75rem; }
.chain__won.is-on { opacity: 1; transform: none; }
@media (max-width: 960px) { .chain { margin-top: 1rem; } }
@media (max-width: 560px) { .chain__won { font-size: .74rem; padding: .4rem .7rem .4rem .4rem; gap: .35rem; } .chain__won .i { width: 22px; height: 22px; font-size: .65rem; } }

/* Página de automatizaciones: ejemplos por objetivo, disparadores/acciones e IA */
.au-tabs__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2rem; }
.au-tabs__list [role="tab"] { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; transition: all .2s; }
.au-tabs__list [role="tab"] > .i { color: var(--blue); }
.au-tabs__list [role="tab"]:hover { border-color: var(--blue); color: var(--blue); }
.au-tabs__list [role="tab"][aria-selected="true"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 22px -8px rgba(30, 96, 232, .6); }
.au-tabs__list [role="tab"][aria-selected="true"] > .i { color: #fff; }
.au-tabs__list [role="tab"]:focus-visible { outline: 3px solid var(--blue-100); outline-offset: 2px; }
.au-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: clamp(1.4rem, 3.5vw, 2.6rem); box-shadow: var(--shadow); }
.au-panel + .au-panel { margin-top: 1.5rem; }
.js .au-panel + .au-panel { margin-top: 0; }
.au-panel[hidden] { display: none; }
.au-panel.is-in { animation: au-in .45s cubic-bezier(.22, .8, .26, 1); }
@keyframes au-in { from { opacity: 0; transform: translateY(10px); } }
.au-panel__copy h3 { font-size: clamp(1.3rem, 2.4vw, 1.65rem); margin-bottom: .7rem; }
.au-panel__copy > p { color: var(--muted); margin-bottom: 1.2rem; }
/* Línea de tiempo del flujo */
.au-recipe { display: grid; gap: 1rem; }
.au-rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: .7rem; --tw: 96px; }
.au-rail::before { content: ""; position: absolute; left: calc(var(--tw) + .9rem + 28px); top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--blue-100), var(--line)); }
.au-rail > li { display: grid; grid-template-columns: var(--tw) 1fr; gap: .9rem; align-items: center; }
.au-rail__t { text-align: right; font-size: .75rem; font-weight: 700; color: var(--muted); line-height: 1.25; }
.au-rail__c { position: relative; display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .55rem .8rem .55rem .55rem; box-shadow: 0 8px 22px -18px rgba(11, 27, 58, .5); }
.au-rail__c > .i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--c, var(--blue)); color: #fff; font-size: .9rem; flex-shrink: 0; }
.au-rail__c b { display: block; font-family: var(--font-head); font-size: .88rem; }
.au-rail__c em { font-style: normal; font-size: .78rem; color: var(--muted); }
.au-rail__c--trig { background: var(--blue-50); border-color: var(--blue-100); }
.au-rail__c--if { border-style: dashed; border-color: #c4b5fd; }
.au-recipe__ok { display: inline-flex; align-items: center; gap: .55rem; justify-self: start; margin: 0 0 0 calc(96px + .9rem); background: var(--green-50); color: var(--green); font-weight: 700; font-size: .9rem; border-radius: 999px; padding: .5rem 1rem .5rem .6rem; }
.au-recipe__ok > .i { width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: .75rem; }
/* Disparadores y acciones */
.au-trig .card { padding: 1.3rem; }
.au-trig .card h3 { font-size: 1.02rem; }
.au-trig .card p { font-size: .9rem; }
.au-sub { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
/* IA: ejemplo de respuesta entendida */
.au-ia { align-items: center; }
.au-ai { background: var(--ink); color: #fff; border-radius: var(--radius-xl); padding: 1.4rem; display: grid; gap: 1rem; box-shadow: 0 30px 60px -28px rgba(11, 27, 58, .7); }
.au-ai b { color: #fff; }
.au-ai__hd { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.au-ai__hd .i { color: #25d366; font-size: 1.1rem; }
.au-ai__msg { margin: 0; justify-self: start; max-width: 85%; background: rgba(255, 255, 255, .1); border-radius: 16px 16px 16px 4px; padding: .7rem .95rem; font-size: .95rem; }
.au-ai__think { display: grid; gap: .55rem; padding: .9rem; border-radius: 14px; border: 1px dashed rgba(156, 196, 255, .45); background: rgba(30, 96, 232, .14); }
.au-ai__lab { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #9cc4ff; }
.au-ai__tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.au-ai__tag { font-size: .8rem; font-weight: 700; padding: .25rem .7rem; border-radius: 999px; background: rgba(156, 196, 255, .2); color: #cfe0ff; }
.au-ai__tag--g { background: rgba(74, 222, 128, .2); color: #86efac; }
.au-ai__acts { display: grid; gap: .45rem; }
.au-ai__acts span { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .06); border-radius: 11px; padding: .55rem .7rem; }
.au-ai__acts .i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); color: #9cc4ff; font-size: .8rem; flex-shrink: 0; }
@media (max-width: 960px) {
  .au-panel { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .au-rail { --tw: 64px; }
  .au-rail > li { gap: .6rem; }
  .au-rail::before { left: calc(var(--tw) + .6rem + 26px); }
  .au-rail__t { font-size: .66rem; }
  .au-rail__c { padding: .5rem .6rem .5rem .5rem; }
  .au-rail__c > .i { width: 32px; height: 32px; font-size: .8rem; }
  .au-recipe__ok { margin-left: 0; font-size: .82rem; }
  .au-tabs__list [role="tab"] { padding: .55rem .85rem; font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) { .au-panel.is-in { animation: none; } }

/* 3 · Webs y landings ------------------------------------------------------*/
.st { display: grid; grid-template-columns: 112px 1fr; gap: .7rem; }
.st__side { background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: .55rem; display: grid; gap: .3rem; align-content: start; }
.st__side b { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.st__side i { font-style: normal; display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .32rem .45rem; }
.st__side i .i { color: var(--blue); font-size: .72rem; }
.st__canvas { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.st__bar { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-bottom: 1px solid var(--line); background: #fafbfe; }
.st__devices { display: flex; gap: .3rem; color: var(--muted); font-size: .7rem; }
.st__devices .i:first-child { color: var(--blue); }
.st__url { flex: 1; font-size: .6rem; color: var(--muted); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: .1rem .4rem; }
.st__save { display: flex; align-items: center; gap: .3rem; font-size: .6rem; font-weight: 700; color: var(--green); background: var(--green-50); border-radius: 999px; padding: .15rem .5rem; }
.st__page { padding: .5rem; display: grid; gap: .45rem; }
.st__nav { display: flex; align-items: center; gap: .4rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); }
.st__logo { width: 26px; height: 7px; border-radius: 3px; background: var(--grad); }
.st__nav i { width: 16px; height: 4px; border-radius: 2px; background: var(--line-2); }
.st__nav .st__btn--xs { margin-left: auto; }
.st__block { border-radius: 9px; border: 1px solid var(--line); background: #fff; padding: .55rem; position: relative; }
.st__hero { display: grid; grid-template-columns: 1fr 64px; gap: .5rem; align-items: center; background: var(--grad-soft); border-color: var(--blue-100); }
.st__hero b { display: block; font-family: var(--font-head); font-size: .88rem; color: var(--ink); line-height: 1.2; }
.st__hero em { font-style: normal; display: block; font-size: .64rem; color: var(--muted); margin-top: .15rem; }
.st__img { height: 48px; border-radius: 7px; background: #fff; border: 1px dashed var(--blue-100); display: grid; place-items: center; color: var(--blue); font-size: .9rem; }
.st__btn { display: inline-block; margin-top: .4rem; padding: .25rem .7rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: .62rem; font-weight: 700; }
.st__btn--sm { margin-top: .3rem; } .st__btn--xs { margin: 0; padding: .18rem .5rem; font-size: .55rem; }
.st__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.st__feat { display: grid; justify-items: center; gap: .22rem; }
.st__feat i { font-style: normal; width: 22px; height: 22px; border-radius: 7px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; font-size: .62rem; }
.st__feat b, .st__feat em { display: block; height: 4px; border-radius: 2px; background: var(--line); width: 80%; }
.st__feat em { width: 60%; }
.st__row { display: grid; grid-template-columns: 1.25fr 1fr; gap: .45rem; }
.st__ftitle, .st__g { display: block; font-size: .6rem; color: var(--ink); font-weight: 700; margin-bottom: .3rem; }
.st__g { color: var(--muted); font-weight: 600; margin: .3rem 0 0; display: flex; align-items: center; gap: .25rem; white-space: nowrap; font-size: .55rem; }
.st__form i, .st__rev i { display: block; height: 9px; border-radius: 4px; background: var(--bg); margin-bottom: .25rem; }
.st__rev i:last-of-type { width: 70%; }
.st__stars { color: var(--amber); font-size: .66rem; letter-spacing: 1px; display: block; margin-bottom: .3rem; }
.st__tool { position: absolute; right: .35rem; bottom: .35rem; display: flex; align-items: center; gap: .25rem; font-size: .54rem; color: var(--blue-700);
  background: var(--blue-50); border-radius: 999px; padding: .1rem .4rem; }
.st__stats { display: flex; align-items: center; gap: .7rem; background: var(--green-50); border-color: #bde7cc; font-size: .62rem; color: var(--ink-2); }
.st__stats b { font-family: var(--font-head); font-size: .85rem; color: var(--green); }
.st__pill { margin-left: auto; display: flex; align-items: center; gap: .25rem; font-size: .56rem; font-weight: 700; color: var(--d-violet); background: #fff; border-radius: 999px; padding: .12rem .45rem; }
.demo[data-active="2"] .st__form { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30, 96, 232, .14); }
.st__cursor { position: absolute; z-index: 4; color: var(--ink); font-size: .95rem; filter: drop-shadow(0 2px 3px rgba(11, 27, 58, .3));
  left: 8%; top: 22%; transition: all .8s cubic-bezier(.45, 0, .2, 1); }
.demo[data-active="2"] .st__cursor { left: 42%; top: 62%; }
.demo[data-active="3"] .st__cursor { left: 86%; top: 7%; }
.st__ghost { position: absolute; z-index: 3; left: 34%; top: 58%; display: flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: 7px;
  background: #fff; border: 1px dashed var(--blue); box-shadow: var(--shadow); font-size: .58rem; font-weight: 600; color: var(--blue-700); }
.st__ghost .i { font-size: .6rem; }
.demo[data-active="3"] .st__ghost { opacity: 0; transform: scale(.9); }
.demo[data-active="1"] .st__ghost { opacity: 0; }

/* 4 · Formularios ----------------------------------------------------------*/
.fb { display: grid; grid-template-columns: 1.05fr .95fr; gap: .8rem; align-items: start; position: relative; }
.fo__card { border: 1px solid var(--line); border-radius: 12px; padding: .9rem; display: grid; gap: .55rem; background: #fff; box-shadow: var(--shadow-sm); }
.fb__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.fo__title { font-family: var(--font-head); font-size: .88rem; color: var(--ink); }
.fb__tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .56rem; font-weight: 700; color: var(--green); background: var(--green-50); border-radius: 999px; padding: .12rem .45rem; }
.fo__card label { display: grid; gap: .18rem; }
.fo__card label span { font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fo__in { display: block; height: 29px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); padding: .3rem .55rem; overflow: hidden; }
.fo__in em { font-style: normal; display: block; white-space: nowrap; overflow: hidden; width: 0; font-size: .76rem; color: var(--ink); }
.demo[data-active="3"] .fo__in em, .demo[data-active="4"] .fo__in em { width: 100%; transition: width 1s steps(20) .2s; }
.fb__consent { display: flex; align-items: center; gap: .4rem; font-size: .6rem; color: var(--muted); }
.fb__consent i { font-style: normal; width: 14px; height: 14px; border-radius: 4px; background: var(--green-50); color: var(--green); display: grid; place-items: center; font-size: .5rem; }
.fo__send { display: block; text-align: center; margin-top: .15rem; padding: .5rem; border-radius: 9px; background: var(--grad); color: #fff; font-size: .78rem; font-weight: 700; }
.demo[data-active="3"] .fo__send { animation: press .6s ease 1.1s both; }
@keyframes press { 50% { transform: scale(.95); box-shadow: 0 0 0 6px rgba(30, 96, 232, .15); } }
.fb__col { min-height: 170px; }
.fb__panel { position: relative; gap: .3rem; align-content: start; padding: .75rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.fb__panel b { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .15rem; }
.fb__panel i { font-style: normal; display: flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .32rem .5rem; }
.fb__panel i .i { color: var(--blue); font-size: .7rem; }
.fb__panel i.is-drag { opacity: .35; border-style: dashed; }
.fb__drag { position: absolute; left: -16%; top: 44%; display: flex; align-items: center; gap: .3rem; padding: .25rem .55rem; border-radius: 8px;
  background: #fff; border: 1px dashed var(--blue); box-shadow: var(--shadow); font-size: .62rem; font-weight: 600; color: var(--blue-700); z-index: 3; }
.fb__qr { width: 46px; height: 46px; margin: .25rem auto 0; display: grid; place-items: center; border-radius: 9px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 1.5rem; }
.fb__live { background: linear-gradient(170deg, #fff, var(--d-teal-50)); border-color: #b9e8e1; }
.fb__chip { display: flex; align-items: center; gap: .35rem; font-size: .64rem; color: var(--ink-2); background: #fff; border-radius: 999px; padding: .2rem .5rem; justify-self: start; }
.fb__chip .i { color: var(--d-teal); }
.fb__dots { display: flex; gap: 4px; margin-top: .3rem; }
.fb__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--d-teal); opacity: .35; animation: typ 1.2s infinite; }
.fb__dots i:nth-child(2) { animation-delay: .2s; } .fb__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes typ { 50% { opacity: 1; transform: translateY(-2px); } }
.fb__cursor { position: absolute; z-index: 4; color: var(--ink); font-size: .9rem; filter: drop-shadow(0 2px 3px rgba(11, 27, 58, .3));
  right: 18%; top: 50%; transition: all .8s cubic-bezier(.45, 0, .2, 1); }
.demo[data-active="2"] .fb__cursor { right: 42%; top: 26%; }
.demo[data-active="3"] .fb__cursor { right: 62%; top: 88%; }
.demo[data-active="4"] .fb__cursor { opacity: 0; }
.demo[data-active="1"] .fb__drag { animation: dragin 2.4s ease-in-out infinite; }
@keyframes dragin { 50% { transform: translate(-26px, -4px); } }
.fo__out { border: 1px solid var(--blue-100); border-radius: 12px; padding: .8rem; background: linear-gradient(170deg, #fff, var(--blue-50)); gap: .6rem; align-content: start; }
.fo__contact { display: flex; align-items: center; gap: .55rem; }
.fo__contact b { display: block; font-size: .8rem; font-family: var(--font-head); color: var(--ink); }
.fo__contact em { font-style: normal; font-size: .64rem; color: var(--muted); }
.fo__tl { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fo__tl li { display: flex; align-items: center; gap: .45rem; font-size: .7rem; color: var(--ink-2); background: #fff; border-radius: 8px; padding: .35rem .45rem; }
.fo__tic { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--green-50); color: var(--green); font-size: .56rem; }

/* Cabecera de formularios: el formulario se rellena solo y salen los avisos del CRM (main.js · [data-seq]) */
.fo-hero { position: relative; max-width: 420px; margin-inline: auto; padding-bottom: 20px; }
.fo-hero [data-s] { transition: opacity .4s, transform .45s cubic-bezier(.3, 1.4, .5, 1), background .3s, color .3s, border-color .3s, box-shadow .3s, max-height .45s ease; }
.fo-hero__form { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.4rem; box-shadow: var(--shadow-lg); display: grid; gap: .85rem; }
.fo-hero__ttl { display: flex; align-items: center; gap: .6rem; }
.fo-hero__ttl > .i { width: 38px; height: 38px; border-radius: 11px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; }
.fo-hero__ttl b { font-family: var(--font-head); display: block; }
.fo-hero__ttl em { font-style: normal; font-size: .78rem; color: var(--muted); }
.fo-hero__f { display: grid; gap: .3rem; }
.fo-hero__f > span { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.fo-hero__in { min-height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; font-size: .92rem; display: flex; align-items: center; }
.fo-hero__in.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-50); }
.fo-hero__in [data-type]::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -.12em; background: var(--blue); opacity: 0; }
.fo-hero__in.is-typing [data-type]::after { opacity: 1; animation: fo-caret 1s steps(1) infinite; }
@keyframes fo-caret { 50% { opacity: 0; } }
.fo-hero__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.fo-hero__seg > i, .fo-hero__yn > i { font-style: normal; text-align: center; font-size: .85rem; font-weight: 600; padding: .5rem .3rem; border-radius: 10px; border: 1px solid var(--line); color: var(--ink-2); }
.fo-hero__seg > i.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.fo-hero__cond { max-height: 0; overflow: hidden; opacity: 0; }
.fo-hero__cond.is-on { max-height: 120px; opacity: 1; }
.fo-hero__cond .fo-hero__f > span { color: var(--blue); }
.fo-hero__yn { display: flex; gap: .4rem; }
.fo-hero__yn > i { flex: 1; padding: .45rem; }
.fo-hero__yn > i.is-on { background: var(--blue-50); border-color: var(--blue); color: var(--blue); }
.fo-hero__btn { text-align: center; font-weight: 700; color: #fff; background: var(--grad); border-radius: 12px; padding: .75rem; }
.fo-hero__btn.is-on { animation: fo-press .6s ease; }
@keyframes fo-press { 40% { transform: scale(.95); } }
.fo-hero__out { position: absolute; right: -40px; bottom: -10px; display: grid; gap: .45rem; justify-items: end; }
.fo-hero__t { display: inline-flex; align-items: center; gap: .5rem; background: #fff; border-radius: 999px; padding: .42rem .9rem .42rem .45rem; font-size: .82rem; font-weight: 600; box-shadow: var(--shadow-lg); border: 1px solid var(--line); opacity: 0; transform: translateX(20px) scale(.9); white-space: nowrap; }
.fo-hero__t > .i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: var(--blue-50); color: var(--blue); flex-shrink: 0; }
.fo-hero__t.is-on { opacity: 1; transform: none; }
.fo-hero__t--g > .i { background: var(--green-50); color: var(--green); }
.fo-hero__t--wa > .i { background: #dcfce7; color: #16a34a; }
@media (max-width: 960px) { .fo-hero__out { position: static; justify-items: start; margin-top: 1rem; } }
@media (max-width: 560px) { .fo-hero__t { white-space: normal; } }

/* 5 · Agente de voz --------------------------------------------------------*/
.vo { display: grid; gap: .7rem; align-content: start; }
.vo__call { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 11px; border: 1px solid var(--line); background: #fff; }
.vo__call b { display: block; font-size: .82rem; font-family: var(--font-head); color: var(--ink); }
.vo__call em { font-style: normal; font-size: .7rem; color: var(--muted); }
.vo__ring { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green-50); color: var(--green); font-size: .85rem; animation: ring 1.6s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(23, 145, 74, .4); } 100% { box-shadow: 0 0 0 14px rgba(23, 145, 74, 0); } }
.vo__badge { margin-left: auto; font-size: .64rem; font-weight: 700; color: var(--d-teal); background: var(--d-teal-50); border-radius: 999px; padding: .2rem .55rem; }
.vo__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
.vo__wave i { width: 3px; border-radius: 3px; background: linear-gradient(to top, var(--d-teal), var(--cyan)); height: 25%; animation: wv 1.1s ease-in-out infinite; animation-delay: calc(var(--d) * .06s); }
@keyframes wv { 50% { height: 100%; } }
.vo__chat { display: grid; gap: .4rem; }
.vo__msg { max-width: 86%; padding: .45rem .65rem; border-radius: 12px; font-size: .76rem; line-height: 1.45; }
.vo__msg--in { background: var(--bg); color: var(--ink-2); border-bottom-left-radius: 4px; }
.vo__msg--ia { background: linear-gradient(135deg, var(--d-teal), var(--blue)); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.vo__done { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 10px; background: var(--green-50); color: var(--green); font-size: .76rem; font-weight: 600; }

/* 6 · Bandeja omnicanal ----------------------------------------------------*/
.ib { display: grid; grid-template-columns: 170px 1fr; gap: .7rem; }
.ib__list { display: grid; gap: .35rem; align-content: start; }
.ib__item { display: flex; gap: .5rem; align-items: center; padding: .45rem; border-radius: 9px; border: 1px solid transparent; }
.ib__new { margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #25d366; color: #fff;
  font-size: .56rem; font-weight: 800; display: grid; place-items: center; }
.ib__who { display: inline-flex; align-items: center; gap: .3rem; font-size: .6rem; font-weight: 600; color: var(--ink-2);
  background: var(--bg); border-radius: 999px; padding: .15rem .5rem .15rem .15rem; }
.ib__who i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--d-pink), var(--d-violet)); color: #fff; font-size: .48rem; font-weight: 800; }
.ib__quick { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .4rem .5rem; border-radius: 9px; background: var(--bg); border: 1px dashed var(--line-2); }
.ib__quick b { width: 100%; font-size: .55rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.ib__quick span { font-size: .62rem; padding: .15rem .45rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.ib__quick span.is-on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.ib__note { display: flex; align-items: center; gap: .4rem; font-size: .66rem; color: var(--d-amber); background: var(--d-amber-50); border-radius: 8px; padding: .35rem .5rem; }
.ib__item.is-sel { background: var(--blue-50); border-color: var(--blue-100); }
.ib__item b { display: block; font-size: .73rem; font-family: var(--font-head); color: var(--ink); }
.ib__item em { font-style: normal; display: block; font-size: .66rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 108px; }
.ib__ch { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; color: #fff; }
.ib__ch--wa { background: #25d366; } .ib__ch--ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); } .ib__ch--ml { background: var(--blue); }
.ib__thread { border-left: 1px solid var(--line); padding-left: .8rem; display: grid; gap: .45rem; align-content: start; }
.ib__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.ib__head b { font-size: .8rem; font-family: var(--font-head); color: var(--ink); }
.ib__head em { font-style: normal; display: block; font-size: .66rem; color: var(--muted); }
.ib__msg { max-width: 88%; padding: .45rem .65rem; border-radius: 12px; font-size: .75rem; line-height: 1.45; }
.ib__msg--in { background: var(--bg); color: var(--ink-2); border-bottom-left-radius: 4px; }
.ib__msg--out { background: #e7f8ee; color: #0d6b38; justify-self: end; border-bottom-right-radius: 4px; }
.ib__assign { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 600; color: var(--blue-700); background: var(--blue-50); border-radius: 8px; padding: .4rem .6rem; }

/* Cabecera de bandeja: los mensajes de cada canal vuelan a una sola bandeja que se va llenando */
.ib-hero__stage { position: relative; height: 430px; max-width: 1000px; margin: 2.5rem auto 0; --k: 1; }
.ib-hero__stage::before { content: ""; position: absolute; left: 50%; top: 40%; width: 640px; height: 420px; margin: -210px 0 0 -320px; background: radial-gradient(closest-side, rgba(0, 184, 230, .16), transparent); pointer-events: none; }
.ib-hero__box { position: absolute; left: 50%; top: 30px; width: 330px; margin-left: -165px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: .9rem; box-shadow: 0 40px 80px -36px rgba(11, 27, 58, .45), 0 0 0 6px rgba(30, 96, 232, .05); text-align: left; z-index: 2; }
.ib-hero__box > b { display: flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-size: .92rem; padding: .2rem .3rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .5rem; }
.ib-hero__box > b .i { color: var(--blue); }
.ib-hero__box > b em { margin-left: auto; font-style: normal; font-size: .7rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 999px; padding: .1rem .5rem; }
.ib-hero__list { display: flex; flex-direction: column-reverse; justify-content: flex-end; height: 300px; overflow: hidden; }
.ib-hero__r { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem; max-height: 0; opacity: 0; overflow: hidden; border-radius: 12px; animation: ib-row 12s infinite; animation-delay: var(--d); }
@keyframes ib-row { 0%, 9% { max-height: 0; opacity: 0; padding-block: 0; margin-top: 0; } 13%, 94% { max-height: 60px; opacity: 1; padding-block: .45rem; margin-top: .35rem; background: transparent; } 13.5% { background: var(--blue-50); } 100% { max-height: 0; opacity: 0; } }
.ib-hero__av { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .72rem; color: #fff; flex-shrink: 0; }
.ib-hero__av .i { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .62rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.ib-hero__r > div { flex: 1; min-width: 0; font-size: .82rem; line-height: 1.25; }
.ib-hero__r > div b { display: block; font-family: var(--font-head); font-size: .84rem; }
.ib-hero__r > div em { font-style: normal; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ib-hero__fly { position: absolute; left: 50%; top: 215px; display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: .5rem .8rem .5rem .5rem; font-size: .8rem; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow-lg); z-index: 3; animation: ib-fly 12s infinite; animation-delay: var(--d); opacity: 0; }
.ib-hero__fly > .i { font-size: 1.15rem; }
@keyframes ib-fly { 0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k) + 10px)) scale(.9); } 2%, 7% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--x) * var(--k)), calc(var(--y) * var(--k))); } 12%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } }
.ib-hero .c-wa { color: #25d366; } .ib-hero .c-ig { color: #e1306c; } .ib-hero .c-ms { color: #0084ff; } .ib-hero .c-em { color: #ea4335; } .ib-hero .c-sm { color: #7c3aed; } .ib-hero .c-web { color: var(--blue); }
@media (max-width: 960px) { .ib-hero__stage { --k: .6; } }
@media (max-width: 560px) {
  .ib-hero__stage { height: 420px; }
  .ib-hero__box { width: 300px; margin-left: -150px; }
  .ib-hero__fly { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ib-hero__fly { display: none; }
  .ib-hero__r { animation: none; opacity: 1; max-height: none; padding-block: .45rem; }
}

/* 7 · Dashboards -----------------------------------------------------------*/
.da { display: grid; gap: .9rem; align-content: start; }
.da__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.da__kpi { padding-right: .5rem; border-right: 1px solid var(--line); }
.da__kpi:last-child { border-right: 0; }
.da__kpi em { font-style: normal; display: block; font-size: .63rem; color: var(--muted); margin-bottom: .1rem; }
.da__kpi b { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 1.2rem; letter-spacing: -.02em; }
.da__kpi--money b { color: var(--green); }
.da__delta { margin-left: .3rem; font-size: .58rem; font-weight: 700; color: var(--green); }
.da__ctitle { display: block; font-size: .62rem; color: var(--muted); margin-bottom: .5rem; }
.da__chart, .da__attr { padding-top: .8rem; border-top: 1px solid var(--line); }
.da__bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.da__bar { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.da__bar i { width: 100%; height: 6%; border-radius: 4px 4px 2px 2px; background: linear-gradient(to top, var(--blue), #59b8f5); transition: height .7s cubic-bezier(.2, .8, .2, 1); }
.demo[data-active="2"] .da__bar i, .demo[data-active="3"] .da__bar i { height: var(--h); }
.da__bar:nth-child(2) i { transition-delay: .06s; } .da__bar:nth-child(3) i { transition-delay: .12s; }
.da__bar:nth-child(4) i { transition-delay: .18s; } .da__bar:nth-child(5) i { transition-delay: .24s; }
.da__bar:nth-child(6) i { transition-delay: .3s; } .da__bar:nth-child(7) i { transition-delay: .36s; }
.da__bar.is-peak i { background: linear-gradient(to top, var(--d-violet), #a78bfa); }
.da__lbl { font-size: .56rem; color: var(--muted); text-decoration: none; }
.da__tip { position: absolute; left: 50%; bottom: calc(var(--h) + 26px); transform: translate(-50%, 6px); font-style: normal; white-space: nowrap;
  font-size: .55rem; font-weight: 700; color: #fff; background: var(--ink); border-radius: 5px; padding: .14rem .4rem; opacity: 0;
  transition: opacity .4s .6s, transform .4s .6s; pointer-events: none; }
.da__tip::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px; margin-left: -3px; background: var(--ink); transform: rotate(45deg); border-radius: 1px; }
.demo[data-active="2"] .da__bar.is-peak .da__tip, .demo[data-active="3"] .da__bar.is-peak .da__tip { opacity: 1; transform: translate(-50%, 0); }
.da__row { display: grid; grid-template-columns: 74px 1fr 56px; align-items: center; gap: .55rem; font-size: .7rem; color: var(--ink-2); margin-top: .42rem; }
.da__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da__row > i { display: block; height: 7px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.da__row > i b { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--grad); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.demo[data-active="3"] .da__row > i b { width: var(--w); }
.da--meta { background: linear-gradient(90deg, #1877f2, #4293ff) !important; }
.da--goo { background: linear-gradient(90deg, var(--d-amber), #fbbf24) !important; }
.da--wa { background: linear-gradient(90deg, #128c4a, #25d366) !important; }
.da__row em { font-style: normal; text-align: right; color: var(--ink); font-weight: 600; }

/* Responsive ---------------------------------------------------------------*/
/* 8 · Agenda y citas online -----------------------------------------------*/
.bk { display: grid; grid-template-columns: 1.1fr 1fr; gap: .7rem; align-items: start; }
.bk__cal { background: var(--bg); border-radius: 12px; padding: .65rem; }
.bk__title { display: flex; align-items: center; gap: .4rem; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .55rem; }
.bk__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.bk__col { display: grid; gap: .3rem; align-content: start; }
.bk__day { display: grid; justify-items: center; font-size: .56rem; color: var(--muted); margin-bottom: .1rem; }
.bk__day b { font-family: var(--font-head); font-size: .8rem; color: var(--ink); }
.bk__col i { font-style: normal; font-size: .64rem; text-align: center; padding: .3rem .1rem; border-radius: 7px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.bk__col i.is-pick { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; box-shadow: 0 7px 16px -6px rgba(30, 96, 232, .7); }
.bk__side { min-height: 186px; }
.bk__panel { gap: .4rem; align-content: start; background: var(--bg); border-radius: 12px; padding: .65rem; }
.bk__panel > b { font-family: var(--font-head); font-size: .68rem; }
.bk__panel > i { font-style: normal; display: grid; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .35rem .5rem; }
.bk__panel > i span { font-size: .7rem; font-weight: 700; font-family: var(--font-head); }
.bk__panel > i em { font-style: normal; font-size: .58rem; color: var(--muted); }
.bk__panel > i.is-on { border-color: var(--blue); box-shadow: 0 8px 18px -8px rgba(30, 96, 232, .45); }
.bk__who { display: flex; align-items: center; gap: .35rem; font-size: .62rem; color: var(--muted); justify-content: center; }
.bk__who .i { color: var(--blue); }
.bk__ok { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: var(--green-50); border-radius: 10px; padding: .5rem .6rem; }
.bk__ok > span { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--green); display: grid; place-items: center; font-size: .72rem; }
.bk__ok b { font-family: var(--font-head); font-size: .76rem; display: block; }
.bk__ok em { font-style: normal; font-size: .62rem; color: var(--muted); }
.bk__row { display: flex; align-items: center; gap: .4rem; font-size: .65rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .32rem .5rem; }
.bk__row .i { color: var(--blue); }
.bk__row--ok { color: var(--green); background: var(--green-50); border-color: transparent; }
.bk__row--ok .i { color: var(--green); }
.bk__wa { background: #fff; border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: .5rem .6rem; display: grid; justify-items: start; gap: .25rem; }
.bk__wa b { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--green); }
.bk__wa p { font-size: .72rem; }
.bk__wabtn { font-size: .66rem; font-weight: 700; color: var(--green); background: var(--green-50); border-radius: 999px; padding: .22rem .6rem; }

/* 9 · Ficha de cliente ----------------------------------------------------*/
.cl { display: grid; gap: .55rem; }
.cl__top { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; }
.cl__av { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .02em; background: var(--grad); color: #fff; }
.cl__id b { display: block; font-family: var(--font-head); font-size: .82rem; }
.cl__id em { font-style: normal; font-size: .64rem; color: var(--muted); }
.cl__ltv { text-align: right; }
.cl__ltv em { display: block; font-style: normal; font-size: .52rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.cl__ltv b { font-family: var(--font-head); font-size: .95rem; color: var(--green); }
.cl__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.cl__tags i { font-style: normal; font-size: .58rem; padding: .18rem .5rem; border-radius: 999px; background: var(--blue-50); color: var(--blue); }
.cl__tl { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; position: relative; }
.cl__tl::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.cl__tl li { display: grid; grid-template-columns: 28px 1fr; gap: .55rem; align-items: center; }
.cl__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; background: #fff; border: 1px solid var(--line); color: var(--blue); position: relative; z-index: 1; }
.cl__ic--wa { color: var(--green); background: var(--green-50); border-color: transparent; }
.cl__ic--eu { color: var(--d-amber); background: var(--d-amber-50); border-color: transparent; }
.cl__ic--me { color: var(--d-violet); background: var(--d-violet-50); border-color: transparent; }
.cl__ic--ok { color: var(--green); background: var(--green-50); border-color: transparent; }
.cl__tl b { font-family: var(--font-head); font-size: .74rem; display: block; }
.cl__tl em { font-style: normal; font-size: .62rem; color: var(--muted); }
.cl__next { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; padding: .55rem .65rem; border-radius: 10px; background: var(--blue-50); }
.cl__next > span { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--blue); font-size: .7rem; }
.cl__next b { font-family: var(--font-head); font-size: .74rem; display: block; }
.cl__next em { font-style: normal; font-size: .62rem; color: var(--muted); }

/* 10 · Reseñas con IA ------------------------------------------------------*/
.rv { display: grid; gap: .55rem; }
.rv__ask { display: grid; grid-template-columns: auto 1fr; gap: .55rem; }
.rv__ch { width: 28px; height: 28px; border-radius: 50%; background: var(--green-50); color: var(--green); display: grid; place-items: center; font-size: .78rem; }
.rv__ask p { background: var(--bg); border-radius: 12px 12px 12px 4px; padding: .5rem .65rem; font-size: .73rem; }
.rv__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem; font-size: .64rem; font-weight: 700; color: var(--blue); background: var(--blue-50); border-radius: 999px; padding: .22rem .6rem; }
.rv__card { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; display: grid; gap: .4rem; }
.rv__head { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; }
.rv__head b { font-family: var(--font-head); font-size: .75rem; display: block; }
.rv__stars { display: flex; gap: .09rem; color: #f0a020; font-size: .58rem; margin-top: .1rem; }
.rv__src { color: var(--muted); font-size: .85rem; }
.rv__text { font-size: .73rem; color: var(--muted); }
.rv__score { display: flex; align-items: baseline; gap: .45rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.rv__score > b { font-family: var(--font-head); font-size: 1.3rem; }
.rv__score em { font-style: normal; font-size: .63rem; color: var(--muted); }
.rv__score em b { font-family: var(--font-head); color: var(--ink); }
.rv__ai { background: var(--blue-50); border-radius: 12px; padding: .6rem .7rem; display: grid; gap: .35rem; justify-items: start; }
.rv__badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.rv__ai p { font-size: .73rem; }
.rv__send { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 8px; padding: .3rem .7rem; }
.rv__send .i { color: #fff; }

/* 11 · Presupuestos, facturas y pagos -------------------------------------*/
.qu { display: grid; gap: .6rem; }
.qu__flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.qu__flow i { font-style: normal; display: flex; align-items: center; justify-content: center; gap: .35rem; font-size: .61rem; font-weight: 700; padding: .34rem .3rem; border-radius: 999px; background: var(--bg); color: var(--muted); transition: background .4s ease, color .4s ease; }
.demo[data-active="2"] .qu__flow i[data-at="1"],
.demo[data-active="3"] .qu__flow i[data-at="1"],
.demo[data-active="3"] .qu__flow i[data-at="2"] { background: var(--blue-50); color: var(--blue); }
.demo[data-active="1"] .qu__flow i[data-at="1"],
.demo[data-active="2"] .qu__flow i[data-at="2"],
.demo[data-active="3"] .qu__flow i[data-at="3"] { background: var(--blue); color: #fff; }
.qu__doc { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .75rem; display: grid; gap: .45rem; }
.qu__head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.qu__head b { font-family: var(--font-head); font-size: .79rem; display: block; }
.qu__head em { font-style: normal; font-size: .64rem; color: var(--muted); }
.qu__stamp { display: inline-flex; align-items: center; gap: .3rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.qu__stamp--pay { color: var(--green); background: var(--green-50); }
.qu__lines { list-style: none; margin: 0; padding: 0; display: grid; }
.qu__lines li { display: flex; justify-content: space-between; gap: .6rem; font-size: .71rem; color: var(--muted); padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.qu__lines em { font-style: normal; color: var(--ink); font-weight: 600; }
.qu__total { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.qu__total span { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.qu__total b { font-family: var(--font-head); font-size: 1.15rem; }
.qu__sign { display: grid; gap: .1rem; justify-items: start; border-top: 1px solid var(--line); padding-top: .4rem; }
.qu__sign svg { width: 118px; height: 34px; }
.qu__sign path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.demo[data-active="2"] .qu__sign path,
.demo[data-active="3"] .qu__sign path { animation: qu-sign 1.1s .2s cubic-bezier(.4, 0, .4, 1) forwards; }
@keyframes qu-sign { to { stroke-dashoffset: 0; } }
.qu__sign em { font-style: normal; font-size: .61rem; color: var(--muted); }
.qu__pay { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: var(--green-50); border-radius: 10px; padding: .5rem .6rem; }
.qu__pay > span { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--green); display: grid; place-items: center; font-size: .7rem; }
.qu__pay b { font-family: var(--font-head); font-size: .74rem; display: block; }
.qu__pay em { font-style: normal; font-size: .62rem; color: var(--muted); }

/* 12 · Campañas de reactivación -------------------------------------------*/
.re { display: grid; grid-template-columns: .92fr 1fr; gap: .7rem; align-items: start; }
.re__t { display: flex; align-items: center; gap: .4rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.re__seg { background: var(--bg); border-radius: 12px; padding: .65rem; display: grid; gap: .45rem; }
.re__fl { display: grid; gap: .3rem; }
.re__fl > i { font-style: normal; display: grid; grid-template-columns: auto 1fr; gap: 0 .5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .35rem .5rem; }
.re__fl .i { grid-row: span 2; width: 26px; height: 26px; border-radius: 8px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; font-size: .68rem; }
.re__fl span { font-size: .56rem; color: var(--muted); }
.re__fl em { font-style: normal; font-size: .68rem; font-weight: 700; font-family: var(--font-head); }
.re__count { display: flex; align-items: baseline; gap: .4rem; justify-content: center; }
.re__count b { font-family: var(--font-head); font-size: 1.5rem; color: var(--blue); }
.re__count em { font-style: normal; font-size: .62rem; color: var(--muted); }
.re__side { display: grid; gap: .55rem; align-content: start; }
.re__msgs { display: grid; gap: .4rem; }
.re__msg { border-radius: 11px; padding: .5rem .6rem; }
.re__msg b { display: flex; align-items: center; gap: .35rem; font-size: .56rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; }
.re__msg p { font-size: .71rem; }
.re__msg--wa { background: var(--green-50); } .re__msg--wa b { color: var(--green); }
.re__msg--ml { background: var(--blue-50); } .re__msg--ml b { color: var(--blue); }
.re__res { display: grid; gap: .4rem; }
.re__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.re__kpis span { display: grid; justify-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .35rem .2rem; }
.re__kpis b { font-family: var(--font-head); font-size: 1rem; }
.re__kpis em { font-style: normal; font-size: .54rem; color: var(--muted); }
.re__money { display: flex; align-items: baseline; gap: .3rem; justify-content: center; font-size: .64rem; color: var(--muted); }
.re__money b { font-family: var(--font-head); font-size: 1.05rem; color: var(--green); }

/* 13 · Venta de entradas --------------------------------------------------*/
.tk { display: grid; grid-template-columns: 1fr .95fr; gap: .7rem; align-items: start; }
.tk__t { display: flex; align-items: flex-start; gap: .4rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); line-height: 1.5; }
.tk__types { background: var(--bg); border-radius: 12px; padding: .65rem; display: grid; gap: .35rem; }
.tk__types > i { font-style: normal; display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .4rem .55rem; }
.tk__types > i span { font-size: .71rem; font-weight: 700; font-family: var(--font-head); }
.tk__types > i em { font-style: normal; font-size: .82rem; font-weight: 800; font-family: var(--font-head); color: var(--blue); grid-row: span 2; align-self: center; }
.tk__types > i u { text-decoration: none; font-size: .56rem; color: var(--muted); }
.tk__types > i.is-on { border-color: var(--blue); box-shadow: 0 8px 18px -8px rgba(30, 96, 232, .45); }
.tk__types > i.is-out { opacity: .55; }
.tk__types > i.is-out u { color: var(--d-pink); font-weight: 700; }
.tk__sold { display: flex; align-items: center; gap: .35rem; justify-content: center; font-size: .61rem; color: var(--muted); }
.tk__sold b { font-family: var(--font-head); font-size: .85rem; color: var(--ink); }
.tk__sold .i, .tk__t .i { color: var(--blue); }
.tk__side { min-height: 178px; }
.tk__panel { gap: .35rem; align-content: start; background: var(--bg); border-radius: 12px; padding: .65rem; }
.tk__panel > b { font-family: var(--font-head); font-size: .68rem; }
.tk__row { display: flex; align-items: center; gap: .4rem; font-size: .65rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .32rem .5rem; }
.tk__row .i { color: var(--blue); }
.tk__row b { font-family: var(--font-head); color: var(--ink); }
.tk__row--ok { color: var(--green); background: var(--green-50); border-color: transparent; }
.tk__row--ok .i { color: var(--green); }
.tk__buy { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; }
.tk__buy b { font-family: var(--font-head); font-size: .75rem; }
.tk__buy em { font-style: normal; font-size: .61rem; color: var(--muted); }
.tk__amount { grid-row: span 2; align-self: center; font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; }
.tk__qr { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; }
.tk__qr > span { width: 38px; height: 38px; border-radius: 8px; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 1.25rem; }
.tk__qr b { font-family: var(--font-head); font-size: .75rem; display: block; }
.tk__qr em { font-style: normal; font-size: .61rem; color: var(--muted); }

/* ==========================================================================
   Piezas comunes de las recreaciones (tanda 3)
   ========================================================================== */
.dm-1 { display: grid; gap: .55rem; align-content: start; }
.dm-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; align-items: start; }
.dm-t { display: flex; align-items: center; gap: .4rem; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.dm-t .i { color: var(--blue); }
.dm-box { background: var(--bg); border-radius: 12px; padding: .65rem; display: grid; gap: .4rem; align-content: start; }
.dm-row { display: flex; align-items: center; gap: .45rem; font-size: .66rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .38rem .55rem; }
.dm-row .i { color: var(--blue); flex-shrink: 0; }
.dm-txt { flex: 1; }
.dm-row b { font-family: var(--font-head); color: var(--ink); font-size: .71rem; font-weight: 700; }
.dm-row em { font-style: normal; margin-left: auto; padding-left: .4rem; font-size: .64rem; font-weight: 700; color: var(--ink); font-family: var(--font-head); white-space: nowrap; }
.dm-row--ok { color: var(--green); background: var(--green-50); border-color: transparent; }
.dm-row--ok .i, .dm-row--ok em, .dm-row--ok b { color: var(--green); }
.dm-row--mut { opacity: .55; }
.dm-row--amb { color: var(--d-amber); background: var(--d-amber-50); border-color: transparent; }
.dm-row--amb .i, .dm-row--amb b { color: var(--d-amber); }
.dm-tile { width: 27px; height: 27px; border-radius: 8px; background: var(--blue-50); color: var(--blue); display: grid; place-items: center; font-size: .7rem; flex-shrink: 0; }
.dm-tile--g { background: var(--green-50); color: var(--green); }
.dm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.dm-kpis span { display: grid; justify-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .38rem .2rem; }
.dm-kpis b { font-family: var(--font-head); font-size: 1rem; }
.dm-kpis em { font-style: normal; font-size: .54rem; color: var(--muted); text-align: center; }
.dm-note { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: var(--blue-50); border-radius: 10px; padding: .5rem .6rem; }
.dm-note .dm-tile { background: #fff; }
.dm-note b { font-family: var(--font-head); font-size: .74rem; display: block; }
.dm-note em { font-style: normal; font-size: .63rem; color: var(--muted); }
.dm-note--g { background: var(--green-50); }
.dm-msg { font-size: .73rem; padding: .48rem .62rem; max-width: 92%; }
.dm-msg--in { background: var(--bg); border-radius: 12px 12px 12px 4px; justify-self: start; }
.dm-msg--ia { background: var(--blue-50); border-radius: 12px 12px 12px 4px; justify-self: start; }
.dm-msg--out { background: var(--blue); color: #fff; border-radius: 12px 12px 4px 12px; justify-self: end; }
.dm-chip { display: inline-flex; align-items: center; gap: .32rem; font-size: .59rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: var(--blue-50); color: var(--blue); }
.dm-chip--g { background: var(--green-50); color: var(--green); }
.dm-chip--a { background: var(--d-amber-50); color: var(--d-amber); }
.dm-arrow { display: grid; place-items: center; color: var(--line-2); font-size: .72rem; height: 12px; }
.dm-bar { display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.dm-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--grad); transition: width 1s cubic-bezier(.3, .9, .3, 1); }
.demo[data-active="1"] .demo__screen [data-at="1"] .dm-bar i,
.demo[data-active="2"] .demo__screen [data-at="1"] .dm-bar i,
.demo[data-active="2"] .demo__screen [data-at="2"] .dm-bar i,
.demo[data-active="3"] .demo__screen [data-at="1"] .dm-bar i,
.demo[data-active="3"] .demo__screen [data-at="2"] .dm-bar i,
.demo[data-active="3"] .demo__screen [data-at="3"] .dm-bar i,
.demo .demo__screen > .dm-bar i { width: var(--w); }
.dm-ph { background: repeating-linear-gradient(45deg, #eef2f9, #eef2f9 7px, #e6ecf7 7px, #e6ecf7 14px); border-radius: 8px; display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.dm-ph > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 14 · WhatsApp Business API ----------------------------------------------*/
.wa__prof { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; }
.wa__prof b { font-family: var(--font-head); font-size: .8rem; display: block; }
.wa__prof em { font-style: normal; font-size: .64rem; color: var(--muted); }
.wa__tpl { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; display: grid; gap: .35rem; justify-items: start; }
.wa__tpl p { font-size: .73rem; }
.wa__tpl u { text-decoration: none; background: var(--blue-50); color: var(--blue); font-weight: 700; border-radius: 5px; padding: 0 .2rem; }

/* 15 · Tracking de campañas en WhatsApp ----------------------------------*/
.tw__in { display: grid; gap: .4rem; justify-items: start; }
.tw__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tw__tbl { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tw__r { display: grid; grid-template-columns: 1fr 48px 48px; gap: .4rem; padding: .34rem .55rem; align-items: center; font-size: .67rem; border-top: 1px solid var(--line); }
.tw__r:first-child { border-top: 0; }
.tw__r span { color: var(--ink); font-weight: 600; }
.tw__r em, .tw__r u { font-style: normal; text-decoration: none; text-align: right; font-family: var(--font-head); font-weight: 700; }
.tw__r u { color: var(--green); }
.tw__r--h { background: var(--bg); }
.tw__r--h span, .tw__r--h em, .tw__r--h u { font-size: .55rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; }

/* 16 · IA conversacional --------------------------------------------------*/
.ai__head { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; }
.ai__head b { font-family: var(--font-head); font-size: .78rem; display: block; }
.ai__head em { font-style: normal; font-size: .63rem; color: var(--muted); }
.ai__src { background: var(--bg); border-radius: 10px; padding: .5rem .6rem; display: grid; gap: .35rem; }
.ai__chips { display: flex; flex-wrap: wrap; gap: .3rem; }

/* 17 · Email marketing ----------------------------------------------------*/
.em__mail { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.em__bar { background: var(--bg); padding: .42rem .65rem; display: flex; gap: .4rem; align-items: center; border-bottom: 1px solid var(--line); font-size: .6rem; color: var(--muted); }
.em__bar .i { color: var(--blue); }
.em__bar b { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .54rem; }
.em__bar span { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em__body { padding: .7rem .75rem; display: grid; gap: .4rem; justify-items: start; }
.em__logo { font-family: var(--font-head); font-size: .8rem; color: var(--blue); }
.em__hi { font-size: .72rem; font-weight: 600; }
.em__txt { font-size: .7rem; color: var(--muted); }
.em__prod { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; width: 100%; background: var(--bg); border-radius: 9px; padding: .45rem .5rem; }
.em__prod .dm-ph { width: 36px; height: 44px; font-size: .9rem; }
.em__prod b { font-family: var(--font-head); font-size: .73rem; display: block; }
.em__prod em { font-style: normal; font-size: .63rem; color: var(--muted); }
.em__btn { font-size: .68rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 8px; padding: .34rem .8rem; }

/* 18 · Integración con anuncios ------------------------------------------*/
.ad__ad { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .65rem; display: grid; gap: .45rem; justify-items: start; }
.ad__creative { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: center; width: 100%; }
.ad__creative .dm-ph { width: 62px; height: 58px; font-size: 1.1rem; }
.ad__creative b { font-family: var(--font-head); font-size: .78rem; display: block; }
.ad__creative em { font-style: normal; font-size: .64rem; color: var(--muted); display: block; margin-bottom: .35rem; }
.ad__btn { font-size: .64rem; font-weight: 700; color: var(--blue); background: var(--blue-50); border-radius: 7px; padding: .24rem .6rem; display: inline-block; }

/* 19 · Atribución multicanal ---------------------------------------------*/
.at__route { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; background: var(--bg); border-radius: 12px; padding: .7rem .6rem; position: relative; }
.at__route::before { content: ""; position: absolute; left: 12%; right: 12%; top: 1.3rem; height: 2px; background: var(--line-2); }
.at__p { display: grid; justify-items: center; gap: .25rem; position: relative; z-index: 1; text-align: center; }
.at__p .dm-tile { background: #fff; border: 1px solid var(--line); }
.at__p--end .dm-tile { background: var(--green-50); border-color: transparent; }
.at__p b { font-family: var(--font-head); font-size: .63rem; }
.at__p em { font-style: normal; font-size: .55rem; color: var(--muted); }
.at__modes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.at__mode { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .55rem; display: grid; gap: .25rem; }
.at__mode b { font-family: var(--font-head); font-size: .74rem; display: flex; align-items: center; gap: .35rem; }
.at__mode b .i { color: var(--blue); }
.at__tbl { background: var(--bg); border-radius: 12px; padding: .6rem; display: grid; gap: .35rem; }
.at__r { display: grid; grid-template-columns: 82px 1fr auto; gap: .5rem; align-items: center; font-size: .65rem; }
.at__r span { color: var(--muted); }
.at__r i { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.at__r i b { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--grad); }
.at__r em { font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: .68rem; }

/* 20 · Seguimiento de llamadas -------------------------------------------*/
.ca__in { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .65rem; display: grid; gap: .45rem; justify-items: start; }
.ca__who { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; }
.ca__who b { font-family: var(--font-head); font-size: .78rem; display: block; }
.ca__who em { font-style: normal; font-size: .63rem; color: var(--muted); }
.ca__play { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; width: 100%; }
.ca__play .i { color: var(--blue); font-size: .72rem; }
.ca__play u { text-decoration: none; font-size: .58rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ca__play .dm-bar i { width: var(--w); }

/* 21 · Reservas de alquiler ----------------------------------------------*/
.rn__grid { display: grid; gap: .25rem; }
.rn__row { display: grid; grid-template-columns: 52px repeat(5, 1fr); gap: .25rem; align-items: center; }
.rn__row > span { font-size: .6rem; color: var(--muted); font-weight: 600; }
.rn__row > i { height: 24px; border-radius: 6px; background: #fff; border: 1px solid var(--line); }
.rn__row > i.is-busy { background: var(--line); border-color: transparent; }
.rn__row > i.is-pick { background: var(--blue); border-color: var(--blue); box-shadow: 0 6px 14px -6px rgba(30, 96, 232, .7); }
.rn__row--h > i { height: auto; background: none; border: 0; font-style: normal; font-size: .55rem; color: var(--muted); text-align: center; }
.rn__key { display: flex; gap: .8rem; justify-content: center; font-size: .56rem; color: var(--muted); }
.rn__key span { display: flex; align-items: center; gap: .25rem; }
.rn__key i { width: 10px; height: 10px; border-radius: 3px; background: #fff; border: 1px solid var(--line); }
.rn__key i.is-busy { background: var(--line); border-color: transparent; }
.rn__key i.is-pick { background: var(--blue); border-color: var(--blue); }

/* 22 · Control de asistencia ---------------------------------------------*/
.att__p { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .35rem .5rem; }
.att__av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-size: .58rem; font-weight: 800; background: var(--bg-alt); color: var(--muted); }
.att__p b { font-family: var(--font-head); font-size: .72rem; display: block; }
.att__p em { font-style: normal; font-size: .6rem; color: var(--muted); }
.att__p--ok em { color: var(--green); font-weight: 700; }
.att__p--no em { color: var(--d-pink); }
.js .att__p { transition: background .5s ease, border-color .5s ease, opacity .5s ease; }
.demo[data-active="2"] .att__p--ok, .demo[data-active="3"] .att__p--ok { background: var(--green-50); border-color: transparent; }
.demo[data-active="2"] .att__p--ok .att__av, .demo[data-active="3"] .att__p--ok .att__av { background: #fff; color: var(--green); }
.demo[data-active="3"] .att__p--no { opacity: .6; }
.att__live { background: var(--bg); border-radius: 12px; padding: .65rem; display: grid; gap: .4rem; justify-items: center; }
.att__live > b { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.att__big { display: flex; align-items: baseline; gap: .35rem; }
.att__big b { font-family: var(--font-head); font-size: 1.7rem; color: var(--blue); }
.att__big em { font-style: normal; font-size: .66rem; color: var(--muted); }
.att__live .dm-bar { width: 100%; }

/* 23 · Membresías y cursos -----------------------------------------------*/
.ms__m { display: flex; align-items: center; gap: .5rem; font-size: .68rem; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .36rem .55rem; }
.ms__m .i { color: var(--line-2); font-size: .68rem; }
.ms__m--ok { color: var(--green); background: var(--green-50); border-color: transparent; }
.ms__m--ok .i { color: var(--green); }
.ms__m--now { border-color: var(--blue); color: var(--ink); font-weight: 700; box-shadow: 0 8px 18px -8px rgba(30, 96, 232, .45); }
.ms__m--now .i { color: var(--blue); }
.ms__prog { background: var(--bg); border-radius: 12px; padding: .65rem; display: grid; gap: .4rem; }
.ms__prog > b { font-family: var(--font-head); font-size: .74rem; }
.ms__prog em { font-style: normal; font-size: .62rem; color: var(--muted); }

/* 24 · Integraciones y API -----------------------------------------------*/
.in__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; }
.in__app { display: grid; justify-items: center; gap: .2rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .2rem; color: var(--blue); font-size: .95rem; }
.in__app em { font-style: normal; font-size: .55rem; color: var(--muted); }
.in__flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .4rem; align-items: center; }
.in__n { display: grid; justify-items: center; gap: .2rem; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .35rem; }
.in__n b { font-family: var(--font-head); font-size: .66rem; }
.in__n em { font-style: normal; font-size: .55rem; color: var(--muted); }
.in__ar { color: var(--line-2); font-size: .72rem; }

/* 25 · App móvil ----------------------------------------------------------*/
.ap { max-width: 320px; margin-inline: auto; }
.ap__push { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .6rem; box-shadow: var(--shadow); }
.ap__push b { font-family: var(--font-head); font-size: .74rem; display: block; }
.ap__push em { font-style: normal; font-size: .61rem; color: var(--muted); }
.ap__card { background: var(--bg); border-radius: 12px; padding: .6rem; display: grid; gap: .5rem; }
.ap__who { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; }
.ap__who b { font-family: var(--font-head); font-size: .76rem; display: block; }
.ap__who em { font-style: normal; font-size: .62rem; color: var(--muted); }
.ap__acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.ap__acts span { display: grid; justify-items: center; gap: .18rem; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .4rem .2rem; color: var(--blue); font-size: .8rem; }
.ap__acts em { font-style: normal; font-size: .54rem; color: var(--muted); }

/* Piezas comunes añadidas en la tanda 4 ------------------------------------*/
.dm-tile--a { background: var(--d-amber-50); color: var(--d-amber); }
.kb__av--wait { background: var(--line); color: var(--muted); }

/* Ventana de la plataforma: solo los tres puntos -------------------------*/
.dm-win { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); align-content: start; }
.dm-win__bar { background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem .7rem; display: flex; gap: .3rem; }
.dm-win__bar i { width: 8px; height: 8px; border-radius: 50%; }
.dm-win__bar i:nth-child(1) { background: #ff5f57; }
.dm-win__bar i:nth-child(2) { background: #febc2e; }
.dm-win__bar i:nth-child(3) { background: #28c840; }
.dm-win__body { padding: .9rem 1rem; display: grid; gap: .6rem; align-content: start; }
/* Un paso que es solo una ventana de la plataforma: la propia ventana hace de tarjeta,
   el demo__screen de alrededor no debe pintar otra tarjeta por detrás */
.demo--panel .demo__screen.dm-screen--bare { background: transparent; border: none; box-shadow: none; padding: 0; }
/* Campos y selectores dentro de una ventana */
.dm-f { display: grid; gap: .2rem; }
.dm-f > span { font-size: .54rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.dm-f > i { font-style: normal; display: flex; align-items: center; gap: .4rem; min-height: 30px; padding: .3rem .55rem; border: 1px solid var(--line); border-radius: 8px; font-size: .73rem; background: #fff; }
.dm-f > i .i { color: var(--blue); }
.dm-seg { display: flex; gap: .3rem; }
.dm-seg i { font-style: normal; flex: 1; text-align: center; font-size: .7rem; font-weight: 700; font-family: var(--font-head); padding: .36rem .3rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.dm-seg i.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* 26 · Suscripciones recurrentes -----------------------------------------*/
.su__prod { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .65rem; }
.su__prod b { font-family: var(--font-head); font-size: .8rem; display: block; }
.su__prod em { font-style: normal; font-size: .64rem; color: var(--muted); }
.su__price { font-family: var(--font-head); font-size: 1.05rem; font-weight: 800; color: var(--blue); white-space: nowrap; }
.su__price u { text-decoration: none; font-size: .6rem; font-weight: 600; color: var(--muted); }
.su__tl { background: var(--bg); border-radius: 12px; padding: .6rem; display: grid; gap: .45rem; }
.su__ms { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.su__m { font-style: normal; text-align: center; font-size: .62rem; font-weight: 700; padding: .32rem .1rem; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--muted); }
.su__m--ok { background: var(--green-50); border-color: transparent; color: var(--green); }
.su__m--fail { background: var(--d-amber-50); border-color: transparent; color: var(--d-amber); }
.su__m--next { border-style: dashed; }
.su__fail { background: var(--bg); border-radius: 12px; padding: .6rem; display: grid; gap: .35rem; }
.su__head { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; margin-bottom: .1rem; }
.su__head b { font-family: var(--font-head); font-size: .76rem; display: block; }
.su__head em { font-style: normal; font-size: .62rem; color: var(--muted); }

/* 27 · Tienda online ------------------------------------------------------*/
.so__prod { background: var(--bg); border-radius: 12px; padding: .65rem; display: grid; gap: .3rem; justify-items: start; }
.so__img { width: 100%; height: 86px; font-size: 1.6rem; }
.so__prod > b { font-family: var(--font-head); font-size: .82rem; margin-top: .15rem; }
.so__prod > em { font-style: normal; font-size: .64rem; color: var(--muted); }
.so__vars { display: grid; gap: .28rem; width: 100%; margin-top: .2rem; }
.so__vars > i { font-style: normal; display: flex; justify-content: space-between; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .34rem .5rem; font-size: .68rem; color: var(--muted); }
.so__vars > i em { font-style: normal; font-family: var(--font-head); font-weight: 700; color: var(--ink); }
.so__vars > i.is-on { border-color: var(--blue); box-shadow: 0 8px 18px -8px rgba(30, 96, 232, .45); }
.so__vars > i.is-on span { color: var(--ink); font-weight: 600; }
.so__stock { display: flex; align-items: center; gap: .35rem; font-size: .62rem; color: var(--green); }
.so__stock .i { color: var(--green); }
.so__total { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding-top: .3rem; border-top: 1px solid var(--line); margin-top: .15rem; }
.so__total span { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.so__total b { font-family: var(--font-head); font-size: 1.05rem; }

/* 28 · Firma de documentos -----------------------------------------------*/
.sg__blocks { display: grid; gap: .28rem; }
.sg__blocks > i { font-style: normal; display: flex; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .34rem .5rem; font-size: .66rem; color: var(--muted); }
.sg__blocks > i .i { color: var(--muted); width: 18px; text-align: center; flex-shrink: 0; }
.sg__blocks > i.is-dyn { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
.sg__blocks > i.is-dyn .i { color: var(--blue); }
.sg__blocks > i.is-sign { color: var(--ink); border-style: dashed; border-color: var(--line-2); font-weight: 700; }
.sg__blocks > i.is-sign .i { color: var(--blue); }
.sg__hint { display: flex; align-items: center; gap: .35rem; font-size: .58rem; color: var(--muted); justify-content: center; }
.sg__hint .i { color: var(--blue); }
.sg__who { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .35rem .5rem; }
.sg__who b { font-family: var(--font-head); font-size: .72rem; display: block; }
.sg__who em { font-style: normal; font-size: .6rem; color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.sg__ok { color: var(--green) !important; font-weight: 700; }
.sg__ok .i { color: var(--green); }

/* 29 · Planificador de redes: escena a pantalla completa guiada por el scroll (main.js · [data-cine]) */
.cine { position: relative; height: 420vh; background: #060d22; }
.cine__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden; color: #fff; }
.cine__bg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 20% 20%, rgba(0, 184, 230, .22), transparent 70%),
    radial-gradient(700px 500px at 85% 80%, rgba(30, 96, 232, .3), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px; }
.cine__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, #060d22 85%); }
.cine__lab { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #9cc4ff; }
.cine__caps { position: absolute; top: calc(20px + 2.4rem); left: 0; right: 0; z-index: 5; text-align: center; }
.cine__cap { position: absolute; left: 16px; right: 16px; top: 0; margin: 0; font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; font-size: clamp(1.6rem, 4.2vw, 3.1rem); color: #fff; opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s; }
.cine__cap.is-on { opacity: 1; transform: none; }
.cine__cap span { background: linear-gradient(90deg, #00d0ff, #6aa4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cine__post { position: absolute; left: 0; top: 0; width: 294px; background: #fff; border-radius: 20px; padding: 12px 12px 14px; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); z-index: 1; will-change: transform, opacity; }
.cine__post::before { content: ""; display: block; aspect-ratio: 1; border-radius: 12px; background: var(--bg); }
.cine__txt { margin: 12px 4px 0; font-size: .95rem; min-height: 2.8em; line-height: 1.4; color: var(--ink); }
.cine__txt::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--blue); margin-left: 2px; vertical-align: -.15em; animation: cine-caret 1s steps(1) infinite; }
@keyframes cine-caret { 50% { opacity: 0; } }
.cine__cp { position: absolute; left: 0; top: 0; border-radius: 12px; z-index: 2; will-change: transform, width, height; }
.cine__img { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #222; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9); }
.cine__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cine__hd { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 700; white-space: nowrap; color: #fff; opacity: 0; }
.cine__hd .i { font-size: 1.05rem; }
.cine__ig { color: #e1306c; } .cine__fb { color: #1877f2; } .cine__in { color: #0a66c2; } .cine__gg { color: #4285f4; }
.cine__tt { color: #fff; text-shadow: -1.5px -1px 0 #25f4ee, 1.5px 1px 0 #fe2c55; }
.cine__ov { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: .6rem; line-height: 1.3; color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); opacity: 0; }
@media (max-width: 560px) { .cine__ov { left: 5px; right: 5px; bottom: 6px; font-size: .5rem; line-height: 1.2; } }
.cine__ok { position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: .8rem; border: 3px solid #060d22; transform: scale(0); z-index: 3; }
.cine__fx { position: absolute; left: 50%; top: 30%; pointer-events: none; }
.cine__fx .i { position: absolute; color: #ff4f8b; font-size: 1rem; opacity: 0; }
.cine__rail { position: absolute; left: 50%; bottom: 11%; width: min(760px, 100% - 48px); transform: translateX(-50%); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); opacity: 0; z-index: 4; }
.cine__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.cine__head { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(0, 184, 230, .3), 0 0 24px 6px rgba(0, 184, 230, .6); }
.cine__head b { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--font-head); font-size: 1.5rem; white-space: nowrap; color: #fff; }
.cine__ticks { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: .68rem; color: rgba(255, 255, 255, .5); }
.cine__hint { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); font-size: .78rem; color: rgba(255, 255, 255, .6); display: flex; gap: .4rem; align-items: center; z-index: 5; transition: opacity .4s; }
.cine__hint .i { animation: cine-bob 1.4s ease-in-out infinite; }
@keyframes cine-bob { 50% { transform: translateY(5px); } }
/* Momento final: todo publicado */
.cine__stage.is-live .cine__img { box-shadow: 0 0 0 3px var(--green), 0 0 40px 4px rgba(23, 145, 74, .55); transition: box-shadow .5s; }
.cine__stage.is-live .cine__ok { animation: cine-pop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: var(--d); }
.cine__stage.is-live .cine__fx .i { animation: cine-float 2.4s ease-out infinite; animation-delay: calc(var(--d) + var(--k)); }
.cine__stage.is-live .cine__rail { box-shadow: 0 0 30px rgba(23, 145, 74, .6); }
.cine__stage.is-live .cine__fill { background: var(--green); }
@keyframes cine-pop { to { transform: scale(1); } }
@keyframes cine-float { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -110px) scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .cine__txt::after, .cine__hint .i, .cine__stage.is-live .cine__fx .i { animation: none; }
  .cine__stage.is-live .cine__ok { animation: none; transform: scale(1); }
}
/* Sin JS no hay escena */
html:not(.js) .cine { display: none; }

/* Cabecera del planificador: titular con la red que cambia + muro infinito de publicaciones */
.rhero { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) 0 0; text-align: center; }
.rhero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 50% 0%, rgba(30, 96, 232, .1), transparent 70%); }
.rhero .breadcrumb ol { justify-content: center; }
.rhero h1 { font-family: var(--font-body); font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; letter-spacing: 0; color: var(--muted); margin-top: 1rem; }
.rhero__big { font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(2.3rem, 6.4vw, 4.8rem); margin: .4rem auto 0; max-width: 16ch; color: var(--ink); }
.rhero__rot { display: inline-grid; vertical-align: bottom; height: 1.3em; overflow: hidden; }
.rhero__rot > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: .18em; opacity: 0; transform: translateY(100%); animation: rhero-rot 14s infinite; }
.rhero__rot > span .i { font-size: .8em; }
.rhero__rot > span:nth-child(2) { animation-delay: 2s; } .rhero__rot > span:nth-child(3) { animation-delay: 4s; }
.rhero__rot > span:nth-child(4) { animation-delay: 6s; } .rhero__rot > span:nth-child(5) { animation-delay: 8s; }
.rhero__rot > span:nth-child(6) { animation-delay: 10s; } .rhero__rot > span:nth-child(7) { animation-delay: 12s; }
@keyframes rhero-rot { 0% { opacity: 0; transform: translateY(100%); } 3%, 13% { opacity: 1; transform: none; } 16%, 100% { opacity: 0; transform: translateY(-100%); } }
.rhero__ig { color: #e1306c; } .rhero__tt { color: #111; } .rhero__fb { color: #1877f2; } .rhero__in { color: #0a66c2; } .rhero__gg { color: #4285f4; } .rhero__yt { color: #ff0000; } .rhero__pi { color: #e60023; }
.rhero .hero__lead { margin-inline: auto; }
.rhero .hero__actions { justify-content: center; }
.rhero__wall { margin-top: 3rem; padding-bottom: 3rem; display: grid; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.rhero__row { display: flex; gap: 14px; width: max-content; animation: rhero-slide 40s linear infinite; }
.rhero__row--rev { animation-direction: reverse; }
@keyframes rhero-slide { to { transform: translateX(calc(-50% - 7px)); } }
.rhero__t { width: 150px; height: 150px; border-radius: 18px; overflow: hidden; position: relative; flex-shrink: 0; box-shadow: 0 14px 30px -18px rgba(11, 27, 58, .5); display: grid; place-items: center; padding: .6rem; text-align: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 1rem; line-height: 1.15; }
.rhero__t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rhero__t > .i { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 8px; background: #fff; display: grid; place-items: center; font-size: .8rem; }
.rhero__t--a { background: linear-gradient(135deg, #00b8e6, #1e60e8); }
.rhero__t--b { background: linear-gradient(135deg, #ffb26b, #ff6f61); }
.rhero__t--c { background: var(--ink); font-family: var(--font-body); font-style: italic; font-weight: 600; font-size: .9rem; }
.rhero__t--d { background: linear-gradient(135deg, #6dd5a5, #17914a); }
.rhero__t--e { background: linear-gradient(135deg, #a18cd1, #6c5ce7); }
@media (max-width: 560px) { .rhero__t { width: 110px; height: 110px; font-size: .8rem; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .rhero__row { animation: none; }
  .rhero__rot > span { animation: none; }
  .rhero__rot > span:first-child { opacity: 1; transform: none; }
}

/* 30 · Administrador de anuncios -----------------------------------------*/
.ad2__cr { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .5rem; }
.ad2__cr .dm-ph { width: 52px; height: 46px; font-size: 1rem; }
.ad2__cr b { font-family: var(--font-head); font-size: .72rem; display: block; }
.ad2__cr em { font-style: normal; font-size: .61rem; color: var(--muted); }

/* 31 · Cupones ------------------------------------------------------------*/
.cu__card { position: relative; background: var(--grad); color: #fff; border-radius: 14px; padding: .9rem .8rem; display: grid; justify-items: center; gap: .15rem; text-align: center; box-shadow: 0 14px 30px -14px rgba(30, 96, 232, .8); }
.cu__pc { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; line-height: 1; }
.cu__card b { color: #fff; font-family: var(--font-head); font-size: .95rem; font-weight: 800; letter-spacing: .08em; background: rgba(255, 255, 255, .18); border-radius: 7px; padding: .18rem .6rem; margin-top: .3rem; }
.cu__card em { font-style: normal; font-size: .64rem; opacity: .85; margin-top: .15rem; }
.cu__cut { position: absolute; left: 0; right: 0; bottom: 26%; border-top: 2px dashed rgba(255, 255, 255, .35); }

/* 32 · Tarjetas regalo ---------------------------------------------------*/
.gf { min-height: 368px; align-content: center; }
.gf__ttl { display: flex; align-items: center; gap: .4rem; font-family: var(--font-head); font-size: .85rem; padding-bottom: .25rem; }
.gf__ttl .i { color: var(--blue); }
.gf__form { gap: .85rem; }
.gf__pay { text-align: center; font-size: .78rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 9px; padding: .58rem; margin-top: .2rem; }
.gf__wrap { justify-items: center; align-content: center; gap: .55rem; min-height: 368px; }
.gf__card { background: var(--ink); color: #fff; border-radius: 18px; padding: 1.5rem 2.2rem; min-width: min(320px, 100%); display: grid; justify-items: center; gap: .12rem; text-align: center; box-shadow: 0 20px 40px -18px rgba(11, 23, 46, .6); }
.gf__ico { font-size: 2rem; color: #7cc8ff; }
.gf__card b { color: #fff; font-family: var(--font-head); font-size: 1rem; font-weight: 700; margin-top: .35rem; }
.gf__card em { font-style: normal; font-size: .66rem; opacity: .7; }
.gf__amt { font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; color: #7cc8ff; margin: .35rem 0 .5rem; line-height: 1; }
.gf__code { font-size: .64rem; letter-spacing: .14em; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .13); border-radius: 7px; padding: .26rem .7rem; }
.gf__from { font-size: .64rem; color: var(--muted); text-align: center; }
.gf__bal { gap: .4rem; }
.gf__bhead { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); }
.gf__bhead b { font-family: var(--font-head); font-size: .8rem; letter-spacing: .06em; display: block; }
.gf__bhead em { font-style: normal; font-size: .64rem; color: var(--muted); }
.gf__bsaldo { text-align: right; }
.gf__bsaldo em { display: block; font-style: normal; font-size: .52rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.gf__bsaldo b { font-family: var(--font-head); font-size: 1.15rem; color: var(--green); }
.gf__mv { display: grid; grid-template-columns: 1fr auto 52px; gap: .5rem; align-items: center; font-size: .72rem; color: var(--muted); padding: .34rem 0; border-bottom: 1px dashed var(--line); }
.gf__mv:last-child { border-bottom: 0; }
.gf__mv span { display: flex; align-items: center; gap: .45rem; }
.gf__mv .i { color: var(--blue); }
.gf__mv u { text-decoration: none; font-family: var(--font-head); font-weight: 700; color: var(--ink); text-align: right; }
.gf__mv u.is-in { color: var(--green); }
.gf__mv em { font-style: normal; font-size: .6rem; text-align: right; }
.gf__left { display: flex; align-items: center; gap: .45rem; font-size: .71rem; color: var(--green); background: var(--green-50); border-radius: 9px; padding: .45rem .6rem; margin-top: .15rem; }
.gf__left .i, .gf__left b { color: var(--green); }

/* 33 · Pregúntale a tu CRM ------------------------------------------------*/
.ak__ans { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: var(--blue-50); border-radius: 12px 12px 12px 4px; padding: .5rem .6rem; }
.ak__ans .dm-tile { background: #fff; }
.ak__ans b { font-family: var(--font-head); font-size: .8rem; display: block; }
.ak__ans b span { color: var(--blue); }
.ak__ans em { font-style: normal; font-size: .62rem; color: var(--muted); }
.ak__list { display: grid; gap: .28rem; }
.ak__r { display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .32rem .5rem; }
.ak__r u { text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: .72rem; white-space: nowrap; }
.ak__r b { font-family: var(--font-head); font-size: .71rem; display: block; }
.ak__r em { font-style: normal; font-size: .6rem; color: var(--muted); }
.ak__more { font-size: .58rem; color: var(--muted); text-align: center; }
.ak__conf { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; background: var(--d-amber-50); border-radius: 10px; padding: .5rem .6rem; }
.ak__conf .dm-tile { background: #fff; }
.ak__conf b { font-family: var(--font-head); font-size: .74rem; display: block; }
.ak__conf em { font-style: normal; font-size: .61rem; color: var(--muted); }
.ak__btns { display: flex; gap: .3rem; align-items: center; }
.ak__btns u { text-decoration: none; font-size: .62rem; font-weight: 700; color: var(--muted); padding: .26rem .5rem; }
.ak__btns i { font-style: normal; font-size: .62rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 7px; padding: .26rem .6rem; }

/* 34 · Agentes IA ---------------------------------------------------------*/
.ag__card { display: grid; grid-template-columns: auto 1fr; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .65rem; }
.ag__card b { font-family: var(--font-head); font-size: .8rem; display: block; margin-bottom: .15rem; }
.ag__card em { font-style: italic; font-size: .68rem; color: var(--muted); line-height: 1.45; }

/* 35 · Fichas a medida ----------------------------------------------------*/
.ob__who { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: center; background: #fff; border: 1px solid var(--blue-100); border-radius: 10px; padding: .45rem .55rem; }
.ob__who b { font-family: var(--font-head); font-size: .78rem; display: block; }
.ob__who em { font-style: normal; font-size: .62rem; color: var(--muted); }
.ob__lbl { font-size: .55rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-left: 1rem; position: relative; }
.ob__lbl::before { content: ""; position: absolute; left: .4rem; top: -.35rem; bottom: .25rem; width: 2px; background: var(--line-2); }
.ob__v { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .34rem .5rem; margin-left: 1rem; position: relative; }
.ob__v::before { content: ""; position: absolute; left: -.6rem; top: 50%; width: .6rem; height: 2px; background: var(--line-2); }
.ob__v b { font-family: var(--font-head); font-size: .71rem; display: block; letter-spacing: .02em; }
.ob__v em { font-style: normal; font-size: .59rem; color: var(--muted); }
.ob__v--soon { border-color: var(--d-amber); }
.ob__v--soon em { color: var(--d-amber); font-weight: 600; }
.ob__fields { display: flex; flex-wrap: wrap; gap: .25rem; }
.ob__fields i { font-style: normal; font-size: .58rem; padding: .18rem .45rem; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); }

/* 36 · Tareas -------------------------------------------------------------*/
.tk2__g { display: flex; align-items: center; gap: .4rem; margin-top: .25rem; }
.tk2__g:first-of-type { margin-top: 0; }
.tk2__g .kb__av { width: 20px; height: 20px; font-size: .5rem; background: var(--bg-alt); color: var(--muted); }
.tk2__g b { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tk2__g em { font-style: normal; margin-left: auto; font-size: .56rem; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .04rem .35rem; }
.tk2__t { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: .34rem .5rem; margin-left: .9rem; }
.tk2__chk { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: .52rem; color: transparent; flex-shrink: 0; }
.tk2__t b { font-family: var(--font-head); font-size: .71rem; display: block; }
.tk2__t em { font-style: normal; font-size: .59rem; color: var(--muted); }
.tk2__t .kb__av { width: 21px; height: 21px; font-size: .52rem; }
.tk2__t--late { border-color: var(--d-pink); }
.tk2__t--late em { color: var(--d-pink); font-weight: 700; }
.tk2__t--done { opacity: .55; }
.tk2__t--done .tk2__chk { background: var(--green); border-color: var(--green); color: #fff; }
.tk2__t--done b { text-decoration: line-through; }

@media (max-width: 960px) {
  .showcase { grid-template-columns: 1fr; gap: 0; }
  .showcase__visual { position: sticky; top: calc(var(--header-h) + 6px); z-index: 3; padding-bottom: .75rem; }
  .showcase__visual::after { content: ""; position: absolute; left: -8px; right: -8px; top: -12px; bottom: 0; z-index: -1;
    background: var(--bg);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent); }
  .section--alt .showcase__visual::after { background: #fbfdff; }
  .showcase__steps { padding: 1.2rem 0 10vh; gap: 0; }
  .shstep { min-height: 36vh; }
  .demo { font-size: 12.5px; }
  .demo__screen { min-height: 0; }
}
@media (max-width: 560px) {
  .demo { font-size: 12px; }
  .st { grid-template-columns: 1fr; }
  .kb { gap: .4rem; --col: calc((100% - 1.3rem - .8rem) / 3); }
  .kb__deal { top: 2.5rem; left: .65rem; padding: .4rem .45rem; }
  .demo[data-active="2"] .kb__deal { transform: translateX(calc(100% + .4rem)); }
  .demo[data-active="3"] .kb__deal { transform: translateX(calc(200% + .8rem)); }
  .kb__col { min-height: 150px; padding: .4rem; } .kb__col b { font-size: .58rem; }
  .kb__who em { font-size: .65rem; } .kb__src { font-size: .58rem; }
  .ib, .st { grid-template-columns: 1fr; }
  .ib__thread { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: .55rem; }
  .ib__item em { max-width: none; }
  .ib__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; }
  .ib__item div { min-width: 0; }
  .ib__item em { display: none; }
  .st__side { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .st__side b { display: none; }
  .st__side i { font-size: .62rem; padding: .3rem .25rem; justify-content: center; }
  .da { gap: .7rem; }
  .da__kpis { gap: .4rem; }
  .da__kpi { padding-right: .35rem; } .da__kpi b { font-size: .95rem; white-space: nowrap; } .da__kpi em { font-size: .55rem; }
  .da__delta { display: block; margin: .05rem 0 0; }
  .da__row { grid-template-columns: 66px 1fr 50px; font-size: .66rem; }
  .da__chart, .da__attr { padding-top: .6rem; }
  .da__bars { height: 62px; }
  .da__row { grid-template-columns: 58px 1fr 48px; font-size: .64rem; }
  .fl__node, .fl__cond, .fl__head { width: 100%; }
  .fl__node, .fl__cond { padding: .4rem .5rem; }
  .fl__node b, .fl__cond b { font-size: .74rem; } .fl__node em { font-size: .64rem; }
  .fl__kind { font-size: .5rem; }
  .fl__ic { width: 22px; height: 22px; font-size: .68rem; }
  .fl__link { height: 11px; }
  .fl__head { padding: .35rem .55rem; margin-bottom: .4rem; }
  .fl__branch { width: 100%; height: 16px; }
  .fl__branch::before, .fl__branch i::before, .fl__branch i::after { height: 8px; }
  .fl__branch i { top: 8px; }
  .fl__split { width: 100%; gap: .35rem; }
  .fl__stats { gap: .9rem; margin-top: .5rem; padding-top: .45rem; }
  .fl__stats b { font-size: .88rem; } .fl__stats span { font-size: .56rem; }
  .st__page { padding: .4rem; gap: .35rem; }
  .st__hero { padding: .55rem .5rem; } .st__img { height: 40px; }
  .st__feats { gap: .3rem; } .st__feat i { width: 20px; height: 20px; }
  /* formularios: en móvil, una columna y sin cursor */
  .fb { grid-template-columns: 1fr; gap: .55rem; }
  .fb__cursor { display: none; }
  .fo__card { gap: .35rem; padding: .7rem; }
  .fo__card label span { font-size: .55rem; }
  .fo__in { height: 25px; padding: .22rem .45rem; }
  .fo__in em { font-size: .72rem; }
  .fo__send { padding: .42rem; font-size: .74rem; }
  .fb__consent { font-size: .56rem; }
  .fb__panel { padding: .55rem; gap: .25rem; }
  .fb__panel i { font-size: .62rem; padding: .25rem .4rem; }
  .fb__panel b { font-size: .55rem; }
  .fo__tl li { padding: .3rem .4rem; font-size: .66rem; }
  .fo__contact b { font-size: .76rem; } .fo__contact em { font-size: .6rem; }
  .fb__drag { left: auto; right: 6%; top: 34%; }
  .fb__qr { width: 38px; height: 38px; font-size: 1.2rem; }
  .fo__out { padding: .75rem; }
  .ib__quick { padding: .35rem .45rem; } .ib__quick span { font-size: .58rem; }
  /* webs: la tira de bloques sin iconos para que quepa */
  .st { gap: .5rem; }
  .st__side { grid-auto-columns: minmax(0, 1fr); padding: .4rem; }
  .st__side i .i { display: none; }
  .st__side i { font-size: .6rem; padding: .3rem .15rem; }
  .st__hero { padding: .7rem .6rem; } .st__hero b { font-size: .88rem; }
  .st__block { padding: .55rem; }
  /* voz */
  .vo { gap: .5rem; }
  .vo__call { padding: .5rem .55rem; } .vo__ring { width: 28px; height: 28px; }
  .vo__wave { height: 26px; }
  .vo__done { padding: .4rem .6rem; font-size: .72rem; }
  .vo__msg, .ib__msg { font-size: .72rem; max-width: 92%; }
  /* tanda 2: una sola columna en móvil */
  .bk, .re, .tk { grid-template-columns: 1fr; }
  .bk__side, .tk__side { min-height: 0; }
  .bk__cal, .re__seg, .tk__types, .bk__panel, .tk__panel { padding: .55rem; }
  .bk__col i { font-size: .6rem; padding: .26rem .1rem; }
  .cl__top { gap: .45rem; }
  .cl__av { width: 32px; height: 32px; font-size: .9rem; }
  .cl__id b { font-size: .76rem; }
  .cl__tl li { grid-template-columns: 24px 1fr; gap: .45rem; }
  .cl__ic { width: 24px; height: 24px; font-size: .58rem; }
  .cl__tl::before { left: 11px; }
  .rv__ai, .rv__card { padding: .5rem .55rem; }
  .qu__doc { padding: .55rem .6rem; }
  .qu__flow i { font-size: .55rem; padding: .3rem .2rem; gap: .25rem; }
  .qu__total b { font-size: 1rem; }
  .re__count b { font-size: 1.25rem; }
  .re { gap: .45rem; }
  .re__side { gap: .45rem; }
  .re__seg { gap: .3rem; padding: .45rem; }
  .re__fl { gap: .25rem; }
  .re__fl > i { padding: .24rem .4rem; }
  .re__fl .i { width: 21px; height: 21px; font-size: .58rem; border-radius: 6px; }
  .re__fl em { font-size: .64rem; }
  .re__count b { font-size: 1.1rem; }
  .re__msg { padding: .4rem .5rem; } .re__msg p { font-size: .67rem; line-height: 1.4; }
  .re__kpis span { padding: .22rem .15rem; } .re__kpis b { font-size: .85rem; }
  .re__money b { font-size: .95rem; }
  .tk__types > i em { font-size: .74rem; }
  /* tanda 3: una sola columna y cajas más compactas */
  .dm-2 { grid-template-columns: 1fr; gap: .5rem; }
  .dm-1 { gap: .45rem; }
  .dm-box { padding: .5rem; gap: .32rem; }
  .dm-row { padding: .32rem .45rem; font-size: .62rem; }
  .dm-row b { font-size: .67rem; } .dm-row em { font-size: .6rem; }
  .dm-tile { width: 24px; height: 24px; font-size: .62rem; }
  .dm-msg { font-size: .69rem; padding: .42rem .55rem; }
  .dm-kpis span { padding: .3rem .15rem; } .dm-kpis b { font-size: .88rem; }
  .dm-note { padding: .45rem .5rem; }
  .at__route { padding: .55rem .4rem; } .at__route::before { top: 1.1rem; }
  .at__p b { font-size: .55rem; } .at__p em { font-size: .5rem; }
  .at__modes { gap: .3rem; } .at__mode { padding: .4rem .45rem; } .at__mode b { font-size: .66rem; }
  .at__r { grid-template-columns: 66px 1fr auto; font-size: .6rem; }
  .rn__row { grid-template-columns: 42px repeat(5, 1fr); }
  .rn__row > i { height: 20px; } .rn__row > span { font-size: .55rem; }
  .in__flow { grid-template-columns: 1fr auto 1fr; }
  .in__flow .in__n:last-of-type { grid-column: 1 / -1; }
  .in__flow .in__ar:last-of-type { display: none; }
  .em__mail { box-shadow: none; } .em__body { padding: .55rem .6rem; gap: .3rem; }
  .ad__creative .dm-ph { width: 50px; height: 48px; }
  .att__big b { font-size: 1.4rem; }
  .ms__m { padding: .26rem .42rem; font-size: .62rem; }
  .ms__prog { padding: .5rem; gap: .3rem; }
  .att__p { padding: .28rem .42rem; }
  .att__av { width: 22px; height: 22px; font-size: .52rem; }
  .att__p b { font-size: .68rem; } .att__p em { font-size: .56rem; }
  .att__live { padding: .5rem; gap: .3rem; }
  .in__app { padding: .35rem .15rem; font-size: .85rem; }
  .in__n { padding: .4rem .3rem; } .in__n b { font-size: .62rem; }
  .in__grid { gap: .28rem; }
  .wa__tpl { padding: .5rem .55rem; } .wa__tpl p { font-size: .69rem; }
  .ap { max-width: 100%; }
  /* tanda 4 */
  .su__prod, .sg__who, .ak__r, .ob__v, .tk2__t { padding: .3rem .45rem; }
  .su__price { font-size: .9rem; }
  .su__m { font-size: .55rem; padding: .26rem .05rem; }
  .so__img { height: 68px; }
  .cu__pc { font-size: 1.4rem; } .cu__card { padding: .7rem .6rem; }
  .gf, .gf__wrap { min-height: 0; }
  .gf__amt { font-size: 1.7rem; } .gf__card { padding: 1rem 1.4rem; min-width: 0; }
  .gf { align-content: start; }
  .gf__form { gap: .42rem; }
  .dm-win__body { padding: .6rem .65rem; gap: .4rem; }
  .dm-f > i { min-height: 26px; font-size: .68rem; }
  .dm-seg i { font-size: .64rem; padding: .3rem .2rem; }
  .gf__pay { padding: .4rem; font-size: .7rem; }
  .gf__mv { grid-template-columns: 1fr auto 44px; font-size: .66rem; }
  .ak__conf { grid-template-columns: auto 1fr; }
  .ak__btns { grid-column: 1 / -1; justify-content: flex-end; }
  .ag__card em { font-size: .64rem; }
  .ob__v, .ob__lbl { margin-left: .7rem; }
  .tk2__t { padding: .26rem .4rem; margin-left: .7rem; }
  .tk2__t b { font-size: .66rem; } .tk2__t em { font-size: .54rem; }
  .tk2__g { margin-top: .15rem; } .tk2__g b { font-size: .54rem; }
  .ak__r { padding: .28rem .45rem; } .ak__r u { font-size: .66rem; }
  .ak__ans { padding: .45rem .5rem; } .ak__ans b { font-size: .74rem; }
  .ob__fields i { font-size: .54rem; }
  .shstep { min-height: 33vh; }
  .shstep__in { padding: .9rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vo__ring, .vo__wave i, .fo__send { animation: none; }
  .qu__sign path { animation: none; stroke-dashoffset: 0; }
  .dm-bar i { transition: none; }
  .js .demo [data-at] { transition: none; }
}

/* =========================================================================
   Soluciones · Conversaciones con IA
   solv = cabecera de la llamada en directo · solm = titular que cambia + muro
   solb = todos los canales llegando a una bandeja · solvs = antes y después
   ========================================================================= */
.ch-wa { color: #25d366; } .ch-ig { color: #e1306c; } .ch-ms { color: #0084ff; } .ch-em { color: #1e60e8; }
.ch-ph { color: #17914a; } .ch-web { color: #00a6d6; } .ch-sms { color: #6c5ce7; } .ch-gg { color: #4285f4; }

/* Cabecera: llamada en directo */
.solv { position: relative; overflow: hidden; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); text-align: center; }
.solv::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 50% at 50% 75%, rgba(0, 166, 214, .13), transparent 70%); }
.solv .breadcrumb ol { justify-content: center; }
.solv h1 { font-family: var(--font-body); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; color: var(--muted); letter-spacing: 0; margin-top: .9rem; }
.solv__big { font-family: var(--font-head); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(2.3rem, 6vw, 4.6rem); color: var(--ink); margin: .4rem auto 0; max-width: 15ch; }
.solv .hero__lead { margin-inline: auto; }
.solv .hero__actions { justify-content: center; }
.solv__stage { margin: 3rem auto 0; max-width: 720px; display: grid; justify-items: center; gap: 1.2rem; }
.solv__call { display: inline-flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .45rem 1rem .45rem .45rem; font-size: .85rem; box-shadow: var(--shadow); }
.solv__call > .i { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; animation: solv-ring 1.4s infinite; }
.solv__call { white-space: nowrap; }
.solv__call time { font-variant-numeric: tabular-nums; color: var(--muted); }
.solv__sec { color: var(--muted); }
@keyframes solv-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(23, 145, 74, .45); } 70% { box-shadow: 0 0 0 12px rgba(23, 145, 74, 0); } }
.solv__wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 110px; width: 100%; }
.solv__wave > i { width: 6px; border-radius: 6px; background: var(--grad); height: 12%; transition: height .12s ease; }
.solv__sub { min-height: 6.4em; display: grid; justify-items: center; width: 100%; }
.solv__line { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 2.6vw, 1.55rem); line-height: 1.3; color: var(--ink); max-width: 30ch; animation: dm-only-in .45s both; }
.solv__line small { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .2rem; }
.solv__line--ai { color: var(--blue); }
.solv__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; min-height: 2.2rem; }
.solv__chip { display: inline-flex; align-items: center; gap: .4rem; background: #e8f6ee; color: var(--green); font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .4rem .85rem; animation: dm-only-in .45s both; }
.solv__chip--b { background: var(--blue-50); color: var(--blue); }
@media (max-width: 560px) { .solv__wave { height: 80px; gap: 3px; } .solv__wave > i { width: 4px; } .solv__sec { display: none; } }

/* Titular con el canal que cambia + muro de conversaciones */
.solm { overflow: hidden; text-align: center; }
.solm .section-head { margin-bottom: 0; max-width: 860px; }
.solm__big { font-family: var(--font-head); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(2.1rem, 5.6vw, 4.2rem); color: var(--ink); margin-top: .6rem; }
.solm__big > span:first-child { display: block; }
.solm__big .rhero__rot { display: grid; justify-content: center; }
.solm__wall { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.solm__row { display: flex; gap: 12px; width: max-content; animation: rhero-slide 50s linear infinite; }
.solm__p { display: inline-flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .5rem .55rem .5rem .8rem; font-size: .9rem; white-space: nowrap; box-shadow: 0 10px 24px -18px rgba(11, 27, 58, .45); }
.solm__p > .i { font-size: 1.1rem; }
.solm__p > .solm__ar { font-size: .8rem; color: var(--line-2); }
.solm__ok { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--green); background: #e8f6ee; border-radius: 999px; padding: .3rem .7rem; }
@media (max-width: 560px) { .solm__p { font-size: .82rem; } }

/* Todos los canales, una bandeja */
.solb__big { font-family: var(--font-head); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(2rem, 5vw, 3.6rem); }
.solb__big span { color: var(--blue); }
.solb__stage { margin: 0 auto; max-width: 980px; display: grid; grid-template-columns: 1fr minmax(280px, 340px) 1fr; align-items: center; }
.solb__side { display: grid; gap: 1.1rem; }
.solb__ch { display: grid; grid-template-columns: 52px 1fr; align-items: center; }
.solb__side--r .solb__ch { grid-template-columns: 1fr 52px; }
.solb__side--r .solb__ic { order: 2; }
.solb__ic { width: 52px; height: 52px; border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.4rem; box-shadow: var(--shadow); }
.solb__ln { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px); }
.solb__ln::after { content: ""; position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(30, 96, 232, .12); animation: solb-go 2.6s cubic-bezier(.5, 0, .5, 1) infinite; animation-delay: var(--d, 0s); opacity: 0; }
.solb__side--r .solb__ln::after { animation-name: solb-back; }
@keyframes solb-go { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes solb-back { 0% { left: calc(100% - 10px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.solb__box { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: .9rem; text-align: left; box-shadow: var(--shadow-lg); position: relative; z-index: 1; }
.solb__top { display: flex; align-items: center; justify-content: space-between; padding: .1rem .2rem .7rem; border-bottom: 1px solid var(--line); }
.solb__top > b { font-family: var(--font-head); font-size: .95rem; }
.solb__cnt { display: grid; justify-items: end; }
.solb__cnt b { font-size: 1.5rem; color: var(--green); line-height: 1; }
.solb__cnt em { font-style: normal; font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.solb__list { display: grid; gap: .1rem; margin-top: .5rem; height: 232px; overflow: hidden; align-content: start; }
.solb__it { display: grid; grid-template-columns: 30px 1fr auto; gap: .55rem; align-items: center; padding: .5rem .3rem; border-bottom: 1px dashed var(--line); font-size: .78rem; animation: solb-in .5s both; }
.solb__it > .i { width: 30px; height: 30px; border-radius: 10px; background: var(--bg-alt); display: grid; place-items: center; font-size: .95rem; }
.solb__it b { display: block; font-size: .8rem; }
.solb__it .dm-txt { color: var(--muted); font-size: .72rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solb__st { font-size: .64rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; background: #e8f6ee; color: var(--green); white-space: nowrap; }
.solb__st--h { background: #fff4e0; color: #a86500; }
@keyframes solb-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.solb__pts { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (max-width: 760px) {
  .solb__stage { grid-template-columns: 1fr; gap: 1.2rem; }
  .solb__side { grid-template-columns: repeat(4, 52px); justify-content: center; gap: .7rem; }
  /* En móvil los canales quedan arriba y abajo de la bandeja, unidos con líneas verticales */
  .solb__stage { gap: 0; }
  .solb__ch, .solb__side--r .solb__ch { display: flex; flex-direction: column; align-items: center; }
  .solb__ln { width: 2px; height: 30px; background: repeating-linear-gradient(180deg, var(--line-2) 0 5px, transparent 5px 10px); }
  .solb__ln::after { top: 0; left: 50%; margin: 0 0 0 -5px; animation-name: solb-down; }
  .solb__side--r .solb__ln::after { animation-name: solb-up; }
  .solb__side--r { order: 3; }
}
@keyframes solb-down { 0% { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
@keyframes solb-up { 0% { top: calc(100% - 10px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 0; opacity: 0; } }

/* Antes y después */
.solvs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; max-width: 980px; margin: 0 auto; }
.solvs h3 { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; margin-bottom: 1rem; }
.solvs__no h3 > .i { color: var(--red); }
.solvs__yes { background: linear-gradient(165deg, #fff, var(--blue-50)); border-color: var(--blue-100); }
.solvs__yes h3 > .i { color: var(--blue); }
@media (max-width: 760px) { .solvs { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .solv__call > .i, .solm__row, .solb__ic, .solb__it { animation: none; }
  .solb__ln::after { animation: none; opacity: 0; }
}

/* =========================================================================
   Soluciones · Captación y anuncios
   cz = escena guiada por el scroll: se crea el anuncio, se publica, alguien lo
   pulsa, rellena el formulario, entra en el CRM y recibe el WhatsApp
   ========================================================================= */
.cz { position: relative; height: 560vh; background: #060d22; }
.cz__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden; color: #fff; }
.cz .cine__lab { margin: 0; font-family: var(--font-body); }
.cz b { color: var(--ink); }
.cz__end { position: absolute; left: 50%; bottom: 6%; transform: translate(-50%, 20px); z-index: 9; opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; display: grid; justify-items: center; gap: .9rem; text-align: center; width: max-content; max-width: calc(100% - 32px); }
.cz__end.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.cz__end .btn { box-shadow: 0 16px 40px -10px rgba(0, 184, 230, .7); }
.cz__clock { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1; letter-spacing: -.04em; background: linear-gradient(90deg, #00d0ff, #3ddc84); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cz__clock small { display: block; font-family: var(--font-body); font-size: .85rem; letter-spacing: 0; -webkit-text-fill-color: rgba(255, 255, 255, .7); font-weight: 600; margin-top: .4rem; }

/* 1 · El anuncio se monta arrastrando la foto, el texto y el botón */
.cz__ib { display: block; position: relative; }
.cz__hl { border-radius: 6px; }
.cz__stage > .cz__card .cz__img, .cz__stage > .cz__card .cz__hl, .cz__stage > .cz__card .cz__btn { transition: color .2s, background-color .2s, opacity .2s; }
.cz__stage > .cz__card .cz__ib:not(.is-in) .cz__img { opacity: 0; }
.cz__stage > .cz__card .cz__ib:not(.is-in)::after { content: ""; position: absolute; inset: 10px; border: 2px dashed var(--line-2); border-radius: 10px; }
.cz__stage > .cz__card .cz__hl:not(.is-in), .cz__stage > .cz__card .cz__btn:not(.is-in) { color: transparent; background: transparent; outline: 2px dashed var(--line-2); outline-offset: -2px; }
.cz__pc { position: absolute; left: 0; top: 0; z-index: 8; white-space: nowrap; box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .8); will-change: transform, opacity; }
.cz__pc--img { width: 150px; height: 150px; border-radius: 14px; }
.cz__pc--img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cz__pc--hl { background: #fff; color: var(--ink); font-weight: 700; font-size: .95rem; padding: .6rem .9rem; border-radius: 10px; }
.cz__pc--btn { background: var(--blue); color: #fff; font-weight: 700; font-size: .95rem; padding: .55rem 1.1rem; border-radius: 10px; }
.cz__cur { position: absolute; right: -12px; bottom: -20px; font-size: 1.35rem; color: #fff; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }
.cz__go { position: absolute; left: 0; top: 0; z-index: 8; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; background: var(--blue); color: #fff; font-weight: 700; font-size: .92rem; border-radius: 999px; padding: .7rem 1.3rem; box-shadow: 0 16px 40px -10px rgba(0, 184, 230, .7); opacity: 0; transition: background .3s; will-change: transform, opacity; }
.cz__go.is-on { background: var(--green); box-shadow: 0 16px 40px -10px rgba(61, 220, 132, .6); }

/* Tarjeta del anuncio (vista previa que luego vuela al móvil) */
.cz__card { position: absolute; left: 0; top: 0; width: 220px; background: #fff; color: var(--ink); border-radius: 14px; overflow: hidden; z-index: 6; border: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgba(11, 27, 58, .5); will-change: transform, opacity; }
.cz__ah { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; font-size: .7rem; height: 42px; }
.cz__ava { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); padding: 2px; flex-shrink: 0; }
.cz__ava i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff url(../img/demos/curso-online.webp) center / cover; border: 2px solid #fff; }
.cz__ah em { display: block; font-style: normal; color: var(--muted); font-size: .6rem; }
.cz__ah b, .cz__cta b { font-size: .72rem; }
.cz__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cz__cta { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .5rem .6rem; background: #f1f5ff; font-size: .7rem; font-weight: 700; color: var(--blue); min-height: 42px; }
.cz__cta > span:first-child { min-width: 0; }
.cz__btn { background: var(--blue); color: #fff; border-radius: 7px; padding: .3rem .6rem; white-space: nowrap; }

/* 2 · El móvil */
.cz__phone { position: absolute; left: 50%; top: 56%; width: 250px; height: 500px; margin: -250px 0 0 -125px; border-radius: 38px; background: #0b1530; border: 7px solid #1c2a4d; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9); z-index: 4; overflow: hidden; opacity: 0; will-change: transform, opacity; }
.cz__scr { position: absolute; inset: 0; background: #fff; color: var(--ink); }
.cz__scr .cz__card { position: static; width: auto; border: 0; border-radius: 0; box-shadow: none; }
.cz__bar { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: .55rem .9rem .3rem; font-size: .62rem; font-weight: 700; background: #fff; }
.cz__acts { display: flex; gap: .8rem; padding: .55rem .7rem .2rem; font-size: 1rem; }
.cz__txt { padding: 0 .7rem; font-size: .7rem; line-height: 1.4; }
.cz__tap { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 6px rgba(0, 208, 255, .35); z-index: 7; opacity: 0; pointer-events: none; }

/* 3 · Formulario: entra deslizándose dentro del móvil, sobre el anuncio */
.cz__form { position: absolute; inset: 0; z-index: 2; background: #fff; color: var(--ink); padding: 2.4rem 1rem 1rem; display: grid; align-content: start; gap: .7rem; transform: translateX(100%); will-change: transform; }
.cz__ft { font-family: var(--font-head); font-weight: 800; font-size: 1rem; line-height: 1.2; margin-bottom: .2rem; }
.cz__ft small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .7rem; color: var(--muted); margin-top: .15rem; }
.cz__fl { display: grid; gap: .25rem; font-size: .66rem; font-weight: 700; color: var(--muted); }
.cz__in { display: block; min-height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: .45rem .6rem; font-size: .8rem; font-weight: 500; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.cz__in.is-on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30, 96, 232, .15); }
.cz__seg { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.cz__seg > i { font-style: normal; text-align: center; font-size: .76rem; font-weight: 600; padding: .45rem .3rem; border-radius: 9px; border: 1px solid var(--line); color: var(--ink-2); transition: background .2s, color .2s, border-color .2s; }
.cz__seg > i.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cz__send { margin-top: .3rem; background: var(--blue); color: #fff; text-align: center; border-radius: 10px; padding: .6rem; font-weight: 700; font-size: .85rem; transition: transform .15s, background .2s; }
.cz__send.is-on { transform: scale(.95); background: var(--green); }

/* 4 · CRM */
.cz__crm { position: absolute; left: 50%; top: 57%; width: min(700px, calc(100% - 32px)); transform: translate(-50%, -50%); z-index: 2; opacity: 0; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .9); border: 0; }
.cz__kb { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: .9rem; background: var(--bg); }
.cz__col { display: grid; gap: .5rem; align-content: start; }
.cz__ch { display: flex; align-items: center; justify-content: space-between; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cz__ch u { text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0 .45rem; font-size: .66rem; }
.cz__k { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .55rem .6rem; font-size: .72rem; display: grid; gap: .25rem; }
.cz__k b { font-size: .8rem; }
.cz__k em { font-style: normal; color: var(--muted); display: flex; align-items: center; gap: .3rem; font-size: .66rem; }
.cz__new { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30, 96, 232, .18); opacity: 0; position: relative; }
.cz__new::before { content: "Nuevo"; position: absolute; top: -8px; right: 8px; background: var(--green); color: #fff; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: .1rem .45rem; }
.cz__chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.cz__chips span { background: var(--blue-50); color: var(--blue); border-radius: 6px; padding: .1rem .35rem; font-size: .6rem; font-weight: 700; }
@media (max-width: 640px) { .cz__kb { grid-template-columns: 1fr 1fr; } .cz__col:nth-child(3) { display: none; } }

/* 5 · WhatsApp */
.cz__wa { position: absolute; left: 0; top: 0; z-index: 7; width: 290px; background: #e7fbe9; color: var(--ink); border-radius: 18px 18px 18px 5px; padding: .75rem .9rem; font-size: .9rem; line-height: 1.4; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); opacity: 0; will-change: transform, opacity; }
.cz__wah { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 800; margin-bottom: .3rem; }
.cz__wah .i { color: #25d366; font-size: 1.1rem; }
.cz__wa small { display: block; text-align: right; font-size: .62rem; color: var(--muted); margin-top: .2rem; }

/* Sin JS no hay escena */
html:not(.js) .cz { display: none; }
@media (prefers-reduced-motion: reduce) { .cz__end { transition: none; } }

/* Coste por cliente en el panel */
.czm__t { width: 100%; border-collapse: collapse; font-size: .85rem; }
.czm__t th { text-align: left; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.czm__t td { padding: .6rem .5rem; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.czm__t td:first-child { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
.czm__t tr:last-child td { border-bottom: 0; }
.czm__t th:not(:first-child), .czm__t td:not(:first-child) { text-align: right; }
.czm__best td:last-child b { color: var(--green); }
.czm__best td:first-child::after { content: "Mejor"; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--green); border-radius: 999px; padding: .1rem .45rem; }
@media (max-width: 560px) {
  .czm__t { font-size: .78rem; }
  .czm__t th:nth-child(3), .czm__t td:nth-child(3) { display: none; }
  .czm__t th, .czm__t td { padding-left: .3rem; padding-right: .3rem; }
  .czm__t th { letter-spacing: .04em; }
  .czm__t td:first-child { flex-wrap: wrap; row-gap: .2rem; }
}

/* =========================================================================
   Soluciones · Atribución de campañas
   scn = escena oscura guiada por el scroll (base común)
   rw  = «Rebobina la venta»: del pago hacia atrás hasta el primer clic
   ========================================================================= */
.scn { position: relative; background: #060d22; }
.scn--rw { height: 480vh; }
.scn__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); overflow: hidden; color: #fff; }
.scn__cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.scn .cine__lab { margin: 0; font-family: var(--font-body); }
.scn b { color: #fff; }
.scn__end { position: absolute; left: 50%; bottom: 6%; transform: translate(-50%, 20px); z-index: 9; opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; display: grid; justify-items: center; gap: .9rem; text-align: center; width: max-content; max-width: calc(100% - 32px); }
.scn__end.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.scn__end .btn { box-shadow: 0 16px 40px -10px rgba(0, 184, 230, .7); }
.scn__big { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -.04em; background: linear-gradient(90deg, #3ddc84, #00d0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scn__big small { display: block; font-family: var(--font-body); font-size: .9rem; letter-spacing: 0; -webkit-text-fill-color: rgba(255, 255, 255, .72); font-weight: 600; margin-top: .5rem; }
html:not(.js) .scn { display: none; }

/* Rebobina la venta */
.rw__clock { position: absolute; left: 50%; top: calc(20px + 2.4rem + clamp(3.4rem, 9vw, 5.2rem)); transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 700; color: #9cc4ff; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: .35rem .9rem; opacity: 0; transition: opacity .4s; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw__clock.is-on { opacity: 1; }
.rw__track { position: absolute; left: 0; top: 0; z-index: 3; will-change: transform; }
.rw__line { position: absolute; left: 0; top: 0; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, #00d0ff, #3ddc84); box-shadow: 0 0 18px rgba(0, 208, 255, .7), 0 0 40px rgba(0, 208, 255, .35); }
.rw--v .rw__line { width: 4px; margin: 0 0 0 -2px; background: linear-gradient(0deg, #00d0ff, #3ddc84); }
.rw__n { position: absolute; left: 0; top: 0; width: 200px; display: grid; grid-template-columns: 46px 1fr; gap: .7rem; align-items: center; background: rgba(13, 26, 58, .92); border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; padding: .75rem .85rem; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); will-change: opacity, transform; }
.rw__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; background: rgba(255, 255, 255, .08); }
.rw__n b { display: block; font-size: .95rem; line-height: 1.25; }
.rw__n em { display: block; font-style: normal; font-size: .74rem; color: #9cc4ff; margin-top: .15rem; }
.rw__n time { display: block; font-size: .68rem; color: rgba(255, 255, 255, .5); margin-top: .2rem; }
.rw__sale { border-color: #3ddc84; box-shadow: 0 0 0 1px #3ddc84, 0 0 50px rgba(61, 220, 132, .35); }
.rw__sale .rw__ic { background: #3ddc84; color: #06301a; }
.rw__sale b { font-family: var(--font-head); font-size: 1.5rem; }
.rw__tag { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #06301a; background: #3ddc84; border-radius: 999px; padding: .25rem .6rem; opacity: 0; transition: opacity .4s; }
.rw__tag.is-on { opacity: 1; }
.rw-meta { color: #4f8bff; } .rw-wa { color: #25d366; } .rw-ph { color: #3ddc84; } .rw-cal { color: #00d0ff; }

/* Llamadas y WhatsApps con origen: cada contacto recibe su campaña y se suma a sus ventas (en bucle) */
.cxw { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; align-content: start; }
.cxw__lbl { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .1rem; }
.cxw__r { display: flex; align-items: center; gap: .65rem; border: 1px solid var(--line); border-radius: 14px; padding: .5rem .65rem; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.cxw__r.is-on { opacity: 1; transform: none; }
.cxw__r .dm-txt { display: grid; min-width: 0; line-height: 1.3; }
.cxw__r b { font-size: .84rem; }
.cxw__r em { font-style: normal; font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxw__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; flex-shrink: 0; }
.cxw__ph { background: #e8f6ee; color: var(--green); }
.cxw__wa { background: #e7fbe9; color: #25d366; }
.cxw__src { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 800; white-space: nowrap; border-radius: 999px; padding: .25rem .6rem; color: var(--muted); border: 1.5px dashed var(--line-2); transition: color .3s, border-color .3s, transform .2s; }
.cxw__src.is-on { color: var(--ink); border: 1.5px solid var(--c); transform: scale(1.06); }
.cxw__src.is-on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cxw__sum { display: grid; gap: .4rem; margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
.cxw__sum.is-on { opacity: 1; }
.cxw__bar { display: grid; grid-template-columns: 78px 1fr auto; gap: .55rem; align-items: center; font-size: .74rem; }
.cxw__bar span { font-weight: 700; white-space: nowrap; }
.cxw__bar i { display: block; height: 10px; width: 0; border-radius: 6px; background: var(--c); transition: width .7s ease; }
.cxw__bar b { font-family: var(--font-head); font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right; }
@media (prefers-reduced-motion: reduce) { .cxw__r, .cxw__src, .cxw__sum, .cxw__bar i { transition: none; } }

/* =========================================================================
   Soluciones · Redes sociales y reputación
   La cabecera reutiliza .rhero (planificador).
   ========================================================================= */
.rh2 .rhero__big { max-width: none; }
.rh2 .rhero__big > span:first-child { display: block; }
.rh2 .rhero__big .rhero__rot { display: grid; justify-content: center; }

/* Respuesta a una reseña: la IA propone el borrador, la persona lo retoca y lo publica */
.rvw { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; box-shadow: var(--shadow-lg); display: grid; gap: .8rem; align-content: start; }
.rvw__rev { border: 1px solid var(--line); border-radius: 16px; padding: .8rem .9rem; display: grid; gap: .45rem; }
.rvw__rev p { margin: 0; font-size: .9rem; line-height: 1.45; }
.rvw__hd { display: flex; align-items: center; gap: .6rem; font-size: .84rem; }
.rvw__hd > span:nth-child(2) { display: grid; flex: 1; line-height: 1.25; }
.rvw__hd > .i { font-size: 1.1rem; }
.rvw__av { width: 32px; height: 32px; border-radius: 50%; background: #7a1f3d; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.rvw__stars { color: #f5a524; letter-spacing: 1px; font-size: .82rem; }
.rvw__ask { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--blue); background: var(--blue-50); border: 1.5px solid var(--blue); border-radius: 999px; padding: .35rem .8rem; transition: transform .15s, background .2s, color .2s; }
.rvw__ask.is-on { background: var(--blue); color: #fff; transform: scale(.95); }
.rvw__draft { border: 1.5px dashed var(--blue); border-radius: 14px; padding: .7rem .85rem; display: grid; gap: .35rem; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s, border-color .4s; }
.rvw__draft.is-on { opacity: 1; transform: none; }
.rvw__draft small { display: flex; align-items: center; gap: .3rem; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.rvw__draft p { margin: 0; font-size: .88rem; line-height: 1.45; min-height: 4.4em; }
.rvw__me { background: #fff3cc; border-radius: 4px; }
.rvw__me:empty { background: none; }
.rvw__ai.is-on::after, .rvw__me.is-on::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--blue); margin-left: 2px; vertical-align: -.15em; animation: cine-caret 1s steps(1) infinite; }
.rvw__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-height: 2.2rem; }
.rvw__pub { font-size: .82rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 10px; padding: .45rem .9rem; opacity: .35; transition: opacity .3s, transform .15s; }
.rvw__pub.is-on { opacity: 1; }
.rvw__pub.is-hit { transform: scale(.95); }
.rvw__ok { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: .3rem; opacity: 0; transition: opacity .4s; }
.rvw__ok.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rvw__draft, .rvw__ask, .rvw__pub { transition: none; } }

/* Comentario en Instagram con la palabra clave: respuesta variada y mensaje directo (flujo en bucle, sin caja) */
.igf { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4.2rem; padding: .5rem 0; }
.igf__row { position: relative; z-index: 2; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.6rem; align-items: center; }
.igf__n { position: relative; display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: .95rem .9rem; box-shadow: var(--shadow-lg); transition: box-shadow .3s, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.igf__n.is-hot { box-shadow: 0 0 0 3px rgba(30, 96, 232, .25), var(--shadow-lg); transform: scale(1.03); }
.igf__n > .i { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; background: var(--blue-50); color: var(--blue); }
.igf__n--ig > .i { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); color: #fff; font-size: 1.2rem; }
.igf__n--dm > .i { background: #f3e8ff; color: #7c3aed; }
.igf__n .dm-txt { min-width: 0; display: grid; }
.igf__n b { font-size: .9rem; line-height: 1.25; }
.igf__n em { font-style: normal; font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.igf__cnt { position: absolute; right: -10px; top: -10px; min-width: 32px; height: 24px; padding: 0 .45rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; font-variant-numeric: tabular-nums; transition: transform .2s; }
.igf__cnt.is-bump { transform: scale(1.2); }
/* Lo que pasa en Instagram, junto a cada paso */
.igf__b { justify-self: start; max-width: 290px; font-size: .82rem; line-height: 1.4; opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .35s; }
.igf__b.is-on { opacity: 1; transform: none; }
.igf__cm, .igf__rp { display: flex; align-items: flex-start; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .55rem .7rem; box-shadow: var(--shadow); }
.igf__rp { margin-left: 1.2rem; }
.igf__cm em { display: block; font-style: normal; font-size: .64rem; color: var(--muted); margin-top: .15rem; }
.igf__cm mark { background: #fff3cc; color: var(--ink); font-weight: 700; border-radius: 4px; padding: 0 .2rem; }
.igf__av { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #ff6f61, #e1306c); }
.igf__av--me { background: var(--ink); font-size: .7rem; }
.igf__dots { display: flex; gap: 3px; margin-top: .35rem; }
.igf__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background .3s, width .3s; }
.igf__dots i.is-on { width: 14px; border-radius: 3px; background: var(--blue); }
.igf__dm { display: grid; gap: .35rem; background: #f3e8ff; border-radius: 16px 16px 16px 5px; padding: .6rem .75rem; }
.igf__dmh { display: flex; align-items: center; gap: .35rem; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #7c3aed; }
.igf__btn { justify-self: start; font-size: .72rem; font-weight: 700; color: #fff; background: #7c3aed; border-radius: 8px; padding: .3rem .7rem; }
/* La línea entre pasos y la persona que viaja por ella */
.igf__rail { position: absolute; z-index: 1; left: 0; width: 3px; margin-left: -1px; border-radius: 3px; background: repeating-linear-gradient(var(--line-2) 0 5px, transparent 5px 11px); }
.igf__rail i { position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 3px; background: var(--blue); }
.igf__tk { position: absolute; z-index: 3; left: 0; top: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, #ff6f61, #e1306c); color: #fff; display: grid; place-items: center; font-size: .66rem; font-weight: 800; box-shadow: 0 0 0 4px rgba(225, 48, 108, .18), 0 8px 20px -6px rgba(225, 48, 108, .7); opacity: 0; transition: opacity .2s; }
.igf__tk.is-on { opacity: 1; }
@media (max-width: 560px) {
  .igf { gap: 2.2rem; }
  .igf__n { padding: .6rem .75rem; border-radius: 16px; }
  .igf__n > .i { width: 38px; height: 38px; }
  .igf__n b { font-size: .84rem; }
  .igf__b { font-size: .76rem; }
  .igf__cm, .igf__rp { padding: .45rem .6rem; }
  .igf__dm { padding: .5rem .65rem; gap: .25rem; }
  .igf__row { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .igf__rp { margin-left: 0; }
  .igf__b { justify-self: center; margin-left: 0; max-width: 100%; transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .igf__n, .igf__b, .igf__tk, .igf__cnt, .igf__dots i { transition: none; } }

/* Agente IA que redacta la publicación y genera la imagen */
.aiw { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; box-shadow: var(--shadow-lg); display: grid; gap: .8rem; align-content: start; }
.aiw__prompt { display: flex; align-items: center; gap: .6rem; border: 1.5px solid var(--blue); border-radius: 14px; padding: .7rem .85rem; font-size: .92rem; min-height: 3.1em; background: var(--blue-50); }
.aiw__prompt > .i { color: var(--blue); font-size: 1.05rem; }
.aiw__q.is-on::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--blue); margin-left: 2px; vertical-align: -.15em; animation: cine-caret 1s steps(1) infinite; }
.aiw__gen { display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--muted); opacity: 0; transition: opacity .3s; }
.aiw__gen.is-on { opacity: 1; }
.aiw__gen span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: pb-dot 1s infinite; }
.aiw__gen span:nth-child(2) { animation-delay: .15s; } .aiw__gen span:nth-child(3) { animation-delay: .3s; margin-right: .3rem; }
@keyframes pb-dot { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.aiw__post { display: grid; grid-template-columns: 150px 1fr; gap: .9rem; border: 1px solid var(--line); border-radius: 16px; padding: .7rem; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.aiw__post.is-on { opacity: 1; transform: none; }
.aiw__img { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; background: var(--bg-alt); }
.aiw__img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: blur(14px) saturate(.4); transform: scale(1.15); opacity: .35; transition: filter 1.6s ease, transform 1.6s ease, opacity 1.2s ease; }
.aiw__img.is-on img { filter: none; transform: none; opacity: 1; }
.aiw__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); background-size: 250% 100%; animation: aiw-shine 1.2s linear infinite; transition: opacity .6s; }
.aiw__img.is-on::after { opacity: 0; }
@keyframes aiw-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.aiw__body { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.aiw__hd { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }
.aiw__av { width: 28px; height: 28px; border-radius: 50%; background: #7a1f3d; color: #fff; display: grid; place-items: center; font-size: .8rem; }
.aiw__txt { margin: 0; font-size: .84rem; line-height: 1.45; min-height: 6.2em; }
.aiw__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.aiw__tags span { font-size: .72rem; font-weight: 700; color: var(--blue); background: var(--blue-50); border-radius: 6px; padding: .1rem .4rem; opacity: 0; transition: opacity .3s; }
.aiw__tags.is-on span { opacity: 1; }
.aiw__tags.is-on span:nth-child(2) { transition-delay: .15s; } .aiw__tags.is-on span:nth-child(3) { transition-delay: .3s; }
.aiw__nets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; opacity: 0; transition: opacity .4s; }
.aiw__nets.is-on { opacity: 1; }
.aiw__nets span { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .65rem; }
.aiw__nets em { margin-left: auto; font-style: normal; font-size: .76rem; font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: .3rem; }
@media (max-width: 560px) { .aiw__post { grid-template-columns: 1fr; } .aiw__img { aspect-ratio: 16 / 10; } .aiw__nets em { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .aiw__img img, .aiw__post { transition: none; } .aiw__img::after, .aiw__gen span { animation: none; } }
.rh2--solo { padding-bottom: clamp(3rem, 6vw, 4.5rem); }

/* =========================================================================
   Soluciones · Clientes y ventas
   vt = «La venta que avanza» (cabecera, fondo claro): la oportunidad cruza el
        embudo, cada etapa hace algo sola y el presupuesto se firma en pantalla
   ========================================================================= */
.scn--vt { height: 500vh; }
/* Variante clara de la escena, para usarla como cabecera */
.scn--light { background: var(--bg); }
.scn--light .scn__stage { color: var(--ink); }
.scn--light .scn__stage b { color: var(--ink); }
.scn__lg { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 420px at 18% 22%, rgba(0, 184, 230, .12), transparent 70%),
    radial-gradient(700px 500px at 85% 80%, rgba(30, 96, 232, .12), transparent 70%),
    linear-gradient(rgba(11, 27, 58, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(11, 27, 58, .045) 1px, transparent 1px) 0 0 / 48px 48px; }
.scn__lg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, var(--bg) 88%); }
.scn--light .cine__lab { background: var(--blue-50); color: var(--blue-700); }
.scn--light .cine__cap { color: var(--ink); }
.scn--light .cine__cap span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.scn--light .cine__hint { color: var(--muted); }
.scn--light .scn__big small { -webkit-text-fill-color: var(--muted); }
.scn--light .scn__end .btn { box-shadow: 0 16px 40px -12px rgba(30, 96, 232, .6); }

/* La venta que avanza */
.vt__board { position: absolute; left: 0; top: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 230px); gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); transform-origin: 0 0; will-change: transform, opacity; }
.vt__col { display: grid; gap: 10px; align-content: start; min-height: 330px; border-radius: 16px; padding: 10px; background: var(--bg); transition: background .4s, box-shadow .4s; }
.vt__col.is-on { background: var(--blue-50); box-shadow: inset 0 0 0 1.5px var(--blue); }
.vt__ch { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 2px 4px 6px; }
.vt__ch u { text-decoration: none; }
.vt__k { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .7rem; font-size: .76rem; color: var(--muted); display: grid; gap: .15rem; }
.vt__k b { font-size: .82rem; }
.vt__gap { height: 128px; }
.vt__deal { position: absolute; left: 0; top: 0; width: 210px; z-index: 5; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -18px rgba(11, 27, 58, .45), 0 0 0 2px var(--blue); transition: box-shadow .4s; will-change: transform; }
.vt__dh { height: 52px; background: var(--grad); color: #fff; display: flex; align-items: center; gap: .55rem; padding: 0 .75rem; font-size: .72rem; font-weight: 700; }
.vt__dh .i { font-size: 1.35rem; }
.vt__dd { padding: .55rem .7rem; display: grid; gap: .15rem; font-size: .74rem; color: var(--muted); }
.vt__dd b { font-size: .88rem; }
.vt__dd strong { font-family: var(--font-head); color: var(--blue); font-size: 1rem; }
.vt__deal.is-won { box-shadow: 0 24px 50px -18px rgba(11, 27, 58, .45), 0 0 0 3px var(--green), 0 0 40px rgba(23, 145, 74, .3); }
.vt__deal.is-won .vt__dh { background: linear-gradient(135deg, #3ddc84, #17914a); }
.vt__deal.is-won .vt__dd strong { color: var(--green); }
.vt__ev { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: .6rem; width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .65rem .8rem; font-size: .82rem; box-shadow: var(--shadow-lg); opacity: 0; will-change: transform, opacity; }
.vt__ev b { display: block; }
.vt__ev em { font-style: normal; color: var(--muted); font-size: .72rem; }
.vt__ev > .i { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-size: 1rem; }
.vt__doc { position: absolute; left: 0; top: 0; z-index: 7; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: 0 40px 90px -30px rgba(11, 27, 58, .55); opacity: 0; display: grid; gap: .45rem; will-change: transform, opacity; }
.vt__dt { display: flex; align-items: center; gap: .45rem; font-family: var(--font-head); font-size: .95rem; }
.vt__dt .i { color: var(--blue); }
.vt__li { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); border-bottom: 1px dashed var(--line); padding: .3rem 0; }
.vt__li b { font-variant-numeric: tabular-nums; }
.vt__tot { display: flex; justify-content: space-between; font-family: var(--font-head); font-weight: 800; font-size: .95rem; padding-top: .15rem; }
.vt__sig { position: relative; height: 64px; border-bottom: 1.5px solid var(--ink); margin-top: .3rem; }
.vt__sig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vt__sig path { fill: none; stroke: #1e3a8a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vt__sig small { position: absolute; left: 0; bottom: -1.3rem; font-size: .66rem; color: var(--muted); }
.vt__stamp { position: absolute; right: -10px; top: -14px; transform: rotate(-12deg) scale(0); background: var(--green); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .85rem; letter-spacing: .06em; border-radius: 10px; padding: .35rem .7rem; box-shadow: 0 10px 30px -8px rgba(23, 145, 74, .8); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.vt__stamp.is-on { transform: rotate(-12deg) scale(1); }

/* Ficha de cliente: el historial entra en orden y debajo cuelgan sus fichas a medida (en bucle) */
.fhw { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; align-content: start; }
.fhw__hd { display: flex; align-items: center; gap: .65rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.fhw__hd > span:nth-child(2) { display: grid; flex: 1; line-height: 1.25; }
.fhw__hd b { font-size: .95rem; }
.fhw__hd em { font-style: normal; font-size: .74rem; color: var(--muted); }
.fhw__av { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .85rem; flex-shrink: 0; }
.fhw__tag { font-size: .66rem; font-weight: 800; color: var(--green); background: #e8f6ee; border-radius: 999px; padding: .22rem .6rem; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.fhw__tag.is-on { opacity: 1; }
.fhw__tl { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.fhw__r { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; font-size: .8rem; opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .35s; }
.fhw__r.is-on { opacity: 1; transform: none; }
.fhw__r > .i { width: 1.2em; text-align: center; font-size: .95rem; }
.fhw__r .dm-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fhw__r em { font-style: normal; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.fhw-wa { color: #25d366; } .fhw-ph { color: var(--green); } .fhw-cal { color: var(--blue); } .fhw-doc { color: #7c3aed; } .fhw-note { color: #d99a00; }
.fhw__lbl { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: .25rem 0 -.1rem; opacity: 0; transition: opacity .35s; }
.fhw__lbl.is-on { opacity: 1; }
.fhw__objs { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.fhw__obj { border: 1.5px solid var(--blue); border-radius: 12px; padding: .55rem .65rem; display: grid; gap: .25rem; font-size: .76rem; background: var(--blue-50); opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.fhw__obj.is-on { opacity: 1; transform: none; }
.fhw__obj > span:first-child { display: flex; align-items: center; gap: .35rem; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.fhw__obj b { font-size: .84rem; }
.fhw__kv { display: flex; flex-wrap: wrap; gap: .3rem; }
.fhw__kv span { background: #fff; border-radius: 6px; padding: .1rem .4rem; font-size: .66rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fhw__r, .fhw__obj, .fhw__lbl, .fhw__tag { transition: none; } }
.fh-wa { color: #25d366; } .fh-ph { color: #17914a; } .fh-cal { color: #1e60e8; } .fh-em { color: #00a6d6; } .fh-doc { color: #6c5ce7; } .fh-note { color: #f5a524; }

/* Cabecera de las soluciones con escena debajo: el título va primero y la escena justo después */
.rhero--sol { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.rhero--sol .rhero__big { font-size: clamp(2.1rem, 5.2vw, 3.9rem); max-width: 20ch; }

/* =========================================================================
   Soluciones · Automatización y seguimiento
   af = «El flujo que se dibuja solo» (fondo claro, bajo el título)
   ========================================================================= */
.scn--af { height: 520vh; }

/* El flujo que se dibuja solo */
.af__wrap { position: absolute; left: 0; top: 0; transform-origin: 0 0; z-index: 2; will-change: transform, opacity; }
.af__svg { position: absolute; left: 0; top: 0; overflow: visible; max-width: none; height: auto; }
.af__svg path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.af__svg path.af__yes { stroke: var(--green); }
.af__svg path.af__no { stroke: #f5a524; }
.af__svg path.af__bg { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 7; }
.af__n { position: absolute; z-index: 4; left: 0; top: 0; width: 180px; transform: translate(-50%, -50%) scale(.85); opacity: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .7rem .8rem; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 36px 1fr; gap: .55rem; align-items: center; transition: opacity .35s, transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.af__n.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.af__n.is-hot { box-shadow: 0 0 0 3px rgba(30, 96, 232, .25), var(--shadow-lg); }
.af__n > .i { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; background: var(--blue-50); color: var(--blue); }
.af__n b { display: block; font-size: .82rem; line-height: 1.25; }
.af__n em { display: block; font-style: normal; font-size: .68rem; color: var(--muted); margin-top: .1rem; }
.af__n--t > .i { background: var(--grad); color: #fff; }
.af__n--wa > .i { background: #e7fbe9; color: #25d366; }
.af__n--q > .i, .af__n--no > .i { background: #fff4e0; color: #a86500; }
.af__n--yes > .i { background: #e8f6ee; color: var(--green); }
.af__cnt { position: absolute; right: -10px; top: -10px; min-width: 30px; height: 26px; padding: 0 .4rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.af__cnt.is-on { opacity: 1; }
.af__tag { position: absolute; font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 999px; transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s; }
.af__tag.is-on { opacity: 1; }
.af__tag--yes { background: #e8f6ee; color: var(--green); }
.af__tag--no { background: #fff4e0; color: #a86500; }
.af__tk { position: absolute; left: 0; top: 0; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .7rem; box-shadow: 0 0 0 5px rgba(30, 96, 232, .18), 0 8px 20px -6px rgba(30, 96, 232, .7); opacity: 0; will-change: transform, opacity; }
.af__tk--s { z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: .5rem; box-shadow: 0 0 0 3px rgba(30, 96, 232, .15); }

/* Reactivación: las visitas caen, sale el WhatsApp y la socia vuelve (en bucle) */
.rcw { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; box-shadow: var(--shadow-lg); display: grid; gap: .7rem; align-content: start; }
.rcw__hd { display: flex; align-items: center; gap: .65rem; }
.rcw__hd > span:nth-child(2) { display: grid; flex: 1; line-height: 1.25; }
.rcw__hd b { font-size: .95rem; }
.rcw__hd em { font-style: normal; font-size: .74rem; color: var(--muted); }
.rcw__av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ff6f61, #e1306c); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .85rem; flex-shrink: 0; }
.rcw__st { font-size: .68rem; font-weight: 800; border-radius: 999px; padding: .22rem .6rem; background: #e8f6ee; color: var(--green); transition: background .3s, color .3s; white-space: nowrap; }
.rcw__st.is-risk { background: #fde8e8; color: #c53030; }
.rcw__lbl { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: .2rem 0 -.2rem; }
.rcw__ch { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; height: 90px; align-items: end; }
.rcw__b { position: relative; height: 100%; display: flex; align-items: flex-end; }
.rcw__b i { display: block; width: 100%; height: 0; border-radius: 6px 6px 2px 2px; background: var(--grad); transition: height .35s ease; }
.rcw__b.is-back i { background: linear-gradient(180deg, #3ddc84, #17914a); }
.rcw__b.is-zero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 3px; background: #f3b4b4; }
.rcw__wa, .rcw__re { border-radius: 18px; padding: .7rem .85rem; font-size: .86rem; line-height: 1.4; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.rcw__wa { background: #e7fbe9; border-bottom-left-radius: 5px; max-width: 88%; }
.rcw__re { background: var(--blue-50); justify-self: end; border-bottom-right-radius: 5px; font-weight: 600; }
.rcw__wa.is-on, .rcw__re.is-on { opacity: 1; transform: none; }
.rcw__wah { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; margin-bottom: .25rem; }
.rcw__wah .i { color: #25d366; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .rcw__b i, .rcw__wa, .rcw__re, .rcw__st { transition: none; } }

/* =========================================================================
   Soluciones · Reservas y citas
   ck = «El reloj de 24 horas» (fondo claro, bajo el título): las reservas llegan día y noche
   tq = «De la entrada a la puerta»: compra, QR, validación en la puerta y aforo en directo (en bucle)
   ========================================================================= */
.scn--ck { height: 520vh; }
.scn--tq { height: 500vh; }
/* Escena dentro de una sección que se reproduce sola (data-loop): sin altura de scroll, el escenario a la vista */
section.scn[data-loop] { height: auto; }
section.scn[data-loop] .scn__stage { position: relative; top: 0; height: clamp(600px, 80vh, 700px); }

/* El reloj de 24 horas */
.ck__night { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 50% 30%, #1a2a5e, #060d22 70%); opacity: 0; pointer-events: none; }
.ck__stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 35% 75%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #fff, transparent), radial-gradient(1.5px 1.5px at 10% 85%, #fff, transparent); opacity: .7; }
.ck-night .cine__cap { color: #fff; transition: color .4s; }
.ck-night .cine__lab { background: rgba(255, 255, 255, .1); color: #9cc4ff; }
.ck__dial { position: absolute; left: 0; top: 0; z-index: 2; width: 380px; height: 380px; will-change: transform; }
.ck__dial svg { width: 100%; height: 100%; overflow: visible; }
.ck__face { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.ck-night .ck__face { fill: #0f1d44; stroke: rgba(255, 255, 255, .15); }
.ck__open { fill: none; stroke: #ffd9a8; stroke-width: 16; stroke-linecap: round; }
.ck__shut { fill: none; stroke: #c9d3ea; stroke-width: 16; stroke-linecap: round; }
.ck-night .ck__shut { stroke: #2b3b72; }
.ck__tick { stroke: var(--line-2); stroke-width: 2; } .ck__tick.is-big { stroke: var(--muted); stroke-width: 3; }
.ck__lbl { font: 700 11px var(--font-body); fill: var(--muted); text-anchor: middle; dominant-baseline: middle; }
.ck-night .ck__lbl { fill: rgba(255, 255, 255, .6); }
.ck__hand { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.ck-night .ck__hand { stroke: #fff; }
.ck__hub { fill: var(--ink); } .ck-night .ck__hub { fill: #fff; }
.ck__dot { fill: var(--c); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ck__dot.is-on { transform: scale(1); }
.ck__mid { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; pointer-events: none; }
.ck__mid strong { font-family: var(--font-head); font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); transition: color .4s; }
.ck__mid span { font-size: .78rem; font-weight: 700; color: var(--muted); margin-top: .35rem; }
.ck__mid em { font-style: normal; font-size: .72rem; font-weight: 800; margin-top: .4rem; padding: .2rem .55rem; border-radius: 999px; background: #fff4e0; color: #a86500; }
.ck-night .ck__mid strong { color: #fff; } .ck-night .ck__mid span { color: rgba(255, 255, 255, .7); }
.ck-night .ck__mid em { background: rgba(255, 255, 255, .12); color: #ffd9a8; }
.ck__feed { position: absolute; left: 0; top: 0; z-index: 3; width: 290px; display: grid; gap: .45rem; will-change: transform; }
.ck__it { display: flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .7rem; font-size: .78rem; box-shadow: var(--shadow); animation: ck-in .35s both; }
.ck__it .i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bg-alt); font-size: .85rem; flex-shrink: 0; }
.ck__it b { font-variant-numeric: tabular-nums; }
.ck__it em { margin-left: auto; font-style: normal; font-size: .64rem; font-weight: 800; color: #a86500; background: #fff4e0; border-radius: 999px; padding: .1rem .45rem; white-space: nowrap; }
@keyframes ck-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Cancelaciones: alguien cancela, el hueco queda libre en la web y otra clienta lo reserva (en bucle) */
.cnw { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; align-content: start; }
.cnw__hd { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .9rem; padding-bottom: .5rem; margin-bottom: .15rem; border-bottom: 1px solid var(--line); }
.cnw__n { font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cnw__n strong { color: var(--ink); font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.cnw__r { display: flex; align-items: center; gap: .7rem; border-radius: 10px; padding: .55rem .7rem; font-size: .82rem; background: var(--blue-50); border: 1.5px solid transparent; transition: background .3s, border-color .3s; }
.cnw__r time { font-size: .74rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.cnw__r .dm-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnw__st { margin-left: auto; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.cnw__slot.is-gone { background: #fde8e8; }
.cnw__slot.is-gone .dm-txt { text-decoration: line-through; color: var(--muted); }
.cnw__slot.is-gone .cnw__st { color: #c53030; }
.cnw__slot.is-free { background: #fff; border: 1.5px dashed var(--blue); color: var(--blue); font-weight: 700; }
.cnw__slot.is-free .cnw__st { color: var(--blue); }
.cnw__slot.is-new { background: #e8f6ee; border-color: var(--green); }
.cnw__slot.is-new .cnw__st { color: var(--green); }
.cnw__nt { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .78rem; font-weight: 600; min-height: 2.2rem; opacity: 0; transition: opacity .35s; }
.cnw__nt.is-on { opacity: 1; }
.cnw__nt > .i { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .cnw__r, .cnw__nt { transition: none; } }

/* De la entrada a la puerta */
.tq__ph { position: absolute; left: 0; top: 0; z-index: 3; width: 240px; height: 480px; border-radius: 36px; background: #0b1530; border: 7px solid #1c2a4d; box-shadow: 0 40px 80px -30px rgba(11, 27, 58, .6); overflow: hidden; will-change: transform, opacity; }
.tq__scr { position: absolute; inset: 0; background: #fff; display: grid; align-content: start; }
.tq__ev { height: 190px; background: linear-gradient(160deg, #1b1446, #6c5ce7 70%, #f5a524); color: #fff; padding: 1rem; display: grid; align-content: end; gap: .2rem; }
.scn .tq__ev b { color: #fff; font-family: var(--font-head); font-size: 1.15rem; line-height: 1.1; }
.tq__ev span { font-size: .7rem; opacity: .85; }
.tq__ev .i { font-size: 1.6rem; margin-bottom: auto; }
.tq__tp { margin: .8rem; display: grid; gap: .45rem; }
.tq__row { display: flex; justify-content: space-between; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: .5rem .6rem; font-size: .76rem; }
.tq__row.is-sel { border-color: #6c5ce7; background: #f1edff; }
.tq__row b { font-size: .8rem; }
.tq__buy { margin: 0 .8rem; text-align: center; background: #6c5ce7; color: #fff; border-radius: 10px; padding: .6rem; font-weight: 700; font-size: .85rem; transition: transform .2s; }
.tq__buy.is-press { transform: scale(.94); }
.tq__tic { position: absolute; left: 0; top: 0; z-index: 5; width: 220px; background: #fff; border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(11, 27, 58, .55), 0 0 0 1px var(--line); overflow: hidden; opacity: 0; will-change: transform, opacity; }
.tq__th { background: linear-gradient(135deg, #1b1446, #6c5ce7); color: #fff; padding: .6rem .8rem; font-size: .7rem; }
.scn .tq__th b { color: #fff; display: block; font-size: .9rem; font-family: var(--font-head); }
.tq__qr { margin: .8rem auto .4rem; width: 120px; height: 120px; display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: 1px; }
.tq__qr i { display: block; height: 100%; background: var(--ink); border-radius: 1px; } .tq__qr i.o { background: transparent; }
.tq__tf { text-align: center; font-size: .7rem; color: var(--muted); padding: 0 .8rem .8rem; }
.scn .tq__tf b { display: block; font-size: .82rem; color: var(--ink); }
.tq__sc { position: absolute; left: 0; top: 0; z-index: 4; width: 240px; height: 480px; border-radius: 36px; background: #0b1530; border: 7px solid #1c2a4d; box-shadow: 0 40px 80px -30px rgba(11, 27, 58, .6); overflow: hidden; opacity: 0; will-change: transform, opacity; }
.tq__cam { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, #2a3555, #0b1530 70%); }
.tq__frame { position: absolute; left: 50%; top: 40%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 18px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.tq__frame::before { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; top: var(--y, 10%); background: #3ddc84; box-shadow: 0 0 12px #3ddc84; }
.tq__ok { position: absolute; left: 12px; right: 12px; bottom: 18px; border-radius: 16px; background: var(--green); color: #fff; padding: .7rem .8rem; display: flex; align-items: center; gap: .6rem; font-size: .8rem; transform: translateY(140%); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.tq__ok.is-on { transform: none; }
.scn .tq__ok b { color: #fff; display: block; font-size: .9rem; }
.tq__ok .i { font-size: 1.6rem; }
.tq__flash { position: absolute; inset: 0; background: rgba(61, 220, 132, .35); opacity: 0; transition: opacity .3s; }
.tq__flash.is-on { opacity: 1; }
.tq__ring { position: absolute; left: 0; top: 0; z-index: 3; width: 300px; height: 300px; opacity: 0; will-change: transform, opacity; }
.tq__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.tq__ring circle { fill: none; stroke-width: 18; }
.tq__ring .bg { stroke: var(--bg-alt); } .tq__ring .fg { stroke: url(#tkg); stroke-linecap: round; }
.tq__rc { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; }
.tq__rc strong { font-family: var(--font-head); font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tq__rc span { font-size: .78rem; color: var(--muted); font-weight: 700; margin-top: .3rem; }
.tq__feed { position: absolute; left: 0; top: 0; z-index: 3; width: 260px; display: grid; gap: .4rem; opacity: 0; will-change: transform, opacity; }
.tq__fi { display: flex; align-items: center; gap: .55rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .5rem .7rem; font-size: .78rem; box-shadow: var(--shadow); animation: tk-in .4s both; }
.tq__fi .i { color: var(--green); } .tq__fi em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .68rem; }
@keyframes tk-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Soluciones · Cobros y venta online
   cb = «Del presupuesto al cobro» (fondo claro, bajo el título): presupuesto, aceptación,
        pago en el chat, factura creada en Holded y enviada
   ========================================================================= */
.scn--cb { height: 520vh; }
.cb__ph { position: absolute; left: 0; top: 0; z-index: 3; width: 270px; height: 540px; border-radius: 40px; background: #0b1530; border: 7px solid #1c2a4d; box-shadow: 0 40px 80px -30px rgba(11, 27, 58, .6); overflow: hidden; transform-origin: 50% 50%; will-change: transform; transition: box-shadow .4s; }
.cb__ph.is-paid { box-shadow: 0 0 0 4px rgba(23, 145, 74, .5), 0 0 70px rgba(23, 145, 74, .45), 0 40px 80px -30px rgba(11, 27, 58, .6); }
.cb__scr { position: absolute; inset: 0; background: #efeae2; display: flex; flex-direction: column; }
.cb__hd { display: flex; align-items: center; gap: .55rem; background: #075e54; color: #fff; padding: 1.4rem .8rem .6rem; font-size: .8rem; flex-shrink: 0; }
.scn .cb__hd b { color: #fff; display: block; font-size: .88rem; }
.cb__hd em { font-style: normal; font-size: .64rem; opacity: .8; }
.cb__hd i.cb__av { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #075e54; display: grid; place-items: center; font-style: normal; font-size: .95rem; }
.cb__chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: .7rem .6rem .9rem; overflow: hidden; }
.cb__m { display: none; max-width: 86%; background: #fff; border-radius: 12px 12px 12px 4px; padding: .5rem .6rem; font-size: .74rem; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.cb__m.is-on { display: block; animation: cb-in .35s both; }
.cb__m--me { align-self: flex-end; background: #d9fdd3; border-radius: 12px 12px 4px 12px; }
@keyframes cb-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cb__doc { margin-top: .4rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.cb__dt { display: flex; align-items: center; gap: .45rem; padding: .5rem .55rem; font-size: .7rem; }
.cb__dt .i { font-size: 1.2rem; color: #e5484d; }
.scn .cb__dt b { display: block; font-size: .74rem; }
.cb__dt em { font-style: normal; color: var(--muted); font-size: .64rem; }
.cb__dt strong { white-space: nowrap; margin-left: auto; font-family: var(--font-head); font-size: .85rem; color: var(--ink); }
.cb__btn { display: block; text-align: center; font-weight: 700; font-size: .72rem; padding: .45rem; border-top: 1px solid var(--line); color: #075e54; transition: background .3s, color .3s; }
.cb__btn.is-ok { background: #e8f6ee; color: var(--green); }
.cb__pay { display: block; text-align: center; font-weight: 800; font-size: .8rem; padding: .55rem; margin-top: .4rem; border-radius: 9px; background: var(--blue); color: #fff; transition: background .3s; }
.cb__pay.is-ok { background: var(--green); }
.cb__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: #fff; border-radius: 22px 22px 0 0; padding: 1rem 1rem 1.4rem; box-shadow: 0 -20px 40px -20px rgba(11, 27, 58, .5); transform: translateY(105%); transition: transform .4s cubic-bezier(.3, 1.2, .5, 1); display: grid; gap: .6rem; justify-items: center; text-align: center; }
.cb__sheet.is-on { transform: none; }
.scn .cb__sheet b { color: var(--ink); font-family: var(--font-head); font-size: 1.5rem; }
.cb__sheet span { font-size: .72rem; color: var(--muted); }
.cb__slot { width: 100%; height: 64px; border-radius: 12px; border: 2px dashed var(--line-2); display: grid; place-items: center; font-size: .7rem; color: var(--muted); }
.cb__done { width: 54px; height: 54px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 1.5rem; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.cb__done.is-on { transform: scale(1); }
.cb__sheet .cb__done { color: #fff; font-size: 1.5rem; }
.cb__card { position: absolute; left: 0; top: 0; z-index: 5; width: 210px; height: 132px; border-radius: 14px; background: linear-gradient(135deg, #1e60e8, #00b8e6); color: #fff; padding: .9rem 1rem; box-shadow: 0 30px 50px -20px rgba(11, 27, 58, .7); display: grid; align-content: space-between; font-family: var(--font-head); opacity: 0; will-change: transform, opacity; }
.cb__card i.cb__chip { width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, #ffd27a, #d9a43b); }
.cb__card span { font-size: .95rem; letter-spacing: .12em; }
.cb__card small { font-family: var(--font-body); font-size: .62rem; opacity: .85; }
.cb__plus { position: absolute; left: 0; top: 0; z-index: 6; font-family: var(--font-head); font-weight: 800; font-size: 3.4rem; color: var(--green); text-shadow: 0 10px 30px rgba(23, 145, 74, .35); opacity: 0; pointer-events: none; will-change: transform, opacity; white-space: nowrap; }
.cb__st { position: absolute; left: 0; top: 0; z-index: 2; width: 270px; display: grid; gap: .55rem; will-change: transform; }
.cb__s { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .6rem .75rem; font-size: .82rem; color: var(--muted); box-shadow: var(--shadow); transition: all .35s; opacity: .45; }
.cb__s .i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-alt); color: var(--muted); font-size: .85rem; transition: all .35s; }
.cb__s time { margin-left: auto; font-size: .7rem; font-weight: 700; }
.cb__s.is-on { opacity: 1; color: var(--ink); border-color: rgba(23, 145, 74, .4); }
.cb__s.is-on .i { background: var(--green); color: #fff; }
.scn .cb__s b { color: inherit; }

/* Suscripciones: las cuotas del mes se cobran, la tarjeta que falla se reintenta y los ingresos crecen (en bucle) */
.sbw { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.1rem; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; align-content: start; }
.sbw__hd { display: flex; align-items: center; gap: .65rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.sbw__hd img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.sbw__hd > span { display: grid; line-height: 1.25; }
.sbw__hd b { font-size: .95rem; }
.sbw__hd em { font-style: normal; font-size: .74rem; color: var(--muted); }
.sbw__lbl { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: .25rem 0 0; }
.sbw__r { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: 10px; padding: .5rem .7rem; font-size: .82rem; opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .35s, background .3s; }
.sbw__r.is-on { opacity: 1; transform: none; }
.sbw__r .dm-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbw__st { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; white-space: nowrap; color: var(--green); }
.sbw__st::before { content: "✓"; }
.sbw__ko.is-ko { background: #fde8e8; border-color: #f3b4b4; }
.sbw__ko.is-ko .sbw__st { color: #c53030; }
.sbw__ko.is-ko .sbw__st::before { content: "✕"; }
.sbw__ko.is-retry { background: #fff8e6; border-color: #f5d27a; }
.sbw__ko.is-retry .sbw__st { color: #a86500; }
.sbw__ko.is-retry .sbw__st::before { content: "↻"; }
.sbw__mrr { display: grid; gap: .5rem; margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
.sbw__mrr.is-on { opacity: 1; }
.sbw__k { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: .72rem; font-weight: 700; color: var(--muted); }
.sbw__k strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.sbw__ch { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; height: 70px; align-items: end; }
.sbw__ch i { display: block; height: 0; border-radius: 4px 4px 1px 1px; background: var(--grad); transition: height .45s ease; }
.sbw__ch i:last-child { background: linear-gradient(180deg, #3ddc84, #17914a); }
@media (prefers-reduced-motion: reduce) { .sbw__r, .sbw__mrr, .sbw__ch i { transition: none; } }
/* Paso y aviso de Holded */
.cb__s img { height: 18px; width: auto; margin-left: -.2rem; filter: grayscale(1) opacity(.5); transition: filter .35s; }
.cb__s.is-on img { filter: none; }
.cb__hold { position: absolute; left: 0; top: 0; z-index: 6; display: flex; align-items: center; gap: .7rem; width: 270px; background: #fff; border-radius: 16px; padding: .7rem .85rem; box-shadow: var(--shadow-lg), 0 0 0 2px rgba(255, 77, 79, .35); opacity: 0; will-change: transform, opacity; }
.cb__hold img { height: 26px; width: auto; flex-shrink: 0; }
.cb__hold span { display: grid; font-size: .74rem; color: var(--muted); border-left: 1px solid var(--line); padding-left: .65rem; }
.scn .cb__hold b { color: var(--ink); font-size: .84rem; }
.cb__hold .i { margin-left: auto; color: var(--green); font-size: 1.1rem; }

/* =========================================================================
   Soluciones · Datos y control
   aq = «Pregúntale a tu CRM»: animación en bucle dentro de la cabecera, sin titulares
   ========================================================================= */
/* Pregúntale a tu CRM (dentro de la cabecera, en bucle) */
.aq { max-width: 620px; margin: 3rem auto 0; text-align: left; }
.aq__ask { position: relative; z-index: 2; display: flex; align-items: center; gap: .7rem; background: #fff; border-radius: 999px; padding: .55rem .6rem .55rem 1.1rem; box-shadow: 0 20px 50px -20px rgba(30, 96, 232, .45), 0 0 0 1.5px var(--blue-100); will-change: transform; }
.aq__ask > .i { color: var(--blue); font-size: 1.1rem; }
.aq__q { flex: 1; font-size: 1.02rem; font-weight: 600; min-height: 1.5em; white-space: nowrap; overflow: hidden; }
.aq__q.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--blue); margin-left: 2px; vertical-align: -.15em; animation: cine-caret 1s steps(1) infinite; }
.aq__send { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; transition: transform .2s; flex-shrink: 0; }
.aq__send.is-press { transform: scale(.85); }
.aq__ans { position: relative; height: 300px; margin-top: 1rem; }
.aq__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.aq__k { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .8rem .9rem; box-shadow: var(--shadow); opacity: 0; transform: translateY(-30px) scale(.8); transition: opacity .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.aq__k.is-on { opacity: 1; transform: none; }
.aq__k span { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.aq__k strong { display: block; font-family: var(--font-head); font-size: 1.45rem; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.aq__k em { font-style: normal; font-size: .72rem; font-weight: 700; color: var(--green); }
.aq__chart { margin-top: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .8rem .9rem .6rem; box-shadow: var(--shadow); opacity: 0; transition: opacity .35s; }
.aq__chart.is-on { opacity: 1; }
.aq__chart b { font-size: .8rem; }
.aq__chart svg { display: block; width: 100%; height: 110px; margin-top: .3rem; overflow: visible; }
.aq__chart path.l { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.aq__chart path.a { fill: url(#aqg); opacity: 0; transition: opacity .5s; }
.aq__chart.is-full path.a { opacity: 1; }
.aq__rank { display: grid; gap: .55rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow-lg); }
.aq__rh { display: flex; justify-content: space-between; font-size: .8rem; }
.aq__rh span { color: var(--muted); }
.aq__r { display: grid; grid-template-columns: 34px 90px 1fr 84px; gap: .6rem; align-items: center; font-size: .84rem; }
.aq__av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .72rem; background: var(--c); }
.aq__bar { height: 12px; border-radius: 8px; background: var(--bg-alt); overflow: hidden; }
.aq__bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--c); transition: width .7s cubic-bezier(.3, 1.2, .5, 1); }
.aq__r strong { text-align: right; font-family: var(--font-head); font-variant-numeric: tabular-nums; }
.aq__r.is-top { position: relative; }
.aq__r.is-top::after { content: "\f091"; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; left: -26px; color: #f5a524; font-size: .95rem; }
.aq__ok { display: grid; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow-lg); }
.aq__ok p { margin: 0; font-size: .92rem; }
.aq__mails { display: flex; flex-wrap: wrap; gap: .4rem; }
.aq__mails span { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 600; background: var(--bg-alt); border-radius: 999px; padding: .25rem .6rem; }
.aq__btns { display: flex; gap: .5rem; }
.aq__btns span { border-radius: 10px; padding: .5rem 1rem; font-weight: 700; font-size: .84rem; border: 1.5px solid var(--line); }
.aq__btns span.go { background: var(--blue); color: #fff; border-color: var(--blue); transition: background .3s, border-color .3s, transform .2s; }
.aq__btns span.go.is-done { background: var(--green); border-color: var(--green); }
.aq__btns span.go.is-press { transform: scale(.94); }
@media (max-width: 760px) { .aq__ans { height: 360px; } .aq__kpis { grid-template-columns: 1fr 1fr; gap: .5rem; } .aq__k strong { font-size: 1.15rem; } .aq__chart svg { height: 80px; } .aq__q { font-size: .88rem; } .aq__r { grid-template-columns: 30px 70px 1fr 70px; font-size: .74rem; } }
.aq__step { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s; position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.aq__step.is-on { opacity: 1; transform: none; }

/* App móvil e integraciones: llegan los avisos, se abre el panel del día y se encienden las herramientas conectadas (en bucle) */
.bow { min-width: 0; display: grid; justify-items: center; gap: .7rem; }
.bow__ph { position: relative; width: 230px; height: 400px; border-radius: 36px; background: #0b1530; border: 6px solid #1c2a4d; box-shadow: 0 30px 60px -24px rgba(11, 27, 58, .5); overflow: hidden; }
.bow__lock { position: absolute; inset: 0; background: linear-gradient(160deg, #1e60e8, #00b8e6 60%, #6dd5a5); color: #fff; padding: 1.8rem .6rem .8rem; display: grid; align-content: start; gap: .45rem; transition: opacity .5s; }
.bow__lock.is-off { opacity: 0; }
.bow__time { text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 2.5rem; line-height: 1; }
.bow__date { text-align: center; font-size: .72rem; opacity: .85; margin-bottom: .6rem; }
.bow__n { display: flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .9); color: var(--ink); border-radius: 14px; padding: .5rem .55rem; font-size: .66rem; line-height: 1.3; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-14px) scale(.95); transition: opacity .35s, transform .35s; }
.bow__n.is-on { opacity: 1; transform: none; }
.bow__n .dm-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bow__n b { display: block; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; }
.bow__n > i.bow__ic { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--grad); color: #fff; font-style: normal; font-size: .75rem; }
.bow__n em { font-style: normal; color: var(--muted); font-size: .6rem; align-self: flex-start; white-space: nowrap; }
.bow__app { position: absolute; inset: 0; background: var(--bg); padding: 1.5rem .6rem .8rem; display: grid; align-content: start; gap: .5rem; opacity: 0; transition: opacity .5s; }
.bow__app.is-on { opacity: 1; }
.bow__ah { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-weight: 800; font-size: .95rem; }
.bow__ah .i { color: var(--blue); }
.bow__kp { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.bow__kp div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .45rem .55rem; }
.bow__kp span { font-size: .54rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bow__kp strong { display: block; font-family: var(--font-head); font-size: 1rem; }
.bow__kp em { font-style: normal; font-size: .6rem; color: var(--green); font-weight: 700; }
.bow__mini { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .45rem .55rem; }
.bow__mini svg { width: 100%; height: 56px; display: block; }
.bow__mini path { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.bow__app.is-on .bow__mini path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease .3s; }
.bow__li { display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: .45rem .55rem; font-size: .68rem; }
.bow__li .i { color: var(--green); }
.bow__lbl { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: .2rem 0 -.3rem; }
.bow__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.bow__logos span { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.1rem; opacity: .3; filter: grayscale(1); transform: scale(.9); transition: opacity .3s, filter .3s, transform .3s, box-shadow .3s; }
.bow__logos span.is-on { opacity: 1; filter: none; transform: none; box-shadow: var(--shadow-sm); }
.bow__logos img { width: 28px; height: auto; }
@media (max-width: 420px) { .bow__logos { gap: .3rem; } .bow__logos span { width: 34px; height: 34px; border-radius: 10px; font-size: .95rem; } .bow__logos img { width: 24px; } }
@media (prefers-reduced-motion: reduce) { .bow__lock, .bow__n, .bow__app, .bow__logos span, .bow__app.is-on .bow__mini path { transition: none; } }

/* Escenas dentro del encabezado de las soluciones: en bucle, sin títulos y sobre el mismo fondo del encabezado,
   sin caja propia (como la llamada de Conversaciones con IA o la pregunta de Datos y control) */
.rhero [data-loop] { height: auto; background: none; text-align: left; width: 100vw; margin: -1.5rem 0 0 calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 9%, #000 88%, transparent); }
.rhero [data-loop] .scn__stage, .rhero [data-loop] .cz__stage, .rhero [data-loop] .cine__stage { position: relative; top: 0; height: clamp(480px, 60vh, 560px); color: var(--ink); }
.rhero [data-loop] .scn__lg, .rhero [data-loop] .cine__bg, .rhero [data-loop] .ck__night { display: none; }
@media (max-width: 640px) { .rhero [data-loop] .scn__stage, .rhero [data-loop] .cz__stage, .rhero [data-loop] .cine__stage { height: 520px; } }
/* Captación, en claro */
.rhero .cz__pc { box-shadow: 0 24px 40px -18px rgba(14, 33, 79, .4); }
.rhero .cz__pc--hl { border: 1px solid var(--line); }
.rhero .cz__cur { color: var(--ink); filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .9)); }
.rhero .cz__card, .rhero .cz__crm { border: 1px solid var(--line); box-shadow: 0 40px 80px -36px rgba(14, 33, 79, .45); }
.rhero .cz__phone { box-shadow: 0 50px 90px -40px rgba(14, 33, 79, .55); }
.rhero .cz__tap { border-color: var(--blue); background: rgba(30, 96, 232, .15); box-shadow: 0 0 0 6px rgba(30, 96, 232, .15); }
.rhero .cz__wa { border: 1px solid #c9efd0; box-shadow: 0 30px 60px -28px rgba(14, 33, 79, .4); }
/* Atribución, en claro */
.rhero .rw__clock { top: 34px; color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-100); }
.rhero .rw__n { background: #fff; border-color: var(--line); box-shadow: 0 30px 60px -34px rgba(14, 33, 79, .45); }
.rhero .rw__ic { background: var(--blue-50); }
.rhero .rw__n b { color: var(--ink); }
.rhero .rw__n em { color: var(--blue); }
.rhero .rw__n time { color: var(--muted); }
.rhero .rw__line { box-shadow: 0 0 14px rgba(0, 184, 230, .35); }
.rhero .rw__sale { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 30px 60px -30px rgba(23, 145, 74, .45); }
.rhero .rw__sale .rw__ic { background: var(--green); color: #fff; }
.rhero .rw-ph { color: var(--green); } .rhero .rw-cal { color: var(--cyan); }
/* Redes, en claro */
.rhero .cine__post { border: 1px solid var(--line); box-shadow: 0 40px 80px -36px rgba(14, 33, 79, .45); }
.rhero .cine__img { box-shadow: 0 24px 50px -24px rgba(14, 33, 79, .5); }
.rhero .cine__hd, .rhero .cine__tt { color: var(--ink); }
.rhero .cine__ok { border-color: #fff; }
.rhero .cine__rail { background: var(--line); }
.rhero .cine__head { box-shadow: 0 0 0 4px var(--blue), 0 0 20px 4px rgba(0, 184, 230, .35); }
.rhero .cine__head b { color: var(--ink); }
.rhero .cine__ticks { color: var(--muted); }
/* Atribución: la franja de la línea se separa de los botones */
@media (min-width: 760px) { .rhero .scn--rw, .rhero .scn--af, .rhero .scn--cb { margin-top: 1rem; } }
/* Cobros: más alto para que el móvil se vea grande */
.rhero .scn--cb .scn__stage { height: 760px; }
@media (max-width: 640px) { .rhero .scn--cb .scn__stage { height: 600px; } }
/* Reservas: al caer la noche se oscurece todo el encabezado */
.rhero--night::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: var(--night, 0);
  background: radial-gradient(120% 90% at 50% 30%, #1a2a5e, #060d22 70%); }
.rhero--night .breadcrumb, .rhero--night .breadcrumb a, .rhero--night h1, .rhero--night .rhero__big, .rhero--night .hero__lead, .rhero--night .tag { transition: color .6s, background-color .6s; }
.rhero--night.is-night .breadcrumb, .rhero--night.is-night .breadcrumb a, .rhero--night.is-night h1 { color: rgba(255, 255, 255, .65); }
.rhero--night.is-night .rhero__big { color: #fff; }
.rhero--night.is-night .hero__lead { color: rgba(255, 255, 255, .78); }
.rhero--night.is-night .tag { background: rgba(255, 255, 255, .1); color: #9cc4ff; }
.rhero--night.is-night .btn--ghost { --btn-bg: rgba(255, 255, 255, .08); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .25); }
.rhero--night.is-night .ck__feed .ck__it { box-shadow: none; }
.rhero .cine__img img { object-position: 50% 15%; }
@media (max-width: 640px) { .rhero .cine__rail { width: calc(100% - 96px); } }