/* ==========================================================================
   SAAF Services — design system
   --------------------------------------------------------------------------
   Palette derived from the trade itself: cold blue for refrigeration, thermal
   orange for the heat side of the cycle. Every colour pair below is used only
   where it clears WCAG 2.1 AA (4.5:1) — the ratios are noted inline, and the
   two that cannot carry text on white (ice, thermal) are restricted to
   decoration or to the navy background where they measure 7.24 and 5.34.

   Loaded after bootstrap.min.css; the token block re-points Bootstrap's own
   CSS variables so its components inherit the brand instead of being overridden
   component by component.
   ========================================================================== */

/* --------------------------------------------------------------- typography */

@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/inter-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope Variable';
  src: url('../fonts/manrope-var-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Brand ---------------------------------------------------------------- */
  --saaf-deep:      #052A45;  /* 14.75:1 on white  — headings, header, footer */
  --saaf-deep-2:    #0A3C60;  /* gradient partner for the deep surfaces       */
  --saaf-primary:   #0A6EBD;  /*  5.28:1 on white  — links, primary buttons   */
  --saaf-primary-d: #08558F;  /* hover / active                              */
  --saaf-ice:       #22C7E0;  /*  7.24:1 on navy   — decoration only          */
  --saaf-ice-soft:  #5FE1F2;
  --saaf-frost:     #EAF6FB;  /* section backgrounds                          */
  --saaf-frost-2:   #F7FBFD;
  --saaf-thermal:   #F4791F;  /* CTA surface; carries navy ink at 5.34:1      */
  --saaf-thermal-d: #B34A00;  /*  5.39:1 on white  — thermal *text*           */
  --saaf-thermal-s: #FEF1E6;
  --saaf-slate:     #5A6B7A;  /*  5.50:1 on white  — secondary copy           */
  --saaf-slate-d:   #3E5060;  /*  8.33:1 on white  — body copy                */
  --saaf-success:   #0E7C52;  /*  5.22:1 on white                             */
  --saaf-success-s: #E4F5EE;
  --saaf-danger:    #C0392B;  /*  5.44:1 white-on-danger                      */
  --saaf-warning:   #8A5A00;
  --saaf-muted-on-deep: #93A5B3; /* 5.81:1 on navy                            */

  /* Surfaces & lines ------------------------------------------------------ */
  --saaf-border:      #D6E5EF;
  --saaf-border-soft: #E8F1F7;
  --saaf-surface:     #FFFFFF;

  /* Type ------------------------------------------------------------------ */
  --saaf-font-body: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --saaf-font-head: 'Manrope Variable', 'Manrope', 'Inter Variable', 'Inter',
                    -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid scale — clamps mean no breakpoint-by-breakpoint font sizing.      */
  --saaf-fs-hero:  clamp(2.15rem, 1.35rem + 3.4vw, 3.75rem);
  --saaf-fs-h1:    clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  --saaf-fs-h2:    clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem);
  --saaf-fs-h3:    clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --saaf-fs-lead:  clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);

  /* Shape & depth --------------------------------------------------------- */
  --saaf-radius-sm: 8px;
  --saaf-radius:    14px;
  --saaf-radius-lg: 22px;
  --saaf-shadow-sm: 0 1px 2px rgba(5, 42, 69, .06), 0 2px 8px rgba(5, 42, 69, .05);
  --saaf-shadow:    0 2px 6px rgba(5, 42, 69, .07), 0 12px 28px rgba(5, 42, 69, .09);
  --saaf-shadow-lg: 0 8px 20px rgba(5, 42, 69, .10), 0 28px 60px rgba(5, 42, 69, .14);

  --saaf-section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
  --saaf-transition: 180ms cubic-bezier(.2, .7, .35, 1);

  /* Bootstrap hand-off ---------------------------------------------------- */
  --bs-primary:     #0A6EBD;
  --bs-primary-rgb: 10, 110, 189;
  --bs-secondary:     #052A45;
  --bs-secondary-rgb: 5, 42, 69;
  --bs-success:     #0E7C52;
  --bs-success-rgb: 14, 124, 82;
  --bs-danger:      #C0392B;
  --bs-danger-rgb:  192, 57, 43;
  --bs-body-color:  #3E5060;
  --bs-body-color-rgb: 62, 80, 96;
  --bs-body-bg:     #FFFFFF;
  --bs-body-font-family: var(--saaf-font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-heading-color: #052A45;
  --bs-border-color: #D6E5EF;
  --bs-border-radius: var(--saaf-radius-sm);
  --bs-border-radius-lg: var(--saaf-radius);
  --bs-link-color: #0A6EBD;
  --bs-link-color-rgb: 10, 110, 189;
  --bs-link-hover-color: #08558F;
  --bs-focus-ring-color: rgba(10, 110, 189, .35);
  --bs-focus-ring-width: 3px;
}

