/* =============================================================
   OLISEARCH — Design System Tokens
   ============================================================= */

:root {
  --font-display:  'Raleway', sans-serif;
  --font-heading:  'DM Sans', sans-serif;
  --font-mono:     'DM Mono', monospace;
  --font-ui:       'Inter', sans-serif;

  --text-h1:       96px;
  --text-h2:       44px;
  --text-h3:       32px;
  --text-h4:       24px;
  --text-h5:       20px;
  --text-cta:      14px;
  --text-body-l:   18px;
  --text-body-m:   16px;
  --text-body-s:   14px;
  --text-body-xs:  12px;

  --weight-black:    900;
  --weight-bold:     700;
  --weight-semibold: 600;
  --weight-medium:   500;
  --weight-regular:  400;

  --lh-h1:      1;
  --lh-h2:      1.1;
  --lh-h3:      1;
  --lh-h4:      1.2;
  --lh-cta:     20px;
  --lh-body-l:  28px;
  --lh-body-m:  1.3;
  --lh-body-s:  20px;
  --lh-body-xs: 20px;

  --ls-h2: -0.88px;

  /* Neutrales */
  --color-n0:   #FFFFFF;
  --color-n50:  #F9FAFB;
  --color-n70:  #F6F7F9;
  --color-n100: #EEEEED;
  --color-n200: #E0E4DF;
  --color-n300: #C2C6C0;
  --color-n400: #9DA09B;
  --color-n500: #6B6E69;
  --color-n700: #3A3C39;
  --color-n900: #111210;

  /* Marca */
  --color-brand:       #F36402;
  --color-brand-dark:  #D94420;
  --color-brand-tint:  #FFF0E8;
  --color-surface:     #E0E4DF;
  --color-ink:         #111210;

  /* Texto */
  --color-text-primary:   #111210;
  --color-text-secondary: #3A3C39;
  --color-text-tertiary:  #4C4E4B;
  --color-text-brand:     #EB650A;
  --color-text-on-dark:   #FFFFFF;
  --color-text-disabled:  #9DA09B;

  /* Semánticos */
  --color-success:      #52A85A;
  --color-success-bg:   #EAF6EC;
  --color-success-text: #1E6B25;
  --color-warning:      #D4920B;
  --color-warning-bg:   #FEF6E4;
  --color-warning-text: #8A5E05;
  --color-error:        #D94444;
  --color-error-bg:     #FEECEC;
  --color-error-text:   #8B2020;
  --color-info:         #3A7BC8;
  --color-info-bg:      #E8F2FC;
  --color-info-text:    #1A4E84;

  /* Radius */
  --radius-s:    16px;
  --radius-m:    24px;
  --radius-xl:   48px;
  --radius-full: 9999px;

  /* Spacing */
  --space-2:   8px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  40px;
  --space-10: 56px;

  /* Shadows */
  --shadow-very-high: 0px 12px 16px rgba(22,22,35,.48);
  --shadow-high:      0px  8px 16px rgba(22,22,35,.32);
  --shadow-medium:    0px  6px 12px rgba(22,22,35,.32);
  --shadow-low:       0px  4px  8px rgba(22,22,35,.12);

  /* Gradientes */
  --gradient-btn: linear-gradient(180deg, #E43C11 -25.36%, #F36402 54%, #F08A22 114.2%);

  /* Aliases de componente */
  --color-background-primary:   var(--color-n0);
  --color-background-secondary: var(--color-n50);
  --color-border-secondary:     var(--color-n200);
  --color-border-tertiary:      var(--color-n100);
  --border-radius-xl:           var(--radius-m);
  --border-radius-lg:           var(--radius-s);
}


/* ---- Reset base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-heading);
  font-size:   var(--text-body-m);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body-m);
  color:       var(--color-text-primary);
  background:  var(--color-n0);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---- Tipografía ---- */
h1 { font-family: var(--font-ui);      font-size: var(--text-h1); font-weight: var(--weight-bold);     line-height: var(--lh-h1); }
h2 { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--weight-black);    line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1; }
h4 { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: 1.2; }
h5, h6 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: var(--weight-bold); line-height: 1.4; }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ---- Utilities ---- */
.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.section   { padding: 80px 0; }

.text-center { text-align: center; }
.text-brand  { color: var(--color-text-brand); }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.text-muted  { color: var(--color-text-tertiary); }

