/* ALDU DOTACIONES — global chrome + homepage hero.
 *
 * Mobile-first: the base block is the phone layout; min-width media queries
 * raise it through the four supported viewports:
 *   base    < 768px   mobile
 *   768px+            tablet / iPad
 *   1024px+           laptop + desktop
 *   1280px+           desktop
 *   1920px+           full screen
 *
 * Tokens come from DESIGN.md. Spacing scale: 4 / 8 / 16 / 24 / 40 / 64.
 */

:root {
  --c-primary: #111111;
  --c-on-primary: #ffffff;
  --c-secondary: #5f5f5f;
  --c-tertiary: #c4823a;
  --c-tertiary-badge: #a9631e;
  --c-accent: #e0a545;
  --c-neutral: #f6f4f1;
  --c-surface: #ffffff;
  --c-surface-muted: #efede9;
  --c-border: #ddd8d1;
  --c-hero-bg: #ece9e4;
  --c-topbar-bg: #0b0b0b;
  /* Footer ground: the dark the footer scrim fades into. Without it the
     footer is transparent and the page white shows through wherever the
     desktop gradient lightens (the right edge with no photo uploaded). */
  --c-footer-bg: #0c1013;

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --container-max: 1440px;
  --container-pad: 20px;

  --header-height: 64px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 2px;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.skip-link:focus { left: 8px; top: 8px; }

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.125em;
}

/* ---------------------------------------------------------------------------
   Topbar
   --------------------------------------------------------------------------- */

.topbar {
  background: var(--c-topbar-bg);
  color: var(--c-on-primary);
  font-size: 12.5px;
  line-height: 1.3;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 16px;
}

.topbar-utility {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.topbar-utility-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.topbar-utility-item .icon { font-size: 15px; opacity: 0.9; }

/* Phones keep only the first utility message: the row has no room for three
   without truncation, and "Envíos a todo Colombia" is the one that matters. */
.topbar-utility-item:nth-child(n + 2) { display: none; }

.topbar-side {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.topbar-links { display: none; }

.topbar-links a {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.topbar-links a:hover { opacity: 1; }

.topbar-divider { display: none; }

.topbar-icon {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.topbar-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 17px;
}

.cart-count {
  position: absolute;
  top: -7px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--c-tertiary);
  color: var(--c-on-primary);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.site-header {
  position: relative;
  z-index: 40;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-height);
}

.logo { display: inline-flex; }

.logo-box {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border: 1.5px solid var(--c-tertiary);
}

.logo-primary {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.logo-secondary {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.main-nav, .header-search { display: none; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--c-primary);
  font-size: 24px;
  cursor: pointer;
}

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.mobile-menu ul { padding-block: 4px 12px; }

.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding-block: 12px;
  border-bottom: 1px solid var(--c-surface-muted);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mobile-menu li:last-child a { border-bottom: 0; }

.mobile-menu a.is-active { color: var(--c-tertiary); }

.mobile-menu .icon-chevron { font-size: 15px; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border: 0;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn .icon { font-size: 18px; }

.btn-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.btn-primary:hover { background: #2a2a2a; }

/* Outlined button. The border is an inset shadow so it matches the primary
   button's height exactly (a real border would add two pixels). */
.btn-secondary {
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

.btn-secondary:hover { background: var(--c-neutral); }

/* ---------------------------------------------------------------------------
   Hero — section 1 of the homepage
   --------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Tall enough for the portrait photo to render at (close to) its natural
     scale: the worker then sits right of the copy. On tall phones it also
     fills the viewport under the chrome so no band shows below the photo. */
  min-height: max(740px, calc(100dvh - 40px - var(--header-height)));
  overflow: hidden;
  isolation: isolate;
  background: var(--c-hero-bg);
}

.hero-picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Crop the right edge on phones: the worker keeps clear of the copy. */
  object-position: left center;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: 32px 0;
}

.hero-content { width: 100%; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow-rule {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--c-tertiary);
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 11.3vw, 3.5rem);
  font-weight: 900;
  line-height: 0.99;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.hero-title span { display: block; }

.hero-title-heavy { font-weight: 900; }

.hero-title-light { font-weight: 400; }

.hero-desc {
  max-width: 13.5em;
  margin: 16px 0 0;
  color: #444444;
  font-size: 16px;
  line-height: 1.55;
}

.hero-cta { margin-top: 24px; }

.hero-statement {
  position: relative;
  z-index: 1;
  /* The phone composition puts the statement over the worker's dark jacket,
     so it rides a translucent light panel there; tablet and up have the
     light background behind it and reset this (see 768px+). */
  width: fit-content;
  margin: 24px var(--container-pad) 24px;
  padding: 18px 22px 20px;
  background: rgba(246, 244, 241, 0.9);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.75;
  text-transform: uppercase;
}

.statement-line { display: block; }

.statement-rule {
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 14px;
  background: var(--c-tertiary);
}

/* ---------------------------------------------------------------------------
   Tablet — 768px+
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --container-pad: 32px;
    --header-height: 88px;
  }

  .topbar { font-size: 13px; }

  /* Phones keep only the first message; from tablet on, all three show. */
  .topbar-utility-item:nth-child(n + 2) { display: flex; }

  .hero-img { object-position: 68% center; }

  .hero { min-height: 640px; }

  /* Tablet and up: the photo keeps a light area under the statement, so drop
     the phone's panel and go back to full-bleed copy. */
  .hero-statement {
    width: auto;
    margin: 32px 0 0;
    padding: 0 var(--container-pad) 44px;
    background: none;
    border-radius: 0;
  }

  /* No bottom padding yet: the statement is still in flow and carries its
     own spacing below the copy. */
  .hero-inner { padding-block: 48px 0; }

  /* The 4:3 tablet photo puts the worker further left, so the block stays
     narrow and the third title line wraps into two, keeping type off the
     face while lines 1–2 stay on one row each. */
  .hero-content { max-width: 64vw; }

  .hero-title {
    font-size: clamp(3.5rem, 7.4vw, 4.5rem);
  }

  .hero-desc {
    max-width: 24em;
    font-size: 18px;
  }
}

/* ---------------------------------------------------------------------------
   Laptop / desktop — 1024px+
   --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  :root { --container-pad: 40px; }

  .topbar-links {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
  }

  .topbar-links li + li { margin-left: 0; }

  .topbar-links li:not(:last-child) a::after {
    content: "|";
    margin: 0 12px;
    opacity: 0.35;
    font-weight: 300;
  }

  .topbar-divider {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.28);
  }

  /* Desktop shows "Mi cuenta" as a link, so the icon is a mobile affordance. */
  .topbar-icon { display: none; }

  /* The seven-item nav only fits from 1280 up (see below); 1024–1279 keeps
     the search box and the menu button instead of wrapping the nav. */
  .header-search {
    position: relative;
    display: block;
    flex: none;
    width: 250px;
    /* Sticks to the right while the full nav is hidden (1024–1279). */
    margin-left: auto;
  }

  .header-search input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    background: var(--c-surface);
    color: var(--c-primary);
    font-family: var(--font-body);
    font-size: 14px;
  }

  .header-search input::placeholder { color: #9a9a9a; }

  .header-search button {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: none;
    color: var(--c-primary);
    font-size: 17px;
    cursor: pointer;
  }

  /* From here the photo is the landscape desktop asset: keep the left sky
     for the copy (the laptop range crops the sides) and the top for the
     helmet. */
  .hero-img { object-position: left top; }

  .hero {
    min-height: clamp(720px, calc(100dvh - 128px), 850px);
    justify-content: center;
  }

  .hero-inner { padding-block: 56px; }

  .hero-content { max-width: 640px; }

  /* Scales with the viewport the way the photo does, so the third line
     clears the worker at every desktop width (the mockup's own ratio:
     ~74.5px at 1672px ≈ 4.45vw). */
  .hero-title {
    font-size: clamp(3.6rem, 4.45vw, 4.5rem);
    white-space: nowrap;
  }

  .hero-desc {
    max-width: 28em;
    font-size: 20px;
    line-height: 1.5;
  }

  /* Not enough clear space on the right while the copy still needs the left
     (1024–1279): the statement would land on the worker, so it waits for the
     desktop widths, where the photo keeps a sky strip on the right. */
  .hero-statement { display: none; }
}

/* 1024–1279 side-crops the landscape photo hard — worst case an iPad Pro at
   1024×1366, where a 850px hero cut the worker's face off. Capping the hero
   at 680px here limits the crop: the face stays whole and the copy keeps the
   left sky. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero { min-height: 680px; }
}

/* ---------------------------------------------------------------------------
   Desktop — 1280px+
   --------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  :root { --container-pad: 64px; }

  .header-search { width: 240px; }

  /* Full navigation: all seven items on one row at 1280. */
  .menu-toggle { display: none; }

  .mobile-menu { display: none !important; }

  .main-nav {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin-inline: 8px;
  }

  .main-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
  }

  .main-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-block: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2.5px;
    background: var(--c-tertiary);
    transition: width 0.18s ease;
  }

  .main-nav a:hover::after { width: 100%; }

  .main-nav a.is-active::after { width: 100%; }

  .main-nav .icon-chevron { font-size: 13px; opacity: 0.7; }

  .hero-content { max-width: 700px; }
}

/* The right-side statement needs both width (for the sky strip) and a
   landscape viewport: in portrait at desktop widths the photo's face lands
   exactly where it would sit. */
@media (min-width: 1280px) and (min-aspect-ratio: 4/3) {
  .hero-statement {
    display: block;
    position: absolute;
    top: 40%;
    right: clamp(44px, 3.5vw, 72px);
    z-index: 1;
    margin-top: 0;
    padding-inline: 0;
    padding-bottom: 0;
    font-size: 15px;
    letter-spacing: 0.16em;
    line-height: 2.05;
  }
}

/* ---------------------------------------------------------------------------
   Section 2 — category banners

   Three linked image banners under the hero. One approved photo per category,
   reused at every breakpoint; the crop is tuned with object-position instead
   of shipping breakpoint-specific files. Mobile stacks, 1024px+ is a 3-up row.
   --------------------------------------------------------------------------- */

.home-categories {
  padding-block: 20px;
  background: var(--c-surface);
}

.category-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Keep the grid tracks from inheriting a wider intrinsic min-width. */
.category-strip > li { min-width: 0; }

.category-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 170px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-primary);
  isolation: isolate;
}

.category-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* The crop shifts right so the left column of type lands on the photo's
   quieter, darker side rather than on the product. */
.category-card--workwear .category-card-img { object-position: 62% center; }
.category-card--ppe .category-card-img { object-position: 64% center; }
.category-card--footwear .category-card-img { object-position: 70% center; }

.category-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(17, 17, 17, 0.72) 0%,
    rgba(17, 17, 17, 0.30) 55%,
    rgba(17, 17, 17, 0.05) 100%
  );
  transition: opacity 0.28s ease;
}

.category-card-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 22px;
}

