/* ==========================================================================
   FOOTER GLOBAL STYLES (BEM + Tailwind Integration)
   ========================================================================== */

:root {
  --footer-shadow: 0px 10px 45px 0px rgba(76, 89, 129, 0.2);
  --footer-transition: all 0.3s ease-in-out;
}

/* 1. Contenedor Principal */
/* Background comes solely from the theme's own --tob-color-surface-raised
   token (adaptive — no separate dark-mode override needed here, unlike the
   old module-level Background Color field this replaced). No module field
   or per-instance color drives this; it always tracks the theme. */
.footer {
  background-color: var(--tob-color-surface-raised);
  box-shadow: var(--footer-shadow);
  border-radius: 100px 100px 0px 0px;
  color: var(--tob-color-content);
  position: relative;
}

/* Global Background Color setting (Style tab), consumed by all 4 versions
   via the same footer--bg-{value} modifier class on <footer> — not
   duplicated per version. "Default" needs no rule (falls through to the
   shared .footer background above); "White" is an explicit, deliberately
   fixed choice (like the Social Icon/Circle Color choices), so it stays
   literally white rather than an adaptive surface token. */
.footer--bg-white {
  background-color: var(--tob-color-neutral-white);
}

.footer__logo {
  margin-bottom: 15px;
}

.footer__logo-img {
  max-width: 100%;
}

/* Light/Dark logo swap — reuses the theme's two dark-mode triggers (the
   explicit class and the OS-preference "auto" class) instead of a CSS
   content:url() hack, so the Dark Mode logo stays an editable field.
   Shared by all 4 footer versions since each renders both --light/--dark
   images with this same pair of modifier classes. */
.footer__logo-img--dark {
  display: none;
}

html.tob-theme-dark .footer__logo-img--light {
  display: none;
}

html.tob-theme-dark .footer__logo-img--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html.tob-theme-auto .footer__logo-img--light {
    display: none;
  }

  html.tob-theme-auto .footer__logo-img--dark {
    display: block;
  }
}

.footer__description {
  color: var(--tob-color-content);
}

/* 2. Redes Sociales */
.footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 10px;
}

.footer__social-item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0px 10px 40px 0px #1212121A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--footer-transition);
}

/* Color-agnostic hover feedback: a subtle lift, since the circle/icon
   colors are now user-chosen (Style > Social Circle/Icon Color) rather
   than fixed values a hover state could safely swap to. */
.footer__social-item:hover {
  transform: translateY(-2px);
}

/* Circle color — choice field (Style > Social Circle Color). */
.footer__social--circle-white .footer__social-item {
  background-color: var(--tob-color-neutral-white);
}

.footer__social--circle-gray .footer__social-item {
  background-color: var(--tob-color-secondary-second);
}

.footer__social-item svg {
  width: 20px;
  height: 20px;
  transition: var(--footer-transition);
}

.footer__social-item span {
  display: inline-flex;
  line-height: 0;
}

/* Icon color — choice field (Style > Social Icon Color), applied via fill. */
.footer__social--icon-blue .footer__social-item svg,
.footer__social--icon-blue .footer__social-item svg path {
  fill: var(--tob-color-action);
}

.footer__social--icon-white .footer__social-item svg,
.footer__social--icon-white .footer__social-item svg path {
  fill: var(--tob-color-neutral-white);
}

/* Dark mode — overrides whichever Social Icon/Circle Color choice is active
   above, for every footer version, since the social chip always goes to
   this fixed dark treatment regardless of the editor's light-mode pick. */
html.tob-theme-dark .footer__social-item {
  background-color: var(--tob-color-dark-background);
}

html.tob-theme-dark .footer__social-item svg,
html.tob-theme-dark .footer__social-item svg path {
  fill: var(--tob-color-dark-text);
}

@media (prefers-color-scheme: dark) {
  html.tob-theme-auto .footer__social-item {
    background-color: var(--tob-color-dark-background);
  }

  html.tob-theme-auto .footer__social-item svg,
  html.tob-theme-auto .footer__social-item svg path {
    fill: var(--tob-color-dark-text);
  }
}

