/* 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;
  /* Discounts: the "-20%" badge and the struck-out price before a sale.
     White on it is 6.5:1, and it is 6.5:1 on white. */
  --c-sale: #b3261e;
  --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;
  /* The topbar and the header stay fixed at the top while the page
     scrolls; sticky boxes and anchored sections sit below both. */
  --topbar-height: 40px;
  --chrome-height: calc(var(--topbar-height) + var(--header-height));
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--chrome-height); }

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
   --------------------------------------------------------------------------- */

/* Fixed while scrolling, so the account and the cart are always at hand. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  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: var(--topbar-height);
  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; }

/* Below 768px that one message may wrap to a second line (both fit in the
   bar's 40px) instead of running under the account and cart icons on a
   360–375px phone. */
@media (max-width: 767px) {
  .topbar { font-size: 12px; }
  .topbar-utility { flex: 1 1 auto; }
  .topbar-utility-item { white-space: normal; min-width: 0; }
  .topbar-utility-item .icon { flex: 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-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 17px;
}

/* The account menu (site-header.html, aldu-account.js). Phones get the
   icon, plus the address once signed in, as a link to /cuenta; the menu
   opens from 1024px, on hover or with its toggle. */
[data-account-in][hidden],
[data-account-out][hidden] { display: none !important; }

.topbar-acc { position: relative; display: flex; align-items: center; }

.topbar-acc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 12px;
}
.topbar-acc-link .icon { flex: none; font-size: 16px; }
.topbar-acc-label { display: none; }
.topbar-acc-email {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-acc-toggle { display: none; }

.acc-menu { display: none; }

@media (min-width: 1024px) {
  .topbar-acc-link { font-size: 13px; opacity: 0.85; transition: opacity 0.15s ease; }
  .topbar-acc-link:hover,
  .topbar-acc:hover .topbar-acc-link { opacity: 1; }
  .topbar-acc-link .icon { font-size: 15px; }
  .topbar-acc-label { display: inline; }
  .topbar-acc-email { max-width: 26ch; }

  .topbar-acc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 14px;
    opacity: 0.85;
    cursor: pointer;
  }
  .topbar-acc-toggle[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }

  .acc-menu {
    display: block;
    position: absolute;
    top: 100%;
    right: -12px;
    z-index: 60;
    width: 320px;
    padding-top: 10px;
    color: var(--c-primary);
    font-size: 15px;
    line-height: 1.45;
  }

  .acc-menu-card {
    padding: 20px;
    border: 1px solid var(--c-border);
    border-radius: 6px;
    background: var(--c-surface);
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.08);
  }

  .acc-menu-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
  }
  .acc-menu-text { margin: 0 0 16px; font-size: 14px; color: var(--c-secondary); }
  /* .acc-menu raises it over .btn, which comes later and grows at 1920px. */
  .acc-menu .acc-menu-btn {
    justify-content: center;
    width: 100%;
    padding: 15px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  .acc-menu-who {
    margin: 0 0 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    color: var(--c-secondary);
    overflow-wrap: anywhere;
  }
  .acc-menu-who strong { display: block; color: var(--c-primary); font-size: 14px; }

  .acc-menu ul { padding: 4px 0; }
  .acc-menu li a,
  .acc-menu-signout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .acc-menu li a:hover,
  .acc-menu-signout:hover { color: var(--c-tertiary); }
  .acc-menu li svg,
  .acc-menu-signout svg { flex: none; width: 18px; height: 18px; }
  .acc-menu form { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--c-border); }
  .acc-menu-signout { color: var(--c-secondary); font-weight: 500; }
}

/* The account at the end of the mobile menu. */
.mobile-account { padding-block: 8px 16px; border-top: 1px solid var(--c-border); }
.mobile-account-title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-eyebrow-light, #9e5c1c);
}
.mobile-account-who { margin: 4px 0 0; font-size: 14px; color: var(--c-secondary); overflow-wrap: anywhere; }
.mobile-account ul { padding-block: 0; }
.mobile-menu .mobile-account a { justify-content: flex-start; gap: 12px; }
.mobile-account a svg,
.mobile-account-signout svg { flex: none; width: 18px; height: 18px; }
.mobile-account-signout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--c-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.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
   --------------------------------------------------------------------------- */

/* Fixed under the topbar while scrolling. */
.site-header {
  position: sticky;
  top: var(--topbar-height);
  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;
}

/* Phones and tablets: a search button beside the menu's, opening the menu
   with its search box focused (site-header.html). The negative margin
   takes back most of .header-inner's gap so the two icons read as a pair. */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: -16px;
  border: 0;
  background: none;
  color: var(--c-primary);
  font-size: 22px;
  cursor: pointer;
}

/* Phones: WhatsApp lives in the header (site-header.html) and the floating
   bubble is hidden, so nothing floats over the page's buttons or text. The
   bubble (whatsapp-bubble.html) injects its own .wa-root styles: !important. */
.header-whatsapp { display: none; }

@media (max-width: 767px) {
  .header-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: -16px;
    color: #128c4a;
    font-size: 23px;
  }
  .header-whatsapp svg { width: 1em; height: 1em; }
  .header-whatsapp + .search-toggle { margin-left: 0; }
  .wa-root { display: none !important; }
}

.mobile-search {
  position: relative;
  margin-top: 16px;
}

/* 16px text: iOS zooms into a smaller input when it is focused. */
.mobile-search input {
  width: 100%;
  height: 48px;
  padding: 0 48px 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: 16px;
}

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

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

.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* The header is fixed, so a long menu scrolls inside itself. */
  max-height: calc(100dvh - var(--chrome-height));
  overflow-y: auto;
  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); }

/* Alternating grounds: under the hero the homepage sections alternate white
   and surface-muted (DESIGN.md: "fondos alternos suaves"): productos white,
   empresas muted, categorías white, marcas muted, más vendidos white,
   testimonios muted; the final CTA and the footer keep their dark grounds.
   On the muted ground the accent darkens a step so headings in it keep 3:1
   (#b3732d: 3.32 on #efede9, where #c4823a gives 2.72) and eyebrow text
   keeps 4.5:1. */

/* ---------------------------------------------------------------------------
   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);
  }

  /* The header's own search box is back: no search button or menu box. */
  .search-toggle,
  .mobile-search { 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; }

  /* Leaves ~120px of the next section in view under the fold (its padding
     and heading), so the page reads as one that keeps going. The 520px
     floor only stops very short windows from crushing the copy: above it
     the peek always shows. The photo is width-led (cover on a wide box), so
     a lower hero crops its foot and never zooms in. */
  .hero {
    min-height: clamp(520px, calc(100dvh - var(--chrome-height) - 120px), 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's face at every desktop width. Smaller than the
     mockup's ~4.45vw since the hero got shorter (the next section peeks
     in): the cover-cropped photo now sits closer to the copy. */
  .hero-title {
    font-size: clamp(3rem, 3.5vw, 4rem);
    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 main 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 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: 40px;
  background: var(--c-surface);
}

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

/* The title sits in a bracket frame: a "[" and a "]" whose bottom arms run
   on into the rules either side of the subtitle, which sits on that line.
   The frame carries the title's font size and every measure is in em of
   it, so lines, arms and gaps grow and shrink with the title. They are
   registered lengths so the subtitle inherits them in px, not in its own
   (smaller) em. */
@property --frame-line { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --frame-arm { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --frame-pad { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --frame-sub-lh { syntax: "<length>"; inherits: true; initial-value: 0px; }

.products-frame {
  --frame-line: max(2px, 0.08em);   /* stroke */
  --frame-arm: 0.35em;              /* top arm length */
  --frame-pad: 0.6em;               /* bracket to title */
  --frame-sub-lh: calc(max(11px, 0.34em) * 1.6);
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-inline: var(--frame-pad);
  /* Small enough on phones for the title to fit on one line (~14.8em with
     the frame), so the brackets hug it as they do on desktop. */
  font-size: clamp(1.125rem, 5.4vw, 1.75rem);
}

.products-frame::before,
.products-frame::after {
  content: "";
  position: absolute;
  top: 0.42em;
  bottom: calc(var(--frame-sub-lh) / 2 - var(--frame-line) / 2);
  width: var(--frame-arm);
  border: var(--frame-line) solid var(--c-tertiary);
}

.products-frame::before { left: 0; border-right: 0; }

.products-frame::after { right: 0; border-left: 0; }

.products-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The rules start where the bottom arms end (the subtitle reaches back
   under the padding) and ride on its last line when a phone wraps it. */
.products-subtitle {
  display: flex;
  align-items: flex-end;
  gap: 0.8em;
  margin: 0.5em calc(var(--frame-arm) - var(--frame-pad)) 0;
  color: var(--c-secondary);
  font-size: max(11px, 0.34em);
  line-height: var(--frame-sub-lh);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
  /* The title sets the frame's width; a longer subtitle wraps inside it. */
  contain: inline-size;
}

.products-subtitle::before,
.products-subtitle::after {
  content: "";
  flex: 1 0 1em;
  height: var(--frame-line);
  margin-bottom: calc(var(--frame-sub-lh) / 2 - var(--frame-line) / 2);
  background: var(--c-tertiary);
}

.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; }

/* A white card (DESIGN.md: product cards on white, rounded md, depth kept
   almost nil): the product on a warm neutral plate, a caramel rule along
   the top that draws across on hover, the category as a small caramel
   label, the name in two lines at most, and the price beside a round
   arrow that fills on hover. */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px;
  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, box-shadow 0.2s ease;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 3px;
  background: var(--c-tertiary);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.product-card.is-slot::before { display: none; }

.product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 8%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-neutral);
}

.product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Catalog photos come on white: multiply melts that white into the warm
     plate instead of leaving a white square on it. */
  mix-blend-mode: multiply;
  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: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 6px 6px;
}

.product-cat {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-eyebrow-light, #9e5c1c);
}

.product-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--c-primary);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

/* Price and arrow share the card's last line, whatever the name's length. */
.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  align-self: stretch;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid #ece8e2;
}

.product-go {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-primary);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.product-go svg { width: 16px; height: 16px; transition: transform 0.2s ease; }

.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-sale);
  font-size: 14px;
  font-weight: 600;
  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); }

.product-card:focus-visible::before { transform: scaleX(1); }

@media (hover: hover) {
  .product-card:hover {
    border-color: #c3bcb2;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -18px rgba(17, 17, 17, 0.35);
  }

  .product-card:hover::before { transform: scaleX(1); }

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

  .product-card:hover .product-go {
    border-color: var(--c-primary);
    background: var(--c-primary);
    color: var(--c-on-primary);
  }

  .product-card:hover .product-go svg { transform: translateX(2px); }
}

.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-card::before,
  .product-img,
  .product-go,
  .product-go svg,
  .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: 56px; }

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

  .products-frame { font-size: 30px; }

  .products-title { letter-spacing: 0.06em; }

  /* 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 6px;
    text-align: left;
  }

  .product-card { padding: 10px; }

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

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

  .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-frame { font-size: 34px; }

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

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

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

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

  .products-frame { font-size: clamp(2rem, 2.65vw, 2.5rem); }

  .products-title { letter-spacing: 0.05em; }

  /* 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: 15px; }

  .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: 44px 36px;
  /* Muted ground, darker accent: see "Alternating grounds" above the
     hero. */
  --c-tertiary: #b3732d;
  --c-eyebrow-light: #955619;
  background: var(--c-surface-muted);
}

.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: 0.9em;
  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);
}

/* A vertical bar sized in em of the eyebrow, so it keeps the text's
   proportions: a little taller than the capitals, a quarter of an em wide. */
.corporate-eyebrow-rule {
  flex: none;
  display: inline-block;
  width: max(3px, 0.25em);
  height: 1.6em;
  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; }

/* Three benefits on phones' two columns: the last one takes the full row. */
@media (max-width: 767px) {
  .benefit:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
  }

  /* Icon over the text: beside it, a half-width cell left "Personalización"
     ~90px and the word ran off a 360–390px screen (sideways scroll). */
  .benefit:not(:last-child:nth-child(odd)) {
    flex-direction: column;
    gap: 8px;
  }
  .benefit-title { hyphens: auto; }
}

.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: 56px 48px; }

  .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;
  }

  /* The three benefits in one row, no card backgrounds — icon over the
     text. */
  .corporate-benefits {
    grid-template-columns: repeat(3, 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: 72px;
    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; }
}

/* Lighter "dotaciones para empresas" — 1024px+: less to read and a lower
   block. A smaller headline and paragraph; the four benefits keep their
   icon and title only (their one-line descriptions go: the titles already
   say it); the two CTAs sit side by side at a compact size; tighter gaps. */
@media (min-width: 1024px) {
  .corporate-title { font-size: clamp(2.25rem, 2.6vw, 3rem); }

  .corporate-desc { font-size: 16px; line-height: 1.55; }

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

  .benefit { gap: 8px; }

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

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

  .benefit-title { min-height: 0; font-size: 14px; }

  .benefit-desc { display: none; }

  .corporate-actions { gap: 12px; margin-top: 28px; }

  .corporate-cta {
    min-width: 0;
    min-height: 48px;
    padding: 12px 22px;
    font-size: 13px;
  }

  .corporate-support { margin-top: 14px; font-size: 14px; }
}

@media (min-width: 1280px) {
  .corporate-grid { min-height: 520px; }

  .corporate-body { padding-block: 48px; }

  .corporate-title { line-height: 1.05; }
}

/* ---------------------------------------------------------------------------
   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: 44px 36px;
  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); }

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

.pcategories-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  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);
}

/* The vertical bar of every eyebrow (see .corporate-eyebrow-rule). */
.pcategories-eyebrow-rule {
  flex: none;
  display: inline-block;
  width: max(3px, 0.25em);
  height: 1.6em;
  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: 56px 48px; }

  .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; }

  /* One column in the page container: the side photo is gone. */
  .pcategories-grid {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .pcategories-body {
    padding-block: 56px;
    padding-inline: var(--container-pad);
  }

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

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

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

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

  .pcat-media { aspect-ratio: 5 / 2; }

  .pcategories-cta-wrap,
  .pcategories-solutions { margin-top: 20px; }

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

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

  .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-body { padding-block: 48px; }

  .pcategories-title { font-size: clamp(2.25rem, 2.4vw, 2.75rem); }

  /* All six categories on one row. */
  .pcategories-list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
  }

  .pcat-media { aspect-ratio: 3 / 2; }

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

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

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

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

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

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

/* Bento — 1024px+: the six categories in a centered 4-column bento under a
   centered heading. Ropa industrial leads as a 2×2 tile, Calzado spans two
   columns, EPP and Dotación take one cell each, and Personalización and
   Altura share the last row:

     [ 1 1 ][ 2 2 ]
     [ 1 1 ][3][4]
     [ 5 5 ][ 6 6 ]

   Every tile is its photo with the name, line and arrow on a dark fade at
   the foot, so tiles of any size read alike. */
@media (min-width: 1024px) {
  .pcategories-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .pcategories-desc { margin-inline: auto; }

  .pcategories-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 11vw, 200px);
    gap: 14px;
    width: 100%;
    max-width: 1120px;
    margin: 28px auto 0;
  }

  .pcategories-list > li:nth-child(1) { grid-column: span 2; grid-row: span 2; }

  .pcategories-list > li:nth-child(2),
  .pcategories-list > li:nth-child(5),
  .pcategories-list > li:nth-child(6) { grid-column: span 2; }

  .pcat-card {
    position: relative;
    display: block;
    border: 0;
    border-radius: 6px;
    background: var(--c-primary);
  }

  .pcat-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .pcat-body {
    position: absolute;
    inset: auto 0 0;
    align-items: flex-end;
    padding: 48px 18px 16px;
    background: linear-gradient(180deg, rgba(11, 11, 11, 0) 0%, rgba(11, 11, 11, 0.82) 100%);
  }

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

  .pcat-desc-text { color: rgba(255, 255, 255, 0.82); font-size: 13px; }

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

  .pcategories-list > li:nth-child(1) .pcat-body { padding: 64px 24px 22px; }

  .pcategories-list > li:nth-child(1) .pcat-name { font-size: 22px; }

  .pcategories-list > li:nth-child(1) .pcat-desc-text { font-size: 15px; }

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

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

  /* "Soluciones reales" sits in the section's top-right corner, level with
     the eyebrow, instead of trailing under the CTA. */
  .pcategories-body { position: relative; }

  .pcategories-solutions {
    position: absolute;
    top: 56px;
    right: var(--container-pad);
    margin: 0;
  }
}

