/* Karum V6 · Web completa
   Paleta final del 2 de noviembre de 2026: Rosa Karum, cielo solo como superficie del hero y la banda final,
   negro para texto y botones, blanco y niebla de fondo, rosa claro y susurro azul para tarjetas. Lexend. */

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/lexend-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../assets/fonts/lexend-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --rosa: #BD347B;
  --rosa-claro: #F7E7EF;
  --rosa-osc: #972A62;
  --cielo: #3D7DD8;
  --cielo-a: #2D66BE;
  --cielo-b: #7AAAE8;
  --susurro: #E8EDF4;
  --cielo-osc: #3164AD;
  --negro: #000000;
  --tinta: #222222;
  --gris: #6B6B6B;
  --blanco: #FFFFFF;
  --niebla: #F6F7F9;

  --tenue: rgba(0, 0, 0, .36);
  --linea: rgba(0, 0, 0, .08);
  --linea-2: rgba(0, 0, 0, .14);
  --b-90: rgba(255, 255, 255, .9);
  --b-75: rgba(255, 255, 255, .75);
  --b-55: rgba(255, 255, 255, .55);
  --b-20: rgba(255, 255, 255, .2);
  --b-12: rgba(255, 255, 255, .12);
  --b-09: rgba(255, 255, 255, .09);
  --logo-gris: #8C9199;
  --wa-verde: #25D366;
  --wa-azul: #34B7F1;
  --rosa-glow: rgba(189, 52, 123, .55);
  --claude: #D97757;
  --rosa-halo: rgba(189, 52, 123, .2);

  --rejilla: rgba(61, 125, 216, .11);

  --cielo-grad: linear-gradient(165deg, var(--cielo-a) 0%, var(--cielo) 46%, var(--cielo-b) 100%);
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px -14px rgba(0, 0, 0, .16);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .05), 0 30px 70px -30px rgba(0, 0, 0, .32);
  --sombra-cielo: 0 14px 34px rgba(13, 26, 64, .26);

  --font: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nav-h: 68px;
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --r-1: 12px;
  --r-2: 20px;
  --r-3: 28px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font);
  text-wrap: pretty;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--blanco);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--rosa-claro); color: var(--negro); }
:focus-visible { outline: 2px solid var(--cielo-osc); outline-offset: 3px; border-radius: 8px; }
.on-cielo :focus-visible, .hero :focus-visible, .cta :focus-visible { outline-color: var(--blanco); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--negro); color: var(--blanco); padding: 10px 16px; border-radius: 999px; }
.skip:focus { top: 12px; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- type ---------- */
.h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1.02; font-weight: 400; letter-spacing: -.035em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.06; font-weight: 400; letter-spacing: -.03em; color: var(--negro); text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.h2 .t, .h1 .t { color: var(--tenue); }
.h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; font-weight: 500; letter-spacing: -.018em; color: var(--negro); }
.lead { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--gris); max-width: 48ch; }
.small { font-size: 14px; color: var(--gris); }
.label { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--gris); }
.label .ico { width: 18px; height: 18px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .2s, color .2s, box-shadow .25s var(--ease);
}
.btn .ico { width: 18px; height: 18px; }
.btn:active { transform: scale(.97); }
.btn--dark { background: var(--negro); color: var(--blanco); }
.btn--dark:hover { background: var(--tinta); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
.btn--light { background: var(--blanco); color: var(--negro); box-shadow: inset 0 0 0 1px var(--linea-2); }
.btn--light:hover { box-shadow: inset 0 0 0 1px var(--negro); }
.btn--white { background: var(--blanco); color: var(--negro); }
.btn--white:hover { box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); }
.btn--ghost { color: var(--blanco); box-shadow: inset 0 0 0 1px var(--b-55); }
.btn--ghost:hover { background: var(--b-12); box-shadow: inset 0 0 0 1px var(--blanco); }
.btn--rosa { background: var(--rosa); color: var(--blanco); }
.btn--rosa:hover { background: var(--rosa-osc); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--negro); font-size: 15.5px; }
.link .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link:hover .ico, a:hover > .link .ico, a:focus-visible .link .ico { transform: translateX(4px); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60; height: var(--nav-h);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  transition: box-shadow .3s;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--linea); }
.nav__in { height: 100%; display: flex; align-items: center; gap: 28px; }
.nav__logo { display: flex; align-items: center; padding: 6px 0; }
.logo { width: 102px; height: auto; aspect-ratio: 670 / 123; color: var(--negro); --mark: var(--rosa); }
.nav__links { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 13px; border-radius: 999px;
  font-size: 15px; color: var(--tinta); transition: background-color .2s, color .2s;
}
.nav__link:hover, .dd[data-open] > .nav__link { background: var(--niebla); color: var(--negro); }
.nav__link[aria-current="page"] { color: var(--negro); font-weight: 500; }
.nav__link .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .3s var(--ease); }
.dd[data-open] > .nav__link .ico { transform: rotate(-90deg); }
.nav__cta { display: flex; align-items: center; gap: 6px; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 999px; place-items: center; }
.nav__burger span { position: relative; display: block; width: 20px; height: 1.6px; background: var(--negro); transition: background-color .2s; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.6px; background: var(--negro); transition: transform .3s var(--ease); }
.nav__burger span::before { transform: translateY(-6px); }
.nav__burger span::after { transform: translateY(6px); }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.dd { position: relative; }
.dd__panel {
  position: absolute; top: calc(100% + 10px); left: -10px; z-index: 5;
  width: 640px; padding: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px;
  background: var(--blanco); border-radius: var(--r-2); box-shadow: var(--sombra-2), 0 0 0 1px var(--linea);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s;
}
.dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd[data-open] .dd__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--ease); }
.dd__item { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px; transition: background-color .2s; }
.dd__item:hover, .dd__item:focus-visible { background: var(--niebla); }
.dd__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--niebla); color: var(--negro); }
.dd__ic .ico { width: 19px; height: 19px; }
.dd__ic--rosa { background: var(--rosa-claro); color: var(--rosa); }
.dd__ic--azul { background: var(--susurro); color: var(--cielo-osc); }
.dd__ic--lg { width: 46px; height: 46px; border-radius: 13px; }
/* product icons in the Karum line style: guides, one line, a rosa detail */
.picon { width: 32px; height: 32px; flex: none; overflow: visible; }
.picon__g { fill: none; stroke: currentColor; stroke-width: 1; opacity: .4; }
.picon__m > * { fill: none; stroke: var(--negro); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.picon__a { fill: var(--rosa); }
.picon__a > * { transform-box: fill-box; transform-origin: center; }
/* they draw themselves when their tile comes into view (.rv.in, [data-play].on) and, in a menu, on every open:
   the guides fade in, the line draws, the rosa detail pops */
.js :is(.rv, [data-play], .dd, .mm) .picon__g { opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--n, 0) * .07s + var(--d, 0s)); }
.js :is(.rv.in, [data-play].on, .dd[data-open], .mm[open]) .picon__g { opacity: .4; }
.js :is(.rv, [data-play], .dd, .mm) .picon__m > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-io); transition-delay: calc(var(--n, 0) * .07s + var(--d, 0s) + .12s); }
.js :is(.rv.in, [data-play].on, .dd[data-open], .mm[open]) .picon__m > * { stroke-dashoffset: 0; }
.js :is(.rv, [data-play], .dd, .mm) .picon__a > * { opacity: 0; scale: .2; transition: opacity .3s var(--ease), scale .5s var(--ease); transition-delay: calc(var(--n, 0) * .07s + var(--d, 0s) + .8s); }
.js :is(.rv.in, [data-play].on, .dd[data-open], .mm[open]) .picon__a > * { opacity: 1; scale: 1; }
.js .dd[data-open] .picon--chat .picon__a > * { animation: typing 1.2s ease-in-out 1.4s infinite; }
.js .dd[data-open] .picon--chat .picon__a > :nth-child(2) { animation-delay: 1.55s; }
.js .dd[data-open] .picon--chat .picon__a > :nth-child(3) { animation-delay: 1.7s; }
@keyframes typing { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -2px; } }
/* the size of the icon in each kind of tile */
.feat__ic .picon, .note-band__ic .picon { width: 32px; height: 32px; }
.trig__ic .picon, .stop__ic .picon, .chan__ic .picon { width: 28px; height: 28px; }
.promise .picon { width: 30px; height: 30px; margin-top: -4px; }
.dd__li-ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--niebla); }
.dd__li-ic .picon { width: 22px; height: 22px; }
.dd__li { justify-content: flex-start; }
.dd__li > .ico { margin-left: auto; }
/* the comparisons' own marks: ChatGPT in black, Claude in its orange */
.cmpi { display: grid; place-items: center; }
.cmpi .ico { width: 20px; height: 20px; }
.cmpi--chatgpt { color: var(--negro); }
.cmpi--claude { color: var(--claude); }
.dd__li-ic .cmpi .ico { width: 16px; height: 16px; }
.vsc__them { display: inline-flex; align-items: center; gap: 6px; }
.vsc__them .picon, .vsc__them .cmpi .ico { width: 16px; height: 16px; }
.pd__av--openai .ico { color: var(--negro); }
.pd__av--claude .ico { color: var(--claude); }
.dd__img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.dd__t { display: block; font-size: 15px; font-weight: 500; color: var(--negro); line-height: 1.3; }
.dd__d { display: block; margin-top: 2px; font-size: 13.5px; color: var(--gris); line-height: 1.4; }
.dd__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; padding: 14px 14px 6px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--gris); }
/* Recursos: the blog, big, with its newest guide; the comparisons and the jobs as a plain list */
.dd__panel--res { width: 660px; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 8px; }
.dd__feat { display: grid; grid-template-rows: 150px auto; overflow: hidden; border-radius: 14px; background: var(--niebla); transition: background-color .2s; }
.dd__feat:hover, .dd__feat:focus-visible { background: var(--rosa-claro); }
.dd__feat img { width: 100%; height: 100%; object-fit: cover; }
.dd__feat-b { display: grid; gap: 4px; padding: 14px 16px 16px; }
.dd__feat-t { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--negro); }
.dd__feat-new { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--rosa-osc); }
.dd__list { display: grid; align-content: start; gap: 2px; padding: 6px 4px; }
.dd__h { padding: 4px 10px 6px; font-size: 13px; color: var(--gris); }
.dd__li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 15px; color: var(--negro); transition: background-color .2s; }
.dd__li > .ico { width: 15px; height: 15px; color: var(--tenue); transition: transform .3s var(--ease), color .2s; }
.dd__li:hover, .dd__li:focus-visible { background: var(--niebla); }
.dd__li:hover > .ico { transform: translateX(3px); color: var(--negro); }
.dd__item--job { margin-top: 8px; border-top: 1px solid var(--linea); border-radius: 0 0 14px 14px; padding-top: 14px; }

.mmenu {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 59; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--blanco); padding: 8px var(--gut) 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s;
}
.mmenu[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); }
.mmenu > * { flex-shrink: 0; } /* a long open section scrolls the menu instead of squeezing its rows */
.mmenu > a:not(.btn), .mm__s { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; font-size: 19px; color: var(--negro); border-bottom: 1px solid var(--linea); }
.mmenu a > .ico, .mm__s > .ico { width: 16px; height: 16px; color: var(--gris); }
.mmenu .btn { width: 100%; margin-top: 28px; }
/* Producto, Sectores and Recursos fold away: a tap opens one and closes the others */
.mm__s { cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.mm__s::-webkit-details-marker { display: none; }
.mm__s .ico { transform: rotate(90deg); transition: transform .3s var(--ease); }
.mm[open] > .mm__s { border-bottom-color: transparent; }
.mm[open] > .mm__s .ico { transform: rotate(-90deg); color: var(--negro); }
.mm__list { padding: 0 0 12px; border-bottom: 1px solid var(--linea); }
.mm[open] .mm__list { animation: mm-in .35s var(--ease); }
.mm__list a { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 16.5px; color: var(--negro); }
.mm__list a > .ico { width: 14px; height: 14px; margin-left: auto; }
.mm__list .dd__ic { width: 36px; height: 36px; border-radius: 10px; }
.mm__list .picon { width: 24px; height: 24px; }
.mm__list .cmpi .ico { width: 18px; height: 18px; }
/* the wordmark closes the menu the way it closes the footer: big, quiet, cut by the bottom edge, rising as it opens */
.mmenu__word { margin-top: auto; padding-top: 48px; overflow: hidden; color: var(--linea); } /* clipped here, so the menu never scrolls for it */
.mmenu__word svg { display: block; width: 100%; height: auto; margin-bottom: -5.6%; transform: translateY(30%); transition: transform 1.2s var(--ease) .1s; }
.mmenu[data-open] .mmenu__word svg { transform: none; }
@keyframes mm-in { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 980px) {
  .nav__links, .nav__cta > .nav__link, .nav__cta > .btn { display: none; }
  .nav__burger { display: grid; }
  .nav__in { justify-content: space-between; }
}
/* a phone screen is short once the browser's own bars take their share: a slimmer bar leaves more of it to the page */
@media (max-width: 600px) { :root { --nav-h: 60px; } }

/* ---------- hero (sticky card that shrinks while the page slides over it) ---------- */
.stack { position: relative; }
.hero { position: sticky; top: var(--nav-h); z-index: 1; height: calc(100svh - var(--nav-h)); min-height: 600px; max-height: 1000px; padding: 0 10px 10px; }
.hero--short { height: calc(84svh - var(--nav-h)); min-height: 560px; }
.hero--flow { position: relative; top: 0; height: auto; }
.hero__card {
  position: relative; height: 100%; border-radius: var(--r-3); overflow: hidden; isolation: isolate;
  color: var(--blanco); background: var(--cielo-grad);
  transform-origin: 50% 0%;
}
.hero__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 78% 40%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
}
.hero__dim { position: absolute; inset: 0; z-index: 4; background: var(--negro); opacity: 0; pointer-events: none; }
.hero__in {
  position: relative; z-index: 2; height: 100%;
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: clamp(24px, 4vw, 56px) var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); align-items: center; gap: clamp(24px, 4vw, 56px);
}
.hero__copy { max-width: 660px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 15px; color: var(--b-90); }
.hero__kicker .chip-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--b-20); }
.hero__kicker .chip-ic .ico { width: 18px; height: 18px; }
.hero h1 { color: var(--blanco); }
.hero__lead { margin-top: 24px; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: var(--b-90); max-width: 40ch; }
.hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__actions .btn--rosa, .cta__actions .btn--rosa { box-shadow: var(--sombra-cielo); }
.hero__fine { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--b-75); }
.hero__fine span { display: inline-flex; align-items: center; gap: 7px; }
.hero__fine .ico { width: 16px; height: 16px; }
.hero__visual { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; }
.hero__plan { position: absolute; z-index: 0; top: 50%; left: 50%; width: min(118%, 640px); aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--blanco); pointer-events: none; }
.hero__plan svg { width: 100%; height: 100%; overflow: visible; }
.hero__fg { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; }
.hero__plan, .hero__fg { transition: translate .9s var(--ease); }

/* clients along the bottom of the home hero: a label, then the brands gliding past on a rail that fades at both ends */
.hero__in--foot { grid-template-rows: minmax(0, 1fr) auto; }
.hero__foot { grid-column: 1 / -1; align-self: end; }
.brands { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); }
.brands__t { flex: none; max-width: 16em; padding-right: clamp(20px, 3vw, 36px); border-right: 1px solid var(--b-20); font-size: 14px; line-height: 1.4; color: var(--b-75); }
.brands__rail { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.brands__track { display: flex; width: max-content; animation: brands 36s linear infinite; }
@keyframes brands { to { transform: translateX(-50%); } }
.brand { display: inline-flex; align-items: center; gap: 10px; height: 44px; margin-right: clamp(44px, 5vw, 72px); white-space: nowrap; }
.brand__logo { display: block; width: auto; max-width: none; }
.brand__ic { width: 24px; height: 24px; flex: none; object-fit: contain; }
.brand__n { font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--logo-gris); }
.brands__t { color: var(--gris); border-right-color: var(--linea-2); }
.logos-band { margin-top: clamp(40px, 5vw, 64px); }

/* the ad platforms Karum runs, one quiet line along the bottom of the home hero */
.experts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; font-size: 15px; color: var(--b-90); }
.experts__t { padding-right: 26px; border-right: 1px solid var(--b-20); font-size: 14px; color: var(--b-75); }
.xp { display: inline-flex; align-items: center; gap: 9px; font-weight: 500; }
.xp .ico { width: 20px; height: 20px; }

.kplan path { fill: none; stroke: currentColor; stroke-width: 1.15; vector-effect: non-scaling-stroke; opacity: .8; }
.kplan .o5 { opacity: .24; }
.kplan .o8 { opacity: .44; }
.kplan path.dot { fill: currentColor; stroke: none; opacity: 1; transform-box: fill-box; transform-origin: center; }
.js .kplan--draw path:not(.dot) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s var(--ease-io) forwards; animation-delay: calc(var(--dl, 0s) + .15s); }
.js .kplan--draw .dot { opacity: 0; animation: pop .6s var(--ease) forwards; animation-delay: 1.9s; }
.js .kplan--view path:not(.dot) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-io); transition-delay: var(--dl, 0s); }
.js .kplan--view .dot { opacity: 0; transition: opacity .6s var(--ease); transition-delay: 1.8s; }
.js .kplan--view.in path:not(.dot) { stroke-dashoffset: 0; }
.js .kplan--view.in .dot { opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }

