/**
 * Supra Force — footer stylesheet.
 *
 * Two independent sections, kept in one file because both are scoped to
 * the same Elementor Theme Builder footer template (post 263) and neither
 * is large enough to justify a second enqueue:
 *
 *   1. CAPSULE ANIMATION (original scope of this file) — the hover/focus
 *      pill for the CATÁLOGO / INSTAGRAM / CONTATO links, anchored to
 *      .supra-footer-nav. Untouched by the responsive work below.
 *
 *   2. MOBILE/TABLET FOOTER LAYOUT (added 2026-07-22, responsive rebuild) —
 *      restructures the footer's Elementor containers below 1025px into a
 *      dedicated stacked composition (institutional text -> nav ->
 *      identity/wing+logo -> legal info), replacing the compressed-desktop
 *      layout. See the section banner further down for full rationale.
 *
 * Scope discipline (both sections): every rule is anchored either to
 * .supra-footer-nav or to a specific, confirmed Elementor element ID under
 * .elementor-location-footer — never a bare "footer a", ".elementor-widget
 * a", "img", "h2" or ".elementor-item" selector, so nothing here can leak
 * onto any other part of the site. This file intentionally does NOT reuse
 * any class name from custom-nav-menu.css (.supra-nav-pill,
 * .supra-nav-mask-inner, .supra-nav-mask-item) — those are unscoped global
 * selectors reserved for the header's own instance, and this footer
 * instance needs its own font/height regardless.
 *
 * The pill + its inner white-text mask are created by footer-nav.js (via
 * the shared engine in custom-nav-menu.js) — this file only styles them
 * once they exist. All geometry (left/width/top/height) is set inline by
 * the JS from live element measurements; nothing here hardcodes pixel
 * positions.
 */

:root {
	/* Deliberately separate from --supra-nav-pill-height (header). The
	   footer uses the "LOFT" font at the same 16px size as the header's
	   "LUXE UNO", but must not assume the two render at an identical
	   visual height — tune this value independently during visual QA. */
	--supra-footer-nav-pill-height: 36px;

	/* Signature/logo (elementor-element-bbfb152) fluid width, added
	   2026-07-24 — one continuous curve spanning Mobile through Tablet
	   (375-1024px), referenced by both @media blocks below instead of
	   being redefined per breakpoint. Verified against the requested
	   reference values: 375px->322.5px, 459px->394.7px, 642px->552.1px,
	   800px->688px, 1024px+->760px (ceiling). Declared globally (not
	   inside a max-width:1024px block) because it's harmless if unused —
	   the Desktop-approved rule for this same image never references
	   this variable at all, so it has no effect at >=1025px regardless
	   of being in scope there. */
	--supra-footer-signature-width: clamp(300px, 86vw, 760px);
}

/* Stacking root for this footer group only. Defensive parity with the
   header (see custom-nav-menu.css's isolation:isolate comment) — cheap
   insurance in case any current or future Elementor widget CSS sets a
   z-index on an ancestor of these links. */
.supra-footer-nav {
	position: relative;
	isolation: isolate;
}

