/* KHEDIFARMA Group — hoja de estilos del sitio estático
   Concepto de layout: estantería de almacén — bloques en rejilla de 12 columnas,
   barras verticales del logotipo como motivo gráfico, mucho aire entre secciones. */

/* ───────── Tokens ───────── */
:root {
  /* Color — marca original (Elementor) + variantes accesibles */
  --navy: #0E3875;          /* títulos, barra superior, pie */
  --navy-900: #0A2A58;
  --blue: #496BF2;          /* botones y enlaces (4.5:1 con blanco) */
  --blue-700: #3557D9;      /* hover/active */
  --teal: #2DD6C1;          /* acento (solo sobre navy o con texto navy) */
  --cyan: #46B5CC;          /* color del logotipo, solo decorativo */
  --cyan-700: #1E7F92;      /* cyan accesible para texto pequeño (4.66:1) */
  --ink: #31364A;           /* texto */
  --muted: #5A6472;         /* texto secundario (6:1) */
  --line: #DDE5EE;
  --surface: #FFFFFF;
  --surface-2: #F3F7FA;     /* bandas alternas, tinte frío de marca */
  --surface-3: #E8F1F6;
  --danger: #B42318;
  --success: #12704F;

  /* Tipografía */
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);      /* 26→32 */
  --fs-3xl: clamp(2rem, 1.45rem + 2.2vw, 2.75rem);      /* 32→44 */
  --fs-4xl: clamp(2.375rem, 1.5rem + 3.6vw, 3.75rem);   /* 38→60 */
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Espaciado — escala 4/8 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 4rem + 4vw, 112px);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1200px;

  /* Forma */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --shadow: 0 1px 2px rgba(14, 56, 117, .06), 0 8px 24px -8px rgba(14, 56, 117, .18);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --z-header: 50;
  color-scheme: light;
}

/* ───────── Base ───────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--fs-4xl); font-weight: 700; }
h2 { font-size: var(--fs-3xl); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.01em; }
h4 { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-snug); letter-spacing: -0.005em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--blue-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }
a, button, input, select, textarea, label { touch-action: manipulation; -webkit-tap-highlight-color: rgba(73, 107, 242, .15); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { width: 24px; height: 24px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--navy); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); font-weight: 600; }
.skip-link:focus { top: calc(var(--s-4) + env(safe-area-inset-top, 0px)); color: #fff; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ───────── Botones ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .01em;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--r-sm);
  background: var(--blue); color: #fff; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease), border-color .2s var(--ease);
}
.btn:hover { background: var(--blue-700); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn .icon { transition: transform .2s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn--accent { background: var(--teal); color: var(--navy); }
.btn--accent:hover { background: #22C2AE; color: var(--navy-900); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface-2); color: var(--navy); border-color: var(--cyan); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--navy); text-decoration: none; min-height: 44px; }
.link-arrow:hover { color: var(--blue-700); }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow .icon { transition: transform .2s var(--ease); }

/* ───────── Barra superior + cabecera ───────── */
.topbar { background: var(--navy); color: #E6EEF8; font-size: var(--fs-xs); }
.topbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-block: var(--s-2); }
.topbar__item { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
.topbar__item .icon { color: var(--teal); }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--teal); text-decoration: underline; }
.topbar :focus-visible { outline-color: var(--teal); }

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header);
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.4) blur(8px);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 76px; }
.brand { display: block; flex: none; }
.brand img { width: 152px; }
.nav__list { list-style: none; display: flex; align-items: center; gap: var(--s-1); }
.nav__list a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-2);
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); white-space: nowrap;
  color: var(--ink); text-decoration: none; border-radius: var(--r-sm); position: relative;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__list a:not(.btn):hover { color: var(--navy); background: var(--surface-2); }
.nav__list a[aria-current="page"]:not(.btn) { color: var(--navy); font-weight: 600; }
.nav__list a[aria-current="page"]:not(.btn)::after {
  content: ""; position: absolute; left: var(--s-2); right: var(--s-2); bottom: 6px; height: 2px; background: var(--teal); border-radius: 2px;
}
.nav__cta { margin-left: var(--s-2); }
.nav__cta .btn { min-height: 44px; }
.nav-toggle { display: none; }

