/*
 * SALMERÓN DESIGN SYSTEM — Web 2026
 * CSS Custom Properties
 * Source: uploads/DESIGN-salmeron.md
 * ⚠️  TASA Orbiter Display substituted with Barlow — provide actual font files.
 */

/* TASA Orbiter — local brand font files */
@font-face {
  font-family: 'TASA Orbiter Display';
  src: url('fonts/TASAOrbiter-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TASA Orbiter Display';
  src: url('fonts/TASAOrbiter-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TASA Orbiter Display';
  src: url('fonts/TASAOrbiter-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TASA Orbiter Display';
  src: url('fonts/TASAOrbiter-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TASA Orbiter Display';
  src: url('fonts/TASAOrbiter-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* Raleway — local variable font files */
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ─── LIGHT MODE OVERRIDES ─────────────────────────────────── */
/* Higher specificity than :root so it wins regardless of source order */
html[data-theme="light"], [data-theme="light"] {
  /* Surfaces */
  --bg-page:          var(--color-paper);
  --bg-surface:       var(--color-paper);
  --bg-elevated:      var(--color-paper-soft);
  /* Navbar pill stays dark in both modes — matches Figma light-mode reference */
  --bg-navbar:        var(--color-dark-chip);
  --bg-hero-fade:     linear-gradient(rgb(255,255,255) 2%, rgba(255,255,255,0.56) 65%, rgba(255,255,255,0) 100%), #fff;
  --bg-input:         var(--color-paper-cool);
  --bg-submit:        var(--color-paper-soft);

  /* Borders */
  --border-default:   rgba(0, 0, 0, 0.08);
  --border-navbar:    var(--color-dark-chip-border);
  --border-input:     var(--color-ink-border);

  /* Text */
  --text-primary:     var(--color-ink);
  --text-secondary:   var(--color-ink-muted);
  --text-muted:       rgba(33, 33, 34, 0.48);
  --text-placeholder: var(--color-ink-ghost);
  --text-submit:      var(--color-ink-deep);

  /* Chip — keep dark for contrast with Corten text */
  --chip-bg:          var(--color-dark-chip);
  --chip-text:        var(--color-corten);

  /* Secondary button */
  --btn-ghost-border: var(--color-ink-ghost);
  --btn-ghost-text:   var(--color-ink);

  /* About radial — softer for light bg */
  --bg-section-radial: radial-gradient(rgba(139,185,255,0.7) 33%, rgba(255,255,255,0.0192) 100%),
                       radial-gradient(rgba(151,242,232,0.7) 29%, rgba(255,255,255,0) 100%),
                       radial-gradient(rgba(255,191,221,0.7) 30%, rgba(255,255,255,0) 100%),
                       #fff;
}

:root {

  /* ─── FONTS ──────────────────────────────────────────────── */
  --font-display: 'TASA Orbiter Display', 'Barlow', 'Arial Black', sans-serif;
  --font-body:    'Raleway', Arial, sans-serif;

  /* ─── BASE COLORS ────────────────────────────────────────── */

  /* Primary */
  --color-iron:         #212122;   /* Main background — industrial dark */
  --color-corten:       #eb5e50;   /* Single warm accent — CTAs, chips, isotipos */
  --color-white:        #ffffff;   /* Primary text, solid secondary buttons */

  /* Submark backgrounds */
  --color-steel:        #20314b;   /* Elvia — estructuras metálicas */
  --color-green-oxide:  #233c39;   /* Abitia — automatización y cerramientos */
  --color-bronze:       #47313b;   /* Fabria — remolques a medida */

  /* Surface / Background layers */
  --color-iron-deep:    #1a1a1b;                      /* Cards on Iron */
  --color-iron-glass:   rgba(33, 33, 34, 0.72);       /* Navbar floating */
  --color-iron-elevated:#2a2a2c;                      /* Dropdowns, inputs */

  /* Text / Neutral */
  --color-silver:       rgba(252, 252, 252, 0.60);    /* Body copy — Figma: rgba(252,252,252,0.6) */
  --color-silver-muted: rgba(252, 252, 252, 0.48);    /* Tertiary, dropdown subs */
  --color-silver-ghost: rgb(123, 123, 128);           /* Placeholders — Figma: rgb(123,123,128) */
  --color-silver-secondary: rgb(147, 147, 153);       /* Secondary text */

  /* Semantic accents */
  --color-corten-soft:  rgba(235, 94, 80, 0.12);      /* Chip background (legacy) */
  --color-corten-glow:  rgba(235, 94, 80, 0.25);      /* Halo, CTA shadow */

  /* Dark UI elements — from Figma */
  --color-dark-chip:    rgb(57, 57, 59);              /* Section chips bg — Figma key color */
  --color-dark-chip-border: rgb(32, 39, 49);          /* Chip/navbar border */
  --color-dark-input-bg: rgba(15, 18, 23, 0);        /* Form input bg (transparent dark) */
  --color-dark-input-border: rgb(81, 81, 84);         /* Form input border */
  --color-dark-btn:     rgb(15, 18, 23);              /* Submark card CTA bg */
  --color-dark-content: rgb(18, 18, 18);              /* Blog/FAQ section bg */

  /* Submark soft (chip/tag backgrounds) */
  --color-elvia-soft:   rgba(32, 49, 75, 0.14);
  --color-abitia-soft:  rgba(35, 60, 57, 0.14);
  --color-fabria-soft:  rgba(71, 49, 59, 0.14);

  /* Tag border colors (submark accent tints) */
  --color-elvia-accent:  #7b94c3;
  --color-abitia-accent: #7ba89f;
  --color-fabria-accent: #b08491;

  /* ─── LIGHT MODE BASE COLORS (Figma) ─────────────────────── */
  --color-paper:        rgb(255, 255, 255);            /* Pure white — content cards */
  --color-paper-soft:   rgb(252, 252, 252);            /* Submit button bg */
  --color-paper-warm:   rgb(249, 249, 249);            /* Navbar in light mode */
  --color-paper-cool:   rgb(245, 245, 245);            /* Form input bg, section dividers */
  --color-ink:          rgb(33, 33, 34);               /* Primary text on light */
  --color-ink-deep:     rgb(26, 26, 28);               /* Strong text on white */
  --color-ink-muted:    rgba(33, 33, 34, 0.65);        /* Body copy on light */
  --color-ink-ghost:    rgb(123, 123, 128);            /* Placeholders (same as dark) */
  --color-ink-border:   rgb(215, 221, 229);            /* Light borders / button strokes */

  /* ─── SEMANTIC THEME TOKENS (DARK — default) ────────────── */
  /* Surfaces */
  --bg-page:            var(--color-iron);             /* App / body bg */
  --bg-surface:         var(--color-iron-deep);        /* Cards on bg */
  --bg-elevated:        var(--color-iron-elevated);    /* Dropdowns, modals */
  --bg-navbar:          var(--color-dark-chip);        /* Floating navbar pill */
  --bg-hero-fade:       linear-gradient(rgb(33,33,34) 0%, rgba(33,33,34,0) 94%), #212122;
  --bg-input:           rgba(15, 18, 23, 0);
  --bg-submit:          var(--color-corten);

  /* Borders */
  --border-default:     rgba(255, 255, 255, 0.08);
  --border-navbar:      var(--color-dark-chip-border);
  --border-input:       var(--color-dark-input-border);

  /* Text */
  --text-primary:       var(--color-white);
  --text-secondary:     var(--color-silver);
  --text-muted:         var(--color-silver-muted);
  --text-placeholder:   var(--color-silver-ghost);
  --text-submit:        var(--color-white);            /* Text on Corten/dark submit */

  /* Chip / Pill */
  --chip-bg:            var(--color-dark-chip);
  --chip-text:          var(--color-corten);
  --chip-border:        transparent;

  /* Secondary button (Conócenos style) */
  --btn-ghost-bg:       transparent;
  --btn-ghost-border:   rgb(123, 123, 128);
  --btn-ghost-text:     var(--color-white);

  /* About section bg radial */
  --bg-section-radial:  radial-gradient(rgba(139,185,255,0.7) 33%, rgba(33,33,34,0.0192) 100%),
                        radial-gradient(rgba(151,242,232,0.7) 29%, rgba(33,33,34,0) 100%),
                        radial-gradient(rgba(255,191,221,0.7) 30%, rgba(33,33,34,0) 100%),
                        #212122;

  /* ─── TYPOGRAPHY ─────────────────────────────────────────── */

  /* Size scale */
  --text-hero:        clamp(48px, 6vw, 72px);
  --text-section-xl:  clamp(42px, 5vw, 64px);
  --text-section-lg:  clamp(36px, 4.5vw, 56px);
  --text-card-title:  24px;
  --text-card-sm:     20px;
  --text-nav-brand:   18px;
  --text-nav-link:    15px;
  --text-dropdown-title: 16px;
  --text-dropdown-sub:   13px;
  --text-body-lg:     18px;
  --text-body:        16px;
  --text-body-sm:     14px;
  --text-chip:        12px;
  --text-tag:         12px;
  --text-btn:         14px;
  --text-btn-lg:      16px;

  /* Weight scale */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  /* Line heights */
  --lh-tight:   1.10;
  --lh-snug:    1.12;
  --lh-normal:  1.25;
  --lh-relaxed: 1.55;
  --lh-loose:   1.65;

  /* Letter spacing */
  --ls-tight:   -0.01em;   /* Display headlines — micro optical correction */
  --ls-normal:  0;
  --ls-chip:    0.14em;    /* Kickers UPPERCASE only */
  --ls-brand:   0.04em;    /* Navbar wordmark */
  --ls-tag:     0.02em;    /* Category tags */

  /* ─── SEMANTIC TYPE ROLES ────────────────────────────────── */
  /* Use as: font-family: var(--t-h1-font); font-size: var(--t-h1-size); etc. */

  --t-hero-font:    var(--font-display);
  --t-hero-size:    var(--text-hero);
  --t-hero-weight:  var(--weight-bold);
  --t-hero-lh:      var(--lh-tight);
  --t-hero-ls:      var(--ls-tight);

  --t-h2-font:      var(--font-display);
  --t-h2-size:      var(--text-section-lg);
  --t-h2-weight:    var(--weight-semibold);
  --t-h2-lh:        var(--lh-snug);
  --t-h2-ls:        var(--ls-tight);

  --t-h3-font:      var(--font-display);
  --t-h3-size:      var(--text-card-title);
  --t-h3-weight:    var(--weight-semibold);
  --t-h3-lh:        var(--lh-normal);
  --t-h3-ls:        var(--ls-normal);

  --t-body-font:    var(--font-body);
  --t-body-size:    var(--text-body);
  --t-body-weight:  var(--weight-regular);
  --t-body-lh:      var(--lh-loose);
  --t-body-ls:      var(--ls-normal);

  --t-body-lg-font:    var(--font-body);
  --t-body-lg-size:    var(--text-body-lg);
  --t-body-lg-weight:  var(--weight-regular);
  --t-body-lg-lh:      var(--lh-relaxed);

  --t-chip-font:    var(--font-body);
  --t-chip-size:    var(--text-chip);
  --t-chip-weight:  var(--weight-semibold);
  --t-chip-ls:      var(--ls-chip);

  --t-code-font:    'Courier New', monospace;
  --t-code-size:    14px;

  /* ─── BORDER RADIUS ──────────────────────────────────────── */
  --radius-xs:    2px;      /* Technical/document assets only */
  --radius-sm:    8px;      /* Secondary small inputs, tags */
  --radius-md:    12px;     /* Timeline images, small assets */
  --radius-lg:    16px;     /* Standard cards */
  --radius-xl:    20px;     /* Textareas, modals */
  --radius-2xl:   24px;     /* Mega-menu, submark cards */
  --radius-pill:  100px;    /* Navbar, buttons, inputs, chips — WEB DEFAULT */

  /* ─── SPACING SCALE ──────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  120px;

  /* Section padding */
  --section-pad-desktop: 120px;
  --section-pad-tablet:  80px;
  --section-pad-mobile:  64px;

  /* ─── ELEVATION / SHADOW ─────────────────────────────────── */
  --shadow-l1:  none;                                             /* Flat — border only */
  --shadow-l2:  0 4px 20px rgba(0, 0, 0, 0.30);                 /* Card hover */
  --shadow-l3:  0 20px 60px rgba(0, 0, 0, 0.50);                /* Navbar, mega-menu */
  --shadow-l4:  0 8px 24px rgba(235, 94, 80, 0.25);             /* CTA primary */
  --shadow-l4-hover: 0 10px 30px rgba(235, 94, 80, 0.35);       /* CTA hover */

  --border-l1:  1px solid rgba(255, 255, 255, 0.06);             /* Cards */
  --border-l2:  1px solid rgba(255, 255, 255, 0.08);             /* Elevated cards, dropdowns */
  --border-l3:  1px solid rgba(255, 255, 255, 0.08);             /* Navbar */

  /* ─── MOTION ─────────────────────────────────────────────── */
  --ease-brand:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:     cubic-bezier(0.16, 1, 0.30, 1);
  --dur-fast:     0.15s;
  --dur-base:     0.25s;
  --dur-slow:     0.60s;

  /* ─── GRADIENTS ──────────────────────────────────────────── */
  --grad-corten-btn: linear-gradient(180deg, #f07264 0%, #eb5e50 100%);
  --grad-halo-corten:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(235,94,80,0.35) 0%, transparent 70%),
    #212122;
  --grad-halo-elvia:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(32,49,75,0.55) 0%, transparent 60%),
    #212122;
  --grad-halo-abitia:
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(35,60,57,0.55) 0%, transparent 60%),
    #212122;
  --grad-halo-fabria:
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(71,49,59,0.55) 0%, transparent 65%),
    #212122;

  /* ─── LAYOUT ─────────────────────────────────────────────── */
  --container-max:  1280px;
  --container-pad:  24px;
  --grid-cols:      12;
  --grid-gap:       24px;
}

/* ─── BASE RESETS ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background-color: var(--color-iron);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
}

/* ─── UTILITY CLASSES ──────────────────────────────────────── */

/* Containers */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Section chip — dark pill with Corten text (Figma) */
.section-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  background: rgb(57, 57, 59);
  color: var(--color-corten);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 16px;
  line-height: 21px;
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}
/* Legacy Corten-soft variant */
.section-chip-corten {
  background: var(--color-corten-soft);
  color: var(--color-corten);
}
.section-chip-neutral {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-btn);
  letter-spacing: 0;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-brand);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.btn-primary {
  background: var(--grad-corten-btn);
  color: var(--color-white);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, var(--shadow-l4);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ed6a5c 0%, #e55446 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, var(--shadow-l4-hover);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.24);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.40);
}
.btn-white {
  background: var(--color-white);
  color: var(--color-iron);
  font-weight: var(--weight-semibold);
}
.btn-white:hover { background: #f5f4f2; }
.btn-submark {
  background: var(--grad-corten-btn);
  color: var(--color-white);
  padding: 14px 28px;
  font-weight: var(--weight-semibold);
  font-size: var(--text-btn-lg);
}
.btn-ghost {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.20);
  padding: 10px 20px;
  font-size: 13px;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* Cards */
.card {
  background: var(--color-iron-deep);
  border: var(--border-l1);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color var(--dur-base) var(--ease-brand),
              transform var(--dur-base) var(--ease-brand);
  overflow: hidden;
}
.card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

/* Category tags */
.cat-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-tag);
  border: 1px solid transparent;
}
.cat-tag-gs     { color: var(--color-corten); border-color: rgba(235,94,80,0.40); }
.cat-tag-elvia  { color: var(--color-elvia-accent); border-color: rgba(123,148,195,0.40); }
.cat-tag-abitia { color: var(--color-abitia-accent); border-color: rgba(123,168,159,0.40); }
.cat-tag-fabria { color: var(--color-fabria-accent); border-color: rgba(176,132,145,0.40); }
.cat-tag-neutral{ color: rgba(255,255,255,0.60); border-color: rgba(255,255,255,0.20); }