/* --------------------------------------------------------------------- base */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  /* Safety net: a stray wide element must never give the whole page a
     horizontal scrollbar on a phone. `clip` rather than `hidden` because
     `hidden` would break the sticky header. */
  overflow-x: clip;
  font-family: var(--saaf-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--saaf-slate-d);
  background: var(--saaf-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
  font-family: var(--saaf-font-head);
  color: var(--saaf-deep);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.15;
  text-wrap: balance;
}

h1, .h1 { font-size: var(--saaf-fs-h1); }
h2, .h2 { font-size: var(--saaf-fs-h2); }
h3, .h3 { font-size: var(--saaf-fs-h3); }

p { margin-bottom: 1rem; }

.lead {
  font-size: var(--saaf-fs-lead);
  line-height: 1.6;
  color: var(--saaf-slate);
  max-width: 62ch;
}

a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--saaf-primary-d); }

strong, b { font-weight: 700; color: var(--saaf-deep); }

hr { border-color: var(--saaf-border); opacity: 1; }

/* Keyboard users must always be able to see where they are. */
:focus-visible {
  outline: 3px solid var(--saaf-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.on-deep :focus-visible,
.saaf-header :focus-visible,
.saaf-footer :focus-visible { outline-color: var(--saaf-ice); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 1080;
  padding: .7rem 1.1rem;
  background: var(--saaf-thermal);
  color: var(--saaf-deep);
  font-weight: 700;
  border-radius: 0 0 var(--saaf-radius-sm) var(--saaf-radius-sm);
  transition: top var(--saaf-transition);
}

.skip-link:focus { top: 0; color: var(--saaf-deep); }

/* ----------------------------------------------------------------- layout */

.section { padding-block: var(--saaf-section-y); }
.section--tight { padding-block: calc(var(--saaf-section-y) * .62); }
.section--frost { background: var(--saaf-frost); }
.section--frost-2 { background: var(--saaf-frost-2); }

.section--deep {
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(34, 199, 224, .18) 0%, transparent 55%),
    linear-gradient(158deg, var(--saaf-deep) 0%, var(--saaf-deep-2) 100%);
  color: #E3EFF6;
}

.section--deep h1,
.section--deep h2,
.section--deep h3 { color: #fff; }

.section--deep .lead,
.section--deep p { color: #C3D7E4; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--saaf-font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--saaf-primary);
  margin-bottom: .75rem;
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--saaf-thermal);
}

.section--deep .eyebrow { color: var(--saaf-ice); }

/* A short thermal rule under the section title — the one repeated gesture
   that ties the page together without another box or border. */
.section-title { position: relative; margin-bottom: .85rem; }

.section-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* ----------------------------------------------------------------- header */

.saaf-topbar {
  background: var(--saaf-deep);
  color: var(--saaf-muted-on-deep);
  font-size: .875rem;
}

.saaf-topbar a { color: #CFE6F3; text-decoration: none; }
.saaf-topbar a:hover { color: #fff; text-decoration: underline; }

.saaf-header {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--saaf-border-soft);
  position: sticky;
  top: 0;
  z-index: 1030;
  transition: box-shadow var(--saaf-transition);
}

.saaf-header.is-stuck { box-shadow: var(--saaf-shadow-sm); }

.saaf-logo { display: inline-flex; align-items: center; }
.saaf-logo img,
.saaf-logo__svg { height: 46px; width: auto; display: block; }

@media (max-width: 575.98px) {
  .saaf-logo img,
  .saaf-logo__svg { height: 38px; }
}

.footer-logo .saaf-logo__svg { height: 44px; width: auto; display: block; }

.saaf-nav .nav-link {
  font-family: var(--saaf-font-head);
  font-weight: 600;
  color: var(--saaf-deep);
  padding: .6rem .85rem;
  border-radius: var(--saaf-radius-sm);
  position: relative;
}

.saaf-nav .nav-link:hover { color: var(--saaf-primary); background: var(--saaf-frost); }

.saaf-nav .nav-link.is-active { color: var(--saaf-primary); }

.saaf-nav .nav-link.is-active::after {
  content: '';
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: .28rem;
  height: 3px;
  border-radius: 999px;
  background: var(--saaf-thermal);
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--saaf-font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--saaf-deep);
  border: 1px solid var(--saaf-border);
  border-radius: 999px;
  padding: .35rem .8rem;
  text-decoration: none;
  transition: all var(--saaf-transition);
}

.lang-switch:hover {
  color: var(--saaf-primary);
  border-color: var(--saaf-primary);
  background: var(--saaf-frost);
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  color: #E3EFF6;
  background:
    radial-gradient(90% 120% at 85% 8%, rgba(34, 199, 224, .22) 0%, transparent 58%),
    radial-gradient(70% 90% at 0% 100%, rgba(244, 121, 31, .16) 0%, transparent 60%),
    linear-gradient(155deg, #041F33 0%, var(--saaf-deep) 45%, #0A3C60 100%);
  padding-block: clamp(3.25rem, 2rem + 6vw, 6.5rem);
  overflow: hidden;
}

/* The diagonal that echoes the Open Graph card — one shape, no images. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -45% 55%;
  height: 90%;
  background: linear-gradient(180deg, rgba(10, 110, 189, .35), rgba(34, 199, 224, .06));
  transform: skewX(-14deg);
  z-index: -1;
  pointer-events: none;
}

.hero h1 { font-size: var(--saaf-fs-hero); color: #fff; }
.hero .lead { color: #C7DCE9; max-width: 54ch; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(34, 199, 224, .14);
  border: 1px solid rgba(34, 199, 224, .35);
  color: #9BE9F6;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .38rem .85rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}

.hero-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--saaf-thermal);
  box-shadow: 0 0 0 4px rgba(244, 121, 31, .22);
}

.hero-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }

.hero-points li {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  color: #CFE0EB;
}

.hero-points svg { flex: 0 0 20px; margin-top: .28rem; color: var(--saaf-ice); }

.hero-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--saaf-radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  backdrop-filter: blur(6px);
}

.hero-card .stat-value {
  font-family: var(--saaf-font-head);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.hero-card .stat-label { font-size: .84rem; color: var(--saaf-muted-on-deep); }

/* ---------------------------------------------------------------- buttons */

.btn {
  --bs-btn-font-family: var(--saaf-font-head);
  font-weight: 700;
  border-radius: 10px;
  padding: .72rem 1.35rem;
  letter-spacing: .005em;
  transition: transform var(--saaf-transition), box-shadow var(--saaf-transition),
              background-color var(--saaf-transition), border-color var(--saaf-transition),
              color var(--saaf-transition);
}

.btn:active { transform: translateY(1px); }

.btn-lg { padding: .9rem 1.7rem; font-size: 1.02rem; }
.btn-sm { padding: .45rem .9rem; font-size: .875rem; border-radius: 8px; }

/* The primary CTA carries navy ink on thermal orange (5.34:1). White on this
   orange measures 2.76 and would fail AA — so it is not offered. */
.btn-thermal {
  background: var(--saaf-thermal);
  border: 1px solid var(--saaf-thermal);
  color: var(--saaf-deep);
  box-shadow: 0 6px 16px rgba(244, 121, 31, .28);
}

.btn-thermal:hover,
.btn-thermal:focus {
  background: #FF8A33;
  border-color: #FF8A33;
  color: var(--saaf-deep);
  box-shadow: 0 8px 22px rgba(244, 121, 31, .36);
}

.btn-primary {
  --bs-btn-bg: var(--saaf-primary);
  --bs-btn-border-color: var(--saaf-primary);
  --bs-btn-hover-bg: var(--saaf-primary-d);
  --bs-btn-hover-border-color: var(--saaf-primary-d);
  --bs-btn-active-bg: var(--saaf-primary-d);
  --bs-btn-active-border-color: var(--saaf-primary-d);
}

.btn-outline-deep {
  border: 1px solid var(--saaf-border);
  color: var(--saaf-deep);
  background: #fff;
}

.btn-outline-deep:hover {
  border-color: var(--saaf-primary);
  color: var(--saaf-primary);
  background: var(--saaf-frost);
}

.btn-ghost-light {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  background: transparent;
}

.btn-ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn-whatsapp {
  background: #25D366;
  border: 1px solid #1DA851;
  color: #06301A;
  font-weight: 700;
}

.btn-whatsapp:hover { background: #1DBE5A; color: #06301A; }

/* ------------------------------------------------------------------ cards */

.saaf-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--saaf-border-soft);
  border-radius: var(--saaf-radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--saaf-transition), box-shadow var(--saaf-transition),
              border-color var(--saaf-transition);
}

/* A hairline that warms from ice to primary on hover: the whole hover state,
   no lift-and-shadow cliché required — though we do lift, just barely. */
.saaf-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--saaf-ice), var(--saaf-primary));
  opacity: 0;
  transition: opacity var(--saaf-transition);
  z-index: 2;
}