@media (max-width: 1279px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3);
    font: 600 var(--fs-sm)/1 var(--font-display); color: var(--navy);
    background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
  }
  .nav-toggle__close { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0; background: var(--surface);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    padding: var(--s-3) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--s-5) max(var(--gutter), env(safe-area-inset-left, 0px));
    max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain;
  }
  .js .nav:not(.is-open) { display: none; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a:not(.btn) { min-height: 52px; font-size: var(--fs-base); border-bottom: 1px solid var(--surface-3); border-radius: 0; padding-inline: var(--s-1); }
  .nav__list a[aria-current="page"]:not(.btn)::after { left: auto; right: var(--s-1); top: 50%; bottom: auto; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); }
  .nav__cta { margin: var(--s-4) 0 0; }
  .nav__cta .btn { width: 100%; min-height: 52px; font-size: var(--fs-base); }
}
@media (max-width: 560px) {
  .topbar__mails span[aria-hidden], .topbar__mails a + span + a { display: none; }
  .brand img { width: 140px; }
  .site-header__inner { min-height: 64px; }
}

/* ───────── Secciones ───────── */
.section { padding-block: var(--section-y) calc(var(--section-y) + 8px); }
.section--tint { background: var(--surface-2); }
.section--catalog { padding-top: var(--s-6); }
.section--tight { padding-block: var(--s-8) calc(var(--s-8) + 8px); }
.section__head { display: grid; gap: var(--s-4); max-width: 46rem; margin-bottom: var(--s-7); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-700);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--teal); border-radius: 2px; }
.lead { font-size: var(--fs-lg); line-height: 1.6; color: var(--ink); max-width: 38em; }
.prose { display: grid; gap: var(--s-4); max-width: 65ch; }
.prose p { color: var(--ink); }
.muted { color: var(--muted); }

/* Motivo de barras del logotipo */
.bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; }
.bars span { width: 4px; border-radius: 2px; background: var(--navy); }
.bars span:nth-child(even) { background: var(--cyan); }
.bars span:nth-child(1) { height: 60%; }
.bars span:nth-child(2) { height: 52%; }
.bars span:nth-child(3) { height: 44%; }
.bars span:nth-child(4) { height: 38%; }
.bars span:nth-child(5) { height: 70%; }
.bars span:nth-child(6) { height: 30%; }
.bars span:nth-child(7) { height: 64%; }
.bars span:nth-child(8) { height: 26%; }
.bars span:nth-child(9) { height: 58%; }
.bars span:nth-child(10) { height: 24%; }
.bars span:nth-child(11) { height: 52%; }
.bars span:nth-child(12) { height: 24%; }
.bars span:nth-child(13) { height: 48%; }
.bars span:nth-child(14) { height: 24%; }


/* ───────── Hero de inicio ───────── */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); padding-block: var(--s-8) var(--s-9); }
.hero + .section { padding-top: var(--s-8); }
.hero__copy { display: grid; gap: var(--s-5); min-width: 0; }
.hero h1 span { display: block; color: var(--cyan-700); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.hero__media { position: relative; min-width: 0; }
.hero__media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.hero__badge {
  position: absolute; left: calc(-1 * var(--s-6)); bottom: var(--s-6);
  display: flex; align-items: center; gap: var(--s-4);
  background: var(--navy); color: #fff; padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  box-shadow: 0 12px 32px -10px rgba(10, 42, 88, .55);
}
.hero__badge strong { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--teal); font-variant-numeric: tabular-nums; }
.hero__badge span { font-size: var(--fs-sm); line-height: 1.35; max-width: 12ch; }
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); padding-block: var(--s-8) var(--s-9); }
  .hero__media img { aspect-ratio: 3 / 2; }
  .hero__badge { left: var(--s-4); bottom: calc(-1 * var(--s-5)); }
}

/* ───────── Cifras ───────── */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.facts > div { display: grid; gap: var(--s-1); padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.facts > div + div { padding-left: var(--s-5); border-left: 1px solid var(--line); }
.facts dt { font-size: var(--fs-sm); color: var(--muted); order: 2; }
.facts dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; order: 1; }
.facts + .split { margin-top: var(--s-9); }
@media (max-width: 760px) {
  .facts + .split { margin-top: var(--s-8); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ───────── Split (texto + imagen) ───────── */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; }
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }
.split--top .channels { grid-template-columns: 1fr; }
.split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--r-lg); }
.split__body { display: grid; gap: var(--s-5); min-width: 0; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .split--reverse > :first-child { order: 0; }
  .split__media img { aspect-ratio: 16 / 10; }
}

/* ───────── Listas de compromisos ───────── */
.commit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7) var(--s-8); align-items: start; }
.commit__col { display: grid; gap: var(--s-5); min-width: 0; }
.commit__col h3 { padding-bottom: var(--s-3); border-bottom: 2px solid var(--navy); }
.commit__col--alt { background: var(--navy); color: #E6EEF8; padding: var(--s-6); border-radius: var(--r-lg); }
.commit__col--alt h3 { color: #fff; border-color: var(--teal); }
.checklist { list-style: none; display: grid; gap: var(--s-4); }
.checklist li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.checklist .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--cyan-700); stroke-width: 2.25; }
.commit__col--alt .checklist .icon { color: var(--teal); }
@media (max-width: 880px) { .commit { grid-template-columns: 1fr; } }