/* a construction grid hidden behind the home hero's blue (v6.js): it shows through round the pointer with a slow
   pulse and fades when the pointer leaves. Square cells, heavier every fourth line, and the logo's marks here and there */
.hero__grid {
  --gx: -999px; --gy: -999px; --gr: 240px;
  position: absolute; inset: 0; z-index: 1; overflow: hidden; color: var(--blanco); pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease);
  -webkit-mask-image: radial-gradient(circle at var(--gx) var(--gy), #000, rgba(0, 0, 0, .4) calc(var(--gr) * .45), transparent var(--gr));
  mask-image: radial-gradient(circle at var(--gx) var(--gy), #000, rgba(0, 0, 0, .4) calc(var(--gr) * .45), transparent var(--gr));
}
.hero__grid.on { opacity: 1; transition-duration: .9s; }
.hero__grid svg { display: block; animation: breathe 5s ease-in-out infinite paused; }
.hero__grid.on svg { animation-play-state: running; }
.hero__grid path { fill: none; stroke: currentColor; stroke-width: 1; }
.hero__grid-l { opacity: .16; }
.hero__grid-x { opacity: .3; }
.hero__grid-m { opacity: .32; }
.hero__grid .hero__grid-d { fill: currentColor; stroke: none; opacity: .6; }
@keyframes breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.page { position: relative; z-index: 2; background: var(--blanco); border-radius: 32px 32px 0 0; box-shadow: 0 -1px 0 var(--linea), 0 -40px 80px -40px rgba(0, 0, 0, .35); }

@media (max-width: 900px) {
  .hero, .hero--short { height: auto; min-height: calc(100svh - var(--nav-h)); max-height: none; }
  /* the card fills the screen: the copy at the top, "Expertos en" along the bottom edge and the drawing with its
     notifications centred in the blue between them, however tall the phone */
  .hero__card { min-height: calc(100svh - var(--nav-h) - 10px); display: flex; flex-direction: column; }
  .hero__in { flex: 1 0 auto; height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 28px; padding-top: 40px; padding-bottom: 32px; }
  .hero__in--foot { grid-template-rows: auto minmax(0, 1fr) auto; }
  /* the drawing spills up behind the button, never over it */
  .hero__copy { position: relative; z-index: 1; }
  .brands { flex-direction: column; align-items: stretch; gap: 12px; }
  .brands__t { max-width: none; padding-right: 0; border-right: 0; font-size: 13px; }
  .experts { gap: 8px 20px; }
  .experts__t { width: 100%; padding-right: 0; border-right: 0; font-size: 13px; }
  .hero__visual { align-self: stretch; height: auto; min-height: 300px; }
  .hero__plan { width: 120%; opacity: .7; }
  .page { border-radius: 24px 24px 0 0; }
}
@media (max-width: 600px) {
  /* spacing and the title follow the height a phone really shows with the browser's bars out (svh), so the card fits
     that first screen; on a shorter one it runs on below, "Expertos en" just under the fold */
  .hero__in { padding: clamp(32px, 6svh, 56px) 22px clamp(18px, 3svh, 28px); gap: clamp(16px, 3svh, 28px); }
  .hero .h1 { font-size: clamp(31px, min(9vw, 5.2svh), 40px); }
  .hero__lead { margin-top: clamp(12px, 2.2svh, 18px); font-size: 16px; line-height: 1.45; }
  .hero__actions { margin-top: clamp(16px, 3svh, 28px); }
  .hero__actions .btn--ghost { display: none; }
  .hero__fine { margin-top: 16px; font-size: 13px; }
  .hero__in--foot .hero__fine { display: none; }
  .hero__visual { min-height: 0; }
  /* the drawing fades out before it reaches the copy and again behind "Expertos en": a band of lines round the
     notifications, never across the words */
  .hero__plan {
    -webkit-mask-image: linear-gradient(transparent 10%, #000 30%, #000 64%, transparent 86%);
    mask-image: linear-gradient(transparent 10%, #000 30%, #000 64%, transparent 86%);
  }
  /* two notifications at a time, a touch smaller than on a computer */
  .hero .feed { width: min(350px, 100%); height: 144px; }
  .hero .notif { gap: 10px; padding: 10px 15px 10px 10px; border-radius: 14px; }
  .hero .notif__ic { width: 34px; height: 34px; border-radius: 10px; }
  .hero .notif__ic .ico { width: 17px; height: 17px; }
  .hero .notif__t { font-size: 13.5px; text-wrap: balance; }
  .hero .notif__s { font-size: 12.5px; text-wrap: pretty; }
  .hero .notif__time { font-size: 11px; }
  /* the time sits on the title's line, so the second line has the card's whole width */
  .hero .notif { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic t time" "ic s s"; column-gap: 10px; align-items: center; }
  .hero .notif__b { display: contents; }
  .hero .notif__ic { grid-area: ic; }
  .hero .notif__t { grid-area: t; }
  .hero .notif__s { grid-area: s; }
  .hero .notif__time { grid-area: time; margin-left: 0; align-self: center; }
  .hero .experts { gap: 8px 16px; font-size: 14px; }
  /* with the chat on, "Expertos en" keeps clear of its button floating over the card's bottom corner */
  body:has(.kchat) .hero .experts { padding-right: 48px; }
  .hero .xp { gap: 8px; }
  .hero .xp .ico { width: 18px; height: 18px; }
  .step__frame .toast + .toast { display: none; }
}

/* ---------- subpage header: a white title block over a cielo stage that opens out to the edges as you scroll ---------- */
.phero { padding-top: clamp(36px, 5vw, 72px); }
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
.phero__h { font-size: clamp(42px, 5.6vw, 84px); color: var(--negro); }
.phero__h--long { font-size: clamp(40px, 4.8vw, 70px); }
.phero__h .t { display: block; }
.phero__side .lead { max-width: 40ch; }
.phero__acts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.phero__fine { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--gris); }
.phero__fine span { display: inline-flex; align-items: center; gap: 6px; }
.phero__fine .ico { width: 15px; height: 15px; color: var(--rosa); }
.phero__stage { margin-top: clamp(36px, 5vw, 60px); padding: 0 10px; }
.phero__panel {
  --open: 0;
  --edge: calc(50% - min(var(--wrap) / 2, 50% + 10px - var(--gut)));
  position: relative; isolation: isolate; overflow: hidden; height: clamp(480px, 66vh, 620px);
  border-radius: var(--r-3); background: var(--cielo-grad); color: var(--blanco);
  clip-path: inset(0 calc((1 - var(--open)) * var(--edge)) round var(--r-3));
}
.phero__panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 64% at 50% 46%, var(--b-20), transparent 72%),
    linear-gradient(var(--b-12), var(--b-12)) 0 11.6% / 100% 1px no-repeat,
    linear-gradient(var(--b-12), var(--b-12)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--b-12), var(--b-12)) 0 88.4% / 100% 1px no-repeat;
}
.phero__plan { position: absolute; z-index: 0; left: 50%; top: 50%; height: 116%; aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--blanco); pointer-events: none; }
.phero__plan svg { width: 100%; height: 100%; overflow: visible; }
.phero__vis { position: relative; z-index: 2; height: 100%; width: min(720px, 100%); margin: 0 auto; display: grid; place-items: center; transform: translate3d(0, calc((1 - var(--open)) * 28px), 0); }
.phero .phone { width: min(260px, calc((min(66vh, 620px) - 72px) * 9 / 18.6)); }
.phero .float--tl { left: 0; }
.phero .float--br { right: 0; }
.phero .float--low { bottom: 6%; }
.phero .sector-vis .float--tl { top: 18%; }
.phero .sector-vis .float--br { bottom: 12%; }
.phero :focus-visible { outline-color: var(--cielo-osc); }

.phero--aside { padding-bottom: clamp(40px, 6vw, 72px); }
.phero--aside .phero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; }
.phero--aside .phero__side { margin-top: 26px; }
.phero__aside { display: grid; justify-items: end; }
.phero__aside .receipt { box-shadow: var(--sombra-2), 0 0 0 1px var(--linea); }

/* ---------- about header: on paper, the Karum mark builds itself from its construction drawing ---------- */
.ahero { --gone: 0; position: relative; isolation: isolate; overflow: clip; padding: clamp(24px, 4vw, 48px) 0 clamp(24px, 4vw, 56px); text-align: center; }
.ahero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--rejilla) 1px, transparent 1px), linear-gradient(90deg, var(--rejilla) 1px, transparent 1px);
  background-size: 44px 44px; background-position: 50% 0;
  -webkit-mask-image: radial-gradient(56% 52% at 50% 30%, #000, transparent 80%);
  mask-image: radial-gradient(56% 52% at 50% 30%, #000, transparent 80%);
}
.ahero__mark { width: clamp(220px, 34vh, 360px); aspect-ratio: 1; margin: 0 auto; color: var(--cielo); }
.ahero__mark svg { width: 100%; height: 100%; overflow: visible; }
.kmark .klines { opacity: calc(1 - var(--gone)); }
.kplan.kmark .kfill path { fill: var(--rosa); stroke: none; opacity: 1; transform-box: fill-box; transform-origin: center; }
.js .kplan.kmark .kfill path { opacity: 0; animation: petal .8s var(--ease) forwards; animation-delay: calc(1.8s + var(--i) * .1s); }
@keyframes petal { from { opacity: 0; scale: .55; } to { opacity: 1; scale: 1; } }
.ahero__h { max-width: 15em; margin: clamp(14px, 2.4vw, 30px) auto 0; font-size: clamp(40px, 5.4vw, 80px); color: var(--negro); }
.ahero .lead { margin: 22px auto 0; max-width: 56ch; }
.ahero__foot { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.ahero__by { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; color: var(--tinta); }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 500; background: var(--susurro); color: var(--cielo-osc); box-shadow: 0 0 0 3px var(--blanco); }
.av + .av { margin-left: -22px; }
.av--rosa { background: var(--rosa-claro); color: var(--rosa); }
img.av { object-fit: cover; }
.faces { display: inline-flex; flex: none; }
.faces .av + .av { margin-left: -10px; }
.av--lg { width: 72px; height: 72px; box-shadow: 0 0 0 4px var(--negro); }
.av--lg + .av--lg { margin-left: -16px; }

@media (max-width: 900px) {
  .phero__grid, .phero--aside .phero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 20px; }
  .phero__aside { justify-items: start; }
  .phero__panel { height: auto; min-height: 460px; display: grid; padding: 40px 0; }
  .phero__vis { height: auto; padding: 0 16px; }
  .phero__plan { height: 100%; }
}
@media (max-width: 600px) {
  .phero__h, .ahero__h { font-size: clamp(34px, 9.6vw, 40px); }
  .phero__fine { font-size: 13px; }
  .phero__panel { min-height: 0; padding: 30px 0 36px; }
  .phero .phone { width: 228px; }
  .ahero__mark { width: 220px; }
}

/* ---------- sections ---------- */
.sec { padding: clamp(80px, 10vw, 140px) 0; }
.sec--tight { padding: clamp(56px, 7vw, 96px) 0; }
.sec--top0 { padding-top: 0; }
.sec--niebla { background: var(--niebla); }
.head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 64px); }
.head--center { text-align: center; justify-items: center; }
.head--center .lead { margin: 0 auto; }
.head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: 24px 64px; }
.head--split .lead { justify-self: end; }
@media (max-width: 900px) { .head--split { grid-template-columns: minmax(0, 1fr); } .head--split .lead { justify-self: start; } }

.statement { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.18; letter-spacing: -.026em; color: var(--negro); max-width: 23em; text-wrap: pretty; }
.statement .w { transition: opacity .15s linear; }

/* reveal: content is visible without scripting; the class .js turns the reveal on */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- facts ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 6vw, 80px); }
.fact { min-height: 210px; padding: 22px 22px 24px; border-radius: var(--r-2); background: var(--niebla); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.fact__d { font-size: 14.5px; line-height: 1.45; color: var(--gris); max-width: 24ch; }
.fact__v { font-size: clamp(46px, 4.4vw, 64px); line-height: 1; letter-spacing: -.045em; color: var(--negro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact__v small { font-size: .42em; letter-spacing: -.01em; margin-left: 4px; color: var(--gris); }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact { min-height: 180px; } }
/* on a phone each figure takes a row: the number first, its line beside it, so neither has to squeeze */
@media (max-width: 600px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fact { min-height: 0; display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 20px; }
  .fact__v { order: -1; font-size: 40px; }
  .fact__d { max-width: none; }
}

/* ---------- product cards (home) ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r-3); background: var(--niebla); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sombra-2); }
.pcard--rosa { background: var(--rosa-claro); }
.pcard--azul { background: var(--susurro); }
.pcard__vis { position: relative; height: 320px; overflow: hidden; display: grid; place-items: center; padding: 28px; }
.pcard__txt { padding: 0 30px 30px; display: grid; gap: 8px; justify-items: start; }
.pcard__name { display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 400; letter-spacing: -.022em; color: var(--negro); }
.pcard__d { color: var(--gris); max-width: 40ch; font-size: 16px; }
.pcard .link { margin-top: 8px; }
.pcard__a { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
@media (max-width: 760px) { .pgrid { grid-template-columns: minmax(0, 1fr); } .pcard__vis { height: auto; min-height: 280px; padding: 28px 20px; } .pcard__txt { padding: 0 22px 26px; } }

/* ---------- small UI pieces (notifications, chat, ad, calendar, report) ---------- */
.notif {
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: 340px;
  padding: 12px 18px 12px 12px; border-radius: 16px; background: var(--blanco); color: var(--tinta);
  box-shadow: var(--sombra-cielo);
}
.notif__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--blanco); background: var(--rosa); }
.notif__ic .ico { width: 19px; height: 19px; }
.notif__ic--azul { background: var(--cielo-osc); }
.notif__ic--negro { background: var(--negro); }
.notif__b { min-width: 0; }
.notif__t { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--tinta); }
.notif__s { display: block; font-size: 13px; line-height: 1.35; color: var(--gris); }
.notif__time { margin-left: 8px; align-self: flex-start; font-size: 11.5px; color: var(--gris); white-space: nowrap; }
.notif--onwhite { box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); }

.feed { position: relative; width: min(370px, 100%); height: 300px; }
.feed .notif { position: absolute; left: 0; top: 0; width: 100%; max-width: none; transition: transform .8s var(--ease), opacity .6s var(--ease); will-change: transform, opacity; }
.feed--static .notif { position: relative; margin-bottom: 12px; }

.wa { width: min(360px, 100%); border-radius: 22px; overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-2); font-size: 14px; text-align: left; }
.wa__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.wa__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--negro); color: var(--blanco); font-size: 12.5px; font-weight: 500; }
.wa__head > span:nth-child(2) { min-width: 0; }
.wa__name { display: block; font-size: 14.5px; font-weight: 500; color: var(--negro); line-height: 1.25; }
.wa__st { display: block; font-size: 12px; color: var(--gris); }
.wa__name, .wa__st { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wa__head .ico { margin-left: auto; width: 18px; height: 18px; color: var(--gris); }
.wa__body { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--niebla); min-height: 280px; }
.msg { max-width: 84%; padding: 8px 12px 6px; border-radius: 14px; line-height: 1.42; color: var(--tinta); }
.msg--in { align-self: flex-start; background: var(--blanco); border-top-left-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.msg--out { align-self: flex-end; background: var(--rosa-claro); border-top-right-radius: 4px; }
.msg time { display: block; margin-top: 2px; text-align: right; font-size: 10.5px; color: var(--gris); }
.msg--sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--susurro); color: var(--cielo-osc); font-size: 12.5px; font-weight: 500; text-wrap: balance; max-width: 100%; }
@media (max-width: 400px) { .msg--sys { font-size: 12px; padding: 6px 11px; } }
.phone .msg--sys { font-size: 11px; padding: 5px 9px; gap: 5px; }
.msg--sys .ico { width: 14px; height: 14px; }
.wa__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--gris); }
.wa__foot span { flex: 1; height: 34px; border-radius: 999px; background: var(--niebla); display: flex; align-items: center; padding: 0 14px; }
.wa__foot b { width: 34px; height: 34px; border-radius: 50%; background: var(--rosa); color: var(--blanco); display: grid; place-items: center; }
.wa__foot .ico { width: 16px; height: 16px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--blanco); color: var(--negro); box-shadow: 0 0 0 1px var(--linea); }
.tag .ico { width: 14px; height: 14px; }
.tag--rosa { background: var(--rosa-claro); color: var(--rosa-osc); box-shadow: none; }
.tag--azul { background: var(--susurro); color: var(--cielo-osc); box-shadow: none; }
.tag--negro { background: var(--negro); color: var(--blanco); box-shadow: none; }
.tag--solid { background: var(--rosa); color: var(--blanco); box-shadow: none; }

/* elements revealed one after another when their container turns on */
.js [data-seq] > * { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .45s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * var(--step, 850ms) + var(--d0, 200ms)); }
.js [data-seq].on > * { opacity: 1; transform: none; }

.phone { position: relative; width: 290px; aspect-ratio: 9 / 18.6; padding: 9px; border-radius: 46px; background: var(--negro); box-shadow: var(--sombra-2), 0 0 0 1px rgba(255, 255, 255, .08); }
.phone__scr { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 37px; background: var(--niebla); display: flex; flex-direction: column; }
.phone__notch { position: absolute; top: 9px; left: 50%; z-index: 4; width: 92px; height: 26px; border-radius: 20px; background: var(--negro); transform: translateX(-50%); }
.phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 4px; font-size: 12.5px; font-weight: 500; color: var(--negro); }
.phone__bar svg { height: 11px; width: auto; }
.phone .wa { width: 100%; border-radius: 0; box-shadow: none; flex: 1; display: flex; flex-direction: column; }
.phone .wa__body { flex: 1; min-height: 0; justify-content: flex-start; padding: 12px; gap: 7px; }
.phone video, .phone .phone__img { width: 100%; height: 100%; object-fit: cover; }

