Design System
Inhabi

Espaciado fluido

Se adaptan al viewport con clamp(), sin breakpoints duros.

Copiar/* Espaciado */
--gutter:    clamp(20px, 4vw, 56px);
--section-y: clamp(72px, 10vw, 140px);
--max-w:     1400px;

Radios

Copiar--r-pill: 999px;  /* Botones, badges */
--r-sm:   4px;    /* Chips, badges cuadrados */
--r-md:   8px;    /* Tarjetas */
--r-lg:   16px;

Movimiento

Copiar--ease:    cubic-bezier(.2, .7, .2, 1);
--ease-io: cubic-bezier(.76, 0, .24, 1);
--t-fast:  .2s;   --t-base: .3s;   --t-slow: .4s;

Sombras

Copiar--shadow-sm: 0 4px 12px rgba(0,0,0,.18);
--shadow-md: 0 10px 30px rgba(0,0,0,.28);
--shadow-lg: 0 20px 50px rgba(0,0,0,.35);

Marca

Texto sobre oscuro

Texto sobre claro

Bordes

Escala

Copiar<p class="t-display">Habitar</p>
<p class="t-h1">Espacios que se <em>sienten</em>.</p>
<p class="t-h2">Tres formas de habitar</p>
<p class="t-lead">…</p>
<p class="t-eyebrow">Arquitectura e interiorismo</p>

Sobre superficie oscura

Sobre superficie clara

Tamaños

Tabs y selector de idioma

Copiar<!-- Botones base -->
<button class="btn btn--primary">Diseña tu espacio</button>
<button class="btn btn--outline">Solicitar cotización</button>
<button class="btn btn--ghost">Ver más</button>
<button class="btn btn--sage">Agendar visita</button>

<!-- Tamaños -->
<button class="btn btn--sm btn--primary">Small</button>
<button class="btn btn--lg btn--primary">Large</button>

<!-- Tabs -->
<button class="btn-tab is-on">01 Natural</button>
<button class="btn-tab">02 Minimal</button>

<!-- Selector de idioma -->
<div class="lang-toggle">
  <button class="is-on">ES</button>
  <button>EN</button>
</div>

Tarjeta Combo

Vital02

Práctico · Estructurado

Mantiene el sello de diseño elevando la experiencia con mobiliario más amplio y mejor organización diaria.

Ver en el configurador →

Integral03

Sofisticación · Presencia

La experiencia más completa: mobiliario de gran escala, áreas sociales integradas y almacenamiento superior.

Ver en el configurador →

Tarjeta Proyecto

Prieto 20801 · Ver →

Serna & Velasco02 · Ver →

Opciones del configurador (sobre claro)

Balance01Vital02Integral03

Natural

Minimal

Industrial

Copiar<!-- Tarjeta combo -->
<article class="card is-active">
  <div class="card__media" style="aspect-ratio:16/10">
    <img src="…" alt="">
  </div>
  <div class="card__body">
    <div class="card__head">
      <span class="card__title">Vital</span>
      <span class="card__kicker">02</span>
    </div>
    <span class="card__kw">Práctico · Estructurado</span>
    <p class="card__desc">Descripción…</p>
    <span class="card__cta">Ver en el configurador →</span>
  </div>
</article>

Campos (superficie clara)

Chips de selección múltiple

Range (área)

Selector de día y hora

Fondos

Copiar<section class="section section--dark">
  <div class="container">
    <header class="section-head">
      <div class="section-head__col">
        <p class="t-eyebrow">01 — Combos</p>
        <h2 class="t-h2">Tres tipos de remodelación</h2>
      </div>
      <p class="section-head__sub t-body">…</p>
    </header>
  </div>
</section>

Panel sticky de resumen

A la derecha verás el panel de resumen con imagen, lista de filas y botones de acción. Sustituye la imagen por el render del configurador.

Enviar solicitud

Resumen de tu solicitud

InmuebleApartamento

Área120 m²

ComboVital

EstiloNatural

PlazoHasta 60 días

Enviar solicitud

Callout de éxito

Comparador antes / después

‹ ›

IndustrialNatural

Copiar<div class="compare">
  <img src="antes.jpg">
  <img src="despues.jpg" style="clip-path:inset(0 50% 0 0)">
  <div class="compare__handle" style="left:50%">
    <div class="compare__knob">‹ ›</div>
  </div>
</div>

Botón flotante WhatsApp

En producción ocupa la esquina inferior derecha. Aquí lo mostramos inline.

Clases utilitarias

Copiar<div class="anim-up">…</div>

/* Keyframes disponibles */
@keyframes inFade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes inUp    { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
@keyframes inLine  { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes kb      { from { transform: scale(1.12) } to { transform: scale(1) } }

/* Respeta reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

Estructura recomendada de archivos

Copiarstyles/
├── tokens.css        /* Variables :root — importar primero */
├── reset.css         /* Reset mínimo */
├── typography.css    /* .t-display, .t-h1, .t-body… */
├── buttons.css       /* .btn, .btn-tab, .lang-toggle */
├── cards.css         /* .card, .card-project, .opt, .opt-thumb */
├── forms.css         /* .field, .input, .chip, .day, .range */
├── navigation.css    /* .nav, .nav__links */
├── sections.css      /* .section, .container, .section-head */
├── components.css    /* .fab, .sticky-panel, .compare, .callout */
├── animations.css    /* @keyframes + .anim-* */
└── utilities.css     /* .flex, .gap-*, .mt-* */

main.css  /* importa todo en orden */

Adopción en HTML

Copiar<link rel="stylesheet" href="styles/main.css">

<!-- Sección clara: envuelve en .surface--light para que los componentes hereden -->
<section class="section section--light surface--light">
  <div class="container">
    <button class="btn btn--primary">Acción</button>
  </div>
</section>