@media (min-width: 1280px) {
  .pcategories-solutions { top: 48px; }
}

/* ---------------------------------------------------------------------------
   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: 44px 40px;
  /* Muted ground, darker accent: see "Alternating grounds" above the
     hero. */
  --c-tertiary: #b3732d;
  --c-eyebrow-light: #955619;
  background: var(--c-surface-muted);
}

.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: 0.9em;
  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);
}

/* The vertical bar of every eyebrow (see .corporate-eyebrow-rule). */
.brands-eyebrow-rule {
  flex: none;
  display: inline-block;
  width: max(3px, 0.25em);
  height: 1.6em;
  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; }

.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: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: 56px 48px; }

  .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; }

  /* Four brands: two by two until the desktop row of four. */
  .brands-list {
    grid-template-columns: repeat(2, 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;
    /* Copy left, photo right (swapped on 2026-10-31). The laptop split is
       60/40; the desktop rule below widens the copy to 65/35. */
    grid-template-columns: 60% 40%;
    align-items: stretch;
    min-height: 600px;
  }

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

  .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: 2;
    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 copy panel is wider under the heading and narrows toward
       the floor — the approved diagonal, on the photo's left edge now that
       it sits on the right. */
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }

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

  /* Anchored low: the jacket's logo rises clear of the statement at the
     photo's foot. */
  .brands-img { object-position: center bottom; }

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

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

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

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

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

  .brands-body { padding-block: 64px; padding-right: 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);
  }

  /* The statements follow the photo to the right edge. */
  .brands-editorial--top {
    top: 44px;
    right: clamp(40px, 4vw, 72px);
    align-items: flex-end;
    text-align: right;
  }

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

  .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);
  }
}

/* Lower "marcas" — 1024px+: the split no longer holds a 600–640px floor;
   it is as tall as its copy and logos, with a smaller headline, tighter
   gaps and a compact CTA. */
@media (min-width: 1024px) {
  .brands-grid { min-height: 440px; }

  .brands-body { padding-block: 48px; }

  .brands-title { font-size: clamp(2.25rem, 2.6vw, 3rem); }

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

  .brands-list { margin-top: 24px; }

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

/* ---------------------------------------------------------------------------
   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 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: 44px;
  background: var(--c-surface);
}

/* 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: the ALDU mark, muted, on the neutral panel — never
   a stand-in product. Sizes follow the panel (cqi), from a small tile to
   the product page. */
.bs-placeholder {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 5cqi, 18px);
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ebe7e1;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(17, 17, 17, 0.028) 11px 12px),
    var(--c-neutral);
  text-align: center;
}

.bs-placeholder-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0.4em 0.7em;
  border: 1.5px solid #d9cbb8;
  background: var(--c-neutral);
  color: #bdb3a6;
  font-family: var(--font-display);
  font-size: clamp(12px, 7cqi, 26px);
  line-height: 1;
}

.bs-placeholder-mark b { font-weight: 900; letter-spacing: 0.01em; }
.bs-placeholder-mark span { font-size: 0.94em; font-weight: 500; letter-spacing: 0.02em; }

.bs-placeholder-text {
  /* 4.6:1 on the neutral panel. */
  color: #6f6a62;
  font-size: clamp(10px, 3.6cqi, 12px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.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;
  font-weight: 600;
  color: var(--c-sale);
  text-decoration-color: var(--c-sale);
}

/* A sale price list's percentage off, on the card's photo (top right; the
   catalog badge keeps the top left). */
.sale-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--c-sale);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(179, 38, 30, 0.25);
}
.product-card .sale-badge { top: 14px; right: 14px; }

.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 56px; }

  /* 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: 64px; }

  .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; }
}

/* Photo left, copy right — 768px+ (swapped on 2026-10-31, like the brands
   section above it): the photo takes the header's left side with its
   diagonal on the right edge, and the copy and statement move past it. */
@media (min-width: 768px) {
  .bs-top-inner {
    padding-left: calc(32% + 8px);
    padding-right: var(--container-pad);
  }

  .bs-figure {
    right: auto;
    left: 0;
    clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%);
  }

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

@media (min-width: 1024px) {
  .bs-top-inner {
    padding-left: calc(36% + 16px);
    padding-right: var(--container-pad);
  }
}

/* A divider closes the header like a mini hero: one continuous line from
   the photo's bottom corner (the foot of its diagonal, at the figure's
   width) to the far edge. */
@media (min-width: 768px) {
  .bs-top::after {
    content: "";
    position: absolute;
    left: 34%;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--c-border);
    pointer-events: none;
  }
}

@media (min-width: 1024px) {
  .bs-top::after { left: 38%; }
}

/* Compact "más vendidos" on the homepage — 1024px+. Scoped to the section:
   the same bs-* card also lists products on the store and category pages,
   which keep their size. Shorter header, a 4:3 photo instead of the
   square, smaller type and tighter gaps, so the two rows of four read at
   a glance. */
@media (min-width: 1024px) {
  .home-bestsellers { padding-bottom: 48px; }

  .home-bestsellers .bs-top { min-height: 260px; }

  .home-bestsellers .bs-top-inner { gap: 36px; padding-block: 48px 28px; }

  .home-bestsellers .bs-title { font-size: clamp(2.25rem, 2.4vw, 2.75rem); }

  .home-bestsellers .bs-desc { font-size: 16px; }

  .home-bestsellers .bs-editorial { font-size: 12px; }

  .home-bestsellers .bs-grid { gap: 14px; margin-top: 24px; }

  .home-bestsellers .bs-media { aspect-ratio: 4 / 3; }

  .home-bestsellers .bs-info { padding: 12px 14px 10px; }

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

  .home-bestsellers .bs-cat { font-size: 11px; }

  .home-bestsellers .bs-name { font-size: 15px; }

  .home-bestsellers .bs-price { font-size: 18px; }

  .home-bestsellers .bs-btn { min-height: 40px; font-size: 13px; }

  .home-bestsellers .bs-cta { margin-top: 24px; }
}

/* Offers (section 8 while products are on sale): somewhat smaller cards
   than the best sellers', at every width. */
.home-bestsellers.is-offers .bs-info { gap: 5px; padding: 13px 11px 11px; }
.home-bestsellers.is-offers .bs-name { font-size: 14.5px; }
.home-bestsellers.is-offers .bs-price { font-size: 17px; }
.home-bestsellers.is-offers .bs-old { font-size: 12.5px; }
.home-bestsellers.is-offers .sale-badge { top: 8px; right: 8px; padding: 4px 8px; font-size: 12px; }
@media (max-width: 767px) {
  .home-bestsellers.is-offers .bs-media { aspect-ratio: 6 / 5; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .home-bestsellers.is-offers .bs-link { grid-template-columns: 37% minmax(0, 1fr); }
  .home-bestsellers.is-offers .bs-media { min-height: 190px; }
  .home-bestsellers.is-offers .bs-info { padding: 15px 15px 74px; }
  .home-bestsellers.is-offers .bs-actions { left: 37%; padding: 0 15px 15px; }
  .home-bestsellers.is-offers .bs-name { font-size: 16px; }
  .home-bestsellers.is-offers .bs-price { font-size: 18px; }
}

@media (min-width: 1024px) {
  /* Up to four narrower columns, centred: fewer offers stay together in
     the middle instead of leaving empty columns. */
  .home-bestsellers.is-offers .bs-grid { grid-template-columns: repeat(auto-fit, minmax(0, 275px)); justify-content: center; gap: 14px; }
  .home-bestsellers.is-offers .bs-info { padding: 12px 13px 9px; }
  .home-bestsellers.is-offers .bs-actions { padding: 0 13px 13px; }
  .home-bestsellers.is-offers .bs-name { font-size: 14.5px; }
  .home-bestsellers.is-offers .bs-price { font-size: 17px; }
  .home-bestsellers.is-offers .bs-btn { min-height: 39px; font-size: 12.5px; }
}

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

   Phones stack copy ▸ photo (4:3,
   rounded) ▸ one testimonial at a time. 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.
   --------------------------------------------------------------------------- */

/* The backdrop is the editor's trust_image (Cockpit), passed in as
   --trust-bg: a light, warm concrete texture, so the darker accent of the
   muted grounds still applies. Anchored at the foot so the floor shows;
   without an image the muted ground alone. */
.home-trust {
  position: relative;
  overflow: hidden;
  padding-block: 44px 36px;
  --c-tertiary: #b3732d;
  --c-eyebrow-light: #955619;
  background: var(--c-surface-muted) var(--trust-bg, none) center bottom / cover no-repeat;
}

.trust-top { position: relative; }

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

.trust-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9em;
  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);
}

/* The vertical bar of every eyebrow (see .corporate-eyebrow-rule). */
.trust-eyebrow-rule {
  flex: none;
  width: max(3px, 0.25em);
  height: 1.6em;
  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: 32em;
  margin: 20px 0 0;
  color: var(--c-secondary);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.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);
}


/* 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); }
}

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

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

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

  .trust-top-inner { padding-block: 64px 40px; }

  .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-carousel { margin-top: 36px; }

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

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

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

@media (min-width: 1024px) {
  .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: 56px; }

  .trust-top-inner { padding-block: 72px 40px; }

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

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

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

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

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

@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-copy { max-width: 640px; }

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

/* The vertical bar of every eyebrow (see .corporate-eyebrow-rule). */
.fcta-eyebrow::before {
  content: "";
  flex: none;
  width: max(3px, 0.25em);
  height: 1.6em;
  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(560px, 42vw, 720px);
    padding-block: 96px;
  }

  .home-fcta:not(.has-photo) .fcta-editorial--top { display: flex; }

  /* The min-height and padding are the photo's room; without one the block
     is as tall as its copy. */
  .home-fcta:not(.has-photo) .fcta-inner { min-height: 0; padding-block: 72px 56px; }

  .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; }
}

@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: 80px; }

  .fcta-editorial { font-size: 12px; }
}

@media (min-width: 1920px) {
  .fcta-copy { max-width: 1040px; }
  .fcta-editorial { font-size: 13px; }
}

/* Compact final CTA — 1024px+: a shorter band (the photo still covers it),
   a smaller headline and description, and tighter buttons and gaps. The
   title keeps its approved line breaks: its max-width is in em, so it
   scales with the type. */
@media (min-width: 1024px) {
  .fcta-inner,
  .has-photo .fcta-inner {
    min-height: clamp(400px, 28vw, 500px);
    padding-block: 56px;
  }

  .fcta-title-main { font-size: clamp(2.25rem, 2.6vw, 3.25rem); }

  .fcta-title-accent {
    margin-top: 8px;
    font-size: clamp(2rem, 2.4vw, 3rem);
  }

  .fcta-desc {
    margin-top: 18px;
    font-size: clamp(1rem, 1vw, 1.125rem);
  }

  .fcta-actions { margin-top: 24px; gap: 14px; }

  .fcta-btn {
    min-height: 50px;
    padding-inline: 26px;
    font-size: 13px;
  }

  .fcta-benefits { margin-top: 22px; }

  /* The top statement sits in the section's own top-right corner, not the
     container's: the inner box stops being its positioning context (the
     copy keeps its own, to stay above the photo's scrim). */
  .fcta-inner,
  .has-photo .fcta-inner { position: static; }

  .fcta-copy { position: relative; }

  .fcta-editorial--top {
    top: 28px;
    right: 32px;
    align-items: flex-end;
    text-align: right;
  }
}

/* ---------------------------------------------------------------------------
   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-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-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 { width: 130px; }

.trust-person .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,
.emp-best,
.emp-proposal,
.emp-process,
.emp-contact,
.nos-about,
.nos-solutions,
.nos-approach,
.nos-values,
.ct-main,
.nov-article,
.cat-switcher,
.nov-featured,
.nov-latest,
.nov-soon,
.brand-dir,
.brand-cat-chips,
.cat-products,
.cat-directory,
.cat-editorial,
.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;
}

/* Below 1024px the image sits between the description and the CTAs, full
   bleed (pulled out of the container's gutters); no photo ⇒ no figure. */
.ihero-figure {
  display: none;
  margin: 24px calc(-1 * var(--container-pad)) 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;
}

/* Brand pages without a photo: the logo, at its own proportions, centred on
   a quiet panel in the same slot. */
.ihero.has-logo .ihero-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 7;
  background: #fcfbf9;
  border-block: 1px solid var(--c-border);
}

.ihero-logo {
  width: auto;
  height: auto;
  max-width: min(56%, 280px);
  max-height: 120px;
  object-fit: contain;
}

/* Internal hero — optional accent line of the H1 (/marcas: "cada trabajo").
   The light-ground orange keeps AA on the neutral hero. */
.ihero-title-accent { color: var(--c-eyebrow-light); }

/* A dark solid button (DESIGN.md button-primary) for secondary-page blocks. */
.ihero-btn--dark { background: var(--c-primary); color: #fff; }

@media (hover: hover) {
  .ihero-btn--dark:hover { background: #2a2a2a; }
}

/* Brands — /marcas directory grid ----------------------------------------- */

/* One card per brand: the logo on white beside a clean photo (cut on a CSS
   diagonal), then the name, an honest product count and an arrow. The whole
   card is the link; the logo and photo are decorative (alt="") because the
   name is right below as text. 2 logo-only columns on phones, 2 with the
   photo from 560px, 3 from 1024px, 4 from 1280px; the extra width of big
   screens is outer margin. */
.brand-dir { padding-block: 56px 64px; background: var(--c-surface); scroll-margin-top: 16px; }

.brand-dir-head { max-width: 760px; margin-bottom: 28px; }

.brand-dir-desc {
  max-width: 40em;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-secondary);
}

.brand-dir-grid {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-dir-grid li { display: flex; min-width: 0; }

.brand-dir-card {
  display: flex;
  flex-direction: column;
  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;
}

.brand-dir-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  aspect-ratio: 2.4 / 1;
  border-bottom: 1px solid var(--c-border);
}

/* The logo leads: 60% of the media row, the photo the rest. */
.brand-dir-media.has-photo { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

.brand-dir-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 14px 16px;
  /* The warm off-white of the logo files, so their ground melts into the
     cell instead of showing as a box; transparent logos sit on it too. */
  background: #fcfbf9;
}

/* Logos keep their proportions; CSS only caps them. */
.brand-dir-logo img {
  width: auto;
  height: auto;
  max-width: 82%;
  max-height: 72px;
  object-fit: contain;
}

.brand-dir-wordmark {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
}

.brand-dir-photo {
  position: relative;
  overflow: hidden;
  background: var(--c-hero-bg);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.brand-dir-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.brand-dir-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
}

.brand-dir-text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }

.brand-dir-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.brand-dir-count {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-secondary);
}

.brand-dir-arrow { flex: none; width: 20px; height: 20px; transition: transform 0.2s ease, color 0.2s ease; }

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

@media (hover: hover) {
  .brand-dir-card:hover { border-color: var(--c-tertiary); }
  .brand-dir-card:hover .brand-dir-photo img { transform: scale(1.04); }
  .brand-dir-card:hover .brand-dir-arrow { transform: translateX(4px); color: var(--c-eyebrow-light); }
}

.brand-dir-empty { margin: 0; font-family: var(--font-body); color: var(--c-secondary); }

/* Phones: two columns of logo-led cards (the logos stay readable at half
   width); the photo drops so twelve brands fit in six compact rows. */
@media (max-width: 559px) {
  .brand-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .brand-dir-media,
  .brand-dir-media.has-photo { grid-template-columns: minmax(0, 1fr); aspect-ratio: 1.6 / 1; }
  .brand-dir-photo { display: none; }
  .brand-dir-logo { padding: 10px 12px; }
  .brand-dir-logo img { max-width: 86%; max-height: 52px; }
  .brand-dir-foot { gap: 8px; min-height: 56px; padding: 10px 12px; }
  .brand-dir-name { font-size: 14px; }
  .brand-dir-count { font-size: 12px; }
  .brand-dir-arrow { width: 18px; height: 18px; }
}

@media (min-width: 560px) {
  .brand-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .brand-dir-media { aspect-ratio: 2 / 1; }
}

@media (min-width: 768px) {
  .brand-dir { padding-block: 72px 80px; }
  .brand-dir-desc { font-size: 17px; }
}