.ad { width: 300px; overflow: hidden; border-radius: 18px; background: var(--blanco); box-shadow: var(--sombra-2); font-size: 13.5px; text-align: left; }
.ad__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.ad__av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--negro); color: var(--blanco); font-size: 11px; font-weight: 500; }
.ad__who { line-height: 1.25; }
.ad__who b { display: block; font-size: 13.5px; font-weight: 500; color: var(--negro); }
.ad__who span { font-size: 11.5px; color: var(--gris); }
.ad__img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.ad__cta { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--niebla); font-weight: 500; color: var(--negro); }
.ad__cta .ico { width: 16px; height: 16px; }
.ad__txt { padding: 10px 12px 14px; color: var(--tinta); line-height: 1.42; }
.ad__txt b { font-weight: 500; color: var(--negro); }

.approve { position: absolute; z-index: 4; width: 290px; padding: 14px; border-radius: 16px; background: var(--blanco); box-shadow: var(--sombra-2); font-size: 13px; text-align: left; }
.approve__top { display: flex; align-items: center; gap: 8px; color: var(--gris); }
.approve__top b { color: var(--negro); font-weight: 500; }
.approve__av { width: 26px; height: 26px; border-radius: 50%; background: var(--susurro); color: var(--cielo-osc); display: grid; place-items: center; font-size: 11px; font-weight: 500; }
.approve__btn { position: relative; margin-top: 12px; width: 100%; height: 38px; border-radius: 999px; background: var(--negro); color: var(--blanco); font-size: 13.5px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background-color .35s; }
.approve__btn .ico { width: 15px; height: 15px; }
.approve__btn .b { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: opacity .25s; }
.approve__btn .b2 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; }
.approve.done .approve__btn { background: var(--rosa); }
.approve.done .approve__btn .b1 { opacity: 0; }
.approve.done .approve__btn .b2 { opacity: 1; }
.cursor { position: absolute; z-index: 6; left: 50%; top: 70%; width: 22px; height: 22px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transform: translate(150px, 110px); opacity: 0; }
.cursor path { fill: var(--negro); stroke: var(--blanco); stroke-width: 1.5; stroke-linejoin: round; }
.approve__av .ico { width: 14px; height: 14px; }
.on .cursor { animation: cursor 2.2s var(--ease) .5s forwards; }
@keyframes cursor {
  0% { opacity: 0; transform: translate(150px, 110px); }
  15% { opacity: 1; }
  70% { transform: translate(0, 0); }
  78% { transform: translate(0, 0) scale(.82); }
  88%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

.cal { width: min(430px, 100%); padding: 16px; border-radius: 18px; background: var(--blanco); box-shadow: var(--sombra-2); font-size: 12px; text-align: left; }
.cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cal__head b { font-size: 15px; font-weight: 500; color: var(--negro); }
.cal__grid { display: grid; grid-template-columns: 38px repeat(5, minmax(0, 1fr)); grid-auto-rows: 40px; gap: 4px; }
.cal__d { align-self: end; text-align: center; color: var(--gris); font-size: 11.5px; padding-bottom: 4px; }
.cal__d b { display: block; font-size: 14px; font-weight: 500; color: var(--negro); }
.cal__h { color: var(--gris); font-size: 11px; padding-top: 2px; }
.cal__s { border-radius: 8px; background: var(--niebla); }
.cal__ev { display: flex; flex-direction: column; justify-content: center; min-width: 0; border-radius: 8px; padding: 4px 6px; overflow: hidden; background: var(--susurro); color: var(--cielo-osc); font-size: 10.5px; line-height: 1.25; }
.cal__ev b, .cal__ev span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cal__ev b { font-weight: 600; }
.cal__ev--new { background: var(--rosa); color: var(--blanco); box-shadow: 0 8px 18px -8px rgba(189, 52, 123, .8); }
.js .cal__ev--new { opacity: 0; transform: translateY(-16px) scale(.94); transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: .9s; }
.js .on .cal__ev--new { opacity: 1; transform: none; }

.toast { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra-2); font-size: 13px; color: var(--tinta); text-align: left; }
.toast .notif__ic { width: 32px; height: 32px; border-radius: 9px; }
.toast .notif__ic .ico { width: 16px; height: 16px; }
.toast b { display: block; font-weight: 500; color: var(--negro); font-size: 13.5px; }
.toast b + span { display: block; color: var(--gris); font-size: 12px; }
.js .toast { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .5s var(--ease), transform .7s var(--ease); transition-delay: var(--td, 1.8s); }
.js .on .toast { opacity: 1; transform: none; }

.loopui { width: min(440px, 100%); padding: 8px 16px 14px; border-radius: 18px; background: var(--blanco); box-shadow: var(--sombra-2); text-align: left; }
.loopui__h { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 6px; font-size: 13px; color: var(--gris); }
.loopui__h b { font-size: 15px; font-weight: 500; color: var(--negro); }
.loopui__row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linea); font-size: 13px; }
.loopui__row img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.loopui__row b { display: block; font-size: 13.5px; font-weight: 500; color: var(--negro); }
.loopui__row span { color: var(--gris); font-size: 12px; }
.loopui__row > div > b, .loopui__row > div > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 600px) {
  .loopui { padding: 6px 14px 12px; }
  .loopui__row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; }
  .loopui__row img { width: 40px; height: 40px; }
}
@media (max-width: 380px) { .loopui__row { grid-template-columns: minmax(0, 1fr) auto; } .loopui__row img { display: none; } }
.loopui__bar { margin-top: 7px; height: 6px; border-radius: 4px; background: var(--niebla); overflow: hidden; }
.loopui__bar i { display: block; height: 100%; border-radius: 4px; background: var(--negro); transform-origin: left; transform: scaleX(var(--v, .4)); transition: transform 1.2s var(--ease); }
.loopui__row--win .loopui__bar i { background: var(--rosa); }
.js .on .loopui__row--win .loopui__bar i { transform: scaleX(var(--v2, .9)); transition-delay: 1.9s; }
.js .on .loopui__row--lose .loopui__bar i { transform: scaleX(var(--v2, .2)); transition-delay: 1.9s; }
.loopui__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--negro); font-weight: 500; }
.js .loopui__up { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .6s var(--ease); transition-delay: 2.2s; }
.js .on .loopui__up { opacity: 1; transform: none; }

.report { width: min(400px, 100%); padding: 20px; border-radius: 22px; background: var(--blanco); box-shadow: var(--sombra-2); text-align: left; }
.report__top { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--gris); }
.report__top .notif__ic { width: 30px; height: 30px; border-radius: 9px; }
.report__top .notif__ic .ico { width: 15px; height: 15px; }
.report__hi { margin-top: 14px; font-size: 19px; letter-spacing: -.015em; color: var(--negro); line-height: 1.3; }
.report__kpis { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; margin: 16px 0; }
.kpi { padding: 10px 7px 9px 9px; border-radius: 12px; background: var(--niebla); }
.kpi b { display: block; font-size: 23px; font-weight: 400; letter-spacing: -.03em; color: var(--negro); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11.5px; color: var(--gris); line-height: 1.3; display: block; white-space: nowrap; }
.report__tip { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--rosa-claro); font-size: 13.5px; line-height: 1.42; color: var(--tinta); }
.report__tip .ico { width: 18px; height: 18px; color: var(--rosa); margin-top: 1px; }
.example { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris); }

/* mini visuals inside product cards */
.mini-wa { width: min(320px, 100%); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.mini-wa .msg { max-width: 88%; box-shadow: var(--sombra-1); }
.mini-wa .msg--out { background: var(--rosa); color: var(--blanco); }
.mini-wa .msg--in { background: var(--blanco); }
.typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 11px 14px; border-radius: 14px; border-top-right-radius: 4px; background: var(--blanco); box-shadow: var(--sombra-1); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gris); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.mini-ads { width: min(340px, 100%); display: grid; gap: 8px; }
.mini-ads .loopui__row { padding: 10px 12px; border: 0; border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra-1); }
.mini-ugc { position: relative; width: 300px; height: 260px; }
.mini-ugc img { position: absolute; top: 50%; left: 50%; width: 132px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; box-shadow: var(--sombra-2); border: 3px solid var(--blanco); transition: transform .7s var(--ease); }
.mini-ugc img:nth-child(1) { transform: translate(-125%, -46%) rotate(-9deg); }
.mini-ugc img:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.mini-ugc img:nth-child(3) { transform: translate(25%, -46%) rotate(9deg); }
.pcard:hover .mini-ugc img:nth-child(1) { transform: translate(-140%, -44%) rotate(-12deg); }
.pcard:hover .mini-ugc img:nth-child(3) { transform: translate(40%, -44%) rotate(12deg); }
.mini-ugc .play { position: absolute; z-index: 3; top: 50%; left: 50%; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--negro); transform: translate(-50%, -50%); box-shadow: var(--sombra-1); }
.mini-ugc .play .ico { width: 20px; height: 20px; margin-left: 3px; }

/* ---------- why not just a chat: the route from the idea to the sale, and who does each stop ---------- */
.mark { fill: var(--rosa); }
.route { --rt-head: 104px; --rt-row: 64px; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 12px; }
.route__lanes { display: grid; grid-template-rows: var(--rt-head) var(--rt-row) var(--rt-row); gap: 12px; align-items: center; font-size: 15px; font-weight: 500; color: var(--negro); }
.route__lanes span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.route__lanes span:nth-child(2) { color: var(--gris); }
.route__lanes .ico, .route__lanes .mark { width: 18px; height: 18px; }
.route__stops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stop { display: grid; grid-template-rows: var(--rt-head) var(--rt-row) var(--rt-row); gap: 12px; }
.stop__t { display: flex; flex-direction: column; gap: 12px; padding-right: 14px; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--negro); }
.stop__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--niebla); color: var(--negro); }
.stop__ic .ico { width: 19px; height: 19px; }
.stop__c { position: relative; display: flex; align-items: center; }
.stop__c::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; transform-origin: left center; }
.stop__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stop__chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 12px; font-size: 13px; line-height: 1.25; white-space: nowrap; }
.stop__chip .ico { width: 14px; height: 14px; flex: none; }
/* the other lane: a solid grey line where they do the stop, dashed where it is left to you */
.stop__c--them::before { background: repeating-linear-gradient(90deg, var(--linea-2) 0 6px, transparent 6px 12px); }
.stop__c--them.is-yes::before { background: var(--gris); }
.stop__c--them .stop__chip { background: var(--blanco); color: var(--gris); border: 1px dashed var(--linea-2); }
.stop__c--them.is-yes .stop__chip { color: var(--negro); border: 1px solid var(--linea-2); }
/* the Karum lane: one line, cielo to rosa, through every stop */
.stop__c--karum::before { height: 3px; margin-top: -1.5px; background: linear-gradient(90deg, var(--cielo), var(--rosa)) calc(var(--i) * 20%) 0 / 600% 100%; }
.stop__c--karum .stop__chip { background: var(--rosa-claro); color: var(--rosa-osc); }
.stop__c--karum .stop__chip .ico { color: var(--rosa); }
/* the lines draw themselves stop by stop when the route comes into view */
.js .route .stop__c::before { transform: scaleX(0); transition: transform .5s var(--ease); transition-delay: calc(var(--i) * .16s); }
.js .route.on .stop__c::before { transform: scaleX(1); }
.js .route .stop__chip { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * .16s + .2s); }
.js .route.on .stop__chip { opacity: 1; transform: none; }

/* on the home, the engine (blocks.mjs engineHtml) sits in a black card, 10px in from the edges like the hero */
.engine-sec { padding: 0 10px; background: var(--blanco); }
.engine-sec__card { border-radius: var(--r-3); background: var(--negro); color: var(--b-75); padding: clamp(72px, 9vw, 128px) 0 clamp(40px, 5vw, 64px); }
.engine-sec .founders { margin-top: clamp(48px, 6vw, 80px); }
.founders--dark { background: var(--b-09); box-shadow: inset 0 0 0 1px var(--b-12); }
.founders--dark .av--lg { box-shadow: 0 0 0 4px var(--negro); }

/* the two people behind the AI */
.founders { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px clamp(20px, 3vw, 40px); padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 36px); border-radius: var(--r-3); background: var(--negro); color: var(--b-75); }
.founders__pics { display: flex; }
.founders .h3 { color: var(--blanco); }
.founders__txt p { margin-top: 6px; max-width: 62ch; font-size: 15.5px; }
.founders :focus-visible { outline-color: var(--blanco); }

@media (max-width: 1240px) {
  .route { grid-template-columns: minmax(0, 1fr); }
  .route__lanes { display: none; }
  .route__stops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stop { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 10px 12px; padding: 16px; border-radius: var(--r-2); background: var(--niebla); }
  .stop__t { grid-column: 1 / -1; flex-direction: row; align-items: center; padding-right: 0; }
  .stop__ic { background: var(--blanco); }
  .stop__c { flex-direction: column; align-items: flex-start; gap: 4px; }
  .stop__c::before { display: none; }
  .stop__who { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 12.5px; color: var(--gris); }
  .stop__chip { max-width: 100%; }
}
@media (max-width: 640px) {
  .route__stops { grid-template-columns: minmax(0, 1fr); }
  .stop { grid-template-columns: minmax(0, 1fr); }
  .founders { grid-template-columns: minmax(0, 1fr); }
  .founders .btn { justify-self: start; }
}

/* ---------- steps: sticky index on the left, product moments on the right ---------- */
.steps { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.steps__nav { position: sticky; top: calc(var(--nav-h) + 48px); align-self: start; display: grid; gap: 2px; }
.steps__nav [data-step-link] { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 18px; color: var(--tenue); transition: color .35s; }
.steps__nav [data-step-link]::before { content: "↳"; width: 16px; color: var(--rosa); opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .45s var(--ease); }
.steps__nav [data-step-link][aria-current="step"] { color: var(--negro); }
.steps__nav [data-step-link][aria-current="step"]::before { opacity: 1; transform: none; }
.steps__nav .n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--gris); }
.steps__cta { margin-top: 28px; }
.step { padding-bottom: clamp(56px, 7vw, 110px); }
.step:last-child { padding-bottom: 0; }
.step__frame { position: relative; min-height: 460px; overflow: hidden; display: grid; place-items: center; padding: clamp(24px, 3vw, 44px); border-radius: var(--r-3); background: var(--susurro); }
.step__txt { margin-top: 26px; display: grid; gap: 10px; max-width: 54ch; }
.step__txt p { color: var(--gris); }
.step__n { font-size: 14px; color: var(--rosa); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } .steps__nav { display: none; } .step__frame { min-height: 380px; } }

/* ---------- sectors ---------- */
.sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.scard { position: relative; isolation: isolate; aspect-ratio: 4 / 4.6; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 24px; border-radius: var(--r-3); overflow: hidden; color: var(--blanco); }
.scard img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.scard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .66) 100%); }
.scard:hover img { transform: scale(1.05); }
.scard__ad { position: absolute; top: 18px; left: 18px; right: 18px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .94); color: var(--negro); font-size: 13.5px; line-height: 1.3; box-shadow: var(--sombra-1); transform: translateY(-6px); opacity: 0; transition: opacity .4s, transform .5s var(--ease); }
.scard:hover .scard__ad, .scard:focus-visible .scard__ad { opacity: 1; transform: none; }
.scard__ad .notif__ic { width: 30px; height: 30px; border-radius: 9px; }
.scard__ad .notif__ic .ico { width: 15px; height: 15px; }
.scard__ev { min-width: 0; }
.scard__ev b, .scard__ev span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scard__ev b { font-weight: 500; }
.scard__ev span { color: var(--gris); font-size: 12.5px; }
.scard__name { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.scard__d { font-size: 15px; color: var(--b-90); max-width: 30ch; }
.scard__go { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; }
.scard__go .ico { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.scard:hover .scard__go .ico { transform: translateX(4px); }
.scard--more { color: var(--negro); background: var(--susurro); justify-content: space-between; }
.scard--more::after { display: none; }
.scard--more .scard__d { color: var(--gris); }
.scard--more .plan-mini { width: 120px; color: var(--cielo-osc); opacity: .6; }
@media (max-width: 980px) { .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .sgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 8px; scrollbar-width: none; }
  .sgrid::-webkit-scrollbar { display: none; }
  .scard { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---------- testimonials and logos ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quote { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: 28px; border-radius: var(--r-2); background: var(--niebla); }
.quote blockquote { font-size: 19px; line-height: 1.45; letter-spacing: -.012em; color: var(--negro); }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; color: var(--gris); }
.quote figcaption b { display: block; font-weight: 500; color: var(--negro); }
.quote img { width: 42px; height: 42px; border-radius: 11px; object-fit: contain; background: var(--blanco); padding: 4px; box-shadow: 0 0 0 1px var(--linea); }
@media (max-width: 900px) { .quotes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the offer: the whole commercial engine, and only the ads as the lighter option below ---------- */
.offer { max-width: 1040px; margin: 0 auto; border-radius: var(--r-3); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); overflow: hidden; }
.offer__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; padding: 40px 44px; }
.offer__row--lite { padding-top: 32px; padding-bottom: 34px; background: var(--susurro); }
.offer__buy { display: flex; flex-direction: column; align-items: flex-start; }
.offer__name { font-size: 34px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; color: var(--negro); }
.offer__lite { font-size: 24px; font-weight: 400; letter-spacing: -.022em; line-height: 1.2; color: var(--negro); }
.offer__d { margin-top: 10px; max-width: 40ch; font-size: 15.5px; line-height: 1.45; color: var(--gris); }
.offer__price { display: flex; align-items: flex-end; gap: 10px; margin-top: 26px; }
.offer__price b { font-size: 64px; font-weight: 400; letter-spacing: -.045em; line-height: .85; color: var(--negro); }
.offer__price span { font-size: 13.5px; line-height: 1.35; color: var(--gris); }
.offer__price--lite { margin-top: 20px; }
.offer__price--lite b { font-size: 40px; }
.offer .btn { margin-top: 26px; }
.offer .link { margin-top: 20px; }
.offer__h { font-size: 14px; font-weight: 500; color: var(--negro); }
.offer__list { margin-top: 14px; display: grid; gap: 12px; }
.offer__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; color: var(--tinta); }
.ck { width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--negro); color: var(--blanco); }
.ck .ico { width: 12px; height: 12px; }
.offer__row:first-child .ck, .spec__g--rosa .ck { background: var(--rosa); }
.offer__soon { margin-top: 16px; font-size: 13.5px; color: var(--gris); }
.offer-note { max-width: 1040px; margin: 24px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.offer-note p { font-size: 15px; color: var(--gris); max-width: 66ch; }
@media (max-width: 860px) {
  .offer__row { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 22px; }
  .offer .btn { width: 100%; }
  .offer__price b { font-size: 56px; }
  .offer__price--lite b { font-size: 40px; }
}
/* precios: everything the engine does, group by group, and what stays with Solo anuncios */
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.spec__g { padding: 26px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); }
.spec__g--rosa { background: var(--rosa-claro); box-shadow: none; }
.spec__h { display: flex; align-items: center; gap: 12px; }
.spec__h b { display: block; font-size: 17px; font-weight: 500; color: var(--negro); }
.spec__h span span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--gris); }
.spec .offer__list { margin-top: 20px; }
@media (max-width: 1100px) { .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .spec { grid-template-columns: minmax(0, 1fr); } }
.promises { max-width: 1040px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.promise { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); font-size: 15px; color: var(--tinta); }
.promise .ico { width: 20px; height: 20px; color: var(--rosa); margin-top: 1px; }
@media (max-width: 980px) { .promises { grid-template-columns: minmax(0, 1fr); } }