.saaf-card:hover,
.saaf-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--saaf-shadow);
  border-color: var(--saaf-border);
}

.saaf-card:hover::before,
.saaf-card:focus-within::before { opacity: 1; }

.saaf-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--saaf-frost);
  overflow: hidden;
}

.saaf-card__media img,
.saaf-card__media picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms cubic-bezier(.2, .7, .35, 1);
}

.saaf-card:hover .saaf-card__media img { transform: scale(1.035); }

.saaf-card__body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; flex: 1; }

.saaf-card__title {
  font-family: var(--saaf-font-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--saaf-deep);
  margin-bottom: .45rem;
  line-height: 1.3;
}

.saaf-card__title a { color: inherit; text-decoration: none; }

/* The whole card is clickable, but only the title is a real link — screen
   readers announce one link per card, not three. */
.saaf-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.saaf-card__text { color: var(--saaf-slate); font-size: .945rem; margin-bottom: 1rem; }

.saaf-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

.saaf-card__link {
  font-family: var(--saaf-font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--saaf-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.saaf-card__link svg { transition: transform var(--saaf-transition); }
.saaf-card:hover .saaf-card__link svg { transform: translateX(3px); }

/* Service card: the icon plate replaces a photo when there is no image yet. */
.service-icon {
  width: 54px;
  height: 54px;
  border-radius: var(--saaf-radius-sm);
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--saaf-frost), #DDF0F8);
  color: var(--saaf-primary);
  margin-bottom: 1rem;
  flex: 0 0 auto;
}

.service-icon svg { width: 28px; height: 28px; }

/* ----------------------------------------------------------------- prices */

.price {
  font-family: var(--saaf-font-head);
  font-weight: 800;
  color: var(--saaf-deep);
  font-size: 1.12rem;
  white-space: nowrap;
}

.price--request {
  font-size: .92rem;
  font-weight: 700;
  color: var(--saaf-thermal-d);
}

/* ----------------------------------------------------------------- badges */

.pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .28rem .6rem;
  border-radius: 999px;
  line-height: 1.3;
}