.category-card-title {
  max-width: 14ch;
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.category-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  background: rgba(17, 17, 17, 0.25);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.category-card-cta .icon {
  font-size: 14px;
  transition: transform 0.2s ease;
}

/* Hover is a desktop affordance only: touch devices keep the resting state. */
@media (hover: hover) {
  .category-card:hover .category-card-img { transform: scale(1.03); }

  .category-card:hover .category-card-scrim { opacity: 0.85; }

  .category-card:hover .category-card-cta,
  .category-card:focus-visible .category-card-cta {
    background: var(--c-on-primary);
    color: var(--c-primary);
    border-color: var(--c-on-primary);
  }

  .category-card:hover .category-card-cta .icon,
  .category-card:focus-visible .category-card-cta .icon { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .category-card-img,
  .category-card-scrim,
  .category-card-cta,
  .category-card-cta .icon { transition: none; }

  .category-card:hover .category-card-img { transform: none; }
}

@media (min-width: 768px) {
  .home-categories { padding-block: 24px; }

  .category-strip { gap: 12px; }

  .category-card {
    min-height: 0;
    height: 210px;
  }

  .category-card-content { padding: 32px; }

  .category-card-title {
    max-width: 16ch;
    font-size: 24px;
  }

  .category-card-cta { font-size: 13px; }
}

@media (min-width: 1024px) {
  .home-categories { padding-block: 28px; }

  .category-strip {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

  .category-card {
    height: 220px;
    min-height: 0;
  }

  .category-card-content {
    gap: 18px;
    padding: 36px;
  }

  .category-card-title {
    max-width: 12ch;
    font-size: 26px;
  }

  .category-card-cta { padding: 11px 17px; }
}

/* ---------------------------------------------------------------------------
   Section 3 — nuestros productos

   Five product cards under the category banners: a centered heading flanked by
   tertiary rules, then one row of five from 1280px, a balanced 3 + 2 grid on
   tablet and a two-column grid on phones (the fifth card spans full width and
   turns horizontal). One approved photo per product, contained in a square
   media box so it never crops.
   --------------------------------------------------------------------------- */

.home-products {
  padding-block: 48px;
  background: var(--c-surface);
}

.products-head {
  margin-bottom: 28px;
  text-align: center;
}

.products-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2.5vw, 16px);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.products-title-text { min-width: 0; }

.products-rule {
  flex: 0 1 auto;
  width: clamp(16px, 6vw, 40px);
  height: 3px;
  background: var(--c-tertiary);
}

.products-subtitle {
  margin: 10px 0 0;
  color: var(--c-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Keep the tracks from inheriting a wider intrinsic min-width. */
.product-grid > li { min-width: 0; }

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  background: var(--c-surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 6%;
  overflow: hidden;
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.22s ease;
}

.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 2px;
  /* A shade of the tertiary brand orange: white on #c4823a is 3.18:1, below
     the 4.5:1 AA needs for this 11px label, so the badge uses the darker
     shade (4.68:1) while keeping the approved white-on-caramel look. */
  background: var(--c-tertiary-badge);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 4px 6px;
}

.product-name {
  color: var(--c-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.product-prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.product-price {
  color: var(--c-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.product-price.is-sale { color: var(--c-tertiary); }

.product-price-old {
  color: var(--c-secondary);
  font-size: 14px;
  font-weight: 400;
  text-decoration: line-through;
}

/* Phones: the fifth card spans the row and lays out horizontally so the odd
   count stays visually balanced instead of leaving a half-empty cell. */
.product-grid > li:last-child { grid-column: 1 / -1; }

.product-grid > li:last-child .product-card {
  flex-direction: row;
  align-items: center;
}

.product-grid > li:last-child .product-media {
  flex: none;
  width: 46%;
  max-width: 200px;
  padding: 3%;
}

.product-grid > li:last-child .product-body {
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  text-align: center;
}

.product-card:focus-visible { border-color: var(--c-tertiary); }

@media (hover: hover) {
  .product-card:hover {
    border-color: #c3bcb2;
    transform: translateY(-2px);
  }

  .product-card:hover .product-img { transform: scale(1.03); }
}

.products-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.products-cta {
  width: 100%;
  justify-content: center;
}

.products-cta .icon { transition: transform 0.2s ease; }

@media (hover: hover) {
  .products-cta:hover .icon { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-img,
  .products-cta .icon { transition: none; }

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

  .product-card:hover .product-img { transform: none; }
}

@media (min-width: 768px) {
  .home-products { padding-block: 64px; }

  .products-head { margin-bottom: 32px; }

  .products-title {
    gap: 18px;
    font-size: 30px;
    letter-spacing: 0.06em;
  }

  .products-rule { width: 44px; }

  .products-subtitle { font-size: 16px; }

  /* 3 + 2: three cards span four of twelve columns, the last two span five
     and start on columns 2 and 7, so the short row is centered and wider
     without breaking the rhythm of the first. */
  .product-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
  }

  .product-grid > li { grid-column: span 4; }
  .product-grid > li:nth-child(4) { grid-column: 2 / span 5; }
  .product-grid > li:nth-child(5) { grid-column: 7 / span 5; }

  /* Undo the phone-only full-width horizontal fifth card. */
  .product-grid > li:last-child .product-card {
    flex-direction: column;
    align-items: stretch;
  }

  .product-grid > li:last-child .product-media {
    flex: none;
    width: 100%;
    max-width: none;
    padding: 6%;
  }

  .product-grid > li:last-child .product-body {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 6px 8px;
    text-align: left;
  }

  .product-card { padding: 14px; }

  .product-body { padding: 12px 6px 8px; }

  .product-name { font-size: 17px; }

  .product-price { font-size: 20px; }

  .product-price-old { font-size: 16px; }

  .products-cta-wrap { margin-top: 32px; }

  .products-cta {
    width: auto;
    min-width: 320px;
  }
}

@media (min-width: 1024px) {
  .products-title { font-size: 34px; }

  .product-name { font-size: 18px; }

  .product-price { font-size: 21px; }
}

@media (min-width: 1280px) {
  .home-products { padding-block: 76px; }

  .products-head { margin-bottom: 36px; }

  .products-title {
    font-size: clamp(2rem, 2.65vw, 2.5rem);
    letter-spacing: 0.05em;
  }

  .products-rule { width: 60px; }

  /* Five equal cards on one row. */
  .product-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }

  .product-grid > li,
  .product-grid > li:nth-child(4),
  .product-grid > li:nth-child(5) { grid-column: auto; }

  /* Five narrow columns need slightly tighter type so names and the sale
     price pair stay on one line. */
  .product-name { font-size: 16px; }

  .product-price { font-size: 19px; }

  .product-price-old { font-size: 14px; }

  .products-cta-wrap { margin-top: 36px; }

  .products-cta { min-width: 300px; }
}

/* ---------------------------------------------------------------------------
   Section 4 — dotaciones para empresas

   An editorial B2B split: one corporate team photo left, copy right, joined by
   a subtle CSS diagonal (clip-path, never baked into the asset). Phones stack
   copy ▸ photo ▸ statement ▸ 2×2 benefits ▸ CTAs ▸ support ▸ trust; the media
   slot sits between the heading and the benefits through flex order. One photo
   and one icon per benefit are reused at every breakpoint. Missing assets
   degrade to a neutral panel and built-in line icons.
   --------------------------------------------------------------------------- */

.home-corporate {
  padding-block: 56px 40px;
  background: var(--c-surface);
}

.corporate-grid {
  display: flex;
  flex-direction: column;
}

/* Phones/tablet let the pieces order themselves around the photo. */
.corporate-body { display: contents; }

.corporate-head { order: 1; padding-inline: var(--container-pad); }

.corporate-media {
  order: 2;
  position: relative;
  margin-block: 24px 0;
  padding-inline: var(--container-pad);
}

.corporate-foot { order: 3; padding-inline: var(--container-pad); }

.corporate-trust { order: 4; }

/* Eyebrow ------------------------------------------------------------------- */

.corporate-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-primary);
}

.corporate-eyebrow-rule {
  flex: none;
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--c-tertiary);
}

/* Headline ------------------------------------------------------------------ */

.corporate-title {
  margin: 0;
  font-family: var(--font-display);
  /* Sized so "Equipamos equipos" keeps one line and the heading stays at the
     approved two lines down to 320px. */
  font-size: clamp(1.5rem, 7.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--c-primary);
}

.corporate-title span { display: block; }

.corporate-title-accent { color: var(--c-tertiary); }

.corporate-desc {
  max-width: 34em;
  margin: 20px 0 0;
  color: #444444;
  font-size: 17px;
  line-height: 1.55;
}

/* Photo --------------------------------------------------------------------- */

.corporate-figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--c-surface-muted);
}

.corporate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* The desktop-only editorial line over the photo is hidden below 1280. */
.corporate-editorial { display: none; }

/* Small statement under the photo (phones/tablet) --------------------------- */

.corporate-statement {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: right;
}

.corporate-statement-line { display: block; }

.corporate-statement-rule {
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  background: var(--c-tertiary);
}

/* Benefits ------------------------------------------------------------------ */

.corporate-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 24px 0 0;
}

.corporate-benefits > li { min-width: 0; }

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 10px;
  border-bottom: 1px solid var(--c-border);
}

.benefit:nth-child(odd) {
  padding-right: 12px;
  border-right: 1px solid var(--c-border);
}

.benefit:nth-child(even) { padding-left: 12px; }

.benefit-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--c-primary);
}

.benefit-svg { width: 32px; height: 32px; }

.benefit-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.benefit-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.benefit-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
}

.benefit-desc {
  color: var(--c-secondary);
  font-size: 15px;
  line-height: 1.45;
}

/* CTAs ---------------------------------------------------------------------- */

.corporate-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}

.corporate-cta {
  width: 100%;
  min-height: 58px;
  justify-content: center;
  border-radius: 4px;
}

.corporate-cta .icon { font-size: 18px; transition: transform 0.2s ease; }

.corporate-support {
  margin: 20px 0 0;
  color: var(--c-secondary);
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
}

/* Trust block --------------------------------------------------------------- */

.corporate-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px var(--container-pad) 0;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--c-surface-muted);
}

.corporate-trust-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-primary);
}

.corporate-trust-svg { width: 40px; height: 40px; }

.corporate-trust-icon img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.corporate-trust-divider {
  align-self: stretch;
  width: 1px;
  background: var(--c-border);
}

.corporate-trust-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.corporate-trust-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.corporate-trust-text {
  color: var(--c-secondary);
  font-size: 14px;
  line-height: 1.45;
}

@media (hover: hover) {
  .corporate-cta:hover .icon { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .corporate-cta .icon { transition: none; }
  .corporate-cta:hover .icon { transform: none; }
}

/* Tablet — 768px+ ----------------------------------------------------------- */

@media (min-width: 768px) {
  .home-corporate { padding-block: 72px 56px; }

  .corporate-head,
  .corporate-foot,
  .corporate-media {
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
  }

  .corporate-desc { font-size: 18px; }

  .corporate-title {
    font-size: clamp(2.5rem, 5.5vw, 3.25rem);
  }

  .corporate-figure {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
  }

  /* Four benefits in one row, no card backgrounds — icon over the text. */
  .corporate-benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 40px;
  }

  .benefit {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 18px;
    border: 0;
  }

  .benefit:first-child { padding-left: 0; }
  .benefit:last-child { padding-right: 0; }

  .benefit:nth-child(odd) {
    padding-right: 18px;
    border-right: 0;
  }

  .benefit-icon { width: 44px; height: 44px; }

  .benefit-svg { width: 38px; height: 38px; }

  .benefit-title { font-size: 17px; }

  .corporate-statement { margin-top: 24px; }

  .corporate-actions {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 32px;
  }

  .corporate-cta {
    width: auto;
    min-width: 280px;
  }

  .corporate-support { margin-top: 22px; font-size: 16px; text-align: left; }

  .corporate-trust {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* Desktop — 1280px+ --------------------------------------------------------- */

@media (min-width: 1280px) {
  .home-corporate { padding-block: 0; }

  /* Editorial split: photo left, copy right, joined by a CSS diagonal. */
  .corporate-grid {
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: stretch;
    min-height: 720px;
  }

  .corporate-body {
    display: block;
    grid-column: 2;
    grid-row: 1;
    padding-block: 88px;
    padding-left: 56px;
    padding-right: var(--container-pad);
  }

  .corporate-head,
  .corporate-foot {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .corporate-media {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding-inline: 0;
    overflow: hidden;
    background: var(--c-surface-muted);
    /* Media reaches further right at the top than the bottom, so the white
       copy panel widens toward the floor — the approved, subtle diagonal,
       mirrored with the photo on the left. */
    clip-path: polygon(0 0, 100% 0, 89% 100%, 0 100%);
  }

  .corporate-figure {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .corporate-img { object-position: 75% center; }

  .corporate-title {
    font-size: clamp(48px, 4vw, 72px);
    line-height: 1.0;
  }

  .corporate-desc { max-width: 30em; }

  /* Editorial statement, top-left over the photo (large desktop only). */
  .corporate-editorial {
    position: absolute;
    top: 44px;
    left: clamp(40px, 4vw, 72px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.55;
    text-transform: uppercase;
    text-align: left;
    color: var(--c-primary);
    /* The photo's top is light sky, but a soft light halo keeps the small dark
       type legible if the uploaded crop is darker. */
    text-shadow: 0 1px 14px rgba(255, 255, 255, 0.65);
  }

  .corporate-editorial-line { display: block; }

  .corporate-editorial-rule {
    width: 44px;
    height: 3px;
    margin-top: 10px;
    background: var(--c-tertiary);
  }

  .corporate-statement { display: none; }

  .corporate-benefits { margin-top: 44px; }

  .benefit,
  .benefit:nth-child(odd) { padding: 0 13px; }
  .benefit:first-child { padding-left: 0; }
  .benefit:last-child { padding-right: 0; }
  .benefit-title { font-size: 16px; }
  .benefit-desc { font-size: 14px; }

  .corporate-actions { margin-top: 40px; }

  .corporate-support { margin-top: 22px; }

  .corporate-trust {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    max-width: 420px;
    margin: 0;
    border-radius: 0 2px 0 0;
    background: var(--c-surface);
  }
}

/* Mid-desktop widths wrap a couple of benefit titles onto two lines; reserving
   two lines there keeps the four descriptions on one baseline. Wide desktops
   fit every title on a single line, so the reservation is dropped. */
@media (min-width: 1280px) and (max-width: 1679px) {
  .benefit-title { min-height: 2.4em; }
}

/* ---------------------------------------------------------------------------
   Section 5 — productos / todo lo que tu equipo necesita

   The category explorer: an editorial split with the six-card 3×2 grid, the
   catalog CTA and the "Soluciones reales" block on the left and one industrial
   visual on the right, joined by a CSS diagonal (clip-path, never baked into
   the asset). Phones hide the visual and keep a two-column card grid; the
   tablet range stacks with three columns; the split returns from the laptop
   breakpoint. One image per category, reused at every breakpoint; an empty
   asset leaves a neutral media panel.
   --------------------------------------------------------------------------- */

.home-pcategories {
  padding-block: 56px 44px;
  background: var(--c-surface);
}

.pcategories-body { display: flex; flex-direction: column; }

.pcategories-head,
.pcategories-list,
.pcategories-cta-wrap,
.pcategories-solutions { padding-inline: var(--container-pad); }

/* Phones and the stacked tablet range hide the visual and its statements. */
.pcategories-media { display: none; }

/* Eyebrow ------------------------------------------------------------------- */

.pcategories-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-primary);
}

.pcategories-eyebrow-rule {
  flex: none;
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--c-tertiary);
}

/* Heading ------------------------------------------------------------------- */

.pcategories-title {
  margin: 0;
  max-width: 15em;
  font-family: var(--font-display);
  /* Sized so the dark line wraps after "equipo" and the accent follows on the
     second line, as in the approved composition, without single-word lines. */
  font-size: clamp(2.375rem, 10vw, 3.25rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.02em;
  /* Balance the two-tone heading so no single word is orphaned on phones. */
  text-wrap: balance;
  color: var(--c-primary);
}

.pcategories-title-accent { color: var(--c-tertiary); }

.pcategories-desc {
  max-width: 34em;
  margin: 18px 0 0;
  color: #444444;
  font-size: 17px;
  line-height: 1.55;
}

/* Category grid ------------------------------------------------------------- */

.pcategories-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.pcategories-list > li { min-width: 0; }

.pcat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.pcat-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-surface-muted);
}

.pcat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.22s ease;
}

.pcat-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex: 1 1 auto;
  padding: 12px 14px 14px;
}

.pcat-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pcat-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.22;
  color: var(--c-primary);
}

.pcat-desc-text {
  color: var(--c-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.pcat-arrow {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--c-primary);
  transition: transform 0.2s ease;
}

.pcat-card:focus-visible { border-color: var(--c-tertiary); }

@media (hover: hover) {
  .pcat-card:hover { border-color: #c3bcb2; }

  .pcat-card:hover .pcat-img { transform: scale(1.03); }

  .pcat-card:hover .pcat-arrow { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .pcat-card,
  .pcat-img,
  .pcat-arrow,
  .pcategories-cta .icon { transition: none; }

  .pcat-card:hover .pcat-img,
  .pcat-card:hover .pcat-arrow,
  .pcategories-cta:hover .icon { transform: none; }
}

/* CTA ----------------------------------------------------------------------- */

.pcategories-cta-wrap { margin-top: 24px; }

.pcategories-cta {
  width: 100%;
  min-height: 56px;
  justify-content: center;
  border-radius: 4px;
}

.pcategories-cta .icon { transition: transform 0.2s ease; }

@media (hover: hover) {
  .pcategories-cta:hover .icon { transform: translateX(3px); }
}

/* "Soluciones reales" supporting block -------------------------------------- */

.pcategories-solutions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.pcat-sol-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--c-tertiary);
}

.pcat-sol-svg { width: 44px; height: 44px; }

.pcat-sol-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pcat-sol-divider {
  align-self: stretch;
  width: 1px;
  background: var(--c-border);
}

.pcat-sol-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pcat-sol-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
}

