/* =============================================================================
GENERATED FILE — DO NOT EDIT.
Built from css/index.css by tools/build-css.mjs. Edit the component files,
then run: node tools/build-css.mjs
============================================================================= */
/* ===== tokens.css ================================================== */
/* =============================================================================
KUENTA COMPONENTS — TOKENS
Single source of truth: color, type, spacing, radius, motion. Components must
reference these — never hard-code a color or a type size. To re-skin a site
(or a single city), override these in theme-override.css; the whole system
shifts together.
── BREAKPOINT CONTRACT ──────────────────────────────────────────────────
Mobile-first. There are exactly TWO breakpoints, used consistently:
• base phones (the default; design here first)
• @media (min-width: 600px) large phone / portrait tablet — multi-column
GRIDS go 2-up here (cards, stats). Single-
column components stay stacked.
• @media (min-width: 1024px) desktop — full layouts (hero/split 2-col,
grids to final column count, nav expands).
Tablets (768–1023) intentionally get the mobile layout (stacked + swipe
carousels) — it degrades gracefully and never breaks. Do not invent new
breakpoints in components.
============================================================================= */
:root {
/* === COLOR — brand ===================================================== */
--k-paper: #FFFFFF;
--k-canvas: #FBFDFB; /* page/section base. Standard value: guidelines/color-core.html declares
it, and the deck's slide surface is the same hex. The green here is +2
on one channel, i.e. imperceptible, so it is NOT the clinical read.
Cards stay --k-paper (#FFF) so they pop. */
--k-ink: #0A0A0A;
--k-muted: #5B635D; /* body gray — lightened one notch for a more refined read */
--k-body: #3C4642; /* lead/intro copy — darker than muted, matches the deck's .lead */
--k-deep: #2C6355;
--k-deep-2: #0F2A24;
--k-jade: #09D3A0;
--k-jade-press: #0BC295;
--k-mint: #F2FBF7;
/* Escalera de tintes (50 = mint). Todo stop de gradiente-wash vive aquí. */
--k-tint-100: #EFFAF4;
--k-tint-200: #D8F0E6;
--k-tint-300: #C6E9D8;
--k-tint-400: #9BD6BD;
/* === COLOR — derived tints (theme these, not raw rgba in components) === */
--k-jade-soft: rgba(9, 211, 160, 0.14); /* pills, soft fills on light */
--k-line: rgba(44, 99, 85, 0.12); /* hairline border on light */
--k-line-strong: rgba(44, 99, 85, 0.28); /* hover/emphasis border on light */
--k-line-hover: rgba(11, 211, 160, 0.55); /* jade border on card hover — was 3 loose rgbas */
--k-mint-line: rgba(44, 99, 85, 0.16);
/* --k-scrim removed: .k-tile's overlay is a 3-stop gradient (transparent →
.30 → .82), which a single flat value cannot express. Nothing referenced it. */
/* === COLOR — per-product card gradients (tonal-green ladder) =========== */
--k-prod-cobros: linear-gradient(160deg, #2C6355 0%, #0F2A24 100%); /* deep */
--k-prod-credito: linear-gradient(160deg, #2A9B74 0%, #13684E 100%); /* mid */
/* The two pale steps go NEUTRAL. A big pale-green panel is what read as clinical;
cobros/crédito keep the deep greens because dark green is the brand anchor. */
--k-prod-software: linear-gradient(160deg, #E9EBE9 0%, #DFE3E1 100%); /* pale neutral */
--k-prod-seguros: linear-gradient(160deg, #DFE3E1 0%, #C9D3CE 100%); /* light neutral */
/* === COLOR — semantic surfaces ========================================= */
--k-surface: var(--k-canvas);
--k-surface-alt: linear-gradient(180deg, var(--k-tint-200) 0%, var(--k-tint-100) 100%); /* livelier green wash — a real beat vs canvas */
--k-surface-gray: #F5F6F4; /* clean modern off-white beat (Shopify/Square), flat — no grain */
--k-surface-sunken: #F1EFE8; /* warm "inert/dead" fill — e.g. the one-time-sale panel in Cómo ganas */
/* Dead-state tonal ladder (the "una venta normal" panel) — kept as tokens so the
grayed/inert look stays one system, not four loose hexes. */
--k-sunken-ink: #6E6959; /* headline on the dead panel — 4.77:1, valor del deck */
--k-sunken-line: #D3CFC4; /* dashed empty-coin border */
--k-sunken-coin: #BCB6A8; /* the single paid coin */
--k-sunken-label: #ACA695; /* month labels under the dead coins */
--k-sunken-disabled: #8A8475; /* disabled button label — exempt from contrast (WCAG) */
--k-jade-deep: #1D9E75; /* solid mid-jade for fills/bars on light (the brighter --k-jade is for accents) */
--k-jade-ink: #15805E; /* texto jade <18px sobre claro (4.80:1); espejo de jadeInk del deck */
--k-deep-flat: #12402F; /* fallback plano del gradiente deep (impresión / PowerPoint) */
/* Dark sections get a jade light-glow + a richer (less gray) green — Shopify's
"dark base + bright pop" energy. Glow sits top-right so white text stays readable. */
--k-surface-deep: radial-gradient(115% 115% at 88% 6%, rgba(11, 211, 160, 0.24) 0%, rgba(11, 211, 160, 0) 46%), linear-gradient(155deg, #15553F 0%, #0B201B 100%);
/* === COLOR — text + fills on deep-green surfaces ======================= */
--k-on-deep: #FFFFFF;
--k-on-deep-soft: rgba(255, 255, 255, 0.85);
--k-on-deep-faint: rgba(255, 255, 255, 0.42); /* SOLO rellenos no informativos, nunca texto */
--k-on-deep-line: rgba(255, 255, 255, 0.16);
--k-on-deep-fill: rgba(255, 255, 255, 0.12); /* translucent pills/chips on deep */
--k-on-deep-glass: rgba(255, 255, 255, 0.10); /* pill-rail track */
--k-on-deep-gov: rgba(255, 255, 255, 0.72); /* texto informativo pequeño sobre deep (5.38:1) */
/* === COLOR — DECK / PRINT-FLAT SET =====================================
Promoted from the merchant deck (Sales material/wireframes.html), which had
been inventing these eleven hexes outside the system. Fable ruling
2026-07-29: the deck keeps authority over DECISIONS (patterns, layouts, the
competitor-verified moves) but not over VALUES. So the values move here and
the deck's appearance does not change at all.
Why they are solid rather than rgba like the --k-on-deep set above: the deck
is exported to PDF and PowerPoint, where alpha over a gradient is unreliable.
These are the flat equivalents. Prefer the rgba set on the web.
Law: no surface invents a hex. Enforced by tools/check-palette.mjs. */
--k-deep-border: #0B241D; /* border of a deep panel (deck .s.deep) */
--k-deep-well: #1B4636; /* image well ON deep */
--k-deep-circle: #1E4A3A; /* circle fill ON deep */
--k-deep-rule: #385F50; /* divider/rule ON deep */
--k-on-deep-flat: #DBE0DE; /* body text ON deep, flat (= on-deep-soft) */
--k-on-deep-flat-dim: #BCC4C1; /* footnote text ON deep, flat */
--k-faint: #8A948F; /* faint meta text on light (deck .src/.foot) */
--k-connector: #C1D2CC; /* neutral connector line between figures */
--k-line-flat: #C9D3CE; /* solid hairline (= --k-line, no alpha) */
--k-well-light: #E4E8E6; /* placeholder well on light */
--k-tint-object: #EAF3EF; /* pale green, objects UNDER 64px only */
--k-tint-box: #F7FBF9; /* pale green fill of one bordered box */
/* === COLOR — feedback ================================================== */
--k-error: #B0413E;
--k-error-soft: rgba(176, 65, 62, 0.12);
--k-warn: #96621F; /* advertencia — 5.2:1 sobre blanco, pasa 4.5 a cualquier tamaño */
--k-warn-soft: rgba(150, 98, 31, 0.12);
/* éxito = --k-jade-ink texto / --k-jade-soft fondo (no se inventa otro verde) */
/* RESERVADO (aún sin uso, a propósito): --k-warn, --k-warn-soft y la paleta de
gráficas. Los contrastes ya están verificados; no se borran ni se reinventan
cuando haga falta una advertencia o una gráfica. */
/* Gráficas: máximo 4 series, escalones de luminosidad distintos */
--k-chart-1: #1D9E75;
--k-chart-2: #2C6355;
--k-chart-3: #46818B; /* escalón azul-verde: 4.4:1, distinguible de 1 y 2 */
--k-chart-4: #6E6959;
--k-placeholder: rgba(74, 79, 75, 0.60);
/* === TYPE =============================================================== */
--k-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--k-fw-regular: 400;
--k-fw-medium: 500;
--k-fw-semi: 600;
--k-fw-bold: 700;
/* Fluid display + section headings (retune per breakpoint below). */
--k-fs-display: clamp(40px, 7.5vw, 64px);
--k-fs-hero: clamp(36px, 6.4vw, 72px); /* landing hero (aliados) — big but balanced, ~Shopify scale */
--k-fs-h2: clamp(30px, 5vw, 46px);
--k-fs-h3: clamp(20px, 2.2vw, 24px);
--k-fs-lead: clamp(17px, 1.2vw, 20px);
/* Fixed steps — every body/label size in the system maps to one of these. */
--k-fs-body: 16px; /* default body (→ 17 desktop) */
--k-fs-md: 17px; /* emphasized body */
--k-fs-sm: 15px; /* secondary copy (cards, steps, testimonials…) */
--k-fs-xs: 14px; /* meta, footer links, brand sublabel */
--k-fs-eyebrow: 13px; /* section eyebrow, form hints */
--k-fs-2xs: 12px; /* logo-strip eyebrow */
--k-fs-3xs: 11px; /* legal fine print */
--k-fs-cta: 16px; /* buttons — keeps every button identical */
--k-lh-display: 1.04;
--k-lh-tight: 1.1;
--k-lh-snug: 1.2;
--k-lh-normal: 1.5;
--k-lh-relaxed: 1.6;
--k-tr-display: -0.02em;
--k-tr-snug: -0.014em;
--k-tr-flat: -0.005em;
/* === SPACING =========================================================== */
--k-sp-xs: 8px;
--k-sp-sm: 12px;
--k-sp-md: 16px;
--k-sp-lg: 24px;
--k-sp-xl: 32px;
--k-sp-2xl: 48px;
--k-sp-3xl: 64px;
/* Per-section vertical padding = HALF the inter-section gap. Every section pads
itself top AND bottom by this, with no collapse hack, so the gap between any
two sections is 2× this (identical to the old rhythm) and colour boundaries
split breathing room evenly — no per-section spacing tweaks needed. */
--k-section-y: clamp(36px, 3vw + 16px, 64px);
--k-gap: clamp(16px, 2vw, 24px);
/* === LAYOUT ============================================================ */
--k-container: 1280px;
--k-pad: 24px;
--k-card-pad: clamp(24px, 2.4vw, 32px); /* pad canónico de tarjeta; escala base 4 (extremos = pasos) */
/* === RADIUS ============================================================ */
--k-r-sm: 12px;
--k-r-md: 16px;
--k-r-lg: 20px;
--k-r-xl: 24px;
--k-r-2xl: 28px;
--k-r-pill: 999px;
--k-r-image: 20px;
/* === MOTION ============================================================ */
--k-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--k-dur: 0.2s;
/* === ELEVATION (used sparingly — the system prefers borders) ===========
One coherent ladder. Light-surface UI shadows are green-tinted and subtle;
"float" shadows are darker, only for chips/mockups that hover over photos or
dark panels (where a tinted shadow would vanish). Same blur/opacity rhythm. */
--k-shadow-xs: 0 1px 3px rgba(16, 42, 36, 0.06); /* rest lift, clickable cards */
--k-shadow-sm: 0 4px 18px rgba(16, 42, 36, 0.06); /* sticky nav on light */
--k-shadow-md: 0 1px 2px rgba(16, 42, 36, 0.04), 0 10px 28px rgba(16, 42, 36, 0.07); /* raised cards */
--k-shadow-lg: 0 18px 44px rgba(15, 42, 36, 0.20); /* hero media image */
--k-shadow-float: 0 10px 24px rgba(0, 0, 0, 0.28); /* chips/tiles over imagery */
--k-shadow-float-lg: 0 28px 60px rgba(0, 0, 0, 0.42); /* device mockups */
/* === FIXED CHROME ====================================================== */
--k-nav-h: 64px;
}
@media (min-width: 1024px) {
:root {
--k-fs-body: 18px;
--k-fs-display: clamp(56px, 4vw, 68px);
--k-fs-h2: clamp(44px, 3.4vw, 60px);
--k-pad: 32px;
--k-r-image: 24px;
--k-nav-h: 72px;
}
}
/* ===== base.css ==================================================== */
/* =============================================================================
KUENTA COMPONENTS — BASE
Reset, document defaults, shared layout primitives (.k-container,
.k-section), accessibility helpers. Loaded right after tokens.css.
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--k-nav-h) + 12px); /* clear the sticky header on anchor jumps */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent; /* no gray flash on mobile tap */
}
body {
font-family: var(--k-font);
font-size: var(--k-fs-body);
line-height: var(--k-lh-normal);
color: var(--k-ink);
background: var(--k-canvas);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3, h4 {
font-weight: var(--k-fw-bold);
line-height: var(--k-lh-tight);
text-wrap: balance; /* even, no orphan words — headlines wrap like a designer set them */
}
/* Leads/body get widow control (last word never alone on its own line). */
p { text-wrap: pretty; }
/* Branded text selection — jade wash, deep-green ink. Reads on light and dark. */
::selection { background: var(--k-jade); color: var(--k-deep-2); }
/* Tabular figures on money/metric displays: digits share one width so amounts
align in columns and never jitter — the correct default for a payments brand. */
.k-stat__metric, .k-hero__chip-sub, .k-review__proof { font-variant-numeric: tabular-nums; }
:focus-visible {
outline: 2px solid var(--k-jade-deep);
outline-offset: 3px;
border-radius: 4px;
}
/* Sobre deep el anillo vuelve a jade brillante: ahí sí contrasta (4.5:1+). */
.k-section--deep :focus-visible,
.k-hero--deep :focus-visible,
.k-cta--deep :focus-visible { outline-color: var(--k-jade); }
/* === LAYOUT PRIMITIVES =================================================== */
.k-container {
width: 100%;
max-width: var(--k-container);
margin-inline: auto;
padding-inline: var(--k-pad);
}
.k-section {
padding-block: var(--k-section-y);
background: var(--k-surface);
color: var(--k-ink);
}
.k-section--alt { background: var(--k-surface-alt); }
/* Clean off-white inner-panel beat — flat and modern (Shopify/Square), no grain. */
.k-section--gray {
background-color: var(--k-surface-gray);
}
.k-section--deep { background: var(--k-surface-deep); color: var(--k-on-deep); }
/* Section rhythm: every section pads itself by HALF the gap (--k-section-y) on
top and bottom. The visible gap between two sections is the two halves added
together — one consistent value everywhere — and at a colour boundary each
section keeps its own breathing room. No collapse hack, no per-section tweaks. */
/* Soft jade "daylight" glow behind a hero/section — warm and human, NOT a tech
grid. Put on an absolutely-positioned child; the parent must be position:relative. */
.k-glow {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
/* The jade layer is gone: a 16% green wash across the top of a hero is exactly
the "clinical" read. What's left is a neutral vignette that gives the same
depth with no hue. */
background:
radial-gradient(80% 70% at 50% 6%, rgba(10,10,10,.035), transparent 60%),
radial-gradient(60% 45% at 50% 0%, rgba(10,10,10,.02), transparent 70%);
}
/* === ACCESSIBILITY ====================================================== */
.k-sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.k-skip-link {
position: absolute;
left: -9999px; top: auto;
}
.k-skip-link:focus {
position: fixed; left: 16px; top: 16px; z-index: 9999;
background: var(--k-ink); color: var(--k-paper);
padding: 10px 16px; border-radius: 8px; font-weight: var(--k-fw-bold);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ===== buttons.css ================================================= */
/* =============================================================================
KUENTA COMPONENTS — BUTTONS
Primary : deep-green pill on light surfaces; flips to jade on dark ones.
Secondary: outline pill — adapts to light or dark surface via currentColor.
Link : text + optional arrow, no chrome.
Block : full-width tap target (forms / bottom-of-page conversion only).
No glow, no decorative shadow. Subtle 1px hover lift on the primary.
============================================================================= */
.k-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 26px;
font-family: inherit;
font-size: var(--k-fs-cta, 16px);
font-weight: var(--k-fw-bold);
letter-spacing: var(--k-tr-flat);
line-height: 1;
white-space: nowrap;
border-radius: var(--k-r-pill);
transition: transform var(--k-dur) var(--k-ease),
background-color var(--k-dur) var(--k-ease),
border-color var(--k-dur) var(--k-ease),
color var(--k-dur) var(--k-ease);
}
.k-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* --- Primary -------------------------------------------------------------- */
/* Hierarchy by surface (Shopify pattern): a confident DEEP-GREEN pill on light
sections, flipping to the loud JADE pill on dark sections — so the bright
accent is reserved for the dark "energy" moments instead of firing everywhere. */
.k-btn--primary {
background: var(--k-deep);
color: var(--k-paper);
}
.k-btn--primary:hover { background: var(--k-deep-2); transform: translateY(-1px); }
.k-btn--primary:active { transform: translateY(0) scale(.97); }
/* On a dark surface the primary becomes the jade pill (the loud one). */
.k-section--deep .k-btn--primary,
.k-cta--deep .k-btn--primary,
.k-hero--deep .k-btn--primary,
.al-cta .k-btn--primary {
background: var(--k-jade);
color: var(--k-ink);
}
.k-section--deep .k-btn--primary:hover,
.k-cta--deep .k-btn--primary:hover,
.k-hero--deep .k-btn--primary:hover,
.al-cta .k-btn--primary:hover { background: var(--k-jade-press); }
/* --- Secondary (outline) — works on light and dark via currentColor ------- */
.k-btn--secondary {
background: transparent;
color: currentColor;
border: 1.5px solid currentColor;
}
.k-btn--secondary:hover { transform: translateY(-1px); }
.k-btn--secondary:active { transform: scale(.97); }
/* On a light surface, fill on hover for contrast */
.k-section:not(.k-section--deep) .k-btn--secondary:hover,
.k-btn--secondary.k-btn--on-light:hover {
background: var(--k-ink); color: var(--k-paper); border-color: var(--k-ink);
}
/* --- Link (text + arrow) -------------------------------------------------- */
.k-btn--link {
height: auto;
padding: 0;
border-radius: 0;
background: transparent;
color: var(--k-deep);
font-weight: var(--k-fw-semi);
}
.k-btn--link:hover {
color: var(--k-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.k-section--deep .k-btn--link { color: var(--k-jade); }
/* --- Estados: deshabilitado + foco ---------------------------------------- */
.k-btn:disabled,
.k-btn[aria-disabled="true"] {
background: var(--k-surface-sunken);
color: var(--k-sunken-disabled); /* deshabilitado: exento de contraste (WCAG) */
border-color: transparent;
pointer-events: none;
transform: none;
}
.k-btn:focus-visible { outline: 2px solid var(--k-jade-deep); outline-offset: 3px; }
.k-section--deep .k-btn:focus-visible,
.k-cta--deep .k-btn:focus-visible,
.k-hero--deep .k-btn:focus-visible,
.al-cta .k-btn:focus-visible { outline-color: var(--k-jade); }
/* --- Size / width variants ----------------------------------------------- */
.k-btn--sm { height: 42px; padding: 0 22px; font-size: var(--k-fs-sm); }
@media (max-width: 1023px) {
/* Full-width block: reserve for form submits + dedicated conversion bands.
NOT for hero CTAs — hero CTAs stay compact, set by hero.css. */
.k-btn--block { width: 100%; height: 50px; font-size: var(--k-fs-md); }
}
/* ===== header.css ================================================== */
/* =============================================================================
KUENTA COMPONENTS — HEADER (+ promo)
Sticky bar: logo (left) · nav (center-left) · CTA (right) on desktop;
logo · hamburger on mobile. Two moods — light (paper pages) and dark
(deep-green pages) — chosen to match the hero it sits above.
Optional promo bar above the nav: a thin deep-green cross-sell strip
(e.g. merchant page → "Sé Aliado"). It scrolls away; the nav stays.
On scroll, js/ui.js adds .is-scrolled to .k-header for a hairline + faint
shadow so the bar separates from page content.
Structure (HTML):
Lleva Kuenta a comercios.Sé Aliado →
Photos should be portrait (≈4:5). Keep the label short — one line, two max.
============================================================================= */
.k-tiles {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
margin-inline: calc(var(--k-pad) * -1);
padding-inline: var(--k-pad);
padding-bottom: 6px;
scroll-padding-inline: var(--k-pad);
}
.k-tiles::-webkit-scrollbar { display: none; }
.k-tiles > .k-tile { flex: 0 0 64%; scroll-snap-align: start; }
.k-tile {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: var(--k-r-image);
overflow: hidden;
isolation: isolate;
background: var(--k-surface-gray);
color: var(--k-paper);
text-decoration: none;
transition: transform var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease);
}
.k-tile:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-md); }
.k-tile__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
transition: transform 0.5s var(--k-ease);
}
/* Slow image push-in on hover — the photo feels alive (Instacart/Square). */
.k-tile:hover .k-tile__img { transform: scale(1.05); }
@media (hover: none) { .k-tile:hover .k-tile__img { transform: none; } }
/* Bottom scrim so the label always reads — stronger + earlier ramp so it holds
up even on bright photos (salon/clinic), where a light scrim let the label go soft. */
.k-tile::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, transparent 26%, rgba(10, 10, 10, 0.30) 60%, rgba(10, 10, 10, 0.82) 100%);
}
.k-tile__label {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
padding: 18px 18px 20px;
color: var(--k-paper);
display: flex;
flex-direction: column;
gap: 3px;
}
.k-tile__cat {
font-size: 18px;
font-weight: var(--k-fw-semi);
line-height: var(--k-lh-snug);
letter-spacing: var(--k-tr-flat);
text-wrap: balance; /* even line breaks when a label goes to two lines */
}
/* Diagonal arrow rides inline with the last word of the category (Square/Fresha).
Kept inline + a non-breaking space so it can NEVER orphan onto its own line. */
.k-tile__cat::after {
content: '\00A0\2197';
font-weight: var(--k-fw-bold);
}
/* Optional product hint under the category (verticals: the lead product). */
.k-tile__sub {
font-size: 13px;
font-weight: var(--k-fw-medium);
color: rgba(255, 255, 255, 0.85);
line-height: 1.2;
}
/* === DESKTOP — auto-fitting grid (any count wraps) ===================== */
@media (min-width: 1024px) {
.k-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
overflow: visible;
scroll-snap-type: none;
margin-inline: 0;
padding-inline: 0;
padding-bottom: 0;
}
.k-tiles > .k-tile { flex: none; }
.k-tile { aspect-ratio: 2 / 3; } /* taller, portrait — Square/Fresha proportions */
.k-tile__label { padding: 22px; }
.k-tile__cat { font-size: 19px; }
}
/* ===== acceptance.css ============================================== */
/* =============================================================================
KUENTA COMPONENTS — ACCEPTANCE STRIP (k-accept)
A seamless, auto-scrolling marquee of accepted payment-method logos. Used on
payment/cobros pages to say "we take everything" at a glance. The track holds
the logo set TWICE; the animation slides exactly -50% so it loops seamlessly.
Edge mask fades both sides. Pauses for reduced-motion.
Structure (HTML):
Acepta todas…
…N logos… then the SAME N again (aria-hidden) for the seamless loop…
============================================================================= */
.k-accept { padding-block: var(--k-section-y); overflow: hidden; }
.k-accept__title {
font-size: var(--k-fs-h2);
font-weight: var(--k-fw-bold);
letter-spacing: var(--k-tr-snug);
line-height: var(--k-lh-snug);
color: var(--k-ink);
text-align: center;
margin: 0 auto clamp(28px, 4vw, 44px);
padding-inline: var(--k-pad);
max-width: 22ch;
}
.k-accept__strip {
width: 100%;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.k-accept__track {
display: flex;
align-items: center;
width: max-content;
animation: k-accept-scroll 26s linear infinite;
}
/* Spacing via per-image margin (NOT flex gap): every image — including the last
of each set — carries the same right margin, so the duplicated set is EXACTLY
half the track width. That makes translateX(-50%) land seamlessly, with no
jump or growing gap on each loop. */
.k-accept__track img {
height: clamp(34px, 4vw, 46px);
width: auto;
display: block;
flex: none;
object-fit: contain;
margin-inline-end: clamp(32px, 5vw, 56px);
}
@keyframes k-accept-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.k-accept__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}
/* ===== offer.css =================================================== */
/* =============================================================================
KUENTA COMPONENTS — OFFER CARD
The "what you're selling" card: a real product render floating on a soft mint
panel, over a benefit line and a row of "what's inside" tags. Use it where the
products themselves are the pitch (Aliados "lo que vendes", product index).
Structure (HTML):
kuenta cobros
Acepta pagos como quiera tu cliente.
Terminal
…
…
The --cobros/--credito/--software/--seguros classes stay as per-product hooks;
each card now shows its own render, so no tone styling is needed.
============================================================================= */
.k-offers {
display: grid;
grid-template-columns: 1fr 1fr; /* phones: 2×2 so all four are visible together */
gap: 12px;
list-style: none;
margin: 0;
}
.k-offer {
position: relative;
display: flex;
flex-direction: column;
background: var(--k-paper);
border: 1px solid var(--k-line);
border-radius: var(--k-r-xl);
overflow: hidden;
}
/* Clickable card — the whole card links to the product page (stretched-link
pattern). Only used where a real product page exists (e.g. cobros). */
.k-offer--link { transition: transform var(--k-dur) var(--k-ease), border-color var(--k-dur) var(--k-ease), box-shadow var(--k-dur) var(--k-ease); }
.k-offer--link:hover,
.k-offer--link:focus-within { transform: translateY(-2px); border-color: var(--k-line-hover); box-shadow: var(--k-shadow-md); }
.k-offer__link { position: absolute; inset: 0; z-index: 1; }
/* Mockup tile — a real product render floating on a soft mint panel. -------- */
.k-offer__mock {
position: relative;
height: clamp(104px, 26vw, 132px); /* compact on phones; grows ≥600 */
background: var(--k-surface-gray);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.k-offer__shot { width: 100%; height: 100%; object-fit: contain; padding: clamp(10px, 2.4vw, 18px); }
/* Body --------------------------------------------------------------------- */
.k-offer__body {
display: flex;
flex-direction: column;
gap: 7px;
flex: 1;
padding: 13px 14px;
}
.k-offer__title { font-size: var(--k-fs-md); font-weight: var(--k-fw-semi); letter-spacing: var(--k-tr-flat); }
.k-offer__copy { font-size: var(--k-fs-eyebrow); line-height: var(--k-lh-normal); color: var(--k-muted); }
.k-offer__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
margin-top: auto;
padding-top: 4px;
list-style: none;
}
.k-offer__tag {
font-size: var(--k-fs-3xs);
font-weight: var(--k-fw-semi);
color: var(--k-jade-ink);
background: var(--k-surface-gray);
border-radius: var(--k-r-pill);
padding: 4px 9px;
}
@media (min-width: 600px) {
.k-offers { gap: 24px; }
.k-offer__mock { height: clamp(132px, 14vw, 168px); }
.k-offer__body { gap: 10px; padding: clamp(20px, 2.4vw, 26px); }
.k-offer__title { font-size: 20px; }
.k-offer__copy { font-size: var(--k-fs-sm); }
.k-offer__tags { gap: 8px; }
.k-offer__tag { font-size: var(--k-fs-2xs); padding: 5px 11px; }
}
@media (min-width: 1024px) {
.k-offers { grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Wide cards read better horizontal: mock beside the copy. */
.k-offer { flex-direction: row; align-items: stretch; }
.k-offer__mock { flex: 0 0 42%; height: auto; }
.k-offer__body { flex: 1; justify-content: center; padding: clamp(24px, 2.4vw, 34px); }
.k-offer__title { font-size: 22px; }
.k-offer__copy { font-size: var(--k-fs-body); }
}
/* ===== stats.css =================================================== */
/* =============================================================================
KUENTA COMPONENTS — STATS
The big-number credibility band, Shopify-style: large LIGHTWEIGHT numerals
with a short label, no boxed cards, no descriptive sentence. Desktop = a slim
row with hairline dividers between metrics. Mobile = a tight stack.
Flexible count — --2 / --3 / --4.
Structure (HTML):
+1,000comercios
…
============================================================================= */
.k-stats {
display: grid;
grid-template-columns: 1fr;
gap: clamp(20px, 4vw, 26px);
}
.k-stat { display: flex; flex-direction: column; }
.k-stat__metric {
font-size: clamp(44px, 5vw, 52px); /* big + confident, not shouty (was 64 — read huge next to the label) */
font-weight: var(--k-fw-regular);
line-height: 0.98;
letter-spacing: -0.03em;
color: inherit;
margin-bottom: 8px;
}
.k-stat__label {
font-size: 18px; /* up from 16 so the label doesn't read tiny under the number */
font-weight: var(--k-fw-semi);
line-height: var(--k-lh-snug);
letter-spacing: var(--k-tr-flat);
color: inherit;
}
/* On a deep-green section, soften the label a touch under the white number. */
.k-section--deep .k-stat__label { color: var(--k-on-deep-soft); }
@media (min-width: 768px) {
.k-stats { gap: 0; align-items: start; }
.k-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-stat { padding-inline: clamp(24px, 3vw, 48px); }
.k-stat:first-child { padding-inline-start: 0; }
.k-stat:last-child { padding-inline-end: 0; }
/* hairline divider between metrics (the only chrome) */
.k-stat + .k-stat { border-left: 1px solid var(--k-line); }
.k-section--deep .k-stat + .k-stat { border-left-color: var(--k-on-deep-line); }
}
/* ===== testimonials.css ============================================ */
/* =============================================================================
KUENTA COMPONENTS — TESTIMONIALS
Deep-green section, white quote cards. Mobile-first: swipe carousel with an
edge peek; desktop: 3-up grid. Quote → author (avatar + name + brand).
No star ratings, no centered-single variant — one confident shape.
Reference: Shopify / Nu testimonial rows; Tiendanube mobile carousel.
Structure (HTML):
…
Me entendieron primero…
María G.Cafetería · Guadalajara
…
============================================================================= */
.k-testimonials {
padding-block: var(--k-section-y);
background: var(--k-surface-deep);
color: var(--k-on-deep);
}
/* When the section head sits on this deep section, lighten its text. */
.k-testimonials .k-section__title { color: var(--k-on-deep); }
.k-testimonials .k-section__title .k-accent { color: var(--k-jade); } /* was deep-green → invisible on the deep bg */
.k-testimonials .k-section__lead { color: var(--k-on-deep-soft); }
/* === LIST — mobile swipe carousel ====================================== */
.k-testimonials__list {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
margin-inline: calc(var(--k-pad) * -1);
padding-inline: var(--k-pad);
padding-bottom: 8px;
scroll-padding-inline: var(--k-pad);
}
.k-testimonials__list::-webkit-scrollbar { display: none; }
.k-testimonials__list > .k-testimonial {
flex: 0 0 86%;
scroll-snap-align: start;
min-width: 0;
}
/* === CARD ============================================================== */
.k-testimonial {
display: flex;
flex-direction: column;
gap: 24px;
background: var(--k-paper);
color: var(--k-ink);
border-radius: var(--k-r-lg);
padding: 28px 26px;
}
/* 5-star rating — leads the card (replaces the decorative quote mark). */
.k-testimonial__stars { color: var(--k-jade); font-size: 18px; letter-spacing: 4px; line-height: 1; }
.k-testimonial__quote {
font-size: var(--k-fs-md);
line-height: var(--k-lh-normal);
color: var(--k-ink);
font-style: normal;
}
.k-testimonial__author {
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
}
/* Monogram avatar — soft-jade chip with the person's initials. Human and
personal without a (often fake-looking) tiny headshot. Pattern: clean SaaS
testimonial monograms (Stripe / Linear) rather than stock face photos. */
.k-testimonial__avatar {
width: 48px; height: 48px;
border-radius: var(--k-r-pill);
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--k-surface-gray); /* neutral: el verde vive en la tinta, no en el relleno */
color: var(--k-deep-2);
font-size: var(--k-fs-sm);
font-weight: var(--k-fw-bold);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.k-testimonial__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.k-testimonial__name { font-size: var(--k-fs-body); font-weight: var(--k-fw-semi); line-height: var(--k-lh-snug); }
.k-testimonial__brand { font-size: var(--k-fs-xs); color: var(--k-muted); }
/* === DESKTOP — 3-up grid =============================================== */
@media (min-width: 1024px) {
.k-testimonials__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
overflow: visible;
scroll-snap-type: none;
margin-inline: 0;
padding-inline: 0;
padding-bottom: 0;
}
.k-testimonials__list > .k-testimonial { flex: none; }
.k-testimonial { padding: 36px 32px; gap: 28px; border-radius: var(--k-r-xl); }
.k-testimonial__quote { font-size: 18px; }
}
/* ===== reviews.css ================================================= */
/* =============================================================================
KUENTA COMPONENTS — REVIEWS (static 2-up)
Two compact quote cards, side by side on desktop, stacked on mobile. No
carousel, no arrows, no counter — both testimonials are always visible, which
reads cleaner (especially on mobile) than a paged one-at-a-time slider.
Pattern: Stripe / Square testimonial row, trimmed to two.
Structure (HTML):
into the form after a
submit that opens WhatsApp. Small, mint, reassuring. The entrance is a CSS
keyframe (not a JS toggle) so it plays even when the new WhatsApp tab steals
focus and backgrounds this one. */
.k-form__notice {
margin-top: 14px;
padding: 12px 14px;
font-size: var(--k-fs-eyebrow);
line-height: 1.45;
color: var(--k-deep);
background: var(--k-mint);
border: 1px solid var(--k-mint-line);
border-radius: var(--k-r-sm);
/* Slide-only entrance — never touches opacity, so the note is visible even if
the animation clock is frozen (this tab gets backgrounded by the new
WhatsApp tab the moment it's inserted). */
animation: k-notice-in var(--k-dur) var(--k-ease);
}
@keyframes k-notice-in {
from { transform: translateY(4px); }
to { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .k-form__notice { animation: none; } }
.k-form__notice a { color: var(--k-deep); font-weight: var(--k-fw-semi); text-decoration: underline; }
/* ===== intake.css ================================================== */
/* =============================================================================
KUENTA COMPONENTS — INTAKE (lead-capture / contact pages)
The conversion pages: "Hablar con Kuenta", "Ser Aliado", "Distribuir".
Two columns — a value-prop intro on the left, the form card on the right.
Clean canvas + faint grid (.k-glow), no color washes — matches the
Aliados aesthetic. The form itself is the shared .k-form-card (form.css).
Structure (HTML):
