/* ==========================================================================
   AVVIA BIOMEDICS — Design tokens
   Colors, type scale, spacing, radii, shadows.
   Source of truth for every surface: website, catalog, packaging,
   slide decks, regulatory docs, social.
   ========================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Helvetica is the compliance / print fallback used in regulatory docs */
@font-face {
  font-family: 'HelveticaLT';
  src: url('fonts/Helvetica-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========== COLORS — CORE BRAND ==========
     Pulled directly from the Avvia logo. The deep forest green is the
     single most-used color; mint is the accent within the green family;
     orange is the activation spark (never a background). */

  --brand-forest:        #00453D;  /* Primary — verde oficial del arte aprobado Aditya (REEMPLAZA aproximación previa) */
  --brand-forest-deep:   #002E28;  /* Hover / pressed / darkest text on white */
  --brand-forest-ink:    #001814;  /* Near-black for body copy */
  --brand-mint:          #00A460;  /* Accent — oficial del arte aprobado */
  --brand-mint-soft:     #4BC68A;  /* Illustrative fills, badges */
  --brand-orange:        #EC6D22;  /* Spark — oficial del arte aprobado */
  --brand-orange-light:  #FF7034;  /* Naranja secundario del arte */

  /* ========== NEUTRALS ========== */
  --ink-900:             #2C2E35;  /* Body text on white — gris oficial del arte */
  --ink-700:             #3E404A;
  --ink-500:             #7D7E83;  /* oficial del arte */
  --ink-400:             #A0A2A7;
  --ink-300:             #C8CAD0;
  --ink-200:             #E4E6EA;
  --ink-100:             #F1F3F5;
  --ink-050:             #F8F9FA;
  --paper:               #FFFFFF;
  --paper-warm:          #FAFAF5;

  /* ========== SEMANTIC — FOREGROUND ========== */
  --fg-1:                var(--ink-900);  /* Primary text */
  --fg-2:                var(--ink-700);  /* Secondary text */
  --fg-3:                var(--ink-500);  /* Muted text */
  --fg-inverse:          #FFFFFF;         /* Text on forest/orange fills */
  --fg-brand:            var(--brand-forest);
  --fg-accent:           var(--brand-mint);
  --fg-spark:            var(--brand-orange);

  /* ========== SEMANTIC — BACKGROUND ========== */
  --bg-page:             var(--paper);
  --bg-surface:          var(--paper);
  --bg-subtle:           var(--ink-050);
  --bg-muted:            var(--ink-100);
  --bg-brand:            var(--brand-forest);
  --bg-brand-deep:       var(--brand-forest-deep);
  --bg-accent-soft:      #E5F5EC;      /* Mint tint */
  --bg-spark-soft:       #FDEADB;      /* Orange tint */

  /* ========== SEMANTIC — STATE ========== */
  --state-success:       var(--brand-mint);
  --state-success-bg:    #E5F5EC;
  --state-warning:       var(--brand-orange);
  --state-warning-bg:    #FDEADB;
  --state-danger:        #C8342B;
  --state-danger-bg:     #FBE8E6;
  --state-info:          #2470B8;
  --state-info-bg:       #E5EEF7;

  /* ========== BORDERS & RADII ========== */
  --border-hairline:     1px solid var(--ink-200);
  --border-strong:       1px solid var(--ink-300);
  --border-brand:        1px solid var(--brand-forest);

  --radius-xs:           2px;   /* Inputs, chips on packaging */
  --radius-sm:           4px;   /* Buttons default */
  --radius-md:           8px;   /* Cards, inputs on web */
  --radius-lg:           12px;  /* Larger containers, modals */
  --radius-xl:           20px;  /* Hero cards, feature panels */
  --radius-pill:         999px;

  /* ========== SHADOWS — quiet, medical ========== */
  --shadow-xs:           0 1px 2px rgba(0, 46, 40, 0.06);
  --shadow-sm:           0 2px 6px rgba(0, 46, 40, 0.08);
  --shadow-md:           0 6px 16px rgba(0, 46, 40, 0.10);
  --shadow-lg:           0 16px 40px rgba(0, 46, 40, 0.14);
  --shadow-inset:        inset 0 0 0 1px rgba(0, 69, 61, 0.08);

  /* ========== SPACING (4pt grid) ========== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ========== TYPE — FAMILIES ==========
     Gotham is the official display + UI face (from the logo + packaging).
     Helvetica is the regulatory / print fallback.
     System stack used if Gotham fails to load. */
  --font-display:  'Gotham', 'HelveticaLT', 'Helvetica Neue', Arial, sans-serif;
  --font-body:     'Gotham', 'HelveticaLT', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-regulatory: 'HelveticaLT', 'Helvetica Neue', Arial, sans-serif;

  /* ========== TYPE — SCALE (base 16) ========== */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-80: 80px;

  /* Line heights */
  --lh-tight:  1.08;  /* @kind font */
  --lh-snug:   1.22;  /* @kind font */
  --lh-normal: 1.45;  /* @kind font */
  --lh-loose:  1.6;   /* @kind font */

  /* Weights (Gotham Book 400, Medium 500, Bold 700) */
  --fw-book:    400;  /* @kind font */
  --fw-medium:  500;  /* @kind font */
  --fw-bold:    700;  /* @kind font */

  /* Tracking */
  --ls-tightest: -0.02em;
  --ls-tight:    -0.01em;
  --ls-normal:   0;       /* @kind font */
  --ls-wide:     0.06em;
  --ls-widest:   0.14em;  /* used for "BIOMEDICS" / eyebrow caps */
}

/* ========== SEMANTIC TYPE ROLES ========== */
.display-1, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-80);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tightest);
  color: var(--fg-1);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Eyebrow / kicker — mirrors the "BIOMEDICS" tag in the logo */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.eyebrow--spark { color: var(--fg-spark); }