.pcat-sol-text {
  color: var(--c-secondary);
  font-size: 16px;
  line-height: 1.4;
}

/* Tablet — 768px+ ----------------------------------------------------------- */

@media (min-width: 768px) {
  .home-pcategories { padding-block: 72px 56px; }

  .pcategories-head,
  .pcategories-list,
  .pcategories-cta-wrap,
  .pcategories-solutions {
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
  }

  .pcategories-title { font-size: clamp(2.5rem, 6vw, 3.5rem); }

  .pcategories-desc { font-size: 18px; }

  .pcategories-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
  }

  .pcat-media { aspect-ratio: 16 / 9; }

  .pcat-body { padding: 14px 16px 16px; }

  .pcat-name { font-size: 17px; }

  .pcat-desc-text { font-size: 15px; }

  .pcategories-cta-wrap { margin-top: 32px; }

  .pcategories-cta {
    width: auto;
    min-width: 320px;
  }

  .pcategories-solutions {
    gap: 20px;
    margin-top: 32px;
  }

  .pcat-sol-icon,
  .pcat-sol-svg { width: 52px; height: 52px; }

  .pcat-sol-title,
  .pcat-sol-text { font-size: 18px; }
}

/* Laptop / desktop split — 1024px+ ------------------------------------------ */

@media (min-width: 1024px) {
  .home-pcategories { padding-block: 0; }

  .pcategories-grid {
    position: relative;
    display: grid;
    grid-template-columns: 64% 36%;
    align-items: stretch;
    min-height: 680px;
  }

  .pcategories-body {
    grid-column: 1;
    grid-row: 1;
    padding-block: 72px;
    padding-left: var(--container-pad);
    padding-right: 40px;
  }

  .pcategories-head,
  .pcategories-list,
  .pcategories-cta-wrap,
  .pcategories-solutions {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .pcategories-media {
    position: relative;
    display: block;
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    overflow: hidden;
    background: var(--c-surface-muted);
    /* The photo reaches further right at the top than at the bottom, so the
       white copy panel is wider under the heading and narrows toward the
       floor — the approved diagonal, mirrored from section 4. */
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }

  .pcategories-figure {
    position: absolute;
    inset: 0;
    margin: 0;
  }

  .pcategories-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .pcategories-title { font-size: clamp(2.625rem, 4.4vw, 3.5rem); }

  .pcategories-desc {
    max-width: 32em;
    font-size: 18px;
  }

  .pcategories-list { margin-top: 32px; }

  .pcat-name { font-size: 16px; }

  .pcat-desc-text { font-size: 14px; }

  .pcat-body { padding: 12px 14px 14px; }

  .pcat-arrow { width: 18px; height: 18px; }
}

/* The narrow laptop range needs slightly tighter cards so three columns and
   their descriptions keep one or two lines without crowding. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .pcategories-list { gap: 14px; }

  .pcat-name { font-size: 15px; }

  .pcat-desc-text { font-size: 13.5px; }

  .pcat-body { padding: 11px 12px 13px; }
}

/* Desktop — 1280px+ --------------------------------------------------------- */

@media (min-width: 1280px) {
  .pcategories-grid {
    grid-template-columns: 67% 33%;
    min-height: 760px;
  }

  .pcategories-body {
    padding-block: 88px;
    padding-right: 56px;
  }

  .pcategories-title { font-size: clamp(3.25rem, 4.2vw, 4.25rem); }

  .pcategories-list {
    gap: 18px;
    margin-top: 36px;
  }

  .pcat-body { padding: 16px 18px 18px; }

  .pcat-name { font-size: 18px; }

  .pcat-desc-text { font-size: 15px; }

  .pcat-arrow { width: 20px; height: 20px; }

  .pcategories-cta { min-width: 340px; }

  .pcategories-solutions { margin-top: 36px; }

  /* Editorial statements over the photo (large desktop only, and only with an
     image — see the template). */
  .pcategories-editorial {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--c-on-primary);
    /* A soft dark halo keeps the small white type legible over whatever crop
       the editor uploads. */
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  }

  .pcategories-editorial--top {
    top: 44px;
    right: clamp(40px, 4vw, 72px);
    align-items: flex-end;
    text-align: right;
  }

  .pcategories-editorial--bottom {
    bottom: 44px;
    right: clamp(40px, 4vw, 72px);
    align-items: flex-end;
    text-align: right;
    gap: 10px;
  }

  .pcategories-editorial-line { display: block; }

  .pcategories-editorial-rule {
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 10px;
    background: var(--c-tertiary);
  }

  .pcategories-editorial--bottom .pcategories-editorial-rule {
    margin-top: 0;
    margin-bottom: 10px;
  }
}

/* ---------------------------------------------------------------------------
   Section 6 — marcas

   Trust section: twelve dark photo cards, each with the brand's light logo
   centred on it, in a static grid with one ALDU worker photo on the left and
   the editorial copy on the right, joined by a CSS diagonal (clip-path, never
   baked into the asset). Phones hide the photo and keep a two-column grid;
   the tablet range stacks with three columns; the split returns from the
   laptop breakpoint, and the four-column grid and the photo statement appear
   on the desktop. The card photo is cover-cropped under a CSS scrim; the logo
   is contained (never cropped or stretched); a card with no photo keeps the
   dark panel and one with no logo shows the brand name.
   --------------------------------------------------------------------------- */

.home-brands {
  padding-block: 56px 48px;
  background: var(--c-surface);
}

.brands-grid {
  display: flex;
  flex-direction: column;
}

/* Phones/tablet let the pieces order themselves around the photo. */
.brands-body { display: contents; }

.brands-head { order: 1; padding-inline: var(--container-pad); }

/* Phones hide the industrial photo and the statements that sit over it. */
.brands-media {
  display: none;
  order: 2;
  padding-inline: var(--container-pad);
}

.brands-list {
  order: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding-inline: var(--container-pad);
}

.brands-cta-wrap {
  order: 4;
  margin-top: 24px;
  padding-inline: var(--container-pad);
}

/* The statements over the photo are desktop-only. */
.brands-editorial { display: none; }

/* Eyebrow ------------------------------------------------------------------- */

.brands-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-primary);
}

.brands-eyebrow-rule {
  flex: none;
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--c-tertiary);
}

/* Heading ------------------------------------------------------------------- */

.brands-title {
  margin: 0;
  max-width: 15em;
  font-family: var(--font-display);
  /* Sized so the two-tone heading stays at the approved two lines without
     orphaning a word on phones; 40-50px on the brief's mobile range. */
  font-size: clamp(2.5rem, 10vw, 3.125rem);
  font-weight: 800;
  line-height: 0.99;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--c-primary);
}

.brands-title span { display: block; }

.brands-title-accent { color: var(--c-tertiary); }

.brands-desc {
  max-width: 34em;
  margin: 18px 0 0;
  color: #444444;
  font-size: 17px;
  line-height: 1.55;
}

/* Logo grid ----------------------------------------------------------------- */

.brands-list > li { min-width: 0; }

/* Phones only: the brief's mobile order lifts Adolfo next to Bata/Ansell/MSA.
   Reset from 768 so tablet and desktop keep the approved row order. */
@media (max-width: 767px) {
  .brands-list > li:nth-child(9) { order: 1; }
  .brands-list > li:nth-child(5) { order: 2; }
  .brands-list > li:nth-child(6) { order: 3; }
  .brands-list > li:nth-child(7) { order: 4; }
  .brands-list > li:nth-child(8) { order: 5; }
  .brands-list > li:nth-child(10) { order: 6; }
  .brands-list > li:nth-child(11) { order: 7; }
  .brands-list > li:nth-child(12) { order: 8; }
}

.brand-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  padding: 12px;
  border-radius: 4px;
  background: #1b1c1e;
  outline-offset: 3px;
}

/* The card photo fills the card under a scrim that keeps the light logo
   legible over any crop the editor uploads. */
.brand-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.brand-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.34);
  transition: background-color 0.25s ease;
}

/* Max-width/max-height (never width/height: 100%) let each logo keep its own
   proportions; object-fit: contain guarantees it is never stretched. */
.brand-logo {
  width: auto;
  height: auto;
  max-width: var(--brand-w, 44%);
  max-height: var(--brand-h, 44%);
  object-fit: contain;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s ease;
}

/* Brand-name placeholder until the light logo is uploaded. */
.brand-fallback {
  max-width: 90%;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-on-primary);
}

/* Per-brand visual-weight normalisation: a higher --brand-w lets a naturally
   wider mark (Steelpro, Kimberly-Clark, Ansell) use more of the card, while a
   compact or tall one (CAT, MSA, uvex, 3M) keeps a safer inset; --brand-h
   lets the stacked marks (Delta Plus, MSA, Showa, JSP) grow taller. Values
   are tuned so no logo is forced to the same size. */
.brand-card--3m { --brand-w: 30%; }
.brand-card--cat { --brand-w: 30%; }
.brand-card--steelpro { --brand-w: 46%; }
.brand-card--deltaplus { --brand-w: 40%; --brand-h: 66%; }
.brand-card--bata { --brand-w: 44%; }
.brand-card--ansell { --brand-w: 44%; }
.brand-card--msa { --brand-w: 40%; --brand-h: 62%; }
.brand-card--uvex { --brand-w: 40%; }
.brand-card--adolfo { --brand-w: 54%; }
.brand-card--jsp { --brand-w: 42%; --brand-h: 52%; }
.brand-card--kimberly { --brand-w: 68%; }
.brand-card--showa { --brand-w: 48%; --brand-h: 58%; }

.brand-card:focus-visible { outline: 2px solid var(--c-tertiary); }

@media (hover: hover) {
  .brand-card:hover .brand-bg { transform: scale(1.05); }

  .brand-card:hover::after { background-color: rgba(10, 10, 10, 0.2); }

  .brand-card:hover .brand-logo { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-bg,
  .brand-card::after,
  .brand-logo,
  .brands-cta .icon { transition: none; }

  .brand-card:hover .brand-bg,
  .brand-card:hover .brand-logo,
  .brands-cta:hover .icon { transform: none; }
}

/* CTA ----------------------------------------------------------------------- */

.brands-cta {
  position: relative;
  width: 100%;
  min-height: 56px;
  justify-content: center;
  border-radius: 4px;
}

/* Arrow pinned to the right edge; the label stays optically centred. */
.brands-cta .icon {
  position: absolute;
  right: 24px;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .brands-cta:hover .icon { transform: translateX(3px); }
}

/* Tablet — 768px+ ----------------------------------------------------------- */

@media (min-width: 768px) {
  .home-brands { padding-block: 72px 56px; }

  .brands-head,
  .brands-list,
  .brands-cta-wrap,
  .brands-media {
    width: 100%;
    max-width: 940px;
    margin-inline: auto;
  }

  /* Portrait tablet: copy, then the photo, then the grid below it. */
  .brands-media { display: block; margin-top: 28px; }

  .brands-figure {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: var(--c-surface-muted);
  }

  .brands-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 76%;
  }

  .brands-title { font-size: clamp(2.5rem, 6vw, 3.5rem); }

  .brands-desc { font-size: 18px; }

  .brands-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 32px;
  }

  .brand-card {
    aspect-ratio: 2.37 / 1;
    padding: 8px;
  }

  .brands-cta-wrap { margin-top: 32px; }

  .brands-cta {
    width: auto;
    min-width: 340px;
  }
}

/* Laptop / desktop split — 1024px+ ------------------------------------------ */

@media (min-width: 1024px) {
  .home-brands { padding-block: 0; }

  .brands-grid {
    position: relative;
    display: grid;
    /* Photo left, copy right. The laptop split is a touch wider on the copy
       side (40/60); the desktop rule below tightens it to 35/65. */
    grid-template-columns: 40% 60%;
    align-items: stretch;
    min-height: 600px;
  }

  .brands-body {
    display: block;
    grid-column: 2;
    grid-row: 1;
    padding-block: 72px;
    padding-left: 40px;
    padding-right: var(--container-pad);
  }

  .brands-head,
  .brands-list,
  .brands-cta-wrap {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  .brands-head { order: initial; }

  .brands-media {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: auto;
    max-width: none;
    margin: 0;
    padding-inline: 0;
    overflow: hidden;
    background: var(--c-surface-muted);
    /* The photo reaches further toward the copy at the bottom than at the
       top, so the white copy panel is wider under the heading and narrows
       toward the floor — the approved diagonal, mirrored with the photo on
       the left. */
    clip-path: polygon(0 0, 84% 0, 100% 100%, 0 100%);
  }

  .brands-figure {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .brands-img { object-position: 55% center; }

  .brands-title { font-size: clamp(2.5rem, 3.6vw, 3.5rem); }

  .brands-desc { max-width: 32em; }

  /* Three columns hold the laptop range (1024–1279). */
  .brands-list { margin-top: 32px; }
}

/* Desktop — 1280px+ --------------------------------------------------------- */

@media (min-width: 1280px) {
  .brands-grid {
    grid-template-columns: 35% 65%;
    min-height: 640px;
  }

  .brands-body { padding-block: 64px; padding-left: 72px; }

  .brands-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
  }

  .brand-fallback { font-size: 15px; }

  .brands-cta { min-width: 380px; }

  /* Editorial statements over the photo (large desktop only, and only with an
     image — see the template). */
  .brands-editorial {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--c-on-primary);
    /* A soft dark halo keeps the small white type legible over whatever crop
       the editor uploads. */
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
  }

  .brands-editorial--top {
    top: 44px;
    left: clamp(40px, 4vw, 72px);
    align-items: flex-start;
    text-align: left;
  }

  .brands-editorial--bottom {
    bottom: 44px;
    left: clamp(32px, 3vw, 56px);
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    font-size: 12px;
    letter-spacing: 0.26em;
    text-align: left;
  }

  .brands-editorial-lines { display: flex; flex-direction: column; }

  .brands-editorial-line { display: block; }

  .brands-editorial-rule {
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 10px;
    background: var(--c-tertiary);
  }

  .brands-editorial--bottom .brands-editorial-rule {
    width: 1px;
    height: auto;
    margin: 0;
    background: rgba(255, 255, 255, 0.55);
  }
}

