/* Hoja compartida de la nueva home, la landing de FlowChat y las paginas
   de rubro. Si un estilo se usa en mas de una pagina, vive aca. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --naranja:#EA6A1E; --naranja-d:#CE5A14; --azul:#2C6FB5; --verde:#3F9A3C;
  --violeta:#7C5CE6; --violeta-d:#5B3FC4;
  --tinta:#17242E; --carbon:#0F1519; --gris:#5B6B78; --gris2:#8795A1;
  --linea:#E4E8EC; --fondo:#F5F7F9;
  --maxw:1200px; --ease:cubic-bezier(.22,1,.36,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--tinta);background:#fff;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Sora',sans-serif;letter-spacing:-.025em;line-height:1.1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{position:relative}
.pad{padding:104px 0}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--naranja);display:block;margin-bottom:14px}
.centro{text-align:center;max-width:720px;margin:0 auto 56px}
.centro h2{font-size:clamp(28px,4vw,42px);font-weight:800}
.centro p{font-size:17.5px;color:var(--gris);margin-top:16px}

/* ---------------- botones ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;
  padding:15px 28px;border-radius:12px;cursor:pointer;border:0;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,border-color .2s,color .2s}
.btn-p{background:var(--naranja);color:#fff;box-shadow:0 10px 26px -12px rgba(234,106,30,.85)}
.btn-p:hover{background:var(--naranja-d);transform:translateY(-2px)}
.btn-b{background:#fff;color:var(--tinta);border:1.5px solid var(--linea)}
.btn-b:hover{border-color:var(--tinta);transform:translateY(-2px)}
.btn-o{background:rgba(255,255,255,.1);color:#fff;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.btn-o:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.lnk{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--azul)}
.lnk svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.lnk:hover svg{transform:translateX(3px)}

/* ---------------- barra ---------------- */
/* Solo la barra principal es fija: la miga de pan también es un <nav>. */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:90;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
nav.on{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linea)}
nav .in{max-width:var(--maxw);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
nav .marca{display:flex;align-items:center;gap:9px;font-family:'Sora';font-weight:800;font-size:19px;letter-spacing:-.03em;color:#fff;transition:color .3s}
nav .marca img{width:26px;height:26px}
nav .marca span{color:var(--naranja)}
nav.on .marca{color:var(--tinta)}
nav .links{display:flex;gap:28px}
/* Solo los enlaces propios de la barra: adentro del panel viven los menús grandes. */
nav .links > a{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);transition:color .2s}
nav .links > a.solo-movil{display:none}
nav.on .links > a{color:var(--gris)}
nav .links > a:hover{color:#fff}
nav.on .links > a:hover{color:var(--tinta)}
nav .der{display:flex;align-items:center;gap:14px}
nav .der .ing{font-size:14.5px;font-weight:700;color:#fff;transition:color .3s}
nav.on .der .ing{color:var(--tinta)}
/* Sobre fondo blanco el botón translúcido desaparecía: pasa a naranja. */
nav.on .der .btn-o{background:var(--naranja);border-color:var(--naranja);color:#fff;
  box-shadow:0 8px 20px -10px rgba(234,106,30,.8)}
nav.on .der .btn-o:hover{background:var(--naranja-d)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:background .3s}
nav.on .burger span{background:var(--tinta)}


/* ---------------- menú desplegable ---------------- */
.mg-btn{font-family:inherit;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.82);background:none;
  border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:color .2s;padding:0}
nav.on .mg-btn{color:var(--gris)}
.mg-btn:hover,.mg-btn[aria-expanded="true"]{color:#fff}
nav.on .mg-btn:hover,nav.on .mg-btn[aria-expanded="true"]{color:var(--tinta)}
.mg-btn .chv{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .2s var(--ease)}
.mg-btn[aria-expanded="true"] .chv{transform:rotate(180deg)}
.mg{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 26px 54px -30px rgba(10,12,30,.4);
  border-top:1px solid var(--linea);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s var(--ease),visibility .18s}
.mg.abierto{opacity:1;visibility:visible;transform:none}
.mg-in{max-width:var(--maxw);margin:0 auto;padding:32px 24px 36px;display:grid;
  grid-template-columns:1.45fr 1fr 1fr;gap:38px}
.mg-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gris2);margin-bottom:14px}
.mg-list{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.mg-it{display:flex;gap:12px;align-items:flex-start;padding:10px 11px;border-radius:10px;transition:background .15s}
.mg-it:hover{background:var(--fondo)}
.mg-ic{width:34px;height:34px;border-radius:9px;background:#FFF1E7;display:grid;place-items:center;flex:0 0 auto}
.mg-ic svg{width:17px;height:17px;stroke:var(--naranja);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mg-ic.plano{background:transparent}
.mg-ic.plano img{width:26px;height:26px;object-fit:contain}
.mg-it b{display:block;font-size:14px;font-weight:700;color:var(--tinta);line-height:1.3}
.mg-it small{display:block;font-size:12px;color:var(--gris);line-height:1.4;margin-top:2px}
.mg-col{display:grid;gap:2px}
.mg-col a{font-size:14px;color:var(--gris);padding:6px 0;transition:color .15s}
.mg-col a:hover{color:var(--naranja)}
.mg-side{background:var(--fondo);border-radius:14px;padding:22px}
.mg-side .st{font-size:15px;font-weight:800;margin-bottom:7px}
.mg-side p{font-size:13.5px;color:var(--gris);margin-bottom:16px}
.mg-cta{display:block;text-align:center;background:var(--naranja);color:#fff;font-size:13.5px;font-weight:700;
  padding:11px;border-radius:10px;transition:background .2s}
.mg-cta:hover{background:var(--naranja-d)}
.mg-min{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--gris);margin-top:10px}
.mg-min:hover{color:var(--tinta)}
@media (max-width:1100px){ .mg-in{grid-template-columns:1.3fr 1fr;gap:28px} .mg-side{display:none} }
/* En celular el JS mete cada menu adentro del panel; si no corre, no se muestran. */
@media (max-width:860px){ nav > .mg{display:none} }

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:760px;display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(170deg,#0B1020 0%,#1A1438 32%,#4A3A7A 58%,#B97FA8 78%,#F0A878 92%,#F7C9A0 100%)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 50% 112%,rgba(255,255,255,.55),transparent 70%),
             linear-gradient(transparent 78%,rgba(255,255,255,.5) 94%,#fff 100%)}
.hero .wrap{position:relative;z-index:3;text-align:center;padding-top:124px;padding-bottom:84px;max-width:840px}
.hero h1{font-size:clamp(34px,4.8vw,58px);font-weight:800;color:#fff;max-width:18ch;margin:0 auto 22px;
  text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .sub{font-size:clamp(16px,1.6vw,19px);color:rgba(255,255,255,.9);max-width:62ch;margin:0 auto 34px;line-height:1.6}
.hero .sub b{color:#fff;font-weight:700}
.hero .acc{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.hero .fino{margin-top:18px;font-size:13px;color:rgba(255,255,255,.72)}

/* las seis tarjetas que entran volando */
.flot{position:absolute;inset:0;z-index:2;pointer-events:none}
.fc-card{position:absolute;width:236px;background:rgba(255,255,255,.96);border-radius:15px;padding:13px;
  box-shadow:0 22px 50px -18px rgba(10,12,30,.5);backdrop-filter:blur(8px);
  opacity:0;transform:translate(var(--dx),var(--dy)) scale(.9)}
.hero.go .fc-card{opacity:1;transform:none;
  transition:opacity .85s var(--ease),transform .95s var(--ease);transition-delay:calc(.25s + var(--i)*.12s)}
.fc-card .tit{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--tinta);margin-bottom:9px}
.fc-card .tit .lg{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
/* Adentro de la tarjeta todo es recto: se lee como interfaz, no como burbuja. */
.fc-card .cuerpo{background:var(--fondo);border-radius:0;padding:11px}
.fc-card .msg{font-size:11px;color:var(--gris);line-height:1.4}
.fc-card .tarea{display:flex;gap:7px;align-items:center;margin-top:9px;background:#fff;border-radius:0;
  padding:8px 9px;border-left:2.5px solid var(--verde);box-shadow:0 2px 8px rgba(10,12,30,.07)}
.fc-card .tarea .p{width:8px;height:8px;background:var(--verde);flex:0 0 auto}
.fc-card .tarea b{font-size:10.5px;color:var(--tinta);display:block;line-height:1.25}
.fc-card .tarea small{font-size:9.5px;color:var(--gris2)}
.fc-card .ola{display:flex;align-items:center;gap:2px;height:16px;margin-top:3px}
.fc-card .ola span{width:2px;border-radius:2px;background:#9FB0BD}
/* posiciones */
.p1{top:14%;left:18px;--dx:-70px;--dy:26px;--i:0}
.p2{top:9%;right:18px;--dx:70px;--dy:26px;--i:1}
.p3{top:46%;left:-34px;--dx:-80px;--dy:0;--i:2}
.p4{top:43%;right:-34px;--dx:80px;--dy:0;--i:3}
.p5{bottom:9%;left:56px;--dx:-56px;--dy:40px;--i:4}
.p6{bottom:6%;right:56px;--dx:56px;--dy:40px;--i:5}
/* El texto vive en 840px centrados. Una tarjeta de 236 + 18 de margen ocupa
   hasta 254, asi que recien a partir de 1400 hay lugar para las cuatro de
   arriba y abajo, y a partir de 1660 para las dos de los costados. */
@media (max-width:1660px){ .p3,.p4{display:none} }
@media (max-width:1400px){ .flot{display:none} }

/* ---------------- bento ---------------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
/* Las tarjetas de una misma fila comparten los renglones: titulo con titulo,
   boton con boton. --filas es la cantidad de hijos que tiene cada tarjeta. */
.bx{border-radius:20px;padding:26px 24px 0;overflow:hidden;position:relative;min-height:330px;
  display:grid;grid-template-rows:subgrid;grid-row:span var(--filas,5);align-content:start}
@supports not (grid-template-rows:subgrid){ .bx{display:flex;flex-direction:column}
  .bx > p,.bx > .mini{align-self:stretch} .bx > .pill,.bx > .lnk{align-self:flex-start} }
.bx.lila{background:#F1ECFB}.bx.duraz{background:#FDF0E4}.bx.menta{background:#E9F5EC}
.bx.hielo{background:#E9F1FA}.bx.rosa{background:#FBECEF}.bx.arena{background:#F7F3EA}
.bx .pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:99px;padding:6px 13px;justify-self:start;align-self:start;
  font-size:11.5px;font-weight:800;color:var(--tinta);box-shadow:0 2px 8px rgba(10,12,30,.07);margin-bottom:16px;align-self:flex-start}
.bx .pill img{width:16px;height:16px;object-fit:contain}
.bx .pill img + img{margin-left:-5px}
.bx .pill svg{width:13px;height:13px;stroke:var(--tinta);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bx h3{font-size:19px;font-weight:700;margin-bottom:9px;line-height:1.25}
.bx p{font-size:14.5px;color:var(--gris);margin-bottom:14px;flex:1;align-self:start}
.bx .mini{margin:0 -24px;padding:0 20px 22px;position:relative;min-height:122px;align-self:end}
/* Dentro de la tarjeta el enlace se lee como boton, no como un link azul. */
.bx .lnk{justify-self:start;align-self:start;background:#fff;color:var(--tinta);
  border:1px solid rgba(15,23,32,.07);border-radius:11px;padding:10px 15px;margin-bottom:18px;
  box-shadow:0 1px 2px rgba(15,23,32,.05);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.bx .lnk svg{stroke:var(--naranja)}
.bx .lnk:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(15,23,32,.3)}
.bx.ancho{grid-column:span 2}
@media (max-width:980px){ .bento{grid-template-columns:1fr 1fr} .bx.ancho{grid-column:span 2} }
@media (max-width:660px){ .bento{grid-template-columns:1fr} .bx.ancho{grid-column:span 1}
  .bx{display:flex;flex-direction:column;grid-row:auto}
  /* En flex vertical align-self es el eje horizontal: sin esto el recuadro
     de abajo se encoge contra el borde derecho. */
  .bx > p,.bx > .mini{align-self:stretch}
  .bx > .pill,.bx > .lnk{align-self:flex-start} }

/* piezas de las mini-ilustraciones */
/* Las mini interfaces van rectas: imitan una tabla de la app, no una tarjeta. */
.ui{background:#fff;border-radius:0;box-shadow:0 8px 22px -10px rgba(10,12,30,.26);padding:11px 13px}
.ui-r{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--gris);padding:6px 0}
.ui-r + .ui-r{border-top:1px solid #EEF1F4}
.ui-r .d{width:8px;height:8px;flex:0 0 auto}
.ui-r b{color:var(--tinta);font-weight:600}
.ui-r .tg{margin-left:auto;font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:0;white-space:nowrap}
.bar{height:7px;background:#E7EBEF;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--naranja),#F5A96A)}
.chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:6px 11px;
  font-size:11px;font-weight:600;color:var(--tinta);box-shadow:0 4px 12px -4px rgba(10,12,30,.2);margin:0 5px 7px 0}
.chip img{width:14px;height:14px}

/* ---------------- bloque oscuro ---------------- */
.osc{background:var(--carbon);color:#fff;overflow:hidden}
.osc::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 50% 0%,rgba(124,92,230,.32),transparent 62%),
             radial-gradient(620px 300px at 85% 95%,rgba(234,106,30,.2),transparent 62%)}
.osc .wrap{position:relative;z-index:1}
.osc .centro h2{color:#fff}.osc .centro p{color:#9FB0BD}
.osc .eyebrow{color:#A98BEA}
.oc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.oc{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:24px;
  display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .25s}
.oc:hover{transform:translateY(-4px);border-color:rgba(169,139,234,.5)}
.oc h3{font-size:17.5px;color:#fff;margin-bottom:9px}
.oc p{font-size:14.5px;color:#9FB0BD;margin-bottom:16px}
.oc .shot{border-radius:11px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#17212B}
.oc .shot img{width:100%;height:150px;object-fit:cover;object-position:top left}
@media (max-width:980px){ .oc-grid{grid-template-columns:1fr} }

/* ---------------- las tres interfaces de la sección de IA ----------------
   Todo dibujado con CSS: ninguna captura. Cada una cuenta un ciclo distinto
   y las tres respetan prefers-reduced-motion al final del bloque. */

/* ====== 1. la conversación de WhatsApp ====== */
.oc .wa{background:#0B141A;border:1px solid rgba(255,255,255,.08);min-height:318px;flex:1;display:flex;flex-direction:column;
  position:relative;overflow:hidden}
.wa::before{content:'';position:absolute;inset:0;opacity:.045;pointer-events:none;
  background-image:radial-gradient(circle at 12px 12px,#fff 1.4px,transparent 1.5px),
                   radial-gradient(circle at 38px 32px,#fff 1px,transparent 1.1px);
  background-size:52px 52px}
.wa-top{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#202C33;position:relative;z-index:1}
.wa-av{width:26px;height:26px;border-radius:50%;background:#2A3942;display:grid;place-items:center;flex:0 0 auto;overflow:hidden}
.wa-av img{width:15px;height:15px}
.wa-av.ag{box-shadow:0 0 0 1.5px #7C5CE6}
.wa-top b{display:block;font-size:12px;color:#E9EDF0;line-height:1.2}
.wa-top small{display:block;font-size:10px;color:#8696A0}
.wa-marca{width:16px;height:16px;margin-left:auto;object-fit:contain;opacity:.85}
.wa-cuerpo{position:relative;z-index:1;flex:1;padding:11px 10px;display:flex;flex-direction:column;gap:7px}
.wa-msg{display:flex;opacity:0;transform:translateY(8px) scale(.97)}
.wa-msg.mio{justify-content:flex-end}
.wa-msg p{max-width:84%;font-size:11.5px;line-height:1.42;padding:6px 9px 5px;position:relative;color:#E9EDF0}
.wa-msg.suyo p{background:#202C33;border-radius:0 8px 8px 8px}
.wa-msg.mio p{background:#005C4B;border-radius:8px 0 8px 8px}
.wa-msg em{display:block;text-align:right;font-style:normal;font-size:9px;color:#8696A0;margin-top:2px}
.wa-msg.mio em{color:#9BC5B6}
.wa-tar{display:flex;gap:7px;align-items:center;background:rgba(0,0,0,.28);border-left:2px solid #6FC46C;
  padding:6px 8px;margin-top:6px}
.wa-tar i{width:7px;height:7px;background:#6FC46C;flex:0 0 auto}
.wa-tar b{display:block;font-size:10.5px;color:#fff;line-height:1.2}
.wa-tar small{display:block;font-size:9.5px;color:#9BC5B6}
.oc:nth-child(1) .wa-msg{animation:waEntra 11s ease-in-out infinite;animation-delay:calc(var(--k)*1.15s)}
@keyframes waEntra{0%,3%{opacity:0;transform:translateY(8px) scale(.97)}9%,86%{opacity:1;transform:none}94%,100%{opacity:0}}

/* ====== 2. la grilla de Meet y Flowdesk tomando nota ====== */
.oc .mt{background:#202124;border:1px solid rgba(255,255,255,.08);min-height:318px;flex:1;padding:9px;
  display:flex;flex-direction:column;gap:7px;overflow:hidden}
.mt-grilla{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mt-p{position:relative;aspect-ratio:16/9;background:#3C4043;display:grid;place-items:center}
.mt-p i{width:26px;height:26px;border-radius:50%;background:#5F6368;color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:700;font-style:normal}
.mt-p.p-a i{background:#4E7FBF}.mt-p.p-b i{background:#C06A4A}.mt-p.p-c i{background:#5B8F5C}
.mt-p em{position:absolute;left:6px;bottom:5px;font-style:normal;font-size:9px;color:#E8EAED}
.mt-p.bot{background:#1B2430;box-shadow:inset 0 0 0 1.5px #7C5CE6}
.mt-p.bot img{width:21px;height:21px}
.mt-hab{position:absolute;inset:0;box-shadow:inset 0 0 0 2px #8AB4F8;animation:mtHabla 11s ease-in-out infinite}
@keyframes mtHabla{0%,22%{opacity:0}28%,52%{opacity:1}58%,100%{opacity:0}}
.mt-barra{display:flex;align-items:center;justify-content:center;gap:7px;padding:4px 0}
.mt-b{width:22px;height:22px;border-radius:50%;background:#3C4043}
.mt-b.rojo{background:#EA4335;width:34px;border-radius:99px}
.mt-rec{position:absolute;right:16px;font-style:normal;font-size:9px;font-weight:800;color:#EA4335;letter-spacing:.08em}
.mt-rec::before{content:'';display:inline-block;width:6px;height:6px;background:#EA4335;margin-right:4px;
  vertical-align:1px;animation:mtLatido 1.4s ease-in-out infinite}
@keyframes mtLatido{50%{opacity:.2}}
.mt-barra{position:relative}
.mt-nota{background:#111A22;border:1px solid rgba(124,92,230,.3);padding:8px 9px;display:grid;gap:6px;
  align-content:start;flex:1}
.mt-nt{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#A98BEA}
.mt-nt img{width:13px;height:13px}
.mt-f{display:flex;gap:8px;align-items:center;background:#17212B;border-left:2px solid var(--verde);padding:6px 8px;
  opacity:0;transform:translateY(6px);animation:mtFila 11s ease-in-out infinite;animation-delay:calc(1.6s + var(--j)*1.5s)}
.mt-f i{width:7px;height:7px;background:var(--verde);flex:0 0 auto}
.mt-f b{display:block;font-size:10.5px;color:#fff;line-height:1.2}
.mt-f small{display:block;font-size:9.5px;color:#8795A1}
@keyframes mtFila{0%,4%{opacity:0;transform:translateY(6px)}12%,80%{opacity:1;transform:none}90%,100%{opacity:0}}

/* ====== 3. el aviso en la app y el mismo aviso por WhatsApp ====== */
.oc .av{min-height:318px;flex:1;display:grid;grid-template-rows:1fr auto;gap:9px}
.av-app{background:#111A22;border:1px solid rgba(255,255,255,.1);padding:9px 10px;display:flex;flex-direction:column;gap:7px;
  justify-content:flex-start}
.av-top{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#C7D3DC;
  padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.08)}
.av-top img{width:15px;height:15px}
.av-pin{margin-left:auto;font-style:normal;background:var(--naranja);color:#fff;font-size:9px;font-weight:800;
  padding:1px 6px;border-radius:99px;animation:avPin 11s ease-in-out infinite}
@keyframes avPin{0%,10%{transform:scale(1)}14%{transform:scale(1.35)}20%,100%{transform:scale(1)}}
.av-f{display:flex;gap:8px;align-items:center;background:#17212B;padding:8px 9px;border-left:2.5px solid #3E5062;
  opacity:0;transform:translateX(-8px)}
.av-f i{width:8px;height:8px;flex:0 0 auto}
.av-f i.nar{background:var(--naranja)}.av-f i.roj{background:#E05B4B}
.av-f.uno{border-left-color:var(--naranja);animation:avF1 11s ease-in-out infinite}
.av-f.dos{border-left-color:#E05B4B;animation:avF2 11s ease-in-out infinite}
.av-f b{display:block;font-size:11px;color:#fff;line-height:1.2}
.av-f small{display:block;font-size:9.5px;color:#8795A1}
@keyframes avF1{0%,8%{opacity:0;transform:translateX(-8px)}15%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes avF2{0%,34%{opacity:0;transform:translateX(-8px)}41%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.av-wa{background:#0B141A;border:1px solid rgba(255,255,255,.08);padding:8px 9px;opacity:0;transform:translateY(8px);
  animation:avWa 11s ease-in-out infinite}
@keyframes avWa{0%,58%{opacity:0;transform:translateY(8px)}66%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
.av-wa-top{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:#8696A0;margin-bottom:6px}
.av-wa-top img{width:13px;height:13px}
.av-wa-msg p{background:#005C4B;color:#E9EDF0;font-size:11px;line-height:1.4;padding:6px 9px 5px;border-radius:8px 0 8px 8px}
.av-wa-msg em{display:block;text-align:right;font-style:normal;font-size:9px;color:#9BC5B6;margin-top:2px}

@media (prefers-reduced-motion:reduce){
  .wa-msg,.mt-f,.av-f,.av-wa{opacity:1 !important;transform:none !important;animation:none !important}
  .mt-hab,.mt-rec::before,.av-pin{animation:none !important}
}

/* ---------------- split con lista ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin-bottom:16px}
.split > div > p{font-size:17px;color:var(--gris);margin-bottom:26px}
.lista{list-style:none;display:grid;gap:18px}
.lista li{display:flex;gap:13px;align-items:flex-start}
.lista .ic{width:34px;height:34px;border-radius:10px;background:#FFF1E7;display:grid;place-items:center;flex:0 0 auto}
.lista .ic svg{width:17px;height:17px;stroke:var(--naranja);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lista b{display:block;font-size:15.5px;margin-bottom:3px}
.lista span{font-size:14px;color:var(--gris);line-height:1.5}
.acc-sec{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.split .vis{border-radius:20px;overflow:hidden;border:1px solid var(--linea);box-shadow:0 36px 70px -34px rgba(10,12,30,.5);background:#17212B}
@media (max-width:900px){ .split{grid-template-columns:1fr;gap:34px} }


/* ---------------- tablero + teléfono con la notificación ----------------
   El aviso entra de arriba, se queda tres segundos y se va. Dos avisos
   encadenados: primero la tarea nueva, después el vencimiento. */
.mk{position:relative;padding-bottom:40px}
.mk-pc{border-radius:16px;overflow:hidden;border:1px solid var(--linea);background:#17212B;
  box-shadow:0 36px 72px -34px rgba(10,12,30,.6)}
.mk-barra{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#17212B;border-bottom:1px solid #243340}
.mk-barra i{width:9px;height:9px;border-radius:50%;background:#3A4C5C;display:block}
.mk-barra i:nth-child(1){background:#E05B4B}.mk-barra i:nth-child(2){background:#E0B14B}.mk-barra i:nth-child(3){background:#4BAE55}
.mk-barra em{margin-left:9px;font-style:normal;font-size:10.5px;color:#7D93A3;background:#0F1519;border-radius:6px;padding:3px 10px}

.mk-tel{position:absolute;right:-18px;bottom:-10px;width:216px;height:430px;border-radius:30px;
  background:#0B0F14;padding:9px;box-shadow:0 30px 60px -22px rgba(10,12,30,.7),0 0 0 1.5px #252E36}
.mk-tel::before{content:'';position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:74px;height:20px;background:#0B0F14;border-radius:99px;z-index:3}
.mk-pantalla{position:relative;height:100%;border-radius:23px;overflow:hidden;
  background:linear-gradient(165deg,#1C2A3A,#2E4356 55%,#44607A)}
.mk-hora{position:absolute;top:52px;left:0;right:0;text-align:center;color:rgba(255,255,255,.95);
  font-family:'Sora';font-size:40px;font-weight:700;letter-spacing:-.03em}
.mk-hora::after{content:'martes 7 de octubre';display:block;font-family:'Inter';font-size:11px;
  font-weight:500;color:rgba(255,255,255,.7);letter-spacing:0;margin-top:2px}

/* Las notificaciones, al tamanio y al estilo de iOS: chicas, apiladas, con
   el icono de la app a la izquierda y la hora a la derecha. */
.mk-avisos{position:absolute;left:9px;right:9px;top:136px;display:grid;gap:6px}
.mk-n{display:flex;gap:8px;align-items:flex-start;background:rgba(248,249,251,.86);backdrop-filter:blur(14px);
  border-radius:13px;padding:7px 9px;opacity:0;transform:translateY(-14px) scale(.95);
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
.mk-n img{width:17px;height:17px;border-radius:4px;object-fit:contain;flex:0 0 auto;margin-top:1px}
.mk-n .tx{min-width:0;flex:1}
.mk-n .ap{display:flex;align-items:center;gap:4px;font-size:8.5px;font-weight:700;color:#7A8894;
  text-transform:uppercase;letter-spacing:.05em}
.mk-n .ap em{margin-left:auto;font-style:normal;font-weight:500;text-transform:none;letter-spacing:0}
.mk-n b{display:block;font-size:11px;color:#111;line-height:1.25;margin-top:1px}
.mk-n p{font-size:10.5px;color:#3C4651;line-height:1.3;margin-top:1px}
.mk-n:nth-child(1){animation:mkN 13s ease-in-out infinite}
.mk-n:nth-child(2){animation:mkN 13s ease-in-out infinite;animation-delay:2.4s}
.mk-n:nth-child(3){animation:mkN 13s ease-in-out infinite;animation-delay:4.8s}
.mk-n:nth-child(4){animation:mkN 13s ease-in-out infinite;animation-delay:7.2s}
@keyframes mkN{
  0%,2%{opacity:0;transform:translateY(-14px) scale(.95)}
  6%,62%{opacity:1;transform:none}
  70%,100%{opacity:0;transform:translateY(-6px) scale(.98)}
}
@media (max-width:1100px){ .mk-tel{width:180px;height:360px;right:-10px} .mk-hora{font-size:33px;top:44px} }
@media (max-width:900px){
  .mk{padding-bottom:0}
  .mk-tel{position:relative;right:auto;bottom:auto;margin:22px auto 0;width:208px;height:410px}
}
@media (prefers-reduced-motion:reduce){
  .mk-aviso{animation:none;opacity:1;transform:none}
  .mk-aviso.dos{display:none}
}

/* ---------------- solapas por rubro ---------------- */
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.tab{background:#fff;border:1.5px solid var(--linea);border-radius:99px;padding:10px 20px;font-size:14px;
  font-weight:700;color:var(--gris);cursor:pointer;font-family:inherit;transition:all .2s var(--ease)}
.tab:hover{border-color:var(--gris2);color:var(--tinta)}
.tab.on{background:var(--tinta);border-color:var(--tinta);color:#fff}
.panel{display:none;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center}
.panel.on{display:grid;animation:aparece .45s var(--ease)}
@keyframes aparece{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel h3{font-size:clamp(23px,2.8vw,31px);font-weight:800;margin-bottom:14px}
.panel > div > p{font-size:16px;color:var(--gris);margin-bottom:20px}
.pl{list-style:none;display:grid;gap:11px;margin-bottom:24px}
.pl li{display:flex;gap:10px;font-size:14.5px;color:var(--gris)}
.pl svg{width:17px;height:17px;stroke:var(--verde);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:2px}
.dato{display:inline-flex;align-items:baseline;gap:9px;background:var(--fondo);border-radius:13px;padding:13px 18px}
.dato b{font-family:'Sora';font-size:28px;font-weight:800;letter-spacing:-.03em}
.dato span{font-size:13px;color:var(--gris)}
.panel .cap{border-radius:16px;overflow:hidden;border:1px solid var(--linea);box-shadow:0 34px 66px -32px rgba(10,12,30,.5);background:#17212B}
.panel .cap .barra{display:flex;align-items:center;gap:6px;padding:9px 13px;background:#17212B;border-bottom:1px solid #243340}
.panel .cap .barra i{width:9px;height:9px;border-radius:50%;background:#3A4C5C;display:block}
.panel .cap .barra i:nth-child(1){background:#E05B4B}.panel .cap .barra i:nth-child(2){background:#E0B14B}.panel .cap .barra i:nth-child(3){background:#4BAE55}
.panel .cap .barra em{margin-left:9px;font-style:normal;font-size:10.5px;color:#7D93A3;background:#0F1519;border-radius:6px;padding:3px 10px}
@media (max-width:900px){ .panel.on{grid-template-columns:1fr} .tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px} .tab{flex:0 0 auto} }

/* ---------------- cta violeta con ticker ---------------- */
.cta-v{background:linear-gradient(118deg,var(--violeta-d),var(--violeta) 55%,#9B7BF0);color:#fff;overflow:hidden}
.cta-v .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cta-v h2{font-size:clamp(27px,3.6vw,40px);font-weight:800;color:#fff;margin-bottom:14px}
.cta-v p{color:rgba(255,255,255,.85);font-size:16.5px;margin-bottom:26px;max-width:46ch}
.tick{height:180px;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.tick ul{list-style:none;animation:rueda 16s linear infinite}
.tick li{font-family:'Sora';font-size:clamp(20px,2.4vw,29px);font-weight:700;color:rgba(255,255,255,.45);
  height:60px;display:flex;align-items:center;letter-spacing:-.02em}
@keyframes rueda{to{transform:translateY(-360px)}}
@media (max-width:900px){ .cta-v .wrap{grid-template-columns:1fr;gap:28px} .tick{height:140px} }

/* ---------------- detras del producto ---------------- */
.m360{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.mc{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:24px;transition:transform .25s var(--ease),box-shadow .25s}
.mc:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(10,12,30,.4)}
.mc .n{width:38px;height:38px;border-radius:11px;background:#FFF1E7;display:grid;place-items:center;margin-bottom:14px}
.mc .n svg{width:19px;height:19px;stroke:var(--naranja);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mc h3{font-size:16.5px;margin-bottom:8px}
.mc p{font-size:14px;color:var(--gris)}
@media (max-width:900px){ .m360{grid-template-columns:1fr} }

/* ---------------- planes ---------------- */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.pl-c{position:relative;background:#fff;border:1.5px solid var(--linea);border-radius:20px;padding:28px 26px;
  display:flex;flex-direction:column}
.pl-c.destacado{border-color:var(--naranja);box-shadow:0 26px 54px -32px rgba(234,106,30,.85)}
.pl-tag{position:absolute;top:-12px;left:26px;background:var(--naranja);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:99px}
.pl-nom{font-family:'Sora';font-size:18px;font-weight:800}
.pl-pre{display:flex;align-items:baseline;gap:3px;margin:10px 0 4px}
.pl-pre .cur{font-size:19px;font-weight:700;color:var(--gris)}
.pl-pre .num{font-family:'Sora';font-size:42px;font-weight:800;letter-spacing:-.035em}
.pl-pre .per{font-size:13px;color:var(--gris);margin-left:7px}
.pl-us{font-size:13.5px;color:var(--gris);margin-bottom:20px;min-height:38px}
.pl-li{list-style:none;display:grid;gap:10px;margin-bottom:24px;flex:1}
.pl-li li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.45}
.pl-li li.off{color:#9AA7B2}
.pl-li li b{font-weight:700}
.pt{width:16px;height:16px;flex:0 0 auto;margin-top:3px;stroke:var(--verde);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.pt.no{stroke:#B8C2CB}
@media (max-width:900px){ .planes{grid-template-columns:1fr} .pl-us{min-height:0} }

/* ---------------- preguntas ---------------- */
.faq{max-width:840px;margin:0 auto;display:grid;gap:11px}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:19px 22px}
.faq details[open]{border-color:#CBD4DC;box-shadow:0 10px 26px -20px rgba(10,12,30,.4)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px;align-items:center;
  font-weight:700;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:23px;color:var(--naranja);line-height:1;font-weight:700}
.faq details[open] summary::after{content:'–'}
.faq p{font-size:15px;color:var(--gris);margin-top:13px;line-height:1.62}

/* ---------------- pie ---------------- */
footer{background:var(--carbon);color:#8795A1;padding:72px 0 36px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;margin-bottom:46px}
footer h4{color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-family:'Inter';font-weight:800}
footer a{display:block;padding:6px 0;transition:color .2s}
footer a:hover{color:var(--naranja)}
footer .marca{display:flex;align-items:center;gap:9px;font-family:'Sora';font-weight:800;font-size:19px;color:#fff;margin-bottom:14px}
footer .marca img{width:26px;height:26px}
footer .marca span{color:var(--naranja)}
footer .fin{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:13px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){ footer .cols{grid-template-columns:1fr 1fr;gap:30px} }

/* ---------------- aparicion al scrollear ---------------- */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--d,0)*.08s)}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .hero .fc-card{opacity:1;transform:none}
  .tick ul{animation:none}
}
@media (max-width:860px){
  nav .links{display:none}
  .burger{display:flex}
  /* En 390px no entran marca + Ingresar + botón + hamburguesa: Ingresar vive en el menú. */
  nav .in{padding:12px 16px;gap:10px}
  nav .marca{font-size:17px;gap:7px}
  nav .marca img{width:23px;height:23px}
  nav .der{gap:8px}
  /* En celular Ingresar se ve como botón: si no, parece texto y no se toca.
     Y "Empezar gratis" sale de la barra (no entran los dos) y pasa al menú. */
  nav .der .ing{display:inline-flex;align-items:center;border:1.5px solid rgba(255,255,255,.35);
    border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:700}
  nav.on .der .ing{border-color:var(--linea);color:var(--tinta)}
  nav .der .btn-o{display:none}
  nav.abierto .links .btn-menu{display:flex;margin:10px 24px 6px;width:calc(100% - 48px);
    background:var(--naranja);color:#fff;border:0;border-radius:10px;padding:13px;justify-content:center;
    font-weight:700;font-size:14.5px}
  /* Justo abajo del CTA y del mismo ancho: se lee como la segunda opción. */
  nav.abierto .links .btn-instalar:not([hidden]){display:flex;margin:0 24px 10px;width:calc(100% - 48px);
    padding:13px;font-size:14.5px}
  nav .der .btn-o{padding:9px 15px;font-size:13px}
  nav.abierto .links a.solo-movil{display:block}
  nav.abierto .links{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;
    background:#fff;border-top:1px solid var(--linea);box-shadow:0 20px 40px rgba(0,0,0,.1);padding:8px 0;
    max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  nav.abierto .links > a{padding:14px 24px;color:var(--gris)}
  /* El panel scrollea: sin esto el flex le come el alto al acordeón. */
  nav.abierto .links > *{flex:0 0 auto}

  /* El mismo menu que en escritorio, abierto en acordeon adentro del panel. */
  nav.abierto .links .mg-btn{padding:14px 24px;color:var(--gris);width:100%;justify-content:space-between;
    font-size:14.5px;font-weight:600}
  nav.abierto .links .mg-btn[aria-expanded="true"]{color:var(--tinta)}
  #links .mg{position:static;opacity:1;visibility:visible;transform:none;background:var(--fondo);
    border-top:0;box-shadow:none;max-height:0;overflow:hidden;transition:max-height .34s var(--ease)}
  #links .mg.abierto{max-height:1600px}
  #links .mg-in{display:block;max-width:none;padding:6px 14px 14px;gap:0}
  #links .mg-side{display:none}
  #links .mg-h{margin:10px 0 4px;padding:0 10px}
  #links .mg-list{grid-template-columns:1fr;gap:0}
  #links .mg-it{padding:10px}
  #links .mg-col{gap:0}
  #links .mg-col a{padding:10px}
  .pad{padding:68px 0}
  .hero{min-height:0}
  .hero .wrap{padding-top:104px;padding-bottom:64px}
  .centro{margin-bottom:38px}
  .hero .acc{flex-direction:column}
  /* .centro entra en la lista: un boton con etiqueta larga adentro de una
     seccion centrada se salia del encuadre en 390px. */
  .hero .acc .btn,.bx .btn,.cta-v .btn,.acc-sec .btn,.pl-c .btn,.centro .btn{width:100%}
  .bx{min-height:0;padding:22px 20px 0}
  .bx .mini{margin:0 -20px;padding:0 16px 18px}
}

.btn-menu{display:none}


/* ================= la ventana de FlowChat =================
   La usan la landing de FlowChat y las cinco paginas de rubro. */
/* la ventana grande de FlowChat */
.vt{max-width:960px;margin:0 auto;border-radius:18px;overflow:hidden;border:1px solid #2A3744;
  background:#17212B;box-shadow:0 44px 90px -40px rgba(10,12,30,.75)}
.vt-barra{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#111A22;border-bottom:1px solid #2A3744}
.vt-barra img{width:17px;height:17px;border-radius:4px}
.vt-barra b{font-size:12px;font-weight:800;color:#C7D3DC}
.vt-barra .pt{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--verde);
  box-shadow:0 0 0 3px rgba(63,154,60,.18)}
.vt-cuerpo{display:grid;grid-template-columns:232px 1fr}
.vt-lat{background:#111A22;border-right:1px solid #1E2A35;padding:12px 9px}
.vt-t{font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#56697A;padding:9px 8px 6px}
.vt-g{display:flex;align-items:center;gap:9px;padding:8px;border-radius:8px;font-size:12px;color:#8DA0AE}
.vt-g.on{background:rgba(234,106,30,.14);color:#F7B183}
.vt-g i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:9.5px;
  font-weight:800;font-style:normal;color:#fff;flex:0 0 auto}
.vt-g b{font-weight:600}
.vt-g .n{margin-left:auto;background:var(--naranja);color:#fff;font-size:9px;font-weight:800;border-radius:99px;padding:1px 6px}
.vt-g img{width:24px;height:24px;border-radius:7px;background:#241C3D;padding:4px;box-shadow:0 0 0 1.5px #7C5CE6}
.vt-chat{display:flex;flex-direction:column;min-height:400px;background:linear-gradient(180deg,#17212B,#141E27)}
.vt-hd{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #243340}
.vt-hd .av{width:32px;height:32px;border-radius:9px;background:var(--naranja);color:#fff;display:grid;
  place-items:center;font-family:'Sora';font-size:11px;font-weight:800}
.vt-hd b{display:block;font-size:13.5px;color:#fff}
.vt-hd small{display:block;font-size:11px;color:#8DA0AE}
.vt-ms{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:11px}
.vm{display:flex;gap:9px;align-items:flex-end;max-width:84%;opacity:0;transform:translateY(9px)}
.vm.mio{margin-left:auto;flex-direction:row-reverse}
.vm .av{width:27px;height:27px;border-radius:50%;background:#3F5A6E;color:#fff;display:grid;place-items:center;
  font-size:10px;font-weight:800;flex:0 0 auto}
.vm .av.bot{background:#241C3D;box-shadow:0 0 0 1.5px #7C5CE6;overflow:hidden}
.vm .av.bot img{width:15px;height:15px}
.vm .b{background:#22303C;padding:9px 12px 7px;font-size:13.5px;color:#DCE5EC;line-height:1.45;border-radius:12px 12px 12px 3px}
.vm.mio .b{background:#0F4C3F;color:#E9F5F1;border-radius:12px 12px 3px 12px}
.vm .b > b{display:block;font-size:11px;color:#F0873F;margin-bottom:2px}
.vm.bot .b > b{color:#A98BEA}
.vm .b i{display:block;font-style:normal;font-size:10px;color:#7D93A3;text-align:right;margin-top:3px}
.vm mark{background:rgba(124,92,230,.3);color:#C9B8FF;border-radius:4px;padding:1px 5px;font-weight:700}
.vm .ref{background:rgba(44,111,181,.22);color:#9CC6F0;border-radius:4px;padding:1px 5px;font-weight:700}
.vt-tar{display:flex;gap:9px;align-items:center;margin-top:9px;background:#1A2733;border:1px solid #2F3F4D;
  border-left:3px solid var(--verde);padding:9px 11px}
.vt-tar span.p{width:11px;height:11px;border-radius:50%;background:var(--verde);flex:0 0 auto}
.vt-tar b{display:block;font-size:12.5px;color:#fff;line-height:1.3}
.vt-tar small{display:block;font-size:11px;color:#8DA0AE;margin-top:1px}
.vt-in{display:flex;align-items:center;gap:11px;padding:12px 14px;border-top:1px solid #243340;background:#1D2A36}
.vt-in .ph{flex:1;font-size:13px;color:#6E8695}
.vt-in .ic{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center}
.vt-in .ic svg{width:15px;height:15px;stroke:#9FB0BD;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vt-in .mas{width:30px;height:30px;border-radius:50%;background:var(--naranja);color:#fff;display:grid;
  place-items:center;font-size:18px;font-weight:700;line-height:1}
.vt.go .vm{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(.3s + var(--k)*.75s)}
@media (max-width:820px){ .vt-cuerpo{grid-template-columns:1fr} .vt-lat{display:none} }

/* ---------------- migas de pan ---------------- */
nav.miga{position:static;font-size:13px;color:rgba(255,255,255,.72);margin-bottom:18px;display:block}
.miga a:hover{color:#fff}
.miga span{color:rgba(255,255,255,.95)}

/* ---------------- automatizaciones ---------------- */
.autos2{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.auto2{display:flex;gap:14px;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:22px 20px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.auto2:hover{transform:translateY(-3px);box-shadow:0 18px 36px -26px rgba(10,12,30,.45)}
.auto2 .n{width:30px;height:30px;border-radius:9px;background:var(--tinta);color:#fff;font-size:13px;
  font-weight:800;display:grid;place-items:center;flex:0 0 auto}
.auto2 b{display:block;font-size:15.5px;margin-bottom:5px}
.auto2 p{font-size:14px;color:var(--gris);line-height:1.5}
.auto2 .flujo{font-size:12.5px;color:var(--azul);font-weight:700;margin-top:9px}
@media (max-width:980px){ .autos2{grid-template-columns:1fr} }

/* una tarjeta del método que además es un enlace */
a.mc{display:block;color:inherit}
a.mc:hover h3{color:var(--naranja)}

/* el selector de usuarios del plan Pro */
.pl-sel{display:flex;align-items:center;gap:10px;margin:-10px 0 18px}
.pl-sel label{font-size:13px;font-weight:700;color:var(--gris)}
.pl-sel select{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--tinta);background:#fff;
  border:1.5px solid var(--linea);border-radius:9px;padding:7px 11px;cursor:pointer}
.pl-sel select:focus{outline:2px solid var(--naranja);outline-offset:1px}
/* con la sesión iniciada la promo de 7 días no aplica */
body.fd-auth .pl-c .promo7{display:none}

/* Las redes en el pie: el logo de cada una adentro de un círculo. */
footer .redes{display:flex;gap:10px;margin-top:20px}
footer .redes a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  padding:0;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
footer .redes svg{width:17px;height:17px;fill:#A9B6C0;transition:fill .2s}
footer .redes a:hover{transform:translateY(-2px)}
footer .redes a:hover svg{fill:#fff}
footer .redes a.ig:hover{background:#E4405F;border-color:#E4405F}
footer .redes a.fb:hover{background:#1877F2;border-color:#1877F2}
footer .redes a.yt:hover{background:#FF0000;border-color:#FF0000}
footer .redes a.li:hover{background:#0A66C2;border-color:#0A66C2}
@media (prefers-reduced-motion:reduce){ footer .redes a:hover{transform:none} }

/* ===== Botón "Instalar la app" =====
   De otro color que el CTA naranja a propósito: no compite con "Empezar
   gratis", que es la acción principal. Aparece sólo cuando instalar es
   posible, así que si no está, es porque el navegador no puede.

   SOLO EN EL CELULAR. Oculto por defecto -igual que .btn-menu-: lo prende
   únicamente la regla del menú desplegable, que vive dentro del
   @media (max-width:980px). En una computadora instalar la PWA no es lo que
   queremos empujar, y dos botones de instalar amontonaban la barra. */
.btn-instalar{display:none;align-items:center;justify-content:center;gap:9px;
  border:0;cursor:pointer;font-family:inherit;font-weight:700;color:#fff;
  background:var(--violeta);border-radius:10px;transition:background .15s var(--ease)}
.btn-instalar:hover{background:var(--violeta-d)}
.btn-instalar[hidden]{display:none}
.btn-instalar svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.inst-velo{position:fixed;inset:0;z-index:300;background:rgba(10,15,20,.55);
  display:grid;place-items:center;padding:20px}
.inst-caja{width:100%;max-width:420px;background:#fff;border-radius:16px;padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
.inst-caja h3{font-size:20px;font-weight:800;margin-bottom:8px}
.inst-caja p{font-size:14px;color:var(--gris);margin-bottom:16px}
.inst-caja ol{margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.inst-caja li{font-size:14.5px;line-height:1.5}
.inst-caja li b{font-weight:700;color:var(--tinta)}
.inst-ok{width:100%;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  color:#fff;background:var(--violeta);border-radius:10px;padding:13px}
.inst-ok:hover{background:var(--violeta-d)}