/* =========================================================================
   Muebles Álvarez — Colors & Type Foundation
   Editorial premium · Costa Rican craftsmanship
   ========================================================================= */

/* --- Webfonts ------------------------------------------------------------
   Lato + Playfair Display load locally from fonts/ (uploaded by the brand).
   Raleway still loads from Google Fonts.
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

/* Playfair Display — variable + static fallbacks */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/PlayfairDisplay-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/PlayfairDisplay-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/PlayfairDisplay-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/PlayfairDisplay-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/PlayfairDisplay-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('fonts/PlayfairDisplay-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/PlayfairDisplay-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 800; font-display: swap;
  src: url('fonts/PlayfairDisplay-ExtraBoldItalic.ttf') format('truetype'); }

/* Lato */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('fonts/Lato-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap;
  src: url('fonts/Lato-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Lato-Light.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('fonts/Lato-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Lato-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Lato-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Lato-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/Lato-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/Lato-Black.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap;
  src: url('fonts/Lato-BlackItalic.ttf') format('truetype'); }

:root {
  /* --- COLOR TOKENS ----------------------------------------------------- */

  /* Brand */
  --ma-burgundy:        #A20202;   /* Rojo Borgoña — primary, CTAs, accents */
  --ma-burgundy-hover:  #7A0101;   /* Pressed / hover state */
  --ma-burgundy-tint:   #F9ECEC;   /* Soft red wash for light backgrounds */
  --ma-burgundy-decor:  #F0E0E0;   /* Decorative numerals, behind-text marks */

  /* Neutrals */
  --ma-white:           #FFFFFF;
  --ma-cream:           #F5F0EB;   /* Warm off-white — alternating sections */
  --ma-cream-edge:      #EDE6DC;   /* Cream divider / card border */
  --ma-charcoal:        #2C2C2C;   /* Gris Carbón — primary text, dark sections */
  --ma-charcoal-soft:   #484848;   /* Secondary on dark */
  --ma-text:            #3A3A3A;   /* Body text */
  --ma-text-muted:      #7A7A7A;   /* Captions, meta */

  /* Surfaces & overlays */
  --ma-overlay:         rgba(20, 12, 12, 0.52);
  --ma-overlay-soft:    rgba(20, 12, 12, 0.35);
  --ma-overlay-deep:    rgba(20, 12, 12, 0.78);
  --ma-glass:           rgba(255, 255, 255, 0.15);

  /* Functional accents (sparingly) */
  --ma-star:            #F5A623;   /* Testimonial star ratings */
  --ma-whatsapp:        #25D366;   /* WhatsApp green — only for that button */

  /* --- SEMANTIC ALIASES ------------------------------------------------- */
  --fg-primary:         var(--ma-charcoal);
  --fg-secondary:       var(--ma-text);
  --fg-muted:           var(--ma-text-muted);
  --fg-on-dark:         var(--ma-white);
  --fg-on-dark-soft:    rgba(255,255,255,0.75);
  --fg-accent:          var(--ma-burgundy);

  --bg-base:            var(--ma-white);
  --bg-warm:            var(--ma-cream);
  --bg-dark:            var(--ma-charcoal);
  --bg-accent:          var(--ma-burgundy);

  --border-soft:        var(--ma-cream-edge);
  --border-strong:      var(--ma-charcoal);

  /* --- TYPOGRAPHY TOKENS ------------------------------------------------ */
  --font-serif:         'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-sans-display:  'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-sans-body:     'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale — desktop (mobile values applied via media queries below) */
  --fs-display:    72px;   /* hero H1 */
  --fs-h1:         52px;   /* section H1 */
  --fs-h2:         38px;
  --fs-h3:         24px;
  --fs-h4:         16px;   /* uppercase eyebrow / label */
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;

  --lh-tight:      1.08;
  --lh-snug:       1.2;
  --lh-normal:     1.4;
  --lh-relaxed:    1.7;

  --ls-tighter:    -0.02em;
  --ls-tight:      -0.01em;
  --ls-normal:     0;
  --ls-wide:       0.04em;
  --ls-wider:      0.08em;
  --ls-widest:     0.15em;

  /* --- SPACING ---------------------------------------------------------- */
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  80px;
  --space-2xl: 120px;
  --space-3xl: 160px;

  --container:        1280px;
  --container-pad:    48px;
  /* Margen lateral global del sitio: crece con la pantalla (≈86px a 1440, 96px máx), 20px en móvil */
  --ma-gutter:        clamp(28px, 6vw, 96px);

  /* --- RADII ------------------------------------------------------------ */
  --radius-sm:    4px;     /* Buttons — square = solid craftsmanship */
  --radius-md:    8px;     /* Cards, inputs */
  --radius-lg:    16px;    /* Large cards, modals */
  --radius-xl:    24px;
  --radius-pill:  100px;

  /* --- ELEVATION -------------------------------------------------------- */
  --shadow-nav:      0 2px 24px rgba(0,0,0,0.08);
  --shadow-card:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-lift:     0 12px 32px rgba(0,0,0,0.10);
  --shadow-cta:      0 8px 24px rgba(162,2,2,0.30);
  --shadow-dropdown: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-wa:       0 6px 24px rgba(37,211,102,0.35);

  /* --- MOTION ----------------------------------------------------------- */
  --ease-out-soft:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-pop:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:        150ms;
  --dur-base:        250ms;
  --dur-slow:        400ms;
  --dur-cinematic:   700ms;
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these classes (or duplicate the rules) for editorial consistency.
   ========================================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  background: var(--bg-base);
}

/* --- Display & headings --- */
.t-display,
h1.t-hero {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-on-dark);
}

/* The signature italic-red word inside the hero headline. */
.t-display em,
.t-display .accent-italic,
h1.t-hero em {
  font-style: italic;
  font-weight: 700;
  color: var(--ma-burgundy);
  font-family: var(--font-serif);
}

h1, .t-h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

h2, .t-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h3, .t-h3 {
  font-family: var(--font-sans-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--fg-primary);
}

.t-eyebrow,
.t-label {
  font-family: var(--font-sans-display);
  font-weight: 700;
  font-size: 13px;
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ma-burgundy);
}

.t-h4 {
  font-family: var(--font-sans-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* --- Body --- */
p, .t-body {
  font-family: var(--font-sans-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.t-body-lg {
  font-family: var(--font-sans-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.t-body-sm {
  font-family: var(--font-sans-body);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--fg-secondary);
}

.t-caption,
small {
  font-family: var(--font-sans-display);
  font-weight: 500;
  font-size: var(--fs-caption);
  line-height: 1.5;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}

/* --- Editorial quote --- */
.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.35;
  color: var(--fg-primary);
}

/* --- Stat display number --- */
.t-stat {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-on-dark);
}

/* --- Decorative process numeral (huge, very-light red, sits behind text) --- */
.t-numeral {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 80px;
  line-height: 1;
  color: var(--ma-burgundy-decor);
}

/* =========================================================================
   RESPONSIVE TYPE — scale display sizes on tablet & mobile
   ========================================================================= */
@media (max-width: 1024px) {
  :root { --fs-display: 56px; --fs-h1: 42px; --fs-h2: 32px; }
}
@media (max-width: 768px) {
  :root {
    --fs-display: 40px;
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --container-pad: 24px;
  }
  .t-stat { font-size: 48px; }
  .t-numeral { font-size: 64px; }
}
@media (max-width: 480px) {
  :root { --container-pad: 20px; }
}
@media (max-width: 600px) {
  :root { --ma-gutter: 20px; }
}

/* =========================================================================
   MOTION RESPECT
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}