/* ---------------------------------------------------------------------------
   Section 7 — sectores / soluciones por industria

   Four image-led sector cards under an editorial heading, then a full-width
   CTA bar. Mobile-first: phones and tablets keep a 2×2 grid, the desktop
   (1280px+) puts the four cards in one row. One photo per sector at every
   breakpoint, cropped with object-position; the approved transparent icon
   sits in a white circle. The background is a separate decorative asset kept
   at ~12% behind the content (tablet up only).
   --------------------------------------------------------------------------- */

.home-sectors {
  position: relative;
  overflow: hidden;
  padding-block: 56px;
  background: var(--c-surface);
}

/* Decorative context only: the photo shows through faintly in the open white
   space and never competes with the copy (phones drop it entirely). */
.sectors-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: 0.12;
  pointer-events: none;
}

.sectors-inner { position: relative; }

/* Head ---------------------------------------------------------------------- */

.sectors-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  /* The darker brand orange: #c4823a is 3.18:1 on white, short of AA for
     this small label; this shade is 4.68:1. */
  color: var(--c-tertiary-badge);
}

.sectors-title {
  margin: 0;
  font-family: var(--font-display);
  /* Sized so "Soluciones pensadas" holds one line down to 375px. */
  font-size: clamp(1.75rem, 8.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-primary);
}

.sectors-title span { display: block; }

.sectors-title-accent { color: var(--c-tertiary); }

.sectors-desc {
  max-width: 36em;
  margin: 16px 0 0;
  color: var(--c-secondary);
  font-size: 16px;
  line-height: 1.55;
}

/* Upper-right statement: tablet and desktop only. */
.sectors-editorial { display: none; }

/* Cards --------------------------------------------------------------------- */

.sectors-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.sectors-list > li { min-width: 0; display: flex; }

.sector-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  /* A floor, not a lock: a long title or description grows the card
     instead of clipping it. That only works while the card itself does not
     clip (aspect-ratio drops its automatic minimum height under
     overflow: hidden), so the photo and the scrim clip themselves. */
  aspect-ratio: 4 / 5.4;
  border-radius: 8px;
  /* Empty-photo state: a dark industrial panel the white copy still reads on. */
  background: #2a2a2a;
  color: var(--c-on-primary);
  transition: transform 0.25s ease;
}

.sector-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
}

.sector-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.sector-card--construction .sector-img { object-position: center center; }
.sector-card--manufacturing .sector-img { object-position: 58% center; }
.sector-card--logistics .sector-img { object-position: center center; }
.sector-card--height .sector-img { object-position: 62% center; }

/* Bottom scrim (the approved gradient); hover deepens it slightly. */
.sector-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    to top,
    rgba(17, 17, 17, 0.92) 0%,
    rgba(17, 17, 17, 0.72) 38%,
    rgba(17, 17, 17, 0.12) 72%,
    rgba(17, 17, 17, 0) 100%
  );
  transition: opacity 0.25s ease;
}

.sector-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px;
}

.sector-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-tertiary);
}

.sector-icon img,
.sector-icon svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.sector-name {
  font-family: var(--font-display);
  /* Two narrow columns on phones: the long "Trabajo en altura y
     mantenimiento" wraps to three lines without breaking a word. */
  font-size: clamp(1rem, 4.4vw, 1.375rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

.sector-desc {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.4;
}

.sector-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-display);
  /* Sized so "Ver soluciones" + arrow hold one line in a 375px column. */
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.sector-arrow {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--c-tertiary);
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .sector-card:hover { transform: translateY(-2px); }

  .sector-card:hover .sector-img { transform: scale(1.03); }

  .sector-card:hover::after { opacity: 0.94; }

  .sector-card:hover .sector-arrow { transform: translateX(4px); }
}

/* CTA bar ------------------------------------------------------------------- */

.sectors-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  margin-top: 24px;
  padding: 16px 56px;
  border-radius: 4px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  /* Tighter tracking on phones keeps the label to two lines. */
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

/* Arrow pinned right so the label stays optically centred. */
.sectors-cta-arrow {
  position: absolute;
  right: 22px;
  width: 26px;
  height: 26px;
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .sectors-cta:hover { background: #2a2a2a; }

  .sectors-cta:hover .sectors-cta-arrow { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .sector-card,
  .sector-img,
  .sector-arrow,
  .sectors-cta-arrow { transition: none; }

  .sector-card:hover,
  .sector-card:hover .sector-img,
  .sector-card:hover .sector-arrow,
  .sectors-cta:hover .sectors-cta-arrow { transform: none; }
}

/* Larger phones — 400px+ ---------------------------------------------------- */

@media (min-width: 400px) {
  .sector-body { padding: 16px; }

  .sector-icon { width: 46px; height: 46px; }

  .sector-icon img,
  .sector-icon svg { width: 24px; height: 24px; }

  .sector-desc { font-size: 14px; }

  .sector-link { gap: 8px; font-size: 14px; }

  .sector-arrow { width: 20px; height: 20px; }

  .sectors-cta { font-size: 14px; }
}

/* Tablet — 768px+ ----------------------------------------------------------- */

@media (min-width: 768px) {
  .home-sectors { padding-block: 72px; }

  .sectors-bg { display: block; }

  .sectors-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
  }

  .sectors-title { font-size: clamp(2.5rem, 5.6vw, 3.5rem); }

  .sectors-desc { font-size: 18px; }

  .sectors-editorial {
    display: flex;
    flex-direction: column;
    flex: none;
    margin: 8px 0 0;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--c-secondary);
  }

  .sectors-editorial-line { display: block; }

  .sectors-editorial-rule {
    display: block;
    width: 48px;
    height: 2px;
    margin-top: 14px;
    background: var(--c-tertiary);
  }

  .sectors-list {
    gap: 18px;
    margin-top: 36px;
  }

  .sector-card {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }

  .sector-body { padding: 24px; }

  .sector-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
  }

  .sector-icon img,
  .sector-icon svg { width: 30px; height: 30px; }

  .sector-name { font-size: clamp(1.5rem, 3.2vw, 1.875rem); }

  .sector-desc {
    max-width: 26em;
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.45;
  }

  .sector-link { margin-top: 16px; font-size: 16px; }

  .sectors-cta {
    min-height: 66px;
    margin-top: 28px;
    padding-inline: 72px;
    font-size: 14px;
    letter-spacing: 0.18em;
  }

  .sectors-cta-arrow { right: 32px; }
}

/* Desktop — 1280px+: four in a row ----------------------------------------- */

@media (min-width: 1280px) {
  .home-sectors { padding-block: 88px; }

  .sectors-title { font-size: clamp(3.25rem, 4.2vw, 4.25rem); }

  .sectors-desc { font-size: 20px; }

  .sectors-editorial { font-size: 14px; margin-right: 24px; }

  .sectors-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 40px;
  }

  .sector-card { aspect-ratio: 3 / 4; border-radius: 6px; }

  .sector-body { padding: 26px; }

  .sector-icon { width: 60px; height: 60px; }

  .sector-icon img,
  .sector-icon svg { width: 30px; height: 30px; }

  .sector-name { font-size: clamp(1.5rem, 1.9vw, 1.875rem); line-height: 1.05; }

  .sector-desc { font-size: 16px; }

  .sector-link { font-size: 17px; }

  /* Desktop bar: label left, arrow right (approved composition). */
  .sectors-cta {
    justify-content: flex-start;
    min-height: 70px;
    margin-top: 36px;
    padding-inline: 46px 96px;
    text-align: left;
  }

  .sectors-cta-arrow { right: 46px; width: 30px; height: 30px; }
}

@media (min-width: 1920px) {
  .sector-desc { font-size: 18px; }

  .sectors-cta { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Section 8 — más vendidos

   Editorial split header (copy | statement | worker photo behind a CSS
   diagonal) over up to eight commerce cards and the catalog CTA. The section
   sits on a warm off-white so the white cards read as products, distinct from
   the image-led cards of Section 7 and the plain showcase of Section 3.
   Phones: no photo, four cards in two columns. 768–1023: two columns.
   1024+: four columns × two rows. Product photos are contained, never
   cropped.
   --------------------------------------------------------------------------- */

.home-bestsellers {
  position: relative;
  padding-block: 56px;
  /* A lighter warm ground than --c-neutral: the #c4823a heading line needs
     it to keep 3:1 (3.05 here, 2.9 on the neutral). */
  background: #fbfaf8;
}

/* Header ---------------------------------------------------------------------- */

.bs-top { position: relative; }

.bs-eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
  /* A deeper brand orange: 5.03:1 on this ground (#a9631e is 4.48). */
  color: #9e5c1c;
}

.bs-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 2.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-primary);
}

.bs-title span { display: block; }

.bs-title-accent { color: var(--c-tertiary); }

.bs-desc {
  max-width: 32em;
  margin: 16px 0 0;
  color: var(--c-secondary);
  font-size: 16px;
  line-height: 1.55;
}

/* The statement and the worker photo join from the tablet up. */
.bs-editorial,
.bs-figure { display: none; }

/* Grid ------------------------------------------------------------------------ */

.bs-preview-note {
  margin: 28px 0 0;
  padding: 8px 12px;
  border: 1px dashed var(--c-tertiary);
  border-radius: 4px;
  font-size: 13px;
  color: var(--c-secondary);
}

.bs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.bs-item { display: flex; min-width: 0; }

/* Phones start with four products; the catalog CTA carries the rest. */
@media (max-width: 767px) {
  .bs-item:nth-child(n + 5) { display: none; }
}

.bs-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bs-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bs-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f7f7f6;
}

/* A fixed 90% box with contain: any catalog photo — portrait, landscape or
   transparent — fits whole and the square never stretches. */
.bs-img-product {
  position: absolute;
  inset: 5%;
  width: 90%;
  height: 90%;
  object-fit: contain;
  transition: transform 0.2s ease;
}

/* Missing catalog image: a neutral panel, never a stand-in product. */
.bs-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ebe7e1;
  background: var(--c-neutral);
  /* 4.6:1 on the neutral panel. */
  color: #6f6a62;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.bs-placeholder svg { width: 34px; height: 34px; }

.bs-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f2d5b8;
  color: var(--c-primary);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.bs-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 14px 12px 12px;
}

.bs-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #6c7480;
}

.bs-name {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
}

.bs-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.bs-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-primary);
}

.bs-old {
  font-size: 13px;
  color: var(--c-secondary);
}

.bs-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--c-secondary);
}

/* Five outlined stars with the filled share clipped to the real rating. */
.bs-stars {
  position: relative;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
  color: #d9d4cc;
}

.bs-stars::before { content: "★★★★★"; }

.bs-stars::after {
  content: "★★★★★";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pct, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-tertiary);
}

/* Cart control -------------------------------------------------------------- */

.bs-actions { padding: 0 12px 12px; }

.bs-cart { margin: 0; }

.bs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.bs-btn-icon { flex: none; width: 18px; height: 18px; }

.bs-btn:disabled { opacity: 0.7; cursor: progress; }

/* Result of the last add, announced politely; empty until a request ends. */
.bs-cart-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--c-secondary);
}

.bs-cart-status:not(:empty) { margin-top: 6px; }