@media (min-width: 1024px) {
  .brand-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (min-width: 1280px) {
  .brand-dir { padding-block: 96px 104px; }
  .brand-dir-head { margin-bottom: 36px; }
  .brand-dir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

.brand-cat-chips a:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 2px;
}

@media (max-width: 479px) {
  .brand-empty-actions .ihero-btn { width: 100%; }
}

/* Brand page — its categories ----------------------------------------------- */

.brand-cat-chips { padding-top: 32px; background: var(--c-surface); }

.brand-cat-chips-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.brand-cat-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.brand-cat-chips a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-primary);
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.2s ease;
}

.brand-cat-chips-count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-secondary);
}

@media (hover: hover) {
  .brand-cat-chips a:hover { border-color: var(--c-tertiary); }
}

.brand-cat-chips + .cat-products { padding-top: 32px; }

.brand-empty { max-width: 640px; }
.brand-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  .brand-dir-card,
  .brand-dir-photo img,
  .brand-dir-arrow,
  .brand-cat-chips a { transition: none; }
  .brand-dir-card:hover .brand-dir-photo img,
  .brand-dir-card:hover .brand-dir-arrow { transform: none; }
}

/* Novedades — /novedades ---------------------------------------------------- */

/* Featured story: copy, then the photo (phones/tablet); from 1024px a 5/7
   split with the photo on the right. No card chrome: type, space and the
   photo carry it. */
.nov-featured { padding-block: 56px; background: var(--c-surface); }

.nov-featured-text,
.nov-head-text {
  max-width: 36em;
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #3d3d3d;
}

.nov-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 20px 0 24px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.nov-meta > span:first-child { color: var(--c-eyebrow-light); }

.nov-featured-figure {
  margin: 32px 0 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  background: var(--c-hero-bg);
}

.nov-featured-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Section heads of the listings. */
.nov-head { max-width: 760px; margin-bottom: 28px; }
.nov-head-text { font-size: 16px; color: var(--c-secondary); }

/* Lo último: the shared product grid on the neutral ground. */
.nov-products { background: var(--c-neutral); }

/* Eight new products at most: four columns keep both rows full on the
   widest screens too (the shared grid goes to five there). */
@media (min-width: 1024px) {
  .nov-products .cat-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The shared B2B block on white here: Próximamente and the FAQ around it
   are on the neutral ground. */

/* Lo más reciente: open stories, no borders — image, meta, title, excerpt.
   Phones stack them; tablets lay each out as a row; from 1024px three
   columns. */
.nov-latest { padding-block: 56px 64px; background: var(--c-surface); scroll-margin-top: 16px; }

.nov-latest-list {
  display: grid;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nov-story-link {
  display: flex;
  flex-direction: column;
  color: var(--c-primary);
  text-decoration: none;
}

.nov-story-figure {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  background: var(--c-hero-bg);
}

.nov-story-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.nov-story-link .nov-meta { margin: 16px 0 6px; }

.nov-story-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.nov-story-text {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-secondary);
}

.nov-story-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nov-story-more svg { width: 16px; height: 16px; transition: transform 0.2s ease; }

.nov-story-link:focus-visible,
.nov-soon-item:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 4px;
}

@media (hover: hover) {
  .nov-story-link:hover .nov-story-figure img { transform: scale(1.03); }
  .nov-story-link:hover .nov-story-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
  .nov-story-link:hover .nov-story-more svg { transform: translateX(4px); }
}

/* Próximamente: a quiet list of rows (thumb, name, brand · category, tag),
   not another card grid. 1 column, 2 from 768px, 3 from 1280px. */
.nov-soon { padding-block: 56px 64px; background: var(--c-neutral); scroll-margin-top: 16px; }

.nov-soon-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nov-soon-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  padding: 12px 16px 12px 12px;
  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;
}

.nov-soon-thumb {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: #fff;
}

.nov-soon-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }

.nov-soon-text { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; }

.nov-soon-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.nov-soon-meta { font-family: var(--font-body); font-size: 13px; color: var(--c-secondary); }

/* The section title already says it: the per-row tag is for screen
   readers only, so the names get the full row. */
.nov-soon-tag {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (hover: hover) {
  .nov-soon-item:hover { border-color: var(--c-tertiary); }
}

@media (prefers-reduced-motion: reduce) {
  .nov-story-figure img,
  .nov-story-more svg,
  .nov-soon-item { transition: none; }
  .nov-story-link:hover .nov-story-figure img,
  .nov-story-link:hover .nov-story-more svg { transform: none; }
}

@media (max-width: 479px) {
  .nov-featured .ihero-btn { width: 100%; }
}

@media (min-width: 768px) {
  .nov-featured { padding-block: 72px; }
  .nov-latest,
  .nov-soon { padding-block: 72px 80px; }
  .nov-soon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* Tablets: each story is a row, photo left. */
  .nov-story-link {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 28px;
    align-content: start;
  }
  .nov-story-figure { grid-row: 1 / -1; }
  .nov-story-link .nov-meta { margin-top: 0; }
}

@media (min-width: 1024px) {
  /* Photo left, copy right (swapped on 2026-10-31). */
  .nov-featured-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
  }
  .nov-featured-figure { grid-column: 1; grid-row: 1; margin: 0; }
  .nov-featured-copy { grid-column: 2; grid-row: 1; }

  .nov-latest-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .nov-story-link { display: flex; }
  .nov-story-link .nov-meta { margin-top: 16px; }
}

@media (min-width: 1280px) {
  .nov-featured { padding-block: 96px; }
  .nov-featured-inner { gap: 72px; }
  .nov-latest,
  .nov-soon { padding-block: 96px 104px; }
  .nov-head { margin-bottom: 36px; }
  .nov-soon-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* Novedades — one story (/novedades/<slug>, pages/novedad.html) ----------- */

/* A reading column of 760px on the neutral head, the cover at the column's
   width, the body in the shared rich-text style. */
.nov-article-container { max-width: calc(760px + 2 * var(--container-pad)); }

.nov-article-head { padding-block: 24px 32px; background: var(--c-neutral); }
.nov-article-head .nov-meta { margin: 28px 0 12px; }

.nov-article-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--c-primary);
  text-wrap: balance;
}

.nov-article-lead {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: #3d3d3d;
}

/* A wide crop: the story covers are wide, low photos. */
.nov-article-figure {
  margin: 32px 0 0;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 21 / 9;
  background: var(--c-hero-bg);
}

.nov-article-figure img { width: 100%; height: 100%; object-fit: cover; }

.nov-article-body { padding-top: 32px; font-size: 17px; }
.nov-article-body ul { list-style: disc; }
.nov-article-body ol { list-style: decimal; padding-left: 1.2em; }
.nov-article-body li::marker { color: var(--c-eyebrow-light); }

.nov-article-author { margin: 8px 0 0; font-family: var(--font-body); font-size: 14px; color: var(--c-secondary); }

.nov-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-block: 28px 64px;
  border-top: 1px solid var(--c-border);
}

@media (min-width: 1024px) {
  .nov-article-head { padding-block: 32px 48px; }
  .nov-article-foot { padding-bottom: 96px; }
}

/* Empresas — /empresas ------------------------------------------------------ */

/* The service page: editorial blocks, no catalog. Shared rhythm: 56px blocks
   on phones, 72 from 768px, 96 from 1280px. */
.emp-lead {
  max-width: 36em;
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #3d3d3d;
}

/* The challenge: copy, then the photo (phones); from 1024px the photo leads
   on the left, larger than the copy. */

/* Four words on a hairline: an even 2×2 on phones, one row of four from
   560px, each with its own short rule — a rhythm, not cards. */

/* Best sellers: a header with the quote action, then the cards — photo on
   the neutral panel, brand, name (two lines), unit price and "Ver
   producto". Two columns on phones, three on tablets, four on desktops. */
/* /empresas alternates: hero beige ▸ why ALDU white ▸ best sellers beige ▸
   how to quote white ▸ the dark form ▸ FAQ beige. */
.emp-best { padding-block: 48px 56px; background: var(--c-neutral); scroll-margin-top: 16px; }
.emp-best-inner { display: grid; gap: 24px; }
.emp-best-head { display: grid; gap: 20px; }
.emp-best-head .emp-lead { margin-top: 12px; }
.emp-best-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.emp-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-primary);
  text-decoration: none;
}

.emp-card-more svg { width: 16px; height: 16px; transition: transform 0.15s ease; }
.emp-card-more:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: 2px; }
.emp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.emp-cards > li { min-width: 0; }

.emp-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.emp-card-media {
  position: relative;
  display: grid;
  place-items: center;
  height: 112px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-neutral);
}

/* Absolute: a percentage height does not resolve in the grid's auto row.
   Multiply melts the photos' white ground into the panel. */
.emp-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 10px; object-fit: contain; mix-blend-mode: multiply; }

.emp-card-ph {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #c9bfb2;
}

.emp-card-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 10px 2px 12px; min-width: 0; }

/* Kept when empty, so names line up across a row. */
.emp-card-brand {
  min-height: 1.3em;
  font-family: var(--font-display);
  line-height: 1.3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.emp-card-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.6em;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-primary);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.emp-card-price { margin: auto 0 0; padding-top: 4px; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--c-primary); }
.emp-card-unit { font-size: 12px; font-weight: 500; color: var(--c-secondary); }
.emp-card-old { display: block; font-size: 13px; font-weight: 600; color: var(--c-sale); text-decoration-color: var(--c-sale); }
.emp-card .sale-badge { top: 6px; right: 6px; padding: 4px 8px; font-size: 12px; }

@media (hover: hover) {
  .emp-card:hover { box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08); }
  .emp-card-more:hover svg { transform: translateX(3px); }
  .emp-card-name:hover { text-decoration: underline; text-underline-offset: 3px; }

}

/* The proposal: title, then up to four capabilities divided by hairlines. */
.emp-proposal { padding-block: 56px; background: var(--c-surface); }
.emp-proposal-inner { display: grid; gap: 32px; }
.emp-proposal-head .emp-lead { margin-top: 16px; max-width: 34em; }

.emp-proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }

/* Clean benefit cards with their own borders and open space between them. */
.emp-proposal-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: benefit;
}

.emp-benefit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 0 16px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  counter-increment: benefit;
}

.emp-benefit::after {
  content: counter(benefit, decimal-leading-zero);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--c-tertiary-badge);
}

.emp-benefit-icon {
  display: grid;
  place-items: center;
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  height: 48px;
  border-radius: 2px;
  background: rgba(196, 130, 58, 0.14);
  color: var(--c-tertiary-badge);
}

.emp-benefit-icon svg { width: 24px; height: 24px; }

.emp-proposal-name {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 20px 0 7px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
}

.emp-proposal-list p {
  grid-column: 1 / -1;
  grid-row: 3;
  max-width: 32em;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-secondary);
}

/* Phones: keep each benefit compact, with icon beside its copy. */
@media (max-width: 559px) {
  .emp-benefit {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    padding: 18px 16px;
  }
  .emp-benefit-icon { grid-column: 1; grid-row: 1 / span 2; width: 44px; height: 44px; }
  .emp-benefit-icon svg { width: 22px; height: 22px; }
  .emp-benefit::after { position: absolute; top: 18px; right: 16px; padding: 0; }
  .emp-benefit .emp-proposal-name { grid-column: 2; grid-row: 1; margin: 0 34px 5px 0; font-size: 15px; }
  .emp-benefit p { grid-column: 2; grid-row: 2; font-size: 13px; }
}

@media (min-width: 560px) {
  .emp-proposal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* The request form on the dark ground (DESIGN.md: closing blocks). */
.emp-contact { padding-block: 48px 64px; background: var(--c-footer-bg); color: #fff; scroll-margin-top: 16px; }
.emp-contact-inner { display: grid; gap: 32px; }

.emp-contact-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-tertiary);
}

.emp-contact-title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 7.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.emp-contact-text { max-width: 30em; margin: 16px 0 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }

.emp-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
}

.emp-direct .text-link { color: #fff; }

.emp-form { display: grid; gap: 16px; }

.emp-field { display: grid; gap: 6px; }

.emp-field label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.emp-field input,
.emp-field select,
.emp-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
}

.emp-field select option { color: var(--c-primary); }
.emp-field textarea { min-height: 120px; resize: vertical; }

.emp-field input::placeholder,
.emp-field textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

.emp-field input:focus-visible,
.emp-field select:focus-visible,
.emp-field textarea:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 1px;
  border-color: var(--c-tertiary);
}

.emp-hint { margin: -8px 0 0; font-family: var(--font-body); font-size: 13px; color: rgba(255, 255, 255, 0.66); }

.emp-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* "¿Qué necesitas?": checkboxes drawn as chips, several can be picked. */
.emp-needs { min-width: 0; margin: 0; padding: 0; border: 0; }

.emp-needs legend {
  margin-bottom: 8px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.emp-needs-hint { font-weight: 400; color: rgba(255, 255, 255, 0.66); }

.emp-needs-list { display: flex; flex-wrap: wrap; gap: 8px; }

.emp-need {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}

.emp-need input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-tertiary); }
.emp-need:has(input:checked) { border-color: var(--c-tertiary); background: rgba(196, 130, 58, 0.16); }
.emp-need:has(input:focus-visible) { outline: 2px solid var(--c-tertiary); outline-offset: 2px; }

/* Consent, as on /contacto: the whole label is the hit area. */
.emp-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.emp-consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-tertiary); }

.emp-consent label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
}

.emp-consent label a { color: #fff; text-underline-offset: 3px; }

.emp-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.emp-submit { border: 0; cursor: pointer; }
.emp-form.htmx-request .emp-submit { opacity: 0.7; }

.emp-form-status:empty { display: none; }

.emp-form-msg {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--c-tertiary);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

.emp-form-msg.is-error { border-left-color: #e5735f; }

/* Form success notice: a small window at the bottom of the screen that
   closes itself after 10 s (site/empresas.go formToast). */
.form-toast-slot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}
.form-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 14px 16px 16px;
  border-left: 4px solid var(--c-tertiary);
  border-radius: 6px;
  background: var(--c-surface);
  color: var(--c-primary);
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.18), 0 2px 8px rgba(17, 17, 17, 0.08);
  pointer-events: auto;
  animation: form-toast-in 0.28s ease-out;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.form-toast.is-hidden { opacity: 0; transform: translateY(12px); }
.form-toast-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-tertiary);
  color: #fff;
}
.form-toast-icon svg { width: 16px; height: 16px; }
.form-toast-text {
  flex: 1;
  margin: 3px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
}
.form-toast-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--c-secondary);
  cursor: pointer;
}
.form-toast-close:hover { background: var(--c-neutral); color: var(--c-primary); }
.form-toast-close:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: 1px; }
.form-toast-close svg { width: 18px; height: 18px; }
@keyframes form-toast-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 479px) {
  .form-toast-slot { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .form-toast { animation: none; transition: none; }
  .form-toast.is-hidden { display: none; } /* no transition to end it */
}

@media (max-width: 479px) {
  .emp-submit { width: 100%; }
}

@media (min-width: 768px) {
  .emp-proposal { padding-block: 72px; }
  .emp-contact { padding-block: 64px 80px; }
  .emp-lead { font-size: 18px; }

  
  .emp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .emp-card-media { height: 150px; }

  .emp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .emp-field--wide,
  .emp-hint,
  .emp-form-foot { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .emp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* The copy beside the cards, held in view while the cards scroll by. */
  .emp-proposal-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .emp-proposal-head { position: sticky; top: calc(var(--chrome-height) + 24px); }

  .emp-contact-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
}

@media (min-width: 1280px) {
  .emp-proposal-inner { gap: 64px; }

  .emp-best,
  .emp-proposal { padding-block: 72px; }
  .emp-contact { padding-block: 64px 80px; }
}

/* Quote process: three editorial panels on the existing white section. */
.emp-process { padding-block: 48px 40px; background: var(--c-surface); }
.emp-process-inner { display: grid; gap: 30px; }
.emp-process-head { display: grid; gap: 12px; }
.emp-process-head .section-title { max-width: 16ch; }
.emp-process-head .emp-lead { max-width: 34em; margin: 0; }

.emp-steps {
  --step-gap: 14px;
  display: grid;
  gap: var(--step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: emp-step;
}

.emp-step {
  position: relative;
  min-width: 0;
  padding: 22px 20px 24px;
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-tertiary);
  border-radius: 2px;
  background: var(--c-surface);
  counter-increment: emp-step;
}

.emp-step-number {
  display: block;
  margin-bottom: 24px;
  color: var(--c-tertiary);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.emp-step-number::before { content: counter(emp-step, decimal-leading-zero); }
.emp-step-title::before { content: none; }
.emp-step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--c-primary);
}
.emp-step p {
  max-width: 30em;
  margin: 9px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-secondary);
}

