/* ============================================================
   CEMBORAIN · DESIGN TOKENS
   Marca personal inmobiliaria — Gran Canaria
   ------------------------------------------------------------
   "Tú disfrutas. Yo me encargo de todo."
   Esta marca no grita. Calma · claridad · confianza.
   ============================================================ */

/* ---------- FONT FACES ---------------------------------------- */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("./fonts/CormorantGaramond-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("./fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS -------------------------------------------- */

:root {
  /* === COLOR · Paleta primaria (Brand book oficial) === */
  --c-eucalyptus:   #5E6858;   /* Deep Eucalyptus — color de marca, fondos premium, texto sobre claro */
  --c-shell:        #F9F9F8;   /* Paper White — fondo dominante */
  --c-oat:          #EDEDEB;   /* Cement — superficie 2, tarjetas, separadores */
  --c-driftwood:    #6E6E6A;   /* Stone Grey — texto secundario, líneas, neutro frío */
  --c-sand:         #C4BFBA;   /* Porcelain — acento neutro, hovers, badges */

  /* === COLOR · Derivados del eucalipto (uso interno) === */
  --c-eucalyptus-90: #6E7867;
  --c-eucalyptus-70: #8B9385;
  --c-eucalyptus-50: #AFB5AB;
  --c-eucalyptus-20: #DCDFD9;
  --c-eucalyptus-10: #ECEEEA;
  --c-eucalyptus-deep: #3F4839;  /* footer · fondos hero alternativos */

  /* === COLOR · Neutrales calientes === */
  --c-ink:        #2E2E2C;       /* Almost Black — texto principal */
  --c-graphite:   #4A4A44;
  --c-stone:      #9A9388;
  --c-line:       #E0DFDC;       /* hairlines, divisores, bordes */
  --c-line-soft:  #ECEBE8;
  --c-paper:      #FFFFFF;       /* uso muy puntual — base luminosa */

  /* === COLOR · Estado (sobrios, sin alarmar) === */
  --c-success:    #5E6858;       /* re-usa eucalipto — sin verdes neón */
  --c-warning:    #B68B4C;       /* ámbar tostado, dentro de la familia tierra */
  --c-danger:     #8B3A2E;       /* terracota, no rojo brillante. NUNCA precios en rojo */
  --c-info:       #6E7C82;       /* azul piedra, raro */

  /* === COLOR · Semánticos (uso recomendado) === */
  --bg:            #FFFFFF;
  --bg-soft:       var(--c-oat);
  --bg-deep:       var(--c-eucalyptus);
  --bg-deepest:    var(--c-eucalyptus-deep);

  --fg:            var(--c-ink);
  --fg-soft:       var(--c-driftwood);
  --fg-muted:      var(--c-stone);
  --fg-on-deep:    var(--c-shell);

  --accent:        var(--c-eucalyptus);
  --accent-warm:   var(--c-sand);
  --line:          var(--c-line);

  /* === TIPOGRAFÍA · Familias === */
  --font-serif:  "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-sans:   "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:   "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* === TIPOGRAFÍA · Pesos (regla: titulares en light/regular, NUNCA bold) === */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;     /* reservado a datos: precios, métricas, nombres de propiedad */

  /* === TIPOGRAFÍA · Escala (Canva-aligned, escalable) === */
  --t-display:    clamp(48px, 7vw, 88px);   /* H1 hero — serif light/regular */
  --t-h1:         clamp(36px, 4.6vw, 56px);
  --t-h2:         clamp(28px, 3.4vw, 40px);
  --t-h3:         22px;                     /* sans medium */
  --t-tagline:    clamp(20px, 2.2vw, 28px); /* serif italic */
  --t-quote:      clamp(20px, 2.2vw, 26px); /* serif italic */
  --t-lead:       18px;
  --t-body:       16px;
  --t-small:      14px;
  --t-micro:      12px;
  --t-eyebrow:    11px;                     /* sans semibold, MAYÚS, tracking abierto */

  /* === TIPOGRAFÍA · Métricas === */
  --lh-tight:    1.08;
  --lh-display:  1.12;
  --lh-heading:  1.22;
  --lh-body:     1.6;     /* line-height generoso por sistema */
  --lh-loose:    1.75;

  --ls-tight:    -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-eyebrow:   0.18em;  /* tracking abierto en eyebrows */
  --ls-button:    0.06em;

  /* === ESPACIO (4-pt grid, holguras editoriales) === */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* === RADII (sutiles — la marca no es redondeada) === */
  --r-none: 0;
  --r-1:   2px;     /* inputs, hairlines */
  --r-2:   4px;     /* botones, badges */
  --r-3:   8px;     /* tarjetas */
  --r-4:   12px;    /* tarjetas grandes */
  --r-pill: 999px;  /* pill solo para etiquetas pequeñas */

  /* === BORDERS === */
  --bd-hair: 1px solid var(--c-line);
  --bd-soft: 1px solid var(--c-line-soft);
  --bd-deep: 1px solid var(--c-eucalyptus);

  /* === SHADOWS · sutiles, papel sobre papel === */
  --sh-1: 0 1px 2px rgba(42, 44, 38, 0.04), 0 1px 1px rgba(42, 44, 38, 0.03);
  --sh-2: 0 4px 12px rgba(42, 44, 38, 0.05), 0 1px 2px rgba(42, 44, 38, 0.04);
  --sh-3: 0 12px 32px rgba(42, 44, 38, 0.07), 0 2px 6px rgba(42, 44, 38, 0.04);
  --sh-4: 0 24px 64px rgba(42, 44, 38, 0.10), 0 4px 12px rgba(42, 44, 38, 0.05);
  --sh-inset: inset 0 0 0 1px var(--c-line);

  /* === MOTION === */
  --ease: cubic-bezier(0.32, 0.72, 0.24, 1.00);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;

  /* === LAYOUT === */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(20px, 4vw, 56px);
}

/* ---------- BASE ---------------------------------------------- */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--c-eucalyptus); color: var(--c-shell); }

/* ---------- SEMANTIC TYPE CLASSES ----------------------------- */

.t-display, h1.display {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  text-wrap: balance;
}

.t-h1, h1 {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);     /* NUNCA bold para titulares */
  font-size: var(--t-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.t-h2, h2 {
  font-family: var(--font-serif);
  font-weight: var(--w-light);
  font-size: var(--t-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.t-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
}

.t-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: var(--t-tagline);
  line-height: 1.32;
  color: var(--fg);
  text-wrap: balance;
}

.t-quote, blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: var(--t-quote);
  line-height: 1.4;
  color: var(--c-eucalyptus);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--fg-soft);
}

.t-body, p {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.t-small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-soft);
}

.t-micro, small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-micro);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;          /* única excepción donde mayúsculas son OK */
  color: var(--c-driftwood);
}

.t-data {
  /* Para precios, métricas, nombres de propiedad — único caso de bold */
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.t-button {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 13px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
}

a {
  color: var(--c-eucalyptus);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: opacity var(--dur-1) var(--ease);
}
a:hover { text-decoration: underline; opacity: 0.85; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-7) 0;
}