.bs-cart.is-added .bs-cart-status { color: #2f6b3a; }

.bs-cart.is-failed .bs-cart-status { color: #a1342b; }

/* Narrow cards say "Agregar"; the accessible name is always the full one. */
.bs-btn-full { display: none; }

.bs-btn--options {
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: inset 0 0 0 1px var(--c-primary);
}

.bs-btn--disabled {
  background: var(--c-surface-muted);
  color: var(--c-secondary);
  cursor: default;
}

@media (hover: hover) {
  .bs-card:hover {
    border-color: #c3bcb2;
    transform: translateY(-2px);
  }

  .bs-card:hover .bs-img-product { transform: scale(1.02); }

  .bs-btn:hover { background: #2a2a2a; }

  .bs-btn--options:hover { background: var(--c-neutral); }

  .bs-btn--disabled:hover { background: var(--c-surface-muted); }
}

.bs-link:focus-visible { outline-offset: -2px; }

/* CTA bar --------------------------------------------------------------------- */

.bs-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin-top: 24px;
  padding: 16px 48px;
  border-radius: 4px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  /* Tighter tracking on phones keeps the label on one line. */
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.bs-cta-arrow {
  position: absolute;
  right: 22px;
  width: 26px;
  height: 26px;
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .bs-cta:hover { background: #2a2a2a; }

  .bs-cta:hover .bs-cta-arrow { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .bs-card,
  .bs-img-product,
  .bs-cta-arrow { transition: none; }

  .bs-card:hover,
  .bs-card:hover .bs-img-product,
  .bs-cta:hover .bs-cta-arrow { transform: none; }
}

@media (min-width: 400px) {
  .bs-info { padding: 16px 14px 12px; }

  .bs-actions { padding: 0 14px 14px; }

  .bs-name { font-size: 16px; }

  .bs-price { font-size: 19px; }

  .bs-badge { font-size: 11px; }

  .bs-cta { font-size: 14px; }
}

/* Tablet — 768px+ --------------------------------------------------------------- */

@media (min-width: 768px) {
  .home-bestsellers { padding-block: 0 72px; }

  /* Copy | statement on the left 62%; the photo fills the right behind the
     diagonal, flush with the top of the section. */
  .bs-top { min-height: 300px; }

  .bs-top-inner {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding-block: 56px 40px;
    padding-right: calc(32% + 8px);
  }

  .bs-title { font-size: clamp(2.25rem, 5vw, 3.25rem); }

  .bs-desc { font-size: 17px; }

  /* The statement needs the desktop's width; below it the heading keeps
     its line. */
  .bs-editorial {
    display: none;
    flex-direction: column;
    flex: none;
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.75;
    text-transform: uppercase;
    color: var(--c-secondary);
  }

  .bs-editorial-line { display: block; }

  .bs-editorial-rule {
    display: block;
    order: 1;
    width: 44px;
    height: 2px;
    margin-top: 14px;
    background: var(--c-tertiary);
  }

  .bs-figure {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 34%;
    margin: 0;
    overflow: hidden;
    background: var(--c-surface-muted);
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  }

  .bs-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
  }

  .bs-grid {
    gap: 16px;
    margin-top: 32px;
  }

  .bs-info { padding: 18px 18px 14px; }

  .bs-actions { padding: 0 18px 18px; }

  .bs-cat { font-size: 12px; }

  .bs-name {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 17px;
  }

  .bs-price { font-size: 21px; }

  .bs-old { font-size: 14px; }

  .bs-rating { font-size: 13px; }

  .bs-stars { font-size: 15px; }

  .bs-btn { min-height: 46px; font-size: 14px; }

  .bs-btn-full { display: inline; }

  .bs-btn-short { display: none; }

  .bs-cta {
    min-height: 66px;
    margin-top: 28px;
    padding-inline: 72px;
    font-size: 14px;
    letter-spacing: 0.18em;
  }

  .bs-cta-arrow { right: 32px; }
}

/* Tablet only — 768–1023px: horizontal cards in two columns (approved iPad
   composition): photo left, details right, cart control under the details. */
@media (min-width: 768px) and (max-width: 1023px) {
  .bs-card { position: relative; }

  .bs-link {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
  }

  .bs-media {
    aspect-ratio: auto;
    min-height: 210px;
  }

  .bs-badge { top: 8px; left: 8px; }

  .bs-info {
    padding: 16px 16px 78px;
  }

  /* The details column is narrow here: three lines before the ellipsis. */
  .bs-name {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .bs-actions {
    position: absolute;
    left: 40%;
    right: 0;
    bottom: 0;
    padding: 0 16px 16px;
  }

  .bs-btn { font-size: 13px; }
}

/* Laptop — 1024px+: four columns × two rows ---------------------------------- */

@media (min-width: 1024px) {
  .bs-top { min-height: 320px; }

  .bs-top-inner { padding-right: calc(36% + 16px); }

  .bs-figure { width: 38%; }

  .bs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .bs-info { padding: 16px 16px 12px; }

  .bs-actions { padding: 0 16px 16px; }

  .bs-name { font-size: 16px; }

  .bs-price { font-size: 20px; }

  .bs-btn { font-size: 13px; }
}

/* Desktop — 1280px+ ----------------------------------------------------------- */

@media (min-width: 1280px) {
  .home-bestsellers { padding-bottom: 88px; }

  .bs-top { min-height: 340px; }

  .bs-editorial { display: flex; }

  .bs-top-inner {
    gap: 48px;
    padding-block: 64px 44px;
  }

  .bs-title { font-size: clamp(3.25rem, 4.2vw, 4.25rem); }

  .bs-desc { font-size: 20px; }

  .bs-editorial { font-size: 13px; margin-top: 0; }

  /* Desktop mockup: the rule sits above the statement. */
  .bs-editorial-rule { order: -1; margin: 0 0 16px; }

  .bs-img { object-position: 65% center; }

  .bs-grid { gap: 18px; margin-top: 36px; }

  .bs-info { padding: 18px 20px 14px; }

  .bs-actions { padding: 0 20px 20px; }

  .bs-name { font-size: 18px; }

  .bs-price { font-size: 22px; }

  .bs-btn { min-height: 48px; font-size: 14px; }

  .bs-cta {
    justify-content: flex-start;
    min-height: 70px;
    margin-top: 36px;
    padding-inline: 46px 96px;
    text-align: left;
  }

  .bs-cta-arrow { right: 46px; width: 30px; height: 30px; }
}

@media (min-width: 1920px) {
  .bs-name { font-size: 20px; }

  .bs-price { font-size: 24px; }

  .bs-cta { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Section 9 — empresas que confían / prueba social B2B

   Phones stack copy ▸ logos (a four-up scroll-snap row) ▸ photo (4:3,
   rounded) ▸ one testimonial at a time ▸ metrics. From 768px the photo moves
   to the right behind a clip-path diagonal, flush with the top of the
   section; on the desktop it runs down behind the first testimonial row. The
   source photo is never cut — every angle here is CSS.
   --------------------------------------------------------------------------- */

.home-trust {
  position: relative;
  overflow: hidden;
  padding-block: 56px;
  background: var(--c-surface);
}

.trust-top { position: relative; }

.trust-top-inner { display: flex; flex-direction: column; }

.trust-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-primary);
}

.trust-eyebrow-rule {
  flex: none;
  width: 40px;
  height: 2px;
  background: var(--c-tertiary);
}

.trust-title {
  margin: 0;
  font-family: var(--font-display);
  /* Sized so "con personas seguras" holds one line down to 375px (the
     brief's 40–50px would break it on every phone). */
  font-size: clamp(1.625rem, 7.3vw, 3.125rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-primary);
}

.trust-title span { display: block; }

.trust-title-accent { color: var(--c-tertiary); }

.trust-desc {
  max-width: 34em;
  margin: 16px 0 0;
  color: var(--c-secondary);
  font-size: 17px;
  line-height: 1.55;
}

.trust-preview-note {
  margin: 24px 0 0;
  padding: 8px 12px;
  border: 1px dashed var(--c-tertiary);
  border-radius: 4px;
  font-size: 13px;
  color: var(--c-secondary);
}

/* Client logos ------------------------------------------------------------------ */

/* Phones: four logos in view and a sliver of the fifth, swiped sideways. */
.trust-logos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 10px) / 4.3);
  gap: 10px;
  margin-top: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.trust-logos::-webkit-scrollbar { display: none; }

.trust-logo { scroll-snap-align: start; min-width: 0; }

.trust-logo-box {
  display: grid;
  place-items: center;
  height: 56px;
  padding: 6px 4px;
}

/* Grayscale is presentation only; the source files keep their colours. */
.trust-logo-box img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 36px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* A client whose logo is not uploaded yet: its name as a wordmark. */
.trust-logo-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--c-secondary);
}

@media (hover: hover) {
  a.trust-logo-box:hover img { filter: none; opacity: 1; }
}

/* Photo --------------------------------------------------------------------------- */

.trust-figure {
  position: relative;
  margin: 28px var(--container-pad) 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--c-surface-muted);
}

/* Phones drop the empty panel; the larger layouts keep it under the cut. */
.trust-figure:not(:has(img)) { display: none; }

.trust-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
}

.trust-editorial { display: none; }

/* Testimonials ---------------------------------------------------------------------- */

.trust-bottom { position: relative; z-index: 1; }

.trust-carousel { margin-top: 32px; }

.trust-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  column-gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.trust-track::-webkit-scrollbar { display: none; }

.trust-track:focus-visible { outline-offset: 4px; }

.trust-slide {
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}

.trust-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 24px 22px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
}

.trust-quote-mark {
  flex: none;
  width: 30px;
  height: 22px;
  color: var(--c-tertiary);
}

.trust-quote {
  flex: 1;
  margin: 16px 0 0;
}

.trust-quote p {
  margin: 0;
  color: #2a2a2a;
  font-size: 17px;
  line-height: 1.55;
}

.trust-card-rule {
  display: block;
  width: 48px;
  height: 1px;
  margin: 20px 0 16px;
  background: var(--c-border);
}

.trust-person {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-avatar {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface-muted);
}

.trust-person-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-person-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-primary);
}

.trust-person-meta {
  font-size: 14px;
  line-height: 1.35;
  color: var(--c-secondary);
}

.trust-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.trust-nav {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-primary);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.trust-nav svg { width: 20px; height: 20px; }

/* aria-disabled, not disabled: a disabled button would drop keyboard focus
   at the first/last page. go() clamps, so the click is a no-op there. */
.trust-nav[aria-disabled="true"] { opacity: 0.35; cursor: default; }

.trust-dots { display: flex; gap: 2px; }

/* 24px hit area around a 10px dot (WCAG 2.5.8). */
.trust-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.trust-dot::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  /* 3.5:1 on white (WCAG 1.4.11); the active dot is the brand orange and
     larger, so the two states never rely on colour alone. */
  background: #8c877f;
  transition: background-color 0.2s ease, inset 0.2s ease;
}

.trust-dot.is-active::before { inset: 5px; background: var(--c-tertiary); }

@media (hover: hover) {
  .trust-nav:not([aria-disabled="true"]):hover { border-color: var(--c-primary); background: var(--c-neutral); }
}

/* Metrics --------------------------------------------------------------------------- */

.trust-metrics {
  display: grid;
  margin-top: 36px;
  border-top: 1px solid var(--c-border);
}

/* Phones: one metric per row, icon left — three columns of ~110px left
   the supporting text four lines deep. */
.trust-metric {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding-block: 16px;
  border-bottom: 1px solid var(--c-border);
}

.trust-metric-icon { flex: none; width: 32px; height: 32px; color: var(--c-tertiary); }

.trust-metric-icon svg { width: 100%; height: 100%; }

.trust-metric-text { display: flex; flex-direction: column; gap: 2px; }

/* A verified figure: large, bold, brand orange (large text, 3.18:1). */
.trust-metric-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-tertiary);
}

.trust-metric-label,
.trust-metric-sub {
  font-size: 12px;
  line-height: 1.35;
  color: var(--c-secondary);
}

/* No verified figure: the label is the title. */
.trust-metric-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--c-primary);
}

@media (prefers-reduced-motion: reduce) {
  .trust-logo-box img,
  .trust-nav,
  .trust-dot::before { transition: none; }
}

@media (min-width: 400px) {
  .trust-metric-label,
  .trust-metric-sub { font-size: 13px; }

  .trust-metric-title { font-size: 13px; }
}

/* Tablet — 768px+ --------------------------------------------------------------------- */

@media (min-width: 768px) {
  .home-trust { padding-block: 0 72px; }

  .trust-top-inner {
    padding-block: 64px 40px;
    padding-right: calc(40% + 16px);
  }

  .trust-title { font-size: clamp(2.5rem, 5.4vw, 3.5rem); }

  /* Portrait tablets: the accent line takes two lines, kept even. */
  .trust-title-accent { text-wrap: balance; }

  .trust-desc { font-size: 17px; }

  .trust-logos {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 8px 16px;
    margin-top: 32px;
    overflow: visible;
  }

  .trust-logo-box img { max-height: 42px; }

  .trust-figure,
  .trust-figure:not(:has(img)) {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
  }

  .trust-img { object-position: 60% center; }

  .trust-editorial {
    position: absolute;
    right: 28px;
    bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.7;
    text-align: right;
    text-transform: uppercase;
    color: var(--c-on-primary);
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
  }

  .trust-editorial-line { display: block; }

  .trust-editorial-rule {
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 12px;
    background: var(--c-tertiary);
  }

  .trust-carousel { margin-top: 36px; }

  /* Portrait tablet: two testimonials in view. */
  .trust-track { grid-auto-columns: calc((100% - 16px) / 2); }

  .trust-card { padding: 28px 26px; }

  .trust-metrics {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    margin-top: 44px;
    padding-top: 32px;
  }

  .trust-metric {
    justify-content: center;
    gap: 14px;
    padding: 0 16px;
    border-bottom: 0;
  }

  .trust-metric + .trust-metric { border-left: 1px solid var(--c-border); }

  .trust-metric-icon { width: 38px; height: 38px; }

  .trust-metric-value { font-size: 30px; }

  .trust-metric-label,
  .trust-metric-sub { font-size: 14px; }

  .trust-metric-title { font-size: 14px; }
}

/* Laptop — 1024px+: three testimonials in view -------------------------------------- */

@media (min-width: 1024px) {
  /* A narrower photo gives the heading its one-line width. */
  .trust-top-inner { padding-right: calc(36% + 16px); }

  .trust-figure,
  .trust-figure:not(:has(img)) { width: 38%; }

  .trust-title { font-size: clamp(2.75rem, 4.4vw, 3.5rem); }

  .trust-track {
    grid-auto-columns: calc((100% - 2 * 18px) / 3);
    column-gap: 18px;
  }

  .trust-quote p { font-size: 17px; }
}

/* Desktop — 1280px+ ------------------------------------------------------------------ */

@media (min-width: 1280px) {
  .home-trust { padding-bottom: 88px; }

  .trust-top-inner {
    padding-block: 88px 48px;
    padding-right: calc(42% + 24px);
  }

  .trust-title { font-size: clamp(3.25rem, 4.2vw, 4.25rem); }

  .trust-desc { font-size: 19px; }

  .trust-logos { gap: 12px 24px; margin-top: 40px; }

  .trust-logo-box { height: 64px; }

  .trust-logo-box img { max-height: 48px; }

  .trust-logo-name { font-size: 13px; }

  /* The photo runs on behind the first testimonial row, as approved. */
  .trust-figure,
  .trust-figure:not(:has(img)) {
    bottom: -140px;
    width: 44%;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
  }

  .trust-editorial {
    top: 48px;
    bottom: auto;
    right: clamp(32px, 3vw, 64px);
    font-size: 13px;
  }

  .trust-carousel { margin-top: 8px; }

  .trust-card { padding: 30px 30px 28px; }

  .trust-quote p { font-size: 18px; }

  .trust-metrics { margin-top: 52px; padding-top: 36px; }

  .trust-metric-value { font-size: 36px; }

  .trust-metric-icon { width: 42px; height: 42px; }
}