@media (min-width: 768px) {
  .emp-process { padding-block: 64px 48px; }
  .emp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--step-gap); }
  .emp-process-head { grid-template-columns: minmax(0, 1fr) minmax(16em, 0.8fr); align-items: end; column-gap: 40px; row-gap: 10px; }
  .emp-process-head .section-eyebrow,
  .emp-process-head .section-title { grid-column: 1; }
  .emp-process-head .emp-lead { grid-column: 2; grid-row: 2; padding-bottom: 4px; }
  .emp-step { min-height: 220px; padding: 26px 24px 28px; }
  .emp-step-number { margin-bottom: 30px; }
  .emp-step-title { max-width: 16ch; }
}

@media (min-width: 1024px) {
  .emp-process-inner { gap: 38px; }
}

@media (min-width: 1280px) {
  .emp-process { padding-block: 72px 56px; }
  .emp-process-inner { gap: 44px; }
}

/* Nosotros — /nosotros ------------------------------------------------------ */

/* The institutional page: editorial blocks, no catalog. Same rhythm as
   /empresas (56px blocks on phones, 72 from 768px, 96 from 1280px); under the
   neutral hero the grounds alternate white ▸ neutral ▸ muted ▸ white before
   the dark final CTA. The lead paragraphs reuse .emp-lead. */
.nos-head { display: grid; gap: 4px; margin-bottom: 28px; }

.nos-head-text {
  max-width: 34em;
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-secondary);
}

/* Quiénes somos: copy, then the photo (phones); side by side from 1024px. */
.nos-about { padding-block: 56px; background: var(--c-surface); }
.nos-about-inner { display: grid; gap: 32px; }

.nos-about-figure {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  background: var(--c-hero-bg);
}

.nos-about-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }

/* Qué hacemos: three solution blocks — photo, title, text, one link. No
   cards: the blocks sit on the neutral ground. */
.nos-solutions { padding-block: 56px 64px; background: var(--c-neutral); }

.nos-solution-list {
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nos-solution { display: flex; flex-direction: column; min-width: 0; }

.nos-solution-media {
  margin-bottom: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  border-radius: 2px;
  background: var(--c-surface-muted);
}

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

.nos-solution-title,
.nos-step-title,
.nos-value-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--c-primary);
}

.nos-solution-text,
.nos-step p,
.nos-value p {
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-secondary);
}

.nos-solution .text-link { align-self: flex-start; margin-top: 4px; }

/* Nuestra forma de trabajar: a numbered sequence, no cards. Phones list the
   steps under a rule each; from 768px they run in a row, joined by arrows
   from 1024px. The number is the list's own counter. */
/* The light-ground orange is 4.49:1 on #EFEDE9; one shade darker keeps AA. */
.nos-approach { padding-block: 56px; background: var(--c-surface-muted); --c-eyebrow-light: #955619; }

.nos-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nos-step;
}

.nos-step {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-content: start;
  column-gap: 12px;
  padding-block: 22px;
  border-top: 1px solid var(--c-border);
  counter-increment: nos-step;
}

.nos-step:last-child { border-bottom: 1px solid var(--c-border); }

.nos-step::before {
  content: counter(nos-step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-eyebrow-light);
}

.nos-step-title { padding-top: 4px; }

/* Compromisos: icon + title + text, stacked under rules on phones and
   tablet, three columns split by thin rules from 1024px. */
.nos-values { padding-block: 56px; background: var(--c-surface); }

.nos-value-list {
  display: grid;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.nos-value {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 20px;
  border-top: 1px solid var(--c-border);
}

.nos-value:last-child { border-bottom: 1px solid var(--c-border); }

.nos-value-icon { display: inline-flex; flex: none; width: 34px; height: 34px; color: var(--c-eyebrow-light); }
.nos-value-icon svg { width: 100%; height: 100%; }

@media (min-width: 768px) {
  .nos-about,
  .nos-approach,
  .nos-values { padding-block: 72px; }
  .nos-solutions { padding-block: 72px 80px; }

  .nos-head-text { font-size: 17px; }

  .nos-about-figure { aspect-ratio: 16 / 9; }

  .nos-solution-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .nos-solution-media { aspect-ratio: 4 / 3; }

  .nos-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .nos-step,
  .nos-step:last-child {
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding-block: 24px 0;
    border-bottom: 0;
  }
  .nos-step::before { grid-row: auto; font-size: 48px; }
}

@media (min-width: 1024px) {
  .nos-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; margin-bottom: 36px; }
  .nos-head-text { margin: 0 0 6px; }

  .nos-about-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
  }

  .nos-solution-list { gap: 24px; }
  .nos-solution-media { aspect-ratio: 2.4 / 1; }

  /* Number beside the copy, an arrow between the steps. */
  .nos-steps { gap: 40px; }
  .nos-step,
  .nos-step:last-child {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 20px;
    padding: 28px 40px 0 0;
  }
  .nos-step::before { grid-row: span 2; font-size: 52px; }
  .nos-step:not(:last-child)::after {
    content: "\2192" / "";
    position: absolute;
    top: 38px;
    right: 0;
    font-family: var(--font-body);
    font-size: 22px;
    line-height: 1;
    color: var(--c-primary);
  }

  .nos-value-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nos-value,
  .nos-value:last-child { padding: 4px 28px; border: 0; border-left: 1px solid var(--c-border); }
  .nos-value:first-child { padding-left: 0; border-left: 0; }
}

@media (min-width: 1280px) {
  .nos-about,
  .nos-approach,
  .nos-values { padding-block: 96px; }
  .nos-solutions { padding-block: 96px 104px; }

  .nos-about-inner { gap: 88px; }
  .nos-solution-list { gap: 28px; }
  .nos-solution-title,
  .nos-step-title,
  .nos-value-title { font-size: 18px; }
  .nos-solution-text,
  .nos-step p,
  .nos-value p { font-size: 16px; }
  .nos-value-list { margin-top: 40px; }
}

/* Contacto — /contacto ------------------------------------------------------ */

/* The form is the page: it sits on the neutral ground right under the hero,
   with the official channels in a dark panel beside it (from 1024px) or
   below it (phones, tablet). Without confirmed channels the form column is
   centred on its own. Field and reason layouts follow the form's own width
   (container queries), so they adapt whether or not the panel is there.
   Error text #A3321F is 6.9:1 on white and 6.3:1 on #F6F4F1; every error is
   also written out under its field, never colour alone. */
.ct-main {
  --ct-error: #a3321f;
  padding-block: 56px 64px;
  background: var(--c-neutral);
  scroll-margin-top: 16px;
}

.ct-main-inner { display: grid; gap: 40px; }

/* The column is the size container: the form's own grid answers to it. */
.ct-form-col { container-type: inline-size; min-width: 0; }

.ct-form-head { margin-bottom: 28px; }

.ct-form {
  display: grid;
  gap: 18px;
}

.ct-required-note { margin: 0; font-family: var(--font-body); font-size: 14px; color: var(--c-secondary); }

.ct-field { display: grid; gap: 6px; align-content: start; }

.ct-field label,
.ct-reasons legend {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary);
}

.ct-req { color: var(--c-eyebrow-light); }
.ct-optional { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--c-secondary); }

.ct-field input,
.ct-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #8f8a83; /* 3.4:1 on white: a field edge needs 3:1 */
  border-radius: 4px;
  background: var(--c-surface);
  color: var(--c-primary);
  font-family: var(--font-body);
  font-size: 16px; /* 16px keeps iOS from zooming into the field */
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ct-field textarea { min-height: 140px; resize: vertical; }
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: #767069; }

.ct-field input:focus-visible,
.ct-field textarea:focus-visible {
  border-color: var(--c-primary);
  outline: 2px solid var(--c-tertiary);
  outline-offset: 1px;
}

.ct-field [aria-invalid="true"] { border-color: var(--ct-error); box-shadow: inset 0 0 0 1px var(--ct-error); }

.ct-error {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ct-error);
}

.ct-error:empty { display: none; }

/* Motivo: one radio group drawn as compact options. The native radio stays
   in the DOM (keyboard, screen readers, no-JS); the card shows its state with
   a border and a check, not colour alone. */
.ct-reasons { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.ct-reasons legend { padding: 0; }

.ct-hint { margin: 4px 0 12px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--c-secondary); }

.ct-reason-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.ct-reason {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ct-reason:last-child:nth-child(odd) { grid-column: 1 / -1; }

.ct-reason input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
}

.ct-reason-icon { display: inline-flex; flex: none; width: 26px; height: 26px; color: var(--c-eyebrow-light); }
.ct-reason-icon svg { width: 100%; height: 100%; }

.ct-reason-text { display: grid; gap: 2px; min-width: 0; }

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

.ct-reason-sub { display: none; font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--c-secondary); }

.ct-reason:has(input:checked) { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }

.ct-reason:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.ct-reason:has(input:focus-visible) { outline: 2px solid var(--c-tertiary); outline-offset: 2px; }
.ct-reason:has(input[aria-invalid="true"]) { border-color: var(--ct-error); }

@media (hover: hover) {
  .ct-reason:hover { border-color: var(--c-primary); }
}

/* Consent: the whole label is the hit area. */
.ct-consent {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.ct-consent input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--c-primary);
}

.ct-consent label {
  padding-block: 0 4px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #3d3d3d;
  cursor: pointer;
}

.ct-consent label a { color: var(--c-eyebrow-light); text-underline-offset: 3px; }
.ct-consent .ct-error { grid-column: 2; }
.ct-consent input[aria-invalid="true"] { outline: 2px solid var(--ct-error); outline-offset: 2px; }

/* Quotes have their own form: one line pointing there. */
.ct-quote-note { margin: 12px 0 0; font-family: var(--font-body); font-size: 15px; color: var(--c-secondary); }
.ct-quote-note a { color: var(--c-primary); font-weight: 600; text-underline-offset: 3px; }

.ct-form-foot { display: grid; gap: 14px; }

.ct-submit { width: 100%; border: 0; cursor: pointer; }
.ct-submit-busy { display: none; }
.ct-form.htmx-request .ct-submit-label { display: none; }
.ct-form.htmx-request .ct-submit-busy { display: inline; }
.ct-form.htmx-request .ct-submit { opacity: 0.75; cursor: progress; }

.ct-form-status:empty { display: none; }

.ct-form-msg {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--ct-error);
  background: var(--c-surface);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-primary);
}

.ct-form-msg.is-success { border-left-color: #3f7d3b; }

/* Two columns for the short fields once the form is wide enough. */
@container (min-width: 560px) {
  .ct-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .ct-required-note,
  .ct-reasons,
  .ct-field--wide { grid-column: 1 / -1; }
  .ct-reason-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-reason:last-child:nth-child(odd) { grid-column: auto; }
  .ct-reason {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
  }
  .ct-reason-sub { display: block; }
  .ct-form-foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; }
  .ct-submit { width: auto; min-width: 240px; }
}

/* One row of as many columns as there are reasons (Cockpit's
   contactoPage.reasons), so four or five both fill the form's width. */
@container (min-width: 760px) {
  .ct-reason-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .ct-reason:last-child:nth-child(odd) { grid-column: auto; }
}

/* Official channels: a dark panel with the channels as one list of links. */
.ct-channels {
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-footer-bg);
  color: #fff;
}

.ct-channels-img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center; }

.ct-channels-body { padding: 28px 24px 12px; }

.ct-channels-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

.ct-channels-text { margin: 10px 0 16px; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }

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

.ct-channel {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding-block: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
}

.ct-channel-icon { display: inline-flex; flex: none; width: 26px; height: 26px; color: var(--c-tertiary); }
.ct-channel-icon svg { width: 100%; height: 100%; }

.ct-channel-text { display: grid; gap: 2px; min-width: 0; }
.ct-channel-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.ct-channel-value { font-family: var(--font-body); font-size: 15px; color: rgba(255, 255, 255, 0.78); overflow-wrap: anywhere; }

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