/* ───────── Marcas ───────── */
.brands { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.brands li { display: grid; place-items: center; min-height: 112px; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .2s var(--ease); }
.brands li:hover { border-color: var(--cyan); }
.brands img { max-height: 52px; width: auto; object-fit: contain; }
@media (max-width: 760px) { .brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brands li { min-height: 96px; padding: var(--s-4); } .brands img { max-height: 44px; } }

/* ───────── Banda CTA ───────── */
.cta-band { background: var(--navy); color: #E6EEF8; position: relative; overflow: hidden; }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; padding-block: var(--s-8) calc(var(--s-8) + 8px); }
.cta-band h2 { color: #fff; font-size: var(--fs-2xl); }
.cta-band p { margin-top: var(--s-3); max-width: 52ch; }
.cta-band .bars { position: absolute; right: -8px; bottom: -6px; opacity: .14; height: 140px; }
.cta-band .bars span { background: #fff; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); position: relative; }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: var(--teal); }
.cta-band :focus-visible { outline-color: var(--teal); }
@media (max-width: 760px) { .cta-band__inner { grid-template-columns: 1fr; } }

/* ───────── Cabecera de página interna ───────── */
.page-hero { background: var(--surface-2); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: -48px 0; pointer-events: none;
  background: url("../img/skyline-panama.jpg") center 58% / cover no-repeat;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, rgba(0, 0, 0, .6) 62%, #000 88%);
  mask-image: linear-gradient(90deg, transparent 38%, rgba(0, 0, 0, .6) 62%, #000 88%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero__inner { display: grid; gap: var(--s-4); padding-block: var(--s-8) calc(var(--s-8) + 8px); max-width: 60rem; }
.page-hero h1 { font-size: var(--fs-3xl); }
.page-hero .bars { display: none; }
@media (max-width: 760px) {
  .page-hero::before {
    background-position: 30% 58%;
    -webkit-mask-image: linear-gradient(180deg, transparent 15%, rgba(0, 0, 0, .35) 100%);
    mask-image: linear-gradient(180deg, transparent 15%, rgba(0, 0, 0, .35) 100%);
  }
}

/* ───────── Visión / Misión / Valores ───────── */
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.vm article { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.vm article:first-child { background: var(--navy); border-color: var(--navy); color: #E6EEF8; }
.vm article:first-child h3 { color: #fff; }
.vm article:first-child .eyebrow { color: var(--teal); }
.vm + .section__head { margin-top: var(--s-9); }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; } .vm + .section__head { margin-top: var(--s-8); } }
.values { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.values li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-2); border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: var(--fs-lg); }
.values li::before { content: ""; width: 4px; height: 24px; border-radius: 2px; background: var(--teal); flex: none; }
.values li:nth-child(even)::before { background: var(--cyan); }
@media (max-width: 760px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .values li { font-size: var(--fs-base); } }

/* ───────── Farmacovigilancia ───────── */
.notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) var(--s-6); border-left: 4px solid var(--teal); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.notice .icon { width: 28px; height: 28px; color: var(--navy); }
.notice p { font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: var(--fs-lg); line-height: 1.4; }
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.channel { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.channel--primary { border-color: var(--navy); box-shadow: inset 0 4px 0 var(--navy); }
.channel h3 { font-size: var(--fs-lg); }
.channel .tag { justify-self: start; font-size: var(--fs-xs); font-weight: 600; font-family: var(--font-display); color: var(--cyan-700); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 760px) { .channels { grid-template-columns: 1fr; } }
.contact-list { list-style: none; display: grid; gap: var(--s-3); }
.contact-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.contact-list .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--cyan-700); }
.contact-list a { color: inherit; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--blue-700); }
.downloads { list-style: none; display: grid; border-top: 1px solid var(--line); }
.downloads a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-2); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: background-color .2s var(--ease);
}
.downloads a:hover { background: var(--surface-2); color: var(--navy); }
.downloads .file { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface-3); color: var(--navy); }
.downloads strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: var(--fs-base); line-height: 1.35; }
.downloads small { color: var(--muted); font-size: var(--fs-sm); }
.downloads .go { color: var(--blue-700); display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 600; font-size: var(--fs-sm); font-family: var(--font-display); }
@media (max-width: 560px) { .downloads a { grid-template-columns: 40px minmax(0, 1fr); } .downloads .go { display: none; } }