.pill--stock  { background: var(--saaf-success-s); color: var(--saaf-success); }
.pill--out    { background: #FBECEA; color: var(--saaf-danger); }
.pill--order  { background: var(--saaf-thermal-s); color: var(--saaf-thermal-d); }
.pill--cat    { background: var(--saaf-frost); color: var(--saaf-primary); }
.pill--brand  { background: #EEF2F5; color: var(--saaf-slate-d); }

/* ------------------------------------------------------------ testimonials */

.quote-card {
  background: #fff;
  border: 1px solid var(--saaf-border-soft);
  border-radius: var(--saaf-radius);
  padding: 1.6rem 1.5rem 1.35rem;
  height: 100%;
  position: relative;
}

.quote-card::before {
  content: '"';
  position: absolute;
  top: .1rem;
  right: 1.1rem;
  font-family: var(--saaf-font-head);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--saaf-frost);
  pointer-events: none;
}

.quote-card blockquote { font-size: 1rem; color: var(--saaf-slate-d); margin: 0 0 1.1rem; }

.quote-card figcaption { display: flex; align-items: center; gap: .75rem; }

.quote-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 46px;
  background: var(--saaf-frost);
}

.quote-avatar--initials {
  display: grid;
  place-items: center;
  font-family: var(--saaf-font-head);
  font-weight: 800;
  color: var(--saaf-primary);
  background: var(--saaf-frost);
}