/* 3. Menú de Navegación */
.footer__nav-title {
  color: var(--tob-color-neutral-black);
  font-size: var(--tob-typography-body-size);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.footer__nav-link {
  color: var(--tob-color-neutral-black);
  font-size: var(--tob-typography-body-size);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.footer__nav-link:hover {
  color: var(--tob-color-action);
  font-weight: 700;
}

.footer__nav-link--active {
  color: var(--tob-color-action);
}

.footer__nav-list {
  padding-inline-start: 0;
  list-style: none;
}

.footer__nav-item {
  margin-bottom: 15px;
}

/* 4. Enlaces Legales y Copyright (HubSpot Menu Overrides) */
.footer__legal-links .hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Divider between legal links — a border rather than a text character, so
   it stays a clean line regardless of font. First item carries none. */
.footer__legal-links .hs-menu-wrapper ul li {
  border-left: 1px solid var(--tob-color-border);
  padding-left: 20px;
}

.footer__legal-links .hs-menu-wrapper ul li:first-child {
  border-left: 0;
  padding-left: 0;
}

.footer__legal-links .hs-menu-wrapper ul li a {
  color: var(--tob-color-neutral-black);
  font-size: var(--tob-typography-body-size);
  font-weight: 400;
  transition: var(--footer-transition);
}

.footer__legal-links .hs-menu-wrapper ul li a:hover {
  color: var(--tob-color-action);
}

/* Dark mode — Version 1. .footer__nav-link and .footer__legal-links ... a
   above use the fixed --tob-color-neutral-black, which never adapts, so
   Version 1 (the only version with no modifier class of its own — see
   footer--v1 added for this) gets its own scoped override here instead of
   changing those shared rules, which Versions 2/3/4 also read from. */
html.tob-theme-dark .footer--v1 .footer__nav-title {
  color: var(--tob-color-dark-text-muted);
}

html.tob-theme-dark .footer--v1 .footer__nav-link {
  color: var(--tob-color-ink-50);
}

html.tob-theme-dark .footer--v1 .footer__legal-links .hs-menu-wrapper ul li a {
  color: var(--tob-color-dark-text-muted);
}

@media (prefers-color-scheme: dark) {
  html.tob-theme-auto .footer--v1 .footer__nav-title {
    color: var(--tob-color-dark-text-muted);
  }

  html.tob-theme-auto .footer--v1 .footer__nav-link {
    color: var(--tob-color-ink-50);
  }

  html.tob-theme-auto .footer--v1 .footer__legal-links .hs-menu-wrapper ul li a {
    color: var(--tob-color-dark-text-muted);
  }
}

.footer__legal {
  align-items: center;
  color: var(--tob-color-neutral-black);
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
}

@media (max-width: 768px) {
  .footer__legal {
    flex-direction: column;
  }
}

.footer__bottom {
  border-color: var(--tob-color-border);
}

.footer__copyright p {
  color: var(--tob-color-neutral-black);
  font-size: var(--tob-typography-body-size);
  font-weight: 400;
  margin: 0;
}

/* 5. Contenido Destacado y Partners */
.footer__featured-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: var(--tob-color-action-secondary);
}

.footer__partners-img {
  max-width: 100%;
  max-height: 60px;
}

/* ==========================================================================
   FOOTER VERSION 2 — same fields as Version 1, different layout. Every
   selector here is scoped under .footer--v2 so none of it touches Version 1
   (which shares plain, unscoped classes like .footer__nav-title,
   .footer__nav-link, .footer__nav-grid, .footer__social-item, .footer__legal
   — those rules above already apply identically to Version 2 for free).
   ========================================================================== */

/* Version 2 is square — no rounded corners anywhere, unlike Version 1.
   .footer.footer--v2 (two classes on the same element) outranks the shared
   .footer rule above (and its mobile override further down) regardless of
   source order, so this alone covers both breakpoints without needing a
   second override inside a media query. */
.footer.footer--v2 {
  border-radius: 0;
}

/* Row 1 — Description + divider + Social. #606060 is this theme's existing
   --tob-color-secondary-second (confirmed exact match), reused instead of
   introducing the nonexistent --colors-neutral-colors-dark-gray variable
   name. Mobile: single column (Description stacked above Social); the
   divider is hidden via the `hidden lg:block` Tailwind classes already on
   it in module.html — no `display` is set here, so nothing here can fight
   that utility the way the Header 3 Megamenu bug did. */
.footer--v2 .footer__row1 {
  border-bottom: 1px solid var(--tob-color-secondary-second);
  padding-bottom: 32px;
}

/* The grid lives here, not on .footer__row1 — .footer__row1 is just the
   full-width row/border container, and its nested content-wrapper (see
   module.html) needs a plain block child to correctly stretch/center;
   putting the grid directly on .footer__row1 left content-wrapper as the
   grid's only item, which shrank it instead of centering it properly. */
.footer--v2 .footer__row1-content {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

.footer--v2 .footer__row1-divider {
  background-color: var(--tob-color-secondary-second);
}

.footer--v2 .footer__social {
  margin-top: 0;
}

/* Row 2 — Navigation only. .footer__nav-grid's column count still comes
   from the shared --footer-nav-columns mechanism (section 3 above). */
.footer--v2 .footer__row2 {
  border-bottom: 1px solid var(--tob-color-secondary-second);
  padding: 32px 0;
}

/* Row 3 — Large logo (same Logo field as Version 1, no Logo 2). */
.footer--v2 .footer__row3 {
  padding: 40px 0;
}

.footer--v2 .footer__logo--large {
  margin-bottom: 0;
}

.footer--v2 .footer__logo-img--large {
  max-width: 400px;
}

/* Row 4 — full-viewport-width bar OUTSIDE .footer__container's
   content-wrapper (see module.html). .footer__bottom itself only sets a
   background here — never `display: flex` — so its nested .content-wrapper
   child stays a normal block and stretches to the full width on its own.
   This is exactly the fix already applied to the Megamenu's Header 4 Top
   Bar for the same bug: making the full-bleed strip a flex container turns
   its content-wrapper child into a flex item that shrinks to fit instead
   of stretching, which is what previously broke that alignment. */
.footer--v2 .footer__bottom {
  background: var(--tob-color-action);
  color: var(--tob-color-action-text);
  padding: 32px 0;
}

/* Text/dividers inside the blue bar need to read against --tob-color-action,
   not the shared black/gray defaults .footer__legal and its children use
   everywhere else — --tob-color-action-text is the same token this theme
   already uses for text on any --tob-color-action background (buttons,
   etc.), and it's already dark-mode adaptive. The `color` on .footer__bottom
   itself above is inherited baseline coverage for anything in this bar;
   these explicit overrides are still required since .footer__copyright p
   and .footer__legal-links ... a set their OWN color (Version 1's shared
   rule), and an explicit same-element rule always beats an inherited value
   regardless of that rule's specificity. */
.footer--v2 .footer__bottom .footer__legal,
.footer--v2 .footer__bottom .footer__copyright,
.footer--v2 .footer__bottom .footer__copyright p,
.footer--v2 .footer__bottom .footer__copyright span,
.footer--v2 .footer__bottom .footer__legal-links .hs-menu-wrapper ul li a {
  color: var(--tob-color-action-text);
}

.footer--v2 .footer__bottom .footer__legal-links .hs-menu-wrapper ul li {
  border-left-color: var(--tob-color-action-text);
}

/* Hover would otherwise turn the link --tob-color-action (brand blue),
   invisible against this same blue background — dim it instead. */
.footer--v2 .footer__bottom .footer__legal-links .hs-menu-wrapper ul li a:hover {
  color: var(--tob-color-action-text);
  opacity: 0.75;
}

@media (min-width: 1024px) {
  .footer--v2 .footer__row1-content {
    align-items: center;
    grid-template-columns: 3fr 1px 2fr;
  }

  .footer--v2 .footer__row1-divider {
    align-self: stretch;
    width: 1px;
  }

  .footer--v2 .footer__social {
    justify-content: flex-end;
  }
}

/* Dark mode — everything else in Version 2 already uses adaptive tokens
   (.footer__description via --tob-color-content; the Row 4 bar via
   --tob-color-action/--tob-color-action-text above). .footer__nav-title and
   .footer__nav-link are the one exception: their shared Version 1 rule
   (section 3 above) uses the fixed --tob-color-neutral-black, which never
   adapts, so Version 2 gets its own scoped override here instead of
   changing that shared rule — changing it directly would also change
   Version 1's rendering, which this task must not do. */
html.tob-theme-dark .footer--v2 .footer__nav-title {
  color: var(--tob-color-dark-text-muted);
}

html.tob-theme-dark .footer--v2 .footer__nav-link {
  color: var(--tob-color-ink-50);
}

@media (prefers-color-scheme: dark) {
  html.tob-theme-auto .footer--v2 .footer__nav-title {
    color: var(--tob-color-dark-text-muted);
  }

  html.tob-theme-auto .footer--v2 .footer__nav-link {
    color: var(--tob-color-ink-50);
  }
}

/* Mobile (anything below the same 1024px line the desktop dynamic-column
   rule above uses) — Version 2's nav grid is always exactly 2 columns,
   never collapsing to 1, regardless of --footer-nav-columns or the
   Tailwind grid-cols-1 utility already on .footer__nav-grid. Social icons
   shrink to 40px here too (overriding both the 50px base and the shared
   36px "Mobile Small" rule further down, via higher specificity — not by
   depending on media query order). */
@media (max-width: 1023px) {
  .footer--v2 .footer__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer--v2 .footer__social-item {
    width: 40px;
    height: 40px;
  }
}

/* ==========================================================================
   FOOTER VERSION 3 — same fields as Versions 1/2, a third layout: three
   cards in a row (Navigation / Logo / Description+Social), then one
   full-width Copyright+Legal card. Scoped under .footer--v3 throughout, so
   none of it touches Versions 1/2 (.footer__nav-link, .footer__legal,
   .footer__copyright p etc. are the same shared, unscoped rules those
   versions already use).
   ========================================================================== */

.footer--v3 {
  border-radius: 0;
}

/* Row 1 — Navigation card / Logo / Description+Social card. Mobile: single
   column (stacked in DOM order: nav card, logo, info card). Desktop:
   1fr/auto/1fr so the logo stays truly centered against the row regardless
   of how wide the two cards are — same technique as the Megamenu's
   Header 3 row. */
.footer--v3 .footer__row1 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .footer--v3 .footer__row1 {
    align-items: center;
    grid-template-columns: 1fr auto 1fr;
  }
}

/* Both cards share the same background/radius/padding/shadow. */
.footer--v3 .footer__nav-card,
.footer--v3 .footer__info-card {
  background-color: var(--tob-color-surface);
  border-radius: 30px;
  box-shadow: 0px 10px 40px 0px #1212121A;
  padding: 50px 30px;
}

/* Navigation — first level only (module.html doesn't render child.children
   at all for Version 3), a flat list of plain links using the same shared
   .footer__nav-link styling (15px, #2E2E2E, regular, bold+blue on hover)
   Versions 1/2 already use for their sub-items — no .footer__nav-title
   here since there's no grouping/heading in this layout. */
.footer--v3 .footer__nav-list-v3 {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .footer--v3 .footer__nav-list-v3 {
    grid-template-columns: repeat(3, auto);
  }
}

.footer--v3 .footer__logo--v3 {
  margin-bottom: 0;
  text-align: center;
}

.footer--v3 .footer__logo-img--v3 {
  max-width: 344px;
}

.footer--v3 .footer__info-card .footer__social {
  margin-top: 24px;
}

/* Navigation links use the theme's own H5 typographic scale (size +
   line-height — the two tokens the theme actually exposes as reusable CSS
   variables for headings, same pattern as --tob-typography-body-size).
   Still a plain <a>, so the link stays fully functional — only its
   typography changes, not its tag/structure. Regular weight at rest, bold
   on hover — the explicit :hover rule is required despite the shared
   .footer__nav-link:hover rule (section 3 above) already setting
   font-weight: 700, since that shared rule and this base V3 rule have
   equal specificity and this one is declared later in the file, so without
   its own :hover override this rule would win even while hovering. */
.footer--v3 .footer__nav-link {
  font-size: var(--tob-typography-h5-size);
  font-weight: 400;
  line-height: var(--tob-typography-h5-line-height);
}

.footer--v3 .footer__nav-link:hover {
  font-weight: 700;
}

/* Legal — wider gap than the shared 24px default, reduced back down once
   .footer__legal switches to a column (its own shared rule, same 768px
   breakpoint) so it doesn't look excessive stacked vertically. */
.footer--v3 .footer__legal {
  gap: 80px;
}

@media (max-width: 768px) {
  .footer--v3 .footer__legal {
    gap: 24px;
  }
}

/* Row 2 — full-width Copyright + Legal card. Same shared .footer__legal/
   .footer__copyright p/.footer__legal-links rules Version 1 uses apply
   here unchanged (this card's background is the light, adaptive
   --tob-color-surface, not Version 2's blue bar, so no text-color
   override is needed the way Version 2 required one). */
.footer--v3 .footer__bottom-card {
  background-color: var(--tob-color-surface);
  border-radius: 100px;
  box-shadow: 0px 10px 40px 0px #1212121A;
  margin-top: 24px;
  padding: 24px;
}

@media (max-width: 768px) {
  .footer--v3 .footer__bottom-card {
    border-radius: 30px;
  }
}

/* Dark mode — .footer__nav-card/.footer__info-card/.footer__bottom-card
   backgrounds already use the adaptive --tob-color-surface token, and the
   text inside (.footer__description via --tob-color-content; nav/copyright/
   legal-links via the shared rules) is either already adaptive or reads
   fine against this card background the same way it does in Version 1 — no
   extra override needed for those. .footer__nav-link is the one exception,
   same as Version 2: its shared rule uses the fixed
   --tob-color-neutral-black, so Version 3 gets its own scoped override
   here rather than changing that shared rule (which would also change
   Versions 1/2). */
html.tob-theme-dark .footer--v3 .footer__nav-link {
  color: var(--tob-color-ink-50);
}

html.tob-theme-dark .footer--v3 .footer__legal-links .hs-menu-wrapper ul li a {
  color: var(--tob-color-dark-text-muted);
}

@media (prefers-color-scheme: dark) {
  html.tob-theme-auto .footer--v3 .footer__nav-link {
    color: var(--tob-color-ink-50);
  }

  html.tob-theme-auto .footer--v3 .footer__legal-links .hs-menu-wrapper ul li a {
    color: var(--tob-color-dark-text-muted);
  }
}

/* ==========================================================================
   FOOTER VERSION 4 — same fields as Versions 1/2/3 plus the new ones this
   version needed (titulo, menu_1, titulo_2, menu_2, subscribe_title,
   subscribe_form, and label_social on the shared Social repeater). Scoped
   under .footer--v4 throughout; .footer__nav-title/.footer__nav-link/
   .footer__legal*/.footer__copyright are the same shared, unscoped rules
   Version 1 already uses.
   ========================================================================== */

/* Rounded on every corner (unlike Version 1's top-only radius) — the
   compound .footer.footer--v4 selector outranks the shared .footer rule
   (and its mobile override) regardless of source order, same technique
   already used for Version 2/3's radius resets. */
.footer.footer--v4 {
  border-radius: 100px;
}

@media (max-width: 768px) {
  .footer.footer--v4 {
    border-radius: 40px;
  }
}

/* Row 1 (Title + Navigation) and Row 2 (Title 2 + Navigation + Subscribe) —
   single column on mobile (stacked in DOM order), splitting into columns
   only at desktop. */
.footer--v4 .footer__row1,
.footer--v4 .footer__row2 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  padding: 32px 0;
}