@media (hover: hover) {
  a.ct-channel:hover .ct-channel-value { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
}

@media (min-width: 768px) {
  .ct-main { padding-block: 72px 80px; }
  .ct-channels { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .ct-channels-img { height: 100%; aspect-ratio: auto; }
  .ct-channels-body { padding: 32px 32px 16px; }
}

@media (min-width: 1024px) {
  .ct-main-inner { grid-template-columns: minmax(0, 1fr); }
  .ct-main:not(.has-channels) .ct-form-col { width: 100%; max-width: 920px; margin-inline: auto; }
  .ct-main.has-channels .ct-main-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; }
  .ct-channels { position: sticky; top: calc(var(--chrome-height) + 24px); display: block; }
  .ct-channels-img { height: auto; aspect-ratio: 2 / 1; }
  .ct-channels-title { font-size: 24px; }
}

@media (min-width: 1280px) {
  .ct-main { padding-block: 96px 104px; }
  .ct-main.has-channels .ct-main-inner { gap: 72px; }
  .ct-channels-body { padding: 36px 36px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-field input,
  .ct-field textarea,
  .ct-reason { transition: none; }
}

/* 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 — icon + text items (B2B capabilities) -------------------- */

.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 ------------------------------------------------ */

/* Category page — category bar ------------------------------------------- */

/* A dark sub-navigation strip right under the hero (DESIGN.md: the dark
   ground is for closing blocks and secondary navigation): a tertiary
   eyebrow, then every category, always all visible. Below 1440px they are
   compact tags in even columns (2, 3 or 4 by width), the current one
   white; from 1440px, where the set fits one row, they are text tabs
   spread across the container, the current one underlined in tertiary. */
.cat-switcher {
  position: relative;
  isolation: isolate;
  padding-block: 20px 22px;
  background: #000;
  color: #fff;
}

.cat-switcher-label {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-tertiary);
}

.cat-switcher-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-switcher-list li { display: flex; }

/* Tags: 40px tall with 8px between them (touch spacing), in the nav type. */
.cat-switcher-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.cat-switcher-link[aria-current="page"] {
  border-color: #fff;
  background: #fff;
  color: var(--c-primary);
  font-weight: 700;
}

.cat-switcher-link:active { color: #fff; }
.cat-switcher-link[aria-current="page"]:active { color: var(--c-primary); }

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

@media (hover: hover) {
  .cat-switcher-link:not([aria-current]):hover { border-color: var(--c-tertiary); color: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-switcher-link,
  .cat-switcher-link::after { transition: none; }
}

/* Below 1440px the tags sit in even columns, so they read as a tidy grid
   instead of a ragged cloud: 2 on phones, 3 on tablets, 4 on laptops (with
   "Todas" and the 11 categories every row is full). A name too long for
   its cell wraps instead of being cut. */
@media (max-width: 1439px) {
  .cat-switcher-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-switcher-link { justify-content: center; width: 100%; padding: 6px 8px; text-align: center; white-space: normal; }
}

@media (min-width: 560px) and (max-width: 1439px) {
  .cat-switcher-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .cat-switcher-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The narrowest phones: a touch less tracking keeps the longest names on
   one line; if one still does not fit it wraps instead of being cut. */
@media (max-width: 399px) {
  .cat-switcher-link { letter-spacing: 0.05em; padding-inline: 6px; }
}

@media (min-width: 768px) {
  .cat-switcher { padding-block: 24px 26px; }
  .cat-switcher-link { font-size: 12px; }
}

/* From 1440px the whole set fits one row: text tabs spread across the
   container, sitting on the strip's bottom edge, the current one with a
   3px tertiary underline. */
@media (min-width: 1440px) {
  .cat-switcher { padding-block: 20px 0; }
  .cat-switcher-label { margin-bottom: 4px; }
  .cat-switcher-list { flex-wrap: nowrap; justify-content: space-between; gap: 0; margin-inline: -8px; }
  .cat-switcher-link {
    min-height: 52px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
  }
  .cat-switcher-link::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 3px;
    background: transparent;
    transition: background-color 0.2s ease;
  }
  .cat-switcher-link[aria-current="page"] { border: 0; background: transparent; color: #fff; }
  .cat-switcher-link[aria-current="page"]:active { color: #fff; }
  .cat-switcher-link[aria-current="page"]::after { background: var(--c-tertiary); }
  .cat-switcher-link:focus-visible { outline-offset: -4px; border-radius: 4px; }
}

@media (min-width: 1440px) and (hover: hover) {
  .cat-switcher-link:not([aria-current]):hover::after { background: rgba(255, 255, 255, 0.5); }
}

/* Scroll (/tienda, category pages): below 1440px the tags are one swipeable row instead of the
   grid, so the strip stays short and the products near the top. The row
   bleeds to the screen edges; the current tag is scrolled into view by
   product-listing-script. */
@media (max-width: 1439px) {
  .cat-switcher--scroll { padding-block: 16px; }
  .cat-switcher--scroll .cat-switcher-label { margin-bottom: 10px; }
  .cat-switcher--scroll .cat-switcher-list {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--container-pad);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .cat-switcher--scroll .cat-switcher-list::-webkit-scrollbar { display: none; }
  .cat-switcher--scroll .cat-switcher-list li { flex: none; scroll-snap-align: start; }
  .cat-switcher--scroll .cat-switcher-link { width: auto; padding: 0 14px; white-space: nowrap; }
}

/* The products follow the strip closer than a full section gap. */
.cat-switcher + .cat-products { padding-top: 32px; }

@media (min-width: 1024px) {
  .cat-switcher + .cat-products { padding-top: 48px; }
}

.cat-products { padding-block: 40px 56px; scroll-margin-top: 16px; }

/* While a filter loads, the results dim in place (no reload, no jump). */
.cat-products-grid,
.cat-no-results { transition: opacity 0.15s ease; }

/* A search with no exact match shows its closest products under this note
   (searchProducts' approx). */
.cat-approx {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--c-tertiary);
  background: var(--c-surface-muted);
  color: var(--c-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.cat-products.is-loading .cat-products-grid,
.cat-products.is-loading .cat-no-results { opacity: 0.5; }

.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-filters-clear--bottom {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2px;
}

.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:not(.section-eyebrow) {
  margin: 14px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #3d3d3d;
}

.cat-editorial-copy .text-link { margin-top: 10px; }

.cat-editorial-copy .section-eyebrow + .section-title { margin-top: 10px; }

/* Without a photo the block is a compact panel right after the carousel:
   the carousel tiles' radius on the primary black (DESIGN.md: black leads,
   the leather tertiary accents), eyebrow + title over a short tertiary
   rule, then the text in light grey (≥ 9:1 on #111). Stacked on
   phones; from 768px two columns parted by a hairline, so it reads in one
   glance instead of a tall centred stack. Not full bleed: the B2B band
   below has the same ground and the two would merge. */
.cat-carousel:has(~ .cat-editorial:not(.has-photo)) { padding-bottom: 32px; }

.cat-editorial:not(.has-photo) { padding-block: 0 56px; }

.cat-editorial:not(.has-photo) .cat-editorial-copy {
  display: grid;
  gap: 16px;
  max-width: none;
  padding: 24px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.cat-editorial:not(.has-photo) .section-eyebrow { color: var(--c-tertiary); }

.cat-editorial:not(.has-photo) .section-title { color: var(--c-on-primary); }

.cat-editorial:not(.has-photo) .cat-editorial-body p { color: rgba(255, 255, 255, 0.78); }

.cat-editorial:not(.has-photo) .text-link { color: var(--c-accent); }

.cat-editorial:not(.has-photo) .text-link:focus-visible { outline-color: var(--c-accent); }

.cat-editorial:not(.has-photo) .section-title {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  text-wrap: balance;
}

.cat-editorial:not(.has-photo) .section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 14px;
  background: var(--c-tertiary);
}

.cat-editorial:not(.has-photo) .cat-editorial-body p { margin: 0; }

.cat-editorial:not(.has-photo) .cat-editorial-body .text-link { margin-top: 6px; }

@media (min-width: 768px) {
  .cat-carousel:has(~ .cat-editorial:not(.has-photo)) { padding-bottom: 40px; }
  .cat-editorial:not(.has-photo) { padding-bottom: 64px; }
  .cat-editorial:not(.has-photo) .cat-editorial-copy {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 40px;
    padding: 36px 40px;
  }
  .cat-editorial:not(.has-photo) .cat-editorial-body {
    padding-left: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }
}

@media (min-width: 1280px) {
  .cat-carousel:has(~ .cat-editorial:not(.has-photo)) { padding-bottom: 48px; }
  .cat-editorial:not(.has-photo) { padding-bottom: 72px; }
  .cat-editorial:not(.has-photo) .cat-editorial-copy { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; padding: 40px 56px; }
  .cat-editorial:not(.has-photo) .cat-editorial-body { padding-left: 56px; }
  .cat-editorial:not(.has-photo) .cat-editorial-body p { font-size: 18px; }
}

/* B2B module -------------------------------------------------------------- */

/* SEO content ------------------------------------------------------------- */

.page-seo {
  padding-block: 56px;
  border-top: 1px solid var(--c-border);
  background: var(--c-surface);
}

.page-seo-inner { max-width: var(--container-max); }

.page-seo-head {
  padding-top: 14px;
  border-top: 2px solid var(--c-tertiary);
}

.page-seo-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: var(--c-eyebrow-light);
}

.page-seo-title {
  max-width: 15ch;
  margin: 12px 0 0;
  font-size: clamp(1.75rem, 6.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.page-seo-body {
  max-width: 72ch;
  margin-top: 26px;
  padding-left: 16px;
  border-left: 1px solid var(--c-border);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: #3d3d3d;
}

.page-seo-body > p:first-child { font-size: 18px; line-height: 1.65; color: #292929; }

.page-seo-body p { margin: 0 0 16px; }

.page-seo-body h3 {
  margin: 30px 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--c-tertiary);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  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 > :last-child { margin-bottom: 0; }

.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-faq-bg); }

/* Alternating grounds of an inner page (/novedades, /contacto, /marcas): the
   sections under the hero alternate white and surface-muted, counting only
   the ones that render, with a tighter rhythm between them than each
   section's own padding. On the muted ground the accent darkens a step, as
   on the homepage (see "Alternating grounds" above the hero). */
.alt-grounds > section { padding-block: 40px; }

.alt-grounds > section:nth-of-type(odd) { background: var(--c-surface); }

.alt-grounds > section:nth-of-type(even) {
  --c-tertiary: #b3732d;
  --c-eyebrow-light: #955619;
  background: var(--c-surface-muted);
}

/* The FAQ is always the dark band, wherever it falls in the alternation. */
.alt-grounds > section.page-faq { background: var(--c-faq-bg); }

@media (min-width: 768px) {
  .alt-grounds > section { padding-block: 56px; }
}

@media (min-width: 1280px) {
  .alt-grounds > section { padding-block: 64px; }
}

/* A tighter rhythm still (/marcas): less ground between the sections and
   less air between each heading and its content. */
.alt-grounds--tight > section { padding-block: 32px; }

.alt-grounds--tight .brand-dir-head { margin-bottom: 20px; }

@media (min-width: 768px) {
  .alt-grounds--tight > section { padding-block: 40px; }
}

@media (min-width: 1280px) {
  .alt-grounds--tight > section { padding-block: 48px; }

  .alt-grounds--tight .brand-dir-head { margin-bottom: 24px; }
}

/* FAQ: a dark band of compact cards, DESIGN.md's way: the closing-block
   black (#0b0b0b), radius md (6px), a fine border, the question in
   Montserrat capitals with visible tracking (label-caps scale), the answer
   in Inter body-sm, and the caramel accent kept discreet: a soft tertiary
   glow on the question row's lower left (DESIGN.md: no heavy gradients or
   shine) and a thin tertiary plus that becomes a minus. One column: the
   heading on top, the cards below. */
.page-faq {
  --c-faq-bg: #0b0b0b;
  --c-faq-card: #151515;
  --c-faq-line: rgba(255, 255, 255, 0.1);
  --c-faq-glow: 196, 130, 58; /* --c-tertiary */
  --container-max: 960px;
  color: #fff;
}

.page-faq-inner { display: grid; gap: 24px; }

.page-faq .section-eyebrow { color: var(--c-tertiary); }

/* DESIGN.md h2: Montserrat 500, 2rem, tracking 0.06em, in capitals. */
.page-faq .section-title {
  color: #fff;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.faq-list { display: grid; gap: 8px; }

.faq-item {
  overflow: hidden;
  border: 1px solid var(--c-faq-line);
  border-radius: 6px;
  background: var(--c-faq-card);
  transition: border-color 0.2s ease;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  list-style: none;
  cursor: pointer;
  /* The glow sits on the question row only, so an open answer reads on
     the plain dark ground. */
  background: radial-gradient(ellipse 28% 140% at 0% 100%,
    rgba(var(--c-faq-glow), 0.42) 0%,
    rgba(var(--c-faq-glow), 0.14) 45%,
    rgba(var(--c-faq-glow), 0) 75%);
}

.faq-item summary > span { max-width: 44em; }

.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--c-tertiary);
  stroke-width: 1.5;
}

/* Open: the vertical stroke folds away and the plus becomes a minus. */
.faq-icon path:first-child {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-icon path:first-child { transform: scaleY(0); }

.faq-item p {
  max-width: 60em;
  margin: 0;
  padding: 2px 16px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.74);
}

.faq-item a { color: var(--c-accent); }

.page-faq .faq-item summary:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: -3px;
  border-radius: 5px;
}

@media (hover: hover) {
  .faq-item:hover { border-color: rgba(255, 255, 255, 0.22); }
}

@media (min-width: 768px) {
  .page-faq-inner { gap: 28px; }

  .faq-item summary {
    min-height: 48px;
    padding: 12px 20px;
    font-size: 14px;
  }

  .faq-item p { padding: 0 20px 16px; }
}

/* 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,
  .faq-icon path:first-child,
  .faq-item,
  .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; }

  .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; }

  .page-seo,
  .page-faq { padding-block: 72px; }

  .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%;
    margin: 0;
    aspect-ratio: auto;
    background: var(--c-hero-bg);
    clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
  }

  .ihero.has-logo .ihero-figure {
    display: flex;
    padding-left: 6%;
    aspect-ratio: auto;
    border-block: 0;
    background: #fcfbf9;
  }

  .ihero-logo { max-width: min(60%, 340px); max-height: 160px; }

  .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: calc(var(--chrome-height) + 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; }

  .page-seo-inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    column-gap: clamp(48px, 6vw, 96px);
  }

  .page-seo-head { grid-column: 1; grid-row: 1; }

  .page-seo-body {
    grid-column: 2;
    grid-row: 1;
    max-width: 72ch;
    margin-top: 0;
    padding-left: 24px;
  }

  .page-seo-inner .related-cats { grid-column: 2; margin-left: 24px; }

}

@media (min-width: 1280px) {
  .ihero-desc { font-size: 19px; }

  .cat-directory,
  .page-seo,
  .page-faq { padding-block: 72px; }

  .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), less the
     ~120px of the next section that stays in view under the fold. */
  .hero { min-height: clamp(520px, calc(100dvh - var(--chrome-height) - 120px), 2400px); }

  .hero-eyebrow { font-size: 14px; }

  .hero-title {
    font-size: clamp(3.75rem, 3.4vw, 4.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;
  /* A hairline keeps it apart from a dark section above (the final CTA). */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  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: 32px 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: 24px; }

.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-consent {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.footer-news-consent input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--c-tertiary); }
.footer-news-consent a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

.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; }

/* The line and the gap that part the accordions from the brand and
   newsletter, only while that block is shown (site-footer.html hides it
   since 2026-11-11). */
.footer-top ~ .footer-accordions {
  margin-top: 24px;
  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: 24px;
  padding-top: 20px;
  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: 20px;
  padding-top: 20px;
  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: 20px;
  padding-top: 18px;
  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: 36px 28px; }

  .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; }
  /* Field and button share a row; the consent wraps below them. */
  .footer-news-input { flex: 1 1 0; }
  .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;
  }
  /* Parted from the brand and newsletter only while they are shown. */
  .footer-top ~ .footer-nav {
    margin-top: 36px;
    padding-top: 32px;
    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: 32px; padding-top: 28px; 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: 24px; padding-top: 24px; }

  .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    margin-top: 24px;
    padding-top: 20px;
  }
  .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: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   Footer — desktop 1280px+
   --------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .site-footer { min-height: 720px; }
  .footer-inner { padding-block: 40px 28px; }

  .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;
  }
  /* All three in row 1: the statement comes first in source order, so
     auto-placement would push the brand and newsletter to a second row. */
  .footer-brand { grid-column: 1; grid-row: 1; }
  .footer-news { grid-column: 2; grid-row: 1; max-width: 560px; }

  .footer-editorial {
    grid-column: 3;
    grid-row: 1;
    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(4, minmax(0, 1fr));
    gap: 34px 28px;
  }
  .footer-top ~ .footer-nav { margin-top: 40px; }
  .footer-col--contact {
    grid-column: auto;
    padding-top: 0;
    border-top: 0;
  }

  .footer-benefits { margin-top: 32px; }

  .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: 44px 32px; }
  .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; }
}

/* ---------------------------------------------------------------------------
   Category page — product carousel (static/guia categorias.png)

   The guide's "Shop by category" row, in the DESIGN.md system: a heading
   with a thin rule ending in "Ver todos" (to /tienda filtered by the
   category), round arrows on the track's sides and rounded tiles (10px,
   fine border, no shadow) on a scroll-snap track. Product photos are contained on
   white, never cropped. Track: two tiles and a peek on phones (bleeding to
   the screen edge), ~3 on tablets, 4 from 1024px, 5 from 1280px.
   --------------------------------------------------------------------------- */

.cat-carousel {
  --container-max: 1440px;
  --c-eyebrow-light: #9e5c1c;
  padding-block: 40px 56px;
  scroll-margin-top: 16px;
}

.cat-switcher + .cat-carousel { padding-top: 32px; }

.cat-carousel-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.cat-carousel-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-primary);
}

.cat-carousel-count {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--c-secondary);
}

.cat-carousel-rule {
  flex: 1;
  height: 1px;
  background: var(--c-border);
}

/* The arrows sit on the track's sides, centred on the cards, each over the
   edge of the first / last visible card. At an end the arrow hides (and
   leaves the tab order). Touch and trackpads also scroll the track. */
/* --tile-w is one card's width, in units of this box (cqi), so the arrows
   can sit at the middle of the photo (a square as wide as the card). The
   track bleeds 1 gutter each side below 1024px, which the formulas absorb. */
.cat-carousel-viewport {
  --tile-w: calc((100cqi - 24px) / 2.2);
  position: relative;
  container-type: inline-size;
}

/* DESIGN.md button-primary as a round control: solid black, white arrow,
   tertiary on hover. A white ring parts it from the card edge it sits on;
   the shadow is the soft, low one DESIGN.md allows. */
.cat-carousel-arrow {
  position: absolute;
  top: calc(2px + var(--tile-w) / 2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: 0 0 0 3px var(--c-surface), 0 4px 12px rgba(17, 17, 17, 0.16);
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease, visibility 0.2s, scale 0.15s ease;
}

/* Phones and tablets: the track bleeds to the screen edge, so the arrows
   sit 8px in from it, over the edge of the first card and of the peeking
   one. From 1024px the track is inside the container and each arrow is
   centred on the edge of the first / last visible card. */
.cat-carousel-arrow--prev { left: calc(8px - var(--container-pad)); transform: translateY(-50%); }
.cat-carousel-arrow--next { right: calc(8px - var(--container-pad)); transform: translateY(-50%); }

.cat-carousel-arrow svg { width: 18px; height: 18px; stroke-width: 2.2; transition: translate 0.2s ease; }
.cat-carousel-arrow:active { scale: 0.94; }
.cat-carousel-arrow[aria-disabled="true"] { visibility: hidden; opacity: 0; }

/* position: relative keeps the cards' absolutely positioned helpers
   (.visually-hidden) inside the scroller; without it they widen the page. */
.cat-carousel-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--tile-w);
  gap: 12px;
  margin: 0 calc(-1 * var(--container-pad));
  padding: 2px var(--container-pad) 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--container-pad);
  scrollbar-width: none;
  list-style: none;
}

.cat-carousel-track::-webkit-scrollbar { display: none; }

.cat-carousel-track > li { display: flex; scroll-snap-align: start; }

/* "Ver todos" closes the heading row, after the rule (the guide's "View
   all categories →"): a label and the carousel arrows' black circle. */
.cat-carousel-all {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-primary);
  text-decoration: none;
}

.cat-carousel-all-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  transition: background-color 0.2s ease;
}

.cat-carousel-all-icon svg { width: 16px; height: 16px; transition: translate 0.2s ease; }

.cat-carousel-all:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (hover: hover) {
  .cat-carousel-all:hover .cat-carousel-all-icon { background: var(--c-tertiary-badge); }
  .cat-carousel-all:hover .cat-carousel-all-icon svg { translate: 2px 0; }
}