.cmp-wrap { overflow-x: auto; border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--linea); background: var(--blanco); }
.cmp { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.cmp thead th { font-size: 16px; font-weight: 500; color: var(--negro); background: var(--blanco); }
.cmp thead th small { display: block; font-size: 13px; font-weight: 400; color: var(--gris); }
.cmp tbody th { font-weight: 400; color: var(--tinta); }
.cmp .grp th { padding-top: 26px; font-size: 13.5px; color: var(--gris); border-bottom: 0; }
.cmp td { text-align: center; color: var(--tinta); }
.cmp td .ck { margin: 0 auto; }
.cmp td .no { color: var(--tenue); }
.cmp .col-rosa { background: rgba(247, 231, 239, .55); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 64px; }
.faq__side { display: grid; gap: 20px; align-content: start; }
.faq__ask { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.faq__list { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.35; color: var(--negro); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--gris); transition: transform .35s var(--ease); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--gris); max-width: 62ch; }
@media (max-width: 900px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* ---------- CTA band and footer ---------- */
.cta { padding: 0 10px 10px; background: var(--blanco); }
.cta__card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding: clamp(48px, 8vw, 112px) clamp(24px, 6vw, 88px); border-radius: var(--r-3); background: var(--cielo-grad); color: var(--blanco); }
.cta__card .h2 { color: var(--blanco); max-width: 13em; }
.cta__card p { margin-top: 20px; max-width: 46ch; color: var(--b-90); font-size: 18px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__plan { position: absolute; z-index: -1; right: -6%; top: 50%; width: min(680px, 70%); aspect-ratio: 1; transform: translateY(-50%); color: var(--blanco); opacity: .55; }
.cta__plan svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 900px) { .cta__card { grid-template-columns: minmax(0, 1fr); align-items: start; } .cta__plan { width: 120%; right: -50%; opacity: .35; } }

/* the footer is one more card, like the hero and the form: black, 10px in from the edges, with the wordmark
   rising from its bottom edge */
.foot { padding: 0 10px 10px; background: var(--blanco); }
.foot__card { overflow: hidden; border-radius: var(--r-3); background: var(--negro); color: var(--b-75); padding-top: clamp(56px, 7vw, 88px); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 36px 28px; }
.foot__brand .logo { width: 128px; color: var(--blanco); }
.foot__brand p { margin-top: 18px; max-width: 26ch; font-size: 15px; line-height: 1.5; }
.foot__brand .btn { margin-top: 24px; }
.foot__h { margin-bottom: 12px; font-size: 14px; font-weight: 400; color: var(--b-55); }
.foot__col a { display: inline-block; padding: 5px 0; font-size: 15px; color: var(--b-90); transition: color .2s; }
.foot__col a:hover { color: var(--blanco); text-decoration: underline; text-underline-offset: 4px; }
.foot__bottom { margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--b-12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13.5px; color: var(--b-55); }
.foot__bottom nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot__bottom a:hover { color: var(--blanco); }
.foot__bottom { align-items: center; }
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; }
/* ask your AI about Karum, in the corner: three marks; each opens to its name on hover and opens that chat with
   the question already written */
.foot__ask { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.foot__ask-t { margin-right: 6px; color: var(--b-55); white-space: nowrap; }
.foot__bottom .aib { display: inline-grid; grid-template-columns: 16px 0fr; align-items: center; height: 34px; padding: 0 9px; border-radius: 999px; background: var(--b-12); color: var(--blanco); transition: grid-template-columns .35s var(--ease), background-color .2s; }
.foot__bottom .aib:hover, .foot__bottom .aib:focus-visible { grid-template-columns: 16px 1fr; background: var(--b-20); color: var(--blanco); }
.aib .ico { width: 16px; height: 16px; }
.aib.ai--claude .ico { color: var(--claude); }
/* the name sits in a grid column that grows from 0fr to 1fr on hover */
.aib__n { min-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-size: 13.5px; transition: opacity .25s var(--ease); }
.aib__n > span { padding-left: 7px; }
.aib:hover .aib__n, .aib:focus-visible .aib__n { opacity: 1; }
.aib:focus-visible { outline-color: var(--blanco); }
.foot__word { margin-top: clamp(32px, 5vw, 64px); color: var(--b-09); }
.foot__word svg { width: 100%; height: auto; margin-bottom: -5.6%; transition: transform 1.6s var(--ease); }
.foot__word.is-low svg { transform: translateY(30%); }
@media (max-width: 980px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }

/* ---------- product and sector pages ---------- */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; }
.feat { display: grid; gap: 12px; align-content: start; }
.feat__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--rosa-claro); color: var(--rosa); }
.feat__ic--azul { background: var(--susurro); color: var(--cielo-osc); }
.feat__ic .ico { width: 21px; height: 21px; }
.feat p { color: var(--gris); font-size: 16px; }
@media (max-width: 900px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feats { grid-template-columns: minmax(0, 1fr); } }

.trig { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.trig__c { display: grid; gap: 22px; align-content: space-between; min-height: 176px; padding: 20px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .3s, transform .4s var(--ease); }
.trig__c:hover { box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); transform: translateY(-2px); }
.trig__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--niebla); color: var(--negro); }
.trig__ic .ico { width: 18px; height: 18px; }
.trig__when { display: block; font-size: 14px; color: var(--gris); line-height: 1.4; }
.trig__do { display: flex; gap: 6px; margin-top: 4px; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--negro); }
.trig__do::before { content: "↳"; color: var(--rosa); }
@media (max-width: 980px) { .trig { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .trig { grid-template-columns: minmax(0, 1fr); } .trig__c { min-height: 0; } }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.duo--flip > :first-child { order: 2; }
.duo__vis { position: relative; min-height: 460px; display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-3); background: var(--susurro); overflow: hidden; }
.duo__vis--rosa { background: var(--rosa-claro); }
.duo__vis--niebla { background: var(--niebla); }
/* on a phone the card fills the width, so its toast drops below it instead of covering a row */
@media (max-width: 600px) { .duo__vis--ficha .toast { position: static; margin-top: -18px; } }
/* on a phone the pop-ups sit just under the screen they belong to, over its bottom edge, instead of covering its
   header or hanging half outside the frame; in a page header they run along the bottom of the stage */
@media (max-width: 600px) {
  .step__frame, .duo__vis { padding: 18px; }
  .step__frame > .toast, .duo__vis > .toast, .step__frame > .approve, .duo__vis > .approve { position: relative; inset: auto !important; justify-self: center; max-width: 100%; margin-top: -18px; }
  .phero__panel .toast { inset: auto 14px 14px !important; }
}
.duo__txt { display: grid; gap: 20px; align-content: start; }
.checks { display: grid; gap: 12px; margin-top: 8px; }

/* ---------- client calculator: the visitor's inputs on niebla, the month's ranges on a white card ---------- */
.calc { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 16px; align-items: start; }
.calc__in { display: grid; gap: 26px; padding: clamp(22px, 3.2vw, 40px); border-radius: var(--r-3); background: var(--niebla); }
.calc__f { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.calc__l { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0; font-size: 15px; font-weight: 500; color: var(--negro); }
.calc__l output { flex: none; font-variant-numeric: tabular-nums; }
.calc__hint { font-size: 13.5px; line-height: 1.45; color: var(--gris); }
.calc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calc__chip { position: relative; }
.calc__chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.calc__chip span { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px 0 10px; border-radius: 999px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea-2); font-size: 14.5px; color: var(--tinta); transition: background-color .2s, color .2s, box-shadow .2s; }
.calc__chip .picon { width: 24px; height: 24px; }
.calc__chip:hover span { box-shadow: inset 0 0 0 1px var(--negro); }
.calc__chip input:checked + span { background: var(--negro); color: var(--blanco); box-shadow: none; }
.calc__chip input:checked + span .picon__m > * { stroke: var(--blanco); }
.calc__chip input:focus-visible + span { outline: 2px solid var(--cielo-osc); outline-offset: 3px; }
.calc__range { width: 100%; margin: 4px 0; accent-color: var(--negro); cursor: pointer; }
.calc__money { position: relative; display: block; max-width: 220px; }
.calc__money .field { padding-right: 36px; font-variant-numeric: tabular-nums; }
.calc__money > span { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--gris); pointer-events: none; }
.calc__out { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; padding: clamp(22px, 3.2vw, 40px); border-radius: var(--r-3); background: var(--blanco); box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); }
.calc__h { margin-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--gris); }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea); font-size: 15.5px; color: var(--negro); }
.calc__row small { display: block; margin-top: 3px; font-size: 13px; color: var(--gris); }
.calc__row b { flex: none; font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__row--main b { font-size: clamp(40px, 4.6vw, 60px); line-height: 1; letter-spacing: -.02em; color: var(--rosa); }
.calc__note { margin-top: 16px; font-size: 13.5px; color: var(--gris); }
.calc__cta { margin-top: 20px; justify-self: start; }
@media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc__out { position: static; } }
@media (max-width: 600px) { .calc__l { flex-direction: column; gap: 4px; } .calc__cta { justify-self: stretch; white-space: normal; height: auto; min-height: 48px; padding-top: 12px; padding-bottom: 12px; text-align: center; } }
.checks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; color: var(--tinta); }
@media (max-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr); } .duo--flip > :first-child { order: 0; } .duo__vis { min-height: 360px; } }

.settings { width: min(400px, 100%); padding: 18px; border-radius: 20px; background: var(--blanco); box-shadow: var(--sombra-2); text-align: left; font-size: 14px; }
.settings__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.settings__h .tag { white-space: nowrap; }
.settings__h b { font-size: 15px; font-weight: 500; color: var(--negro); }
.set { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); color: var(--tinta); }
.set:last-child { border-bottom: 0; padding-bottom: 2px; }
.set span { color: var(--gris); font-size: 12.5px; display: block; }
.sw { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: var(--linea-2); transition: background-color .3s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .3s var(--ease); }
.sw.is-on { background: var(--rosa); }
.sw.is-on::after { transform: translateX(16px); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.chan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chan__c { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-2); background: var(--niebla); font-size: 15px; color: var(--tinta); line-height: 1.35; }
.chan__c b { display: block; font-weight: 500; color: var(--negro); }
.chan__c span { color: var(--gris); font-size: 13.5px; text-wrap: balance; }
.chan__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--blanco); color: var(--negro); box-shadow: 0 0 0 1px var(--linea); }
.chan__ic .ico { width: 20px; height: 20px; }
.chan__c--soon { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); }
@media (max-width: 980px) { .chan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .chan { grid-template-columns: minmax(0, 1fr); } }

.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: flow; }
.flow li { position: relative; padding: 22px 20px 24px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); display: grid; gap: 10px; align-content: start; }
.flow li::before { counter-increment: flow; content: counter(flow, decimal-leading-zero); font-size: 13px; color: var(--rosa); font-variant-numeric: tabular-nums; }
.flow b { font-size: 17px; font-weight: 500; color: var(--negro); letter-spacing: -.01em; }
.flow p { font-size: 14.5px; color: var(--gris); line-height: 1.45; }
@media (max-width: 980px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .flow { grid-template-columns: minmax(0, 1fr); } }

.shot { position: relative; border-radius: var(--r-2); overflow: hidden; background: var(--blanco); box-shadow: var(--sombra-2), 0 0 0 1px var(--linea); }
.shot img { width: 100%; height: auto; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.tab { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-2); transition: background-color .2s, color .2s, box-shadow .2s; }
.tab:hover { box-shadow: inset 0 0 0 1px var(--negro); }
.tab[aria-selected="true"] { background: var(--negro); color: var(--blanco); box-shadow: none; }
.tabpanel[hidden] { display: none; }
.tabpanel p { margin-top: 18px; color: var(--gris); max-width: 64ch; }

.own { display: grid; gap: 0; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); overflow: hidden; }
.own li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--linea); font-size: 14.5px; color: var(--gris); }
.own li:last-child { border-bottom: 0; }
.own b { display: block; font-weight: 500; color: var(--negro); font-size: 15px; }
.own .chan__ic { width: 40px; height: 40px; }
.own .dl { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--negro); color: var(--blanco); }
.own .dl .ico { width: 15px; height: 15px; transform: rotate(90deg); }

.marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marq__track { display: flex; gap: 16px; width: max-content; padding: 20px 0 30px; animation: marq 70s linear infinite; }
.marq:hover .marq__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marq .ad { width: 250px; flex: none; }

.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery figure { position: relative; border-radius: var(--r-2); overflow: hidden; aspect-ratio: 9 / 16; background: var(--niebla); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 10px; bottom: 10px; }
/* captions on a frame, as the edited video shows them: white on black, the second line in the brand's pink */
.reel__cap { position: absolute; left: 6%; right: 6%; bottom: 22%; display: grid; justify-items: center; gap: 5px; text-align: center; pointer-events: none; }
.reel__cap span { padding: 5px 10px; border-radius: 7px; background: var(--negro); color: var(--blanco); font-size: clamp(11.5px, 3.3vw, 18px); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .6); }
.reel__cap span + span { background: var(--rosa); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.qs { display: grid; gap: 10px; }
.qs li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--blanco); font-size: 16px; color: var(--negro); box-shadow: var(--sombra-1); }
.qs .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--rosa-claro); color: var(--rosa); font-size: 13px; font-weight: 500; }

.others { display: flex; flex-wrap: wrap; gap: 8px; }
.others a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); font-size: 15px; color: var(--negro); transition: box-shadow .2s; }
.others a:hover { box-shadow: 0 0 0 1px var(--negro); }
.others img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ---------- about ---------- */
.story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.story__txt { display: grid; gap: 22px; font-size: 19px; line-height: 1.6; color: var(--tinta); max-width: 58ch; }
.story__txt p:first-child { font-size: clamp(22px, 2vw, 28px); line-height: 1.35; letter-spacing: -.02em; color: var(--negro); }
.tl { position: relative; margin-left: 6px; border-left: 1px solid var(--linea-2); }
.tl li { position: relative; padding: 0 0 40px 30px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; background: var(--rosa); transform: rotate(45deg); }
.tl b { font-size: 14px; font-weight: 500; color: var(--rosa); }
.tl h3 { margin-top: 4px; }
.tl p { margin-top: 6px; color: var(--gris); max-width: 50ch; }
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.person { overflow: hidden; border-radius: var(--r-3); background: var(--niebla); }
.person__ph { position: relative; aspect-ratio: 4 / 3.2; display: grid; place-items: center; overflow: hidden; color: var(--cielo-osc); background: var(--susurro); }
.person--rosa .person__ph { background: var(--rosa-claro); color: var(--rosa); }
.person__ph .plan-bg { position: absolute; inset: -10%; opacity: .5; }
.person__ph .plan-bg svg { width: 100%; height: 100%; }
.person__ph:has(.person__img) { place-items: end center; }
.person__img { position: relative; width: 74%; height: auto; }
.person__txt { display: grid; gap: 8px; padding: 26px 28px 30px; }
.person__name { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.person__in { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--negro); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea-2); transition: color .2s, box-shadow .2s; }
.person__in:hover { color: var(--rosa); box-shadow: inset 0 0 0 1px var(--rosa); }
.person__in .ico { width: 18px; height: 18px; }
.person__role { font-size: 15px; color: var(--gris); }
.person__txt p { color: var(--tinta); max-width: 48ch; }
.vals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.val { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); }
.val p { color: var(--gris); font-size: 15.5px; }
@media (max-width: 980px) { .story { grid-template-columns: minmax(0, 1fr); } .vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team, .vals { grid-template-columns: minmax(0, 1fr); } }