/* Inputs */
.input {
  width: 100%;
  height: 52px;
  padding: 0 20px;
  background: transparent;
  border: 1px solid rgb(81, 81, 84);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  transition: border-color var(--dur-fast) ease;
}
.input::placeholder { color: rgb(123, 123, 128); }
.input:focus { outline: none; border-color: rgba(235,94,80,0.60); }

.textarea {
  width: 100%;
  min-height: 96px;
  padding: 16px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-xl);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  resize: vertical;
}
.textarea::placeholder { color: rgb(123, 123, 128); }
.textarea:focus { outline: none; border-color: rgba(235,94,80,0.60); }

.label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  color: var(--color-white);
}

/* Halo backgrounds */
.bg-halo-corten { background: var(--grad-halo-corten); }
.bg-halo-elvia  { background: var(--grad-halo-elvia); }
.bg-halo-abitia { background: var(--grad-halo-abitia); }
.bg-halo-fabria { background: var(--grad-halo-fabria); }

/* Animations */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes haloBreath {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 0.55; }
}

.animate-in { animation: revealUp 0.6s var(--ease-out) forwards; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 160ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.halo-animated { animation: haloBreath 6s ease-in-out infinite; }

/* Navbar */
.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 12px 12px 12px 24px;
  background: var(--color-iron-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--border-l3);
  border-radius: var(--radius-pill);
  z-index: 1000;
  max-width: calc(100vw - 40px);
  box-shadow: var(--shadow-l3);
}