@media (min-width: 1024px) {
  .footer--v4 .footer__row1 {
    align-items: start;
    grid-template-columns: 1fr 3fr;
  }

  .footer--v4 .footer__row2 {
    align-items: start;
    grid-template-columns: 1fr 2fr 1.2fr;
  }
}

.footer--v4 .footer__row-title-text {
  margin: 0;
}

.footer--v4 .footer__row4-logo .footer__logo-img {
  max-width: 200px;
}

/* Version 4's nav grid is always exactly 2 columns on mobile — same pattern
   already used for Version 2 — regardless of --footer-nav-columns or the
   Tailwind grid-cols-1 utility on .footer__nav-grid. min-width: 0 on the
   column is the other half of the overflow fix below: a grid item's
   default min-width is auto (its content's intrinsic size), which can
   force the track — and the whole row — wider than minmax(0, 1fr) alone
   would allow once nav labels get long (e.g. "HubSpot Implementation"). */
@media (max-width: 1023px) {
  .footer--v4 .footer__nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer--v4 .footer__nav-col {
    min-width: 0;
  }

  .footer--v4 .footer__subscribe {
    padding: 20px;
  }
}

/* Subscribe box. #606060 is this theme's existing --tob-color-secondary-second
   (confirmed exact match), reused instead of the nonexistent
   --colors-secondary-colors-dark variable name. Form markup/styling itself
   is untouched — HubSpot's native {% form %} tag and the theme's existing
   global form styles, nothing rebuilt here. */