@media (min-width: 1920px) {
  .trust-quote p { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
   Section 10 — CTA final / asesoría especializada

   A dark editorial block with the worker photo (fcta_image) as the section's
   own background. Phones and portrait tablets stack: the photo fills the top
   and fades into the dark ground under the copy. From 1024px the photo
   covers the whole section and a left-to-right overlay keeps the copy side
   readable. Without a photo the dark ground carries a faint warm glow.

   The primary button uses the darker tertiary (--c-tertiary-badge): white on
   #C4823A is 3.18:1, below AA for a 14px label; #A9631E is 4.68:1.
   --------------------------------------------------------------------------- */

.home-fcta {
  --fcta-ground: #0a0d11;
  --fcta-photo-h: clamp(400px, 112vw, 520px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fcta-ground);
  color: #fff;
}

.fcta-bg {
  position: absolute;
  inset: 0 0 auto;
  z-index: -2;
  width: 100%;
  height: var(--fcta-photo-h);
  object-fit: cover;
  object-position: 60% center;
}

.fcta-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 45% at 85% 12%, rgba(196, 130, 58, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(7, 10, 14, 0) 0%, var(--fcta-ground) 100%);
}

/* The brief's mobile overlay, anchored to the photo's height so the photo
   melts into the ground exactly where it ends. */
.has-photo .fcta-scrim {
  background:
    radial-gradient(ellipse 60% 22% at 100% 0%, rgba(7, 10, 14, 0.75), transparent 100%),
    linear-gradient(
    180deg,
    rgba(7, 10, 14, 0.3) 0,
    rgba(7, 10, 14, 0.45) calc(var(--fcta-photo-h) * 0.4),
    rgba(7, 10, 14, 0.82) calc(var(--fcta-photo-h) * 0.7),
    var(--fcta-ground) var(--fcta-photo-h)
  );
}

/* The large background statement: a texture, desktop only. */
.fcta-statement { display: none; }

.fcta-inner {
  position: relative;
  padding-block: 48px 40px;
  padding-inline: 24px;
}

.has-photo .fcta-inner { padding-top: calc(var(--fcta-photo-h) * 0.66); }

.fcta-editorial {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.fcta-editorial-rule {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--c-tertiary);
}

.fcta-editorial--top {
  position: absolute;
  text-shadow: 0 1px 10px rgba(7, 10, 14, 0.85);
  top: 28px;
  right: 24px;
}

.fcta-editorial--top .fcta-editorial-rule { margin-bottom: 8px; }

/* On phones with no photo the copy starts at the top, where the statement
   would sit, so it waits for the photo. */
.home-fcta:not(.has-photo) .fcta-editorial--top { display: none; }

.fcta-editorial--photo { display: none; }

.fcta-copy { max-width: 640px; }

.fcta-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.9);
}

.fcta-eyebrow::before {
  content: "";
  flex: none;
  width: 36px;
  height: 2px;
  background: var(--c-tertiary);
}

.fcta-title {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fcta-title-main,
.fcta-title-accent {
  display: block;
  text-wrap: balance;
}

.fcta-title-main {
  font-size: clamp(2.25rem, 9.6vw, 3.25rem);
  line-height: 1;
  color: #fff;
}

.fcta-title-accent {
  margin-top: 10px;
  text-shadow: 0 2px 18px rgba(7, 10, 14, 0.55);
  font-size: clamp(2.125rem, 9vw, 3rem);
  line-height: 1.02;
  color: var(--c-tertiary);
}

.fcta-desc {
  margin: 22px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

.fcta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.fcta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fcta-btn--primary {
  background: var(--c-tertiary-badge);
  color: #fff;
}

.fcta-btn--secondary {
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff;
}

.fcta-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.fcta-arrow {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .fcta-btn--primary:hover { background: #95561a; }
  .fcta-btn--secondary:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.07);
  }
  .fcta-btn:hover .fcta-arrow { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .fcta-btn,
  .fcta-arrow { transition: none; }
  .fcta-btn:hover .fcta-arrow { transform: none; }
}

.fcta-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.fcta-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
}

.fcta-benefit + .fcta-benefit { border-left: 1px solid rgba(255, 255, 255, 0.2); }

.fcta-benefit svg {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--c-tertiary);
}

/* Portrait tablet: still stacked, with room for the buttons in a row. */
@media (min-width: 768px) {
  .home-fcta { --fcta-photo-h: clamp(460px, 62vw, 620px); }

  .fcta-inner {
    padding-block: 72px 64px;
    padding-inline: var(--container-pad);
  }

  .has-photo .fcta-inner { padding-top: calc(var(--fcta-photo-h) * 0.62); }

  .fcta-editorial { font-size: 11px; }
  .fcta-editorial--top { top: 40px; right: var(--container-pad); }

  .fcta-copy { max-width: 640px; }

  .fcta-eyebrow { font-size: 13px; }
  .fcta-title-main { font-size: clamp(3rem, 6.6vw, 3.5rem); }
  .fcta-title-accent { font-size: clamp(2.75rem, 6vw, 3.25rem); }
  .fcta-desc { font-size: 18px; }

  /* The pair stays on one row even where it is wider than the copy. */
  .fcta-actions {
    flex-direction: row;
    gap: 16px;
    width: max-content;
  }

  .fcta-btn {
    padding-inline: 24px;
    font-size: 13px;
    white-space: nowrap;
  }

  .fcta-benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 0;
  }

  .fcta-benefit {
    flex-direction: row;
    gap: 10px;
    padding-inline: 18px;
    font-size: 14px;
    text-align: left;
  }

  .fcta-benefit:first-child { padding-left: 0; }

  /* A dot, not a rule, between the inline benefits. */
  .fcta-benefit + .fcta-benefit {
    position: relative;
    border-left: 0;
  }

  .fcta-benefit + .fcta-benefit::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
  }

  .fcta-benefit svg { width: 22px; height: 22px; }
}

/* Side by side: the photo covers the section, the copy holds the left. */
@media (min-width: 1024px) {
  .fcta-bg {
    inset: 0;
    height: 100%;
    object-position: 72% center;
  }

  .fcta-scrim {
    background:
      radial-gradient(ellipse 45% 70% at 88% 30%, rgba(196, 130, 58, 0.14), transparent 70%),
      linear-gradient(90deg, rgba(7, 10, 14, 0.4) 0%, rgba(7, 10, 14, 0) 100%);
  }

  /* The brief's overlay with its dark plateau held a little longer, so the
     end of the one-line accent stays readable, plus a corner shade under the
     top statement, which sits on the brightest sky. */
  .has-photo .fcta-scrim {
    background:
      radial-gradient(ellipse 36% 42% at 100% 0%, rgba(7, 10, 14, 0.88) 0%, rgba(7, 10, 14, 0.74) 50%, transparent 100%),
      linear-gradient(
        90deg,
        rgba(7, 10, 14, 0.94) 0%,
        rgba(7, 10, 14, 0.9) 34%,
        rgba(7, 10, 14, 0.74) 56%,
        rgba(7, 10, 14, 0.22) 78%,
        rgba(7, 10, 14, 0) 100%
      );
  }

  .fcta-inner,
  .has-photo .fcta-inner {
    display: flex;
    align-items: center;
    min-height: clamp(620px, 56vw, 880px);
    padding-block: 96px;
  }

  .home-fcta:not(.has-photo) .fcta-editorial--top { display: flex; }

  .fcta-copy { max-width: min(800px, 62%); }

  /* Sized to the approved desktop: the white line breaks after "necesita"
     and the accent line holds one row, reaching just past the copy column
     into the darkest part of the overlay. */
  .fcta-title-main {
    max-width: 12.5em;
    font-size: clamp(3rem, 4vw, 5rem);
    text-wrap: wrap;
  }

  .fcta-title-accent {
    margin-top: 12px;
    font-size: clamp(2.75rem, 3.7vw, 4.5rem);
    white-space: nowrap;
  }

  .fcta-desc {
    margin-top: 30px;
    max-width: 38em;
    font-size: clamp(1.125rem, 1.35vw, 1.5rem);
    line-height: 1.45;
  }

  .fcta-actions { margin-top: 34px; gap: 18px; }

  .fcta-btn { min-height: 62px; }

  .fcta-benefits { margin-top: 34px; }

  .fcta-editorial--top { top: 56px; }

  .fcta-editorial--photo {
    display: flex;
    position: absolute;
    right: calc(var(--container-pad) + 6%);
    bottom: 18%;
    gap: 6px;
  }

  .fcta-editorial--photo .fcta-editorial-rule { margin-top: 10px; }
}

@media (min-width: 1280px) {
  .fcta-statement {
    position: absolute;
    top: 50%;
    left: 62%;
    z-index: -1;
    display: flex;
    flex-direction: column;
    margin: 0;
    transform: translateY(-62%);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 3.4vw, 4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.045);
    pointer-events: none;
  }

  /* With the photo the image itself is the texture. */
  .has-photo .fcta-statement { display: none; }

  .fcta-btn {
    padding-inline: 32px;
    font-size: 15px;
  }

  .fcta-inner,
  .has-photo .fcta-inner { padding-block: 112px; }

  .fcta-editorial { font-size: 12px; }
}

@media (min-width: 1920px) {
  .fcta-copy { max-width: 1040px; }
  .fcta-editorial { font-size: 13px; }
}

/* ---------------------------------------------------------------------------
   Empty slots (Sections 8 and 9)

   While a Cockpit collection has no items, its cards render as empty slots:
   the card's shape with neutral bars where the text and images will go, no
   copy and nothing interactive (aria-hidden). Static — no shimmer.
   --------------------------------------------------------------------------- */

.slot-line,
.slot-logo,
.slot-avatar {
  display: block;
  border-radius: 3px;
  background: #ece8e2;
}

.slot-line { height: 10px; }

.slot-line--xs { width: 38%; }
.slot-line--sm { width: 45%; }
.slot-line--md { width: 62%; }
.slot-line--lg { width: 82%; }
.slot-line--full { width: 100%; }

.slot-line + .slot-line { margin-top: 10px; }

.slot-line--price {
  width: 42%;
  height: 16px;
  margin-top: auto;
}

.bs-info .slot-line--price { margin-top: auto; }

.slot-line--btn {
  height: 44px;
  border-radius: 4px;
}

.slot-logo { width: 72%; height: 18px; }

.slot-avatar { width: 100%; height: 100%; border-radius: 50%; }

.trust-person .slot-avatar { flex: none; width: 48px; height: 48px; }

/* These text boxes size to their content, so empty bars need a set width. */
.trust-person .slot-line,
.trust-metric .slot-line { width: 130px; }

.trust-person .slot-line--sm,
.trust-metric .slot-line--sm { width: 90px; }

.trust-quote-mark.is-slot { color: #e6e1da; }

/* Slots are not products: no hover lift. */
.bs-card.is-slot:hover {
  border-color: var(--c-border);
  transform: none;
}

/* One empty testimonial on phones, two on the portrait tablet. */
@media (max-width: 767px) {
  .trust-track.is-slots .trust-slide:nth-child(n + 2) { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .trust-track.is-slots .trust-slide:nth-child(n + 3) { display: none; }

  /* The real cards are horizontal here through their link; a slot has no
     link, so the card itself takes the same photo-left grid. */
  .bs-card.is-slot {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }

  .bs-card.is-slot .bs-media {
    grid-row: 1 / 3;
    aspect-ratio: auto;
    min-height: 210px;
  }

  .bs-card.is-slot .bs-info { padding: 16px; }

  .bs-card.is-slot .bs-actions {
    position: static;
    padding: 0 16px 16px;
  }
}

@media (min-width: 768px) {
  .slot-line--btn { height: 46px; }
}

/* ---------------------------------------------------------------------------
   Secondary pages — categories (/categorias, /categorias/<slug>)

   second_page.md: internal hero, category directory, CATEGORY_PAGE modules.
   Mobile first; tablet 768–1023, desktop 1024–1599, full screen 1600+.
   The content keeps the desktop measure on large screens: from 1920px the
   extra width becomes outer margin (--container-max stays 1440px here).

   Small orange text on light grounds uses #9E5C1C (4.78:1 on #F6F4F1, 5.25:1
   on white); orange buttons use --c-tertiary-badge #A9631E (white 4.68:1).
   --------------------------------------------------------------------------- */

.ihero,
.cat-benefits,
.cat-products,
.cat-directory,
.cat-editorial,
.cat-b2b,
.page-seo,
.page-faq,
.not-found {
  --container-max: 1440px;
  --c-eyebrow-light: #9e5c1c;
}

/* Header — category dropdown (desktop) and accordion (mobile menu) -------- */

.mobile-sub-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--c-surface-muted);
}

.mobile-sub-row a {
  flex: 1;
  border-bottom: 0;
}

.mobile-sub-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--c-primary);
  font-size: 15px;
  cursor: pointer;
}

.mobile-sub-toggle .icon-chevron { transition: transform 0.2s ease; }
.mobile-sub-toggle .icon-chevron.is-open { transform: rotate(180deg); }

.mobile-menu .mobile-sub {
  padding: 4px 0 8px 16px;
  border-bottom: 1px solid var(--c-surface-muted);
}

.mobile-menu .mobile-sub a {
  min-height: 44px;
  padding-block: 10px;
  border-bottom: 0;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--c-secondary);
}

.mobile-menu .mobile-sub a.is-active { color: var(--c-eyebrow-light, #9e5c1c); }

.mobile-sub-toggle:focus-visible,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown a:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 2px;
}

@media (min-width: 1280px) {
  .nav-has-dropdown {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    margin-left: -2px;
    border: 0;
    background: none;
    color: var(--c-primary);
    font-size: 13px;
    cursor: pointer;
  }

  .nav-dropdown-toggle .icon-chevron { opacity: 0.7; transition: transform 0.2s ease; }
  .nav-dropdown-toggle[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); opacity: 1; }

  /* A transparent bridge keeps hover alive across the gap to the panel. */
  .nav-dropdown {
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 50;
    min-width: 248px;
    padding-top: 10px;
  }

  .nav-dropdown ul,
  .nav-dropdown-all {
    background: var(--c-surface);
  }

  .nav-dropdown ul {
    display: block;
    padding: 8px 0;
    border: 1px solid var(--c-border);
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.06);
  }

  .main-nav .nav-dropdown a {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 16px;
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .main-nav .nav-dropdown a::after { content: none; }

  .main-nav .nav-dropdown li a:hover,
  .main-nav .nav-dropdown li a[aria-current="page"] {
    background: var(--c-neutral);
    color: var(--c-primary);
  }

  .nav-dropdown-arrow {
    flex: none;
    width: 14px;
    height: 14px;
    opacity: 0.55;
  }

  .main-nav .nav-dropdown-all {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--c-border);
    border-radius: 0 0 6px 6px;
    color: var(--c-eyebrow-light, #9e5c1c);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Breadcrumb -------------------------------------------------------------- */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--c-secondary);
}

.crumbs li { display: inline-flex; align-items: center; }

.crumbs li + li::before {
  content: "/";
  margin-right: 4px;
  color: #8c877f;
}

.crumbs a {
  display: inline-block;
  padding-block: 4px;
  color: var(--c-secondary);
  text-decoration: none;
}

.crumbs a:hover { color: var(--c-primary); text-decoration: underline; }

.crumbs [aria-current="page"] { display: inline-block; padding-block: 4px; color: var(--c-primary); }

/* Shared type ------------------------------------------------------------- */

.section-eyebrow,
.ihero-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-eyebrow-light);
}