/* ---------- contact ---------- */
/* the form closes the home: a cielo card as tall as its content, with a plain form, every field in sight */
.contact { padding: 0 10px 10px; background: var(--blanco); scroll-margin-top: 0; }
.contact__card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 72px); border-radius: var(--r-3); background: var(--cielo-grad); color: var(--blanco); }
.contact__card .h1 { color: var(--blanco); font-size: clamp(36px, 4.4vw, 60px); }
.contact__copy > .lead { color: var(--b-90); margin-top: 20px; }
.contact__who { margin-top: 24px; display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--blanco); }
.contact__who .av { box-shadow: 0 0 0 2px var(--b-55); }
.contact__alt { margin-top: 22px; display: grid; gap: 10px; }
.contact__alt a { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: var(--blanco); }
.contact__alt a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact__alt .chip-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--b-20); }
.contact__alt .ico { width: 18px; height: 18px; }
.contact__alt a:focus-visible { outline-color: var(--blanco); }
.cform { position: relative; z-index: 2; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-3); background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-2); }
.cform__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.cf { display: grid; gap: 6px; min-width: 0; }
.cf > label, .cf > legend { font-size: 13.5px; font-weight: 500; color: var(--negro); }
.cf__opt { margin-left: 4px; font-weight: 400; color: var(--gris); }
.cf--wide { grid-column: 1 / -1; }
fieldset.cf { display: block; margin: 0; padding: 0; border: 0; }
fieldset.cf > legend { margin-bottom: 8px; padding: 0; }
/* who runs the ads: four answers as pills, one tap each */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea-2); font-size: 15px; color: var(--tinta); white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.seg label:hover span { border-color: var(--tenue); }
.seg input:checked + span { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.seg input:focus-visible + span { outline: 2px solid var(--negro); outline-offset: 2px; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cform__ts:empty { display: none; }
.cform__ts { margin-top: 14px; }
.cform__foot .small a { color: var(--negro); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cform button[type="submit"]:disabled { opacity: .7; cursor: progress; }
.field { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--blanco); color: var(--negro); font: inherit; font-size: 16px; transition: border-color .2s, box-shadow .2s; }
.field::placeholder { color: var(--tenue); }
.field:hover { border-color: var(--tenue); }
.field:focus { outline: none; border-color: var(--negro); box-shadow: 0 0 0 4px var(--susurro); }
.field[aria-invalid="true"] { border-color: var(--rosa); box-shadow: 0 0 0 4px var(--rosa-claro); }
select.field { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%236B6B6B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.err { margin-top: 10px; font-size: 14px; color: var(--rosa-osc); min-height: 1.2em; }
.cform__foot { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cform__foot .small { flex: 1 1 200px; }
.cform__done { display: grid; gap: 14px; justify-items: start; }
.cform__done:focus { outline: none; }
.cform__done .notif__ic { width: 52px; height: 52px; border-radius: 15px; }
.cform__done .notif__ic .ico { width: 24px; height: 24px; }
.cform__q { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.026em; color: var(--negro); }
@media (max-width: 900px) { .contact__card { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 560px) { .cform__fields { grid-template-columns: minmax(0, 1fr); } }

/* ---------- subpage pieces ---------- */
.head--flush { margin-bottom: 0; }
.prow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pmini { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .3s, transform .4s var(--ease); }
.pmini:hover { box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); transform: translateY(-2px); }
.pmini > .ico { margin-left: auto; width: 18px; height: 18px; color: var(--gris); transition: transform .3s var(--ease), color .2s; }
.pmini:hover > .ico { transform: translateX(3px); color: var(--negro); }
.pmini__t { display: block; font-size: 16px; font-weight: 500; color: var(--negro); }
.pmini__d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--gris); }
.prow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .prow { grid-template-columns: minmax(0, 1fr); } }

.note-band { display: flex; gap: 20px; align-items: flex-start; margin-top: 16px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-3); background: var(--rosa-claro); }
.note-band--azul { background: var(--susurro); }
.note-band__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--blanco); color: var(--rosa); }
.note-band--azul .note-band__ic { color: var(--cielo-osc); }
.note-band p { margin-top: 8px; color: var(--tinta); max-width: 72ch; }

.float { position: absolute; z-index: 3; }
.float--tl { left: 0; top: 10%; }
.float--br { right: 0; bottom: 12%; }
.hero .float--tl { left: -2%; }
.hero .float--br { right: -2%; }
.hero .float--low { bottom: -2%; }

.adstack { position: relative; width: 360px; height: 480px; }
.adstack .ad { position: absolute; width: 268px; }
.adstack__back { left: 0; top: 0; transform: rotate(-7deg); }
.adstack__front { right: 0; bottom: 0; transform: rotate(3deg); }
.sector-vis { position: relative; width: 100%; display: grid; place-items: center; padding: 20px 0; }
.sector-vis .ad { width: 290px; transform: rotate(2deg); }
.sector-vis .float--tl { top: -2%; left: 2%; }
.sector-vis .float--br { bottom: 0; right: 0; }

.hero .phone { width: min(268px, calc((84svh - var(--nav-h) - 110px) * 9 / 18.6)); }
.phone .msg { font-size: 12.5px; }
.phone .msg--sys { font-size: 11.5px; }
.phone--video .phone__scr { background: var(--negro); }
.phone__video { width: 100%; height: 100%; object-fit: cover; }
.float-img { position: absolute; z-index: 1; left: 4%; top: 12%; width: 170px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; border: 4px solid var(--blanco); box-shadow: var(--sombra-2); transform: rotate(-7deg); }

.wa--karum .wa__av { background: var(--rosa-claro); color: var(--rosa); }
.wa__av .ico { width: 18px; height: 18px; fill: currentColor; }
.avic { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.chan--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chan__c--rosa { background: var(--rosa-claro); }
.chan__c--azul { background: var(--susurro); }
@media (max-width: 760px) { .chan--3 { grid-template-columns: minmax(0, 1fr); } }

.receipt { width: min(400px, 100%); padding: 22px; border-radius: 22px; background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-cielo); text-align: left; }
.receipt__h { font-size: 13px; color: var(--gris); margin-bottom: 6px; }
.receipt__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--linea-2); font-size: 13px; color: var(--gris); line-height: 1.4; }
.receipt__row span b { display: block; font-size: 15px; font-weight: 500; color: var(--negro); }
.receipt__row > b { font-size: 18px; font-weight: 400; letter-spacing: -.02em; color: var(--negro); white-space: nowrap; }
.receipt__row--muted > b { color: var(--rosa); }
.receipt__f { margin-top: 12px; font-size: 12px; color: var(--gris); }

@media (max-width: 900px) {
  .hero .phone { width: 250px; }
  .adstack { width: 300px; height: 420px; transform: scale(.92); }
  .adstack .ad { width: 230px; }
  .float-img { width: 120px; }
  .hero .float--tl { left: 0; }
  .hero .float--br { right: 0; }
}

/* ---------- creatives: where every ad starts (what already sells, our campaigns) and what comes out ---------- */
.wins { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .85fr) auto minmax(0, 1fr); gap: 16px; align-items: center; padding: clamp(18px, 2.5vw, 28px); border-radius: var(--r-3); background: var(--niebla); }
.wins__col { display: grid; gap: 10px; align-content: start; }
.wins__k { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--negro); }
.wins__k .ico, .wins__k .mark { width: 17px; height: 17px; }
.wins__src { margin-top: 4px; font-size: 12.5px; color: var(--gris); }
.wins__ad { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra-1); }
.wins__ad img { width: 52px; height: 52px; flex: none; object-fit: cover; border-radius: 9px; }
.wins__ad b { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--negro); }
.wins__ad--out img { filter: grayscale(1); }
.wins__mk { width: 52px; height: 52px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--rosa-claro); }
.wins__mk .mark { width: 26px; height: 26px; }
.wins__arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--rosa); box-shadow: var(--sombra-1); }
.wins__arrow .ico { width: 18px; height: 18px; }
.wins__chip { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--rosa-claro); font-size: 14.5px; color: var(--negro); }
.wins__chip b { font-size: 12px; font-weight: 500; color: var(--rosa); }
.wins__out { display: grid; gap: 10px; }
.wins__out .brand-ad { box-shadow: var(--sombra-2); }
.wins__meta { display: flex; flex-wrap: wrap; gap: 6px; }
/* it plays once in view: the ads that already sell, what makes them work, then your ad */
.js .wins__ad, .js .wins__chip, .js .wins__out, .js .wins__arrow { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.js .wins.on .wins__ad { opacity: 1; transform: none; transition-delay: calc(var(--i) * .15s); }
.js .wins.on .wins__ad--out { opacity: .45; }
.js .wins.on .wins__arrow { opacity: 1; transform: none; transition-delay: .75s; }
.js .wins.on .wins__arrow ~ .wins__arrow { transition-delay: 1.55s; }
.js .wins.on .wins__chip { opacity: 1; transform: none; transition-delay: calc(.9s + var(--i) * .15s); }
.js .wins.on .wins__out { opacity: 1; transform: none; transition-delay: 1.75s; }
@media (max-width: 980px) {
  .wins { grid-template-columns: minmax(0, 1fr); }
  .wins__arrow { justify-self: center; }
  .wins__arrow .ico { transform: rotate(90deg); }
}

/* ---------- resources: hub, comparisons and guides ---------- */
.phero--plain { padding-bottom: clamp(40px, 6vw, 72px); }
.rfeat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; border-radius: var(--r-3); background: var(--niebla); transition: box-shadow .3s var(--ease); }
.rfeat:hover { box-shadow: var(--sombra-2); }
.rfeat__img { min-height: 340px; overflow: hidden; }
.rfeat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.rfeat:hover .rfeat__img img { transform: scale(1.03); }
.rfeat__b { display: grid; gap: 14px; align-content: center; justify-items: start; padding: clamp(24px, 4vw, 56px); }
.rfeat__t { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.03em; color: var(--negro); }
.rfeat__d { max-width: 44ch; color: var(--gris); }
.rgrid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rcard { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .3s var(--ease), transform .4s var(--ease); }
a.rcard:hover { box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); transform: translateY(-2px); }
.rcard__img { aspect-ratio: 16 / 9; overflow: hidden; }
.rcard__img img { width: 100%; height: 100%; object-fit: cover; }
.rcard__b { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 18px 20px 22px; }
.rcard__t { font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--negro); }
.rcard__d { font-size: 14.5px; color: var(--gris); }
.rcard .tag { margin-top: 6px; }
.rcard--soon .rcard__img img { filter: grayscale(1); opacity: .6; }
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ccard { display: grid; gap: 8px; justify-items: start; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-3); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .3s var(--ease), transform .4s var(--ease); }
.ccard:hover { box-shadow: var(--sombra-2), 0 0 0 1px var(--linea); transform: translateY(-2px); }
.ccard__vs { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; color: var(--gris); }
.ccard__k { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--rosa-claro); }
.ccard__k .mark { width: 22px; height: 22px; }
.ccard__them { height: 40px; padding: 0 14px; border-radius: 12px; display: inline-flex; align-items: center; background: var(--niebla); font-size: 14px; font-weight: 500; color: var(--negro); }
.ccard__t { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--negro); }
.ccard__d { color: var(--gris); }
.ccard .link { margin-top: 8px; }

/* comparison pages */
.vsc { width: min(440px, 100%); padding: 18px 20px; border-radius: var(--r-3); background: var(--blanco); box-shadow: var(--sombra-2), 0 0 0 1px var(--linea); }
.vsc__head, .vsc__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 10px; align-items: center; }
.vsc__head { padding-bottom: 10px; font-size: 13px; font-weight: 500; color: var(--gris); }
.vsc__k { display: inline-flex; align-items: center; gap: 6px; color: var(--negro); }
.vsc__k .mark { width: 15px; height: 15px; }
.vsc__row { padding: 12px 0; border-top: 1px dashed var(--linea-2); font-size: 13px; color: var(--gris); line-height: 1.35; }
.vsc__row b { font-size: 14.5px; font-weight: 500; color: var(--rosa-osc); }
.vsc__head > *, .vsc__row > * { text-wrap: balance; }
@media (max-width: 600px) { .vsc__row b { font-size: 13.5px; } }
.vsc__f { margin-top: 10px; font-size: 12px; color: var(--gris); }
.cmp--2 { min-width: 560px; }
.cmp--2 tbody th { width: 52%; }
.when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.when__c { display: grid; gap: 18px; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-3); background: var(--niebla); }
.when__c--k { background: var(--rosa-claro); }
.when__c ul { display: grid; gap: 12px; }
.when__c li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--tinta); }
.when__c li .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--gris); }
.when__c--k li .ico { color: var(--rosa); }