.footer--v4 .footer__subscribe {
  border: 1px solid var(--tob-color-secondary-second);
  border-radius: 35px;
  padding: 28px;
}

.footer--v4 .footer__subscribe-title {
  margin: 0 0 12px;
}

/* Row 3 — Social Media, full width, with its own bottom divider (replaces
   the separate .footer__row3-divider element this used previously — one
   border on the row itself, not a redundant second line). Column count
   adapts to how many social items exist (module.html computes
   --footer-social-columns, capped at 6), same "don't reserve empty tracks"
   philosophy as the nav grids. #606060 is this theme's existing
   --tob-color-secondary-second (confirmed exact match), reused instead of
   the nonexistent --colors-secondary-colors-dark/--colors-neutral-colors-
   dark-gray variable names. */
.footer--v4 .footer__row3 {
  border-bottom: 1px solid var(--tob-color-secondary-second);
  padding: 24px 0;
}

/* The container is the outer box now (border + radius); items sit flush
   against each other (no gap) with their own divider between them instead,
   and overflow: hidden keeps those dividers/backgrounds from poking past
   the rounded corners. */
.footer--v4 .footer__social-v4 {
  border: 1px solid var(--tob-color-secondary-second);
  border-radius: 20px;
  gap: 0;
  grid-template-columns: repeat(var(--footer-social-columns, 4), minmax(0, 1fr));
  overflow: hidden;
}