/* Phones: no rule, the title and "Ver todos" share the row. */
@media (max-width: 559px) {
  .cat-carousel-head { justify-content: space-between; gap: 12px; }
  .cat-carousel-rule { display: none; }
}

/* The tile ------------------------------------------------------------------ */

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

.ptile-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-bottom: 1px solid #ebe7e1;
  background: #fff;
}

.ptile-media img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.ptile-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px 10px;
}

/* Always rendered, empty without a brand, so every tile's name lines up. */
.ptile-brand {
  min-height: 12px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.ptile-name {
  display: -webkit-box;
  min-height: 2.5em;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ptile-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 2px 0 0;
}

.ptile-price {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-primary);
}

.ptile-old { font-size: 13px; font-weight: 600; color: var(--c-sale); text-decoration-color: var(--c-sale); }

.ptile-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 32px;
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-eyebrow-light);
  text-decoration: none;
}

.ptile-more svg { width: 15px; height: 15px; transition: transform 0.2s ease; }

/* Static: the homepage's horizontal cards pin .bs-actions absolutely at
   768–1023px; a tile keeps its button in the flow. */
.ptile-actions { position: static; padding: 0 12px 12px; }

/* "Agregar" until the tiles are wide enough for "Agregar al carrito". */
.ptile .bs-btn-full { display: none; }
.ptile .bs-btn-short { display: inline; }

.ptile.is-slot .ptile-body { gap: 0; padding-top: 16px; }

.cat-carousel-arrow:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: 5px; }

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

@media (hover: hover) {
  .ptile:not(.is-slot):hover { border-color: #c3bcb2; }
  .ptile:hover .ptile-media img { transform: scale(1.03); }
  .ptile-more:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ptile-more:hover svg { transform: translateX(3px); }
  .cat-carousel-arrow:hover { background: var(--c-tertiary-badge); }
  .cat-carousel-arrow--prev:hover svg { translate: -2px 0; }
  .cat-carousel-arrow--next:hover svg { translate: 2px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ptile-media img,
  .ptile-more svg,
  .cat-carousel-arrow,
  .cat-carousel-arrow svg,
  .cat-carousel-all-icon,
  .cat-carousel-all-icon svg { transition: none; }
}

@media (min-width: 560px) {
  .cat-carousel-viewport { --tile-w: calc((100cqi - 3 * 12px) / 3.2); }
}

@media (min-width: 768px) {
  .cat-carousel-title { font-size: 26px; }
  .cat-carousel-arrow { width: 44px; height: 44px; }
  .cat-carousel-viewport { --tile-w: calc((100cqi - 3 * 16px) / 3.3); }
  .cat-carousel-track { gap: 16px; }
  .ptile-body { padding: 16px 16px 10px; }
  .ptile-actions { padding: 0 16px 16px; }
}

/* From 1024px the track stays inside the container: four tiles, five from
   1280px, like the guide's row. */
@media (min-width: 1024px) {
  .cat-carousel-arrow { width: 48px; height: 48px; box-shadow: 0 0 0 4px var(--c-surface), 0 6px 16px rgba(17, 17, 17, 0.16); }
  .cat-carousel-arrow svg { width: 20px; height: 20px; }
  .cat-carousel-arrow--prev { left: 0; transform: translate(-50%, -50%); }
  .cat-carousel-arrow--next { right: 0; transform: translate(50%, -50%); }
  .ptile .bs-btn-full { display: inline; }
  .ptile .bs-btn-short { display: none; }
  .cat-carousel { padding-block: 48px 72px; }
  .cat-carousel-viewport { --tile-w: calc((100cqi - 3 * 16px) / 4); }
  .cat-carousel-track {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }
}

@media (min-width: 1280px) {
  .cat-carousel { padding-block: 56px 96px; }
  .cat-carousel-title { font-size: 30px; }
  .cat-carousel-viewport { --tile-w: calc((100cqi - 4 * 16px) / 5); }
}

/* ---------------------------------------------------------------------------
   Product page — "Volver" (theme/pages/producto.html)

   A back control above core's product page: the carousel's round black
   arrow (DESIGN.md button-primary) and a "Volver" label, a 44px tap target.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   Product page — gallery and buy panel (theme/pages/producto.html)

   After static/guia pdp.png, in the site's palette: title and price on one
   line, the colors as square swatches with the picked one named and its
   reference, the sizes as plain labels that underline when picked, a full
   width black button. A value without stock is greyed and struck through,
   and cannot be picked.
   --------------------------------------------------------------------------- */

.pdp-crumbs { padding-block: 16px 14px; }

.pdp {
  display: grid;
  gap: 28px;
  padding-bottom: 40px;
}

.pdp-gallery { min-width: 0; }

.pdp-media {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
}
.pdp-media img { width: 100%; height: 100%; object-fit: contain; }
.pdp-media .bs-placeholder { border: 0; }

.pdp-thumbs {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}
.pdp-thumbs button {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  cursor: pointer;
}
.pdp-thumbs button[aria-pressed="true"] { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pdp-panel { display: grid; align-content: start; gap: 20px; min-width: 0; }

.pdp-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 -8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-eyebrow-light, #9e5c1c);
}
.pdp-eyebrow a { color: inherit; text-decoration: none; }
.pdp-eyebrow a:hover { text-decoration: underline; }

.pdp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}
.pdp-title {
  flex: 1 1 260px;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pdp-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pdp-was { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--c-sale); }
.pdp-was s { text-decoration-thickness: 1px; }
.pdp-off { padding: 2px 8px; border-radius: 999px; background: var(--c-sale); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; }
.pdp-tax { display: block; margin-top: 2px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-align: right; color: var(--c-secondary); }

.pdp-opt { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pdp-opt--size,
.pdp-opt--other { padding-top: 20px; border-top: 1px solid var(--c-border); }

.pdp-label {
  float: left; /* a legend stays in the flow beside its fieldset's grid */
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pdp-opt-head { display: flex; justify-content: space-between; }

.pdp-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-swatch {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 3px;
  border: 1px solid var(--c-border);
  border-radius: 2px;
  background: var(--c-surface);
  font-size: 13px;
  cursor: pointer;
}
.pdp-swatch--name { padding-inline: 10px; }
.pdp-swatch-chip {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.12);
}
.pdp-swatch[aria-pressed="true"] { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.pdp-swatch:hover:not(:disabled) { border-color: var(--c-primary); }
.pdp-swatch:disabled { cursor: not-allowed; opacity: 0.45; }
/* A sold out color: crossed out. */
.pdp-swatch:disabled::after {
  content: "";
  position: absolute;
  inset: 50% -2px auto;
  height: 1.5px;
  background: var(--c-primary);
  transform: rotate(-45deg);
}

.pdp-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-secondary);
  text-transform: uppercase;
}
.pdp-picked strong { color: var(--c-primary); font-family: var(--font-display); font-weight: 700; }

.pdp-values { display: flex; flex-wrap: wrap; gap: 6px 4px; clear: both; }
.pdp-value {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  cursor: pointer;
}
.pdp-value:hover:not(:disabled) { border-bottom-color: var(--c-border); }
.pdp-value[aria-pressed="true"] { border-bottom-color: var(--c-primary); }
.pdp-value:disabled {
  color: #a7a29b;
  text-decoration: line-through;
  cursor: not-allowed;
}

.pdp-swatch:focus-visible,
.pdp-value:focus-visible,
.pdp-thumbs button:focus-visible {
  outline: 2px solid var(--c-tertiary);
  outline-offset: 2px;
}

/* Units stepper (− n +) of the product page. */
.qty-stepper {
  display: inline-grid;
  grid-template-columns: 44px 64px 44px;
  height: 48px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: #fff;
}

.qty-stepper button {
  border: 0;
  background: transparent;
  color: var(--c-primary);
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.qty-stepper button:disabled { color: #b9b3aa; cursor: not-allowed; }
.qty-stepper button:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: -2px; }

.qty-stepper input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-inline: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-primary);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-inner-spin-button,
.qty-stepper input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.qty-stepper input:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: -2px; }

.pdp-buy { display: grid; gap: 10px; }
.pdp-qty { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pdp-qty .pdp-label { margin: 0; }
.pdp-note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--c-secondary); }
.pdp-note a { color: var(--c-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pdp-add { justify-content: center; width: 100%; padding-block: 16px; }
.pdp-add:disabled,
.pdp-add.is-disabled { background: #8c877f; cursor: not-allowed; }
.pdp-left { margin: 0; font-size: 14px; font-weight: 600; color: var(--c-tertiary-badge); }
.pdp-status { margin: 0; font-size: 14px; }
.pdp-status a { font-weight: 600; text-decoration: underline; }
.pdp-status.is-failed { color: var(--co-error, #b42318); }

.pdp-promises {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--c-secondary);
}
.pdp-promises li { display: flex; align-items: center; gap: 10px; }
.pdp-promises svg { flex: none; width: 20px; height: 20px; color: var(--c-primary); }

.pdp-desc {
  display: grid;
  gap: 12px;
  padding-block: 28px 56px;
  border-top: 1px solid var(--c-border);
}
.pdp-desc .pdp-label { float: none; }
.pdp-desc p { max-width: 72ch; margin: 0; line-height: 1.65; color: var(--c-secondary); white-space: pre-line; }

@media (min-width: 1024px) {
  /* The photo box takes the buy panel's height (not a fixed square), so
     both columns end on one line; the photo is contained inside it and
     never sets the row's height itself. */
  .pdp {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: stretch;
  }
  .pdp-gallery { display: flex; flex-direction: column; gap: 12px; }
  .pdp-media { flex: 1; aspect-ratio: auto; min-height: 420px; }
  .pdp-media img,
  .pdp-media .bs-placeholder { position: absolute; inset: 0; }
  .pdp-thumbs { margin-top: 0; }
  .pdp-title { font-size: 1.5rem; }
}

/* The 2026-10-31 guide: reference and brand under the title, a visible
   "Color" label, sizes as boxes (the picked one filled black), the stock in
   green with a dot, a cart icon on the add button, the promises in a row,
   and the specifications panel across the page. */
.pdp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: -12px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.pdp-meta-sep { color: var(--c-border); }

.pdp-values { gap: 8px; }

.pdp-value {
  min-width: 52px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pdp-value:hover:not(:disabled) { border-color: var(--c-primary); }

.pdp-value[aria-pressed="true"] {
  border-color: var(--c-primary);
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.pdp-value:disabled { background: var(--c-neutral); }

.pdp-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2f6b3a; /* DESIGN.md success, darkened for 4.5:1 on white */
}

.pdp-left::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
}

.pdp-add { gap: 12px; }

.pdp-add-icon { flex: none; width: 20px; height: 20px; }

@media (min-width: 768px) {
  .pdp-promises {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 8px;
    font-size: 13px;
    line-height: 1.4;
  }

  .pdp-promises li { gap: 12px; padding-inline: 16px; }

  .pdp-promises li:first-child { padding-left: 0; }

  .pdp-promises li + li { border-left: 1px solid var(--c-border); }

  .pdp-promises svg { width: 28px; height: 28px; }
}

/* Specifications: a bordered panel, closed until clicked, its facts in a row
   (wrapping on narrow screens), each with a line icon. */
/* The panel's outline is the brand caramel (DESIGN.md tertiary), its inner
   dividers the neutral border. */
.pdp-specs {
  grid-column: 1 / -1;
  border: 1px solid var(--c-tertiary);
  border-radius: 6px;
  background: var(--c-surface);
}

.pdp-specs summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}

.pdp-specs summary::-webkit-details-marker { display: none; }

.pdp-specs[open] summary { border-bottom: 1px solid var(--c-border); }

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

.pdp-specs-chevron {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--c-primary);
  transition: transform 0.2s ease;
}

.pdp-specs:not([open]) .pdp-specs-chevron { transform: rotate(180deg); }

.pdp-specs summary:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: -3px; }

.pdp-specs-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.pdp-spec {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
}

.pdp-spec .pdp-spec-icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--c-primary);
}

.pdp-spec-text { display: grid; gap: 2px; min-width: 0; }

.pdp-spec-text strong {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-primary);
}

.pdp-spec-text span {
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-secondary);
  overflow-wrap: break-word;
}

@media (min-width: 1024px) {
  .pdp-spec + .pdp-spec { border-left: 1px solid var(--c-border); }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-value,
  .pdp-specs-chevron { transition: none; }
}

/* ---------------------------------------------------------------------------
   Internal hero — compact (/tienda, category pages)

   The products are the page's lead, so the hero is short: the breadcrumb
   (no eyebrow), a small title and the description. Without a photo it is a
   band; category pages with a photo keep the shorter split. The store opts
   into the full-bleed photo treatment below. ".ihero.ihero--compact" outranks
   the hero's own breakpoint rules.
   --------------------------------------------------------------------------- */

.ihero.ihero--compact { min-height: 0; }

.ihero--compact .ihero-inner { padding-block: 14px 22px; }

/* The breadcrumb already names the page: no eyebrow in the band. */
.ihero--compact .ihero-eyebrow { display: none; }

.ihero--compact .ihero-title {
  margin-top: 12px;
  font-size: clamp(1.5rem, 6.4vw, 1.875rem);
  line-height: 1.1;
}

.ihero--compact .ihero-desc {
  max-width: 60em;
  margin-top: 6px;
  font-size: 15px;
}

.ihero--compact .ihero-actions { margin-top: 14px; }

.ihero--compact .ihero-btn { min-height: 44px; padding-block: 10px; }

/* The listing follows the band closer than a full section gap. */
.ihero--compact ~ .cat-products { padding-top: 28px; }

@media (min-width: 768px) {
  .ihero--compact .ihero-inner { padding-block: 16px 24px; }
  .ihero--compact .ihero-title { font-size: 2rem; }
  .ihero--compact .ihero-desc { font-size: 16px; }
}

@media (min-width: 1024px) {
  .ihero--compact .ihero-inner {
    display: block;
    min-height: 0;
    padding-block: 18px 26px;
  }

  .ihero--compact .ihero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    width: auto;
    padding-right: 0;
  }

  .ihero--compact .ihero-copy > * { grid-column: 1; }

  .ihero--compact .ihero-copy > .ihero-actions {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    margin-top: 0;
  }

  .ihero--compact .ihero-title { font-size: clamp(1.75rem, 2.3vw, 2.25rem); }

  .ihero--compact ~ .cat-products { padding-top: 36px; }
}

/* Compact with a photo (category pages): the usual copy + diagonal photo
   split, only shorter. Phones and tablets get a lower photo strip; from
   1024px the hero is ~300–360px instead of 440–560px. */
.ihero--compact.has-photo .ihero-figure {
  aspect-ratio: 5 / 2;
  margin-top: 16px;
}

/* Phones: "VER PRODUCTOS" only jumps to the products, which now sit right
   under the hero and the bar, so the compact hero keeps just the quote. */
@media (max-width: 767px) {
  .ihero--compact .ihero-btn--primary[href="#productos"] { display: none; }
}

@media (min-width: 768px) {
  .ihero--compact.has-photo .ihero-figure { aspect-ratio: 3 / 1; }
}

@media (min-width: 1024px) {
  .ihero.ihero--compact.has-photo { min-height: clamp(300px, 24vw, 360px); }

  .ihero--compact.has-photo .ihero-inner {
    display: flex;
    align-items: center;
    min-height: inherit;
    padding-block: 20px 28px;
  }

  .ihero--compact.has-photo .ihero-copy {
    display: block;
    width: 56%;
    padding-right: 32px;
  }

  .ihero--compact.has-photo .ihero-copy > .ihero-actions { margin-top: 18px; }

  .ihero--compact.has-photo .ihero-figure { margin: 0; aspect-ratio: auto; }
}

/* Store hero: full-bleed workwear photo, with the copy held over a dark scrim. */
.ihero--store.has-photo {
  isolation: isolate;
  background: #211e1c;
}

.ihero--store.has-photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 62%,
    rgba(0, 0, 0, 0.2) 76%,
    rgba(0, 0, 0, 0.62) 90%,
    #000 100%),
    linear-gradient(90deg,
    rgba(17, 17, 17, 0.96) 0%,
    rgba(17, 17, 17, 0.9) 18%,
    rgba(17, 17, 17, 0.72) 35%,
    rgba(17, 17, 17, 0.38) 52%,
    rgba(17, 17, 17, 0.08) 72%,
    transparent 100%);
  content: "";
}

.ihero--store.has-photo .ihero-inner {
  position: relative;
  z-index: 2;
}

