/* ==========================================================================
INBASIX MEDICAL — UI TOOLKIT v1.0
Fuente: Figma "Proposal OB inbasix 2.0" › LP APARATOLOGÍA ESTÉTICA › Html → Body
Frame base: 1280 × 5569 px (desktop)
CSS puro: sin frameworks, sin preprocesadores, sin dependencias.
ÍNDICE
0. Notas de análisis (leer primero)
1. Visión general e identidad
2. Design tokens
2.1 Color 2.2 Tipografía 2.3 Espaciado y layout
2.4 Bordes y sombras 2.5 Movimiento y z-index
3. Reset y base
4. Tipografía (H1–H6, cuerpo, utilidades)
5. Layout (container, section, grid, stack)
6. Componentes
6.1 Header / Nav 6.2 Botones 6.3 Eyebrow / Badge
6.4 Hero 6.5 Trust bar 6.6 Logo strip
6.7 Feature card 6.8 Comparativa 6.9 Testimonios
6.10 Acordeón (FAQ) 6.11 Formulario 6.12 Footer
6.13 WhatsApp flotante 6.14 Página de gracias
7. Utilidades
8. Responsive
9. Accesibilidad y preferencias del usuario
========================================================================== */
/* ==========================================================================
0. NOTAS DE ANÁLISIS
--------------------------------------------------------------------------
El archivo de Figma está en modo "solo lectura" y Dev Mode no está
habilitado, por lo que NO fue posible leer valores exactos del inspector.
Todos los valores se obtuvieron por inspección visual del canvas (zoom
36 %) y se normalizaron a una escala estándar de 4/8 px.
Marcadores usados en este archivo:
[OBS] Observado directamente en el diseño (alta confianza).
[EST] Estimado visualmente; verificar contra Dev Mode.
[INF] No visible en el diseño; se infiere la mejor práctica estándar.
========================================================================== */
/* ==========================================================================
1. VISIÓN GENERAL E IDENTIDAD
--------------------------------------------------------------------------
Estilo: Corporativo-clínico moderno. Fondo mayoritariamente blanco con
mucho aire, fotografía de producto en estudio (tonos cálidos
beige/arena) y un único color de acento: rojo INBASIX.
Un bloque oscuro (sección comparativa + footer) aporta contraste
y dramatismo "premium".
Tono: Confiable, directo y orientado a conversión. Titulares cortos en
dos líneas donde la segunda línea va en rojo ("…que impulsa tu
crecimiento."), eyebrows en mayúsculas espaciadas, CTA repetido
("Solicita tu demo") en cada sección.
Público: B2B — dueñas/os de clínicas estéticas, spas y médicos en México
que evalúan invertir en aparatología (precio, garantía,
capacitación, showroom). Prioriza señales de confianza.
Rasgos: · Botones en forma de píldora (radius completo).
· Tarjetas gris claro sin borde, radio generoso, sin sombra.
· Panel "glass" translúcido sobre fondo oscuro.
· Iconografía en cuadros rojos pequeños con radio.
· Tipografía sans-serif geométrica/grotesca, pesos 400–700.
========================================================================== */
/* ==========================================================================
2. DESIGN TOKENS
========================================================================== */
:root {
/* ------------------------------------------------------------------------
2.1 COLOR
Capa 1 = primitivos (paleta cruda). Capa 2 = semánticos (uso).
Los componentes SOLO deben consumir tokens semánticos.
------------------------------------------------------------------------ */
/* Primitivos — Rojo de marca [OBS: #EF1018 medido en los CTA de las 6 maquetas] */
--red-50: #FFF2F2;
--red-100: #FEE4E5;
--red-200: #FDD7D9;
--red-300: #F99A9E;
--red-400: #F4444B;
--red-500: #EF1018; /* rojo principal: CTA, acentos de titular, iconos */
--red-600: #D20D14; /* hover */
--red-700: #B00B11; /* active / texto rojo sobre fondos claros pequeños */
--red-800: #7F0A0F;
--red-900: #4D0609;
/* Primitivos — Tinta (titulares y texto, negro azulado) [OBS en maquetas] */
--ink-900: #171B2A;
--ink-600: #626675;
--ink-400: #8A8D99;
/* Primitivos — Neutrales (base cálida-neutra) [EST] */
--gray-0: #FFFFFF;
--gray-25: #FAFAFA;
--gray-50: #F5F5F6; /* fondo de tarjetas / sección FAQ */
--gray-100: #EEEEF0; /* fondo de inputs */
--gray-200: #E2E2E5; /* bordes sutiles */
--gray-300: #CBCBD0;
--gray-400: #A1A1A8; /* placeholder */
--gray-500: #74747C; /* texto secundario */
--gray-600: #55555D;
--gray-700: #3A3A40;
--gray-800: #232327;
--gray-900: #141416; /* sección oscura */
--gray-950: #0A0A0B; /* footer */
/* Primitivos — Acento cálido de fotografía [OBS en hero, EST hex] */
--sand-100: #F3ECE4;
--sand-200: #E6DACD;
/* Primitivos — Semánticos [INF: el diseño no muestra estados; estándar] */
--green-500: #16A34A;
--green-50: #ECFDF3;
--amber-500: #D97706;
--amber-50: #FFF7E6;
--blue-500: #2563EB;
--blue-50: #EFF5FF;
--whatsapp: #25D366; /* [OBS] botón flotante */
/* Semánticos — Marca */
--color-primary: var(--red-500);
--color-primary-hover: var(--red-600);
--color-primary-active: var(--red-700);
--color-primary-subtle: var(--red-50);
--color-on-primary: var(--gray-0);
/* Secundario: el diseño usa blanco/negro como botón secundario [OBS] */
--color-secondary: var(--gray-900);
--color-secondary-hover: var(--gray-700);
--color-on-secondary: var(--gray-0);
/* Semánticos — Superficies */
--color-bg: var(--gray-0);
--color-bg-muted: var(--gray-50);
--color-bg-inverse: var(--gray-900);
--color-bg-footer: #000; /* footer negro en todas las LPs */
--color-surface: var(--gray-0);
--color-surface-muted: var(--gray-50);
--color-surface-input: var(--gray-100);
--color-surface-glass: rgba(255, 255, 255, 0.08); /* panel comparativa [OBS] */
--color-border-glass: rgba(255, 255, 255, 0.16);
/* Semánticos — Texto */
--color-text: var(--ink-900);
--color-text-muted: var(--ink-600);
--color-text-subtle: var(--ink-400);
--color-text-inverse: var(--gray-0);
--color-text-inverse-muted: rgba(255, 255, 255, 0.68);
--color-text-accent: var(--color-primary);
--color-link: var(--color-primary);
/* Semánticos — Bordes */
--color-border: var(--gray-200);
--color-border-strong: var(--gray-300);
--color-focus: var(--red-400);
/* Semánticos — Estado [INF] */
--color-success: var(--green-500);
--color-success-bg: var(--green-50);
--color-warning: var(--amber-500);
--color-warning-bg: var(--amber-50);
--color-error: var(--red-600); /* comparte tono con marca: */
--color-error-bg: var(--red-50); /* acompañar SIEMPRE de icono/texto */
--color-info: var(--blue-500);
--color-info-bg: var(--blue-50);
/* Fondo de la sección comparativa (degradado tipo "estudio") [OBS/EST] */
--gradient-stage: radial-gradient(120% 70% at 50% 100%, #5A5A5E 0%, #1E1E21 45%, #0E0E10 100%);
--gradient-hero: linear-gradient(90deg, #F6F1EB 0%, #EFE7DE 55%, #E3D7CA 100%);
/* ------------------------------------------------------------------------
2.2 TIPOGRAFÍA
Familia: grotesca neo-geométrica. Se ve similar a "Inter". [EST]
Escala: Major Third (1.25) anclada en 16 px, con tamaños fluidos.
------------------------------------------------------------------------ */
--font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system,
"Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Tamaños — clamp(min móvil, preferido fluido, max desktop 1280) */
--text-2xs: 0.6875rem; /* 11px legales, eyebrow móvil */
--text-xs: 0.75rem; /* 12px eyebrow, labels [OBS] */
--text-sm: 0.875rem; /* 14px texto de tarjeta, nav */
--text-md: 1rem; /* 16px cuerpo base */
--text-lg: 1.125rem; /* 18px lead / subtítulo */
--text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 20px H5 / títulos de card */
--text-2xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); /* 24px H4 */
--text-3xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* 32px H3 */
--text-4xl: clamp(1.75rem, 1.25rem + 2.2vw, 3rem); /* 28 → 48px H2 secciones (línea de marca) */
--text-5xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem); /* 36 → 60px H1 hero (línea de marca) */
--text-display: var(--text-5xl);
--text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 20px lead de hero y sección */
--text-eyebrow: var(--text-md); /* 16px eyebrow en mayúsculas */
/* Pesos */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800; /* H1/H2: titulares de marca */
/* Interlineado */
--leading-tight: 1.1; /* titulares secundarios */
--leading-heading: 1.04; /* H1/H2 compactos (línea de marca) */
--leading-snug: 1.25; /* H3–H6 */
--leading-normal: 1.5; /* cuerpo */
--leading-relaxed: 1.65; /* párrafos largos, FAQ */
/* Tracking */
--tracking-tight: -0.02em; /* titulares medianos */
--tracking-heading: -0.035em; /* H1/H2 (línea de marca) */
--tracking-normal: 0;
--tracking-wide: 0.08em;
--tracking-eyebrow: 0.06em; /* "• ULTRASONIDO PORTÁTIL · MINDRAY" (línea de marca) */
/* ------------------------------------------------------------------------
2.3 ESPACIADO Y LAYOUT
Escala base 4 px. Nombres numéricos = múltiplos de 4.
------------------------------------------------------------------------ */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 padding de cards [EST] */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 padding vertical de sección [EST] */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
/* Espaciado semántico */
--section-py: clamp(4rem, 2.5rem + 5vw, 6.5rem); /* 104 px @1280 (línea de marca) */
--section-gap: clamp(var(--space-8), 4vw, var(--space-12)); /* título → contenido */
--card-padding: var(--space-6);
--stack-gap: var(--space-4);
/* Grid */
--container-max: 1152px; /* ancho de contenido en frame de 1280 (línea de marca) */
--container-narrow: 760px; /* tabla comparativa, textos centrados */
--container-wide: 1280px;
--gutter: clamp(1.25rem, 5vw, var(--space-16)); /* margen lateral */
--grid-columns: 12;
--grid-gap: var(--space-6); /* 24 px entre tarjetas [EST] */
/* Alturas de control */
--control-h-sm: 2.25rem; /* 36 */
--control-h-md: 2.75rem; /* 44 — mínimo táctil recomendado [INF] */
--control-h-lg: 3.375rem; /* 54 — CTA principal (línea de marca) */
--control-h-header: 2.875rem; /* 46 — CTA del header */
--header-h: 6rem; /* 96 desktop; 64 en móvil (ver styles.css) */
--logo-h: 56px; /* logo INBASIX en header */
--logo-h-scrolled: 46px;
--logo-h-mobile: 40px;
/* ------------------------------------------------------------------------
2.4 BORDES Y SOMBRAS
El diseño es mayormente "flat": tarjetas sin sombra sobre gris claro.
------------------------------------------------------------------------ */
--radius-xs: 4px;
--radius-sm: 8px; /* inputs, cuadro de icono [EST] */
--radius-md: 12px; /* items de acordeón, tarjetas pequeñas [EST] */
--radius-lg: 16px; /* feature cards, testimonios, form card [EST] */
--radius-xl: 24px; /* panel glass comparativo, cards grandes */
--radius-2xl: 32px; /* form card, bloques medianos */
--radius-panel: clamp(24px, 4.4vw, 56px); /* secciones/paneles redondeados grandes (línea de marca) */
--radius-pill: 999px; /* botones, chips [OBS] */
--radius-circle: 50%;
--border-width: 1px;
--border-width-thick: 2px;
/* Elevaciones (uso escaso; el diseño confía en contraste de fondo) */
--shadow-none: none;
--shadow-xs: 0 1px 2px rgba(20, 20, 22, 0.06);
--shadow-sm: 0 2px 6px rgba(20, 20, 22, 0.06), 0 1px 2px rgba(20, 20, 22, 0.04);
--shadow-md: 0 8px 24px rgba(20, 20, 22, 0.08), 0 2px 6px rgba(20, 20, 22, 0.04);
--shadow-lg: 0 20px 48px rgba(20, 20, 22, 0.12), 0 4px 12px rgba(20, 20, 22, 0.06);
--shadow-cta: 0 8px 20px rgba(239, 16, 24, 0.28); /* hover de CTA [INF] */
--shadow-glass: 0 24px 64px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
--shadow-focus: 0 0 0 3px rgba(239, 16, 24, 0.3);
/* ------------------------------------------------------------------------
2.5 MOVIMIENTO Y CAPAS [INF]
------------------------------------------------------------------------ */
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--duration-fast: 120ms;
--duration-base: 200ms;
--duration-slow: 320ms;
--z-base: 0;
--z-raised: 10;
--z-header: 100;
--z-floating: 200;
--z-overlay: 300;
--z-modal: 400;
}
/* ==========================================================================
3. RESET Y BASE
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: var(--header-h); /* anclas no quedan bajo el header sticky */
}
body {
min-height: 100vh;
font-family: var(--font-sans);
font-size: var(--text-md);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--color-text);
background-color: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
::selection { background: var(--red-100); color: var(--red-800); }
/* ==========================================================================
4. TIPOGRAFÍA
========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: var(--font-sans);
color: inherit;
text-wrap: balance;
}
/* H1 — Hero. Misma escala en todas las LPs INBASIX (60 / 800 / -0.035em) */
h1, .h1 {
font-size: var(--text-5xl);
font-weight: var(--weight-extrabold);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
}
/* H2 — Títulos de sección ("Todo lo que hace de INBASIX…") */
h2, .h2 {
font-size: var(--text-4xl);
font-weight: var(--weight-extrabold);
line-height: var(--leading-heading);
letter-spacing: var(--tracking-heading);
}
/* H3 — Subtítulos de bloque / card de formulario grande */
h3, .h3 {
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
letter-spacing: -0.01em;
}
/* H4 — Título de form card ("Cuéntanos sobre tu clínica") */
h4, .h4 {
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
}
/* H5 — Título de feature card / testimonio ("Importador directo de fábrica") */
h5, .h5 {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
}
/* H6 — Títulos de columna en footer ("VISITA UN SHOWROOM") */
h6, .h6 {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
p { max-width: 68ch; }
.text-lead { font-size: var(--text-lead); line-height: var(--leading-normal); color: var(--color-text-muted); }
.text-body { font-size: var(--text-md); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-text-accent); } /* 2ª línea roja de titulares [OBS] */
.text-inverse { color: var(--color-text-inverse); }
.text-strong { font-weight: var(--weight-bold); }
.text-center { text-align: center; }
.text-center p { margin-inline: auto; }
/* Titular bicolor: Texto acento.
*/
.headline__accent { color: var(--color-text-accent); display: block; }
.headline__accent--inline { display: inline; }
.link {
color: var(--color-link);
font-weight: var(--weight-semibold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--duration-fast) var(--ease-standard);
}
.link:hover { color: var(--color-primary-hover); }
/* ==========================================================================
5. LAYOUT
========================================================================== */
.container {
width: 100%;
max-width: calc(var(--container-max) + (var(--gutter) * 2));
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + (var(--gutter) * 2)); }
.container--wide { max-width: calc(var(--container-wide) + (var(--gutter) * 2)); }
.section {
padding-block: var(--section-py);
position: relative;
}
.section--muted { background-color: var(--color-bg-muted); }
.section--inverse {
background: var(--gradient-stage);
color: var(--color-text-inverse);
}
.section--inverse .text-muted { color: var(--color-text-inverse-muted); }
.section__header {
display: grid;
gap: var(--space-3);
margin-bottom: var(--section-gap);
}
.section__header--center { justify-items: center; text-align: center; }
.section__header--center p { margin-inline: auto; }
/* Grid de 12 columnas */
.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
gap: var(--grid-gap);
}
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: 1 / -1; }
/* Grids auto-responsivos (preferidos: no requieren media queries) */
.grid-auto {
display: grid;
gap: var(--grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 240px)), 1fr));
}
.grid-2 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Split: texto | media (FAQ, Formulario, Hero) */
.split {
display: grid;
gap: var(--space-12);
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
}
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--center { align-items: center; }
/* Stack / Cluster */
.stack { display: flex; flex-direction: column; gap: var(--stack-gap); }
.stack--xs { --stack-gap: var(--space-2); }
.stack--sm { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
/* ==========================================================================
6. COMPONENTES
Convención: BEM ligero (.bloque__elemento--modificador).
========================================================================== */
/* ---------- 6.1 HEADER / NAV [OBS] ---------- */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
height: var(--header-h);
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: var(--border-width) solid transparent;
transition: border-color var(--duration-base) var(--ease-standard);
}
.site-header.is-scrolled { border-bottom-color: var(--color-border); } /* [INF] vía JS */
.site-header__inner {
height: 100%;
display: flex;
align-items: center;
gap: var(--space-8);
}
.site-header__logo {
height: var(--logo-h);
width: auto;
flex-shrink: 0;
transition: height var(--duration-slow) var(--ease-standard);
}
.is-scrolled .site-header__logo { height: var(--logo-h-scrolled); }
.site-header__cta { margin-left: auto; }
.nav { display: flex; gap: var(--space-8); }
.nav__link {
font-size: var(--text-md);
font-weight: var(--weight-medium);
color: var(--color-text);
white-space: nowrap;
padding-block: var(--space-2);
position: relative;
transition: color var(--duration-fast) var(--ease-standard);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--color-primary); }
.nav-toggle { display: none; width: var(--control-h-md); height: var(--control-h-md); border-radius: var(--radius-sm); }
.nav-toggle__bar { display: block; width: 20px; height: 2px; margin: 4px auto; background: currentColor; border-radius: 2px; }
/* ---------- 6.2 BOTONES [OBS: píldora; primario rojo, secundario blanco] ---------- */
.btn {
--btn-bg: var(--color-primary);
--btn-fg: var(--color-on-primary);
--btn-bd: transparent;
--btn-h: var(--control-h-md);
--btn-px: var(--space-6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--btn-h);
padding-inline: var(--btn-px);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: 1;
white-space: nowrap;
color: var(--btn-fg);
background-color: var(--btn-bg);
border: var(--border-width) solid var(--btn-bd);
border-radius: var(--radius-pill);
cursor: pointer;
user-select: none;
transition:
background-color var(--duration-fast) var(--ease-standard),
color var(--duration-fast) var(--ease-standard),
border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-base) var(--ease-standard),
transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { --btn-bg: var(--color-primary-hover); box-shadow: var(--shadow-cta); }
.btn:active { --btn-bg: var(--color-primary-active); transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; }
/* Secundario: blanco con borde ("Habla con un asesor") [OBS] */
.btn--secondary {
--btn-bg: var(--color-surface);
--btn-fg: var(--color-text);
--btn-bd: var(--color-border-strong);
}
.btn--secondary:hover { --btn-bg: var(--gray-50); --btn-bd: var(--gray-400); box-shadow: var(--shadow-sm); }
.btn--secondary:active { --btn-bg: var(--gray-100); }
/* Oscuro [INF] */
.btn--dark { --btn-bg: var(--color-secondary); --btn-fg: var(--color-on-secondary); }
.btn--dark:hover { --btn-bg: var(--color-secondary-hover); box-shadow: var(--shadow-md); }
/* Ghost / texto con flecha ("Solicita tu demo ↗" del footer) [OBS] */
.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--color-primary);
--btn-px: 0;
min-height: auto;
}
.btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--color-primary-hover); box-shadow: none; }
/* Tamaños */
.btn--sm { --btn-h: var(--control-h-sm); --btn-px: var(--space-4); font-size: var(--text-xs); }
.btn--lg { --btn-h: var(--control-h-lg); --btn-px: var(--space-8); font-size: var(--text-md); }
/* CTA del header: mismo tamaño en todas las LPs (va después de .btn--lg para ganarle) */
.site-header__cta { --btn-h: var(--control-h-header); --btn-px: var(--space-6); font-size: var(--text-md); }
/* CTAs del hero: siempre tamaño grande (54 px), sea .btn o .btn--lg */
.hero__actions .btn { --btn-h: var(--control-h-lg); --btn-px: var(--space-8); font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn__icon { width: 1em; height: 1em; flex-shrink: 0; }
/* ---------- 6.3 EYEBROW / BADGE / CHIP ---------- */
/* "• APARATOLOGÍA ESTÉTICA", "TESTIMONIALES" [OBS] */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-eyebrow);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--color-primary);
}
.eyebrow--dot::before {
content: "";
width: 6px; height: 6px;
border-radius: var(--radius-circle);
background-color: currentColor;
}
/* Badge "RECOMENDADO" junto a "CON INBASIX" [OBS] */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
line-height: 1.4;
border-radius: var(--radius-pill);
color: var(--color-on-primary);
background-color: var(--color-primary);
}
.badge--subtle { color: var(--color-primary); background-color: var(--color-primary-subtle); }
.badge--success { color: var(--color-success); background-color: var(--color-success-bg); }
.badge--warning { color: var(--color-warning); background-color: var(--color-warning-bg); }
.badge--info { color: var(--color-info); background-color: var(--color-info-bg); }
/* Chip blanco en píldora (celdas "Con INBASIX") [OBS] */
.chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
color: var(--color-text);
background-color: var(--color-surface);
border-radius: var(--radius-pill);
}
/* Cuadro de icono rojo (feature cards) [OBS] */
.icon-box {
display: inline-grid;
place-items: center;
width: 32px; height: 32px;
border-radius: var(--radius-sm);
color: var(--color-on-primary);
background-color: var(--color-primary);
flex-shrink: 0;
}
.icon-box svg { width: 16px; height: 16px; }
.icon-box--lg { width: 44px; height: 44px; border-radius: var(--radius-md); }
.icon-box--lg svg { width: 22px; height: 22px; }
/* ---------- 6.4 HERO [OBS] ---------- */
.hero {
position: relative;
overflow: hidden;
background: var(--gradient-hero);
min-height: clamp(520px, 62vw, 720px);
display: flex;
flex-direction: column;
}
.hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 75% center; }
.hero__content {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-5);
max-width: 560px;
padding-block: var(--space-16);
}
.hero__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.hero__text { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 44ch; }
.hero__text strong { color: var(--color-text); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__note { font-size: var(--text-xs); color: var(--color-text-muted); }
/* ---------- 6.5 TRUST BAR (franja inferior del hero) [OBS] ---------- */
.trust-bar {
position: relative;
z-index: 1;
background-color: rgba(20, 20, 22, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--color-text-inverse);
}
.trust-bar__list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-4) var(--space-8);
padding-block: var(--space-4);
list-style: none;
padding-inline: 0;
}
.trust-bar__item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.trust-bar__item svg { width: 14px; height: 14px; opacity: 0.9; }
/* ---------- 6.6 LOGO STRIP (marcas distribuidas) [OBS] ---------- */
.logo-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
gap: var(--space-8) var(--space-12);
}
.logo-strip__item { height: 32px; width: auto; object-fit: contain; filter: grayscale(0); }
.logo-strip--muted .logo-strip__item { filter: grayscale(1); opacity: 0.7; transition: all var(--duration-base); } /* [INF] */
.logo-strip--muted .logo-strip__item:hover { filter: none; opacity: 1; }
/* ---------- 6.7 FEATURE CARD ("Importador directo de fábrica") [OBS] ---------- */
.card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--card-padding);
background-color: var(--color-surface-muted);
border-radius: var(--radius-lg);
transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.card__icon { margin-bottom: var(--space-3); }
.card__title { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.card__text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background-color: var(--color-surface); }
.card--outlined { background-color: var(--color-surface); border: var(--border-width) solid var(--color-border); }
.card--elevated { background-color: var(--color-surface); box-shadow: var(--shadow-sm); }
/* ---------- 6.8 COMPARATIVA (panel glass sobre fondo oscuro) [OBS] ---------- */
.compare {
width: 100%;
max-width: var(--container-narrow);
margin-inline: auto;
padding: var(--space-6) var(--space-8);
background-color: var(--color-surface-glass);
border: var(--border-width) solid var(--color-border-glass);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-glass);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: var(--color-text-inverse);
}
.compare__table { width: 100%; text-align: left; }
.compare__table th,
.compare__table td { padding: var(--space-2) var(--space-3); vertical-align: middle; }
.compare__table thead th {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
padding-bottom: var(--space-4);
}
.compare__table tbody th {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-align: center;
white-space: nowrap;
}
.compare__yes { display: flex; } /* contiene .chip con icono check rojo */
.compare__yes .chip svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }
.compare__no {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-text-inverse-muted);
}
.compare__no svg { width: 14px; height: 14px; flex-shrink: 0; }
/* ---------- 6.9 TESTIMONIOS (masonry de video + citas) [OBS] ---------- */
.testimonials {
display: grid;
gap: var(--space-4);
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-flow: dense;
}
.testimonial-video {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
aspect-ratio: 4 / 5;
background-color: var(--sand-100);
}
.testimonial-video--tall { grid-row: span 2; aspect-ratio: auto; }
.testimonial-video img,
.testimonial-video video { width: 100%; height: 100%; object-fit: cover; }
.testimonial-video__play {
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: var(--radius-circle);
background-color: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: var(--color-text-inverse);
transition: transform var(--duration-base) var(--ease-out), background-color var(--duration-base);
}
.testimonial-video:hover .testimonial-video__play { transform: translate(-50%, -50%) scale(1.08); background-color: rgba(255, 255, 255, 0.75); }
.testimonial {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--color-surface-muted);
border-radius: var(--radius-lg);
}
.testimonial__stars { display: flex; gap: 2px; color: var(--color-primary); font-size: var(--text-sm); }
.testimonial__title { font-size: var(--text-md); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.testimonial__quote { font-size: var(--text-sm); font-style: italic; color: var(--color-text-muted); }
.testimonial__author { margin-top: auto; text-align: right; font-size: var(--text-2xs); color: var(--color-text-subtle); }
/* ---------- 6.10 ACORDEÓN / FAQ [OBS: item abierto con pregunta roja] ----------
HTML recomendado (nativo, accesible sin JS):
…
…
) */
.compare { padding: var(--space-5); }
.compare__table thead { display: none; }
.compare__table, .compare__table tbody, .compare__table tr,
.compare__table th, .compare__table td { display: block; width: 100%; }
.compare__table tr {
padding-block: var(--space-4);
border-bottom: var(--border-width) solid var(--color-border-glass);
}
.compare__table tr:last-child { border-bottom: 0; }
.compare__table tbody th { text-align: left; padding-inline: 0; }
.compare__table td { padding-inline: 0; }
.compare__table td[data-label]::before {
content: attr(data-label);
display: block;
margin-bottom: var(--space-1);
font-size: var(--text-2xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--color-text-inverse-muted);
}
.form-card { padding: var(--space-6); }
.hide-mobile { display: none !important; }
.show-mobile { display: revert !important; }
}
@media (max-width: 480px) {
:root {
--card-padding: var(--space-5);
--grid-gap: var(--space-4);
}
.grid-2, .grid-4, .testimonials, .form-grid { grid-template-columns: 1fr; }
.testimonial-video--tall { grid-row: auto; aspect-ratio: 4 / 5; }
.trust-bar__list { grid-template-columns: 1fr; }
.hero__actions { flex-direction: column; }
.hero__actions .btn { width: 100%; }
.logo-strip { justify-content: center; gap: var(--space-6); }
.logo-strip__item { height: 24px; }
.site-footer__grid { grid-template-columns: 1fr; }
.site-footer__bottom { flex-direction: column; }
.fab-whatsapp { width: 52px; height: 52px; }
}
/* ==========================================================================
9. ACCESIBILIDAD Y PREFERENCIAS DEL USUARIO
========================================================================== */
/* Respeta "reducir movimiento" del sistema */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Alto contraste / modo forzado de Windows */
@media (forced-colors: active) {
.btn, .chip, .badge, .input, .select, .textarea, .accordion__item, .card { border: 1px solid CanvasText; }
.icon-box, .check-list li::before { forced-color-adjust: none; }
}
/* Dispositivos sin hover: evita estados "pegados" en táctil */
@media (hover: none) {
.card--interactive:hover { transform: none; box-shadow: none; }
.btn:hover { box-shadow: none; }
}
/* Impresión */
@media print {
.site-header, .fab-whatsapp, .nav-toggle, .hero__media, .trust-bar { display: none !important; }
.section--inverse, .site-footer { background: none !important; color: #000 !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}
/* ==========================================================================
BUENAS PRÁCTICAS — guía de uso del toolkit
--------------------------------------------------------------------------
1. TOKENS PRIMERO. Ningún componente usa hex directos: consume tokens
semánticos (--color-primary, --space-6…). Un rebrand = editar :root.
2. DOS CAPAS DE COLOR. Primitivos (--red-500) ≠ semánticos
(--color-primary). Nunca uses primitivos dentro de componentes.
3. CONTRASTE (WCAG 2.2 AA):
· Blanco sobre --red-500 ≈ 4.6:1 ✓ (texto de botón en semibold).
· --gray-500 sobre blanco ≈ 4.7:1 ✓ texto secundario.
· --gray-400 (placeholder) NO cumple para texto esencial: úsalo solo
en placeholders, nunca como única etiqueta. Siempre |