.section-title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 7.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-primary);
  text-wrap: balance;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-eyebrow-light, #9e5c1c);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.text-link svg { width: 18px; height: 18px; transition: transform 0.2s ease; }

/* Buttons ----------------------------------------------------------------- */

.ihero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.ihero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ihero-btn--primary { background: var(--c-tertiary-badge); color: #fff; }

.ihero-btn--secondary {
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary);
}

.ihero-arrow { flex: none; width: 18px; height: 18px; transition: transform 0.2s ease; }

.ihero-btn:focus-visible,
.cat-card:focus-visible,
.text-link:focus-visible,
.related-cats a:focus-visible,
.cat-pager a:focus-visible,
.cat-sort select:focus-visible,
.faq-item summary:focus-visible,
.crumbs a:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 3px;
}

@media (hover: hover) {
  .ihero-btn--primary:hover { background: #95561a; }
  .ihero-btn--secondary:hover { background: var(--c-primary); color: #fff; }
  .ihero-btn:hover .ihero-arrow,
  .text-link:hover svg { transform: translateX(4px); }
}

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

.ihero {
  position: relative;
  overflow: hidden;
  background: var(--c-neutral);
}

.ihero-inner { padding-block: 20px 32px; }

.ihero-eyebrow { margin-top: 22px; }

.ihero-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--c-primary);
  text-wrap: balance;
}

.ihero-desc {
  max-width: 34em;
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: #3d3d3d;
}

/* Phones: the image follows the copy, full bleed; no photo ⇒ no figure. */
.ihero-figure {
  display: none;
  margin: 0;
}

.ihero.has-photo .ihero-figure {
  display: block;
  aspect-ratio: 16 / 11;
  background: var(--c-hero-bg);
}

.ihero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}

/* Category directory ------------------------------------------------------ */

.cat-directory { padding-block: 28px 56px; background: var(--c-neutral); }

.cat-grid {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-item { display: flex; min-width: 0; }

.cat-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-primary);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

/* The first category leads the list with a wide image. */
.cat-item:first-child .cat-card { grid-template-columns: 1fr; }

.cat-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  overflow: hidden;
  background: var(--c-hero-bg);
}

.cat-item:first-child .cat-media { aspect-ratio: 16 / 9; }

.cat-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.cat-media-empty { width: 30px; height: 30px; color: #b3ab9f; }

.cat-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.cat-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }

.cat-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cat-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-secondary);
}

.cat-arrow {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--c-primary);
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .cat-card:hover { border-color: var(--c-tertiary); }
  .cat-card:hover .cat-media img { transform: scale(1.03); }
  .cat-card:hover .cat-arrow { transform: translateX(4px); color: var(--c-eyebrow-light); }
}

/* Category page — benefits ------------------------------------------------ */

.cat-benefits {
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
}

.cat-benefits-list {
  display: grid;
  gap: 18px;
  margin-block: 0; /* keep the container's auto inline margins */
  padding-block: 24px;
  list-style: none;
}

.cat-benefit,
.cat-b2b-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cat-benefit-icon {
  display: inline-flex;
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--c-primary);
}

.cat-benefit-icon svg { width: 100%; height: 100%; }

.cat-benefit-text { display: flex; flex-direction: column; gap: 3px; }

.cat-benefit-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
}

.cat-benefit-sub {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-secondary);
}

.cat-block-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-primary);
}

/* Category page — products ------------------------------------------------ */

.cat-products { padding-block: 40px 56px; scroll-margin-top: 16px; }

.cat-products-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
}

.cat-products-count {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--c-secondary);
}

.cat-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-secondary);
}

.cat-sort select {
  min-height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  font: inherit;
  color: var(--c-primary);
}

.cat-products-grid {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.cat-product { display: flex; min-width: 0; }

/* Phones: one product per row, photo left (approved mobile composition) —
   the same horizontal card the homepage uses on the iPad. */
@media (max-width: 767px) {
  /* Four empty slots are enough to show the layout; the page content
     below must not sink under them. */
  .cat-product[aria-hidden="true"]:nth-child(n + 5) { display: none; }

  .cat-product .bs-card { position: relative; }

  .cat-product .bs-link,
  .cat-product .bs-card.is-slot {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
  }

  .cat-product .bs-card.is-slot { grid-template-rows: 1fr auto; }

  .cat-product .bs-media {
    aspect-ratio: auto;
    min-height: 168px;
  }

  .cat-product .bs-card.is-slot .bs-media { grid-row: 1 / 3; }

  .cat-product .bs-info { padding: 14px 14px 70px; }

  .cat-product .bs-card.is-slot .bs-info { padding: 14px; }

  .cat-product .bs-name { -webkit-line-clamp: 3; line-clamp: 3; }

  .cat-product .bs-actions {
    position: absolute;
    left: 40%;
    right: 0;
    bottom: 0;
    padding: 0 14px 14px;
  }

  .cat-product .bs-card.is-slot .bs-actions { position: static; padding: 0 14px 14px; }

  .cat-product .bs-btn-full { display: inline; }
  .cat-product .bs-btn-short { display: none; }
}

/* Filters: a "Filtrar" disclosure below 1024px, a sidebar from 1024px. */

.cat-filter-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  padding: 0 16px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
}

.cat-filter-toggle svg { flex: none; width: 20px; height: 20px; }

.cat-filter-toggle .cat-filter-chevron {
  margin-left: auto;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.cat-filter-chevron.is-open { transform: rotate(180deg); }

.cat-filters {
  display: none;
  margin-top: 12px;
  padding: 4px 16px 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-neutral);
}

.cat-filters.is-open { display: block; }

.cat-filters-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 12px;
  min-height: 52px;
}

/* Below 1024px the "Filtrar" button already titles the panel. */
@media (max-width: 1023px) {
  .cat-filters-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cat-filters-head { justify-content: flex-end; min-height: 8px; }

  .cat-filters.is-slot .cat-filters-head { display: none; }
}

.cat-filters-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  white-space: nowrap;
  font-weight: 800;
  color: var(--c-primary);
}

.cat-filters-clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-eyebrow-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cat-facet { border-top: 1px solid var(--c-border); }

.cat-facet-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
  list-style: none;
  cursor: pointer;
}

.cat-facet-summary::-webkit-details-marker { display: none; }

.cat-facet-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

details.cat-facet:not([open]) .cat-facet-chevron { transform: rotate(180deg); }

.cat-facet-body {
  min-width: 0;
  margin: 0;
  padding: 0 0 12px;
  border: 0;
}

.cat-facet-summary:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 2px;
}

.cat-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  color: var(--c-primary);
  cursor: pointer;
}

.cat-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-tertiary-badge);
}

.cat-check-count { font-size: 13px; color: var(--c-secondary); }

/* Price: a two-thumb slider over the min/max inputs. The two range inputs
   share one track; only their thumbs take pointer events. */
.cat-price-label {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
}

.cat-range {
  --a: 0%;
  --b: 100%;
  position: relative;
  height: 28px;
  margin: 0 9px 10px;
}

.cat-range::before,
.cat-range::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
}

.cat-range::before { left: 0; right: 0; background: var(--c-border); }

.cat-range::after {
  left: var(--a);
  right: calc(100% - var(--b));
  background: var(--c-tertiary-badge);
}

.cat-range input {
  position: absolute;
  inset: 0 -9px;
  z-index: 1;
  width: calc(100% + 18px);
  height: 28px;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.cat-range input::-webkit-slider-runnable-track { height: 28px; background: none; }
.cat-range input::-moz-range-track { height: 28px; background: none; }

.cat-range input::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--c-tertiary-badge);
  box-shadow: 0 0 0 1px var(--c-tertiary-badge);
  pointer-events: auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.cat-range input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--c-tertiary-badge);
  box-shadow: 0 0 0 1px var(--c-tertiary-badge);
  pointer-events: auto;
  cursor: pointer;
}

.cat-range input:focus-visible { outline: none; }

.cat-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--c-tertiary); }
.cat-range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--c-tertiary); }

/* The empty panel (no products yet): group names, neutral bars. */
.cat-filters.is-slot .cat-filters-head { justify-content: space-between; }

.cat-filters.is-slot .cat-facet-summary { cursor: default; }

.cat-slot-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.cat-slot-check > span:first-child {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #d9d3ca;
  border-radius: 3px;
  background: var(--c-surface);
}

.cat-slot-check .slot-line { width: 110px; }

.cat-slot-check .slot-line--sm { width: 72px; }

.cat-slot-range {
  display: block;
  height: 4px;
  margin: 14px 0 18px;
  border-radius: 2px;
  background: #e2ddd5;
}

.cat-slot-input {
  flex: 1;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
}

.cat-price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-price-inputs label { flex: 1; }

.cat-price-inputs input {
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  font: inherit;
  font-size: 14px;
}

.cat-filters-apply {
  width: 100%;
  min-height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 4px;
  background: var(--c-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  cursor: pointer;
}

.cat-filter-toggle:focus-visible,
.cat-filters-clear:focus-visible,
.cat-filters-apply:focus-visible,
.cat-check input:focus-visible,
.cat-price-inputs input:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 2px;
}

.cat-no-results {
  margin-top: 20px;
  padding: 28px 20px;
  border: 1px dashed var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  text-align: center;
  color: #3d3d3d;
}

.cat-no-results p { margin: 0 0 16px; }

.cat-no-results .cat-no-results-title {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary);
}

.bs-brand {
  font-size: 13px;
  color: var(--c-secondary);
}

.cat-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.cat-pager a,
.cat-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
}

.cat-pager [aria-current="page"] {
  border-color: var(--c-tertiary-badge);
  background: var(--c-tertiary-badge);
  color: #fff;
}

/* Editorial feature ------------------------------------------------------- */

.cat-editorial { padding-block: 8px 56px; }

.cat-editorial-inner { display: grid; gap: 24px; }

.cat-editorial-figure {
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  background: var(--c-hero-bg);
}

.cat-editorial-figure img { width: 100%; height: 100%; object-fit: cover; }

.cat-editorial-copy {
  max-width: 40em;
  padding-left: 18px;
  border-left: 3px solid var(--c-tertiary);
}

.cat-editorial-copy .section-title { margin-top: 0; font-size: clamp(1.625rem, 6.4vw, 2.25rem); }

.cat-editorial-copy p {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #3d3d3d;
}

.cat-editorial-copy .text-link { margin-top: 10px; }

/* B2B module -------------------------------------------------------------- */

.cat-b2b { padding-block: 56px; background: var(--c-neutral); }

.cat-b2b-inner { display: grid; gap: 32px; }

.cat-b2b-text {
  max-width: 36em;
  margin: 14px 0 24px;
  font-size: 17px;
  line-height: 1.55;
  color: #3d3d3d;
}

.cat-b2b-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-b2b-list li {
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
}

.cat-b2b-list .cat-benefit-icon { color: var(--c-eyebrow-light); }

/* SEO content ------------------------------------------------------------- */

.page-seo { padding-block: 56px; background: var(--c-surface); }

.page-seo-inner { max-width: calc(820px + 2 * var(--container-pad)); }

.page-seo-title { margin-top: 0; font-size: clamp(1.625rem, 6.4vw, 2.25rem); }

.page-seo-body {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: #3d3d3d;
}

.page-seo-body p { margin: 0 0 14px; }

.page-seo-body h3 {
  margin: 24px 0 10px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-primary);
}

.page-seo-body ul { margin: 0 0 14px; padding-left: 1.2em; }

.page-seo-body li { margin-bottom: 6px; }

.page-seo-body li::marker { color: var(--c-tertiary); }

.page-seo-body a,
.faq-item a {
  color: var(--c-eyebrow-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.related-cats { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--c-border); }

.related-cats-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.related-cats ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.related-cats a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-primary);
  text-decoration: none;
}

@media (hover: hover) {
  .related-cats a:hover { border-color: var(--c-tertiary); }
}

/* FAQ --------------------------------------------------------------------- */

.page-faq { padding-block: 56px; background: var(--c-neutral); }

.page-faq-inner { display: grid; gap: 24px; }

.faq-list { border-top: 1px solid var(--c-border); }

.faq-item { border-bottom: 1px solid var(--c-border); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding-block: 14px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-primary);
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--c-eyebrow-light);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-icon { transform: rotate(45deg); }

.faq-item p {
  max-width: 46em;
  margin: 0;
  padding-bottom: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: #3d3d3d;
}

/* 404 --------------------------------------------------------------------- */

.not-found { padding-block: 72px; background: var(--c-neutral); }