.ihero--store.has-photo > .ihero-figure--background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  background: #211e1c;
  clip-path: none;
}

.ihero--store.has-photo .ihero-img { object-position: 72% center; }

.ihero--store.has-photo .crumbs ol,
.ihero--store.has-photo .crumbs a,
.ihero--store.has-photo .crumbs [aria-current="page"] { color: rgba(255, 255, 255, 0.82); }

.ihero--store.has-photo .crumbs li + li::before { content: ""; margin: 0; }

.ihero--store.has-photo .ihero-title { color: #fff; }

.ihero--store.has-photo .ihero-desc { color: rgba(255, 255, 255, 0.9); }

.ihero--store.has-photo .ihero-btn--secondary {
  border-color: rgba(255, 255, 255, 0.78);
  color: #fff;
}

@media (min-width: 1024px) {
  /* Restore the original compact hero measure: the photo must not size it. */
  .ihero--store.ihero--compact.has-photo { min-height: 0; }

  .ihero--store.ihero--compact.has-photo .ihero-inner {
    display: block;
    min-height: 0;
    padding-block: 18px 26px;
  }

  .ihero--store.ihero--compact.has-photo .ihero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px;
    width: auto;
    padding-right: 0;
  }

  .ihero--store.ihero--compact.has-photo .ihero-copy > .ihero-actions {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: center;
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .ihero--store.has-photo::after {
    background: linear-gradient(180deg,
      transparent 66%,
      rgba(0, 0, 0, 0.22) 80%,
      rgba(0, 0, 0, 0.68) 92%,
      #000 100%),
      linear-gradient(90deg,
      rgba(17, 17, 17, 0.94) 0%,
      rgba(17, 17, 17, 0.82) 26%,
      rgba(17, 17, 17, 0.56) 52%,
      rgba(17, 17, 17, 0.22) 78%,
      rgba(17, 17, 17, 0.12) 100%),
      linear-gradient(0deg, rgba(17, 17, 17, 0.38), rgba(17, 17, 17, 0.08));
  }

  .ihero--store.has-photo .ihero-img { object-position: 68% center; }
}

/* ---------------------------------------------------------------------------
   Checkout — /checkout (theme/pages/checkout.html)
   Form on the left, order summary on the right from 1024px; below it on
   phones and tablets, with a jump link to it under the title.
   --------------------------------------------------------------------------- */

.co,
.co-done {
  --c-eyebrow-light: #9e5c1c; /* the accent as text: 4.5:1 on white */
}

.co {
  --co-error: #a3321f;
  --co-field-edge: #8f8a83; /* 3.4:1 on white: a field edge needs 3:1 */
  background: var(--c-surface);
  padding-block: 20px 64px;
}

.co-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-border);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.co-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--c-eyebrow-light, #9e5c1c);
}

.co-back svg { width: 18px; height: 18px; }
.co-back:hover { text-decoration: underline; text-underline-offset: 3px; }

.co-secure {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c-secondary);
}

.co-secure svg { width: 16px; height: 16px; }

.co-grid {
  display: grid;
  gap: 40px;
  padding-top: 28px;
}

.co-main { min-width: 0; }

.co-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.co-h2 {
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--c-primary);
}

/* Mobile shortcut to the summary (hidden once the summary sits beside). */
.co-summary-jump {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-neutral);
  font-size: 14px;
  color: var(--c-secondary);
}

.co-summary-jump strong { font-size: 16px; color: var(--c-primary); }

/* Steps: number + label, joined by a rule; the current one in the warm
   accent, finished ones linkable. */
.co-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 32px;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-secondary);
}

.co-step { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; }
.co-step + .co-step::before {
  content: "";
  width: clamp(16px, 5vw, 48px);
  height: 1px;
  background: var(--c-border);
}

.co-step > a { display: inline-flex; align-items: center; gap: 8px; }
.co-step > a { min-height: 44px; }
.co-step > a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }

.co-step-n {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--co-field-edge);
  border-radius: 999px;
  font-size: 12px;
}

.co-step.is-current { color: var(--c-eyebrow-light, #9e5c1c); }
.co-step.is-current .co-step-n {
  border-color: var(--c-tertiary);
  background: var(--c-tertiary);
  color: var(--c-on-primary);
}

.co-step.is-done { color: var(--c-primary); }
.co-step.is-done .co-step-n { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }

/* Forms */
.co-form { display: grid; gap: 28px; }

.co-section { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; }
.co-section > .co-h2 { margin-bottom: 2px; }

.co-row { display: grid; gap: 14px; align-items: start; }

.co-group { display: grid; gap: 6px; min-width: 0; }

/* A field is one box with its label inside, above the value. */
.co-box {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 9px 14px 8px;
  border: 1px solid var(--co-field-edge);
  border-radius: 4px;
  background: var(--c-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.co-box label,
.co-box-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-primary);
}

.co-optional { font-weight: 400; color: var(--c-secondary); }

.co-box input,
.co-box select,
.co-box-value {
  width: 100%;
  min-height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-primary);
  font-family: var(--font-body);
  font-size: 16px; /* 16px keeps iOS from zooming into the field */
  line-height: 1.5;
  appearance: none;
}

.co-box input::placeholder { color: #767069; }
.co-box input:focus,
.co-box select:focus { outline: none; }

.co-box:focus-within {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-tertiary);
}

.co-box--select select { padding-right: 28px; cursor: pointer; }
.co-box--select::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

.co-box.is-static { background: var(--c-neutral); border-color: var(--c-border); }

.co-box.is-invalid { border-color: var(--co-error); box-shadow: inset 0 0 0 1px var(--co-error); }

.co-error {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--co-error);
}

.co-error:empty { display: none; }

.co-alert {
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--co-error);
  background: #fbf0ee;
  font-size: 15px;
  color: var(--c-primary);
}

.co-alert a { text-decoration: underline; text-underline-offset: 3px; }

.co-note { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-secondary); }

/* Touch screens move the map with two fingers (checkout.html's coMap). */
.co-map-touch { display: none; }
@media (pointer: coarse) { .co-map-touch { display: inline; } }
/* Cash on delivery: one plain sentence under the total with the suggested
   fee, apart from what is paid online. */
.co-cod {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--c-neutral);
}

.co-cod-icon { flex: none; display: inline-flex; margin-top: 1px; color: var(--c-tertiary-badge); }
.co-cod-icon svg { width: 20px; height: 20px; }
.co-cod-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-secondary); }
.co-cod-text strong { font-size: 13px; font-weight: 600; color: var(--c-primary); white-space: nowrap; }
.co-cod-note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--c-secondary); }

/* Radio cards: the native radio stays visible and focusable; the card's
   border marks the choice, not colour alone. */
.co-choices { display: grid; gap: 10px; }

.co-choice {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--co-field-edge);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.co-choice:has(input:checked) { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.co-choice:has(input:focus-visible) { outline: 2px solid var(--c-tertiary); outline-offset: 2px; }

.co-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); }
.co-choice input:focus-visible { outline: none; }

.co-choice-icon { display: inline-flex; color: var(--c-tertiary); }
.co-choice-icon svg { width: 24px; height: 24px; }

.co-choice-text { display: grid; gap: 2px; min-width: 0; }
.co-choice-text strong { font-size: 15px; font-weight: 600; }
.co-choice-text span { font-size: 14px; line-height: 1.45; color: var(--c-secondary); }

.co-choice-price { font-weight: 600; font-size: 15px; white-space: nowrap; }

.co-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-secondary);
  cursor: pointer;
}

.co-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-tertiary); }

.co-submit {
  justify-content: center;
  width: 100%;
  min-height: 54px;
}

.co-submit svg { width: 20px; height: 20px; }
.co-submit:disabled { opacity: 0.6; cursor: progress; }

/* Recap of the steps already done, each with its own edit link. */
.co-recap {
  margin: 0 0 28px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
}

.co-recap-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 14px 16px;
}

.co-recap-row + .co-recap-row { border-top: 1px solid var(--c-border); }

.co-recap dt {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.co-recap dd { grid-column: 1; margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }

.co-recap a {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 10px 0 10px 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.co-review { gap: 18px; }

/* "¿A dónde te enviamos el detalle de tu compra?", above "Pagar". */
.co-receipt { display: grid; gap: 12px; min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.co-receipt-title { padding: 0; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--c-primary); }
.co-receipt .co-choice { grid-template-columns: auto 1fr; padding: 12px 16px; }
.co-receipt .co-choice-text span { overflow-wrap: anywhere; }

/* Order summary */
.co-summary {
  align-self: start;
  padding: 24px 20px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  scroll-margin-top: 24px;
}

.co-lines { display: grid; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--c-border); }

.co-line {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  align-items: start;
}

.co-line-img {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background: var(--c-neutral);
  overflow: hidden;
}

.co-line-img img { width: 90%; height: 90%; object-fit: contain; }

.co-line-info { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.45; color: var(--c-secondary); }
.co-line-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--c-primary); }

.co-line-total { font-size: 15px; font-weight: 600; white-space: nowrap; }

.co-totals { display: grid; gap: 12px; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--c-border); font-size: 15px; }
.co-totals > div { display: flex; justify-content: space-between; gap: 16px; }
.co-totals dt { color: var(--c-secondary); }
.co-totals dd { margin: 0; font-weight: 500; text-align: right; }
.co-muted { font-size: 13px; font-weight: 400; color: var(--c-secondary); }
.co-discount dt,
.co-discount dd { color: var(--c-eyebrow-light, #9e5c1c); }

.co-grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-border);
}

.co-grand span { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.04em; }
.co-grand strong { font-size: 1.625rem; font-weight: 600; line-height: 1.1; color: var(--c-tertiary); }

.co-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: var(--c-secondary);
}

.co-trust li,
.co-trust a { display: grid; justify-items: center; gap: 8px; }
.co-trust a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.co-trust svg { width: 28px; height: 28px; color: var(--c-tertiary); }

.co-unavailable { display: grid; gap: 16px; justify-items: start; max-width: 560px; padding-block: 24px 40px; }
.co-unavailable p { margin: 0; color: var(--c-secondary); }

@media (min-width: 768px) {
  .co { padding-block: 28px 80px; }
  .co-title { font-size: 2rem; }
  .co-row { grid-template-columns: 1fr 1fr; }
  .co-summary { padding: 28px; }
}

@media (min-width: 1024px) {
  .co-wrap { max-width: 1200px; }
  .co-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: 56px;
    padding-top: 36px;
  }
  .co-summary { position: sticky; top: calc(var(--chrome-height) + 24px); }
  .co-summary-jump { display: none; }
}

@media (min-width: 1280px) {
  .co-grid { gap: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-box,
  .co-choice { transition: none; }
}

/* ---------------------------------------------------------------------------
   Order placed / payment status — core's /checkout/gracias/:id and
   /checkout/retorno, themed in commerce-confirmation.html and
   commerce-payment-status.html.
   --------------------------------------------------------------------------- */

.co-done {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 620px;
  margin-inline: auto;
  padding: 56px 20px 80px;
  text-align: center;
}

.co-done-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--c-neutral);
  color: var(--c-tertiary);
}

.co-done-icon svg { width: 32px; height: 32px; }
.co-done p { margin: 0; color: var(--c-secondary); }
.co-done .co-done-number { font-size: 1.125rem; color: var(--c-primary); }
.co-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---------------------------------------------------------------------------
   Wompi's return — /checkout/confirmacion (checkout-confirmacion.html), in
   the checkout's frame: the state, what comes next and the delivery on the
   left, the order's summary on the right from 1024px (below it before).
   --------------------------------------------------------------------------- */

.co-confirm { display: grid; gap: 32px; align-content: start; }

.co-confirm-head { display: grid; gap: 12px; justify-items: start; }

.co-confirm-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--c-neutral);
  color: var(--c-tertiary-badge);
}

.co-confirm-icon svg { width: 28px; height: 28px; }
.co-confirm-icon.is-paid { background: #eef6ef; color: #2f6b3a; }
.co-confirm-icon.is-canceled { background: var(--c-surface-muted); color: var(--c-secondary); }

.co-confirm-meta {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-eyebrow-light, #9e5c1c);
}

.co-confirm-meta strong { font-weight: 700; }

.co-confirm-lead { margin: 0; max-width: 56ch; font-size: 1rem; line-height: 1.6; color: var(--c-secondary); }

.co-confirm-block { padding-top: 28px; border-top: 1px solid var(--c-border); }

/* What comes next: a vertical timeline; done steps in black, the current
   one in the accent, the rest outlined. */
.co-confirm-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.co-confirm-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding-bottom: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-secondary);
}

.co-confirm-steps li:last-child { padding-bottom: 0; }

/* The line joining one dot to the next. */
.co-confirm-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 2px;
  left: 13.5px;
  width: 1px;
  background: var(--c-border);
}

.co-confirm-steps strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c-primary);
}

.co-confirm-dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--co-field-edge);
  border-radius: 999px;
  background: var(--c-surface);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-secondary);
}

.co-confirm-dot svg { width: 16px; height: 16px; stroke-width: 2.2; }
.co-confirm-steps .is-done .co-confirm-dot { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.co-confirm-steps .is-current .co-confirm-dot { border-color: var(--c-tertiary); background: var(--c-tertiary); color: var(--c-on-primary); }
.co-confirm-steps .is-current strong { color: var(--c-eyebrow-light, #9e5c1c); }

.co-confirm-info {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-neutral);
}

.co-confirm-info dt {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-secondary);
}

.co-confirm-info dd { margin: 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }

.co-confirm-account {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-secondary);
}

.co-confirm-account svg { flex: none; width: 20px; height: 20px; color: var(--c-tertiary-badge); }
.co-confirm-account a { font-weight: 600; color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Side by side when both fit, else stacked at the same width. */
.co-confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.co-confirm-actions form { display: contents; }
.co-confirm-actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

@media (min-width: 768px) {
  .co-confirm-info { grid-template-columns: 1fr 1fr; padding: 24px; }
}

/* Cart — core's /carrito lines fragment (core markup, Tailwind classes),
   brought into the checkout's look. */
.co-cart-variant { margin: 2px 0 0; font-size: 13px; color: var(--c-secondary); }

.co-cart-lines { margin-top: 24px; }
.co-cart-lines ul { border: 1px solid var(--c-border); border-radius: 6px; box-shadow: none; }
.co-cart-lines li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 16px;
}
.co-cart-lines img { grid-row: 1 / span 2; width: 72px; height: 72px; border-radius: 4px; background: var(--c-neutral); object-fit: contain; }
.co-cart-lines li > div { grid-column: 2; }
.co-cart-lines li > div p:first-child { white-space: normal; font-weight: 600; line-height: 1.35; }
.co-cart-lines li > form:first-of-type { grid-column: 2; grid-row: 2; }
.co-cart-lines li > form:nth-of-type(2) { grid-column: 3; grid-row: 2; justify-self: end; }
/* Core's line total arrives empty (only "COP"); the unit price and the
   quantity are shown, the subtotal sits in the summary. */
.co-cart-lines li > span:last-child { display: none; }
.co-cart-lines input[type="number"] { min-height: 40px; border-color: #8f8a83; font-size: 16px; }
.co-cart-lines button { min-height: 40px; font-weight: 600; }

/* Quantity stepper (built by the cart page's script around core's field):
   one compact bordered control, − | number | +, 32px high. */
.co-cart-lines form.qty {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  width: max-content;
  border: 1px solid #8f8a83;
  border-radius: 4px;
  background: var(--c-surface);
  overflow: hidden;
}

.co-cart-lines form.qty:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-tertiary); }

.co-cart-lines .qty input[type="number"] {
  width: 36px;
  min-height: 32px;
  font-size: 14px; /* smaller than iOS's 16px: tapping the figure itself zooms there */
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--c-border);
  border-radius: 0;
  background: transparent;
  color: var(--c-primary);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.co-cart-lines .qty input::-webkit-outer-spin-button,
.co-cart-lines .qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.co-cart-lines .qty input:focus { outline: none; }