.quote-author { font-weight: 700; color: var(--saaf-deep); line-height: 1.25; }
.quote-role { font-size: .85rem; color: var(--saaf-slate); }

/* --------------------------------------------------------------- galleries */

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }

.gallery-grid a {
  display: block;
  border-radius: var(--saaf-radius-sm);
  overflow: hidden;
  border: 1px solid var(--saaf-border-soft);
  aspect-ratio: 4 / 3;
}

.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-gallery__main {
  border: 1px solid var(--saaf-border-soft);
  border-radius: var(--saaf-radius);
  overflow: hidden;
  background: var(--saaf-frost-2);
  aspect-ratio: 4 / 3;
}

.product-gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }

.product-gallery__thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

.product-gallery__thumbs button {
  width: 72px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--saaf-border-soft);
  border-radius: var(--saaf-radius-sm);
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.product-gallery__thumbs button[aria-current='true'] { border-color: var(--saaf-primary); }
.product-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ specs */

.spec-table { width: 100%; border-collapse: collapse; }

.spec-table th,
.spec-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--saaf-border-soft); font-size: .945rem; }

.spec-table th { text-align: left; color: var(--saaf-slate); font-weight: 600; width: 45%; }
.spec-table td { color: var(--saaf-deep); font-weight: 600; }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- breadcrumbs */

.saaf-breadcrumb { background: var(--saaf-frost-2); border-bottom: 1px solid var(--saaf-border-soft); }

.saaf-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  list-style: none;
  margin: 0;
  padding: .8rem 0;
  font-size: .875rem;
}

.saaf-breadcrumb a { color: var(--saaf-slate); text-decoration: none; }
.saaf-breadcrumb a:hover { color: var(--saaf-primary); text-decoration: underline; }
.saaf-breadcrumb li[aria-current] { color: var(--saaf-deep); font-weight: 600; }
.saaf-breadcrumb li + li::before { content: '›'; margin-right: .5rem; color: var(--saaf-border); }

/* ------------------------------------------------------------------ forms */

.form-label { font-weight: 600; color: var(--saaf-deep); font-size: .92rem; margin-bottom: .35rem; }
.form-label .req { color: var(--saaf-thermal-d); }
.form-label .opt { color: var(--saaf-slate); font-weight: 400; }

.form-control,
.form-select {
  border: 1px solid var(--saaf-border);
  border-radius: 10px;
  padding: .72rem .9rem;
  font-size: 1rem;
  color: var(--saaf-deep);
  background-color: #fff;
  transition: border-color var(--saaf-transition), box-shadow var(--saaf-transition);
}