/* ---- Botones ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: var(--text-cta); font-weight: var(--weight-medium);
  line-height: var(--lh-cta); border: none; border-radius: var(--radius-full);
  cursor: pointer; transition: background-color .2s, box-shadow .2s; text-decoration: none;
}
.btn-primary   { background: var(--color-brand);      color: var(--color-text-on-dark); padding: 12px var(--space-6); }
.btn-primary:hover { background: var(--color-brand-dark); color: var(--color-text-on-dark); }
.btn-secondary { background: transparent; color: var(--color-brand); border: 2px solid var(--color-brand); padding: 10px var(--space-6); }
.btn-secondary:hover { background: var(--color-brand-tint); }
.btn-ghost     { background: var(--color-n50); color: var(--color-text-primary); padding: 12px var(--space-6); }
.btn-ghost:hover { background: var(--color-n100); }
.btn:disabled  { background: var(--color-n200); color: var(--color-text-disabled); cursor: not-allowed; }

/* ---- Universal button (oli-btn) ---- */
.oli-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-heading); font-size: var(--text-body-m); font-weight: var(--weight-semibold);
  line-height: var(--lh-body-m); padding: 12px var(--space-6);
  border-radius: var(--radius-m); border: none; cursor: pointer;
  text-decoration: none; white-space: nowrap; color: var(--color-text-primary);
  transition: filter .2s, box-shadow .2s, opacity .2s;
}
/* Estilo 1 — Naranja (fondos claros) */
.oli-btn--primary {
  background: linear-gradient(180deg, #E43C11 -25.36%, #F36402 54%, #F08A22 114.2%);
  color: var(--color-text-on-dark);
  box-shadow: 0 1px 2px -1px rgba(0,0,0,.10), 0 1px 3px 0 rgba(0,0,0,.10);
}
.oli-btn--primary:hover { color: var(--color-text-on-dark); background: #f36402; }
/* Estilo 1b — Primario blanco (fondos oscuros / sobre imagen) */
.oli-btn--primary-white {
  background: var(--color-n0);
  color:      var(--color-text-brand);
}
.oli-btn--primary-white:hover { background: var(--color-n100); color: var(--color-text-brand); }
/* Estilo 2 — Secundario */
.oli-btn--secondary {
  background: linear-gradient(to top, rgba(9,9,11,.02), rgba(9,9,11,.04));
  color:      #4c4e4b;
  border:     1px solid rgba(9,9,11,.1);
  box-shadow: inset 0 0 4px rgba(0,0,0,.10);
}
.oli-btn--secondary:hover {
  color:      #4c4e4b;
  background: linear-gradient(to top, rgba(9,9,11,.02), rgba(9,9,11,.04)),
              radial-gradient(ellipse at 50% 30%, rgba(246,247,249,.4) 0%, rgba(195,197,198,.3) 55%, rgba(145,146,147,.25) 100%);
  box-shadow: inset 0 0 4px rgba(0,0,0,.10);
}

/* ---- Card ---- */
.card { background: var(--color-n0); border-radius: var(--radius-m); box-shadow: var(--shadow-low); padding: var(--space-6); }
.card:hover { box-shadow: var(--shadow-medium); }

/* ---- Badge ---- */
.badge { display: inline-flex; align-items: center; font-size: var(--text-body-xs); font-weight: var(--weight-medium); border-radius: var(--radius-full); padding: 2px var(--space-2); }
.badge-brand   { background: var(--color-brand-tint);  color: var(--color-brand); }
.badge-success { background: var(--color-success-bg);  color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg);  color: var(--color-warning-text); }
.badge-error   { background: var(--color-error-bg);    color: var(--color-error-text); }
.badge-info    { background: var(--color-info-bg);     color: var(--color-info-text); }
.badge-neutral { background: var(--color-n100);        color: var(--color-text-secondary); }

/* ---- Input ---- */
.input {
  width: 100%; font-family: var(--font-heading); font-size: var(--text-body-m);
  color: var(--color-text-primary); background: var(--color-n0);
  border: 1.5px solid var(--color-n200); border-radius: var(--radius-s);
  padding: 12px var(--space-4); outline: none; transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--color-text-tertiary); }
.input:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-tint); }

/* ---- Shadows ---- */
.shadow-very-high { box-shadow: var(--shadow-very-high); }
.shadow-high      { box-shadow: var(--shadow-high); }
.shadow-medium    { box-shadow: var(--shadow-medium); }
.shadow-low       { box-shadow: var(--shadow-low); }