.co-cart-lines .qty-btn {
  display: grid;
  place-items: center;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.co-cart-lines .qty-btn svg { width: 14px; height: 14px; }
.co-cart-lines .qty-btn:hover:not(:disabled) { background: var(--c-neutral); }
.co-cart-lines .qty-btn:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: -2px; }
.co-cart-lines .qty-btn:disabled { color: #b5afa7; cursor: not-allowed; }
.co-cart-msg { grid-column: 2 / -1; }

/* A removed line folds away (theme/pages/commerce-cart.html). */
.co-cart-lines li.is-leaving {
  overflow: hidden;
  opacity: 0;
  padding-block: 0;
  transition: height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

/* Eliminar: a quiet text action, not a red button. */
.co-cart-lines form[action="/_commerce/cart/remove"] button {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--c-secondary);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.co-cart-lines form[action="/_commerce/cart/remove"] button:hover { color: var(--co-error, #a3321f); }

@media (prefers-reduced-motion: reduce) {
  .co-cart-lines .qty-btn { transition: none; }
}
.co-cart-lines > p { border-color: var(--c-border); box-shadow: none; }
.co-cart-cta { margin-top: 20px; }

/* ---------------------------------------------------------------------------
   Prices — the shape static/js/aldu-prices.js gives every price:
   <span class="money">[−]<span class="money-cur">$</span><span class="money-num">34.934</span></span>
   The sign is set smaller and apart; the figure uses tabular digits so
   columns of amounts (cart, summary) line up.
   --------------------------------------------------------------------------- */

.money {
  display: inline-flex;
  align-items: baseline;
  gap: 0.16em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.money-cur {
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.85;
}

.money-sign { margin-right: 0.08em; }

.money-num { letter-spacing: 0.01em; }

/* A struck-out price ("Antes"): an inline-flex box does not carry its
   parent's line-through, so the shape stays inline there. */
s .money { display: inline; }
s .money-cur { margin-right: 0.16em; }

/* Amounts in a column sit on the right edge. */
.co-totals dd .money,
.co-line-total .money { justify-content: flex-end; }

/* Core's PDP buy island and cart lines, in the store's type. */
.commerce-price {
  font-family: var(--font-body);
  color: var(--c-primary);
}

#commerce-cart-lines li > div > p:nth-child(2) {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-primary);
}

/* Cart badge: a short pop when its number changes (static/js/aldu-cart.js). */
.cart-count.is-bumped { animation: cart-bump 0.4s ease; }

@keyframes cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-count.is-bumped { animation: none; }
}

/* ---------------------------------------------------------------------------
   Account — /cuenta/... (theme/pages/cuenta-*.html, site/accountpages.go)
   and signing in (/cuenta/ingresar). Built on the checkout's pieces: its
   fields (.co-box), alerts, lines and totals. Menu on the left from 1024px,
   a scrolling row of tabs above the content on phones.
   --------------------------------------------------------------------------- */

.co-account-note { font-size: 14px; }
.co-account-note a,
.acc-link,
.acc-main a:not(.btn):not(.acc-order) { color: var(--c-eyebrow-light, #9e5c1c); text-decoration: underline; text-underline-offset: 3px; }

/* Saved addresses at the top of the checkout's address step. */
.co-saved { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.co-saved a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--c-secondary);
}
.co-saved a strong { color: var(--c-primary); }
.co-saved a:hover { border-color: var(--co-field-edge); }
.co-saved a[aria-current="true"] { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.co-saved svg { width: 20px; height: 20px; margin-top: 2px; color: var(--c-tertiary); }

/* Sign in */
.acc-login { padding-block: 40px 80px; }
.acc-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 460px;
  margin-inline: auto;
  text-align: center;
}
.acc-card .co-title { font-size: 1.5rem; }
.acc-lead { margin: 0; color: var(--c-secondary); }
.acc-card > .co-alert,
.acc-card > .acc-notice { width: 100%; text-align: left; }
.acc-form { width: 100%; gap: 16px; text-align: left; }
.acc-form .co-submit { width: 100%; }
.acc-code { font-size: 24px !important; letter-spacing: 0.4em; text-align: center; font-variant-numeric: tabular-nums; }
.acc-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 20px; width: 100%; }
.acc-alt form { display: contents; }
.acc-alt .co-submit { width: 100%; }
.acc-fine {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-secondary);
  text-align: left;
}
.acc-fine svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }

/* "¿Primera vez?": the same page creates the account. */
.acc-first {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--c-tertiary);
  background: var(--c-neutral);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.acc-first svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--c-tertiary); }
.acc-first strong { color: var(--c-primary); }

.acc-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.acc-link--danger { color: var(--co-error); }

.acc-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 12px 16px;
  border-left: 3px solid var(--c-tertiary);
  background: var(--c-neutral);
  font-size: 15px;
  text-align: left;
}
.acc-notice svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--c-tertiary); }

/* Account shell */
.acc-head { display: grid; gap: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--c-border); }
.acc-eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-eyebrow-light, #9e5c1c);
}
.acc-who { margin: 0; font-size: 15px; color: var(--c-secondary); overflow-wrap: anywhere; }
.acc-who span { color: var(--c-primary); }

.acc-grid { display: grid; gap: 24px; padding-top: 20px; }
.acc-main { display: grid; gap: 20px; align-content: start; min-width: 0; }
.acc-main > .co-back { justify-self: start; }

.acc-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: none;
}
.acc-nav ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acc-nav a,
.acc-signout {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-surface);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-primary);
}
.acc-nav a svg { width: 18px; height: 18px; color: var(--c-tertiary); }
.acc-nav a:hover { border-color: var(--co-field-edge); }
.acc-nav a[aria-current="page"] { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.acc-nav a[aria-current="page"] svg { color: currentColor; }
.acc-signout { border-color: transparent; background: none; color: var(--c-secondary); cursor: pointer; }
.acc-signout:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }

.acc-box { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--c-border); border-radius: 6px; }
.acc-box .co-h2 { margin: 0; }
.acc-box .co-lines { padding-bottom: 16px; }
.acc-box .co-totals { padding-block: 16px; }
.acc-box .co-grand { padding-block: 0; border-bottom: 0; }

.acc-muted { margin: 4px 0 0; color: var(--c-secondary); }
.acc-order-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.acc-empty { display: grid; gap: 16px; justify-items: start; padding: 24px; border: 1px dashed var(--c-border); border-radius: 6px; }
.acc-empty p { margin: 0; color: var(--c-secondary); }

/* Order list */
.acc-orders { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.acc-order {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "thumbs info total" "thumbs badge badge";
  gap: 8px 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  color: var(--c-primary);
}
.acc-order:hover { border-color: var(--co-field-edge); }
.acc-order:hover strong:first-child { text-decoration: underline; text-underline-offset: 3px; }
.acc-order-thumbs { grid-area: thumbs; display: flex; }
.acc-order-thumbs img,
.acc-order-thumbs > svg {
  width: 56px;
  height: 56px;
  padding: 4px;
  border: 2px solid var(--c-surface);
  border-radius: 4px;
  background: var(--c-neutral);
  object-fit: contain;
}
.acc-order-thumbs img + img { margin-left: -28px; }
.acc-order-thumbs > svg { color: var(--c-tertiary); }
.acc-order-info { grid-area: info; display: grid; gap: 2px; min-width: 0; font-size: 14px; color: var(--c-secondary); }
.acc-order-info strong { font-size: 16px; color: var(--c-primary); }
.acc-order .acc-badge { grid-area: badge; justify-self: start; }
.acc-order-total { grid-area: total; font-size: 15px; white-space: nowrap; }

/* State badges: the word carries the meaning; the colour only echoes it. */
.acc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.acc-badge--ok { color: #2f6b3a; background: #eef6ef; }
.acc-badge--wait { color: #8a5a12; background: #fbf3e6; }
.acc-badge--ship { color: #1f5577; background: #ecf3f8; }
.acc-badge--off { color: var(--c-secondary); background: var(--c-neutral); }

.acc-track { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; font-size: 15px; }
.acc-track svg { width: 20px; height: 20px; color: var(--c-tertiary); }
.acc-address { margin: 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }

/* Saved addresses */
.acc-addresses { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.acc-address-card { position: relative; }
.acc-address-card .acc-badge { justify-self: start; }
.acc-address-actions { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }
.acc-address-actions form { display: contents; }

@media (min-width: 768px) {
  .acc-addresses { grid-template-columns: 1fr 1fr; }
  .acc-order {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "thumbs info badge total";
  }
  .acc-card .co-title { font-size: 1.75rem; }
}

@media (min-width: 1024px) {
  .acc-wrap { max-width: 1200px; }
  .acc-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; padding-top: 32px; }
  .acc-nav {
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    position: sticky;
    top: calc(var(--chrome-height) + 24px);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .acc-nav ul { flex-direction: column; }
  .acc-nav a,
  .acc-signout { width: 100%; border-radius: 4px; }
  .acc-signout { justify-content: flex-start; }
}

/* Checkout: the delivery map (Leaflet) and the WhatsApp panels for the
   orders the store arranges itself (another city, bulk). */
.co-map-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.co-map-find {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--c-primary);
  border-radius: 4px;
  background: var(--c-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-primary);
  cursor: pointer;
}
.co-map-find:hover { background: var(--c-neutral); }
.co-map-find:focus-visible { outline: 2px solid var(--c-tertiary); outline-offset: 2px; }
.co-map-find:disabled { opacity: 0.6; cursor: progress; }
.co-map-find svg { width: 18px; height: 18px; }
.co-map {
  height: 300px;
  border: 1px solid var(--co-field-edge);
  border-radius: 4px;
  background: var(--c-surface-muted);
  z-index: 0; /* Leaflet's panes stay under the sticky header */
}
.co-map.is-invalid { border-color: var(--co-error); box-shadow: inset 0 0 0 1px var(--co-error); }
.co-map-status { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--c-primary); }
.co-map-status:empty { display: none; }
@media (min-width: 768px) { .co-map { height: 340px; } }

.co-wa {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 16px;
  border-left: 3px solid var(--c-tertiary);
  background: var(--c-neutral);
}
.co-wa p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--c-primary); }
.co-wa-btn { display: inline-flex; align-items: center; gap: 8px; }
.co-wa-btn svg { width: 20px; height: 20px; }

/* Checkout: the municipality's list (coPick). The native select stays for
   no-JS; enhanced, a button shows its value and the list opens below the
   field, never over it. */
.co-pick { position: relative; }
.co-pick-button { display: none; }
.co-pick.is-enhanced select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.co-pick.is-enhanced .co-pick-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-primary);
  text-align: left;
  cursor: pointer;
}
.co-pick.is-enhanced .co-box::after { display: none; } /* the select's own chevron, if drawn */
.co-pick.is-enhanced .co-box { cursor: pointer; }
.co-pick.is-enhanced .co-box:has(.co-pick-button:focus-visible) { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.co-pick .co-box.is-open { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }
.co-pick-button:focus-visible { outline: none; }
.co-pick-chevron { width: 18px; height: 18px; flex: none; color: var(--c-secondary); transition: transform 0.15s ease; }
.co-box.is-open .co-pick-chevron { transform: rotate(180deg); }
.co-pick-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: var(--c-surface);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.14), 0 2px 6px rgba(17, 17, 17, 0.08);
}
.co-pick-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.co-pick-list li.is-active { background: var(--c-neutral); }
.co-pick-list li[aria-selected="true"] { font-weight: 600; }
.co-pick-name { display: grid; gap: 1px; font-size: 15px; color: var(--c-primary); }
.co-pick-name small { font-size: 12px; font-weight: 400; color: var(--c-secondary); }
.co-pick-check { width: 18px; height: 18px; flex: none; color: var(--c-tertiary); visibility: hidden; }
.co-pick-list li[aria-selected="true"] .co-pick-check { visibility: visible; }
.co-pick-enter { transition: opacity 0.12s ease, transform 0.12s ease; }
.co-pick-from { opacity: 0; transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .co-pick-enter, .co-pick-chevron { transition: none; }
}

/* ---------------------------------------------------------------------------
   Internal hero — banner (/categorias)

   A full-bleed light photo (the editor's hero_image: concrete wall, the
   products on a block at the right) with the dark copy on its clear left
   side, as in the approved design. Phones and tablets wash the photo under
   the copy with the page's warm neutral, since the products sit behind it
   there; from 1024px the photo shows clean and the copy holds the left
   ~46%.
   --------------------------------------------------------------------------- */

.ihero--banner.has-photo {
  position: relative;
  overflow: hidden;
  background: var(--c-neutral);
}

.ihero--banner.has-photo > .ihero-figure--background {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: var(--c-neutral);
  clip-path: none;
}

.ihero--banner.has-photo .ihero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% center;
}

.ihero--banner.has-photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, rgba(246, 244, 241, 0.94) 0%, rgba(246, 244, 241, 0.86) 60%, rgba(246, 244, 241, 0.55) 100%);
  pointer-events: none;
}

.ihero--banner.has-photo .ihero-inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  /* Close to the photo's own 3:1, so the cover crop keeps its sides (the
     caramel lines on the left, the plant on the right). */
  .ihero--banner.has-photo { min-height: clamp(400px, 31.5vw, 640px); }

  .ihero--banner .ihero-inner { padding-block: 28px 44px; }

  /* The left of the photo is clear wall: only a faint wash at the very
     edge, for the breadcrumb and the eyebrow. */
  .ihero--banner.has-photo::after {
    background: linear-gradient(90deg, rgba(246, 244, 241, 0.6) 0%, rgba(246, 244, 241, 0) 45%);
  }

  .ihero--banner.has-photo .ihero-img { object-position: 70% center; }

  .ihero--banner .ihero-copy { width: 44%; padding-right: 0; }

  .ihero--banner .ihero-title { font-size: clamp(2.375rem, 3.2vw, 4rem); }

  .ihero--banner .ihero-desc { font-size: clamp(1rem, 1.15vw, 1.25rem); }
}

/* ---------------------------------------------------------------------------
   Internal hero — short (/novedades, /empresas, /contacto)

   A lower hero with smaller type so the page's own content shows sooner.
   The split stays (copy left, photo right on its diagonal); only the height,
   the gaps and the sizes come down.
   --------------------------------------------------------------------------- */

.ihero--short .ihero-inner { padding-block: 16px 24px; }

.ihero--short .ihero-eyebrow { margin-top: 14px; }

.ihero--short .ihero-title { font-size: clamp(2rem, 8vw, 2.5rem); }

.ihero--short .ihero-desc { margin-top: 12px; font-size: 16px; }

.ihero--short .ihero-actions { margin-top: 18px; }

.ihero--short .ihero-btn { min-height: 46px; }

@media (min-width: 768px) {
  .ihero--short .ihero-inner { padding-block: 20px 32px; }

  .ihero--short .ihero-title { font-size: clamp(2.25rem, 5vw, 3rem); }
}

/* Tablet: the stacked photo is a lower band. (From 1024px it is the
   diagonal side panel, as tall as the hero.) */
@media (min-width: 768px) and (max-width: 1023px) {
  .ihero--short.has-photo .ihero-figure { aspect-ratio: 3 / 1; }
}

@media (min-width: 1024px) {
  .ihero.ihero--short { min-height: clamp(340px, 25vw, 440px); }

  .ihero--short .ihero-inner { padding-block: 24px 36px; }

  .ihero--short .ihero-title { font-size: clamp(2.25rem, 3vw, 3.25rem); }

  .ihero--short .ihero-desc { font-size: clamp(1rem, 1.1vw, 1.125rem); }
}

/* ---------------------------------------------------------------------------
   Homepage CTAs — one size for every section button (1024px+)

   DESIGN.md button: label caps (Montserrat 600, tracked), radius sm (4px),
   compact. Every section-level call to action on the homepage — hero,
   productos, empresas, categorías, marcas, más vendidos and the final CTA —
   shares one height, padding, type and corner; only the fill changes (black
   primary, outlined secondary, caramel on the dark final band). The cards'
   own "Agregar al carrito" buttons are a smaller tier and keep their size.
   Later in the file than the 1920px `.btn` bump, so it wins there too.
   --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .hero-cta,
  .products-cta,
  .corporate-cta,
  .pcategories-cta,
  .brands-cta,
  .bs-cta,
  .fcta-btn {
    min-width: 0;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.2;
  }

  .hero-cta .icon,
  .products-cta .icon,
  .corporate-cta .icon,
  .pcategories-cta .icon,
  .brands-cta .icon { font-size: 18px; }

  /* The brands arrow was pinned to the right edge of a 340–380px button;
     on a button sized to its label it follows the text, like the others. */
  .brands-cta .icon { position: static; }

  /* "Ver todos los productos" under the best sellers was a full-width bar
     with its arrow pinned right: now a button like the others, centred
     under the grid as in "Nuestros productos". */
  .bs-cta {
    width: fit-content;
    margin-inline: auto;
    gap: 12px;
    justify-content: center;
    text-align: center;
  }

  .bs-cta-arrow {
    position: static;
    width: 18px;
    height: 18px;
  }
}