/* a guide of the blog */
.post-hero { padding-top: clamp(24px, 4vw, 52px); }
.post-hero__tag { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gris); }
.post-hero__h { margin-top: 16px; max-width: 16em; font-size: clamp(40px, 5.4vw, 76px); color: var(--negro); }
.post-hero__dek { margin-top: 20px; max-width: 58ch; }
.post-hero__by { margin-top: 26px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--gris); }
.post-hero__by b { display: block; font-size: 15px; font-weight: 500; color: var(--negro); }
.post__cover { width: 100%; margin-top: clamp(28px, 4vw, 48px); aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r-3); }
.post__grid { display: grid; grid-template-columns: 240px minmax(0, 680px); gap: clamp(32px, 6vw, 96px); padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(64px, 8vw, 112px); }
/* the index and the card under it (the sales layer, below) stay in view together */
.post__side { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.post__toc { font-size: 14px; }
.post__toc p { margin-bottom: 12px; font-weight: 500; color: var(--negro); }
.post__toc ol { display: grid; gap: 2px; border-left: 1px solid var(--linea-2); }
.post__toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--gris); transition: color .2s, border-color .2s; }
.post__toc a:hover { color: var(--negro); border-left-color: var(--negro); }
.prose { font-size: 18px; line-height: 1.7; color: var(--tinta); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.2; font-weight: 400; letter-spacing: -.025em; color: var(--negro); scroll-margin-top: calc(var(--nav-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose ul:not(.checks) { display: grid; gap: .5em; padding-left: 1.2em; list-style: disc; }
.prose a:not(.btn) { color: var(--negro); text-decoration: underline; text-decoration-color: var(--rosa); text-underline-offset: 3px; }
.prose em { font-style: normal; color: var(--negro); font-weight: 500; }
.callout { padding: 20px 22px; border-radius: var(--r-2); background: var(--susurro); font-size: 16.5px; }
.callout b { display: block; margin-bottom: 4px; color: var(--cielo-osc); }
.post__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 24px; border-radius: var(--r-2); background: var(--rosa-claro); font-size: 16px; }
.post__cta b { font-size: 18px; font-weight: 500; color: var(--negro); }
.post__cta p { margin-top: 4px; max-width: 46ch; color: var(--tinta); }
/* SEO articles (posts.mjs): the short answer, h3 steps, numbered lists, tables, prompts and the author */
.post__answer { padding: 22px 24px; border-radius: var(--r-2); background: var(--niebla); font-size: 19px; line-height: 1.6; color: var(--negro); }
.post__answer b { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--rosa-osc); }
.prose h3 { margin-top: 1.8em; font-size: 21px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--negro); }
.prose ol { display: grid; gap: .6em; padding-left: 1.4em; list-style: decimal; }
.prose ol li::marker { color: var(--rosa); font-weight: 500; }
/* legal pages: the texts of www.karum.ai in the article column, with the three of them one tap apart */
.legal__head { padding-top: clamp(36px, 5vw, 72px); }
.legal__head .h1 { font-size: clamp(38px, 4.6vw, 64px); color: var(--negro); }
.legal__nav { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.legal__nav a { padding: 8px 14px; border-radius: 999px; background: var(--niebla); font-size: 14.5px; color: var(--tinta); transition: background-color .2s, color .2s; }
.legal__nav a:hover { background: var(--linea); }
.legal__nav a[aria-current="page"] { background: var(--negro); color: var(--blanco); }
.legal__nav a:focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }
.legal__body { max-width: 720px; padding: clamp(36px, 5vw, 64px) 0 clamp(64px, 8vw, 112px); font-size: 17px; }
.legal__body h2 { font-size: 23px; font-weight: 500; letter-spacing: -.015em; }
.legal__body h3 { font-size: 18px; }
.tbl { overflow-x: auto; border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--linea); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.tbl th, .tbl td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.tbl thead th { font-size: 13.5px; font-weight: 500; color: var(--gris); background: var(--niebla); white-space: nowrap; }
.tbl tbody th { font-weight: 500; color: var(--negro); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.prompt { padding: 16px 18px 18px; border-radius: var(--r-2); background: var(--susurro); }
.prompt__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prompt__h b { font-size: 14px; font-weight: 500; color: var(--cielo-osc); }
.prompt__copy { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--blanco); font: inherit; font-size: 13px; color: var(--negro); cursor: pointer; box-shadow: 0 0 0 1px var(--linea); transition: box-shadow .2s; }
.prompt__copy:hover { box-shadow: 0 0 0 1px var(--linea-2); }
.prompt__copy:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
.prompt__t { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--tinta); }
.post__author { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 2.4em; padding-top: 28px; border-top: 1px solid var(--linea); }
.post__author .av { width: 56px; height: 56px; }
.post__author b { display: block; font-size: 16px; font-weight: 500; color: var(--negro); }
.post__author span { font-size: 14px; color: var(--gris); }
.post__author p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--tinta); }
@media (max-width: 560px) { .tbl table { min-width: 520px; } .post__answer { font-size: 17.5px; padding: 18px 20px; } }
/* Articles whose photos are vertical (UGC ads): the picture sits beside the title instead of a 21:9 cover */
.post-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.post-hero--side .post-hero__h { font-size: clamp(38px, 4.6vw, 66px); }
.post-hero__media { position: relative; margin: 0; }
.post-hero__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-3); }
.post-hero__media--stack { aspect-ratio: 4 / 5; }
.post-hero__grid--icon { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.post-hero__media--icon img { height: auto; aspect-ratio: 1 / 1; }
.post__author--plain { grid-template-columns: minmax(0, 1fr); }
.post-hero__media--stack img { position: absolute; width: 62%; aspect-ratio: 9 / 16; border-radius: var(--r-2); box-shadow: var(--sombra-2); }
.post-hero__media--stack img:nth-child(1) { left: 0; top: 9%; transform: rotate(-6deg); }
.post-hero__media--stack img:nth-child(2) { right: 0; top: 5%; transform: rotate(5deg); }
.post-hero__media--stack img:nth-child(3) { left: 19%; top: 0; z-index: 1; }
.post-hero__chip { position: absolute; left: 50%; bottom: 15%; z-index: 2; transform: translateX(-50%); white-space: nowrap; box-shadow: var(--sombra-1); }
@media (max-width: 900px) {
  .post-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .post-hero__media { width: 100%; max-width: 400px; }
  .post-hero__media--stack { max-width: 300px; justify-self: center; }
  .post-hero__media--icon { display: none; }
}

/* careers */
.hire { width: min(380px, 100%); display: grid; gap: 14px; justify-items: start; padding: 22px 24px; border-radius: var(--r-3); background: var(--blanco); box-shadow: var(--sombra-2), 0 0 0 1px var(--linea); }
.hire__n { font-size: 14.5px; color: var(--gris); }
.hire__n b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--negro); }
.roles { display: grid; gap: 12px; }
.role { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r-3); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea); }
.role__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.role__h .h3 { margin-top: 10px; font-size: clamp(24px, 2.4vw, 30px); }
.role__lead { max-width: 70ch; font-size: 17px; color: var(--tinta); }
.role__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.role__k { font-size: 14px; font-weight: 500; color: var(--negro); }
.role__note { margin-top: 14px; }
.flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
  .rfeat { grid-template-columns: minmax(0, 1fr); }
  .rfeat__img { min-height: 220px; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post__grid { grid-template-columns: minmax(0, 1fr); }
  .post__side { position: static; }
  .flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rgrid, .cgrid, .when, .role__cols { grid-template-columns: minmax(0, 1fr); }
  .post__cover { aspect-ratio: 4 / 3; }
  .prose { font-size: 17px; }
  .flow--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- blog: the sales layer (posts.mjs, approved 2026-11-06) ----------
   A banner like the home hero under the short answer (.ppromo), the article's call to action drawn as «Cómo lo hacemos
   en Karum» (.pkarum), a card under the index on desktop (.tocpromo) and, on phones, the index folded into one line
   (.toc__btn) and a bar at the bottom (.mbar). Short labels stay on one line from a 360px phone up: when a box gets
   narrow it changes layout, the type never shrinks. Then the figures drawn inside some articles (.kfig). */
.prose .ppromo {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-areas: "copy feed" "cta feed"; gap: 0 26px; align-items: center; margin-top: 1.6em; padding: 30px 28px 28px 30px;
  border-radius: 24px; background: var(--cielo-grad); color: var(--blanco); font-size: 16px; line-height: 1.5;
}
.ppromo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 82% 45%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%); }
/* the faint circle and cross of the hero's drawing, behind the notifications */
.ppromo__guides {
  position: absolute; z-index: -1; right: -24px; top: 50%; width: 330px; height: 330px; translate: 0 -50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) center / 100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) center / 1px 100% no-repeat;
}
.ppromo__copy { grid-area: copy; }
.ppromo__cta { grid-area: cta; }
.ppromo__feed { grid-area: feed; display: grid; gap: 10px; }
.ppromo__k { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--b-90); }
.ppromo__av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--b-20); }
.ppromo__t { margin: 14px 0 0; font-size: 25px; line-height: 1.22; font-weight: 500; letter-spacing: -.02em; color: var(--blanco); text-wrap: balance; }
.ppromo__l { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--b-90); }
.ppromo__actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.prose .ppromo .ppromo__more { font-size: 14.5px; font-weight: 500; color: var(--blanco); text-decoration: underline; text-decoration-color: var(--b-55); text-underline-offset: 4px; white-space: nowrap; }
.prose .ppromo .ppromo__more:hover { text-decoration-color: var(--blanco); }
.ppromo :focus-visible { outline-color: var(--blanco); }
.ppromo .btn, .pkarum .btn { height: 44px; padding: 0 18px; font-size: 15px; }
.ppromo .btn--rosa { box-shadow: var(--sombra-cielo); }
.ppromo__fine { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--b-75); }
.ppromo__fine span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ppromo__fine .ico { width: 14px; height: 14px; }
.ppromo .notif { width: 100%; max-width: none; gap: 10px; padding: 10px 12px 10px 10px; border-radius: 14px; }
.ppromo .notif__ic { width: 34px; height: 34px; border-radius: 10px; }
.ppromo .notif__ic .ico { width: 17px; height: 17px; }
.ppromo .notif__t { font-size: 13.5px; white-space: nowrap; }
.ppromo .notif__s { font-size: 12px; white-space: nowrap; }
/* the three notifications arrive one after the other once the banner is in view (.rv.in) */
.js .ppromo .notif { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .5s var(--ease), transform .8s var(--ease); transition-delay: .6s; }
.js .ppromo .notif:nth-child(2) { transition-delay: 1.1s; }
.js .ppromo .notif:nth-child(3) { transition-delay: 1.6s; }
.js .ppromo.in .notif { opacity: 1; transform: none; }

.prose .pkarum { container-type: inline-size; margin-top: 2em; padding: 28px; border-radius: 24px; background: var(--blanco); box-shadow: var(--sombra-1), 0 0 0 1px var(--linea); font-size: 15px; line-height: 1.5; }
.pkarum__k { margin: 0; font-size: 13px; font-weight: 500; color: var(--rosa); }
.pkarum__t { margin: 4px 0 0; font-size: 22px; line-height: 1.28; font-weight: 500; letter-spacing: -.015em; color: var(--negro); text-wrap: balance; }
.pkarum__l { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--tinta); }
.prose .pkarum .pkarum__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.pkarum__steps li { display: grid; align-content: start; gap: 2px; padding: 16px 14px; border-radius: 16px; background: var(--niebla); }
.pkarum__steps .picon { width: 34px; height: 34px; margin-bottom: 10px; color: var(--tenue); }
.pkarum__steps b { font-size: 14.5px; font-weight: 500; color: var(--negro); white-space: nowrap; }
.pkarum__steps span { font-size: 13px; color: var(--gris); }
.pkarum__plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.pkarum__plans p { margin: 0; display: flex; align-items: baseline; gap: 2px 10px; padding: 14px 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--linea-2); }
.pkarum__plans b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--negro); white-space: nowrap; }
.pkarum__plans small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.pkarum__plans span { font-size: 13.5px; color: var(--tinta); white-space: nowrap; }
.pkarum__fine { margin: 14px 0 0; font-size: 13px; color: var(--gris); }
.pkarum__actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
/* narrower blocks: the steps become rows with the icon beside them, and each plan puts its name under the price */
@container (max-width: 590px) {
  .prose .pkarum .pkarum__steps { grid-template-columns: minmax(0, 1fr); }
  .pkarum__steps li { grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; }
  .pkarum__steps .picon { grid-row: span 2; margin: 2px 0 0; }
  .pkarum__plans p { flex-direction: column; }
}
@container (max-width: 420px) { .pkarum__plans { grid-template-columns: minmax(0, 1fr); } .pkarum__plans p { flex-direction: row; flex-wrap: wrap; } }

/* the card under the index, only when both fit on the screen (v6.js marks the column .is-tall when they do not) */
.tocpromo { display: grid; gap: 4px; margin-top: 28px; padding: 18px; border-radius: 18px; background: var(--cielo-grad); color: var(--blanco); box-shadow: var(--sombra-1); }
.tocpromo__av { width: 30px; height: 30px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--b-20); }
.tocpromo b { font-size: 15px; font-weight: 500; line-height: 1.3; }
.tocpromo > span:not([class]) { font-size: 13px; line-height: 1.45; color: var(--b-90); }
.tocpromo__go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-top: 12px; padding: 0 14px; border-radius: 999px; background: var(--rosa); font-size: 13.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--sombra-cielo); transition: background-color .2s; }
.tocpromo__go .ico { width: 15px; height: 15px; }
.tocpromo:hover .tocpromo__go { background: var(--rosa-osc); }
.post__side.is-tall .tocpromo { display: none; }

/* phones and tablets: the index folds into one line. The button is in the page; the list hides only with the script,
   so without it the index reads as before */
.toc__btn { display: none; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--niebla); font: inherit; font-size: 15px; font-weight: 500; color: var(--negro); text-align: left; cursor: pointer; }
.toc__btn span { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--gris); white-space: nowrap; }
.toc__btn .ico { width: 16px; height: 16px; rotate: 90deg; transition: rotate .3s var(--ease); }
.toc__btn[aria-expanded="true"] .ico { rotate: -90deg; }

/* phones and tablets: a bar with the button, between the banner and the closing call to action (v6.js adds .on).
   Hidden, it leaves the focus order; it never sits over the open menu or the cookie banner, which CookieConsent
   announces with a class on <html> */
.mbar {
  position: fixed; z-index: 58; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 16px; border-radius: 18px; background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sombra-2), 0 0 0 1px var(--linea);
  transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.mbar.on { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
.mmenu[data-open] ~ main .mbar.on, .show--consent .mbar.on, .show--preferences .mbar.on {
  transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.mbar__t { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mbar__t b { font-size: 14px; font-weight: 500; color: var(--negro); white-space: nowrap; }
.mbar__t span { font-size: 12px; color: var(--gris); white-space: nowrap; }
.mbar .btn { flex: none; }
.mbar__x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--gris); cursor: pointer; }
.mbar__x .ico { width: 16px; height: 16px; }
.kx path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

@media (min-width: 981px) { .mbar { display: none; } }
@media (max-width: 980px) {
  .tocpromo { display: none; }
  .js .post__toc > p { display: none; }
  .js .toc__btn { display: flex; }
  .js .toc__btn + ol { margin-top: 12px; }
  .js .toc__btn[aria-expanded="false"] + ol { display: none; }
}
/* the banner's copy needs some 290px beside the notifications, so below 640px it goes into one column */
@media (max-width: 640px) {
  .prose .ppromo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "feed" "cta"; padding: 24px 20px 22px; border-radius: 20px; }
  .ppromo__t { font-size: 22px; }
  .ppromo__feed { margin-top: 20px; }
  .ppromo__guides { right: -110px; top: 62%; }
  .ppromo .btn--rosa { width: 100%; }
  .ppromo__actions { justify-content: center; gap: 14px; }
}
@media (max-width: 600px) {
  .prose .pkarum { padding: 22px 18px; border-radius: 20px; }
  .pkarum .btn { flex: 1; }
}

/* figures drawn with the site's own pieces (posts.mjs FIGURES): two columns on the covers' niebla, split by a thin
   guide with a rosa cross where it meets the line under the title and the one above the footnote */
.prose .kfig { position: relative; margin: 2.4em 0; padding: 26px 26px 24px; border-radius: 24px; background: var(--niebla); border: 1px solid var(--linea); font-size: 14px; line-height: 1.45; overflow: hidden; }
.kfig__head { position: relative; display: grid; gap: 3px; margin: 0 -26px 22px; padding: 0 26px 18px; border-bottom: 1px solid var(--linea); }
.kfig__k { font-size: 13px; font-weight: 500; color: var(--rosa); }
.kfig__t { font-size: 21px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--negro); }
.kfig__cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 52px; }
.kfig__cols::before { content: ""; position: absolute; left: 50%; top: -22px; bottom: -24px; border-left: 1px solid var(--linea); }
.kfig--ad .kfig__cols::before { bottom: -18px; }
.kfig__head::after, .kfig__foot::before, .kfig--reply .kfig__cols::after {
  content: ""; position: absolute; left: 50%; width: 13px; height: 13px; margin-left: -6px;
  background: linear-gradient(var(--rosa), var(--rosa)) center / 1.4px 100% no-repeat, linear-gradient(var(--rosa), var(--rosa)) center / 100% 1.4px no-repeat;
}
.kfig__head::after { bottom: -6px; }
.kfig__foot::before { top: -6px; }
.kfig--reply .kfig__cols::after { bottom: -10px; }
.kfig__col { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kfig__lh { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; font-weight: 500; color: var(--negro); }
.kfig__lh .picon { width: 30px; height: 30px; color: var(--tenue); }
.kfig__chat { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.kfig .msg { max-width: 92%; font-size: 13.5px; margin: 0; }
.kfig__gap { align-self: stretch; display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: 12px; color: var(--gris); white-space: nowrap; }
.kfig__gap::before, .kfig__gap::after { content: ""; flex: 1; border-top: 1px dashed var(--linea-2); }
.kfig__end { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--linea-2); font-size: 14px; font-weight: 500; }
.kfig__end .ico { width: 16px; height: 16px; }
.kfig__end--lost { color: var(--gris); }
.kfig__end--won { color: var(--rosa-osc); }
.kfig .ad { width: 100%; box-shadow: var(--sombra-1); }
.kfig__adimg { position: relative; }
.kfig .ad__img { display: block; aspect-ratio: 16 / 10; }
.kfig__ad--no .ad__img { filter: grayscale(1); opacity: .5; }
.kfig__ad--no .ad__txt span { text-decoration: line-through; text-decoration-color: var(--rosa); text-decoration-thickness: 1.5px; color: var(--gris); }
.kfig__stamp { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--blanco); color: var(--negro); font-size: 12.5px; font-weight: 500; white-space: nowrap; box-shadow: var(--sombra-1); }
.kfig__stamp .ico { width: 14px; height: 14px; }
.kfig__stamp--si { background: var(--rosa); color: var(--blanco); }
.prose .kfig .kfig__list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.kfig__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--tinta); }
.kfig__list .ico { width: 16px; height: 16px; margin-top: 1px; }
.kfig__col--no .kfig__list .ico { color: var(--gris); }
.kfig__col--si .kfig__list .ico { color: var(--rosa); }
.kfig__foot { position: relative; margin: 18px -26px 0; padding: 14px 26px 0; border-top: 1px solid var(--linea); font-size: 12px; color: var(--gris); }
@media (max-width: 640px) {
  .prose .kfig { padding: 22px 18px 20px; border-radius: 20px; }
  .kfig__head { margin: 0 -18px 20px; padding: 0 18px 16px; }
  .kfig__foot { margin: 18px -18px 0; padding: 14px 18px 0; }
  .kfig__t { font-size: 19px; }
  .kfig__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kfig__cols::before, .kfig__cols::after, .kfig__head::after, .kfig__foot::before { display: none; }
  .kfig__col + .kfig__col { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linea); }
}
@media (prefers-reduced-motion: reduce) {
  .js .ppromo .notif { opacity: 1; transform: none; transition: none; }
  .mbar, .mbar.on, .mmenu[data-open] ~ main .mbar.on, .show--consent .mbar.on, .show--preferences .mbar.on, .toc__btn .ico { transition: none; }
}

/* ---------- test page: three ways to show why Karum is not just a chat ---------- */
.lab-intro { padding: clamp(24px, 4vw, 52px) 0 clamp(48px, 6vw, 72px); }
.lab-intro__h { max-width: 18em; }
.lab-intro .lead { margin-top: 16px; }
.lab-jump { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.lab-tag { display: inline-flex; margin-bottom: 26px; padding: 6px 12px; border-radius: 999px; background: var(--rosa-claro); color: var(--rosa-osc); font-size: 13.5px; font-weight: 500; }
.lab-sec { padding: clamp(72px, 9vw, 120px) 0; border-top: 1px solid var(--linea); }
.lab-sec--dark { border-top: 0; background: var(--negro); color: var(--b-75); }
.lab-sec--dark .lab-tag { background: var(--b-12); color: var(--blanco); }

/* the switch: "sin Karum" ( o ) "con Karum" */
.kswitch { display: inline-flex; align-items: center; gap: 12px; }
.kswitch__side { font-size: 15px; white-space: nowrap; color: var(--gris); transition: color .3s var(--ease); }
.kswitch__side:hover { color: var(--negro); }
[data-mode="sin"] .kswitch__side--sin, [data-mode="con"] .kswitch__side--con { color: var(--negro); font-weight: 500; }
.kswitch__btn { position: relative; width: 66px; height: 38px; flex: none; border-radius: 999px; background: var(--linea-2); transition: background-color .45s var(--ease); }
[data-mode="con"] .kswitch__btn { background: var(--rosa); }
.kswitch__knob { position: absolute; top: 4px; left: 4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); box-shadow: var(--sombra-1); transition: transform .5s var(--ease); }
[data-mode="con"] .kswitch__knob { transform: translateX(28px); }
.kswitch__knob .mark { width: 16px; height: 16px; opacity: 0; transition: opacity .3s var(--ease); }
[data-mode="con"] .kswitch__knob .mark { opacity: 1; }