/* Body */
.body-lg, p.lead {
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
p, .body {
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.body-sm, small {
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Regulatory / compliance text — used on fichas técnicas and package inserts */
.regulatory {
  font-family: var(--font-regulatory);
  font-weight: var(--fw-book);
  font-size: var(--fs-12);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

/* Code / SKU / lot numbers */
code, .mono, .sku {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
}

/* Base reset */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-page);
  margin: 0;
}

/* ============================================================
   Responsive: tablet y celular.
   Los estilos de app.js van en línea (escritorio); estas reglas
   los ajustan en pantallas pequeñas, por eso usan !important.
   ============================================================ */
html, body { overflow-x: hidden; }
img { max-width: 100%; }
.hdr-burger { display: none; }

@media (max-width: 960px) {
  .hdr { padding: 12px 20px !important; position: sticky; }
  .hdr-phone { display: none !important; }
  .hdr-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: 0; padding: 0;
    background: transparent; border: 1px solid #E4E6EA; border-radius: 8px;
    color: #00453D; cursor: pointer; order: 3;
  }
  .hdr-actions { order: 2; margin-left: auto; margin-right: -12px; }
  .hdr-nav {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0 !important;
    background: #fff; border-bottom: 1px solid #E4E6EA;
    box-shadow: 0 6px 16px rgba(0,46,40,0.10); padding: 8px 20px 16px;
  }
  .hdr-nav.is-open { display: flex !important; }
  .hdr-nav a { padding: 14px 0; font-size: 16px !important; border-bottom: 1px solid #F1F3F5; }
  .hdr-nav a:last-child { border-bottom: none; }

  .sec { padding: 56px 24px !important; }
  .sec-title { font-size: 30px !important; line-height: 1.15 !important; }
  .stack-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }

  .hero { min-height: 0 !important; display: flex; flex-direction: column; }
  .hero-media {
    position: relative !important; order: 2; width: 100% !important;
    aspect-ratio: 4 / 3; border-left: none !important; border-top: 1px solid #E4E6EA;
  }
  .hero-media img { object-fit: contain !important; }
  .hero-inner { order: 1; padding: 48px 24px 40px !important; width: 100%; box-sizing: border-box; }
  .hero-title { font-size: 52px !important; }

  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px !important; }
  .value-item:nth-child(odd) { border-left: none !important; padding-left: 0 !important; }

  .ftr { padding: 48px 24px 24px !important; }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; }
  .ftr-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .hdr { padding: 10px 16px !important; gap: 10px !important; }
  .hdr-nav { padding: 4px 16px 12px; }
  .hdr-actions a { padding: 8px 10px !important; font-size: 12px !important; }

  .sec { padding: 44px 16px !important; }
  .sec-title { font-size: 26px !important; }

  .hero-inner { padding: 36px 16px 32px !important; }
  .hero-title { font-size: 40px !important; letter-spacing: -0.02em !important; margin: 14px 0 !important; }
  .hero-inner p { font-size: 16px !important; margin-bottom: 24px !important; }
  .hero-inner a { flex: 1 1 100%; justify-content: center; }

  .svc-card { padding: 22px !important; }
  .cat-img { padding: 12px 16px !important; }
  .pg-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; }
  #producto a[target] { flex: 1 1 100%; justify-content: center; font-size: 15px !important; padding: 14px 16px !important; }

  .about-photos { grid-template-rows: 150px 150px !important; gap: 8px !important; }

  .values-grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: 24px !important; }
  .value-item { border-left: none !important; padding: 0 !important; }

  .cta-actions { flex-wrap: wrap !important; white-space: normal !important; width: 100%; flex-shrink: 1 !important; }
  .cta-actions a { flex: 1 1 100%; justify-content: center; }
  .cta-text { flex-basis: 100% !important; }

  .ftr { padding: 40px 16px 96px !important; }
  .ftr-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }

  .wa-fab { bottom: 16px !important; right: 16px !important; padding: 12px !important; }
  .wa-fab-label { display: none; }
}