/* ==========================================================================
   Chatealo · Páginas internas (Funcionalidades, Integraciones, Novedades, Precios)
   Usa el mismo sistema que la home (css/styles.css): Poppins, escala en rem
   (1rem = 10px a 1920), colores de marca, botones redondos, tarjetas oscuras con
   --dark-grad, header con megamenú, banner CTA y footer.
   ========================================================================== */

:root {
  --brand-indigo: #6366f1;
  --line: #ececf2;
  --lav: #f7f7fd;
  --card-shadow: 0 .2rem .6rem rgba(40, 36, 110, .05), 0 2.4rem 4.8rem -2.4rem rgba(40, 36, 110, .22);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Botones extra ---------- */
.btn--outline {
  box-shadow: inset 0 0 0 .15rem var(--brand-indigo);
  color: var(--brand-indigo);
  background: #fff;
  transition: background-color .2s ease, color .2s ease;
}
.btn--outline:hover { filter: none; background: var(--brand-indigo); color: #fff; }
.btn--light { box-shadow: inset 0 0 0 .15rem rgba(255, 255, 255, .5); color: #fff; transition: background-color .2s ease, color .2s ease; }
.btn--light:hover { filter: none; background: #fff; color: var(--ink-strong); }
.btn--md { height: 6.4rem; padding: 0 3.6rem; font-size: 1.8rem; }
.btn svg { width: 1.8rem; height: 1.8rem; margin-left: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.text-indigo { color: var(--brand-indigo); }

/* Página actual en el menú */
.site-nav__link[aria-current="page"] { color: #000; box-shadow: inset 0 -.2rem 0 var(--green); }
.megamenu__links a[aria-current="page"] { font-weight: 600; color: var(--ink-black); }

/* ---------- Hero de página (hereda el fondo y el padding de .hero) ---------- */
.page-hero { padding-bottom: 12rem; }
.page-hero--compact { padding-bottom: 6rem; }
.page-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.page-tag {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 4rem;
  padding: 0 2rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 0 0 .1rem #e2e2f0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-indigo);
}
.page-tag::before { content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .4rem rgba(37, 224, 137, .2); }
/* Marcelo (R2): los títulos cortaban dejando una o dos palabras sueltas en el
   último renglón ("ya usás", "por WhatsApp", "WhatsApp"). Repartiendo los
   renglones se arregla en las tres páginas donde pasaba, sin empeorar ninguna
   de las otras: medido en las 44 a 390 y a 1440. */
.page-hero__title { max-width: 116rem; margin-top: 3rem; font-size: 5rem; font-weight: 600; line-height: 6rem; text-wrap: balance; color: var(--ink); }
.page-hero__lead { max-width: 84rem; margin-top: 2.6rem; font-size: 2.39rem; font-weight: 500; line-height: 3.25rem; color: var(--ink); }
.page-hero__moneda { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; font-size: 1.8rem; font-weight: 500; line-height: 2.6rem; color: var(--ink-600); }
.page-hero__moneda svg { flex: none; width: 2.7rem; height: 1.8rem; border-radius: .3rem; box-shadow: 0 0 0 .1rem rgba(0, 0, 0, .08); }
.page-hero__moneda svg[hidden] { display: none; }
.moneda-selector { width: 100%; margin-top: 2.8rem; text-align: center; }
.moneda { display: inline-flex; gap: .4rem; padding: .4rem; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 .2rem var(--line); }
.moneda button { min-width: 8.4rem; height: 4.4rem; border-radius: 99px; font-size: 1.6rem; font-weight: 600; color: var(--ink-600); transition: background-color .2s ease, color .2s ease; }
.moneda button[aria-pressed="true"] { background: var(--brand-indigo); color: #fff; }
.moneda button:focus-visible { outline: .2rem solid var(--brand-indigo); outline-offset: .2rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.8rem; margin-top: 4.13rem; }
.page-hero__visual { margin-top: 8rem; }

/* Hero a dos columnas: texto a la izquierda, visual a la derecha */
.hero-split { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: 5rem; align-items: center; padding-bottom: 4rem; }
.hero-split__text { text-align: left; }
.hero-split .page-hero__title { max-width: none; margin-top: 0; }
.hero-split .page-hero__lead { max-width: 62rem; }
.hero-split .page-hero__actions { justify-content: flex-start; }
/* el globo desborda la columna hacia la derecha */
.hero-split .globe { position: relative; justify-self: start; width: 100%; min-height: 48rem; }
.hero-split .globe__canvas { position: absolute; left: 0; top: 56%; width: 152%; max-width: none; transform: translateY(-50%); }

/* ---------- Secciones ---------- */
.section { padding: 12rem 0; }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-top: 0; }
/* sin doble espacio antes del banner CTA cuando la sección es blanca */
.section:not(.section--soft):has(+ .cta-wrap) { padding-bottom: 0; }
.section-head { max-width: 96rem; margin: 0 auto; text-align: center; }
.section-head--left { margin: 0; text-align: left; }
.kicker { font-size: 1.6rem; font-weight: 600; line-height: 2.4rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-indigo); }
/* Marcelo (R2): los títulos y las bajadas cortaban dejando una o dos palabras
   sueltas en el último renglón ("sector", "simple", "tradicionales?"). Repartir
   los renglones lo arregla en todo el sitio: medido en las 44 páginas a 390 y a
   1440, mejoran 96 casos y no empeora ninguno. */
.section-head__title { margin-top: 1.4rem; font-size: 4.4rem; font-weight: 600; line-height: 5.6rem; text-wrap: balance; color: var(--ink-strong); }
.section-head__lead { margin-top: 2rem; font-size: 2rem; line-height: 3.3rem; text-wrap: balance; color: var(--ink-600); }

/* ---------- Aparición al entrar en pantalla (js/pages.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(4rem); }
  .js-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease-out calc(var(--i, 0) * .09s), transform 1s var(--ease-out) calc(var(--i, 0) * .09s);
  }
}

/* ==========================================================================
   Funcionalidades
   ========================================================================== */
/* Tarjeta oscura con los 7 íconos (mismo componente que la home) */
.features--overview { min-height: 0; margin: 0; padding: 7rem 5.6rem 8rem; }
.features--overview .features__title { font-size: 4.4rem; line-height: 6rem; }
.features--overview .features__grid { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 5.6rem; margin-top: 7rem; }
.features--overview .feature { width: 25%; }
.feature__link { display: flex; flex-direction: column; align-items: center; border-radius: 2.4rem; padding: 1.6rem 1.2rem 2.4rem; transition: background-color .3s ease; }
.feature__link:hover { background: rgba(255, 255, 255, .05); }
.feature__link:hover .feature__title { color: var(--green); }
.feature__link .feature__icon { transition: transform .6s var(--ease-out); }
.feature__link:hover .feature__icon { transform: translateY(-.8rem) scale(1.04); }
.feature__title { transition: color .2s ease; }

/* Navegación fija entre módulos */
.modules { position: relative; }
.subnav { position: sticky; top: 5.2rem; /* la barra sube 3.2rem: queda a 2rem del borde */ z-index: 8; display: flex; justify-content: center; height: 0; overflow: visible; }
.subnav__box {
  position: relative;
  max-width: calc(100vw - 2 * var(--gutter));
  height: max-content;
  margin-top: -3.2rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(1.2rem);
  backdrop-filter: blur(1.2rem);
  box-shadow: 0 .2rem .6rem rgba(40, 36, 110, .06), 0 1.6rem 3.2rem -1.6rem rgba(40, 36, 110, .28);
}
/* Degradés a los lados: avisan que la barra sigue. js/pages.js enciende
   .has-ini / .has-fin según hacia dónde queda contenido por ver. */
.subnav__box::before,
.subnav__box::after {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  z-index: 1;
  width: 5.6rem;
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.subnav__box::before { left: .2rem; background: linear-gradient(90deg, #fff 18%, rgba(255, 255, 255, 0)); }
.subnav__box::after { right: .2rem; background: linear-gradient(270deg, #fff 18%, rgba(255, 255, 255, 0)); }
.subnav__box.has-ini::before,
.subnav__box.has-fin::after { opacity: 1; }
.subnav__list {
  display: flex;
  gap: .4rem;
  padding: .6rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a {
  display: block;
  padding: 1.2rem 2rem;
  border-radius: 99px;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2rem;
  color: var(--ink-600);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.subnav a:hover { background: #f1f1f8; color: var(--ink-black); }
.subnav a[aria-current="true"] { background: var(--brand-indigo); color: #fff; }

.module { padding: 12rem 0; scroll-margin-top: 4rem; }
.module--soft { background: var(--bg-soft); }
.module__inner { display: grid; grid-template-columns: minmax(0, 56rem) minmax(0, 1fr); gap: 10rem; align-items: center; }
.module--reverse .module__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 56rem); }
.module--reverse .module__text { order: 2; }
.module__icon { display: block; width: 8.8rem; height: 8.8rem; padding: .6rem; border-radius: 2.2rem; background: var(--dark-grad); }
.module__icon img { width: 100%; height: 100%; }
.module__kicker { margin-top: 2.8rem; }
.module__title { margin-top: 1.2rem; font-size: 4rem; font-weight: 500; line-height: 4.75rem; text-wrap: balance; color: var(--ink-strong); }
.module__lead { margin-top: 2.4rem; font-size: 1.93rem; line-height: 3.45rem; color: var(--ink-600); text-wrap: balance; }
.module__list { display: grid; gap: 2.4rem; margin-top: 4rem; }
.module__item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1.6rem; }
.module__item::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  margin-top: .1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236366f1' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3Cpath d='m5.8 10.3 2.8 2.8 5.8-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.module__item h3 { font-size: 1.9rem; font-weight: 600; line-height: 2.6rem; color: var(--ink-black); }
.module__item p { margin-top: .6rem; font-size: 1.7rem; line-height: 2.8rem; color: var(--ink-600); }
.module__actions { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 4.4rem; }

/* Paneles ilustrados */
.visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 64rem;
  margin: 0;
  padding: 6rem;
  overflow: hidden;
  border-radius: 4rem;
}
.visual--indigo { background: radial-gradient(90% 80% at 0% 100%, rgba(168, 85, 247, .5), rgba(168, 85, 247, 0) 70%), linear-gradient(160deg, #f5f5ff 10%, #dfe0ff 55%, #8e91f5 100%); }
.visual--green { background: radial-gradient(90% 80% at 100% 100%, rgba(37, 224, 137, .55), rgba(37, 224, 137, 0) 70%), linear-gradient(200deg, #fff 10%, #effcf6 50%, #9ff0c9 100%); }
.visual--lav { background: radial-gradient(70% 70% at 50% 40%, rgba(168, 85, 247, .16), rgba(168, 85, 247, 0) 70%), var(--lav); }
/* Panel con fotografía: ocupa todo el bloque */
.visual--photo { padding: 0; }
.visual__photo { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: 50% 62%; border-radius: inherit; }

.visual--dark { background: radial-gradient(70% 90% at 100% 100%, rgba(168, 85, 247, .35), rgba(168, 85, 247, 0) 70%), var(--dark-grad); color: #fff; }
.visual__img { width: 100%; height: auto; filter: drop-shadow(0 2.4rem 4rem rgba(40, 36, 110, .16)); }
.visual__stack { display: grid; gap: 2rem; width: 100%; max-width: 48rem; }
.visual__bubble { width: 86%; height: auto; filter: drop-shadow(0 1.6rem 2.4rem rgba(40, 36, 110, .14)); }
.visual__bubble--out { justify-self: end; }

/* Tarjeta blanca genérica dentro de los paneles */
.mock {
  width: 100%;
  max-width: 50rem;
  padding: 3.2rem;
  border-radius: 2.4rem;
  background: #fff;
  box-shadow: var(--card-shadow);
  color: var(--ink-strong);
}
.mock + .mock { margin-top: 2rem; }
.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; }
.mock__title { font-size: 1.9rem; font-weight: 600; line-height: 2.6rem; color: var(--ink-black); }
.mock__sub { font-size: 1.4rem; line-height: 2rem; color: var(--ink-400); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  height: 2.8rem;
  padding: 0 1.2rem;
  border-radius: 99px;
  background: #eef0ff;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--brand-indigo);
  white-space: nowrap;
}
.pill--green { background: #e3faef; color: #0f9d5c; }
.pill--purple { background: #f4ebff; color: #9333ea; }
.pill i { width: .9rem; height: .9rem; border-radius: 50%; background: currentColor; }

/* Mensaje de WhatsApp dibujado en HTML */
.wa-msg {
  position: relative;
  max-width: 40rem;
  padding: 1.8rem 2rem 1.4rem;
  border-radius: 2rem 2rem .6rem 2rem;
  background: #fff;
  box-shadow: var(--card-shadow);
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--ink-strong);
}
.wa-msg__meta { display: block; margin-top: .6rem; font-size: 1.2rem; line-height: 1.6rem; color: var(--ink-400); text-align: right; }
.wa-msg__link {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  border-radius: 1.4rem;
  background: #f3f6ff;
}
.wa-msg__link img { flex: none; width: 4rem; height: 3rem; object-fit: contain; }
.wa-msg__link b { display: block; font-size: 1.5rem; line-height: 2rem; color: var(--ink-black); }
.wa-msg__link small { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); }

/* Barras */
.bars { display: grid; gap: 1.8rem; margin-top: 2.6rem; }
.bar__label { display: flex; justify-content: space-between; font-size: 1.4rem; line-height: 2rem; color: var(--ink-600); }
.bar__label b { font-weight: 600; color: var(--ink-black); }
.bar__track { height: 1rem; margin-top: .8rem; overflow: hidden; border-radius: 99px; background: #f0f0f7; }
.bar__fill { width: var(--v); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #a855f7); transform-origin: left; }
.bar__fill--green { background: linear-gradient(90deg, #25e089, #13b86c); }
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] .bar__fill { transform: scaleX(0); }
  .js-reveal [data-reveal].is-in .bar__fill { transform: none; transition: transform 1.2s var(--ease-out) calc(.3s + var(--d, 0s)); }
}
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2.4rem; }
.kpi { padding: 1.6rem 1.8rem; border-radius: 1.4rem; background: #f7f7fc; }
.kpi b { display: block; font-size: 2.6rem; font-weight: 600; line-height: 3.4rem; color: var(--ink-black); }
.kpi span { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); }

/* Flujo de integración (API) */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 5.6rem minmax(0, 1fr) 5.6rem minmax(0, 1fr); align-items: center; width: 100%; }
.flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3.2rem 1.6rem 2.8rem;
  border-radius: 2.4rem;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .14);
  text-align: center;
}
.flow__node--brand { background: rgba(255, 255, 255, .95); box-shadow: 0 2.4rem 5rem -2rem rgba(37, 224, 137, .45); color: var(--ink-strong); }
.flow__icon { display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 1.8rem; background: rgba(255, 255, 255, .12); }
.flow__node--brand .flow__icon { background: #effcf6; }
.flow__icon img, .flow__icon svg { width: 3.6rem; height: 3.6rem; object-fit: contain; }
.flow__node b { font-size: 1.7rem; font-weight: 600; line-height: 2.4rem; }
.flow__node small { font-size: 1.3rem; line-height: 1.9rem; opacity: .7; }
.flow__link { position: relative; height: .2rem; margin: 0 .6rem; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 .6rem, transparent .6rem 1.2rem); }
.flow__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: .9rem;
  height: .9rem;
  margin-top: -.45rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 1.2rem var(--green);
  animation: flow-dot 2.4s ease-in-out infinite;
}
.flow__link:nth-of-type(4)::after { animation-delay: 1.2s; background: #a855f7; box-shadow: 0 0 1.2rem #a855f7; }
@keyframes flow-dot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - .9rem); opacity: 0; } }
.flow-caption { margin-top: 4rem; font-size: 1.5rem; line-height: 2.4rem; text-align: center; opacity: .7; }

/* ==========================================================================
   Integraciones
   ========================================================================== */
.orbit { position: relative; width: 76rem; height: 76rem; margin: 0 auto -6rem; }
.orbit::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 224, 137, .28), rgba(37, 224, 137, 0));
}
.orbit__ring { --r: 25rem; --speed: 60s; position: absolute; inset: 0; animation: orbit-spin var(--speed) linear infinite; }
.orbit__ring::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: .15rem dashed rgba(99, 102, 241, .3);
  border-radius: 50%;
}
.orbit__ring--outer { --r: 36rem; --speed: 90s; animation-direction: reverse; }
.orbit__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.6rem;
  height: 9.6rem;
  margin: -4.8rem 0 0 -4.8rem;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
.orbit__badge {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1.6rem 3.2rem -1.2rem rgba(40, 36, 110, .3);
  animation: orbit-spin var(--speed) linear infinite reverse;
}
.orbit__ring--outer .orbit__badge { animation-direction: normal; }
.orbit__badge img, .orbit__badge svg { width: 4.6rem; height: 4.6rem; object-fit: contain; }
.orbit__badge .mono { font-size: 1.8rem; }
.orbit__center {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 18rem;
  height: 18rem;
  margin: -9rem 0 0 -9rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.6rem rgba(255, 255, 255, .5), 0 3rem 6rem -2rem rgba(37, 224, 137, .45);
}
.orbit__center img { width: 10.6rem; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .orbit__ring, .orbit__badge, .flow__link::after { animation: none; }
}

/* Monograma para marcas sin logo en la maqueta */
.mono {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--mono, var(--brand-indigo));
}

/* Los chips de categoría: en celular no entran todos, así que la caja avisa
   con un degradé hacia qué lado sigue (mismo criterio que la barra de anclas). */
.filters__box { position: relative; margin-top: 4.8rem; }
.filters__box::before,
.filters__box::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 4.8rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.filters__box::before { left: 0; background: linear-gradient(90deg, #fff 22%, rgba(255, 255, 255, 0)); }
.filters__box::after { right: 0; background: linear-gradient(270deg, #fff 22%, rgba(255, 255, 255, 0)); }
.filters__box.has-ini::before,
.filters__box.has-fin::after { opacity: 1; }
/* El degradé solo no se leía como "seguí deslizando": va una flecha encima */
.filters__flecha {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; border-radius: 50%;
  background: #fff; box-shadow: 0 .4rem 1.2rem -.2rem rgba(40, 36, 110, .28);
  /* Marcelo (R2): eran una pista decorativa con pointer-events:none, así que el
     clic las atravesaba y terminaba eligiendo el filtro que estaba debajo.
     Ahora son botones de verdad y desplazan la barra. */
  color: var(--brand-indigo); opacity: 0; pointer-events: none; cursor: pointer;
  border: 0; padding: 0;
  transition: opacity .25s ease;
}
.filters__box.has-ini .filters__flecha--ini,
.filters__box.has-fin .filters__flecha--fin { pointer-events: auto; }
.filters__flecha:hover { background: #f0f0ff; }
.filters__flecha svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.filters__flecha--ini { left: -.4rem; }
.filters__flecha--fin { right: -.4rem; }
.filters__box.has-ini .filters__flecha--ini,
.filters__box.has-fin .filters__flecha--fin { opacity: 1; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.chip {
  height: 4.8rem;
  padding: 0 2.4rem;
  border-radius: 99px;
  box-shadow: inset 0 0 0 .12rem #dcdce8;
  background: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink-600);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.chip:hover { box-shadow: inset 0 0 0 .12rem var(--brand-indigo); color: var(--brand-indigo); }
.chip[aria-pressed="true"] { background: var(--brand-indigo); box-shadow: none; color: #fff; }
.chip small { margin-left: .6rem; opacity: .6; }

.int-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; margin-top: 5.6rem; }
.int-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3.2rem 3.2rem 3rem;
  border-radius: 2.4rem;
  background: #fff;
  box-shadow: inset 0 0 0 .2rem var(--line);
  scroll-margin-top: 4rem;
  transition: transform .5s var(--ease-out), box-shadow .3s ease;
}
.int-card:hover { transform: translateY(-.6rem); box-shadow: var(--card-shadow); }
.int-card[hidden] { display: none !important; }
.int-card__logo { display: grid; place-items: center; width: 7.2rem; height: 7.2rem; border-radius: 1.8rem; background: var(--lav); }
.int-card__logo img { width: 4.4rem; height: 4.4rem; object-fit: contain; }
.int-card__logo svg { width: 3.6rem; height: 3.6rem; }
/* Ícono genérico de la categoría, para las integraciones sin logo disponible */
.int-card__logo--gen { color: var(--gen, var(--brand-indigo)); }
.int-card--link { transition: transform .5s var(--ease-out), box-shadow .3s ease; }
.int-card--link:hover { transform: translateY(-.4rem); box-shadow: var(--card-shadow); }
.int-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.int-card__name a { color: inherit; }
.int-card--link:hover .int-card__name { color: var(--brand-indigo); }
.int-grid--rel { margin-top: 4.8rem; }
.int-card__name { margin-top: 2.4rem; font-size: 2.1rem; font-weight: 600; line-height: 2.8rem; color: var(--ink-black); }
.int-card__cat { margin-top: .2rem; font-size: 1.4rem; line-height: 2rem; color: var(--ink-400); }
.int-card__text { flex: 1; margin-top: 1.4rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-600); }
.int-card__foot { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }
.int-empty { margin-top: 4rem; font-size: 1.8rem; text-align: center; color: var(--ink-400); }

/* Bloque oscuro de API */
.dark-card {
  display: grid;
  grid-template-columns: minmax(0, 52rem) minmax(0, 1fr);
  gap: 8rem;
  align-items: center;
  padding: 8rem 7.2rem;
  border-radius: 4rem;
  background: radial-gradient(60% 90% at 100% 100%, rgba(168, 85, 247, .3), rgba(168, 85, 247, 0) 70%), var(--dark-grad);
  color: #fff;
}
.dark-card .kicker { color: var(--green); }
.dark-card__title { margin-top: 1.4rem; font-size: 4.4rem; font-weight: 600; line-height: 5.4rem; }
.dark-card__lead { margin-top: 2.2rem; font-size: 1.9rem; line-height: 3.2rem; color: rgba(255, 255, 255, .82); }
.dark-list { display: grid; gap: 1.4rem; margin-top: 3.2rem; }
.dark-list li { display: flex; gap: 1.2rem; font-size: 1.7rem; line-height: 2.6rem; color: rgba(255, 255, 255, .9); }
.dark-list li::before {
  content: "";
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  margin-top: .2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2325e089' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3Cpath d='m5.8 10.3 2.8 2.8 5.8-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dark-card .btn { margin-top: 4rem; }

/* ==========================================================================
   Novedades
   ========================================================================== */
.post-cover {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  padding: 3.6rem;
}
.post-cover img { width: auto; max-width: 78%; max-height: 100%; filter: drop-shadow(0 2rem 3rem rgba(40, 36, 110, .2)); transition: transform .8s var(--ease-out); }
.post-cover--icon img { width: 52%; max-width: none; filter: none; }
.cover--photo { padding: 0; background: var(--lav); }
.cover--photo img { width: 100%; height: 100%; max-width: none; object-fit: cover; filter: none; }
.cover--indigo { background: radial-gradient(90% 80% at 0% 100%, rgba(168, 85, 247, .5), rgba(168, 85, 247, 0) 70%), linear-gradient(160deg, #f5f5ff 10%, #dfe0ff 55%, #8e91f5 100%); }
.cover--green { background: radial-gradient(90% 80% at 100% 100%, rgba(37, 224, 137, .55), rgba(37, 224, 137, 0) 70%), linear-gradient(200deg, #fff 10%, #effcf6 50%, #9ff0c9 100%); }
.cover--lav { background: radial-gradient(70% 70% at 50% 40%, rgba(168, 85, 247, .2), rgba(168, 85, 247, 0) 70%), #f1f1fb; }
.cover--dark { background: radial-gradient(70% 90% at 100% 100%, rgba(168, 85, 247, .4), rgba(168, 85, 247, 0) 70%), var(--dark-grad); }
.cover--sun { background: radial-gradient(80% 80% at 100% 0%, rgba(254, 155, 23, .3), rgba(254, 155, 23, 0) 70%), linear-gradient(180deg, #fffaf3, #fdeee0); }

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2.8rem;
  background: #fff;
  box-shadow: inset 0 0 0 .2rem var(--line);
  transition: transform .5s var(--ease-out), box-shadow .3s ease;
}
.post-card:hover { transform: translateY(-.6rem); box-shadow: var(--card-shadow); }
.post-card:hover .post-cover img { transform: scale(1.05) translateY(-.6rem); }
.post-card[hidden] { display: none !important; }
.post-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 3.2rem 3.2rem 3.6rem; }
.post-card__title { margin-top: 1.6rem; font-size: 2.3rem; font-weight: 600; line-height: 3.2rem; color: var(--ink-black); }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card__text { flex: 1; margin-top: 1.2rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-600); }
/* Fecha y tiempo de lectura de cada nota */
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; font-size: 1.45rem; line-height: 2rem; color: var(--ink-400); }
.post-meta__sep { opacity: .55; }
.post-meta__lee { display: inline-flex; align-items: center; gap: .5rem; }
.post-meta svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-feature .post-meta { margin-top: 2rem; font-size: 1.55rem; }

.more-link { display: inline-flex; align-items: center; gap: .8rem; margin-top: 2.4rem; font-size: 1.6rem; font-weight: 600; color: var(--brand-indigo); }
.more-link svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.post-card:hover .more-link svg, .post-feature:hover .more-link svg { transform: translateX(.6rem); }

.post-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 4rem;
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: left;
}
.post-feature .post-cover { aspect-ratio: auto; min-height: 50rem; }
.post-feature:hover .post-cover img { transform: scale(1.04); }
.post-feature__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 6rem 6.4rem; }
.post-feature__title { margin-top: 2rem; font-size: 3.8rem; font-weight: 600; line-height: 4.8rem; color: var(--ink-black); }
.post-feature__title a::after { content: ""; position: absolute; inset: 0; }
.post-feature__text { margin-top: 2rem; font-size: 1.9rem; line-height: 3.2rem; color: var(--ink-600); }

/* Grilla editorial: filas de 2 notas anchas y de 3 (js/pages.js reacomoda al filtrar) */
.post-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3.2rem; margin-top: 5.6rem; }
.post-grid > .post-card { grid-column: span 2; }
.post-grid > .post-card.is-wide { grid-column: span 3; }
.post-grid > .post-card.is-solo { grid-column: 2 / span 4; }
/* Dos botones en la misma fila: en celulares angostos no entraban y, al no poder
   envolver, se salían de la pantalla para los dos lados. */
.blog-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 6.4rem; }

.newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 56rem);
  gap: 8rem;
  align-items: center;
  padding: 7.2rem;
  border-radius: 4rem;
  background: radial-gradient(60% 90% at 0% 100%, rgba(37, 224, 137, .22), rgba(37, 224, 137, 0) 70%), var(--dark-grad);
  color: #fff;
}
.newsletter__title { font-size: 4rem; font-weight: 600; line-height: 5rem; }
.newsletter__lead { margin-top: 1.8rem; font-size: 1.9rem; line-height: 3.1rem; color: rgba(255, 255, 255, .82); }
.newsletter__form { display: flex; gap: 1.2rem; padding: .8rem; border-radius: 99px; background: #fff; }
.newsletter__form input {
  flex: 1;
  min-width: 0;
  padding: 0 2.4rem;
  border: 0;
  border-radius: 99px;
  font: inherit;
  font-size: 1.7rem;
  color: var(--ink-black);
  background: transparent;
}
.newsletter__form input:focus { outline: none; }
.newsletter__form:focus-within { box-shadow: 0 0 0 .3rem var(--green); }
.newsletter__form .btn { flex: none; }
.newsletter__note { min-height: 2.4rem; margin-top: 1.6rem; padding-left: 2.4rem; font-size: 1.5rem; line-height: 2.4rem; color: rgba(255, 255, 255, .7); }
.newsletter__note.is-ok { color: var(--green); }
.newsletter__social { display: flex; gap: 1.6rem; margin-top: 3.2rem; }
.newsletter__social a { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 50%; box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .3); color: #fff; transition: background-color .2s ease, color .2s ease; }
.newsletter__social a:hover { background: var(--green); color: var(--ink-strong); }
.newsletter__social svg { width: 2rem; height: 2rem; }

/* ==========================================================================
   Precios
   ========================================================================== */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; width: 100%; margin-top: 5.6rem; text-align: left; }
/* Marcelo (R2): los botones de los cuatro planes quedaban a distinta altura
   porque arriba de cada uno hay textos de largo distinto. En vez de pedirle a
   alguien que escriba todos los textos del mismo largo, las nueve filas de la
   tarjeta se comparten entre las cuatro: cada banda se alinea sola, hoy y con
   cualquier texto futuro. */
.plan {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 9;
  align-content: start;
  padding: 4.8rem 4.4rem 5.2rem;
  border-radius: 4rem;
  background: #fff;
  box-shadow: inset 0 0 0 .2rem var(--line), var(--card-shadow);
}
.plan--featured {
  background: radial-gradient(70% 60% at 100% 0%, rgba(168, 85, 247, .35), rgba(168, 85, 247, 0) 70%), var(--dark-grad);
  box-shadow: 0 4rem 8rem -4rem rgba(54, 44, 55, .6);
  color: #fff;
}
.plan__top { display: flex; flex-wrap: wrap; align-items: center; align-self: start; justify-content: space-between; gap: .4rem 1.6rem; }
.plan__name { font-size: 2.8rem; font-weight: 600; line-height: 3.6rem; white-space: nowrap; color: var(--ink-black); }
.plan--featured .plan__name { color: #fff; }
.plan--featured .pill { background: rgba(37, 224, 137, .16); color: var(--green); }
.sin-corte { white-space: nowrap; }
.plan__desc { min-height: 11rem; margin-top: 1.4rem; font-size: 1.7rem; line-height: 2.8rem; color: var(--ink-600); }
.plan--featured .plan__desc { color: rgba(255, 255, 255, .78); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .8rem; margin-top: 2.8rem; }
.plan__amount { font-size: 4.6rem; font-weight: 600; line-height: 5.4rem; letter-spacing: -.03em; color: var(--ink-black); }
.plan--featured .plan__amount { color: #fff; }
.plan__currency { font-size: 1.6rem; font-weight: 600; white-space: nowrap; color: var(--ink-400); }
.plan__unit { font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-400); }
.plan--featured .plan__unit { color: rgba(255, 255, 255, .65); }
.plan > .btn { width: 100%; min-width: 0; height: auto; min-height: 5.6rem; margin-top: 2.8rem; padding: .8rem 1.6rem; gap: .9rem; line-height: 1.25; text-align: center; white-space: normal; }
.plan > .btn .ico-wa { width: 2.2rem; height: 2.2rem; margin: 0; }
.plan__includes { margin-top: 4rem; padding-top: 3.2rem; border-top: .1rem solid var(--line); font-size: 1.5rem; font-weight: 600; line-height: 2.2rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.plan--featured .plan__includes { border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .6); }
/* align-content: start para que, al compartir filas entre tarjetas, la lista
   más corta no reparta sus viñetas por todo el alto de la más larga */
.plan__list { display: grid; align-content: start; gap: 1.4rem; margin-top: 2.4rem; }
.plan__list li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1.2rem; font-size: 1.7rem; line-height: 2.6rem; color: var(--ink-strong); }
.plan--featured .plan__list li { color: rgba(255, 255, 255, .92); }
.plan__list li::before {
  content: "";
  width: 2.2rem;
  height: 2.2rem;
  margin-top: .2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3Cpath d='m5.8 10.3 2.8 2.8 5.8-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan--featured .plan__list li::before { filter: hue-rotate(-95deg) saturate(1.6) brightness(1.5); }
.plan__compare { margin-top: auto; padding-top: 3.2rem; font-size: 1.6rem; font-weight: 600; color: var(--brand-indigo); }
.plan--featured .plan__compare { color: var(--green); }

.perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem; margin-top: 7.2rem; text-align: left; }
.perk { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.perk__icon { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; border-radius: 1.6rem; background: #fff; box-shadow: var(--card-shadow); color: var(--brand-indigo); }
.perk__icon svg { width: 2.6rem; height: 2.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.perk h3 { font-size: 1.8rem; font-weight: 600; line-height: 2.6rem; color: var(--ink-black); }
.perk p { margin-top: .4rem; font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-600); }

/* Comparador */
.compare { margin-top: 6.4rem; border: .2rem solid var(--line); border-radius: 3.2rem; background: #fff; overflow: clip; }
.compare__scroll { overflow-x: auto; }
.compare table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.compare th, .compare td { padding: 1.9rem 2.4rem; border-top: .1rem solid #f0f0f5; font-size: 1.6rem; line-height: 2.4rem; text-align: center; vertical-align: middle; color: var(--ink-strong); }
.compare thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 3.2rem 2.4rem 2.8rem;
  border-top: 0;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(.8rem);
  backdrop-filter: blur(.8rem);
  box-shadow: 0 .1rem 0 var(--line);
  vertical-align: bottom;
}
.compare thead th:first-child { text-align: left; font-size: 2rem; font-weight: 600; }
.compare__plan { display: block; font-size: 2.2rem; font-weight: 600; line-height: 3rem; color: var(--ink-black); }
.compare__price { display: block; margin-top: .4rem; font-size: 1.5rem; font-weight: 400; color: var(--ink-400); }
.compare thead .is-featured .compare__plan { color: var(--brand-indigo); }
.compare tbody th, .compare thead th:first-child { width: 32%; }
.compare tbody th { font-weight: 400; text-align: left; color: var(--ink-600); }
.compare td, .compare thead th { width: 17%; }
.compare .is-featured { background-color: rgba(99, 102, 241, .04); }
.compare thead th.is-featured { background-color: rgba(247, 247, 253, .98); }
.compare .compare__group th { padding-top: 3.6rem; background: var(--lav); font-size: 1.8rem; font-weight: 600; text-align: left; color: var(--ink-black); }
.yes, .no { display: inline-block; width: 2.4rem; height: 2.4rem; vertical-align: middle; }
.yes { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23e3faef'/%3E%3Cpath d='m7.5 12.4 3 3 6-6.4' fill='none' stroke='%2313b86c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.no { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12h8' stroke='%23c4c4d2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.compare__note { font-size: 1.4rem; line-height: 2.2rem; color: var(--ink-600); }
.compare tfoot td, .compare tfoot th { padding: 3.2rem 1.2rem; border-top: .1rem solid var(--line); }
.compare tfoot th { font-weight: 400; text-align: left; }
.compare tfoot .btn { width: 100%; height: auto; min-height: 5.2rem; padding: .8rem 1rem; gap: .6rem; font-size: 1.5rem; line-height: 1.25; text-align: center; white-space: normal; }
.compare tfoot .btn .ico-wa { flex: none; width: 2rem; height: 2rem; margin: 0; }
.compare [data-extra] { display: none; }
.compare.is-expanded [data-extra] { display: table-row-group; }
.compare__tabs { display: none; }
/* Marcelo (R2): en celular la nota y el botón quedaban apretados dentro de media
   columna de la tabla. Sacarlos de la tabla es la única forma de que ocupen el
   ancho completo: el layout de tabla no los deja salir de su columna. En
   escritorio no cambia nada, siguen en el pie de la tabla. */
.compare__pie { display: none; }
.compare__toggle { display: flex; justify-content: center; padding: 3.2rem; border-top: .1rem solid var(--line); background: #fff; }
.compare__toggle svg { transition: transform .3s ease; }
.compare.is-expanded .compare__toggle svg { transform: rotate(180deg); }

/* Preguntas frecuentes */
.faq { display: grid; gap: 1.6rem; max-width: 104rem; margin: 6rem auto 0; }
.faq details { border-radius: 2.4rem; background: #fff; box-shadow: inset 0 0 0 .2rem var(--line); transition: box-shadow .3s ease; }
.faq details[open] { box-shadow: var(--card-shadow); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 2.8rem 3.2rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 2.8rem;
  color: var(--ink-black);
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: #f1f1f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 1.8rem no-repeat;
  transition: transform .3s ease, background-color .3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: #e6e7ff; }
.faq summary:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; border-radius: 2.4rem; }
.faq__answer { padding: 0 3.2rem 3.2rem; font-size: 1.8rem; line-height: 3rem; color: var(--ink-600); }
.faq__answer p + p { margin-top: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  :root { interpolate-size: allow-keywords; }
}

/* ==========================================================================
   Páginas de detalle de funcionalidades (multiagente.html, chatbots-ia.html…)
   ========================================================================== */
.feat-hero { padding-top: 17rem; padding-bottom: 10rem; }
.feat-hero__inner { display: grid; grid-template-columns: minmax(0, 60rem) minmax(0, 1fr); gap: 8rem; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; font-size: 1.5rem; line-height: 2.2rem; color: var(--ink-400); }
.crumbs li + li::before { content: "/"; margin-right: .8rem; color: #c4c4d2; }
.crumbs a { color: var(--ink-600); transition: color .2s ease; }
.crumbs a:hover { color: var(--brand-indigo); }
.crumbs [aria-current] { color: var(--ink-400); }
.feat-hero__icon {
  display: block;
  width: 11.2rem;
  height: 11.2rem;
  margin: 4rem 0 3.2rem;
  padding: .8rem;
  border-radius: 2.8rem;
  background: var(--dark-grad);
  box-shadow: 0 2.4rem 4.8rem -2rem rgba(54, 44, 55, .55);
}
.feat-hero__icon img { width: 100%; height: 100%; }
.feat-hero__icon--brand { display: grid; place-items: center; padding: 2rem; background: #fff; box-shadow: inset 0 0 0 .2rem var(--line), 0 2.4rem 4.8rem -2.4rem rgba(40, 36, 110, .3); }
.feat-hero__icon--brand img { width: 100%; height: 100%; object-fit: contain; }
.feat-hero__icon--wide { width: 19rem; height: 8.8rem; padding: 1.6rem 2.4rem; border-radius: 2.2rem; }
.feat-hero__title { margin-top: 2.4rem; font-size: 5.2rem; font-weight: 600; line-height: 6.2rem; text-wrap: balance; color: var(--ink); }
.feat-hero__lead { margin-top: 2.4rem; font-size: 2.2rem; font-weight: 500; line-height: 3.4rem; color: var(--ink-600); }
.feat-hero .page-hero__actions { justify-content: flex-start; }
.trust { display: flex; flex-wrap: wrap; gap: 1.2rem 2.8rem; margin-top: 4rem; }
.trust li { display: flex; align-items: center; gap: 1rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--ink-600); }
.trust li::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23e3faef'/%3E%3Cpath d='m7.5 12.4 3 3 6-6.4' fill='none' stroke='%2313b86c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Panel del hero con piezas flotantes */
.feat-visual { min-height: 70rem; }
.feat-visual { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.feat-visual__main { width: auto; max-width: 78%; max-height: 58rem; object-fit: contain; }
.float { position: absolute; z-index: 2; }
.float__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2rem 3rem rgba(40, 36, 110, .22)); }
@media (prefers-reduced-motion: no-preference) {
  .float { animation: bob 6s ease-in-out infinite; }
  .float--late { animation-delay: -3s; }
}
@keyframes bob { 50% { transform: translateY(-1rem); } }
.chip-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 2rem 1.2rem 1.2rem;
  border-radius: 99px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.chip-card b { display: block; font-size: 1.6rem; line-height: 2rem; color: var(--ink-black); }
.chip-card small { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); }
.chip-card--dark { padding-left: 2rem; background: var(--dark-grad); }
.chip-card--dark b { color: #fff; }
.chip-card--dark small { color: rgba(255, 255, 255, .7); }
.pulse { position: relative; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--green); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); }
@media (prefers-reduced-motion: no-preference) {
  .pulse::after { animation: ping 1.6s ease-out infinite; }
}
@keyframes ping { to { transform: scale(2.8); opacity: 0; } }
.stack { display: flex; }
.stack .avatar { width: 4rem; height: 4rem; box-shadow: 0 0 0 .3rem #fff; }
.stack .avatar + .avatar { margin-left: -1.2rem; }
.toast {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 36rem;
  padding: 1.4rem 2rem 1.4rem 1.4rem;
  border-radius: 1.8rem;
  background: #fff;
  box-shadow: var(--card-shadow);
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: var(--ink-600);
}
.toast b { color: var(--ink-black); }
.toast__icon { display: grid; flex: none; place-items: center; width: 4rem; height: 4rem; border-radius: 1.2rem; background: #eef0ff; color: var(--brand-indigo); }
.toast__icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.badge-round { display: grid; place-items: center; width: 9.6rem; height: 9.6rem; border-radius: 50%; background: #fff; box-shadow: var(--card-shadow); }
.badge-round img { width: 5.6rem; height: 4rem; object-fit: contain; }

/* Beneficios */
.section--flush { padding-top: 0; padding-bottom: 10rem; }
/* módulos blancos seguidos: sin doble espacio */
.module:not(.module--soft) + .module:not(.module--soft) { padding-top: 0; }
.highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4rem; margin-top: -4rem; }
.hl { position: relative; padding: 3.6rem 3.2rem 4rem; border-radius: 2.8rem; background: #fff; box-shadow: inset 0 0 0 .2rem var(--line), var(--card-shadow); }
.hl__icon { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 1.8rem; background: #eef0ff; color: var(--brand-indigo); }
.hl:nth-child(2) .hl__icon { background: #f4ebff; color: var(--purple); }
.hl:nth-child(3) .hl__icon { background: #e3faef; color: #0f9d5c; }
.hl__icon svg, .use__icon svg { width: 2.8rem; height: 2.8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hl__title { margin-top: 2.4rem; font-size: 2.1rem; font-weight: 600; line-height: 2.8rem; color: var(--ink-black); text-wrap: balance; }
.hl__text { margin-top: 1rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-600); }
.module__note {
  display: inline-flex;
  margin-top: 3.2rem;
  padding: 1rem 1.8rem;
  border-radius: 1.2rem;
  background: #f4ebff;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #7e22ce;
}

/* Cómo funciona */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin-top: 6.4rem; counter-reset: step; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step {
  position: relative;
  overflow: hidden;
  padding: 4rem 3.6rem 4.4rem;
  border-radius: 2.8rem;
  background: radial-gradient(80% 70% at 100% 100%, rgba(168, 85, 247, .28), rgba(168, 85, 247, 0) 70%), var(--dark-grad);
  color: #fff;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, #25e089, #6366f1 60%, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step__title { margin-top: 2.8rem; font-size: 2.3rem; font-weight: 600; line-height: 3rem; text-wrap: balance; }
.step__text { margin-top: 1.2rem; font-size: 1.7rem; line-height: 2.8rem; color: rgba(255, 255, 255, .78); }

/* Casos de uso */
.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin-top: 5.6rem; }
.uses--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.use { display: flex; gap: 2.2rem; padding: 3.2rem; border-radius: 2.4rem; background: var(--lav); transition: background-color .3s ease; }
.use:hover { background: #eeeefb; }
.use__icon { display: grid; flex: none; place-items: center; width: 5.6rem; height: 5.6rem; border-radius: 1.6rem; background: #fff; color: var(--brand-indigo); box-shadow: 0 .8rem 1.6rem -.8rem rgba(40, 36, 110, .25); }
.use__title { font-size: 2rem; font-weight: 600; line-height: 2.8rem; color: var(--ink-black); text-wrap: balance; }
.use__text { margin-top: .6rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-600); }

/* Funcionalidades relacionadas */
.related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3.2rem; }
.related__head .section-head__title { margin-top: 1rem; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin-top: 4.8rem; }
.rel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.4rem 3.2rem 3.6rem;
  border-radius: 2.8rem;
  background: var(--dark-grad);
  color: #fff;
  transition: transform .5s var(--ease-out), box-shadow .3s ease;
}
.rel:hover { transform: translateY(-.6rem); box-shadow: 0 3rem 6rem -3rem rgba(54, 44, 55, .6); }
.rel__icon { width: 13rem; height: 13rem; margin-left: -1.6rem; transition: transform .6s var(--ease-out); }
.rel:hover .rel__icon { transform: scale(1.05); }
.rel__title { margin-top: .8rem; font-size: 2.3rem; font-weight: 600; line-height: 3rem; }
.rel__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rel__title a:focus-visible { outline: none; }
.rel:has(a:focus-visible) { outline: 2px solid var(--purple); outline-offset: 3px; }
.rel__text { flex: 1; margin-top: 1rem; font-size: 1.6rem; line-height: 2.6rem; color: rgba(255, 255, 255, .78); }
.rel .more-link { color: var(--green); }
.rel:hover .more-link svg { transform: translateX(.6rem); }

/* ---------- Piezas de interfaz ---------- */
.avatar { flex: none; width: 4.4rem; height: 4.4rem; border-radius: 50%; object-fit: cover; background: #eef0ff; }
.avatar--icon { display: grid; place-items: center; color: var(--brand-indigo); }
.avatar--icon svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pill--orange { background: #fff1de; color: #c96a00; }
.pill--red { background: #fdecec; color: #d92d2d; }
.mock__label { margin-top: 2.4rem; font-size: 1.3rem; font-weight: 600; line-height: 1.8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.mock__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-top: 2.4rem; padding-top: 2rem; border-top: .1rem solid var(--line); font-size: 1.5rem; color: var(--ink-600); }
.mock__foot > span:first-child { display: flex; align-items: center; gap: .8rem; }
.mock__foot svg, .tag svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mock__logo { display: inline-grid; vertical-align: middle; margin-right: 1rem; }
.mock__logo img { width: 3.2rem; height: 2.4rem; object-fit: contain; }
.btn--xs { height: 4rem; padding: 0 2rem; font-size: 1.4rem; pointer-events: none; }

/* Bandeja */
.inbox { max-width: 54rem; }
.inbox__list { margin-top: 2rem; }
.inbox__row { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; padding: 1.4rem 0; border-top: .1rem solid #efeff5; }
.inbox__name { overflow: hidden; font-size: 1.6rem; font-weight: 600; line-height: 2.2rem; color: var(--ink-black); white-space: nowrap; text-overflow: ellipsis; }
.inbox__msg { overflow: hidden; font-size: 1.4rem; line-height: 2rem; color: var(--ink-400); white-space: nowrap; text-overflow: ellipsis; }
.inbox__side { display: grid; justify-items: end; gap: .6rem; font-size: 1.3rem; color: var(--ink-400); }

/* Conversación con nota y derivación */
.thread { max-width: 50rem; }
.wa-msg--out { justify-self: end; border-radius: 2rem 2rem 2rem .6rem; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
.wa-msg--out .wa-msg__meta { color: rgba(255, 255, 255, .75); }
.sys-pill {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .8rem;
  padding: .8rem 1.6rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 0 0 .1rem #e2e2f0;
  font-size: 1.4rem;
  line-height: 2rem;
  color: var(--ink-600);
}
.sys-pill svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: var(--brand-indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note { max-width: 40rem; padding: 1.4rem 1.8rem; border-left: .4rem solid #fe9b17; border-radius: .6rem 1.6rem 1.6rem .6rem; background: #fff7eb; font-size: 1.5rem; line-height: 2.3rem; color: #7a4a00; }
.note b { display: block; margin-bottom: .2rem; font-size: 1.3rem; letter-spacing: .02em; }

/* Constructor de flujos */
.fb { max-width: 52rem; }
.fb__steps { display: grid; gap: 2.8rem; margin-top: 2.8rem; }
.fb__node { position: relative; padding: 1.8rem 2rem; border-radius: 1.8rem; background: #f7f7fc; box-shadow: inset 0 0 0 .1rem #e6e6f2; font-size: 1.6rem; line-height: 2.4rem; color: var(--ink-black); }
.fb__node::after, .fb__split::before { content: ""; position: absolute; left: 50%; bottom: -2.8rem; width: .2rem; height: 2.8rem; background: repeating-linear-gradient(180deg, #c7c8f5 0 .5rem, transparent .5rem 1rem); }
.fb__split::before { top: -2.8rem; bottom: auto; }
.fb__node:has(+ .fb__split)::after { display: none; }
.fb__tag { display: inline-block; margin-bottom: .6rem; padding: .2rem 1rem; border-radius: 99px; background: #e3faef; font-size: 1.2rem; font-weight: 600; line-height: 2rem; color: #0f9d5c; }
.fb__tag--ia { background: #f4ebff; color: #9333ea; }
.fb__opts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.fb__opts span { padding: .6rem 1.4rem; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 .12rem var(--brand-indigo); font-size: 1.3rem; line-height: 2rem; color: var(--brand-indigo); }
.fb__split { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.fb__split span { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.4rem .8rem; border-radius: 1.6rem; background: var(--dark-grad); font-size: 1.4rem; line-height: 2rem; color: #fff; }
.fb__split svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Kanban */
.kanban-mock { max-width: 64rem; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.4rem; }
.kanban--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.kanban--5 .kanban__col { padding: .8rem .7rem; }
.kanban--5 .kanban__head { display: block; font-size: 1.2rem; line-height: 1.7rem; }
.kanban--5 .kanban__head b { display: block; }
.kanban__col > * { min-width: 0; }
.kanban__col { display: grid; align-content: start; gap: .8rem; min-height: 26rem; padding: 1rem; border-radius: 1.4rem; background: #f4f4fa; }
.kanban__col--won { background: #e9fbf2; }
.kanban__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; padding: .2rem .4rem .6rem; font-size: 1.3rem; font-weight: 600; color: var(--ink-600); }
.kanban__head b { color: var(--ink-400); }
.kanban__card { display: flex; align-items: center; gap: .8rem; padding: .9rem; border-radius: 1rem; background: #fff; box-shadow: 0 .4rem 1.2rem -.6rem rgba(40, 36, 110, .3); font-size: 1.3rem; font-weight: 600; line-height: 1.8rem; color: var(--ink-black); }
.kanban__card .avatar { width: 2.6rem; height: 2.6rem; }
.kanban__card span { min-width: 0; white-space: nowrap; }
.kanban__card span, .kanban__card small { overflow: hidden; text-overflow: ellipsis; }
.kanban__card small { display: block; font-weight: 400; color: var(--ink-400); }
/* Tarjeta sin avatar: el nombre puede ocupar dos renglones */
.kanban__card--txt { display: block; padding: .8rem .9rem; }
.kanban__card--txt span, .kanban__card--txt small { white-space: normal; overflow: visible; overflow-wrap: break-word; }

/* Oportunidad abierta del embudo */
.oport { width: 100%; max-width: 48rem; }
.oport__head { display: flex; align-items: center; gap: 1.4rem; padding-bottom: 1.8rem; border-bottom: .1rem solid var(--line); }
.oport__head > div { flex: 1 1 auto; min-width: 0; }
.oport__nombre { font-size: 1.9rem; font-weight: 600; line-height: 2.4rem; color: var(--ink-black); }
.oport__canal { font-size: 1.3rem; line-height: 1.9rem; color: var(--ink-400); }
.oport__monto { flex: none; font-size: 2rem; font-weight: 700; color: var(--brand-indigo); }
.oport__datos { display: grid; gap: 1.2rem; padding: 1.8rem 0; border-bottom: .1rem solid var(--line); }
.oport__datos li { display: flex; align-items: center; gap: 1.6rem; font-size: 1.4rem; line-height: 2rem; }
.oport__datos span { flex: none; width: 9rem; color: var(--ink-400); }
.oport__datos b { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 0; font-weight: 600; color: var(--ink-black); }
.oport__datos .tag, .oport__datos .pill { white-space: nowrap; }
.oport__t { margin-top: 1.8rem; font-size: 1.3rem; font-weight: 600; color: var(--ink-400); }
.oport__msj { margin-top: .8rem; padding: 1.2rem 1.4rem; border-radius: 1.4rem 1.4rem 1.4rem .4rem; background: #f4f4fa; font-size: 1.4rem; line-height: 2rem; color: var(--ink-strong); }
.oport__msj small { display: block; margin-top: .4rem; font-size: 1.2rem; color: var(--ink-400); }
.oport__tarea { display: flex; align-items: center; gap: .8rem; margin-top: 1.6rem; padding: 1.1rem 1.4rem; border-radius: 1.2rem; background: #e9fbf2; font-size: 1.4rem; line-height: 2rem; color: #0b7f4a; }
.oport__tarea svg { flex: none; width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Pie de la grilla de aplicaciones */
.grilla-pie { margin-top: 3.2rem; text-align: center; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-400); }
.grilla-pie a { color: var(--brand-indigo); font-weight: 600; }
.trust--centrada { justify-content: center; }
.trust a { color: inherit; text-decoration: underline; text-decoration-color: rgba(99,102,241,.45); text-underline-offset: .4rem; transition: color .2s ease; }
.trust a:hover { color: var(--brand-indigo); }

/* Diagrama en abanico de la API */
.flow--abanico { display: block; }
.flow__fila { display: grid; grid-template-columns: minmax(0, 1fr) 4.8rem minmax(0, 1fr); align-items: center; }
.flow__baja { display: block; width: .2rem; height: 3.2rem; margin: 1.8rem auto 1.6rem; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0 .6rem, transparent .6rem 1.2rem); }
.flow__fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.flow__fan li { display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 1.3rem .6rem; border-radius: 1.4rem; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .15); text-align: center; }
.flow__fan li span { font-size: 1.3rem; line-height: 1.7rem; color: rgba(255, 255, 255, .88); }
.flow__fan img, .flow__fan svg { width: 3.2rem; height: 3.2rem; object-fit: contain; }
.flow--abanico + .flow-caption { margin-top: 2.8rem; }
.highlights--bajo { margin-top: 5.6rem; }
.section-head__acciones { margin-top: 3.2rem; }
.pasos-acciones { margin-top: 4.8rem; text-align: center; }

/* Historial de pagos y link de pago (Mercado Pago) */
.pagos__lista { display: grid; gap: 1rem; margin-top: 2.4rem; }
.pagos__lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.4rem; padding: 1.4rem 1.6rem; border-radius: 1.4rem; background: #f7f7fc; }
.pagos__det { min-width: 0; }
.pagos__det b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 2rem; color: var(--ink-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagos__det small { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); }
.pagos__monto { font-size: 1.5rem; font-weight: 600; color: var(--ink-black); white-space: nowrap; }
.compartir { max-width: 30rem; padding: 1.8rem 2rem; border-radius: 1.8rem; background: #fff; box-shadow: var(--card-shadow); }
.compartir__t { font-size: 1.4rem; font-weight: 600; color: var(--ink-black); }
.compartir__url { margin-top: .8rem; padding: .8rem 1.2rem; border-radius: 1rem; background: #e9fbf2; font-size: 1.2rem; line-height: 1.8rem; color: #0b7f4a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compartir__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.compartir__btns span { padding: .5rem 1.1rem; border-radius: 99px; background: #eef0ff; font-size: 1.2rem; font-weight: 500; color: var(--brand-indigo); }
.campo { margin-top: 1.2rem; padding: 1.3rem 1.6rem; border-radius: 1.4rem; box-shadow: inset 0 0 0 .1rem var(--line); font-size: 1.5rem; line-height: 2.2rem; color: var(--ink-strong); }
.campo--par { display: flex; justify-content: space-between; gap: 1.6rem; }
.campo--par span:first-child { font-weight: 600; color: var(--ink-black); }
.mini-reporte { width: 26rem; padding: 1.8rem 2rem; border-radius: 1.8rem; background: #fff; box-shadow: var(--card-shadow); }
.mini-reporte__t { font-size: 1.4rem; font-weight: 600; color: var(--ink-black); }
.mini-reporte ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.mini-reporte b { display: block; font-size: 2rem; font-weight: 600; line-height: 2.6rem; color: var(--brand-indigo); }
.mini-reporte span { display: block; font-size: 1.1rem; line-height: 1.6rem; color: var(--ink-400); }

/* Venta de la tienda dentro del chat */
.venta-tn { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.2rem; padding: 1.4rem 1.6rem; border-radius: 1.6rem; background: #fff; box-shadow: inset 0 0 0 .1rem var(--line), 0 .8rem 2rem -1rem rgba(40, 36, 110, .3); }
.venta-tn__logo { display: grid; flex: none; place-items: center; width: 4rem; height: 4rem; border-radius: 1.2rem; background: #eef0ff; }
.venta-tn__logo img { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.venta-tn__cuerpo { flex: 1 1 auto; min-width: 0; }
.venta-tn__cuerpo b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 2rem; color: var(--ink-black); }
.venta-tn__cuerpo small { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venta-tn__monto { flex: none; font-size: 1.6rem; font-weight: 700; color: var(--brand-indigo); }

/* Conversación + panel de la tienda */
.tienda-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem; width: 100%; max-width: 64rem; }
.tienda-split__chat, .tienda-split__panel { padding: 2.2rem 2rem; border-radius: 2.2rem; background: #fff; box-shadow: var(--card-shadow); }
.tienda-split__t { padding-bottom: 1.4rem; border-bottom: .1rem solid var(--line); font-size: 1.5rem; font-weight: 600; color: var(--ink-black); }
.tienda-split__chat .wa-msg { margin-top: 1.2rem; font-size: 1.5rem; line-height: 2.2rem; }
.badge-rayo { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.2rem; padding: .6rem 1.2rem; border-radius: 99px; background: #e9fbf2; font-size: 1.2rem; font-weight: 600; color: #0b7f4a; }
.badge-rayo svg { width: 1.4rem; height: 1.4rem; fill: currentColor; stroke: none; }
.tienda-split__logo { padding-bottom: 1.4rem; border-bottom: .1rem solid var(--line); }
.tienda-split__logo img { width: 3.6rem; height: 2.8rem; object-fit: contain; }
.tienda-split__pedido { display: flex; gap: 1.2rem; margin-top: 1.6rem; }
.tienda-split__pedido img { flex: none; width: 6.4rem; height: 6.4rem; padding: .4rem; border-radius: 1.2rem; object-fit: contain; background: #f4f4fa; }
.tienda-split__pedido div { min-width: 0; }
.tienda-split__pedido b { display: block; font-size: 1.4rem; font-weight: 700; line-height: 2rem; color: var(--ink-black); }
.tienda-split__pedido span { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); }
.tienda-split__pedido em { display: block; margin-top: .4rem; font-size: 1.5rem; font-style: normal; font-weight: 600; color: var(--brand-indigo); }
.tienda-split__estado { display: grid; gap: .8rem; margin-top: 1.6rem; }
.tienda-split__estado li { display: flex; align-items: center; gap: .8rem; font-size: 1.3rem; line-height: 1.9rem; color: var(--ink-600); }
.tienda-split__estado svg { flex: none; width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tienda-split__estado .is-ok { color: #0b7f4a; font-weight: 600; }

/* Producto sin foto: ícono en la miniatura */
.avatar--prod { display: grid; place-items: center; background: #f4f4fa; color: var(--brand-indigo); }
.avatar--prod svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tienda-split__ico { display: grid; flex: none; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 1.2rem; background: #f4f4fa; color: var(--brand-indigo); }
.tienda-split__ico svg { width: 3rem; height: 3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Recomendación del chatbot eCommerce */
.reco-stack { max-width: 44rem; }
.reco__t { padding-bottom: 1.6rem; border-bottom: .1rem solid var(--line); font-size: 1.6rem; font-weight: 600; color: var(--ink-black); }
.reco__item { display: flex; align-items: center; gap: 1.6rem; margin-top: 1.8rem; }
.reco__foto, .reco__ico { flex: none; width: 8.8rem; height: 8.8rem; padding: .6rem; border-radius: 1.6rem; object-fit: contain; background: #f4f4fa; }
.reco__ico { display: grid; place-items: center; color: var(--brand-indigo); }
.reco__ico svg { width: 4rem; height: 4rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reco__nombre { font-size: 1.7rem; font-weight: 600; line-height: 2.4rem; color: var(--ink-black); }
.reco__dato { margin-top: .4rem; font-size: 1.4rem; line-height: 2rem; color: var(--ink-400); }
.reco__pie { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-top: 2rem; padding-top: 1.6rem; border-top: .1rem solid var(--line); font-size: 1.4rem; color: var(--ink-400); }

/* Lead calificado y asignado */
.lead-card { margin-top: 1.6rem; padding: 1.6rem 1.8rem; border-radius: 1.6rem; background: #e9fbf2; }
.lead-card__top { display: flex; align-items: center; gap: 1.4rem; }
.lead-card__score { display: grid; flex: none; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--brand-indigo); font-size: 1.7rem; font-weight: 700; color: #fff; }
.lead-card__txt b { display: block; font-size: 1.6rem; font-weight: 600; line-height: 2.2rem; color: var(--ink-black); }
.lead-card__txt small { display: block; font-size: 1.3rem; line-height: 1.9rem; color: var(--ink-600); }
.lead-card__asig { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: .1rem solid rgba(11, 127, 74, .18); font-size: 1.4rem; line-height: 2rem; color: var(--ink-600); }
.lead-card__asig .avatar { width: 3.2rem; height: 3.2rem; }
.lead-card__asig span { flex: 1 1 auto; }
.lead-card__asig b { color: var(--ink-black); }
.lead-card__asig small { font-size: 1.3rem; color: var(--ink-400); }
.cierre__extra { margin-top: 2.8rem; font-size: 1.6rem; }
.cierre__extra a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: .4rem; }
.cierre__extra a:hover { color: #fff; }

/* Embudo antes/después, versión compacta para un módulo */
.embudo-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; width: 100%; max-width: 54rem; }
.embudo-mini .embudo__lado { padding: 2.4rem 1.8rem; border-radius: 2.2rem; }
.embudo-mini .embudo__kicker { font-size: 1.4rem; }
.embudo-mini .embudo__etapas { gap: .8rem; margin-top: 1.8rem; }
.embudo-mini .embudo__etapas li { min-height: 0; padding: 1rem .8rem; border-radius: 1.2rem; }
.embudo-mini .embudo__etapas b { font-size: 2rem; line-height: 2.6rem; }
.embudo-mini .embudo__etapas span { font-size: 1.2rem; line-height: 1.7rem; }
.embudo-mini__pie { margin-top: 1.6rem; padding-top: 1.4rem; border-top: .1rem solid var(--line); font-size: 1.3rem; line-height: 1.9rem; text-align: center; color: var(--ink-400); }
.embudo-mini__pie b { display: block; font-size: 1.5rem; color: var(--ink-black); }

/* Línea que aclara de qué producto estamos hablando */
.feat-hero__nota { margin-top: 1.8rem; font-size: 1.7rem; line-height: 2.8rem; color: var(--ink-400); }
.feat-hero__nota a { color: var(--brand-indigo); font-weight: 600; }
.venta-tn__logo svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--brand-indigo); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Logos de las tiendas que se conectan, en el hero */
.tiendas-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 3.2rem; }
.tiendas-logos span { font-size: 1.5rem; color: var(--ink-400); }
.tiendas-logos img { width: 3.2rem; height: 2.6rem; object-fit: contain; opacity: .85; }
/* Producto ofrecido dentro del chat */
.prod-chat { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 1.6rem; background: #fff; box-shadow: inset 0 0 0 .1rem var(--line), 0 .8rem 2rem -1rem rgba(40, 36, 110, .3); }
.prod-chat img { flex: none; width: 5.2rem; height: 5.2rem; padding: .3rem; border-radius: 1.2rem; object-fit: contain; background: #f4f4fa; }
.prod-chat > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.prod-chat b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 2rem; color: var(--ink-black); }
.prod-chat small { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); }

/* Lista de consultas asignadas (retail) */
.consultas { display: grid; gap: .8rem; margin-top: 2.4rem; }
.consultas li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: #f7f7fc; }
.consultas .avatar { width: 4rem; height: 4rem; }
.consultas__txt { min-width: 0; }
.consultas__txt b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 2rem; color: var(--ink-black); }
.consultas__txt small { display: block; font-size: 1.3rem; line-height: 1.9rem; color: var(--ink-400); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.consultas .pill { white-space: nowrap; }
/* Línea de prueba social */
.lo-usan { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.6rem; padding: 10rem 0; font-size: 1.6rem; color: var(--ink-400); }
.lo-usan b { font-size: 2rem; font-weight: 700; color: var(--ink-strong); }
/* El aire lo pone ahora el padding de .lo-usan */
.highlights--conusan { margin-top: 0; }
/* Caso real: Desafío → Qué se hizo → Antes/Después → Cita */
.caso { position: relative; max-width: 96rem; margin: 4.8rem auto 0; padding: 4.8rem; border-radius: 3.2rem; background: #fff; box-shadow: var(--card-shadow); }
.caso__aviso { margin: -1.6rem -1.6rem 3.2rem; padding: 1rem 1.8rem; border-radius: 1.2rem; background: #fff6e6; box-shadow: inset 0 0 0 .1rem #f3dcae; font-size: 1.4rem; font-weight: 600; line-height: 2.2rem; color: #9a6a12; }
.caso__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 2.4rem; }
.caso__cliente { margin-top: 1.4rem; font-size: 2.8rem; font-weight: 600; line-height: 3.6rem; color: var(--ink-strong); }
.caso__rubro { margin-top: .4rem; font-size: 1.6rem; line-height: 2.4rem; color: var(--ink-400); }
.caso__logo { display: grid; flex: none; place-items: center; width: 7.2rem; height: 7.2rem; border-radius: 1.8rem; background: #f4f4fa; color: var(--ink-400); }
.caso__logo svg { width: 3.2rem; height: 3.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.caso__cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem; margin-top: 3.6rem; }
.caso__h { font-size: 1.4rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-indigo); }
.caso__bloque p { margin-top: 1.2rem; font-size: 1.7rem; line-height: 2.8rem; color: var(--ink-600); }
.caso__bloque .seg { margin-top: 1.6rem; }
.caso__medicion { margin-top: 3.6rem; padding: 3.2rem; border-radius: 2.4rem; background: #f7f7fc; }
.caso__que { font-size: 1.5rem; font-weight: 600; color: var(--ink-500); }
.caso__barras { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-top: 1.6rem; }
.caso__antes, .caso__despues { display: grid; gap: .4rem; padding: 1.6rem 2.8rem; border-radius: 1.6rem; background: #fff; box-shadow: inset 0 0 0 .1rem var(--line); }
.caso__despues { background: #e9fbf2; box-shadow: inset 0 0 0 .15rem #a8e9c8; }
.caso__barras span { font-size: 1.35rem; font-weight: 600; color: var(--ink-400); }
.caso__barras b { font-size: 3.2rem; font-weight: 700; line-height: 4rem; color: var(--ink-strong); }
.caso__despues b { color: #0f9d5c; }
.caso__flecha svg { width: 2.8rem; height: 2.8rem; fill: none; stroke: var(--ink-400); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.caso__porque { margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-600); }
.caso__porque b { font-weight: 600; color: var(--ink-strong); }
.caso__cita { margin-top: 3.2rem; padding-left: 2.4rem; border-left: .3rem solid var(--brand-indigo); }
.caso__cita p { font-size: 2rem; line-height: 3.2rem; color: var(--ink-strong); }
.caso__cita cite { display: block; margin-top: 1.2rem; font-size: 1.5rem; font-style: normal; color: var(--ink-400); }
/* Comparativa a dos columnas (API oficial vs. QR) */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; margin-top: 4.8rem; align-items: start; }
.versus__col { padding: 4rem; border-radius: 3.2rem; background: #fff; }
.versus__col--ok { box-shadow: inset 0 0 0 .2rem #b4eed1, 0 2.4rem 6rem -3rem rgba(15, 157, 92, .4); }
.versus__col--no { background: #fafafc; box-shadow: inset 0 0 0 .1rem var(--line); }
.versus__tag { display: inline-block; padding: .6rem 1.6rem; border-radius: 99px; font-size: 1.35rem; font-weight: 600; line-height: 2.2rem; }
.versus__col--ok .versus__tag { background: #e3faef; color: #0f9d5c; }
.versus__col--no .versus__tag { background: #f1f1f6; color: var(--ink-500); }
.versus__sello { display: block; width: 19.4rem; height: auto; margin-top: 2.4rem; }
.versus__sub { margin-top: 2.4rem; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-400); }
.versus__lista { display: grid; gap: 1.8rem; margin-top: 2.8rem; }
.versus__lista li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1.4rem; font-size: 1.65rem; line-height: 2.7rem; color: var(--ink-600); }
.versus__lista b { font-weight: 600; color: var(--ink-strong); }
.versus__lista svg { width: 2.4rem; height: 2.4rem; margin-top: .2rem; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.versus__col--ok .versus__lista svg { stroke: #0f9d5c; }
.versus__col--no .versus__lista svg { stroke: #c9821f; }
.versus__pie { margin-top: 3.2rem; font-size: 1.7rem; line-height: 2.8rem; text-align: center; color: var(--ink-500); }
.versus__pie b { font-weight: 600; color: var(--ink-strong); }
/* Sub-rubros bajo el título del hero */
.rubros { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.rubros li { padding: .6rem 1.4rem; border-radius: 10rem; background: rgba(99, 102, 241, .07); box-shadow: inset 0 0 0 .1rem rgba(99, 102, 241, .18); font-size: 1.4rem; font-weight: 600; line-height: 2rem; color: var(--brand-indigo); }
.prod-chat__ico { display: grid; flex: none; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 1.2rem; background: #f4f4fa; color: var(--brand-indigo); }
.prod-chat__ico svg { width: 2.8rem; height: 2.8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Ficha de carrera dentro del chat */
.carrera { display: grid; gap: .8rem; margin-top: 1.2rem; padding: 1.4rem 1.6rem; border-radius: 1.6rem; background: #fff; box-shadow: inset 0 0 0 .1rem var(--line), 0 .8rem 2rem -1rem rgba(40, 36, 110, .3); }
.carrera li { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; font-size: 1.4rem; line-height: 2rem; }
.carrera b { flex: none; font-weight: 500; color: var(--ink-400); }
.carrera span { font-weight: 600; text-align: right; color: var(--ink-black); }

/* Tarjeta de turno dentro del chat */
.turno { display: block; margin-top: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: rgba(255, 255, 255, .16); }
.turno b { display: block; font-size: 1.6rem; line-height: 2.2rem; }
.turno > span { display: block; font-size: 1.4rem; line-height: 2rem; opacity: .9; }
.turno em { display: block; margin-top: .6rem; font-size: 1.3rem; font-style: normal; line-height: 1.9rem; opacity: .8; }

/* Programas ofrecidos y adjuntos dentro del chat */
.programas { display: grid; gap: .8rem; margin-top: 1.2rem; }
.programas li { padding: 1.2rem 1.4rem; border-radius: 1.4rem; background: #fff; box-shadow: inset 0 0 0 .1rem var(--line); }
.programas b { display: block; font-size: 1.5rem; font-weight: 600; line-height: 2rem; color: var(--ink-black); }
.programas span { display: block; font-size: 1.3rem; line-height: 1.8rem; color: var(--ink-400); }
.programas em { display: block; margin-top: .4rem; font-size: 1.4rem; font-style: normal; font-weight: 600; color: var(--brand-indigo); }
.adjunto { display: block; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .16); }
.adjunto b { display: block; font-size: 1.5rem; line-height: 2rem; }
.adjunto i { display: block; font-size: 1.3rem; font-style: normal; line-height: 1.9rem; opacity: .82; }

/* Etiquetas y segmentos */
.tags-card { display: flex; flex-wrap: wrap; gap: .8rem; max-width: 32rem; padding: 1.8rem 2rem; border-radius: 1.8rem; background: #fff; box-shadow: var(--card-shadow); }
.tags-card p { width: 100%; font-size: 1.4rem; font-weight: 600; color: var(--ink-black); }
.tag { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.2rem; border-radius: 99px; background: #eef0ff; font-size: 1.3rem; font-weight: 500; line-height: 2rem; color: var(--brand-indigo); }
.tag--green { background: #e3faef; color: #0f9d5c; }
.tag--orange { background: #fff1de; color: #c96a00; }
.tag--on { background: var(--brand-indigo); color: #fff; }
.seg { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.preview { margin-top: 1.2rem; padding: 1.6rem 1.8rem; border-radius: 1.6rem; background: #f7f7fc; font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-strong); }
.preview mark { padding: .1rem .6rem; border-radius: .6rem; background: #f4ebff; color: #9333ea; }

/* Recordatorios */
.sched ul { margin-top: 1.6rem; }
.sched li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; padding: 1.4rem 0; border-top: .1rem solid #efeff5; font-size: 1.6rem; font-weight: 600; line-height: 2.2rem; color: var(--ink-black); }
.sched small { display: block; font-size: 1.4rem; font-weight: 400; color: var(--ink-400); }

/* Mercado Libre */
.ml { display: grid; gap: 1.6rem; }
.ml__product { display: flex; align-items: center; gap: 1.4rem; padding: 1.2rem; border-radius: 1.6rem; background: #fffbe0; font-size: 1.6rem; font-weight: 600; line-height: 2.2rem; color: var(--ink-black); }
.ml__product img { width: 6rem; height: 6rem; border-radius: 1.2rem; object-fit: cover; background: #fff; }
.ml__product small { display: block; font-size: 1.4rem; font-weight: 400; color: var(--ink-400); }
.ml .wa-msg { max-width: 88%; box-shadow: inset 0 0 0 .1rem #ececf2; }

/* Logos (API) */
.logo-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; width: 100%; max-width: 52rem; }
.logo-tiles li { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 2.4rem 1rem; border-radius: 2rem; background: #fff; box-shadow: var(--card-shadow); font-size: 1.5rem; font-weight: 500; color: var(--ink-strong); }
.logo-tile__logo { display: grid; place-items: center; width: 6.4rem; height: 6.4rem; border-radius: 1.8rem; background: var(--lav); }
.logo-tile__logo img { width: 4rem; height: 4rem; object-fit: contain; }
.logo-tile__logo svg { width: 3rem; height: 3rem; fill: none; stroke: var(--brand-indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Eventos de la API */
.events { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 3.2rem; }
.events li { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.6rem; border-radius: 99px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .16); font-size: 1.4rem; color: rgba(255, 255, 255, .88); }
.events .dot { width: .8rem; height: .8rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 .8rem var(--green); }
.feat-visual.visual--dark { align-content: center; }

/* Órbita del hero de Omnicanalidad */
.orbit--hero { margin: -6rem auto; transform: scale(.86); }

/* Catálogo, compra paso a paso y enlaces cortos */
.avatar--sq { border-radius: 1.2rem; }
.qr-badge { display: grid; flex: none; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 1.4rem; background: var(--lav); color: var(--brand-indigo); }
.qr-badge svg { width: 2.8rem; height: 2.8rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.buy { display: grid; gap: 2rem; margin-top: 2.4rem; }
.buy li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.buy li > span { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--lav); font-size: 1.5rem; font-weight: 600; color: var(--brand-indigo); }
.buy b { display: block; font-size: 1.7rem; line-height: 2.4rem; color: var(--ink-black); }
.buy p { font-size: 1.5rem; line-height: 2.2rem; color: var(--ink-400); }
.url-swap { display: grid; gap: 1rem; margin-top: 1.2rem; }
.url-swap__long { padding: 1.4rem 1.8rem; border-radius: 1.4rem; background: #f7f7fc; font-size: 1.4rem; line-height: 2.2rem; color: var(--ink-400); word-break: break-all; }
.url-swap__arrow { justify-self: center; color: #c4c4d2; }
.url-swap__arrow svg { display: block; width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.url-swap__short { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.6rem 1.8rem; border-radius: 1.4rem; background: #eef0ff; font-size: 1.9rem; font-weight: 600; line-height: 2.6rem; color: var(--brand-indigo); }

/* ==========================================================================
   Páginas de Recursos (guías, casos, ayuda, API, estado y contacto)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buscador del centro de ayuda */
.help-search { position: relative; display: flex; width: min(100%, 62rem); margin-top: 4rem; }
.help-search__icon { position: absolute; left: 2.4rem; top: 50%; transform: translateY(-50%); display: grid; color: var(--ink-400); }
.help-search__icon svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.help-search input {
  width: 100%;
  height: 6.8rem;
  padding: 0 2.4rem 0 6.4rem;
  border: none;
  border-radius: 99px;
  background: #fff;
  box-shadow: inset 0 0 0 .1rem var(--line), var(--card-shadow);
  font: inherit;
  font-size: 1.8rem;
  color: var(--ink-strong);
}
.help-search input:focus { outline: .2rem solid var(--brand-indigo); outline-offset: .2rem; }
.help-search__note { margin-top: 1.6rem; font-size: 1.6rem; color: var(--ink-600); }
/* El aire entre las tarjetas de temas y el primer título de grupo lo pone
   ahora el padding-bottom de .section--flush. */
.section--help { padding: 0 0 5.6rem; }
.section--help .faq { margin-top: 2.4rem; }
.help-group__title { max-width: 104rem; margin: 0 auto; font-size: 2.8rem; font-weight: 600; line-height: 3.6rem; color: var(--ink-strong); }
.use--link { transition: transform .4s var(--ease-out), background-color .3s ease; }
.use--link:hover { transform: translateY(-.4rem); }
.use--link .use__title a { color: inherit; }
.use--link .use__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.use { position: relative; }

/* Casos de éxito */
.stats-band { padding: 3.2rem 4rem; border-radius: 2.8rem; background: #fff; box-shadow: var(--card-shadow); }
.stats-band .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; margin-top: 5.6rem; }
.case { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 3.6rem; border-radius: 2.8rem; background: #fff; box-shadow: inset 0 0 0 .2rem var(--line); transition: transform .5s var(--ease-out), box-shadow .3s ease; }
.case:hover { transform: translateY(-.6rem); box-shadow: var(--card-shadow); }
.case__title { margin-top: 1.8rem; font-size: 2.6rem; font-weight: 600; line-height: 3.4rem; color: var(--ink-black); }
.case__title a { color: inherit; }
.case__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.case__text { margin-top: 1.4rem; font-size: 1.7rem; line-height: 2.8rem; color: var(--ink-600); }
.case .seg { margin-top: 2.4rem; }
.case__result { display: flex; gap: 1.2rem; margin-top: 2.4rem; padding-top: 2.4rem; border-top: .1rem solid var(--line); font-size: 1.6rem; line-height: 2.6rem; color: var(--ink-strong); }
.case__icon { display: grid; flex: none; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1rem; background: #e3faef; color: #0f9d5c; }
.case__icon svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.case .more-link { margin-top: 2.4rem; }

/* Estado del servicio */
.status-time { margin-top: 2.4rem; font-size: 1.6rem; color: var(--ink-400); }
.status-list { max-width: 86rem; margin: 0 auto; }
.company-card { max-width: 86rem; margin: 5.6rem auto 0; }
.timeline { display: grid; gap: 1.6rem; margin-top: 5.6rem; }
.timeline__item { position: relative; padding: 3rem 3.6rem; border-radius: 2.4rem; background: #fff; box-shadow: inset 0 0 0 .2rem var(--line); }
.timeline__item .pill { position: absolute; top: 3rem; right: 3.6rem; }
.timeline__date { font-size: 1.4rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-400); }
.timeline__title { margin-top: .8rem; font-size: 2.1rem; font-weight: 600; line-height: 2.8rem; color: var(--ink-black); }
.timeline__text { margin-top: .8rem; font-size: 1.7rem; line-height: 2.8rem; color: var(--ink-600); }

/* Documentación */
.doc-code { width: 100%; max-width: 52rem; border-radius: 2rem; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .12); overflow: hidden; }
.doc-code__head { display: flex; align-items: center; gap: .8rem; padding: 1.4rem 2rem; background: rgba(255, 255, 255, .06); font-size: 1.3rem; color: rgba(255, 255, 255, .7); }
.doc-code__dot { width: .9rem; height: .9rem; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.doc-code__dot:first-child { background: #ff6058; }
.doc-code__dot:nth-child(2) { background: #ffbd2e; }
.doc-code__dot:nth-child(3) { background: #28c93f; margin-right: 1rem; }
.doc-code pre { margin: 0; padding: 2.4rem; overflow-x: auto; }
.doc-code code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.5rem; line-height: 2.4rem; color: #d8f7e6; white-space: pre; }
.doc-note { margin-top: 2.4rem; max-width: 52rem; font-size: 1.5rem; line-height: 2.4rem; color: rgba(255, 255, 255, .65); }
.doc-cta { display: flex; justify-content: center; margin-top: 4.8rem; }

/* Contacto */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46rem); gap: 4rem; align-items: start; }
.contact__form { padding: 4.8rem; border-radius: 3.2rem; background: #fff; box-shadow: var(--card-shadow); }
.contact__title { font-size: 3.2rem; font-weight: 600; line-height: 4rem; color: var(--ink-strong); }
.contact__lead { margin-top: 1.2rem; font-size: 1.7rem; line-height: 2.8rem; color: var(--ink-600); }
.contact__aside { display: grid; gap: 2.4rem; }
.form { display: grid; gap: 2rem; margin-top: 3.2rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.form__field { display: grid; gap: .8rem; font-size: 1.5rem; font-weight: 500; color: var(--ink-strong); }
.form__field input, .form__field textarea, .form__field select {
  width: 100%;
  padding: 1.4rem 1.8rem;
  border: none;
  border-radius: 1.4rem;
  background: var(--lav);
  box-shadow: inset 0 0 0 .1rem var(--line);
  font: inherit;
  font-size: 1.7rem;
  color: var(--ink-strong);
}
.form__field textarea { resize: vertical; }
/* Opciones rápidas del campo "¿Qué necesitás resolver?" */
.form__chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.chip--sm { padding: .8rem 1.6rem; font-size: 1.4rem; line-height: 2.2rem; }
/* WhatsApp primero: en celular nadie completa seis campos */
.wa-primero { display: none; }
.wa-primero__t { font-size: 2.2rem; font-weight: 600; line-height: 3rem; color: var(--ink-strong); }
.wa-primero__s { margin-top: .8rem; font-size: 1.65rem; line-height: 2.6rem; color: var(--ink-600); }
.wa-primero .btn { width: 100%; margin-top: 2.4rem; }
.wa-primero__o { position: relative; margin-top: 3.2rem; font-size: 1.5rem; text-align: center; color: var(--ink-400); }
.wa-primero__o::before, .wa-primero__o::after { content: ""; position: absolute; top: 50%; width: calc(50% - 9rem); height: .1rem; background: var(--line); }
.wa-primero__o::before { left: 0; }
.wa-primero__o::after { right: 0; }
.form__field input:focus, .form__field textarea:focus, .form__field select:focus { outline: .2rem solid var(--brand-indigo); outline-offset: .1rem; }
.form__field input:user-invalid, .form__field.is-error input { box-shadow: inset 0 0 0 .15rem #d92d2d; }
.form .btn { justify-self: start; }
.form__note { font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-400); }
.form__note.is-ok { color: #0f9d5c; }
.form__note.is-error { color: #d92d2d; }

/* ==========================================================================
   Tablet (≤1099px)
   ========================================================================== */
@media (max-width: 1099px) {
  .page-hero { padding-bottom: 9rem; }
  .page-hero__title { font-size: 4.6rem; line-height: 5.6rem; }
  .section, .module { padding: 9rem 0; }
  .features--overview { padding: 6rem 3.2rem 6.4rem; }
  .features--overview .feature { width: 50%; }
  /* minmax(0, 1fr) y no 1fr: con "1fr" el mínimo es el contenido, así que los
     mockups anchos empujaban la columna más allá de la pantalla y la página se
     movía de costado en celulares angostos (320–360 px). En escritorio ya
     estaba bien puesto. */
  .module__inner,
  .module--reverse .module__inner { grid-template-columns: minmax(0, 1fr); gap: 5.6rem; }
  .module--reverse .module__text { order: 0; }
  .module__item h3 { font-size: 2.2rem; line-height: 3rem; }
  .module__item p, .module__lead { font-size: 2rem; line-height: 3.2rem; }
  .visual { min-height: 56rem; }
  .orbit { transform: scale(.8); margin: -6rem auto -12rem; }
  .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-card__text { font-size: 1.9rem; line-height: 3rem; }
  .dark-card { grid-template-columns: 1fr; gap: 5.6rem; padding: 6.4rem 4.8rem; }
  .post-feature { grid-template-columns: 1fr; }
  .post-feature .post-cover { min-height: 40rem; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid > .post-card, .post-grid > .post-card.is-wide, .post-grid > .post-card.is-solo { grid-column: auto; }
  .post-card__text { font-size: 1.9rem; line-height: 3rem; }
  .newsletter { grid-template-columns: 1fr; gap: 4rem; padding: 6.4rem 4.8rem; }
  .plans { grid-template-columns: 1fr; max-width: 64rem; margin-inline: auto; }
  .plan__desc { min-height: 0; }
  .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare thead th { position: static; }
  .compare tbody th, .compare thead th:first-child { width: 28%; }
  .compare td, .compare thead th { width: 18%; }
  .compare th, .compare td { padding: 1.8rem 1rem; overflow-wrap: anywhere; }

  /* Páginas de detalle */
  .feat-hero { padding-top: 15rem; padding-bottom: 8rem; }
  .feat-hero__inner { grid-template-columns: 1fr; gap: 6.4rem; }
  .feat-hero__icon { margin-top: 3.2rem; }
  .feat-visual { min-height: 60rem; }
  .orbit--hero { transform: scale(.8); margin: -8rem auto; }
  .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .hl__text, .use__text, .step__text { font-size: 1.9rem; line-height: 3rem; }
  .steps { grid-template-columns: 1fr; }
  .uses, .uses--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel__text { font-size: 1.9rem; line-height: 3rem; }

  .hero-split { grid-template-columns: 1fr; gap: 3.2rem; }
  .hero-split .globe { position: static; min-height: 0; justify-self: center; }
  .hero-split .globe__canvas { position: static; width: 100%; max-width: 52rem; transform: none; }
  /* Recursos */
  .cases { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .contact__form { padding: 4rem; }
  .doc-code { max-width: 100%; }
  .case__text, .timeline__text { font-size: 1.9rem; line-height: 3rem; }
}

/* ==========================================================================
   Mobile (≤699px)
   ========================================================================== */
@media (max-width: 699px) {
  .filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: .4rem; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }

  .page-tag { font-size: 1.6rem; }
  .page-hero__title { font-size: 3.8rem; line-height: 4.8rem; }
  /* Título que quedaba con una palabra sola en el último renglón */
  .page-hero__title--equilibrado { font-size: 4.1rem; line-height: 5.1rem; text-wrap: balance; }
  .page-hero__lead { margin-top: 2.2rem; font-size: 2.2rem; line-height: 3.2rem; }
  .page-hero__actions { flex-direction: column; align-items: stretch; gap: 1.6rem; width: 100%; max-width: 44rem; }
  .page-hero__visual { margin-top: 5.6rem; }
  .section, .module { padding: 7.2rem 0; }
  .section-head__title { font-size: 3.4rem; line-height: 4.4rem; }
  .section-head__lead { font-size: 2.1rem; line-height: 3.2rem; }
  .features--overview { padding: 5.6rem 2rem; border-radius: 3.2rem; }
  .features--overview .features__title { font-size: 3.4rem; line-height: 4.4rem; }
  /* Marcelo (R2): en celular los cuadros quedaban pegados entre sí. Eran flex
     al 50% sin separación horizontal: lo único que se veía entre uno y otro era
     el padding de adentro. En grilla se les puede dar aire de verdad. */
  .features--overview .features__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; margin-top: 4rem; }
  .features--overview .feature { width: auto; }
  .features--overview .feature__icon { width: 14rem; height: 14rem; }
  .features--overview .feature__title { white-space: normal; font-size: 2rem; }
  .features--overview .feature__text { display: none; }
  .module__icon { width: 7.2rem; height: 7.2rem; }
  .module__title { font-size: 3.4rem; line-height: 4.2rem; }
  .visual { min-height: 0; padding: 4rem 2.4rem; border-radius: 3.2rem; }
  .mock { padding: 2.4rem; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow__link { width: .2rem; height: 4.8rem; margin: .6rem auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0 .6rem, transparent .6rem 1.2rem); }
  .flow--abanico .flow__link { width: auto; height: .2rem; margin: 0 .4rem; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 .6rem, transparent .6rem 1.2rem); }
  .flow__link::after { left: 50%; top: 0; margin: 0 0 0 -.45rem; animation-name: flow-dot-v; }
  .orbit { transform: scale(.52); margin: -18rem -20rem -26rem; width: 76rem; }
  .filters { flex-wrap: nowrap; justify-content: flex-start; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .chip { flex: none; font-size: 1.8rem; }
  .int-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .int-card { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); column-gap: 2rem; align-items: center; padding: 2.8rem 2.4rem; }
  .int-card__logo { grid-row: span 2; width: 6.4rem; height: 6.4rem; }
  .int-card__name { align-self: end; margin-top: 0; font-size: 2.3rem; }
  .int-card__cat { align-self: start; font-size: 1.7rem; }
  .int-card__text, .int-card__foot { grid-column: 1 / -1; }
  .int-card__text { margin-top: 1.8rem; }
  .int-card__foot { margin-top: 1.8rem; }
  .dark-card { padding: 5.6rem 2.6rem; border-radius: 3.2rem; }
  .dark-card__title { font-size: 3.4rem; line-height: 4.4rem; }
  .dark-list li { font-size: 2rem; line-height: 3rem; }
  .post-feature { border-radius: 3.2rem; }
  .post-feature .post-cover { min-height: 28rem; }
  .post-feature__body { padding: 3.6rem 2.6rem 4rem; }
  .post-feature__title { font-size: 3rem; line-height: 3.8rem; }
  .post-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .newsletter { padding: 5.6rem 2.6rem; border-radius: 3.2rem; }
  .newsletter__title { font-size: 3.2rem; line-height: 4rem; }
  .newsletter__form { flex-direction: column; padding: 1.2rem; border-radius: 2.4rem; }
  .newsletter__form input { height: 6.4rem; }
  .plan { padding: 4rem 2.8rem 4.4rem; border-radius: 3.2rem; }
  .plan__list li { font-size: 2rem; line-height: 3rem; }
  .perks { grid-template-columns: 1fr; }
  .perk p { font-size: 1.9rem; line-height: 2.8rem; }
  .faq summary { padding: 2.4rem; font-size: 2.1rem; }
  .faq__answer { padding: 0 2.4rem 2.8rem; font-size: 2rem; }

  /* Páginas de detalle */
  .feat-hero { padding-top: 13rem; padding-bottom: 6.4rem; }
  .crumbs { font-size: 1.7rem; }
  .feat-hero__icon { width: 9.6rem; height: 9.6rem; margin: 2.8rem 0 2.4rem; border-radius: 2.4rem; }
  .feat-hero__title { font-size: 3.8rem; line-height: 4.6rem; }
  .feat-hero__lead { font-size: 2.1rem; line-height: 3.2rem; }
  .feat-hero .page-hero__actions { align-items: stretch; }
  .trust { flex-direction: column; }
  .trust li { font-size: 1.9rem; }
  .feat-visual { min-height: 0; padding-top: 12rem; padding-bottom: 10rem; }
  /* Sin piezas flotantes visibles no hay que reservarles lugar */
  .feat-visual:not(:has(.float:not(.float--oculta))) { padding-top: 4rem; padding-bottom: 4rem; }
  .feat-visual__main { max-width: 100%; max-height: 46rem; }
  .float { transform-origin: center; }
  .float[style*="width"] { width: 44% !important; }
  .flow__fan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tienda-split { grid-template-columns: 1fr; }
  .float--oculta { display: none; }
  .kpis--solo-desktop, .solo-desktop { display: none; }
  .chip-card, .toast { font-size: 1.6rem; }
  .orbit--hero { margin: -20rem 0 -20rem calc(50% - 38rem); transform: scale(.46); }
  .highlights, .uses, .uses--2, .related { grid-template-columns: 1fr; }
  .hl { padding: 3.2rem 2.6rem; }
  .step { padding: 3.6rem 2.6rem; }
  .use { padding: 2.6rem; }
  .related__head { flex-direction: column; align-items: flex-start; }
  .module__note { font-size: 1.7rem; }
  .versus { grid-template-columns: 1fr; gap: 1.6rem; }
  .versus__col { padding: 3.2rem 2.6rem; }
  .caso { padding: 3.2rem 2.6rem; }
  .caso__aviso { margin: -.8rem -.8rem 2.4rem; }
  .caso__cuerpo { grid-template-columns: 1fr; gap: 2.8rem; }
  .caso__medicion { padding: 2.4rem 2rem; }
  .caso__antes, .caso__despues { flex: 1 1 12rem; padding: 1.4rem 2rem; }
  .caso__barras { gap: 1.2rem; }
  .caso__cliente { font-size: 2.4rem; line-height: 3.2rem; }
  /* Títulos que quedaban con una palabra sola en el último renglón */
  .section-head__title--equilibrado { font-size: 3.7rem; line-height: 4.7rem; text-wrap: balance; }
  .kanban, .kanban--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .kanban__col { min-height: 0; }
  .rubros li { font-size: 1.3rem; }
  .inbox__row, .sched li { grid-template-columns: 4.4rem minmax(0, 1fr); }
  .inbox__side, .sched li > .pill { grid-column: 2; justify-items: start; justify-self: start; display: flex; gap: .8rem; align-items: center; }
  .fb__split { grid-template-columns: 1fr; }
  .fb__split span { flex-direction: row; justify-content: center; }
  .logo-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .events { justify-content: flex-start; }

  .hero-split { padding-bottom: 2rem; }
  /* Recursos */
  .help-search input { height: 6.4rem; padding-left: 5.6rem; font-size: 2rem; }
  .help-search__icon { left: 2rem; }
  .help-group__title { font-size: 2.6rem; line-height: 3.4rem; }
  .stats-band { padding: 2.4rem; }
  .stats-band .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case, .timeline__item { padding: 2.8rem 2.4rem; }
  .timeline__item .pill { position: static; display: inline-flex; margin-top: 1.6rem; }
  .contact__form { padding: 2.8rem 2.4rem; }
  .form__row { grid-template-columns: 1fr; }
  .wa-primero { display: block; margin-bottom: 4.8rem; }
  .form .btn { width: 100%; }
  .doc-code code { font-size: 1.6rem; }
}
@keyframes flow-dot-v { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - .9rem); opacity: 0; } }


/* ==========================================================================
   Páginas legales (términos y condiciones, política de privacidad)
   ========================================================================== */
.legal { max-width: 88rem; padding-top: 2rem; padding-bottom: 10rem; }
.legal__block + .legal__block { margin-top: 4.8rem; }
.legal__title { font-size: 2.4rem; font-weight: 600; line-height: 3.2rem; color: var(--ink-strong); }
.legal__text { margin-top: 1.6rem; font-size: 1.8rem; line-height: 3rem; color: var(--ink-600); }
.legal__list { margin-top: 1.6rem; display: grid; gap: 1.2rem; }
.legal__list li { position: relative; padding-left: 2.6rem; font-size: 1.8rem; line-height: 3rem; color: var(--ink-600); }
.legal__list li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--green); }
.legal a { color: var(--indigo); text-decoration: underline; text-underline-offset: .3rem; }
.legal a:hover { color: var(--purple); }
.legal__meta { margin-top: 6rem; padding-top: 2.4rem; border-top: 1px solid #e6e6ec; font-size: 1.5rem; line-height: 2.4rem; color: var(--ink-400); }

@media (max-width: 699px) {
  .legal { padding-bottom: 6rem; }
  .legal__block + .legal__block { margin-top: 3.6rem; }
  .legal__title { font-size: 2.1rem; line-height: 2.8rem; }
  .legal__text, .legal__list li { font-size: 1.7rem; line-height: 2.8rem; }
}


/* ==========================================================================
   Funcionalidades — hero grande, canales, hilo de chat y bloque de cierre
   ========================================================================== */
/* Marcelo (R2): en celular cortaba dejando "ventas y" sola en el tercer renglón.
   Repartiendo los renglones, "atención" baja y se le junta, que es justo lo que pedía.
   Lo usa sólo esta página. */
.page-hero__title--xl { font-size: 5.6rem; line-height: 6.6rem; text-wrap: balance; }

/* Nota al pie de un módulo (por ejemplo "Disponible en Pedidos.gratis") */
.module__nota { margin-top: 2rem; font-size: 1.5rem; line-height: 2.2rem; color: var(--ink-400); }

/* Grilla y fila de canales conectados */
.canal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1rem; margin-top: 2.4rem; }
.canal-fila { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.6rem; }
.canal-grid li,
.canal-fila li { display: grid; justify-items: center; gap: .8rem; text-align: center; }

.canal-grid img,
.canal-fila img { width: 4rem; height: 4rem; }
.canal-grid span,
.canal-fila span { font-size: 1.3rem; line-height: 1.7rem; color: var(--ink-500); }

/* Hilo de chat de e-commerce */
.hilo { max-width: 46rem; gap: 1.4rem; }
.hilo__head { display: flex; align-items: center; gap: 1.2rem; padding-bottom: 1.4rem; border-bottom: .1rem solid rgba(40, 36, 110, .12); }
.hilo__av { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: linear-gradient(145deg, #6366f1, #a855f7); color: #fff; font-size: 1.5rem; font-weight: 600; }
.hilo__id { font-size: 1.7rem; font-weight: 600; line-height: 2.2rem; color: var(--ink-black); }
.hilo__id small { display: block; font-size: 1.3rem; font-weight: 400; line-height: 1.8rem; color: var(--ink-500); }
.hilo__ok { width: 1.6rem; height: 1.6rem; margin-left: .6rem; vertical-align: -.2rem; fill: var(--brand-indigo); }
.hilo__ok .hilo__tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hilo .wa-msg { max-width: 34rem; }

/* Opciones, link y producto dentro de una burbuja */
.wa-opc { display: block; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .16); }
.wa-opc b { display: block; font-size: 1.5rem; line-height: 2rem; }
.wa-opc i { display: block; font-size: 1.4rem; font-style: normal; line-height: 1.9rem; opacity: .82; }
.wa-link { display: inline-block; margin-top: 1.2rem; font-size: 1.5rem; font-weight: 600; color: #bdf5da; text-decoration: underline; text-underline-offset: .3rem; }
.wa-prod { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; padding: 1.2rem; border-radius: 1.4rem; background: #fff; color: var(--ink-strong); font-size: 1.5rem; font-weight: 600; line-height: 2rem; }
.wa-prod__ico { display: grid; place-items: center; flex: none; width: 4.8rem; height: 4.8rem; border-radius: 1rem; background: var(--lav); }
.wa-prod__ico svg { width: 2.8rem; height: 2.8rem; fill: none; stroke: var(--brand-indigo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-prod i { display: block; margin-top: .2rem; font-size: 1.5rem; font-style: normal; font-weight: 600; color: #119a60; }
.wa-prod s { font-weight: 400; color: var(--ink-400); }
.wa-cta { display: block; margin-top: 1rem; padding: 1.2rem; border-radius: 1.2rem; background: var(--green); color: #fff; font-size: 1.5rem; font-weight: 600; text-align: center; }

/* Bloque de cierre: planes o asesor, que es lo que se busca al final */
.cierre { padding: 12rem 0; background: var(--navy); color: #fff; }
.cierre__inner { max-width: 86rem; margin-inline: auto; text-align: center; }
.cierre__title { font-size: 4.4rem; font-weight: 600; line-height: 5.4rem; text-wrap: balance; }
.cierre__lead { margin-top: 2.2rem; font-size: 1.95rem; line-height: 3.2rem; color: rgba(255, 255, 255, .82); text-wrap: balance; }
.cierre__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 4rem; }
/* ancho automático: .btn--lg trae 27rem fijos y el texto quedaba sin aire */
.cierre__acciones .btn { width: auto; gap: 1.2rem; padding: 0 4.2rem; }
.cierre__acciones .btn svg { width: 2.9rem; height: 2.9rem; margin: 0; }
.cierre + .site-footer,
body:has(.cierre) .site-footer,
body:has(main > .page-hero:only-child) .site-footer { margin-top: 0; }
/* Páginas de un solo bloque (gracias, 404): el hero estira hasta que el pie quede abajo en pantallas altas */
body:has(main > .page-hero:only-child) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(main > .page-hero:only-child) main { display: flex; flex-direction: column; flex: 1; }
main > .page-hero:only-child { flex: 1; }

@media (max-width: 1099px) {
  .page-hero__title--xl { font-size: 5rem; line-height: 6rem; }
  .cierre { padding: 9rem 0; }
  .cierre__title { font-size: 3.8rem; line-height: 4.8rem; }
  .canal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  /* El H1 es la entrada de la página: tiene que pesar */
  .page-hero__title--xl { font-size: 4.2rem; line-height: 5rem; letter-spacing: -.01em; }
  .canal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem .6rem; }
  .canal-grid img, .canal-fila img { width: 3.6rem; height: 3.6rem; }
  .canal-grid span, .canal-fila span { font-size: 1.2rem; line-height: 1.6rem; }

  .hilo { max-width: 100%; }
  .hilo .wa-msg { max-width: 88%; }
  .cierre { padding: 8rem 0; }
  .cierre__title { font-size: 3.4rem; line-height: 4.4rem; }
  .cierre__lead { font-size: 2rem; line-height: 3.2rem; }
  .cierre__acciones { flex-direction: column; align-items: stretch; width: 100%; max-width: 44rem; margin-inline: auto; }
  .cierre__acciones .btn { width: 100%; padding: 0 2.4rem; }
}


/* ==========================================================================
   Nota del blog (nota.html)
   ========================================================================== */
.nota { padding-top: 16rem; }
.nota__ancho { max-width: 78rem; }
.nota__volver { margin-bottom: 3.2rem; }
.nota__volver a { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.6rem; font-weight: 600; color: var(--brand-indigo); }
.nota__volver svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); }
.nota__volver a:hover { color: var(--purple); }
.nota__title { margin-top: 1.8rem; font-size: 4.6rem; font-weight: 600; line-height: 5.8rem; letter-spacing: -.01em; color: var(--ink-black); }
.nota__bajada { margin-top: 2.2rem; font-size: 2.1rem; line-height: 3.4rem; color: var(--ink-600); }
.nota__firma { display: flex; align-items: center; gap: 1.4rem; margin-top: 3.4rem; padding-top: 3.2rem; border-top: .1rem solid var(--line); }
.nota__firma b { display: block; font-size: 1.7rem; font-weight: 600; color: var(--ink-strong); }
.nota__firma small { display: block; margin-top: .2rem; font-size: 1.5rem; color: var(--ink-400); }
.nota__lee { display: inline-flex; align-items: center; gap: .5rem; }
.nota__lee svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nota__portada { margin-top: 4.8rem; }
.nota__portada img { width: 100%; height: auto; border-radius: 2.8rem; }
.nota__cuerpo { margin-top: 5.6rem; }
.nota__lead { font-size: 2.1rem; line-height: 3.6rem; color: var(--ink-strong); }
.nota__cuerpo h2 { margin-top: 4.8rem; font-size: 3rem; font-weight: 600; line-height: 4rem; color: var(--ink-black); }
.nota__cuerpo p { margin-top: 2rem; font-size: 1.85rem; line-height: 3.3rem; color: var(--ink-600); }
.nota__cuerpo ul { display: grid; gap: 1.4rem; margin-top: 2.4rem; }
.nota__cuerpo li { position: relative; padding-left: 2.8rem; font-size: 1.85rem; line-height: 3.1rem; color: var(--ink-600); }
.nota__cuerpo li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--green); }
.nota__cuerpo li b { color: var(--ink-strong); }
.nota__cuerpo a { font-weight: 500; color: var(--brand-indigo); text-decoration: underline; text-underline-offset: .3rem; }
.nota__cuerpo a:hover { color: var(--purple); }
.nota__cita { margin: 4.8rem 0 0; padding: 3rem 3.4rem; border-left: .4rem solid var(--brand-indigo); border-radius: 0 2rem 2rem 0; background: var(--lav); font-size: 2.1rem; font-weight: 500; line-height: 3.4rem; color: var(--ink-strong); }
.nota__cta { margin-top: 7rem; }
.nota__cta-caja { padding: 4.8rem; border-radius: 3rem; background: var(--navy); color: #fff; text-align: center; }
.nota__cta-caja h2 { font-size: 3rem; font-weight: 600; line-height: 4rem; }
.nota__cta-caja p { margin-top: 1.6rem; font-size: 1.85rem; line-height: 3rem; color: rgba(255, 255, 255, .82); }
.nota__cta-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin-top: 3.2rem; }

@media (max-width: 1099px) {
  .nota { padding-top: 13rem; }
  .nota__title { font-size: 4rem; line-height: 5rem; }
}

@media (max-width: 699px) {
  .nota { padding-top: 11rem; }
  .nota__title { font-size: 3.2rem; line-height: 4.2rem; }
  .nota__bajada { font-size: 2rem; line-height: 3.2rem; }
  .nota__portada img { border-radius: 2rem; }
  .nota__cuerpo h2 { font-size: 2.6rem; line-height: 3.4rem; }
  .nota__cuerpo p, .nota__cuerpo li, .nota__lead { font-size: 1.9rem; line-height: 3.2rem; }
  .nota__cita { padding: 2.4rem 2.6rem; font-size: 1.95rem; line-height: 3.2rem; }
  .nota__cta-caja { padding: 3.2rem 2.4rem; }
  .nota__cta-caja h2 { font-size: 2.6rem; line-height: 3.4rem; }
  .nota__cta-acciones { flex-direction: column; align-items: stretch; }
  .nota__cta-acciones .btn { width: 100%; }
}


/* ==========================================================================
   Precios — selector por perfil, cuarta card y columna activa en celular
   ========================================================================== */

/* Chatealo le habla a tres públicos con presupuestos muy distintos: el
   selector los separa antes de que lleguen a la tabla por usuario. */
.perfiles { width: 100%; margin-top: 6.4rem; text-align: left; }
.perfiles__t { font-size: 1.5rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.perfiles__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: 1.8rem; }
.perfil {
  display: grid;
  align-content: start;
  gap: .6rem;
  padding: 2.4rem 2.6rem;
  border-radius: 2rem;
  background: var(--lav);
  text-align: left;
  cursor: pointer;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.perfil:hover { transform: translateY(-.3rem); box-shadow: var(--card-shadow); }
.perfil[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 .2rem var(--brand-indigo), var(--card-shadow); }
.perfil__t { font-size: 1.9rem; font-weight: 600; line-height: 2.6rem; color: var(--ink-black); }
.perfil__d { font-size: 1.55rem; line-height: 2.3rem; color: var(--ink-600); }
.perfil__p { margin-top: .6rem; font-size: 1.6rem; font-weight: 600; color: var(--brand-indigo); }

/* Línea chica del usuario adicional */
.plan__extra { margin-top: .6rem; font-size: 1.4rem; line-height: 2.1rem; color: var(--ink-400); }
.plan--featured .plan__extra { color: rgba(255, 255, 255, .6); }

/* Cuarta card: el perfil de empresa, con su propio acento */
.plan--empresa { box-shadow: inset 0 0 0 .2rem #ddd9fb; background: linear-gradient(180deg, #faf8ff, #fff 45%); }
.plan--empresa .pill { background: rgba(168, 85, 247, .12); color: var(--purple); }

/* La card que corresponde al perfil elegido */
.plan.is-elegido { box-shadow: inset 0 0 0 .25rem var(--brand-indigo), 0 2.4rem 6rem rgba(40, 36, 110, .14); }

/* Enlace dentro de la tabla */
.compare__link { font-size: 1.5rem; font-weight: 600; color: var(--brand-indigo); text-decoration: underline; text-underline-offset: .3rem; }
.compare__link:hover { color: var(--purple); }

@media (max-width: 1099px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfiles__lista { grid-template-columns: 1fr; }
  .plan__desc { min-height: 0; }
}

@media (max-width: 699px) {
  .plans { grid-template-columns: 1fr; margin-top: 4rem; }
  .perfiles { margin-top: 4.8rem; }
  .perfil { padding: 2rem 2.2rem; }
  .perfil__d { font-size: 1.7rem; line-height: 2.6rem; }
  .perfil__p { font-size: 1.8rem; }

  .section-head__lead { margin-top: 1.6rem; }
}


/* ==========================================================================
   Llamada de voz por WhatsApp (multiagente.html)
   ========================================================================== */
.llamada__quien { display: flex; align-items: center; gap: 1.4rem; margin-top: 2.4rem; }
.llamada__quien span { flex: 1; font-size: 1.8rem; font-weight: 600; line-height: 2.4rem; color: var(--ink-black); }
.llamada__quien small { display: block; font-size: 1.45rem; font-weight: 400; color: var(--ink-400); }
.llamada__t { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--brand-indigo); }
.llamada__onda { display: flex; align-items: center; gap: .4rem; height: 4.4rem; margin-top: 2rem; }
.llamada__onda i { flex: 1; height: var(--h); min-height: .4rem; border-radius: 99px; background: linear-gradient(180deg, var(--brand-indigo), #a855f7); opacity: .55; }
.llamada__onda i:nth-child(3n) { opacity: .85; }


/* ==========================================================================
   Chatbots de IA — video, ficha de agente y bloque de empresas
   ========================================================================== */

/* Video con carga diferida: la miniatura es una imagen y el reproductor de
   YouTube se inserta recién al tocar play, para no pesar en la primera carga. */
.video { padding: 2.4rem; }
.video__play { position: relative; display: block; width: 100%; padding: 0; border-radius: 2rem; overflow: hidden; cursor: pointer; background: #0b1020; }
.video__mini { display: block; width: 100%; height: auto; transition: transform .5s var(--ease-out), filter .3s ease; }
.video__play:hover .video__mini { transform: scale(1.03); filter: brightness(.9); }
.video__btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.video__btn svg { width: 9rem; height: 9rem; fill: #fff; filter: drop-shadow(0 1rem 2.4rem rgba(0, 0, 0, .45)); transition: transform .3s var(--ease-out); }
.video__play:hover .video__btn svg { transform: scale(1.08); }
.video__pie {
  position: absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  padding: .7rem 1.4rem;
  border-radius: 99px;
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(.6rem);
  backdrop-filter: blur(.6rem);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
}
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 2rem; }

/* Ficha del agente */
.agente-ficha { width: 100%; max-width: 40rem; padding: 3rem 2.8rem 3.2rem; border-radius: 2.8rem; background: #fff; box-shadow: var(--card-shadow); text-align: center; }
.agente-ficha__estado { display: flex; align-items: center; gap: .9rem; font-size: 1.5rem; font-weight: 500; color: var(--ink-600); }
.agente-ficha__sw { position: relative; width: 4rem; height: 2.3rem; border-radius: 99px; background: var(--green); }
.agente-ficha__sw::after { content: ; position: absolute; top: .3rem; right: .3rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #fff; }
.agente-ficha__av { display: grid; place-items: center; width: 9.6rem; height: 9.6rem; margin: 1.6rem auto 0; border-radius: 50%; background: linear-gradient(145deg, #6366f1, #a855f7 55%, #25e089); box-shadow: 0 1.2rem 3rem rgba(99, 102, 241, .32); }
.agente-ficha__av svg { width: 4.6rem; height: 4.6rem; }
.agente-ficha__nombre { margin-top: 1.6rem; font-size: 2.6rem; font-weight: 600; line-height: 3.2rem; color: var(--ink-black); }
.agente-ficha__rol { margin-top: .5rem; font-size: 1.5rem; line-height: 2.2rem; color: var(--ink-500); }
.agente-ficha__t { margin-top: 2.4rem; font-size: 1.3rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
.agente-ficha__fuentes { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1rem; }
.agente-ficha__fuentes li { padding: .6rem 1.4rem; border-radius: 99px; background: var(--lav); font-size: 1.4rem; font-weight: 500; color: var(--brand-indigo); }
.agente-ficha__canales { display: flex; justify-content: center; gap: 1.2rem; margin-top: 1rem; }
.agente-ficha__canales img { width: 3.4rem; height: 3.4rem; }
.agente-ficha__btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; height: 5.6rem; margin-top: 2.4rem; padding: 0 3rem; border-radius: 99px; background: var(--green); color: #fff; font-size: 1.75rem; font-weight: 600; transition: filter .2s ease; }
.agente-ficha__btn .ico-wa { flex: none; width: 2.4rem; height: 2.4rem; margin: 0; fill: currentColor; stroke: none; }
.agente-ficha__btn:hover { filter: brightness(1.06); }

/* Bloque para empresas e instituciones */
.empresas-ia { background: var(--bg-soft); }
.empresas-ia__inner { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; gap: 7rem; }

.empresas-ia__title { margin-top: 1.4rem; font-size: 4.2rem; font-weight: 600; line-height: 5.2rem; color: var(--ink-strong); }
.empresas-ia__lead { margin-top: 2rem; font-size: 1.95rem; line-height: 3.2rem; color: var(--ink-600); }
.empresas-ia__lead b { color: var(--ink-black); }
.empresas-ia__acciones { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 3.4rem; }
.empresas-ia__acciones .btn { gap: 1rem; }
.empresas-ia__acciones .ico-wa { flex: none; width: 2.2rem; height: 2.2rem; margin: 0; }
.empresas-ia__pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
.empresas-ia__pasos li { padding: 2.4rem; border-radius: 2rem; background: #fff; box-shadow: inset 0 0 0 .1rem var(--line); }
.empresas-ia__pasos b { display: block; font-size: 1.75rem; font-weight: 600; line-height: 2.4rem; color: var(--brand-indigo); }
.empresas-ia__pasos span { display: block; margin-top: .8rem; font-size: 1.6rem; line-height: 2.5rem; color: var(--ink-600); }

@media (max-width: 1099px) {
  .empresas-ia__inner { grid-template-columns: 1fr; gap: 4.6rem; }
  .empresas-ia__title { font-size: 3.6rem; line-height: 4.6rem; }
  .video__btn svg { width: 7rem; height: 7rem; }
}

@media (max-width: 699px) {
  .video { padding: 1.6rem; }
  .video__btn svg { width: 6rem; height: 6rem; }
  .video__pie { left: 1.2rem; bottom: 1.2rem; font-size: 1.5rem; }
  .agente-ficha { max-width: 100%; padding: 2.6rem 2.2rem 2.8rem; }
  .empresas-ia__title { font-size: 3.2rem; line-height: 4.2rem; }
  .empresas-ia__lead { font-size: 2rem; line-height: 3.2rem; }
  .empresas-ia__acciones { flex-direction: column; align-items: stretch; }
  .empresas-ia__acciones .btn { width: 100%; }
  .empresas-ia__pasos { grid-template-columns: 1fr; }
}

/* ── Prueba social por industria (R2) ─────────────────────────────────────
   Marcelo: las páginas de industria quedaban todas iguales y no le hablaban
   a nadie en particular. Tres bloques: quién ya lo usa, un caso con números
   y los rubros, para que el visitante se reconozca. */

/* Contenido de ejemplo todavía sin reemplazar (mismo tratamiento que .caso__aviso) */
.aviso { max-width: 96rem; margin: 0 auto 2.8rem; padding: 1rem 1.8rem; border-radius: 1.2rem; background: #fff6e6; box-shadow: inset 0 0 0 .1rem #f3dcae; font-size: 1.4rem; font-weight: 600; line-height: 2.2rem; text-align: center; color: #9a6a12; }

/* A · franja de clientes */
.clientes__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.4rem 5.6rem; }
/* Va dentro de la franja de beneficios, arriba de las tarjetas (reemplaza a .lo-usan).
   El aire lo pone este envoltorio, igual que lo ponía el padding de .lo-usan. */
.clientes__arriba { padding: 10rem 0; }
/* Un solo cliente: etiqueta, logo y el texto que ubica a la empresa */
.clientes__etiqueta { font-size: 1.4rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); }
.clientes__sep { width: .1rem; height: 3.2rem; background: var(--line); }
.clientes__nota { max-width: 72rem; font-size: 1.6rem; line-height: 2.4rem; text-wrap: balance; color: var(--ink-400); }
.clientes__nota b { font-weight: 700; color: var(--ink-strong); }
/* Marcas que van a color y no en gris */
.clientes--color .cliente { filter: none; opacity: 1; }
.clientes__dato { font-size: 1.5rem; line-height: 2.2rem; color: var(--ink-400); }
.clientes__dato b { display: block; font-size: 2.6rem; font-weight: 700; line-height: 3.4rem; color: var(--ink-strong); }
.clientes__lista { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 4rem; }
.cliente { display: flex; align-items: center; gap: 1rem; font-size: 1.8rem; font-weight: 700; color: #55525a; filter: grayscale(1); opacity: .72; transition: filter .25s, opacity .25s; }
.cliente:hover { filter: none; opacity: 1; }
/* Mientras no estén los logos reales va la sigla; después es cambiar el span por un <img> */
.cliente__sigla { display: grid; flex: none; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1rem; background: var(--c); font-size: 1.6rem; color: #fff; }
.cliente img { flex: none; width: auto; height: 3.6rem; }

/* Varios clientes a la vez: cada logo en su tarjeta, con el tipo y un dato */
.clientes__inner--grilla { flex-wrap: nowrap; gap: 3.2rem; }
.clientes__inner--grilla .clientes__etiqueta { flex: none; }
.clientes__grilla { display: grid; flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; }
.clientes__grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clientes__grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cliente-card { display: grid; grid-template-rows: 4.4rem auto auto; align-content: start; justify-items: center; gap: .2rem; padding: 2.4rem 1.6rem 2rem; border-radius: 1.8rem; background: #fff; box-shadow: inset 0 0 0 .1rem var(--line); text-align: center; }
/* Nunca agrandar un logo: el que viene más chico que la caja se dibuja a su
   tamaño real antes que verse borroso. La fila fija alinea igual los textos. */
.cliente-card img { align-self: center; width: auto; height: auto; max-width: 100%; max-height: 4.4rem; }
.cliente-card b { margin-top: 1.6rem; font-size: 1.55rem; font-weight: 600; line-height: 2.2rem; color: var(--ink-strong); }
.cliente-card span { font-size: 1.45rem; line-height: 2.1rem; text-wrap: balance; color: var(--ink-400); }

/* B · caso real con números */
.caso-ind { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; margin-top: 4.8rem; border-radius: 3.2rem; background: #fff; box-shadow: var(--card-shadow); }
.caso-ind__ficha { padding: 4.8rem; }
.caso-ind__marca { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; gap: .2rem 1.6rem; }
.caso-ind__sigla { display: grid; grid-row: span 2; place-items: center; width: 5.6rem; height: 5.6rem; border-radius: 1.4rem; background: linear-gradient(135deg, #ff7a59, #ff4f7b); font-size: 1.8rem; font-weight: 700; color: #fff; }
.caso-ind__marca b { align-self: end; font-size: 2rem; font-weight: 600; line-height: 2.6rem; color: var(--ink-strong); }
.caso-ind__marca small { align-self: start; font-size: 1.5rem; line-height: 2.2rem; color: var(--ink-400); }
/* Cuando la marca entra con su logo, las dos líneas de al lado son descripción */
.caso-ind__marca--logo { grid-template-columns: auto minmax(0, 1fr); gap: .2rem 2rem; }
.caso-ind__logo { grid-row: span 2; width: auto; height: 4.4rem; }
.caso-ind__marca--logo b { font-size: 1.6rem; font-weight: 600; line-height: 2.2rem; color: var(--ink-600); }
.caso-ind__marca--logo small { font-size: 1.45rem; line-height: 2.1rem; }
.caso-ind__title { margin-top: 2.4rem; font-size: 2.8rem; font-weight: 600; line-height: 3.6rem; text-wrap: balance; color: var(--ink-strong); }
.caso-ind__bloque { margin-top: 2.4rem; }
.caso-ind__bloque p { margin-top: 1rem; font-size: 1.65rem; line-height: 2.7rem; color: var(--ink-600); }
.caso-ind__tags { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.8rem; }
.caso-ind__datos { display: flex; flex-direction: column; justify-content: space-between; gap: 3.2rem; padding: 4.8rem 4rem; background: var(--navy); background-image: radial-gradient(circle at 85% 10%, rgba(168, 85, 247, .35), transparent 55%); color: #fff; }
/* Los tres números se reparten el alto en franjas iguales, cada uno centrado en la suya */
.metricas { display: grid; grid-auto-rows: 1fr; flex: 1; }
/* El valor y su etiqueta van a los costados: así un número puede no traer "antes" */
.metrica { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.8rem 0; border-bottom: .1rem solid rgba(255, 255, 255, .12); }
.metrica:first-child { padding-top: 0; }
.metrica:last-child { padding-bottom: 0; border-bottom: 0; }
.metrica__antes { display: block; font-size: 1.5rem; line-height: 2.2rem; color: #9aa6bd; }
.metrica__ahora { display: block; font-size: 4.4rem; font-weight: 700; line-height: 5rem; color: var(--green); }
.metrica__que { max-width: 26rem; font-size: 1.35rem; line-height: 2rem; text-align: right; text-wrap: balance; color: #c9d2e3; }
/* Datos duros de la empresa, cuando el caso no trae cita */
.caso-ind__pie { display: flex; flex-wrap: wrap; gap: 1.6rem 4.8rem; padding-top: 2.8rem; border-top: .1rem solid rgba(255, 255, 255, .12); }
.caso-ind__pie b { display: block; font-size: 2.2rem; font-weight: 700; line-height: 2.8rem; color: #fff; }
.caso-ind__pie span { font-size: 1.3rem; line-height: 1.9rem; color: #c9d2e3; }
.caso-ind__cita p { font-size: 1.7rem; line-height: 2.8rem; text-wrap: balance; color: #eef1f8; }
.caso-ind__cita p::before { content: '“'; }
.caso-ind__cita p::after { content: '”'; }
.caso-ind__cita cite { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; font-size: 1.4rem; font-style: normal; color: #c9d2e3; }
.caso-ind__quien { display: grid; flex: none; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #7c83ff; font-size: 1.3rem; font-weight: 600; color: #fff; }

/* C · vitrina de rubros */
.vitrina { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-top: 4.8rem; }
.vitrina__item { position: relative; display: flex; align-items: flex-end; overflow: hidden; height: 26rem; border-radius: 2.4rem; color: #fff; box-shadow: var(--card-shadow); }
/* Placeholder hasta que lleguen las fotos: el degradado ocupa el lugar de la imagen */
.vitrina__foto { position: absolute; inset: 0; display: grid; place-items: center; background: var(--g); font-size: 6.4rem; }
.vitrina__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vitrina__tx { position: relative; width: 100%; padding: 2rem; background: linear-gradient(0deg, rgba(0, 26, 63, .88), rgba(0, 26, 63, 0)); }
.vitrina__tx b { font-size: 1.8rem; font-weight: 600; line-height: 2.4rem; }
.vitrina__tx span { display: block; margin-top: .3rem; font-size: 1.4rem; line-height: 2rem; opacity: .86; }
.vitrina__nota { margin-top: 2.4rem; font-size: 1.4rem; line-height: 2.2rem; text-align: center; color: var(--ink-400); }

@media (max-width: 1099px) {
  /* A cinco columnas los datos no entran: pasa a dos, con el quinto ancho */
  .clientes__inner--grilla { flex-direction: column; gap: 2.4rem; text-align: center; }
  .clientes__grilla, .clientes__grilla--3, .clientes__grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .clientes__grilla li:last-child:nth-child(odd) { grid-column: span 2; }
  .caso-ind { grid-template-columns: minmax(0, 1fr); }
  .caso-ind__ficha { padding: 4rem; }
  .caso-ind__datos { padding: 4rem; }
  .vitrina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
  .clientes__arriba { padding: 8rem 0; text-align: center; }
  .clientes__inner { gap: 2.4rem 3.2rem; }
  .clientes__dato { width: 100%; }
  .clientes__lista { gap: 2rem 3.2rem; }
  .clientes__sep { display: none; }
  .clientes__nota { width: 100%; }
  /* La etiqueta pasa arriba y los logos a dos columnas; el quinto ocupa el ancho */
  .clientes__inner--grilla { flex-direction: column; gap: 2.4rem; }
  .clientes__grilla, .clientes__grilla--3, .clientes__grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .clientes__grilla li:last-child:nth-child(odd) { grid-column: span 2; }
  .caso-ind__pie { gap: 1.6rem 3.2rem; }
  .caso-ind { margin-top: 4rem; border-radius: 2.4rem; }
  .caso-ind__ficha, .caso-ind__datos { padding: 3.2rem 2.4rem; }
  .caso-ind__title { font-size: 2.4rem; line-height: 3.2rem; }
  .metrica__ahora { font-size: 3.6rem; line-height: 4.4rem; }
  .metrica__que { max-width: 15rem; }
  /* El rótulo crece a dos renglones y se come el centro de la tarjeta */
  .vitrina__foto { place-items: start center; padding-top: 2.6rem; font-size: 5.2rem; }
  .vitrina__item { height: 21rem; }
}

/* ==========================================================================
   Precios · tarjetas más anchas que el contenedor: con cuatro planes el texto
   no entraba y se cortaba en renglones de una o dos palabras
   ========================================================================== */
@media (min-width: 1100px) {
  .perfiles, .plans, .perks {
    --ancho-planes: min(calc(100vw - 6.4rem), 172rem);
    width: var(--ancho-planes);
    max-width: none;
    margin-inline: calc((100% - var(--ancho-planes)) / 2);
  }
  .plan { padding-inline: 3rem; }
  .plan__top .pill { padding-inline: 1rem; }
}
@media (min-width: 1100px) and (max-width: 1179px) {
  .plan { padding-inline: 2.4rem; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .plans { max-width: none; }
  .plan { padding-inline: 3rem; }
}
.plan__includes { white-space: nowrap; }

/* ==========================================================================
   Precios · tabla en pantallas chicas: se ve la característica y un plan por vez
   ========================================================================== */
@media (max-width: 767px) {
  .compare { margin-top: 3.2rem; border-radius: 2.4rem; }
  .compare table { min-width: 0; table-layout: fixed; }
  .compare__tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .4rem;
    padding: 1rem .8rem;
    background: #fff;
    box-shadow: 0 .1rem 0 var(--line);
  }
  .compare__tabs button { height: 4.8rem; border-radius: 99px; font-size: 1.5rem; font-weight: 600; color: var(--ink-600); transition: background-color .2s ease, color .2s ease; }
  .compare__tabs button[aria-pressed="true"] { background: var(--brand-indigo); color: #fff; }
  .compare[data-show="1"] tr > :is(:nth-child(3), :nth-child(4), :nth-child(5)),
  .compare[data-show="2"] tr > :is(:nth-child(2), :nth-child(4), :nth-child(5)),
  .compare[data-show="3"] tr > :is(:nth-child(2), :nth-child(3), :nth-child(5)),
  .compare[data-show="4"] tr > :is(:nth-child(2), :nth-child(3), :nth-child(4)) { display: none; }
  .compare tbody th, .compare thead th:first-child { position: static; width: 58%; box-shadow: none; }
  .compare .compare__group th { width: auto; }
  .compare td, .compare thead th { width: 42%; }
  .compare thead th:first-child { width: 58%; }
  .compare th, .compare td { padding: 1.8rem 1.6rem; font-size: 1.6rem; line-height: 2.4rem; overflow-wrap: anywhere; }
  .compare__note { font-size: 1.5rem; line-height: 2.2rem; }
  .compare thead th { padding: 2.4rem 1.6rem; }
  .compare__plan { font-size: 2rem; line-height: 2.8rem; }
  .compare tfoot { display: none; }
  .compare__pie { display: grid; gap: 2rem; padding: 2.8rem 2.4rem; border-top: .1rem solid var(--line); }
  .compare__pie .btn { width: 100%; }
  .compare__toggle { padding: 2.4rem; }
  .compare__toggle .btn { width: 100%; }
  .section-head__lead { margin-top: 1.6rem; }

  /* La columna que se está viendo se pinta como la pestaña activa */
  .compare[data-show="1"] tr > :nth-child(2),
  .compare[data-show="2"] tr > :nth-child(3),
  .compare[data-show="3"] tr > :nth-child(4),
  .compare[data-show="4"] tr > :nth-child(5) { background-color: rgba(99, 102, 241, .05); }
  .compare[data-show="1"] thead tr > :nth-child(2),
  .compare[data-show="2"] thead tr > :nth-child(3),
  .compare[data-show="3"] thead tr > :nth-child(4),
  .compare[data-show="4"] thead tr > :nth-child(5) { background-color: rgba(99, 102, 241, .1); }
  .compare[data-show] thead .compare__plan { color: var(--brand-indigo); }
  .compare[data-show] thead .compare__price { color: var(--brand-indigo); opacity: .8; }
}