/* two versions of the same spot, cross-faded by the switch */
.swap { display: inline-grid; min-width: 0; }
.swap > * { grid-area: 1 / 1; min-width: 0; transition: opacity .4s var(--ease) calc(var(--i, 0) * 90ms), transform .5s var(--ease) calc(var(--i, 0) * 90ms), visibility 0s; }
[data-mode="sin"] .swap > .is-con, [data-mode="con"] .swap > .is-sin { opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s linear .3s; }

/* A · the phone */
.pa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.pa .lead { margin-top: 18px; }
.pa .kswitch { margin-top: 32px; }
.pa__stats { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pa__stat { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--r-2); background: var(--niebla); }
.pa__v { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; color: var(--negro); }
.pa__v .is-con { color: var(--rosa); }
.pa__d { font-size: 14px; color: var(--gris); }
.pa__stage { display: grid; place-items: center; padding: clamp(28px, 4vw, 48px) 0; border-radius: var(--r-3); background: var(--cielo-grad); }
.pa .phone { width: min(300px, 82%); }
.inbox { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--blanco); }
.inbox__note { padding: 6px 10px 2px; }
.inbox__noteswap { display: grid; width: 100%; }
.inbox__noteswap > span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 14px; background: var(--niebla); font-size: 11.5px; line-height: 1.3; color: var(--tinta); }
.inbox__noteswap b { display: block; font-size: 12px; font-weight: 600; color: var(--negro); }
.inbox__ic { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--blanco); box-shadow: var(--sombra-1); }
.inbox__ic .mark { width: 15px; height: 15px; }
.inbox__ic--chat .ico { width: 15px; height: 15px; color: var(--gris); }
.inbox__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; }
.inbox__head b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--negro); }
.inbox__pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--wa-verde); color: var(--blanco); font-size: 10.5px; font-style: normal; font-weight: 500; }
.inbox__pill--ok { background: var(--niebla); color: var(--gris); }
.inbox__pill .ico, .inbox .done .ico { width: 13px; height: 13px; color: var(--wa-azul); }
.inbox__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--linea); }
.inbox__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--susurro); color: var(--cielo-osc); font-size: 11.5px; font-weight: 600; }
.inbox__b { min-width: 0; display: grid; gap: 1px; }
.inbox__b b { font-size: 13px; font-weight: 600; color: var(--negro); }
.inbox__m { display: grid; }
.inbox__m > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11.5px; color: var(--gris); }
.inbox__m .ico { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; color: var(--wa-azul); }
.inbox__meta { display: grid; justify-items: end; gap: 3px; font-size: 10px; color: var(--gris); }
.inbox .unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--wa-verde); color: var(--blanco); font-size: 10px; font-style: normal; font-weight: 600; }
.inbox .cita { padding: 2px 6px; border-radius: 6px; background: var(--rosa-claro); color: var(--rosa-osc); font-size: 9.5px; font-style: normal; font-weight: 500; white-space: nowrap; }
.inbox .done { font-style: normal; }
.inbox__meta .swap { justify-items: end; }

/* B · the same week, before and after */
.pb { --x: 50%; position: relative; overflow: hidden; border-radius: var(--r-3); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), var(--sombra-2); user-select: none; -webkit-user-select: none; }
.pb__con { position: absolute; inset: 0; background: var(--blanco); clip-path: inset(0 0 0 var(--x)); }
.wk { padding: clamp(16px, 2.4vw, 28px); }
.wk__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-bottom: 16px; }
.wk--con .wk__head { flex-direction: row-reverse; }
.wk__who { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--negro); }
.wk__who .ico, .wk__who .mark { width: 18px; height: 18px; }
.wk--sin .wk__who .ico { color: var(--gris); }
.wk__stats { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--gris); }
.wk__stats b { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--negro); }
.wk__stats b + b { margin-left: 12px; }
.wk--con .wk__stats b { color: var(--rosa); }
.wk__grid { display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); grid-template-rows: 26px repeat(6, 52px); gap: 5px; }
.wk__d { grid-row: 1; font-size: 12.5px; font-weight: 500; color: var(--gris); }
.wk__d:nth-child(2) { grid-column: 2; } .wk__d:nth-child(3) { grid-column: 3; } .wk__d:nth-child(4) { grid-column: 4; } .wk__d:nth-child(5) { grid-column: 5; } .wk__d:nth-child(6) { grid-column: 6; }
.wk__h { grid-column: 1; padding-top: 4px; font-size: 11px; color: var(--tenue); }
.ev { min-width: 0; overflow: hidden; padding: 7px 9px; border-radius: 9px; font-size: 12px; line-height: 1.25; }
.ev--task { background: var(--niebla); color: var(--gris); box-shadow: inset 0 0 0 1px var(--linea-2); }
.ev--visit { background: var(--rosa-claro); color: var(--rosa-osc); font-weight: 500; }
.ev--ok { background: var(--susurro); color: var(--cielo-osc); }
.pb__handle { position: absolute; inset: 0; transform: translateX(var(--x)); pointer-events: none; }
.pb__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--negro); }
.pb__handle span { position: absolute; top: 50%; left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; grid-auto-flow: column; place-content: center; background: var(--negro); color: var(--blanco); box-shadow: var(--sombra-2); }
.pb__handle .ico { width: 16px; height: 16px; }
.pb__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pb:has(.pb__range:focus-visible) .pb__handle span { outline: 2px solid var(--cielo-osc); outline-offset: 3px; }
.pb__note { margin-top: 14px; }

/* C · switch the engine on */
.pc { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pc .h2 { color: var(--blanco); }
.pc .h2 .t { color: var(--b-55); }
.pc .lead { margin-top: 18px; color: var(--b-75); }
.pc .kswitch { margin-top: 32px; }
:is(.pc, .pg) .kswitch__side { color: var(--b-55); }
:is(.pc, .pg) .kswitch__side:hover { color: var(--blanco); }
:is(.pc, .pg)[data-mode="sin"] .kswitch__side--sin, :is(.pc, .pg)[data-mode="con"] .kswitch__side--con { color: var(--blanco); }
:is(.pc, .pg) .kswitch__btn { background: var(--b-20); }
:is(.pc, .pg)[data-mode="con"] .kswitch__btn { background: var(--rosa); }
:is(.pc, .pg) :focus-visible { outline-color: var(--blanco); }
.pc__engine { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; justify-self: center; }
.kengine { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; color: var(--blanco); }
.kengine .klines { opacity: .55; transition: opacity .8s var(--ease); }
[data-mode="con"] .kengine .klines { opacity: .3; }
.kengine__loop { fill: none; stroke: var(--rosa); stroke-width: 2; stroke-dasharray: .012 .018; opacity: 0; transition: opacity .8s var(--ease) .6s; }
[data-mode="con"] .kengine__loop { opacity: .9; animation: loop 14s linear infinite; }
@keyframes loop { to { stroke-dashoffset: -1; } }
.kplan.kengine .kfill path { fill: var(--rosa); stroke: none; opacity: .1; transform-box: fill-box; transform-origin: center; scale: .92; transition: opacity .5s var(--ease), scale .7s var(--ease); }
[data-mode="con"] .kplan.kengine .kfill path { opacity: 1; scale: 1; transition-delay: calc(var(--g) * .28s); }
.pc__mod { position: absolute; z-index: 2; width: min(42%, 210px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--b-09); box-shadow: inset 0 0 0 1px var(--b-12); transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
[data-mode="con"] .pc__mod { background: var(--b-12); box-shadow: inset 0 0 0 1px var(--rosa); transition-delay: calc(var(--g) * .28s); }
.pc__mod--tl { top: 0; left: 0; }
.pc__mod--tr { top: 0; right: 0; }
.pc__mod--br { bottom: 0; right: 0; }
.pc__mod--bl { bottom: 0; left: 0; }
.pc__ic { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--b-12); color: var(--b-75); transition: background-color .5s var(--ease), color .5s var(--ease); }
[data-mode="con"] .pc__ic { background: var(--rosa); color: var(--blanco); transition-delay: calc(var(--g) * .28s); }
.pc__ic .ico { width: 18px; height: 18px; }
.pc__t { font-size: 13px; color: var(--b-55); }
.pc__v { font-size: 17px; font-weight: 500; color: var(--blanco); }
.pc__v .is-sin { color: var(--b-55); }
.pc__core { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; font-size: 13.5px; font-weight: 500; color: var(--b-55); pointer-events: none; }
[data-mode="con"] .pc__core { color: var(--blanco); }

@media (max-width: 900px) {
  .pa, .pc { grid-template-columns: minmax(0, 1fr); }
  .pc__engine { max-width: 460px; }
}
@media (max-width: 600px) {
  .pa__stats { grid-template-columns: minmax(0, 1fr); }
  .wk__grid { grid-template-columns: 38px repeat(3, minmax(0, 1fr)); grid-template-rows: 24px repeat(6, 50px); }
  .wk [data-d="3"], .wk [data-d="4"] { display: none; }
  .wk__head { flex-direction: column; align-items: flex-start; }
  .wk--con .wk__head { flex-direction: column; align-items: flex-end; }
  .pc__mod { width: 46%; padding: 9px 10px; gap: 0 8px; }
  .pc__ic { width: 28px; height: 28px; border-radius: 9px; }
  .pc__v { font-size: 14px; }
  .pc__t { font-size: 12px; }
}

/* D · the same question to a general chat and to Karum's ads expert */
.pd__qs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pd__qs button { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-2); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.pd__qs button:hover { box-shadow: inset 0 0 0 1px var(--negro); }
.pd__qs button[aria-selected="true"] { background: var(--negro); color: var(--blanco); box-shadow: none; }
.pd__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pd__col { display: flex; flex-direction: column; gap: 16px; min-height: 470px; padding: 20px; border-radius: var(--r-3); background: var(--niebla); }
.pd__col--k { background: var(--rosa-claro); }
.pd__who { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--negro); }
.pd__who .tag { margin-left: auto; }
.pd__av { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--blanco); box-shadow: var(--sombra-1); }
.pd__av .ico { width: 17px; height: 17px; color: var(--gris); }
.pd__av .mark { width: 18px; height: 18px; }
.pd__conv { display: none; flex-direction: column; gap: 10px; }
.pd[data-q="0"] [data-for="0"], .pd[data-q="1"] [data-for="1"], .pd[data-q="2"] [data-for="2"], .pd[data-q="3"] [data-for="3"] { display: flex; }
.bub { max-width: 90%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; }
.bub--me { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--negro); color: var(--blanco); }
.bub--ai, .bub--k { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-1); }
.bub--ai { color: var(--gris); }
.bub b { font-weight: 600; color: var(--negro); }
.js .pd__conv .bub--ai, .js .pd__conv .bub--k { animation: bubin .6s var(--ease) .35s both; }
@keyframes bubin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bub__media { display: flex; gap: 8px; margin-top: 10px; }
.bub__media img { width: 96px; height: 120px; object-fit: cover; border-radius: 10px; }
.bub__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bub__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--negro); color: var(--blanco); font-size: 13px; font-weight: 500; }
.bub__btn .ico { width: 14px; height: 14px; }
.bub__chans { display: inline-flex; gap: 4px; }
.bub__chans span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--niebla); color: var(--negro); }
.bub__chans .ico { width: 15px; height: 15px; }
.bub__bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 12px; }
.bub__bars i { width: 22px; height: calc(var(--h) * 100%); border-radius: 5px 5px 2px 2px; background: var(--linea-2); }
.bub__bars i.ok { background: var(--rosa); }
.bub__video { position: relative; display: block; width: 130px; margin-top: 10px; }
.bub__video img { width: 130px; height: 170px; object-fit: cover; border-radius: 12px; }
.bub__play { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--negro); box-shadow: var(--sombra-1); }
.bub__play .ico { width: 16px; height: 16px; }
.bub__video .tag { position: absolute; left: 8px; bottom: 8px; }
.bub__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.bub__kpis span { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--niebla); font-size: 12px; color: var(--gris); }
.bub__kpis b { font-size: 18px; font-weight: 500; letter-spacing: -.02em; color: var(--negro); }
.pd__note { margin-top: 14px; }

/* E · six tools around you, or one engine */
.pe__top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.pe__top .kswitch { margin-top: 24px; }
.pe__desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .62fr) minmax(0, 1fr); gap: 14px 0; }
.pe__win { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-height: 168px; padding: 16px 18px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), var(--sombra-1); transition: transform .9s var(--ease) calc(var(--i) * 70ms), background-color .5s var(--ease); }
[data-mode="sin"] .pe__win { background: var(--niebla); transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
/* each window reaches the hub with a line: dashed while you are the hub, solid rosa once it is Karum */
.pe__win::after { content: ""; position: absolute; top: 50%; width: 31%; height: 2px; background: linear-gradient(90deg, var(--rosa), var(--rosa)); transition: opacity .5s var(--ease); }
.pe__win--l::after { left: 100%; }
.pe__win--r::after { right: 100%; }
[data-mode="sin"] .pe__win::after { background: repeating-linear-gradient(90deg, var(--linea-2) 0 6px, transparent 6px 12px); }
.pe__bar { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--negro); }
.pe__ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--niebla); color: var(--negro); }
[data-mode="sin"] .pe__ic { background: var(--blanco); color: var(--gris); }
.pe__ic .ico { width: 16px; height: 16px; }
.pe__swap { width: 100%; }
.pe__body p { font-size: 14px; line-height: 1.45; color: var(--tinta); }
.pe__pain { color: var(--gris) !important; }
.pe__thumbs { display: flex; gap: 6px; margin-bottom: 8px; }
.pe__thumbs img { width: 54px; height: 54px; object-fit: cover; border-radius: 9px; }
.pe__live { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--negro) !important; }
.pe__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--wa-verde); box-shadow: 0 0 0 4px rgba(37, 211, 102, .18); }
.pe__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pe__kpis span { display: grid; padding: 8px 10px; border-radius: 10px; background: var(--niebla); font-size: 12px; color: var(--gris); }
.pe__kpis b { font-size: 20px; font-weight: 500; color: var(--negro); }
.pe__quote { font-weight: 500; color: var(--negro) !important; }
.pe__hub { position: relative; grid-column: 2; grid-row: 1 / 4; display: grid; place-items: center; text-align: center; }
/* the bus every window plugs into, with the hub in the middle */
.pe__hub::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 84px; bottom: 84px; width: 2px; margin-left: -1px; background: var(--rosa); }
[data-mode="sin"] .pe__hub::before { background: repeating-linear-gradient(180deg, var(--linea-2) 0 6px, transparent 6px 12px); }
.pe__hubswap { position: relative; padding: 12px 0; background: var(--blanco); }
.pe__hubswap > span { display: grid; justify-items: center; gap: 6px; }
.pe__core { width: 104px; height: 104px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; background: var(--rosa-claro); box-shadow: 0 0 0 10px var(--blanco), 0 0 0 11px var(--rosa); }
.pe__core .mark { width: 50px; height: 50px; }
.pe__core--you { background: var(--niebla); box-shadow: 0 0 0 10px var(--blanco), 0 0 0 11px var(--linea-2); }
.pe__core--you .ico { width: 40px; height: 40px; color: var(--gris); }
.pe__hub b { font-size: 17px; font-weight: 500; color: var(--negro); }
.pe__hub span span, .pe__hubswap > span > span:last-child { font-size: 14px; color: var(--gris); }

/* F · the brand Karum knows, and what it makes with it */
.pf { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pf .lead { margin-top: 18px; }
.pf .kswitch { margin-top: 32px; }
.pf__board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pf__kit { grid-row: span 3; display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--r-3); background: var(--niebla); }
.pf__h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--negro); }
.pf__h .ico { width: 16px; height: 16px; color: var(--rosa); }
.kit__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 40px; padding: 8px 10px; border-radius: 12px; background: var(--blanco); }
.kit__k { font-size: 12.5px; color: var(--gris); }
.kit__v { font-size: 13.5px; line-height: 1.35; color: var(--negro); }
.kit__v > * { transition-delay: calc(var(--i, 0) * 90ms); }
.kit__empty { display: inline-flex; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--linea-2); color: var(--tenue); font-size: 12.5px; }
.kit__logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #2F5D4A; color: #EADFCB; font-size: 12px; font-weight: 600; }
.kit__sw { display: flex; gap: 6px; }
.kit__sw i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea); }
.pf__out { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: var(--r-2); background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), var(--sombra-1); }
.pf__label { font-size: 12.5px; color: var(--gris); }
.pf__swap { width: 100%; }
.gen-ad { display: grid; gap: 8px; }
.gen-ad__img { height: 120px; border-radius: 10px; display: grid; place-items: center; background: var(--niebla); color: var(--tenue); font-size: 13px; }
.gen-ad__logo { justify-self: start; padding: 2px 8px; border-radius: 6px; border: 1px dashed var(--linea-2); color: var(--tenue); font-size: 12px; }
.gen-ad b { font-size: 14px; font-weight: 500; color: var(--gris); }
.brand-ad { display: block; overflow: hidden; border-radius: 10px; }
.brand-ad img { width: 100%; height: 132px; object-fit: cover; }
.brand-ad__band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 10px 12px; background: #2F5D4A; color: #EADFCB; }
.brand-ad__band .kit__logo { grid-row: span 2; background: #EADFCB; color: #2F5D4A; }
.brand-ad__band b { font-size: 14px; font-weight: 600; }
.brand-ad__band span:last-child { font-size: 12px; opacity: .85; }
.pf__msg { display: block; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--niebla); font-size: 13.5px; line-height: 1.45; color: var(--tinta); }
.pf__msg--gen { color: var(--gris); }