/* ───────── Contacto ───────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.contact-cards { display: grid; gap: var(--s-5); }
.contact-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); }
.contact-card .ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--surface-3); color: var(--navy); }
.contact-card .h3-like { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--s-1); }
.contact-card p, .contact-card a { color: var(--ink); overflow-wrap: anywhere; }
.map { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-lg); background: var(--surface-3); }
.map-link { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border: 1px dashed var(--cyan); border-radius: var(--r-lg); background: var(--surface-2); text-decoration: none; color: var(--navy); font-family: var(--font-display); font-weight: 600; }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ───────── Formularios ───────── */
.form-panel { padding: clamp(var(--s-5), 4vw, var(--s-7)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.form-panel > h2 { font-size: var(--fs-2xl); }
.form-panel > p { margin-top: var(--s-2); color: var(--muted); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-5); margin-top: var(--s-6); }
.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-sm); color: var(--navy); }
.field .req { color: var(--danger); margin-left: 2px; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  font: inherit; font-size: var(--fs-base); color: var(--ink);
  background: var(--surface); border: 1px solid #B8C6D6; border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field select { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3875' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(73, 107, 242, .25); }
.field [aria-invalid="true"] { border-color: var(--danger) !important; }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }
.hint { font-size: var(--fs-sm); color: var(--muted); }
.error { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--danger); font-weight: 500; }
.error:empty { display: none; }
.error .icon { width: 16px; height: 16px; }
.file-input { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-4); border: 1px dashed #9FB2C7; border-radius: var(--r-sm); background: var(--surface-2); }
.file-input input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-input:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(73, 107, 242, .25); }
.file-input__btn { pointer-events: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font: 600 var(--fs-sm)/1 var(--font-display); color: var(--navy); }
.file-input__name { font-size: var(--fs-sm); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input.has-file .file-input__name { color: var(--ink); font-weight: 600; }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); cursor: pointer; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-2); }
.form__foot .hint { flex: 1 1 220px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-size: var(--fs-sm); }
.form-status:empty, .form-status[hidden] { display: none; }
.form-status .icon { width: 22px; height: 22px; }
.form-status--ok { background: #E7F6EF; color: var(--success); }
.form-status--err { background: #FDECEA; color: var(--danger); }
.form-status--info { background: var(--surface-3); color: var(--navy); }
.form-status strong { display: block; font-family: var(--font-display); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ───────── Catálogo ───────── */
.catalog-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: end; margin-bottom: var(--s-5); }
.search { position: relative; }
.search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 44px !important; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.chip { min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 500 var(--fs-sm)/1 var(--font-display); cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.chip:hover { border-color: var(--cyan); color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .n { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 4px; }
.catalog-count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.catalog-group + .catalog-group { margin-top: var(--s-7); }
.catalog-group h2 { font-size: var(--fs-xl); padding-bottom: var(--s-3); border-bottom: 2px solid var(--navy); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.catalog-group h2 span { font: 500 var(--fs-sm)/1 var(--font-body); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.catalog-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.catalog-list li { display: grid; gap: 2px; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.catalog-list li:target, .catalog-list li.is-target { background: #E9FBF8; box-shadow: inset 3px 0 0 var(--teal); }
.catalog-list strong { font-family: var(--font-display); font-weight: 600; color: var(--navy); }
.catalog-list span { font-size: var(--fs-sm); color: var(--muted); }
.empty { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-7) var(--s-6); border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.empty h2 { font-size: var(--fs-xl); }
@media (max-width: 560px) { .catalog-tools { grid-template-columns: 1fr; } }

/* ───────── Pie ───────── */
.site-footer { background: var(--surface-2); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: var(--s-7); padding-block: var(--s-8) var(--s-7); }
.site-footer__brand { display: grid; gap: var(--s-4); align-content: start; }
.site-footer__brand img { width: 176px; }
.site-footer__brand p { color: var(--muted); max-width: 34ch; }
.site-footer__title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-700); margin-bottom: var(--s-4); }
.site-footer__nav ul { list-style: none; display: grid; gap: var(--s-1); }
.site-footer__nav a { display: inline-flex; min-height: 36px; align-items: center; color: var(--ink); text-decoration: none; }
.site-footer__nav a:hover { color: var(--blue-700); text-decoration: underline; }
.site-footer__bar { background: var(--navy); color: #C9D6E8; font-size: var(--fs-xs); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); padding-block: var(--s-4); }
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ───────── 404 ───────── */
.notfound { display: grid; gap: var(--s-5); justify-items: start; padding-block: var(--s-10); max-width: 40rem; }
.notfound .code { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .12em; color: var(--cyan-700); text-transform: uppercase; }

/* ───────── Movimiento ───────── */
/* Animaciones de entrada, contadores y parallax: assets/js/motion.js (GSAP + ScrollTrigger) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .topbar, .site-header, .cta-band, .site-footer__bar, .nav-toggle { display: none !important; }
}