/* ========================================================================== Constructora Bolívar — Design Tokens Estructura de 3 niveles: 1. Primitivos — valores crudos (no usar directo en componentes) 2. Semánticos — intención de uso (referencian primitivos) 3. Componentes — tokens por componente (referencian semánticos) Prefijo: --cb- ========================================================================== */ :root { /* ====================================================================== 1 · PRIMITIVOS ====================================================================== */ /* --- Color · Gray ------------------------------------------------------ */ --cb-color-gray-50: #fcfaf9; --cb-color-gray-100: #efecec; --cb-color-gray-200: #e4ddd9; --cb-color-gray-300: #f6f6f6; --cb-color-gray-400: #d4dad7; --cb-color-gray-500: #b3b6b5; --cb-color-gray-600: #888d8b; --cb-color-gray-700: #606362; --cb-color-gray-800: #303130; --cb-color-gray-900: #202120; /* --- Color · Red -------------------------------------------------------- */ --cb-color-red-50: #ffd8dc; --cb-color-red-100: #ffb5bc; --cb-color-red-200: #f68993; --cb-color-red-300: #f06471; --cb-color-red-400: #ea4454; --cb-color-red-500: #dc3545; --cb-color-red-600: #cb2e3d; --cb-color-red-700: #a72733; --cb-color-red-800: #7e1b25; --cb-color-red-900: #52141a; /* --- Color · Blue ------------------------------------------------------- */ --cb-color-blue-50: #f3f5fe; --cb-color-blue-100: #d5dbf5; --cb-color-blue-200: #b1bdf4; --cb-color-blue-300: #768aee; --cb-color-blue-400: #667ef6; --cb-color-blue-500: #5871eb; --cb-color-blue-600: #475ab4; --cb-color-blue-700: #394786; --cb-color-blue-800: #2a335b; --cb-color-blue-900: #191d30; /* --- Color · Green (marca) ---------------------------------------------- */ --cb-color-green-50: #d5f2e3; --cb-color-green-100: #00c65e; --cb-color-green-50-b: #a3f7d4; --cb-color-green-100-b: #6fdaae; --cb-color-green-200: #4fc091; --cb-color-green-300: #2c9d6e; --cb-color-green-400: #1d8258; --cb-color-green-500: #166a47; --cb-color-green-600: #095636; --cb-color-green-700: #09432b; --cb-color-green-800: #072c1d; --cb-color-green-900: #03110c; /* --- Color · Amber ------------------------------------------------------ */ --cb-color-amber-50: #eadeb3; --cb-color-amber-100: #fed141; --cb-color-amber-200: #ffb549; --cb-color-amber-300: #f8e59a; --cb-color-amber-600: #633806; --cb-color-amber-700: #41240a; --cb-color-amber-800: #241300; --cb-color-amber-900: #100800; /* --- Color · Pink (tag "Últimas unidades") ----------------------------- */ --cb-color-pink-500: #e83e8c; /* --- Color · Neutros ---------------------------------------------------- */ --cb-color-white: #ffffff; --cb-color-black: #333e33; /* --- Spacing ------------------------------------------------------------ */ --cb-spacing-0: 0px; --cb-spacing-0-5: 2px; --cb-spacing-1: 4px; --cb-spacing-2: 8px; --cb-spacing-3: 12px; --cb-spacing-4: 16px; --cb-spacing-5: 20px; --cb-spacing-6: 24px; --cb-spacing-8: 32px; --cb-spacing-10: 40px; --cb-spacing-12: 48px; --cb-spacing-16: 64px; --cb-spacing-20: 80px; --cb-spacing-24: 96px; --cb-spacing-28: 112px; --cb-spacing-30: 120px; /* --- Layout · Grid (sistema de marca) ----------------------------------- */ /* Desktop base: viewport 1440 · margen lateral 120 · 12 columnas · gutter 24 Contenido = 1440 − 240 = 1200 · columna = (1200 − 11×24) / 12 = 78 >1440: el contenedor sigue full-width pero el contenido se mantiene centrado a 1200 (los márgenes laterales crecen, los elementos no se mueven). */ --cb-container-max: 1200px; /* ancho máx. del contenido */ --cb-grid-columns: 12; --cb-grid-gutter: 24px; /* separación entre columnas */ --cb-grid-margin: 120px; /* margen lateral a 1440 */ --cb-grid-column: 78px; /* ancho de 1 columna */ --cb-mobile-margin: 18px; /* margen lateral en mobile (375) */ /* --- Radius ------------------------------------------------------------- */ --cb-radius-none: 0px; --cb-radius-sm: 4px; --cb-radius-md: 8px; --cb-radius-lg: 12px; --cb-radius-xl: 16px; --cb-radius-2xl: 24px; --cb-radius-full: 9999px; /* --- Typography · primitivos -------------------------------------------- */ --cb-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --cb-font-family-condensed: "Roboto Condensed", "Roboto", system-ui, sans-serif; --cb-font-size-xs: 10px; --cb-font-size-2xs: 12px; /* Caption (UI menús / legales) */ --cb-font-size-sm: 13px; --cb-font-size-cta: 14px; /* Button small / CTAs */ --cb-font-size-base: 16px; --cb-font-size-md: 18px; --cb-font-size-lg: 20px; --cb-font-size-xl: 24px; --cb-font-size-2xl: 32px; --cb-font-size-h1: 46px; /* H1 display · Roboto Condensed (títulos hero) */ --cb-font-size-3xl: 40px; --cb-font-size-4xl: 48px; --cb-line-height-tight: 1.2; --cb-line-height-snug: 1.4; --cb-line-height-normal: 1.6; --cb-line-height-relaxed: 1.75; --cb-font-weight-regular: 400; --cb-font-weight-medium: 500; --cb-font-weight-semibold: 600; --cb-font-weight-bold: 700; --cb-letter-spacing-tight: -0.5px; --cb-letter-spacing-normal: 0px; /* --- Sombras ------------------------------------------------------------ */ --cb-shadow-card: 0 6px 12px 0 rgba(108, 117, 125, 0.20); /* Botón flotante (WhatsApp) */ --cb-shadow-float: 0 16px 12.7px -7px rgba(45, 58, 52, 0.11), 0 21px 23.2px 0 rgba(45, 57, 52, 0.26); /* ====================================================================== 2 · SEMÁNTICOS (referencian primitivos) ====================================================================== */ /* --- Brand -------------------------------------------------------------- */ --cb-brand-primary: var(--cb-color-green-600); --cb-brand-primary-hover: var(--cb-color-green-800); --cb-brand-primary-active: var(--cb-color-green-700); --cb-brand-primary-subtle: var(--cb-color-green-50); --cb-brand-primary-on: var(--cb-color-white); /* --- Background --------------------------------------------------------- */ --cb-background-page: var(--cb-color-gray-50); --cb-background-surface: var(--cb-color-gray-100); --cb-background-raised: var(--cb-color-white); --cb-background-overlay: var(--cb-color-gray-200); --cb-background-disabled: var(--cb-color-gray-400); /* --- Text --------------------------------------------------------------- */ --cb-text-primary: var(--cb-color-black); --cb-text-secondary: var(--cb-color-gray-800); --cb-text-tertiary: var(--cb-color-gray-700); --cb-text-disabled: var(--cb-color-gray-400); --cb-text-on-primary: var(--cb-color-white); --cb-text-link: var(--cb-color-green-700); --cb-text-link-hover: var(--cb-color-green-800); /* --- Border ------------------------------------------------------------- */ --cb-border-default: var(--cb-color-gray-400); --cb-border-strong: var(--cb-color-gray-700); --cb-border-focus: var(--cb-color-green-700); --cb-border-disabled: var(--cb-color-gray-400); /* --- Feedback · Success ------------------------------------------------- */ --cb-feedback-success-background: var(--cb-color-green-50); --cb-feedback-success-border: var(--cb-color-green-100); --cb-feedback-success-text: var(--cb-color-green-700); --cb-feedback-success-icon: var(--cb-color-green-700); /* --- Feedback · Error --------------------------------------------------- */ --cb-feedback-error-background: var(--cb-color-red-50); --cb-feedback-error-border: var(--cb-color-red-300); --cb-feedback-error-text: var(--cb-color-red-700); --cb-feedback-error-icon: var(--cb-color-red-500); /* --- Feedback · Warning ------------------------------------------------- */ --cb-feedback-warning-background: var(--cb-color-amber-50); --cb-feedback-warning-border: var(--cb-color-amber-300); --cb-feedback-warning-text: var(--cb-color-amber-600); --cb-feedback-warning-icon: var(--cb-color-amber-600); /* --- Feedback · Info ---------------------------------------------------- */ --cb-feedback-info-background: var(--cb-color-blue-50); --cb-feedback-info-border: var(--cb-color-blue-200); --cb-feedback-info-text: var(--cb-color-blue-600); --cb-feedback-info-icon: var(--cb-color-blue-400); /* --- Spacing · semántico ------------------------------------------------ */ --cb-space-xs: var(--cb-spacing-1); /* 4 */ --cb-space-sm: var(--cb-spacing-2); /* 8 */ --cb-space-md: var(--cb-spacing-4); /* 16 */ --cb-space-lg: var(--cb-spacing-6); /* 24 */ --cb-space-xl: var(--cb-spacing-8); /* 32 */ --cb-space-2xl: var(--cb-spacing-12); /* 48 */ --cb-space-3xl: var(--cb-spacing-16); /* 64 */ /* --- Radius · semántico ------------------------------------------------- */ --cb-rounded-sm: var(--cb-radius-sm); --cb-rounded-md: var(--cb-radius-md); --cb-rounded-lg: var(--cb-radius-lg); --cb-rounded-xl: var(--cb-radius-xl); --cb-rounded-full: var(--cb-radius-full); /* --- Typography · semántico --------------------------------------------- */ --cb-type-size-xs: var(--cb-font-size-xs); --cb-type-size-sm: var(--cb-font-size-sm); --cb-type-size-base: var(--cb-font-size-base); --cb-type-size-md: var(--cb-font-size-md); --cb-type-size-lg: var(--cb-font-size-lg); --cb-type-size-xl: var(--cb-font-size-xl); --cb-type-size-2xl: var(--cb-font-size-2xl); --cb-type-size-3xl: var(--cb-font-size-3xl); --cb-type-weight-regular: var(--cb-font-weight-regular); --cb-type-weight-medium: var(--cb-font-weight-medium); --cb-type-weight-semibold: var(--cb-font-weight-semibold); --cb-type-weight-bold: var(--cb-font-weight-bold); --cb-type-leading: var(--cb-line-height-normal); /* --- Text styles nombrados (atajos uso UI) ------------------------------ */ /* H1 Bold · Roboto Condensed Bold 46 / 52 / 0 — títulos hero / display */ --cb-text-h1-family: var(--cb-font-family-condensed); --cb-text-h1-size: var(--cb-font-size-h1); --cb-text-h1-leading: 52px; --cb-text-h1-weight: var(--cb-font-weight-bold); --cb-text-h1-spacing: 0px; /* H2 Bold · Roboto Condensed Bold 32 / 38 / -0.5 — títulos de sección */ --cb-text-h2-family: var(--cb-font-family-condensed); --cb-text-h2-size: var(--cb-font-size-2xl); /* 32 */ --cb-text-h2-leading: 38px; --cb-text-h2-weight: var(--cb-font-weight-bold); --cb-text-h2-spacing: -0.5px; /* H3 Bold · Roboto Condensed Bold 24 / 30 / 0 — títulos de card */ --cb-text-h3-family: var(--cb-font-family-condensed); --cb-text-h3-size: var(--cb-font-size-xl); /* 24 */ --cb-text-h3-leading: 30px; --cb-text-h3-weight: var(--cb-font-weight-bold); --cb-text-h3-spacing: 0px; /* H4 Bold · Roboto Condensed Bold 20 / 24 / -0.25 — título card-proy / precio */ --cb-text-h4-family: var(--cb-font-family-condensed); --cb-text-h4-size: var(--cb-font-size-lg); /* 20 */ --cb-text-h4-leading: 24px; --cb-text-h4-weight: var(--cb-font-weight-bold); --cb-text-h4-spacing: -0.25px; /* Caption · Roboto Regular 12 / 16 / -0.5 — menús superiores, legales */ --cb-text-caption-size: var(--cb-font-size-2xs); --cb-text-caption-leading: 16px; --cb-text-caption-spacing: -0.5px; /* Paragraph · Roboto Regular 16 / 22 / 0.5 — cuerpo y navegación */ --cb-text-paragraph-size: var(--cb-font-size-base); --cb-text-paragraph-leading: 22px; --cb-text-paragraph-spacing: 0.5px; /* Button small · Roboto Bold 14 / 18 / -0.7 — CTAs y acciones */ --cb-text-button-size: var(--cb-font-size-cta); --cb-text-button-leading: 18px; --cb-text-button-spacing: -0.7px; --cb-text-button-weight: var(--cb-font-weight-bold); /* Paragraph Bold Small · Roboto Bold 14 / 18 / -0.25 — valores destacados */ --cb-text-bold-small-size: var(--cb-font-size-cta); --cb-text-bold-small-leading: 18px; --cb-text-bold-small-spacing: -0.25px; --cb-text-bold-small-weight: var(--cb-font-weight-bold); /* ====================================================================== 3 · COMPONENTES (referencian semánticos) ====================================================================== */ /* --- Button · base (geometría y tipografía comunes) --------------------- */ /* Pill rounded-30, icono 24, gap 4, min-width 160. Texto: Roboto SemiBold 16 / 20 / -0.5. */ --cb-button-radius: 30px; --cb-button-gap: var(--cb-spacing-1); /* 4 · icono ↔ texto */ --cb-button-min-width: 160px; --cb-button-icon-size: 24px; --cb-button-font-family: var(--cb-font-family); --cb-button-font-size: var(--cb-font-size-base); /* 16 */ --cb-button-font-weight: var(--cb-type-weight-bold); /* 700 (Button = Roboto Bold 16/20/-0.5) */ --cb-button-line-height: 20px; --cb-button-letter-spacing: -0.5px; /* Tamaño LG (alto 48) */ --cb-button-lg-height: 48px; --cb-button-lg-padding-x: var(--cb-spacing-8); /* 32 */ --cb-button-lg-padding-y: var(--cb-spacing-3); /* 12 */ /* Tamaño Sm (alto 40) */ --cb-button-sm-height: 40px; --cb-button-sm-padding-x: var(--cb-spacing-5); /* 20 */ --cb-button-sm-padding-y: var(--cb-spacing-2); /* 8 */ /* --- Button · Main (primario, relleno verde) ---------------------------- */ --cb-button-main-bg: var(--cb-brand-primary); /* #095636 */ --cb-button-main-bg-hover: var(--cb-brand-primary-hover); /* #072c1d */ --cb-button-main-bg-active: var(--cb-brand-primary-active); /* #09432b */ --cb-button-main-bg-disabled: var(--cb-background-disabled); /* #d4dad7 */ --cb-button-main-fg: var(--cb-color-white); /* texto + icono */ --cb-button-main-fg-disabled: var(--cb-color-gray-600); /* #888d8b */ /* --- Button · Main invertido (relleno ámbar, sobre fondo verde/foto) ---- */ --cb-button-main-inv-bg: var(--cb-color-amber-50); /* #eadeb3 */ --cb-button-main-inv-fg: var(--cb-brand-primary); /* #095636 · texto + icono */ /* --- Button · Secondary (contorno verde, se rellena en hover) ----------- */ --cb-button-secondary-bg: transparent; --cb-button-secondary-bg-hover: var(--cb-brand-primary); /* #095636 */ --cb-button-secondary-bg-active: var(--cb-brand-primary-active); /* #09432b */ --cb-button-secondary-bg-disabled: var(--cb-background-disabled); /* #d4dad7 */ --cb-button-secondary-border: var(--cb-brand-primary); /* #095636 */ --cb-button-secondary-fg: var(--cb-brand-primary); /* default · texto + icono */ --cb-button-secondary-fg-hover: var(--cb-color-white); /* hover / active */ --cb-button-secondary-fg-disabled: var(--cb-color-gray-600); /* #888d8b */ /* --- Button · Secondary invertido (contorno ámbar, sobre fondo oscuro) -- */ --cb-button-secondary-inv-border: var(--cb-color-amber-50); /* #eadeb3 */ --cb-button-secondary-inv-fg: var(--cb-color-amber-50); /* #eadeb3 · texto + icono */ /* --- Button · Textlink (sin fondo ni borde, solo texto + icono) --------- */ --cb-button-textlink-fg: var(--cb-brand-primary); /* #095636 */ /* --- Input --------------------------------- */ /* Geometría: alto 48 · radius 6 · borde 1px · padding 8·12 · gap 8 */ --cb-input-height: 48px; --cb-input-radius: 6px; --cb-input-padding-x: var(--cb-spacing-3); /* 12 */ --cb-input-padding-y: var(--cb-spacing-2); /* 8 */ --cb-input-gap: var(--cb-spacing-2); /* 8 · icono ↔ texto */ /* Fondos por estado */ --cb-input-background: var(--cb-color-white); --cb-input-background-disabled: var(--cb-background-disabled); /* #d4dad7 */ --cb-input-background-readonly: var(--cb-color-gray-300); /* #f6f6f6 */ /* Bordes por estado */ --cb-input-border-default: var(--cb-border-default); /* #d4dad7 */ --cb-input-border-hover: var(--cb-brand-primary); /* #095636 */ --cb-input-border-focus: var(--cb-brand-primary); /* #095636 · focus/filled */ --cb-input-border-error: var(--cb-color-red-300); /* #f06471 */ --cb-input-border-success: var(--cb-feedback-success-border); /* #00c65e */ --cb-input-border-disabled: var(--cb-border-disabled); /* #d4dad7 */ /* Texto del valor · Roboto Regular 16/22/0.5 */ --cb-input-text: var(--cb-text-primary); /* valor lleno · #333e33 */ --cb-input-placeholder: var(--cb-color-gray-600); /* #888d8b */ --cb-input-text-disabled: var(--cb-color-gray-600); /* #888d8b */ --cb-input-text-error: var(--cb-feedback-error-text); /* #a72733 */ --cb-input-text-size: var(--cb-font-size-base); /* 16 */ --cb-input-text-leading: 22px; --cb-input-text-spacing: 0.08px; /* Iconos · leading sigue el color del texto; calendar = verde marca */ --cb-input-icon-trailing: var(--cb-brand-primary); /* #095636 */ /* Label · Roboto Regular 14/18/0.25 */ --cb-input-label: var(--cb-color-black); /* #333e33 */ --cb-input-label-required: var(--cb-color-red-500); /* #dc3545 · asterisco */ --cb-input-label-size: var(--cb-font-size-cta); /* 14 */ --cb-input-label-leading: 18px; /* Helper / mensaje de error · Roboto Regular 14/18/0.25 */ --cb-input-helper: var(--cb-text-tertiary); /* #606362 */ --cb-input-error-text: var(--cb-feedback-error-text); /* #a72733 */ --cb-input-helper-size: var(--cb-font-size-cta); /* 14 */ --cb-input-helper-leading: 18px; /* --- Slider de rango ----------------- */ --cb-slider-track: var(--cb-color-gray-600); /* #888d8b · tramo inactivo */ --cb-slider-track-height: 1px; --cb-slider-range: var(--cb-color-green-200); /* #4fc091 · tramo activo */ --cb-slider-range-height: 3px; --cb-slider-thumb-bg: var(--cb-color-white); --cb-slider-thumb-border: var(--cb-brand-primary); /* #095636 */ --cb-slider-thumb-size: 12px; /* --- Budget card (selector de presupuesto, familia inputs) ------------- */ --cb-budget-label: var(--cb-brand-primary); /* "Presupuesto" + icono $ verde */ --cb-budget-price-bg: var(--cb-color-white); --cb-budget-price-radius: var(--cb-spacing-2); /* 8 */ --cb-budget-price-padding-x: var(--cb-spacing-4); /* 16 */ --cb-budget-price-padding-y: var(--cb-spacing-2); /* 8 */ --cb-budget-price-title: var(--cb-color-black); /* #333e33 */ --cb-budget-price-value: var(--cb-color-black); /* #333e33 */ /* --- Tag de proyecto -------------------- */ /* Caption · Roboto Regular 12/16/-0.5 · radius 6 · py 5 · px 12 (En venta px 6) */ --cb-tag-radius: 6px; --cb-tag-padding-y: 5px; --cb-tag-padding-x: var(--cb-spacing-3); /* 12 */ --cb-tag-padding-x-sm: 6px; /* En venta */ --cb-tag-font-size: var(--cb-font-size-2xs); /* 12 */ --cb-tag-font-leading: 16px; --cb-tag-font-spacing: -0.5px; --cb-tag-launch-bg: var(--cb-color-amber-100); /* #fed141 · Lanzamiento */ --cb-tag-launch-text: var(--cb-color-black); --cb-tag-last-bg: var(--cb-color-pink-500); /* #e83e8c · Últimas unidades */ --cb-tag-last-text: var(--cb-color-white); --cb-tag-sale-bg: var(--cb-color-blue-600); /* #475ab4 · En venta */ --cb-tag-sale-text: var(--cb-color-white); --cb-tag-sold-bg: var(--cb-color-gray-600); /* #888d8b · Vendido */ --cb-tag-sold-text: var(--cb-color-white); --cb-tag-news-border: var(--cb-color-gray-600); /* #888d8b · Noticias (outline) */ --cb-tag-news-text: var(--cb-color-gray-600); /* --- Card de proyecto ----------------- */ --cb-card-proy-width: 384px; --cb-card-proy-radius: var(--cb-radius-lg); /* 12 */ --cb-card-proy-shadow: var(--cb-shadow-card); --cb-card-proy-bg: var(--cb-color-white); --cb-card-proy-border: var(--cb-border-default); /* #d4dad7 */ --cb-card-proy-img-height: 204px; --cb-card-proy-prop: var(--cb-color-gray-600); /* labels de características */ --cb-card-proy-price: var(--cb-brand-primary); /* precio + nota verde */ --cb-card-proy-desc: var(--cb-color-gray-600); /* --- Card --------------------------------------------------------------- */ --cb-card-background: var(--cb-background-surface); --cb-card-background-raised: var(--cb-background-raised); --cb-card-border: var(--cb-border-default); --cb-card-shadow: var(--cb-shadow-card); --cb-card-radius: var(--cb-rounded-lg); --cb-card-padding-x: var(--cb-space-md); --cb-card-padding-y: var(--cb-space-md); --cb-card-title-color: var(--cb-text-primary); --cb-card-body-color: var(--cb-text-secondary); /* --- Navbar ------------------------------------------------------------- */ --cb-navbar-background: var(--cb-background-surface); --cb-navbar-border: var(--cb-border-default); --cb-navbar-text: var(--cb-text-primary); --cb-navbar-text-active: var(--cb-brand-primary); --cb-navbar-text-hover: var(--cb-brand-primary-hover); --cb-navbar-height: var(--cb-space-3xl); /* --- Badge -------------------------------------------------------------- */ --cb-badge-default-background: var(--cb-background-overlay); --cb-badge-default-text: var(--cb-text-secondary); --cb-badge-primary-background: var(--cb-brand-primary-subtle); --cb-badge-primary-text: var(--cb-brand-primary); --cb-badge-success-background: var(--cb-feedback-success-background); --cb-badge-success-text: var(--cb-feedback-success-text); --cb-badge-error-background: var(--cb-feedback-error-background); --cb-badge-error-text: var(--cb-feedback-error-text); --cb-badge-warning-background: var(--cb-feedback-warning-background); --cb-badge-warning-text: var(--cb-feedback-warning-text); --cb-badge-radius: var(--cb-rounded-full); --cb-badge-font-size: var(--cb-type-size-xs); --cb-badge-font-weight: var(--cb-type-weight-medium); /* --- Modal -------------------------------------------------------------- */ --cb-modal-background: var(--cb-background-surface); --cb-modal-overlay: var(--cb-text-primary); --cb-modal-border: var(--cb-border-default); --cb-modal-radius: var(--cb-rounded-xl); --cb-modal-padding-x: var(--cb-space-lg); --cb-modal-padding-y: var(--cb-space-lg); --cb-modal-title-size: var(--cb-type-size-lg); --cb-modal-title-weight: var(--cb-type-weight-medium); /* --- Toast -------------------------------------------------------------- */ --cb-toast-success-background: var(--cb-feedback-success-background); --cb-toast-success-border: var(--cb-feedback-success-border); --cb-toast-success-text: var(--cb-feedback-success-text); --cb-toast-error-background: var(--cb-feedback-error-background); --cb-toast-error-border: var(--cb-feedback-error-border); --cb-toast-error-text: var(--cb-feedback-error-text); --cb-toast-warning-background: var(--cb-feedback-warning-background); --cb-toast-warning-border: var(--cb-feedback-warning-border); --cb-toast-warning-text: var(--cb-feedback-warning-text); --cb-toast-info-background: var(--cb-feedback-info-background); --cb-toast-info-border: var(--cb-feedback-info-border); --cb-toast-info-text: var(--cb-feedback-info-text); --cb-toast-radius: var(--cb-rounded-lg); /* --- Divider ------------------------------------------------------------ */ --cb-divider-color: var(--cb-border-default); --cb-divider-weight: 0.5px; /* --- Link --------------------------------------------------------------- */ --cb-link-color: var(--cb-text-link); --cb-link-color-hover: var(--cb-text-link-hover); --cb-link-font-size: var(--cb-type-size-sm); } /* ========================================================================== LAYOUT · helpers de grid (sistema de marca) Patrón full-bleed: un elemento a 100% del viewport (fondo, borde, sombra) con su contenido centrado mediante .cb-container.
… contenido …
.cb-container mantiene el contenido a un máx. de 1200 centrado: · a 1440 → márgenes laterales de 120 (auto) · >1440 → contenido fijo a 1200, los márgenes crecen (no se mueve nada) · <1248 → conserva un margen mínimo de 1 gutter (24) a cada lado ========================================================================== */ .cb-bleed { width: 100%; } .cb-container { width: min(var(--cb-container-max), 100% - (2 * var(--cb-grid-gutter))); margin-inline: auto; } /* En mobile el margen lateral es 18px (375 − 36 = 339 de contenido). */ @media (max-width: 1023px) { .cb-container { width: 100%; padding-inline: var(--cb-mobile-margin); } }