@media (max-width: 900px) {
  .pd__duo, .pe__top, .pf, .pf__board { grid-template-columns: minmax(0, 1fr); }
  .pd__col { min-height: 0; }
  .pe__desk { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pe__win { grid-column: 1 !important; grid-row: auto !important; }
  .pe__win::after { display: none; }
  .pe__hub { grid-column: 1; grid-row: 1; padding: 12px 0 20px; }
  .pe__hub::before { display: none; }
  [data-mode="sin"] .pe__win { transform: rotate(calc(var(--sr) / 2)); }
  .pf__kit { grid-row: auto; }
}
@media (max-width: 600px) {
  .bub__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd__qs { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--gut)); padding-right: var(--gut); scrollbar-width: none; }
  .pd__qs button { flex: none; }
}

/* G · the chaos you have with a chat, or the mark running as an engine with every task plugged into it */
.pg__top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.pg .h2 { color: var(--blanco); }
.pg .h2 .t { color: var(--b-55); }
.pg .lead { color: var(--b-75); }
.pg .kswitch { margin-top: 26px; }
.pg__stage { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(168px, auto)); gap: 18px 0; }
.pg__card { position: relative; z-index: 2; align-self: center; display: grid; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--b-09); box-shadow: inset 0 0 0 1px var(--b-12); transition: transform 1s var(--ease) calc(var(--i) * 70ms), background-color .6s var(--ease), box-shadow .6s var(--ease); }
.pg__card--l { margin-right: clamp(0px, 3vw, 40px); }
.pg__card--r { margin-left: clamp(0px, 3vw, 40px); }
[data-mode="sin"] .pg__card { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
[data-mode="con"] .pg__card { background: var(--b-12); box-shadow: inset 0 0 0 1px var(--b-20); }
/* the wires from the engine to each task (drawn by v6.js once the cards are in place), each with a dot running along */
.pg__wires { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
[data-mode="con"] .pg__wires { opacity: 1; transition-delay: .7s; }
.pg__wires path { fill: none; stroke: var(--b-20); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-io); }
[data-mode="con"] .pg__wires path { stroke-dashoffset: 0; transition-delay: calc(.7s + var(--i) * .08s); }
.pg__wires circle { fill: var(--rosa); }
.pg__h { display: flex; align-items: center; gap: 12px; }
.pg__ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--b-12); color: var(--b-75); transition: background-color .5s var(--ease), color .5s var(--ease); }
[data-mode="con"] .pg__ic { background: var(--rosa); color: var(--blanco); transition-delay: calc(var(--i) * 90ms + .4s); }
.pg__ic .ico { width: 19px; height: 19px; }
.pg__t { font-size: 16px; font-weight: 500; color: var(--blanco); }
.pg__body { width: 100%; }
.pg__v { font-size: 13.5px; line-height: 1.4; color: var(--b-75); }
.pg__you { display: inline-flex; margin-right: 4px; padding: 1px 8px; border-radius: 999px; background: var(--b-20); color: var(--blanco); font-size: 12px; font-weight: 500; }
.pg__show { display: grid; gap: 8px; }
.pg__thumbs { display: flex; gap: 6px; }
.pg__thumbs img { width: 46px; height: 58px; object-fit: cover; border-radius: 9px; }
.pg__ad { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: var(--b-09); }
.pg__ad img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; }
.pg__ad b { display: block; font-size: 13px; font-weight: 500; color: var(--blanco); }
.pg__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--b-75); }
.pg__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-verde); }
.pg__bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.pg__bars i { width: 16px; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: var(--b-20); }
.pg__bars i:last-child, .pg__bars i:nth-last-child(2) { background: var(--rosa); }
.pg__bub { align-self: start; padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: var(--blanco); color: var(--tinta); font-size: 12.5px; line-height: 1.35; }
.pg__bub .ico { width: 14px; height: 14px; margin-left: 2px; vertical-align: -3px; color: var(--wa-azul); }
.pg__slots { display: flex; flex-wrap: wrap; gap: 6px; }
.pg__slots span { padding: 5px 9px; border-radius: 8px; background: var(--rosa); color: var(--blanco); font-size: 12px; font-weight: 500; }
.pg__sale { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--blanco); }

.pg__core { grid-column: 2; grid-row: 1 / 4; position: relative; z-index: 1; display: grid; place-items: center; }
.pg__chat, .pg__engine { grid-area: 1 / 1; transition: opacity .6s var(--ease), transform .8s var(--ease), visibility 0s; }
[data-mode="con"] .pg__chat { opacity: 0; transform: scale(.9); visibility: hidden; transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s linear .4s; }
[data-mode="sin"] .pg__engine { opacity: 0; transform: scale(.8); visibility: hidden; transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s linear .4s; }
.pg__chat { width: min(300px, 100%); display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: var(--blanco); color: var(--tinta); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.pg__chat-h { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--negro); }
.pg__ais { display: flex; }
.ai { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); box-shadow: 0 0 0 2px var(--blanco), 0 0 0 3px var(--linea); }
.ai + .ai { margin-left: -6px; }
.ai .ico { width: 15px; height: 15px; }
.ai--openai { color: var(--negro); }
.ai--claude { color: var(--claude); }
.pg__chat .bub { max-width: 100%; font-size: 13.5px; }
.pg__chat-f { font-size: 13.5px; font-weight: 500; color: var(--rosa-osc); }
.pg__engine { position: relative; display: grid; justify-items: center; gap: 18px; }
/* the engine: the construction drawing, the mark assembling inside it and a dotted ring turning slowly round it */
.pg__mark { position: relative; width: clamp(200px, 21vw, 270px); aspect-ratio: 1; color: var(--b-75); }
.pg__mark .kengine { inset: 0; width: 100%; height: 100%; color: inherit; }
.pg--light[data-mode="con"] .kengine .klines { opacity: .6; }
.pg__engine-l { display: grid; gap: 4px; justify-items: center; text-align: center; font-size: 13px; color: var(--b-75); }
.pg__engine-l b { font-size: 18px; font-weight: 600; color: var(--blanco); }
.pg__sum { margin-top: clamp(32px, 4vw, 48px); display: flex; justify-content: center; text-align: center; font-size: 16px; color: var(--b-75); }
.pg__sumswap { justify-items: center; }
.pg__sumswap > span { text-wrap: balance; }
.pg__sum b { margin-right: 6px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--blanco); }
[data-mode="con"] .pg__sum b { color: var(--rosa); }

/* the engine on white (home, just before the prices): grey drawing and wires, the mark and the running dots in rosa */
.engine-sec.engine-sec--light { padding: clamp(80px, 10vw, 140px) 0; }
.pg--light .h2 { color: var(--negro); }
.pg--light .h2 .t { color: var(--tenue); }
.pg--light .lead { color: var(--gris); }
.pg--light .kswitch__side { color: var(--gris); }
.pg--light .kswitch__side:hover, .pg--light[data-mode="sin"] .kswitch__side--sin, .pg--light[data-mode="con"] .kswitch__side--con { color: var(--negro); }
.pg--light .kswitch__btn { background: var(--linea-2); }
.pg--light[data-mode="con"] .kswitch__btn { background: var(--rosa); }
.pg--light :focus-visible { outline-color: var(--cielo-osc); }
.pg--light .pg__card { background: var(--niebla); box-shadow: inset 0 0 0 1px var(--linea); }
.pg--light[data-mode="con"] .pg__card { background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), var(--sombra-1); }
.pg--light .pg__wires path { stroke: var(--linea-2); }
.pg--light .pg__mark { color: var(--gris); }
.pg--light .pg__ic { background: var(--blanco); color: var(--gris); }
.pg--light[data-mode="con"] .pg__ic { background: var(--rosa); color: var(--blanco); }
.pg--light .pg__t, .pg--light .pg__sale, .pg--light .pg__ad b, .pg--light .pg__engine-l b { color: var(--negro); }
.pg--light .pg__v, .pg--light .pg__live, .pg--light .pg__engine-l { color: var(--gris); }
.pg--light .pg__you { background: var(--negro); color: var(--blanco); }
.pg--light .pg__ad, .pg--light .pg__bub { background: var(--niebla); }
.pg--light .pg__bars i { background: var(--linea-2); }
.pg--light .pg__chat { box-shadow: 0 0 0 1px var(--linea), var(--sombra-2); }
.pg--light .pg__sum { color: var(--gris); }
.pg--light .pg__sum b { color: var(--negro); }
.pg--light[data-mode="con"] .pg__sum b { color: var(--rosa); }
/* the tools a task would have you use, small and grey in the card's top corner; only while you do it yourself */
.pg__card--apps .pg__h { padding-right: calc(var(--n, 3) * 23px + 4px); }
.pg__apps { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; color: var(--b-75); opacity: .7; transition: opacity .4s var(--ease); }
.pg--light .pg__apps { color: var(--gris); }
.pg__card:hover .pg__apps, .pg__apps:focus-within { opacity: 1; }
[data-mode="con"] .pg__apps { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.app { position: relative; width: 17px; height: 17px; display: grid; place-items: center; }
.app .ico { width: 17px; height: 17px; }
/* the marks that are not in the icon sprite are black PNGs, tinted with a filter to match: white here, --gris on light */
.app__img { width: 17px; height: 17px; filter: invert(1); opacity: .75; }
.pg--light .app__img { filter: invert(42%); opacity: 1; }
.app:focus { outline: none; }
.app:focus-visible { outline: 2px solid var(--cielo-osc); outline-offset: 3px; border-radius: 3px; }
.app::after { content: attr(data-name); position: absolute; right: -6px; bottom: calc(100% + 8px); padding: 3px 7px; border-radius: 6px; background: var(--negro); color: var(--blanco); font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.app:hover::after, .app:focus::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pg__apps, .app::after { transition: none; } }

@media (max-width: 980px) {
  .pg__top { grid-template-columns: minmax(0, 1fr); }
  .pg__stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 10px; }
  .pg__card { grid-column: 1 !important; grid-row: auto !important; margin: 0; }
  .pg__core { grid-column: 1; grid-row: 1; padding-bottom: 18px; }
  .pg__wires { display: none; }
  [data-mode="sin"] .pg__card { transform: translateX(calc(var(--sx) / 4)) rotate(calc(var(--sr) / 2.5)); }
}

/* ---------- Karum IA: the site's own chat, in the corner ---------- */
.kchat { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: grid; justify-items: end; gap: 12px; pointer-events: none; transition: opacity .25s, visibility 0s; }
.kchat > * { pointer-events: auto; }
/* out of the way while the phone menu is open, where it sat on the last rows and the button */
.mmenu[data-open] ~ .kchat { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.kchat__btn { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--negro); color: var(--blanco); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); transition: transform .3s var(--ease); }
.kchat__btn:hover { transform: scale(1.05); }
.kchat__btn-mk, .kchat__btn-x { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity .25s var(--ease), transform .35s var(--ease); }
.kchat__btn-mk .mark { width: 26px; height: 26px; }
.kchat__btn-x .ico { width: 22px; height: 22px; transform: rotate(45deg); }
.kchat__btn-x { opacity: 0; transform: rotate(-45deg); }
.kchat[data-open] .kchat__btn-mk { opacity: 0; transform: rotate(45deg) scale(.6); }
.kchat[data-open] .kchat__btn-x { opacity: 1; transform: none; }
.kchat__dot { position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--wa-verde); box-shadow: 0 0 0 3px var(--blanco); }
.kchat[data-open] .kchat__dot { display: none; }
.kchat__btn:focus-visible { outline: 2px solid var(--cielo-osc); outline-offset: 3px; }
.kchat__nudge { position: relative; display: flex; align-items: center; gap: 4px; max-width: 260px; padding: 12px 10px 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--blanco); color: var(--negro); font-size: 14.5px; box-shadow: var(--sombra-2), 0 0 0 1px var(--linea); cursor: pointer; animation: bubin .5s var(--ease); }
.kchat__nudge-x { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--gris); }
.kchat__nudge-x:hover { background: var(--niebla); color: var(--negro); }
.kchat__nudge-x .ico { width: 15px; height: 15px; transform: rotate(45deg); }
.kchat__panel { width: min(370px, calc(100vw - 32px)); height: min(560px, calc(100svh - 120px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--blanco); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45), 0 0 0 1px var(--linea); transform-origin: bottom right; animation: kopen .35s var(--ease); }
@keyframes kopen { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.kchat__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--negro); color: var(--blanco); }
.kchat__av { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--b-12); }
.kchat__av .mark { width: 20px; height: 20px; }
.kchat__head b { display: block; font-size: 15.5px; font-weight: 600; }
.kchat__st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--b-75); }
.kchat__st i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-verde); }
.kchat__x { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--b-75); }
.kchat__x:hover { background: var(--b-12); color: var(--blanco); }
.kchat__x .ico { width: 18px; height: 18px; transform: rotate(45deg); }
.kchat__x:focus-visible { outline-color: var(--blanco); }
.kchat__log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--niebla); overscroll-behavior: contain; }
.kmsg { display: grid; gap: 8px; max-width: 88%; animation: bubin .4s var(--ease); }
.kmsg p { padding: 10px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.kmsg--ai { justify-self: start; align-self: flex-start; }
.kmsg--ai p { border-bottom-left-radius: 5px; background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-1); }
.kmsg--me { align-self: flex-end; }
.kmsg--me p { border-bottom-right-radius: 5px; background: var(--negro); color: var(--blanco); }
.kmsg__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.kchip { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; background: var(--blanco); color: var(--negro); font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--linea-2); transition: box-shadow .2s, background-color .2s; }
.kchip:hover { box-shadow: inset 0 0 0 1px var(--negro); }
.kchip--link { background: var(--rosa-claro); color: var(--rosa-osc); box-shadow: none; font-weight: 500; }
.kchip--wa { background: var(--wa-verde); color: var(--blanco); box-shadow: none; font-weight: 500; }
.kmsg--typing p { display: inline-flex; gap: 4px; }
.kmsg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--tenue); animation: typing 1s ease-in-out infinite; }
.kmsg--typing i:nth-child(2) { animation-delay: .15s; }
.kmsg--typing i:nth-child(3) { animation-delay: .3s; }
.kchat__wa { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--linea); font-size: 13.5px; color: var(--tinta); transition: background-color .2s; }
.kchat__wa:hover { background: var(--niebla); }
.kchat__wa > .ico:first-child { width: 18px; height: 18px; color: var(--wa-verde); }
.kchat__wa > .ico:last-child { margin-left: auto; width: 15px; height: 15px; color: var(--gris); }
.kchat__wa b { font-weight: 500; color: var(--negro); }
.kchat__form { display: flex; gap: 8px; padding: 10px 12px 6px; }
.kchat__form input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linea-2); font: inherit; font-size: 14.5px; color: var(--negro); }
.kchat__form input:focus { outline: none; border-color: var(--negro); }
.kchat__form button { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--negro); color: var(--blanco); }
.kchat__form button .ico { width: 17px; height: 17px; }
.kchat__note { padding: 0 16px 10px; font-size: 11.5px; color: var(--tenue); }
@media (max-width: 600px) {
  .kchat { right: 12px; bottom: 12px; }
  .kchat__btn { width: 54px; height: 54px; }
  .kchat__panel { width: calc(100vw - 24px); height: min(70svh, 560px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .rv, .js [data-seq] > *, .js .cal__ev--new, .js .toast, .js .loopui__up { opacity: 1; transform: none; }
  .js .kplan path { stroke-dashoffset: 0; }
  .js .kplan .dot { opacity: 1; scale: 1; }
  .js .kplan.kmark .kfill path { opacity: 1; scale: 1; }
  .phero__vis { transform: none; }
  .js .wins__ad, .js .wins__chip, .js .wins__out, .js .wins__arrow { opacity: 1; transform: none; }
  .js .wins__ad--out { opacity: .45; }
  .js :is(.rv, [data-play], .dd, .mm) .picon__g { opacity: .4; }
  .js :is(.rv, [data-play], .dd, .mm) .picon__m > * { stroke-dashoffset: 0; }
  .js :is(.rv, [data-play], .dd, .mm) .picon__a > * { opacity: 1; scale: 1; }
  .marq__track, .brands__track { animation: none; }
  .cursor { display: none; }
  .hero { position: relative; top: 0; }
}

/* ---- cookie banner (CookieConsent, on the live site only): Karum's type, black pill buttons ---- */
#cc-main {
  --cc-font-family: var(--font);
  --cc-primary-color: var(--negro);
  --cc-secondary-color: var(--gris);
  --cc-modal-border-radius: var(--r-2);
  --cc-btn-border-radius: 999px;
  --cc-btn-primary-bg: var(--negro);
  --cc-btn-primary-hover-bg: var(--tinta);
  --cc-btn-secondary-bg: var(--blanco);
  --cc-btn-secondary-color: var(--negro);
  --cc-btn-secondary-border-color: var(--linea-2);
  --cc-btn-secondary-hover-bg: var(--blanco);
  --cc-btn-secondary-hover-color: var(--negro);
  --cc-btn-secondary-hover-border-color: var(--negro);
  --cc-link-color: var(--negro);
  --cc-toggle-on-bg: var(--negro);
}
#cc-main .cm__btn, #cc-main .pm__btn { font-weight: 500; }