.not-found-text { margin: 14px 0 0; font-size: 17px; color: #3d3d3d; }

@media (prefers-reduced-motion: reduce) {
  .cat-card,
  .cat-media img,
  .cat-arrow,
  .ihero-arrow,
  .text-link svg,
  .faq-icon,
  .cat-filter-chevron,
  .cat-facet-chevron,
  .mobile-sub-toggle .icon-chevron,
  .nav-dropdown-toggle .icon-chevron { transition: none; }
}

/* Small phones: the hero buttons and the sort control take the full width. */
@media (max-width: 479px) {
  .ihero-btn { width: 100%; }
  .cat-sort { width: 100%; }
  .cat-sort select { flex: 1; }
}

/* Tablet — 768px+ ----------------------------------------------------------- */

@media (min-width: 768px) {
  .ihero-inner { padding-block: 28px 40px; }

  .ihero-title { font-size: clamp(2.875rem, 6.6vw, 3.75rem); }

  .ihero-desc { font-size: 18px; }

  .ihero-actions { flex-direction: row; flex-wrap: wrap; }

  .ihero.has-photo .ihero-figure { aspect-ratio: 21 / 9; }

  .section-title { font-size: clamp(2.375rem, 5.2vw, 3rem); }

  .cat-directory { padding-block: 32px 72px; }

  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .cat-card,
  .cat-item:first-child .cat-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .cat-item:first-child { grid-column: 1 / -1; }

  .cat-media { aspect-ratio: 4 / 3; }

  .cat-item:first-child .cat-media { aspect-ratio: 21 / 9; }

  .cat-body { padding: 16px 18px 18px; }

  .cat-name { font-size: 16px; }

  .cat-desc { font-size: 14px; }

  /* The three items sit as a centred group with even spacing, not packed
     to the left of three equal columns. */
  .cat-benefits-list {
    display: flex;
    justify-content: center;
    gap: clamp(28px, 6vw, 96px);
  }

  .cat-benefit { flex: 0 1 auto; max-width: 340px; }

  .cat-products { padding-block: 56px 72px; }

  .cat-block-title { font-size: 26px; }

  .cat-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .cat-editorial { padding-bottom: 72px; }

  .cat-b2b,
  .page-seo,
  .page-faq { padding-block: 72px; }

  .cat-b2b-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

  .cat-b2b-list li { flex-direction: column; }

  .page-seo-body { font-size: 18px; }
}

/* Desktop — 1024px+: hero split, editorial split ------------------------- */

@media (min-width: 1024px) {
  .ihero { min-height: clamp(440px, 36vw, 560px); }

  .ihero-inner {
    display: flex;
    align-items: center;
    min-height: inherit;
    padding-block: 32px 56px;
  }

  .ihero-copy { width: 56%; padding-right: 32px; }

  .ihero-title { font-size: clamp(3.25rem, 4.6vw, 4.5rem); }

  /* Right 44%, cut on a CSS diagonal; a neutral panel without a photo. */
  .ihero-figure,
  .ihero.has-photo .ihero-figure {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 44%;
    aspect-ratio: auto;
    background: var(--c-hero-bg);
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }

  .cat-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }

  .cat-item,
  .cat-item:first-child { grid-column: span 4; }

  .cat-item:nth-child(-n + 2) { grid-column: span 6; }

  .cat-media,
  .cat-item:first-child .cat-media { aspect-ratio: 16 / 10; }

  .cat-item:nth-child(-n + 2) .cat-media { aspect-ratio: 16 / 9; }

  .cat-name { font-size: 17px; }

  .cat-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

  /* Sidebar filters: the panel is always open, the toggle goes away. */
  .cat-filter-toggle { display: none; }

  .has-filters .cat-products-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    margin-top: 20px;
  }

  .has-filters .cat-filters {
    display: block;
    position: sticky;
    top: 16px;
    margin-top: 0;
  }

  .has-filters .cat-products-grid,
  .has-filters .cat-no-results { margin-top: 0; }

  .has-filters .cat-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cat-check { min-height: 36px; }

  .cat-filters-head { flex-wrap: nowrap; }

  .cat-filters-title { font-size: 14px; }

  .cat-filters-clear { font-size: 12px; }

  .cat-editorial-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
  }

  .cat-editorial:not(.has-photo) .cat-editorial-inner { grid-template-columns: 1fr; }

  .cat-editorial-figure { aspect-ratio: 4 / 3; }

  .cat-editorial-copy { padding-left: 28px; }

  .cat-b2b-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 56px;
  }

  .page-faq-inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 56px;
  }
}

@media (min-width: 1280px) {
  .ihero-desc { font-size: 19px; }

  .cat-directory,
  .cat-b2b,
  .page-seo,
  .page-faq { padding-block: 96px; }

  .cat-directory { padding-top: 40px; }

  .cat-products { padding-block: 72px 96px; }

  .cat-editorial { padding-bottom: 96px; }

  .section-title { font-size: clamp(2.75rem, 3.4vw, 3.5rem); }
}

/* Three columns beside the sidebar: six empty slots fill two rows. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .has-filters .cat-product[aria-hidden="true"]:nth-child(n + 7) { display: none; }
}

/* With the filter sidebar, four products per row once there is room. */
@media (min-width: 1440px) {
  .has-filters .cat-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Full screen — 1600px+: four-up category rows, five-up products --------- */

@media (min-width: 1600px) {
  .ihero-title { font-size: clamp(4rem, 4vw, 4.75rem); }

  .cat-item,
  .cat-item:first-child,
  .cat-item:nth-child(-n + 2) { grid-column: span 3; }

  .cat-item:nth-child(-n + 3) { grid-column: span 4; }

  .cat-item:nth-child(-n + 3) .cat-media { aspect-ratio: 16 / 9; }

  .cat-products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .has-filters .cat-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .page-seo-body { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
   Full screen — 1920px+
   --------------------------------------------------------------------------- */

@media (min-width: 1920px) {
  :root {
    --container-max: 1680px;
    --container-pad: 96px;
  }

  /* Fill the viewport under the header on large screens: a 1440p or a 4K
     window was leaving a white band below a 1000px-capped hero. */
  .hero { min-height: clamp(850px, calc(100dvh - 128px), 2400px); }

  .hero-eyebrow { font-size: 14px; }

  .hero-title {
    font-size: clamp(5rem, 4.4vw, 5.25rem);
  }

  .hero-desc {
    font-size: 22px;
    line-height: 1.5;
  }

  .btn { font-size: 16px; padding: 16px 30px; }

  .hero-statement {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------------------
   Footer — mobile-first
   --------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--c-footer-bg);
  color: var(--c-on-primary);
}

.footer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.footer-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}

.footer-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 16, 19, 0.5) 0%,
    rgba(12, 16, 19, 0.88) 26%,
    #0c1013 54%
  );
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding-block: 40px 28px;
}

/* On phones the top block dissolves into the footer column so the accordions
   slide between the brand and the newsletter. */
.footer-top { display: contents; }

.footer-brand { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.footer-logo { display: flex; flex-direction: column; line-height: 1; }
.footer-logo-primary {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.12em;
  color: var(--c-on-primary);
}
.footer-logo-secondary {
  margin-top: 7px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.85);
}

.footer-tagline { display: none; }

.footer-mobile-statement {
  display: block;
  max-width: 22ch;
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--c-on-primary);
}
.footer-mobile-line { display: block; }

.footer-mobile-tagline {
  display: block;
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}

.footer-script {
  display: block;
  margin-top: 6px;
  font-family: "Cormorant Garamond", var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--c-accent);
}

/* Newsletter */
.footer-news { order: 3; display: flex; flex-direction: column; gap: 14px; margin-top: 30px; }

.footer-news-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.footer-news-eyebrow .icon { font-size: 18px; }

.footer-news-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--c-on-primary);
}

.footer-news-form { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-news-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.footer-news-input {
  flex: 1 1 100%;
  min-width: 0;
  height: 54px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  color: var(--c-on-primary);
  font-family: var(--font-body);
  font-size: 16px;
}
.footer-news-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-news-input:focus {
  outline: none;
  border-color: var(--c-tertiary);
  box-shadow: 0 0 0 3px rgba(196, 130, 58, 0.28);
}

.footer-news-btn {
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 4px;
  background: var(--c-tertiary);
  color: var(--c-on-primary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.footer-news-btn:hover { background: #a9631e; }
.footer-news-btn .icon { font-size: 18px; }

/* htmx is loaded without its stylesheet, so hide the indicator ourselves. */
.footer-news-spinner { display: none; }
.footer-news-spinner.htmx-request {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  overflow: hidden;
}
.footer-news-spinner::after {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  background: var(--c-tertiary);
  animation: footer-loading 0.9s linear infinite;
}
@keyframes footer-loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(360%); }
}

.footer-news-status { min-height: 0; margin: 0; }
.footer-news-msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.footer-news-msg svg { width: 16px; height: 16px; flex: none; }
.footer-news-msg.is-success { color: #9fd39b; }
.footer-news-msg.is-error { color: #e8a992; }

/* Accordions (mobile) */
.footer-accordions {
  order: 2;
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-acc { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }

.footer-acc-sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 6px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-on-primary);
}
.footer-acc-sum::-webkit-details-marker { display: none; }
.footer-acc-chevron {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.2s ease;
}
.footer-acc[open] .footer-acc-chevron { transform: rotate(180deg); }

.footer-acc-list { display: flex; flex-direction: column; padding: 0 2px 16px; }
.footer-acc-list a,
.footer-acc-list span {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
}
.footer-acc-list a:hover { color: var(--c-tertiary); }

/* Navigation grid (hidden on phones) */
.footer-nav { display: none; }

/* Benefits */
.footer-benefits {
  order: 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-benefit { display: flex; flex-direction: column; gap: 10px; }
.footer-benefit-icon { color: var(--c-tertiary); }
.footer-benefit-icon svg,
.footer-benefit-icon img { width: 38px; height: 38px; object-fit: contain; }
.footer-benefit-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--c-on-primary);
}
.footer-benefit-desc {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.6);
}

/* Payments + certifications */
.footer-meta {
  order: 5;
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-payments-title,
.footer-social-title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.footer-payment-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 30px;
}
.footer-payment { display: flex; align-items: center; }
.footer-payment-img { height: 26px; width: auto; object-fit: contain; }
.footer-payment-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}
.footer-payment-name--sm {
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.footer-cert-list { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.footer-cert-list img { height: 52px; width: auto; object-fit: contain; }

/* Social (mobile row) */
.footer-social-block { order: 6; margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.18); }

.footer-social-list { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: var(--c-on-primary);
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.footer-social-link svg { width: 20px; height: 20px; }
.footer-social-list--mobile { gap: 14px; }

/* Bottom row */
.footer-bottom {
  order: 7;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.footer-copy { grid-column: 1; margin: 0; line-height: 1.5; }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: rgba(255, 255, 255, 0.6); transition: color 0.18s ease; }
.footer-legal a:hover { color: var(--c-on-primary); }
.footer-top-link { display: none; }
.footer-closing {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.footer-closing-line { white-space: nowrap; }
.footer-closing-rule {
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  background: var(--c-tertiary);
}

.footer-editorial { display: none; }

/* ---------------------------------------------------------------------------
   Footer — iPad / tablet 768px+
   --------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .footer-inner { padding-block: 56px 30px; }

  .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 30px 40px;
  }

  .footer-brand { gap: 18px; }
  .footer-logo-primary { font-size: 40px; }

  .footer-tagline {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.18;
    color: var(--c-on-primary);
  }
  .footer-tagline-line { display: block; }

  .footer-mobile-statement,
  .footer-mobile-tagline,
  .footer-script { display: none; }

  .footer-news { margin-top: 0; }
  .footer-news-form { flex-wrap: nowrap; }
  .footer-news-input { flex: 1 1 auto; }
  .footer-news-btn { flex: 0 0 auto; }

  .footer-accordions { display: none; }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 40px;
    margin-top: 44px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .footer-col-title {
    margin: 0 0 16px;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-on-primary);
  }
  .footer-col-list { display: flex; flex-direction: column; gap: 10px; }
  .footer-col-list a {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.18s ease;
  }
  .footer-col-list a:hover { color: var(--c-tertiary); }

  .footer-contact { display: flex; flex-direction: column; gap: 12px; }
  .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.82);
  }
  .footer-contact-icon { display: inline-flex; color: var(--c-tertiary); }
  .footer-contact-icon svg { width: 20px; height: 20px; }
  .footer-contact-item a:hover { color: var(--c-tertiary); }

  .footer-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-on-primary);
  }
  .footer-whatsapp .icon { font-size: 18px; color: var(--c-tertiary); }

  .footer-col--contact {
    grid-column: 1 / -1;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .footer-social-list { margin-top: 18px; }

  .footer-social-block { display: none; }

  .footer-benefits { margin-top: 40px; padding-top: 34px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .footer-benefits .footer-benefit + .footer-benefit {
    padding-left: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
  .footer-benefit--extra { display: none; }

  .footer-meta { margin-top: 34px; padding-top: 30px; }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    margin-top: 34px;
    padding-top: 26px;
  }
  .footer-copy { order: 1; }
  .footer-legal { order: 2; grid-column: auto; }
  .footer-top-link {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.18s ease;
  }
  .footer-top-link:hover { color: var(--c-tertiary); }
  .footer-top-link .icon { font-size: 15px; }
  .footer-closing { display: none; }
}

@media (min-width: 1024px) {
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-col--contact { grid-column: span 2; }
}

/* ---------------------------------------------------------------------------
   Footer — desktop 1280px+
   --------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .site-footer { min-height: 720px; }
  .footer-inner { padding-block: 68px 34px; }

  .footer-scrim {
    background: linear-gradient(
      90deg,
      rgba(8, 12, 15, 0.98) 0%,
      rgba(8, 12, 15, 0.96) 48%,
      rgba(8, 12, 15, 0.76) 70%,
      rgba(8, 12, 15, 0.25) 100%
    );
  }

  .footer-top {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 300px);
    gap: 0 40px;
  }
  .footer-brand { grid-column: 1; }
  .footer-news { grid-column: 2; max-width: 560px; }

  .footer-editorial {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin: 8px 0 0;
    text-align: right;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
  }
  .footer-editorial-line { white-space: nowrap; }
  .footer-editorial-rule {
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 10px;
    background: var(--c-tertiary);
  }

  .footer-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 34px 28px;
    margin-top: 56px;
  }
  .footer-col--contact {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
  }

  .footer-benefits { margin-top: 44px; }

  .footer-meta {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
  }
  .footer-payments { flex: 1 1 auto; }
  .footer-certs {
    flex: 0 0 auto;
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .footer-payment-name { font-size: 16px; }
  .footer-payment-img { height: 28px; }

  .footer-social-list { gap: 10px; }
  .footer-social-link { width: 40px; height: 40px; }
}

@media (min-width: 1920px) {
  .footer-inner { padding-block: 84px 40px; }
  .footer-nav { gap: 34px 40px; }
  .footer-tagline { font-size: 1.75rem; }
}

@media (hover: hover) {
  .footer-social-link:hover {
    color: var(--c-tertiary);
    border-color: var(--c-tertiary);
    background: rgba(196, 130, 58, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-news-btn,
  .footer-acc-chevron,
  .footer-social-link,
  .footer-col-list a,
  .footer-legal a,
  .footer-top-link { transition: none; }
  .footer-news-spinner::after { animation: none; }
}

/* ---------------------------------------------------------------------------
   Footer — compact four-up benefits on larger phones (approved mockup).
   Declared last so it wins over the base benefit type, which is defined after
   the other footer rules.
   --------------------------------------------------------------------------- */

@media (min-width: 400px) and (max-width: 767px) {
  .footer-benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
  .footer-benefit { gap: 8px; min-width: 0; }
  .footer-benefit-icon svg,
  .footer-benefit-icon img { width: 28px; height: 28px; }
  .footer-benefit-title { font-size: 0.6875rem; letter-spacing: 0.01em; overflow-wrap: break-word; }
  .footer-benefit-desc { font-size: 0.6875rem; overflow-wrap: break-word; }
}