.footer--v4 .footer__social-v4-item {
  align-items: center;
  color: var(--tob-color-content);
  display: flex;
  gap: 10px;
  justify-content: center;
  min-width: 0;
  padding: 40px;
  text-decoration: none;
  transition: var(--footer-transition);
}

.footer--v4 .footer__social-v4-item:not(:last-child) {
  border-right: 1px solid var(--tob-color-secondary-second);
}

/* Icon color — Version 4 only, deliberately NOT the global Social Icon
   Color choice (Blue/White) every other version's circular icons consume;
   here the icon must always match the label's own text color instead.
   --tob-color-content is the same token .footer__social-v4-label already
   uses, so they always match and both stay dark-mode adaptive together.
   The global setting itself is untouched and still drives Versions 1-3. */
.footer--v4 .footer__social-v4-icon svg,
.footer--v4 .footer__social-v4-icon svg path {
  fill: var(--tob-color-content);
}

.footer--v4 .footer__social-v4-icon svg {
  display: block;
  height: 20px;
  width: 20px;
}

/* Label color/font-family stay the theme's own defaults (--tob-color-content
   + inherited body font-family) — only the size/letter-spacing specified
   here are custom. */
.footer--v4 .footer__social-v4-label {
  color: var(--tob-color-content);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Mobile: the outer container's border comes off, and each item gets its
   own complete border + radius instead (still --tob-color-secondary-second,
   the exact #606060 match). A real `gap` replaces the desktop's flush
   `gap: 0` + shared border-right divider, so adjacent items' own borders
   don't sit flush against each other and look like one doubled-up line.
   `min-width: 0` on the item (added to the shared rule above) is what
   actually lets it shrink to the grid track's width in the first place —
   without it, a grid item's default `min-width: auto` refuses to shrink
   below its content's intrinsic size (icon + label), which is what was
   pushing this whole row — and the page — wider than the viewport. */
@media (max-width: 1023px) {
  .footer--v4 .footer__social-v4 {
    border: none;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer--v4 .footer__social-v4-item {
    border: 1px solid var(--tob-color-secondary-second);
    border-radius: 20px;
    padding: 25px;
  }

  .footer--v4 .footer__social-v4-label {
    font-size: 10px;
  }
}

/* Row 4 — Logo / Copyright (centered) / Legal (right on desktop). */
.footer--v4 .footer__row4 {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  padding-top: 40px;
}

.footer--v4 .footer__row4-copyright {
  text-align: center;
}

.footer--v4 .footer__row4-legal {
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .footer--v4 .footer__row4 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer--v4 .footer__row4-legal {
    justify-content: flex-end;
  }
}

/* Dark mode — card-free surfaces here mean .footer__nav-title/.footer__nav-link
   and .footer__copyright p/.footer__legal-links ... a all sit directly on
   the shared --tob-color-surface-raised footer background, the same way
   Version 1 does. Their shared rules use the fixed --tob-color-neutral-black,
   so Version 4 gets its own scoped override here rather than changing those
   shared rules (which would also change Versions 1/2/3). */
html.tob-theme-dark .footer--v4 .footer__copyright p {
  color: var(--tob-color-dark-text);
}

html.tob-theme-dark .footer--v4 .footer__nav-title {
  color: var(--tob-color-dark-text-muted);
}

html.tob-theme-dark .footer--v4 .footer__nav-link {
  color: var(--tob-color-ink-50);
}

html.tob-theme-dark .footer--v4 .footer__legal-links .hs-menu-wrapper ul li a {
  color: var(--tob-color-dark-text-muted);
}

@media (prefers-color-scheme: dark) {
  html.tob-theme-auto .footer--v4 .footer__copyright p {
    color: var(--tob-color-dark-text);
  }

  html.tob-theme-auto .footer--v4 .footer__nav-title {
    color: var(--tob-color-dark-text-muted);
  }

  html.tob-theme-auto .footer--v4 .footer__nav-link {
    color: var(--tob-color-ink-50);
  }

  html.tob-theme-auto .footer--v4 .footer__legal-links .hs-menu-wrapper ul li a {
    color: var(--tob-color-dark-text-muted);
  }
}

/* ==========================================================================
   MEDIA QUERIES (Alineadas a Breakpoints)
   ========================================================================== */

/* Desktop / Tablet Grande (>= 769px) */
@media (min-width: 769px) {
  .footer__nav-col {
    padding-right: 40px;
  }

  .footer__nav-col:last-child {
    padding-right: 0;
  }
}

/* A little extra breathing room between .footer__brand and the nav columns,
   on top of .footer__main's own gap-8 (Tailwind) — column-gap only, so the
   mobile stacked row-gap is untouched. */
@media (min-width: 1024px) {
  .footer__main {
    column-gap: 56px;
  }
}

/* Desktop: exactly as many columns as configured menu groups exist (capped
   at 5, computed in module.html as --footer-nav-columns), so a footer with
   fewer than 5 menus doesn't reserve empty column tracks — overriding the
   Tailwind md:grid-cols-3 utility already on .footer__nav-grid in
   module.html with plain CSS here rather than a new utility class, per
   this module's "don't introduce Tailwind" constraint. */
@media (min-width: 1024px) {
  .footer__nav-grid {
    grid-template-columns: repeat(var(--footer-nav-columns, 5), minmax(0, 1fr));
  }
}

/* Tablet & Mobile (< 768px) */
@media (max-width: 768px) {
  .footer {
    border-radius: 60px 60px 0px 0px;
  }

  .footer__brand {
    max-width: 400px;
    margin: 0 auto;
  }

  .footer__social {
    justify-content: space-between;
  }
}

/* Mobile Small (< 600px) */
@media (max-width: 600px) {
  .footer__social {
    margin-top: 20px;
  }

  .footer__social-item {
    width: 36px;
    height: 36px;
  }

  .footer__social-item svg {
    width: 15px;
    height: 15px;
  }

  .footer__legal-links .hs-menu-wrapper ul {
    flex-direction: row;
    justify-content: center;
  }
}