/* ==========================================================================
   Comercio Inmobiliario — Design tokens
   Valores tomados del Figma "Web Comercio Inmobiliario".
   ========================================================================== */

:root {
  /* --- Marca --- */
  --ci-navy:        #003476;  /* azul corporativo (títulos, header, footer, botones) */
  --ci-navy-800:    #00265a;
  --ci-navy-600:    #1f4d88;  /* badge Arriendo / hover */
  --ci-navy-400:    #345a90;  /* tarjetas testimonios */
  --ci-yellow:      #ffec00;  /* amarillo de acento (botones hero) */
  --ci-yellow-600:  #e6d400;

  /* --- Neutros --- */
  --ci-white:       #ffffff;
  --ci-gray-50:     #f5f5f5;  /* fondo topbar y secciones claras */
  --ci-gray-100:    #eeeeee;
  --ci-gray-200:    #dddddd;
  --ci-gray-400:    #9a9a9a;
  --ci-gray-600:    #575756;  /* texto cuerpo */
  --ci-gray-800:    #2b2b2b;
  --ci-black:       #12161c;
  --ci-blue-50:     #eaf0f8;  /* fondo selects del buscador */
  --ci-blue-100:    #d6e2f2;

  /* --- Semánticos --- */
  --ci-bg:          var(--ci-white);
  --ci-bg-alt:      var(--ci-gray-50);
  --ci-text:        var(--ci-gray-600);
  --ci-text-muted:  var(--ci-gray-400);
  --ci-heading:     var(--ci-navy);
  --ci-primary:     var(--ci-navy);
  --ci-accent:      var(--ci-yellow);
  --ci-border:      var(--ci-gray-200);
  --ci-success:     #1f8a4c;
  --ci-error:       #c8323b;
  --ci-whatsapp:    #25d366;

  /* --- Tipografía (Figma) --- */
  --ci-font-heading: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --ci-font-body:    "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --ci-font-accent:  "Commissioner", "Segoe UI", system-ui, sans-serif;

  /* Escala: en Figma (1920px) los títulos de sección son 81px y el hero 123px.
     Se escalan con clamp() para pantallas normales. */
  --ci-fs-xs:   0.75rem;
  --ci-fs-sm:   0.875rem;
  --ci-fs-base: 1rem;
  --ci-fs-md:   1.125rem;
  --ci-fs-lg:   1.375rem;
  --ci-fs-xl:   clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);      /* h3 / títulos tarjeta */
  --ci-fs-2xl:  clamp(2rem, 1.2rem + 2.6vw, 3.6rem);         /* h2 sección (81px en Figma) */
  --ci-fs-3xl:  clamp(3rem, 1.5rem + 5vw, 7rem);             /* h1 hero (123px en Figma) */
  --ci-fs-hero-sub: clamp(1.1rem, 0.8rem + 1.1vw, 1.9rem);   /* 39px en Figma */
  --ci-fs-stat: clamp(2.4rem, 1.5rem + 2.6vw, 4.2rem);       /* cifras */

  --ci-lh-tight: 1.05;
  --ci-lh-base:  1.5;

  /* --- Espaciado (escala 4px) --- */
  --ci-sp-1:  0.25rem;
  --ci-sp-2:  0.5rem;
  --ci-sp-3:  0.75rem;
  --ci-sp-4:  1rem;
  --ci-sp-5:  1.5rem;
  --ci-sp-6:  2rem;
  --ci-sp-7:  3rem;
  --ci-sp-8:  4.5rem;
  --ci-sp-9:  7rem;

  /* --- Layout (Figma: contenido 1700px sobre 1920 → márgenes 110px) --- */
  --ci-container:     1440px;
  --ci-container-pad: 1rem;
  --ci-topbar-h:      40px;
  --ci-header-h:      84px;

  /* --- Radios y sombras --- */
  --ci-radius-sm: 8px;
  --ci-radius:    16px;
  --ci-radius-lg: 28px;
  --ci-radius-pill: 999px;

  --ci-shadow-sm: 0 1px 2px rgba(0, 52, 118, 0.06);
  --ci-shadow:    0 8px 24px rgba(0, 52, 118, 0.10);
  --ci-shadow-lg: 0 20px 50px rgba(0, 52, 118, 0.18);

  --ci-ease: 180ms ease;
}

@media (min-width: 768px) {
  :root {
    --ci-container-pad: 2rem;
    --ci-header-h: 96px;
  }
}
@media (min-width: 1280px) {
  :root { --ci-container-pad: 3rem; }
}