.form-control::placeholder { color: #93A5B3; }

.form-control:focus,
.form-select:focus {
  border-color: var(--saaf-primary);
  box-shadow: 0 0 0 3px rgba(10, 110, 189, .18);
}

.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--saaf-danger); }

.invalid-feedback { color: var(--saaf-danger); font-size: .875rem; }

.form-check-input:checked { background-color: var(--saaf-primary); border-color: var(--saaf-primary); }

.form-hint { font-size: .85rem; color: var(--saaf-slate); }

/* The honeypot: off-screen, not display:none — some bots skip hidden fields. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-panel {
  background: #fff;
  border: 1px solid var(--saaf-border-soft);
  border-radius: var(--saaf-radius);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
  box-shadow: var(--saaf-shadow-sm);
}

/* ------------------------------------------------------------------ alerts */

.alert { border: 0; border-left: 4px solid; border-radius: var(--saaf-radius-sm); font-size: .95rem; }
.alert-success { background: var(--saaf-success-s); border-color: var(--saaf-success); color: #0B5C3D; }
.alert-danger  { background: #FBECEA; border-color: var(--saaf-danger); color: #8E2A20; }
.alert-warning { background: var(--saaf-thermal-s); border-color: var(--saaf-thermal); color: #7A3E00; }
.alert-info    { background: var(--saaf-frost); border-color: var(--saaf-primary); color: #084B80; }

/* -------------------------------------------------------------- pagination */

.pagination { --bs-pagination-color: var(--saaf-slate-d); gap: .3rem; }

.page-link {
  border: 1px solid var(--saaf-border-soft);
  border-radius: 8px;
  font-weight: 600;
  min-width: 42px;
  text-align: center;
}

.page-item.active .page-link { background: var(--saaf-primary); border-color: var(--saaf-primary); }

/* ------------------------------------------------------------------ filter */

.filter-panel {
  background: #fff;
  border: 1px solid var(--saaf-border-soft);
  border-radius: var(--saaf-radius);
  padding: 1.15rem 1.25rem;
}

.filter-list { list-style: none; margin: 0; padding: 0; }

.filter-list a {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .48rem .6rem;
  border-radius: 8px;
  color: var(--saaf-slate-d);
  text-decoration: none;
  font-size: .945rem;
}

.filter-list a:hover { background: var(--saaf-frost); color: var(--saaf-primary); }
.filter-list a.is-active { background: var(--saaf-frost); color: var(--saaf-primary); font-weight: 700; }
.filter-list .count { color: var(--saaf-slate); font-size: .85rem; }
.filter-list ul { list-style: none; padding-left: .75rem; margin: .15rem 0 .35rem; }

/* ------------------------------------------------------------------ footer */

.saaf-footer {
  background:
    radial-gradient(80% 120% at 90% 0%, rgba(34, 199, 224, .10) 0%, transparent 55%),
    var(--saaf-deep);
  color: #B9CCD9;
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem) 0;
}

.saaf-footer h2,
.saaf-footer h3 { color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1.1rem; }

.saaf-footer a { color: #C6D9E6; text-decoration: none; }
.saaf-footer a:hover { color: #fff; text-decoration: underline; }

.saaf-footer .footer-logo img { height: 42px; width: auto; }
.saaf-footer .footer-logo .saaf-logo__svg { height: 44px; }

.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }

.footer-nap { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; font-size: .95rem; }
.footer-nap li { display: flex; gap: .65rem; align-items: flex-start; }
.footer-nap svg { flex: 0 0 18px; margin-top: .22rem; color: var(--saaf-ice); }

.footer-social { display: flex; gap: .55rem; margin-top: 1.1rem; }

.footer-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #DCEAF3;
  transition: background var(--saaf-transition), color var(--saaf-transition);
}

.footer-social a:hover { background: var(--saaf-ice); color: var(--saaf-deep); }

.footer-bottom {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 1.25rem;
  font-size: .875rem;
  color: var(--saaf-muted-on-deep);
}

/* -------------------------------------------------------- floating actions */

.float-actions {
  position: fixed;
  right: clamp(.85rem, .5rem + 1vw, 1.5rem);
  bottom: clamp(.85rem, .5rem + 1vw, 1.5rem);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.float-btn {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: var(--saaf-shadow);
  color: #fff;
  text-decoration: none;
  transition: transform var(--saaf-transition);
}

.float-btn:hover { transform: translateY(-2px); color: #fff; }
.float-btn--whatsapp { background: #25D366; color: #06301A; }
.float-btn--whatsapp:hover { color: #06301A; }
.float-btn--call { background: var(--saaf-primary); }
.float-btn svg { width: 27px; height: 27px; }

/* Sticky mobile call bar: on a phone, the conversion is a tap-to-call. */
.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1039;
  display: none;
  background: #fff;
  border-top: 1px solid var(--saaf-border);
  padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
  gap: .5rem;
  box-shadow: 0 -6px 22px rgba(5, 42, 69, .10);
}

.mobile-cta .btn { flex: 1; }

@media (max-width: 767.98px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 4.6rem; }
  .float-actions { bottom: 5.2rem; }
}

/* -------------------------------------------------------------- rich text */

.rich-text { color: var(--saaf-slate-d); }
.rich-text > *:first-child { margin-top: 0; }
.rich-text h2 { font-size: var(--saaf-fs-h3); margin: 2rem 0 .85rem; }
.rich-text h3 { font-size: 1.15rem; margin: 1.6rem 0 .7rem; }
.rich-text ul, .rich-text ol { padding-left: 1.25rem; margin-bottom: 1.15rem; }
.rich-text li { margin-bottom: .4rem; }
.rich-text img { max-width: 100%; height: auto; border-radius: var(--saaf-radius-sm); }
.rich-text a { color: var(--saaf-primary); }

.rich-text blockquote {
  border-left: 3px solid var(--saaf-ice);
  padding: .25rem 0 .25rem 1.1rem;
  margin: 1.5rem 0;
  color: var(--saaf-deep);
  font-size: 1.06rem;
}

.rich-text table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.rich-text th, .rich-text td { border: 1px solid var(--saaf-border-soft); padding: .6rem .8rem; }
.rich-text th { background: var(--saaf-frost); color: var(--saaf-deep); text-align: left; }

/* ------------------------------------------------------------------ misc */

.brand-strip { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: center; }

.brand-strip span {
  font-family: var(--saaf-font-head);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .04em;
  color: #8FA6B5;
  transition: color var(--saaf-transition);
}

.brand-strip span:hover { color: var(--saaf-deep); }

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--saaf-thermal);
  color: var(--saaf-deep);
  font-family: var(--saaf-font-head);
  font-weight: 800;
  flex: 0 0 40px;
}

.accordion-button {
  font-family: var(--saaf-font-head);
  font-weight: 700;
  color: var(--saaf-deep);
}

.accordion-button:not(.collapsed) { background: var(--saaf-frost); color: var(--saaf-primary); }
.accordion-button:focus { box-shadow: 0 0 0 3px rgba(10, 110, 189, .18); }
.accordion-item { border-color: var(--saaf-border-soft); }

.map-embed {
  border: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--saaf-radius);
  background: var(--saaf-frost);
}

.empty-state {
  text-align: center;
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1rem;
  color: var(--saaf-slate);
  background: var(--saaf-frost-2);
  border: 1px dashed var(--saaf-border);
  border-radius: var(--saaf-radius);
}

.text-thermal { color: var(--saaf-thermal-d) !important; }
.text-deep { color: var(--saaf-deep) !important; }
.text-slate { color: var(--saaf-slate) !important; }
.bg-frost { background: var(--saaf-frost) !important; }

.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; }

/* --------------------------------------------------------- motion & print */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .saaf-card:hover { transform: none; }
}

@media print {
  .saaf-header, .saaf-footer, .float-actions, .mobile-cta, .saaf-breadcrumb { display: none !important; }
  body { color: #000; padding-bottom: 0; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; }
}