/* Base text color for the three links. Elementor's own atomic-widgets
   CSS applies ".e-heading-base a, .e-paragraph-base a { all: unset;
   cursor: pointer; }" — "unset" on the (inherited) color property falls
   back to the parent <h2>'s own color, which already happens to be
   #0E0E66, but "unset" on outline-style resolves to its non-inherited
   initial value ("none"), silently removing any focus indicator. The
   rules below make the color explicit (never relying on inheritance)
   and restore a visible focus-visible outline (see below) — never a
   global ".e-heading-base a" or ".e-heading-link-base" override, always
   scoped under .supra-footer-nav.
*/
.supra-footer-nav .e-heading-link-base {
	color: var(--supra-nav-text-color, #0e0e66) !important;
	cursor: pointer;
	position: relative;
	z-index: 1;
}

/* Elementor's own "all: unset" reset (see above) silently drops the
   native focus outline. Restore a clearly visible one, scoped to this
   footer group and limited to keyboard focus (:focus-visible) so mouse
   clicks don't show it — never removing outline without an equivalent
   replacement. */
.supra-footer-nav .e-heading-link-base:focus-visible {
	outline: 2px solid var(--supra-nav-pill-color, #425fdb);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Safari focuses a link on tap, so the rule above could paint the
   keyboard ring after a touch. :not(:focus-visible) keeps the ring for
   real keyboard focus and drops it for pointer/touch focus only. */
.supra-footer-nav .e-heading-link-base:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Hidden by default at every width — footer-nav.js creates these elements
   (pill + mask) purely based on hover/pointer capability, with no width
   check of its own (that logic lives in the shared engine in
   custom-nav-menu.js, also used by the header — not touched here). This
   base display:none is the safety net that keeps them inert everywhere
   until explicitly re-enabled below, so the capsule can never render as
   an unstyled/full-width block on tablet just because a mouse/trackpad
   is present (confirmed live 2026-07-23: Safari Responsive Design Mode
   at 768/820px still reports hover:hover+pointer:fine, which is why a
   width-less media query alone let the capsule activate on tablet). */
.supra-footer-nav-pill,
.supra-footer-nav-mask-inner {
	display: none;
}

/* The pill only renders on real desktop with real hover + a fine pointer
   — both conditions required together. min-width:1025px matches this
   file's own responsive breakpoints (mobile <=767px, tablet 768-1024px);
   without it, any mouse/trackpad device (including a desktop browser's
   own responsive-mode simulator at a tablet width) would satisfy
   hover:hover+pointer:fine alone and incorrectly activate the capsule
   below desktop. footer-nav.js also gates *attaching* mouse listeners by
   hover/pointer capability — this is the CSS-side safety net so the pill
   can never appear on touch or below 1025px, and so it never disturbs
   the responsive layout Elementor built for tablet/mobile (no extra box
   taking up space, no interference with wrapping). */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
	.supra-footer-nav-pill {
		display: block;
		position: absolute;
		left: 0;
		width: 0;
		background: var(--supra-nav-pill-color, #425fdb);
		border-radius: 999px;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		/* Clears this group's own isolated stacking context (see
		   isolation:isolate above) — being position:absolute with an
		   explicit z-index, this pill also becomes a stacking context of
		   its own, so .supra-footer-nav-mask-item's z-index below is local
		   to it, not compared against anything outside this pill. */
		z-index: 10;
	}

	.supra-footer-nav-mask-inner {
		display: block;
		position: absolute;
		left: 0;
		pointer-events: none;
	}

	.supra-footer-nav-mask-item {
		position: absolute;
		top: 50%;
		z-index: 1;
		transform: translateY(-50%);
		white-space: nowrap;
		text-align: center;
		color: var(--supra-nav-text-color-active, #ffffff) !important;
		font-family: "LOFT", sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 1em;
		letter-spacing: 0px;
		pointer-events: none;
	}
}

/* ====================================================================
 * TABLET/MOBILE CAPSULE — TOUCH/CLICK TRIGGER, added 2026-07-24
 * ====================================================================
 * Same pill/mask elements, same engine (custom-nav-menu.js's
 * initSharedPillNavigation, untouched — this is a CSS-only visibility
 * change), same colors/font/duration/easing as the Desktop hover block
 * above — reused, not reimplemented. That engine's own focusin listener
 * already calls activate() regardless of hover/pointer capability (see
 * "Keyboard focus works regardless of hover/pointer capability" in
 * custom-nav-menu.js); footer-nav.js's own new click handler drives that
 * exact same code path via link.focus(), and toggles the
 * .supra-footer-nav--touch-active class below in sync with the SAME
 * focusin/focusout events, purely so these elements — hidden by the
 * base display:none rule further up this file — become visible for that
 * case too.
 *
 * This can't be merged into the Desktop block above without either
 * duplicating it or relying on CSS nesting (this file targets plain
 * CSS): the two trigger conditions are genuinely different (a hover
 * media feature vs. an explicit JS-toggled class within a width range),
 * so this is a second, clearly-labeled instance of the identical
 * declaration set, not a divergent third design — every value below is
 * copied verbatim from the block above, kept in sync deliberately.
 *
 * Desktop's own hover behavior (>=1025px) is completely unaffected —
 * this is capped at <=1024px, and the class is only ever added below
 * that same width by footer-nav.js.
 */
@media (max-width: 1024px) {
	.supra-footer-nav--touch-active .supra-footer-nav-pill {
		display: block;
		position: absolute;
		left: 0;
		width: 0;
		background: var(--supra-nav-pill-color, #425fdb);
		border-radius: 999px;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
		z-index: 10;
	}

	.supra-footer-nav--touch-active .supra-footer-nav-mask-inner {
		display: block;
		position: absolute;
		left: 0;
		pointer-events: none;
	}

	.supra-footer-nav--touch-active .supra-footer-nav-mask-item {
		position: absolute;
		top: 50%;
		z-index: 1;
		transform: translateY(-50%);
		white-space: nowrap;
		text-align: center;
		color: var(--supra-nav-text-color-active, #ffffff) !important;
		font-family: "LOFT", sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 1em;
		letter-spacing: 0px;
		pointer-events: none;
	}
}

/* ====================================================================
 * MOBILE/TABLET FOOTER LAYOUT — added 2026-07-22
 * ====================================================================
 *
 * WHY THIS EXISTS: the footer's Elementor Theme Builder template (post
 * 263, compiled to wp-content/uploads/elementor/css/post-263.css — never
 * edited directly, see note below) has exactly ONE media query in the
 * whole file, @media(min-width:768px), which only adjusts a handful of
 * --width custom properties for desktop/tablet-up. There is NO
 * max-width:1024px or max-width:767px rule anywhere in that file. Below
 * 768px the template falls back to its raw desktop base values: a fixed
 * 120px left/right padding on the outer container, a 28%-width column for
 * the institutional text sitting next to the nav links, a decorative wing
 * image with a hardcoded height:440px, and justify-content:space-between
 * on a column-direction outer flex container (which is what produced the
 * large uneven vertical gaps once the 440px image forced extra height).
 * That is the root cause confirmed in docs/RESPONSIVE-AUDIT-SUPRA-FORCE.md
 * (Seção 11) and re-confirmed by direct inspection of post-263.css before
 * writing this section.
 *
 * HOW THIS OVERRIDES ELEMENTOR WITHOUT EDITING ITS FILE: every selector
 * below is written as
 *   body .elementor-location-footer .elementor-element.elementor-element-<ID>
 * The leading "body" adds one type-selector to the specificity count
 * without duplicating or faking a class, which is enough to beat
 * post-263.css's own un-prefixed ".elementor-263 .elementor-element.
 * elementor-element-<ID>" selector (both have 3 classes; the tag-selector
 * tier then decides) regardless of which stylesheet happens to print
 * first in <head>. Because of this, none of the rules in this section
 * need !important (the two !important uses elsewhere in this file belong
 * to the older capsule-animation section above and predate this work).
 * All of these are Elementor CONTAINER custom properties (--flex-direction,
 * --gap, --padding-*, etc.), which the container's own Elementor-authored
 * CSS then reads via var() — redefining the custom property is the
 * intended, low-risk way to change a container's layout without touching
 * Elementor's generated file, exactly like changing a theme's own CSS
 * custom properties from a child stylesheet.
 *
 * Element IDs used below:
 *   f4bac3d  outer footer container (column, was justify-content:space-between)
 *   8048b76  row wrapping institutional text + nav (was row, text 28% + nav)
 *   5de62c8  institutional-text column (28% width, >=768px only)
 *   9e74f90  institutional text widget itself
 *   989ecc3  .supra-footer-nav ITSELF — the CONTATO/INSTAGRAM/CATÁLOGO nav
 *     container. CORRECTED 2026-07-23: this was originally assumed (from
 *     static CSS alone, never DOM-confirmed) to be a separate "identity:
 *     wing+logo" row. Live DOM inspection during a desktop regression
 *     investigation confirmed elementor-element-989ecc3 and
 *     .supra-footer-nav are the SAME element — the mobile/tablet rules
 *     that used to target this ID for "identity" styling were silently
 *     fighting the real nav layout rules below (both wrote to this same
 *     element's --flex-direction/--justify-content, one via this ID
 *     selector, one via the .supra-footer-nav class selector). That
 *     duplicate/conflicting targeting has been removed; only the
 *     class-based .supra-footer-nav rules below now touch this element.
 *   bbfb152  the theme-site-logo widget (elementor-widget-theme-site-logo)
 *     — also corrected 2026-07-23: this IS the wing+wordmark logo image
 *     itself (a single widget), not a separate decorative wing <img>
 *     distinct from some other small logo widget as previously assumed.
 *     The rhythm spacing once (incorrectly) applied via 989ecc3 now lives
 *     directly on this element's own ID rule.
 *   6b3b78d  legal-info row (3 text widgets, space-between)
 *   22526af / 2fac19a / 40e8c2f  the three legal-info text widgets
 *     (copyright / rights / location — start/center/end aligned on desktop)
 * The exact DOM nesting depth of 8048b76/6b3b78d's children beyond what's
 * confirmed above still can't be read from static CSS alone (Elementor's
 * compiled stylesheet lists each element's own properties flatly). Two
 * deliberate design choices make the rules below tolerant of that
 * uncertainty: (a) .supra-footer-nav and 9e74f90 are targeted directly
 * rather than through an assumed parent selector, and (b) 8048b76/6b3b78d
 * are only ever told to become column/stacked containers, never given a
 * fixed height, so an extra level of wrapping that turns out to exist
 * would still stack correctly, just with one more (harmless) wrapper in
 * the box model.
 *
 * NOT edited, per this task's explicit constraints: post-263.css itself,
 * the hello-commerce parent theme, the database/Elementor editor data,
 * the wing SVG/PNG source assets, and custom-nav-menu.js (shared with the
 * header — this task only ever adds CSS, so the JS did not need to
 * change; it is already touch-safe, see the (hover:none) block below).
 */

/* ---- Shared spacing scale for this section (documented once, reused
   in both breakpoints below): 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64px.
   Stacked mobile/tablet zones intentionally use MORE space between them
   than the original desktop's own 20px gap — with no side-by-side column
   separation doing that job anymore, adjacent stacked blocks need a
   clearer vertical break to read as distinct zones instead of one clump. */

@media (max-width: 767px) {
	/* ---- 1. Outer footer container: column stack, content-driven height ----
	   --justify-content changed from space-between (root cause of the large
	   uneven vertical gaps, confirmed in the audit) to flex-start: with a
	   plain column + explicit per-zone margin-top below, total height is
	   whatever the stacked content needs — never forced open by flex
	   distribution. --gap is 0 here because the four zones need four
	   DIFFERENT gap values (see rhythm below), which a single --gap can't
	   express; each zone sets its own margin-top instead. */
	body .elementor-location-footer .elementor-element.elementor-element-f4bac3d {
		--flex-direction: column;
		--justify-content: flex-start;
		--align-items: stretch;
		--gap: 0px;
		--row-gap: 0px;
		--column-gap: 0px;
		/* 48px top / 32px bottom: top of the 8/12/16/24/32/40/48/64 scale,
		   giving the footer a clear separation from whatever content sits
		   above it without matching the old fixed 64px exactly. */
		--padding-top: 48px;
		--padding-bottom: 32px;
		/* The requested mobile safe-margin: ~20px at 320px, ~24px cap on
		   larger phones. Replaces the desktop-only 120px, which left as
		   little as ~80px of usable width at 320px. */
		--padding-left: clamp(20px, 6vw, 24px);
		--padding-right: clamp(20px, 6vw, 24px);
	}

	/* ---- 2. Text + nav wrapper: stack instead of a 28% column beside the nav ----
	   This is the confirmed source of the "extremely narrow column" bug:
	   5de62c8's 28% width only applies >=768px in post-263.css, but nothing
	   in that file ever forces it to 100% below 768px either, so it was
	   left at whatever narrow proportion the flex engine assigned it next
	   to the nav links. Forcing column direction here removes the
	   side-by-side arrangement entirely on mobile. */
	body .elementor-location-footer .elementor-element.elementor-element-8048b76 {
		--flex-direction: column;
		--align-items: stretch;
		--flex-wrap-mobile: nowrap;
		--gap: 0px;
	}

	/* Institutional text column: no longer constrained to 28%, full-width
	   with its own readable measure instead. */
	body .elementor-location-footer .elementor-element.elementor-element-5de62c8 {
		--width: 100%;
		--flex-direction: column;
	}

	body .elementor-location-footer .elementor-element.elementor-element-9e74f90 {
		width: 100%;
		/* 32ch reading measure per the brief; min() keeps it from ever
		   exceeding the safe-area width on the very smallest phones. */
		max-width: min(32ch, 100%);
		margin-inline: auto;
		text-align: left;
		/* CORRECTED 2026-07-24 (was a flat 14px/1.5), REFINADO 2026-08-04.
		   Uma curva contínua, compartilhada com o bloco Tablet abaixo (mesma
		   fórmula, mesmo clamp literal sem variável — os dois breakpoints
		   precisam dela, então está escrita nos dois em vez de virar uma
		   terceira custom property separada).

		   Curva anterior: clamp(15px, calc(12px + 0.8vw), 20px). O teto de
		   20px era atingido já em ~1000px e valia até 1024px, enquanto o
		   desktop (>=1025px, font-size:16px vindo do post-263.css do
		   Elementor) nunca passa de 16px — ou seja, o texto institucional
		   ficava 25% MAIOR em tablet largo/desktop menor do que no desktop
		   largo, e caía de 20px para 16px de um pixel de viewport para o
		   outro. Essa era a "faixa intermediária" reportada.

		   Curva nova: mesmo piso de 15px (o mobile fica praticamente
		   intocado — 15.12px -> 15px em 390px), inclinação mais suave e teto
		   de 17.5px atingido em ~1024px. A redução cresce justamente onde o
		   texto incomodava (768px: 18.14 -> 16.43; 1024px: 20 -> 17.5) e o
		   degrau para o desktop cai de 4px para 1.5px. Família, peso, cor,
		   alinhamento, conteúdo e line-height seguem inalterados. */
		font-size: clamp(15px, calc(13.2px + 0.42vw), 17.5px);
		line-height: 1.55;
	}

	/* The widget's inner markup (Elementor Text Editor output: <p>, <a>,
	   <strong>, <em>, <span>) can carry its own font-size from Elementor's
	   editor (paragraph default, link color/weight settings, etc.), which
	   would otherwise keep rendering at whatever size Elementor gave it
	   instead of following the 14px above. inherit ties every one of these
	   to the wrapper's own font-size/line-height, scoped only to this one
	   widget — links, bold and italic markup keep their color/weight, only
	   size and line-height become inherited. */
	body .elementor-location-footer .elementor-element.elementor-element-9e74f90 :is(p, a, strong, em, span) {
		font-size: inherit;
		line-height: inherit;
	}

	/* Defensive only: if the widget's own rich-text content has manual
	   <br> tags meant to control the DESKTOP line breaks (common in
	   Elementor Text Editor widgets), they must not also force breaks in
	   this new, narrower mobile measure. The widget's actual saved content
	   isn't inspectable from static CSS/DB in this session (see the audit's
	   method note), so this is a safe, inert no-op if no such <br> exists,
	   and a real fix if one does. */
	body .elementor-location-footer .elementor-element.elementor-element-9e74f90 br {
		display: none;
	}

	/* .supra-footer-nav IS elementor-element-989ecc3 (confirmed live
	   2026-07-23 — see the ID mapping note near the top of this section;
	   corrects an earlier assumption that it had no Elementor-authored
	   CSS). Its real flex child is Elementor's own .e-con-inner wrapper,
	   which lays out the 3 links by reading --flex-direction/--row-gap/
	   --column-gap from THIS element via custom-property inheritance —
	   not from the literal properties set on .supra-footer-nav itself
	   below (harmless to set there too, but they don't reach .e-con-inner
	   on their own). Without this, .e-con-inner falls back to Elementor's
	   own base (desktop) values for 989ecc3 — a horizontal row — even on
	   mobile. */
	/* CORRECTED 2026-07-24 — root cause confirmed by reading Elementor's
	   own frontend.min.css directly: the element that actually lays out
	   the three links is NOT .supra-footer-nav (989ecc3) itself, it's
	   its child .e-con-inner — confirmed via
	   ".e-con.e-flex>.e-con-inner{flex-direction:var(--flex-direction)}".
	   The custom-property rule that used to live here (--flex-direction/
	   --row-gap/--column-gap on 989ecc3, relying on inheritance down to
	   .e-con-inner) and the old direct .supra-footer-nav{display:flex;
	   flex-direction:...} rule below it BOTH targeted the wrong element
	   for controlling the visible layout — removed, replaced by a single
	   rule directly on .e-con-inner itself, the actual flex container. */
	.elementor-location-footer .supra-footer-nav {
		width: 100%;
		/* Text -> nav rhythm step from the brief. */
		margin-top: 32px;
	}

	/* CORRECTED 2026-07-31 — the rule that used to sit here targeted
	   `.supra-footer-nav > .e-con-inner`, which never matched: 989ecc3 is
	   an `e-con-full` container and those have NO .e-con-inner child
	   (verified live — the three <h2> are direct children). It was dead
	   code. What actually stacked the links was `--flex-direction: column`
	   set on the 8048b76 wrapper above and INHERITED down here (custom
	   properties inherit), which Elementor's own
	   `.e-con.e-flex{flex-direction:var(--flex-direction)}` then applied.
	   So the row has to be re-declared on .supra-footer-nav itself, both
	   as the custom property (for Elementor's rule) and literally (so it
	   holds even if that rule changes).
	   "body" prefix per this file's own specificity technique. */
	body .elementor-location-footer .supra-footer-nav {
		--flex-direction: row;
		--gap: clamp(1rem, 4.5vw, 1.75rem);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: clamp(1rem, 4.5vw, 1.75rem);
	}

	/* width:100% on each heading was the other half of the stack — three
	   full-width flex items can only sit on three rows. */
	.elementor-location-footer .supra-footer-nav > h2.e-heading-base {
		width: auto;
		flex: 0 1 auto;
		min-width: 0;
	}

	.elementor-location-footer .supra-footer-nav .e-heading-link-base {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		/* Touch target kept at 48px — the row must not shrink it. */
		min-height: 48px;
		/* Floor raised to 12px (was 11px). The gap absorbs the squeeze
		   first: at 320px it sits at its own 16px floor while the type
		   stays at 12px. */
		font-size: clamp(0.75rem, 3vw, 0.8125rem);
		padding-inline: clamp(0.125rem, 0.8vw, 0.5rem);
		white-space: nowrap;
	}

	/* ---- 3. Identity: the logo widget (bbfb152) IS the wing+wordmark
	   image — confirmed live 2026-07-23, no separate wrapping "identity
	   row" container exists (see the ID mapping note above). Elementor's
	   own CSS already centers this widget (text-align:center on the
	   widget's own compiled rule); the only thing this composition needs
	   here is the nav -> identity rhythm spacing.

	   CORRECTED 2026-07-24: this element (bbfb152) IS the "assinatura/
	   logo" this round asks to widen — same confirmed element, no
	   separate decorative background wing exists (re-verified: grepped
	   post-263.css again, the ONLY image-bearing rule under this ID is
	   the one below; "asa de fundo" in this round's own protected list
	   refers to this same element's ARTWORK/appearance, not a different
	   one — nothing about the image asset, its aspect ratio or colors is
	   touched here, only its container's width/centering).

	   ROOT CAUSE of "pequena e presa ao canto esquerdo": two rules were
	   silently fighting over the same <img>. This ID-based rule
	   (specificity 0,3,2: body + 2 classes + img type) was ALWAYS
	   winning over the widget-class-based rule that used to sit below it
	   (0,2,1) — so the actual live behavior was this rule's own
	   width:auto + height:clamp(...) (a HEIGHT-driven fit), never the
	   width:100% the other, weaker rule intended. That losing rule and
	   its own img sub-rule are removed below, not just overridden again
	   — a single source now controls the image, matching this round's
	   own consolidation instruction. */
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 {
		/* Nav -> identity rhythm step from the brief, unchanged. Container-
		   level width/centering added this round, per the requested
		   conceptual structure — Elementor's own compiled rule already
		   gives this element width:100% of ITS OWN parent and text-align:
		   center (confirmed reading post-263.css directly), so this is
		   reinforcement against the specificity conflict above, not a
		   new intent. */
		margin-top: 40px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-inline: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Added 2026-07-24 — DevTools evidence this round: the rendered <img>
	   carries an HTML width="591" presentational attribute (Elementor/
	   WordPress writing the source file's own intrinsic/registered size
	   as width/height attributes, a normal practice for CLS). A plain
	   CSS width, even at higher specificity, should already out-rank a
	   presentational HTML attribute — but this element's own wrapping
	   <a> was never given an explicit width of its own, so IT could have
	   been the one silently capping the image to its own default
	   (content-sized) box regardless of the img's own CSS. Scoped the
	   same way as every other rule in this section (ID-based, "body"
	   prefix), matching whatever anchor tag the widget renders. */
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 a {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 img {
		/* !important added 2026-07-24 on width/max-width/height
		   specifically, per explicit instruction — guarantees this wins
		   over the HTML width="591" presentational attribute regardless
		   of any remaining uncertainty about the exact cascade path.
		   width:min(100%, var(--supra-footer-signature-width)) — the
		   fluid ceiling from :root, wrapped in min() so the CONTAINER's
		   own padding-driven width still wins whenever it's narrower
		   than the curve's own value at that point. height:auto
		   preserves the asset's own aspect ratio (never distorted, never
		   cropped); object-fit/object-position kept as an explicit,
		   defensive match. */
		display: block;
		width: min(100%, var(--supra-footer-signature-width)) !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain;
		object-position: center;
		margin-inline: auto;
		pointer-events: none;
	}

	/* ---- 4. Legal info: single centered column ---- */
	body .elementor-location-footer .elementor-element.elementor-element-6b3b78d {
		--flex-direction: column;
		--justify-content: flex-start;
		--align-items: center;
		--flex-wrap-mobile: nowrap;
		--gap: 20px;
		/* Identity -> legal rhythm step from the brief. */
		margin-top: 32px;
	}

	body .elementor-location-footer .elementor-element.elementor-element-22526af,
	body .elementor-location-footer .elementor-element.elementor-element-2fac19a,
	body .elementor-location-footer .elementor-element.elementor-element-40e8c2f {
		text-align: center;
		line-height: 1.3;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	/* ---- Tablet: a distinct composition, not the mobile layout stretched ----
	   Text still stacks above the nav (the same 28%-column squeeze exists
	   at tablet widths in the unmodified template), but the nav itself
	   stays a horizontal row — there is enough width at 768-1024px for
	   three links side by side without cramming. Identity stays a
	   centered stack (the "wing + mark" pairing reads the same way at any
	   sub-desktop width); legal info is left as the template's own
	   space-between row (6b3b78d, untouched here) since three columns
	   still fit comfortably in this range. */
	body .elementor-location-footer .elementor-element.elementor-element-f4bac3d {
		--flex-direction: column;
		--justify-content: flex-start;
		--align-items: stretch;
		--gap: 0px;
		--row-gap: 0px;
		--column-gap: 0px;
		--padding-top: 64px;
		--padding-bottom: 40px;
		/* 40-64px range from the brief; clamp scales with the 768-1024px
		   viewport itself rather than a fixed midpoint value. */
		--padding-left: clamp(40px, 5vw, 64px);
		--padding-right: clamp(40px, 5vw, 64px);
	}

	body .elementor-location-footer .elementor-element.elementor-element-8048b76 {
		--flex-direction: column;
		--align-items: stretch;
		--flex-wrap-mobile: nowrap;
		--gap: 0px;
	}

	body .elementor-location-footer .elementor-element.elementor-element-5de62c8 {
		--width: 100%;
		--flex-direction: column;
	}

	body .elementor-location-footer .elementor-element.elementor-element-9e74f90 {
		width: 100%;
		/* 38-46ch range from the brief. */
		max-width: 42ch;
		margin-inline: auto;
		text-align: left;
		/* Mesma curva do bloco Mobile acima (CORRECTED 2026-07-24, era um
		   16px/1.5 fixo; REFINADO 2026-08-04) — contínua nos dois
		   breakpoints. Ver a justificativa completa da nova curva no bloco
		   Mobile: é esta faixa (768-1024px) que concentra a redução. */
		font-size: clamp(15px, calc(13.2px + 0.42vw), 17.5px);
		line-height: 1.55;
	}

	body .elementor-location-footer .elementor-element.elementor-element-9e74f90 br {
		display: none;
	}

	/* CORRECTED 2026-07-24 — same root cause as the Mobile block above:
	   .e-con-inner (989ecc3's real flex child, confirmed via Elementor's
	   own frontend.min.css) is the actual element that lays out the
	   three links, not .supra-footer-nav/989ecc3 itself. The old
	   custom-property rule here and the old direct .supra-footer-nav
	   rule below it are removed, replaced by a single rule directly on
	   .e-con-inner. This is also the fix for "768px still behaves like
	   Mobile": that symptom was never really about the 767/768 width
	   boundary itself (both @media blocks were already correctly
	   disjoint) — it was that neither block's OLD rule ever reached the
	   real flex container in the first place, so nothing here actually
	   controlled the visible direction at any width. */
	.elementor-location-footer .supra-footer-nav {
		width: 100%;
		margin-top: 32px;
	}

	/* nowrap — explicit request: CONTATO / INSTAGRAM / CATÁLOGO must stay
	   a single row across the whole 768-1024px range, never breaking to
	   a second line. "body" prefix ties Elementor's own selector on
	   specificity (see the Mobile block's own comment on this same
	   technique), winning regardless of source order. */
	/* CORRECTED 2026-07-31 — same dead-code bug the Mobile block had:
	   `> .e-con-inner` never matched (989ecc3 is `e-con-full`, no inner
	   wrapper), so this gap:clamp() never applied and the visible gap was
	   Elementor's own `--gap:50px`. Re-declared on .supra-footer-nav
	   itself, where it actually takes effect. */
	body .elementor-location-footer .supra-footer-nav {
		/* Floor at 50px, not the 40px the range starts at: 50px is the
		   current approved value here, and the brief's own 40-56px range
		   contains it — so the range is honoured without the spacing
		   narrowing at 768-820px (measured 50 -> 40px before this floor). */
		--gap: clamp(3.125rem, 5vw, 3.5rem);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		gap: clamp(3.125rem, 5vw, 3.5rem);
	}

	.elementor-location-footer .supra-footer-nav > h2.e-heading-base {
		width: auto;
	}

	.elementor-location-footer .supra-footer-nav .e-heading-link-base {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		/* Held at 16px — the ceiling of the requested 14-16px Tablet
		   range, which is also what this breakpoint already rendered.
		   Declared explicitly so it no longer depends on Elementor's
		   widget CSS. */
		font-size: 1rem;
		padding-inline: clamp(0.125rem, 0.8vw, 0.5rem);
		white-space: nowrap;
	}

	/* Identity — CORRECTED 2026-07-24, same root cause/fix as the mobile
	   block above: this ID-based img rule (higher specificity) was
	   always winning over the now-removed .elementor-widget-theme-site-
	   logo width:clamp() rule, so the live behavior was always this
	   height-driven fit, never the intended full-width one. Single
	   source now, matching the requested width:100% container-controlled
	   approach — no max-width cap beyond 100%, same reasoning as mobile. */
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 {
		margin-top: 40px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-inline: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Same reasoning as the Mobile block above (DevTools evidence: HTML
	   width="591" presentational attribute on the <img>; the wrapping
	   <a> had no explicit width of its own). */
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 a {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 img {
		/* Same --supra-footer-signature-width curve as the Mobile block
		   above (defined once in :root) — at 768-1024px this range sits
		   between ~660px and its own 760px ceiling, still respecting
		   min(100%, ...) if the container itself is ever narrower.
		   !important on width/max-width/height, same reasoning as
		   Mobile — guarantees victory over the HTML width="591"
		   attribute. */
		display: block;
		width: min(100%, var(--supra-footer-signature-width)) !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain;
		object-position: center;
		margin-inline: auto;
		pointer-events: none;
	}

	/* 6b3b78d's own 3-column space-between row is still left alone — only
	   the space above it changes. It had no margin-top at all here
	   (measured gap logo -> legal = 0px at 768/899/1024px), so the legal
	   line sat against the mark. Nothing else in this zone moves: the
	   space above the logo and the footer's own gap are untouched. */
	body .elementor-location-footer .elementor-element.elementor-element-6b3b78d {
		margin-top: clamp(1.75rem, 3.2vw, 2rem);
	}
}

/* ---- Touch interaction for the capsule links (Seção 10) ----
   The hover pill already never renders on touch — it lives entirely
   inside @media(hover:hover) and (pointer:fine) above, and footer-nav.js
   only ever attaches its mouseenter/mouseleave listeners when that same
   query matches (canHover), so no JavaScript change was needed here. This
   block only adds a simple, discrete touch affordance that doesn't depend
   on hover: a brief opacity dip on :active. No mouse simulation, nothing
   left "stuck" after the tap ends (:active clears itself on release). */
@media (hover: none) and (pointer: coarse) {
	/* Defence in depth alongside footer-nav.js, which no longer runs any
	   capsule flow on touch: even if the shared engine's own focusin
	   listener still fires from a native tap-focus, there is nothing left
	   to paint. Desktop is unaffected — this query never matches there. */
	.elementor-location-footer .supra-footer-nav-pill,
	.elementor-location-footer .supra-footer-nav-mask,
	.elementor-location-footer .supra-footer-nav-mask-inner,
	.elementor-location-footer .supra-footer-nav-mask-item {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	.supra-footer-nav .e-heading-link-base {
		transition: opacity 0.15s ease;
	}

	/* The blue box left around CATÁLOGO after a tap: measured on the live
	   link, -webkit-tap-highlight-color resolves to the browser default
	   rgba(51,181,229,.4) in touch contexts (against rgba(0,0,0,.18) on
	   Desktop, which is grey and never reads as a box). It is NOT
	   outline/box-shadow/border/background — all four measured
	   "none"/transparent before and after the tap — and not the capsule
	   either, which fades out on its own in ~1.2s.
	   The .elementor-location-footer prefix is required, not decorative:
	   Elementor's own `.elementor .e-heading-link-base { all: unset }`
	   expands to include `-webkit-tap-highlight-color: unset` and ties
	   this file on specificity (0-2-0) — without the extra class it wins
	   on source order and the highlight comes back. */
	.elementor-location-footer .supra-footer-nav .e-heading-link-base {
		-webkit-tap-highlight-color: transparent;
	}

	.supra-footer-nav .e-heading-link-base:active {
		opacity: 0.6;
	}

	/* :not(:focus-visible) on purpose — a tablet with a keyboard attached
	   still matches this query, and the keyboard ring must survive. */
	.supra-footer-nav .e-heading-link-base:active,
	.supra-footer-nav .e-heading-link-base:focus:not(:focus-visible) {
		outline: none !important;
		box-shadow: none !important;
	}
}

/* ---- Institutional text column at Desktop (>=1025px) ----
   post-263.css sets `5de62c8{--width:28%}`, a pure percentage that keeps
   shrinking with the viewport: measured 203px / 11 lines at 1189px and
   242px / 10 lines at 1366px, against 332px / 7 lines at 1780px. A fluid
   width with a real floor and ceiling replaces it — same curve, but it
   stops collapsing on the narrow end. The <=1024px blocks above already
   force this container to 100% and are not affected. */
@media (min-width: 1025px) {
	body .elementor-location-footer .elementor-element.elementor-element-5de62c8 {
		--width: clamp(280px, 24vw, 380px);
		/* min-width is what actually holds the floor: this container is a
		   flex item, so --width alone is just a basis the flex engine is
		   free to shrink past — measured 200.7px at 1189px against a
		   declared 261.6px until this line was added. */
		min-width: clamp(280px, 24vw, 380px);
		max-width: 100%;
	}

	/* Nav type/rhythm at Desktop. Elementor's own --gap:50px is flat at
	   every width above 768px; this lets both the type and the spacing
	   follow the footer's scale instead. The 50px floor is deliberate —
	   it is the current approved value, so nothing narrows on the way. */
	body .elementor-location-footer .supra-footer-nav {
		--gap: clamp(3.125rem, 3.5vw, 4.25rem);
		gap: clamp(3.125rem, 3.5vw, 4.25rem);
	}

	.elementor-location-footer .supra-footer-nav .e-heading-link-base {
		font-size: clamp(1rem, 1vw, 1.125rem);
	}

	/* The capsule's white mask text is a duplicate of the link label
	   drawn on top of the pill — it has to track the link's own size
	   exactly, or the label visibly jumps on hover at wide widths. */
	.supra-footer-nav-mask-item {
		font-size: clamp(1rem, 1vw, 1.125rem);
	}
}

/* ---- Desktop (>=1025px): altura da marca pela proporcao do SVG ----
   post-263.css forca `height:440px` na <img> do widget bbfb152. O
   Asset-1.svg tem viewBox 0 0 591.74 142.73 — proporcao intrinseca
   4,1459:1 — e nenhuma dimensao propria, entao com o preserveAspectRatio
   padrao a arte fica centralizada nesse box e a altura que sobra vira
   faixa transparente acima E abaixo dela. Medido em 1265px: imagem de
   1025px de largura, altura 440px, conteudo real 247,23px (= 1025 /
   4,1459) e 96,39px de vazio de cada lado.
   height:auto devolve a proporcao. O <a> precisa ser block para o
   width:100% da imagem ter base de resolucao — com a altura fixa isso
   nao importava, mas em auto um <a> inline nao da nada ao percentual e o
   navegador cai no padrao de 300px para elemento substituido sem tamanho
   intrinseco (medido 299,98px numa tentativa anterior). line-height:0
   remove a folga da linha de texto sob a imagem.
   Sem teto de media query: a regra vale de 1025px para cima, entao nao
   ha salto em 1199/1200. As margens reconstroem o ritmo 40px/32px, o
   mesmo par que o Tablet usa em 1024px, mantendo a fronteira continua. */
@media (min-width: 1025px) {
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152,
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 .elementor-widget-container {
		height: auto !important;
		min-height: 0 !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 a {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		line-height: 0;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		object-fit: contain !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 {
		/* +20px sobre o gap de 20px da raiz = 40px visuais acima. */
		margin-top: 20px;
		/* +12px sobre o mesmo gap = 32px visuais abaixo. */
		margin-bottom: 12px;
	}
}

/* ---- Tablet (768-1024px): escala da marca ----
   A largura vinha de --supra-footer-signature-width: clamp(300px, 86vw,
   760px), aplicada como width:min(100%, var(...)) na imagem. Os 86vw
   faziam a marca ocupar 86% da viewport em 768-820px, e o teto de 760px
   ainda representava 82,5% do container em 1024px — proporcional, mas
   dominante.
   REVISADO: a curva anterior (480px em 768 -> 610px em 1024) deixava
   104 a 156px de sobra lateral de cada lado, ocupando so 66-70% da
   largura util, contra 97% do Mobile aprovado. A curva atual,
   calc(200px + 46.875vw), resolve 560px em 768 e 680px em 1024 —
   74-81% da util. Como o SVG tem proporcao travada em 4,1459:1, a
   altura acompanha na mesma medida: +19,3px em 768 e +16,9px em 1024.
   Nao vai aos 97% do Mobile de proposito: isso equivaleria a 667px em
   768px de viewport, praticamente o estado de 86vw que foi rejeitado
   por dominar o footer (660,47px).
   A largura e controlada no widget; a imagem so o preenche, entao a
   altura segue vindo da proporcao intrinseca (height:auto, 4,1459:1) —
   nada aqui toca nela. Sem scale, zoom, margem negativa ou breakpoint
   extra dentro da faixa. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 {
		width: clamp(560px, calc(200px + 46.875vw), 680px) !important;
		max-width: calc(100% - 48px) !important;
		margin-inline: auto !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 .elementor-widget-container,
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 a {
		width: 100% !important;
		max-width: 100% !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-inline: auto !important;
	}
}

/* ---- Tablet (768-1024px): fonte unica para o espaco nav -> marca ----
   Diagnostico: NAO havia altura reservada. Medido nos sete viewports,
   widget.height == img.height (sobra 0) e widget.top == img.top (delta
   0) — o container ja colapsava no conteudo. O gap de 46px vinha de
   DUAS fontes somadas para o mesmo espaco:
     wrapper 8048b76  padding-bottom: 6px   (post-263.css)
     widget  bbfb152  margin-top:    40px
   Zerar o padding deixa o margin-top como unica fonte, agora fluido
   dentro da faixa pedida: 30,72px em 768 -> 33,16 em 829 -> 40 em 1024.
   O espaco marca -> legais ja estava dentro do alvo (28-32px, vindo do
   proprio margin-top de 6b3b78d) e nao e tocado, para nao criar uma
   segunda fonte ali tambem.
   Largura da marca, curva responsiva, proporcao do SVG e altura da
   imagem permanecem exatamente como estao. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-location-footer .elementor-element.elementor-element-8048b76 {
		--padding-bottom: 0px;
		padding-bottom: 0 !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 {
		margin-top: clamp(28px, 4vw, 40px) !important;
	}
}

/* ---- Tablet (768-1024px): fonte unica para o espaco texto -> navegacao ----
   Mesmo padrao do bloco acima: dois lugares somando para o mesmo espaco.
   O wrapper 8048b76 e flex-direction:column com row-gap:20px — que vem
   de --row-gap, nao de --gap (esse ja esta em 0px) — e a navegacao
   carrega margin-top:32px. Medido: 20 + 32 = 52px entre o bottom do
   texto institucional e o top da navegacao, em 829 e 1024px.
   Sendo o container column, o row-gap so governa o eixo vertical: zera-lo
   nao toca o alinhamento nem o gap horizontal dos links, que continuam
   vindo do proprio --gap:50px de 989ecc3. A margin-top da navegacao fica
   como unica fonte, agora fluida dentro da faixa pedida. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-location-footer .elementor-element.elementor-element-8048b76 {
		--row-gap: 0px;
		row-gap: 0 !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-989ecc3 {
		margin-top: clamp(28px, 3.5vw, 36px) !important;
	}
}

/* ---- Tablet (768-1024px): assinatura na largura util inteira ----
   Substitui a curva anterior (clamp 560-680px, 74-81% da util) por
   ocupacao total: o widget vai a 100% do container e a imagem o
   preenche, entao as margens laterais visuais passam a ser exatamente o
   padding do proprio footer — o mesmo comportamento do Mobile aprovado,
   que ocupa 97,7%.
   A proporcao intrinseca 4,1459:1 e preservada (height:auto, sem scale,
   zoom, object-fit:fill ou height fixa), entao a altura cresce junto:
   +30,89px em 768 e +58,27px em 1024.
   O margin-top desce ao piso de 8px para absorver o maximo possivel
   desse crescimento — era clamp(28px, 4vw, 40px). Ainda assim a folga
   nao cobre tudo: sobra saldo positivo, maior nas viewports largas,
   porque o crescimento (31-58px) supera o gap disponivel (31-40px).
   O gap marca -> legais nao e tocado. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 {
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: auto !important;
		margin-top: 8px !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 .elementor-widget-container,
	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 a {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body .elementor-location-footer .elementor-element.elementor-element-bbfb152 img {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-inline: auto !important;
	}
}

/* ---- Navegacao do footer ate 1024px: escala continua ----
   Antes havia dois regimes desconexos: Mobile em clamp(12px..13px) com
   gap 16-28px, e Tablet em 16px flat com gap 50px — salto de 13->16px
   na fonte e 28->50px no gap ao cruzar 767/768.
   Uma curva unica agora atravessa toda a faixa. A fonte resolve 12,73px
   em 320 -> 13,20 em 420 -> 13,48 em 481 -> 14,63 em 728 -> 15,05 em
   820 -> 16,00 em 1024, com piso de 12,5px. O gap acompanha em 4vw,
   entre 16px e 44px: e ele que absorve o aperto nas telas estreitas,
   nunca a tipografia.
   Desktop (>=1025px) nao entra nesta query e segue com a propria curva.
   min-height, padding-inline, alinhamento e ordem dos links continuam
   vindo dos blocos anteriores — nada aqui os toca. */
@media (max-width: 1024px) {
	body .elementor-location-footer .supra-footer-nav {
		--gap: clamp(1rem, 4vw, 2.75rem);
		--column-gap: clamp(1rem, 4vw, 2.75rem);
		column-gap: clamp(1rem, 4vw, 2.75rem) !important;
	}

	body .elementor-location-footer .supra-footer-nav .e-heading-link-base {
		font-size: clamp(0.78125rem, calc(0.703125rem + 0.4636vw), 1rem) !important;
		line-height: 1.2 !important;
		letter-spacing: 0.01em !important;
	}

	/* Espelho da capsula: mesma metrica do link real, para o rotulo nunca
	   saltar caso a pilula seja acionada num desktop estreito. Isto NAO
	   reativa capsula nem mascara em touch — elas seguem anuladas pelo
	   bloco (hover:none) and (pointer:coarse). */
	body .elementor-location-footer .supra-footer-nav-mask-item {
		font-size: clamp(0.78125rem, calc(0.703125rem + 0.4636vw), 1rem) !important;
		line-height: 1.2 !important;
		letter-spacing: 0.01em !important;
	}
}

/* ---- Peso tipografico da navegacao ----
   A familia real e LOFT, e ela NAO tem 500 nem 600. Inventario dos
   @font-face carregados e dos arquivos em disco: Thin 100, Light 300,
   Regular 400, Bold 700, Black 900 — nada entre 400 e 700. Pedir 500 ou
   600 nao traria arquivo novo; com o font-synthesis:weight que estava
   ativo, o navegador fabricaria o peso a partir do Regular.
   Por isso o proximo peso REAL depois de 400 e 700 (Loft-Bold.woff2).
   font-synthesis:none garante que nenhum peso seja sintetizado: se o
   arquivo faltar, a fonte cai para o real mais proximo em vez de ser
   engordada artificialmente.
   A mascara da capsula recebe o mesmo peso para o rotulo nao mudar de
   largura durante o hover no desktop. */
body .elementor-location-footer .supra-footer-nav .e-heading-link-base,
body .elementor-location-footer .supra-footer-nav-mask-item {
	font-weight: 700 !important;
	font-synthesis: none;
}