/*
 * Mix Ingredientes — entrada do Tailwind (v3).
 *
 * Compilado para assets/css/theme.css via `npm run build:css`. Este é o arquivo-fonte;
 * NÃO edite theme.css à mão (é sobrescrito pelo build).
 *
 * Estrutura:
 *   1. @font-face das fontes da marca (auto-hospedadas em assets/fonts)
 *   2. Camada base — defaults tipográficos
 *   3. Componentes — um bloco por seção da Home (ordem do Figma "Home - Desktop")
 */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
 ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: Zain, Inter, Arial, system-ui, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(fonts/caprasimo-400-latin.245df631.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
  @font-face { font-family: 'Caprasimo'; font-style: normal; font-weight: 400; font-display: swap;
    src: url(fonts/caprasimo-400-latin-ext.f80a0fe2.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

  @font-face { font-family: 'Zain'; font-style: normal; font-weight: 200; font-display: swap; src: url(fonts/zain-200-latin.01853e75.woff2) format('woff2'); }
  @font-face { font-family: 'Zain'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/zain-300-latin.e1940691.woff2) format('woff2'); }
  @font-face { font-family: 'Zain'; font-style: italic; font-weight: 300; font-display: swap; src: url(fonts/zain-300-italic-latin.3d799130.woff2) format('woff2'); }
  @font-face { font-family: 'Zain'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/zain-400-latin.6647bd6c.woff2) format('woff2'); }
  @font-face { font-family: 'Zain'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/zain-400-italic-latin.5a8ebaf1.woff2) format('woff2'); }
  @font-face { font-family: 'Zain'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/zain-700-latin.aa0b7702.woff2) format('woff2'); }
  @font-face { font-family: 'Zain'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/zain-800-latin.ffba4aca.woff2) format('woff2'); }
  @font-face { font-family: 'Zain'; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/zain-900-latin.48f9fa20.woff2) format('woff2'); }
  body {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  h1, h2, h3, h4 {
  font-family: Caprasimo, Georgia, serif;
  font-weight: 400;
}

  a {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

  /*
   * Permite interpolar de 0 até `auto` — pré-requisito para animar a abertura de <details>
   * sem medir altura no JS. Ignorado por browsers que não suportam.
   */
  :root { interpolate-size: allow-keywords; }

  /* Some o outline padrão só quando o foco não vem do teclado. */
  :focus-visible {
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #E50A4B;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}

  /* --- Abertura animada de <details> (todo o projeto) ------------------ *
   * Dois caminhos, nunca os dois ao mesmo tempo:
   *   1. Browsers com `::details-content` + `interpolate-size` animam só com CSS (abaixo).
   *   2. Os demais recebem a animação por Web Animations API em assets/js/theme.js, que só
   *      roda quando o suporte do caminho 1 não existe.
   * -------------------------------------------------------------------- */

  /*
   * Longhands de propósito: o minificador reordena o shorthand `transition` e o
   * `allow-discrete` acabava fora de posição, perdendo a animação do content-visibility.
   */
  details::details-content {
    block-size: 0;
    overflow: hidden;
    transition-property: block-size, content-visibility;
    transition-duration: 280ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-behavior: allow-discrete;
  }
  details[open]::details-content { block-size: auto; }

  /* `.is-fechando` é posto pelo JS durante o recolhimento: o indicador vira já no início
     da animação, em vez de esperar o `open` cair no fim. */
  details.is-fechando::details-content { block-size: 0; }

  @media (prefers-reduced-motion: reduce) {
    details::details-content { transition-duration: 0s; }
  }

  /*
   * O layout "flow" do core injeta `margin-block-start: 24px` em todo filho a partir do
   * segundo (regra com `:where()`, especificidade zero). As seções da Home espaçam por `gap`
   * das utilitárias, então esse acúmulo desmontaria o desenho.
   *
   * Este bloco fica **no início** da camada de componentes de propósito: `margin-block-start`
   * e `margin-top` disputam o mesmo slot na cascata, e a especificidade aqui é a mesma de um
   * seletor de classe. Vindo antes, o reset ganha da regra do core (especificidade zero) mas
   * perde para as margens próprias do tema declaradas depois — `.mix-pilares { mt-8 }`,
   * `.mix-stats { mt-10 }`, `.mix-intencoes__grid { mt-12 }` continuam valendo.
   * `margin-inline` fica de fora para não matar o `mx-auto` do .mix-shell.
   */
  :is(
    .mix-hero,
    .mix-intencoes,
    .mix-portfolio,
    .mix-conteudos,
    .mix-produtos-foco,
    .mix-localizador-section,
    .mix-newsletter-section,
    .mix-contato-section
  ) :where( .is-layout-flow ) > * {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  /* --- Utilitários de layout e tipografia compartilhados --------------- */

  .mix-shell {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

  @media (min-width: 640px) {

  .mix-shell {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
  .mix-main {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
  @media (min-width: 640px) {

  .mix-main {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

  main > *:first-child {
  margin-top: 0px;
  padding-top: 0px;
}

  /* Seção da Home: respiro vertical padrão do design. */
  .mix-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
  @media (min-width: 768px) {

  .mix-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

  /*
   * Eyebrow "— TEXTO —": as réguas de 24px são pseudo-elementos, então o markup fica
   * apenas com o texto. Centraliza-se com .mix-eyebrow--center.
   */
  .mix-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  line-height: 1.03125rem;
  letter-spacing: 0.1513em;
  font-weight: 400;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-eyebrow::before,
  .mix-eyebrow::after {
    content: '';
    display: block;
    height: 1px;
    width: 1.5rem;
    flex-shrink: 0;
    background-color: currentColor;
  }
  .mix-eyebrow--center {
  justify-content: center;
}
  .mix-eyebrow--light {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-eyebrow--ink {
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
}
  /* Variante sem régua à direita (usada nos títulos alinhados à esquerda do mega menu). */
  .mix-eyebrow--start::after { content: none; }

  .mix-section-title {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-section-title--light {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-section-title--center {
  text-align: center;
}
  .mix-sec-head__titles--center {
  align-items: center;
  text-align: center;
}

  /* Rótulo solto (sem as réguas do eyebrow) — abertura da Sobre: "+100 ANOS". */
  .mix-label {
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /* Link "Ver todos os conteúdos →" */
  .mix-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  .mix-link-arrow:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}
  .mix-link-arrow::after { content: '→'; font-weight: 400; text-decoration-line: none; }

  /* Pills de família/aplicação dentro dos cards de intenção. */
  .mix-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  letter-spacing: 0.0417em;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(150 159 168 / var(--tw-text-opacity, 1));
}

  /* Botões pílula. */
  .mix-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-btn--coral {
  --tw-bg-opacity: 1;
  background-color: rgb(234 98 98 / var(--tw-bg-opacity, 1));
}
  .mix-btn--coral:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(188 67 50 / var(--tw-bg-opacity, 1));
}
  .mix-btn--clay {
  --tw-bg-opacity: 1;
  background-color: rgb(188 67 50 / var(--tw-bg-opacity, 1));
  font-weight: 400;
}
  .mix-btn--clay:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(182 64 46 / var(--tw-bg-opacity, 1));
}
  .mix-btn--clay-dk {
  --tw-bg-opacity: 1;
  background-color: rgb(182 64 46 / var(--tw-bg-opacity, 1));
  font-weight: 400;
}
  .mix-btn--clay-dk:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(188 67 50 / var(--tw-bg-opacity, 1));
}
  .mix-btn--brand {
  --tw-bg-opacity: 1;
  background-color: rgb(229 10 75 / var(--tw-bg-opacity, 1));
}
  .mix-btn--brand:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(188 67 50 / var(--tw-bg-opacity, 1));
}
  .mix-btn--block {
  width: 100%;
}

  /* Botão circular com seta (canto dos cards de intenção e do hero). */
  .mix-round-btn {
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(234 98 98 / var(--tw-bg-opacity, 1));
  font-size: 1.125rem;
  line-height: 1.75rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-round-btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(188 67 50 / var(--tw-bg-opacity, 1));
}
  .mix-round-btn--sm {
  height: 2.25rem;
  width: 2.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(231 106 76 / var(--tw-bg-opacity, 1));
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  /* Divisória tracejada usada nos cards da faixa coral e de conteúdo. */
  .mix-dashed {
  border-top-width: 1px;
  border-style: dashed;
  border-color: rgb(255 255 255 / 0.7);
  padding-top: 0.75rem;
}
  .mix-dashed--ink {
  border-top-width: 1px;
  border-style: dashed;
  border-color: rgb(55 65 81 / 0.5);
  padding-top: 0.5rem;
}

  /* --- Cabeçalho ------------------------------------------------------- */

  .mix-header {
  position: relative;
  z-index: 30;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

  /* Barra utilitária magenta: "ACESSE TAMBÉM" + logos das marcas. */
  .mix-topbar {
  --tw-bg-opacity: 1;
  background-color: rgb(229 10 75 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-topbar__inner {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  row-gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  @media (min-width: 640px) {

  .mix-topbar__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
  .mix-topbar__label {
  font-size: 0.5625rem;
  text-transform: uppercase;
  line-height: 16.5px;
  letter-spacing: 0.1513em;
}
  @media (min-width: 640px) {

  .mix-topbar__label {
    font-size: 0.6875rem;
    line-height: 1.03125rem;
    letter-spacing: 0.1513em;
  }
}
  .mix-topbar__logo {
  display: block;
  width: auto;
  opacity: 0.95;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-topbar__logo:hover {
  opacity: 1;
}

  /* Faixa da navegação — no desktop vira uma pílula flutuante. */
  .mix-navbar {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}
  @media (min-width: 640px) {

  .mix-navbar {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
  @media (min-width: 1024px) {

  .mix-navbar {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
  .mix-nav-pill {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 80rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
  @media (min-width: 1024px) {

  .mix-nav-pill {
    height: 71px;
    gap: 13px;
    border-radius: 30px;
    --tw-bg-opacity: 1;
    background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

  .mix-brand {
  display: flex;
  flex-shrink: 0;
  align-items: flex-end;
}
  .mix-brand img {
  display: block;
  height: 41px;
  width: auto;
}

  /*
   * Links da navegação (bloco wp:navigation estilizado).
   * Duplicamos a classe do bloco no seletor porque o CSS do core define
   * `.wp-block-navigation { display: flex }` e ele carrega depois do tema.
   */
  .mix-nav,
  .wp-block-navigation.mix-nav {
  display: none;
}
  @media (min-width: 1024px) {

  .mix-nav,
  .wp-block-navigation.mix-nav {
    margin-top: 0px;
    display: flex;
  }
}
  .mix-nav .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 0px;
}
  .mix-nav .wp-block-navigation-item__content {
  border-bottom-width: 2px;
  border-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-nav .wp-block-navigation-item__content:hover,
  .mix-nav .current-menu-item > .wp-block-navigation-item__content {
  --tw-border-opacity: 1;
  border-color: rgb(229 10 75 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}
  /* "Produtos ▾" abre o mega menu — a seta é decorativa (o estado real vai em aria-expanded). */
  .mix-nav-produtos .wp-block-navigation-item__content::after {
    /* content: '▾'; */
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%2710%27 viewBox=%270 0 10 10%27 fill=%27none%27%3E%3Cpath d=%27M4.5 5.1L4.05 4.65C3.95833 4.55833 3.84167 4.5125 3.7 4.5125C3.55833 4.5125 3.44167 4.55833 3.35 4.65C3.25833 4.74167 3.2125 4.85833 3.2125 5C3.2125 5.14167 3.25833 5.25833 3.35 5.35L4.65 6.65C4.75 6.75 4.86667 6.8 5 6.8C5.13333 6.8 5.25 6.75 5.35 6.65L6.65 5.35C6.74167 5.25833 6.7875 5.14167 6.7875 5C6.7875 4.85833 6.74167 4.74167 6.65 4.65C6.55833 4.55833 6.44167 4.5125 6.3 4.5125C6.15833 4.5125 6.04167 4.55833 5.95 4.65L5.5 5.1V3.5C5.5 3.35833 5.452 3.23967 5.356 3.144C5.26 3.04833 5.14133 3.00033 5 3C4.85867 2.99967 4.74 3.04767 4.644 3.144C4.548 3.24033 4.5 3.359 4.5 3.5V5.1ZM5 10C4.30833 10 3.65833 9.86867 3.05 9.606C2.44167 9.34333 1.9125 8.98717 1.4625 8.5375C1.0125 8.08783 0.656334 7.55867 0.394001 6.95C0.131667 6.34133 0.000333966 5.69133 6.32911e-07 5C-0.0003327 4.30867 0.131001 3.65867 0.394001 3.05C0.657001 2.44133 1.01317 1.91217 1.4625 1.4625C1.91183 1.01283 2.441 0.656667 3.05 0.394C3.659 0.131333 4.309 0 5 0C5.691 0 6.341 0.131333 6.95 0.394C7.559 0.656667 8.08817 1.01283 8.5375 1.4625C8.98683 1.91217 9.34317 2.44133 9.6065 3.05C9.86983 3.65867 10.001 4.30867 10 5C9.999 5.69133 9.86767 6.34133 9.606 6.95C9.34433 7.55867 8.98817 8.08783 8.5375 8.5375C8.08683 8.98717 7.55767 9.3435 6.95 9.6065C6.34233 9.8695 5.69233 10.0007 5 10Z%27 fill=%27%23919191%27/%3E%3C/svg%3E");
    right: 0px;
    margin-left: 0.25rem;
    display: inline-block;
    height: 10px;
    width: 10px;
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    font-size: 0.75em;
  }

  /* Campo de busca dentro da pílula. */
  @media (min-width: 1024px) {

  .wp-block-group:has(.mix-search),
  .wp-block-group:has(.mix-lang) {
    margin-top: 0px;
  }
}
  .mix-search {
  display: flex;
  max-width: 576px;
  flex-grow: 1;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(211 211 211 / var(--tw-bg-opacity, 1));
  padding-right: 0.625rem;
}
  .mix-search input[type='search'] {
  height: 2.5rem;
  min-width: 0px;
  flex-grow: 1;
  border-width: 0px;
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-search input[type='search']::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-search input[type='search']::placeholder {
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-search input[type='search']:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
  .mix-search button {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
}
  .mix-search--mobile {
  margin-left: auto;
  margin-right: auto;
  height: 1.5rem;
  max-width: none;
}
  .mix-search--mobile input[type='search'] {
  height: 1.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
  .mix-search--mobile button {
  height: 18px;
  width: 18px;
}

  /* Alternador PT-BR / ES. */
  .mix-lang {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  border-radius: 10px;
}
  .mix-lang a,
  .mix-lang span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  line-height: 1.5rem;
  letter-spacing: 0.1238em;
  text-decoration-line: none;
}
  @media (min-width: 1024px) {

  .mix-lang a,
  .mix-lang span {
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}
  .mix-lang > :first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
  .mix-lang > :last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
  .mix-lang .is-current {
  --tw-bg-opacity: 1;
  background-color: rgb(229 10 75 / var(--tw-bg-opacity, 1));
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-lang :not(.is-current) {
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(229 10 75 / var(--tw-border-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}

  /* Botão hamburguer (mobile) e botão de fechar do painel. */
  .mix-burger {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  @media not all and (min-width: 1024px) {

  .mix-burger {
    margin-top: 0px;
  }
}
  @media (min-width: 1024px) {

  .mix-burger {
    display: none;
  }
}
  .mix-burger img {
  height: 1rem;
  width: 1rem;
}

  /* --- Mega menu / menu mobile aberto ("Header - Menu - Opened") -------- */

  .mix-megamenu {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 100%;
  z-index: 40;
  display: none;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 8px 0 rgba(0, 0, 0, 0.08);
  --tw-shadow-colored: 0 8px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
}
  .mix-megamenu.is-open {
  display: block;
}
  .mix-megamenu__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 80rem;
  padding: 1.5rem;
}
  .mix-megamenu__bar {
  display: flex;
  height: 54px;
  align-items: center;
  justify-content: space-between;
}
  .mix-megamenu__close {
  display: inline-flex;
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-width: 0px;
  background-color: transparent;
  padding: 0px;
}
  .mix-megamenu__close img {
  height: 1.5rem;
  width: 1.5rem;
}

  .mix-megamenu__label {
  display: inline-flex;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-megamenu__grid {
  display: grid;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 1.5rem;
}
  @media (min-width: 1024px) {

  .mix-megamenu__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

  /* Coluna de categorias — lista com seta e realce no hover. */
  .mix-megamenu__cats {
  display: flex;
  flex-direction: column;
}
  .mix-megamenu__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-left-width: 2px;
  border-color: transparent;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 0.875rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-megamenu__cat:hover {
  --tw-border-opacity: 1;
  border-color: rgb(229 10 75 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}
  .mix-megamenu__cat img {
  height: auto;
  width: 0.75rem;
  flex-shrink: 0;
  opacity: 0.6;
}

  /* Grade 2×3 de intenções de uso. */
  .mix-megamenu__intencoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
  .mix-megamenu__intencao {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-radius: 15px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 1rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-megamenu__intencao:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  .mix-megamenu__intencao strong {
  font-family: Caprasimo, Georgia, serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
}
  .mix-megamenu__intencao span {
  font-size: 13px;
  line-height: 14px;
  opacity: 0.6;
}

  /* Card de destaque do painel. */
  .mix-megamenu__destaque {
  display: block;
  overflow: hidden;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 9px 11px 9.5px rgba(0, 0, 0, 0.19);
  --tw-shadow-colored: 9px 11px 9.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  /* O padding evita que packshots altos (frascos, sachês) encostem nas bordas do painel. */
  .mix-megamenu__destaque figure {
  margin: 0px;
  display: flex;
  height: 10rem;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(254 190 191 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}
  .mix-megamenu__destaque img {
  max-height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
  .mix-megamenu__destaque-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
  .mix-megamenu__destaque-badge {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(232 96 96 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 15px;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-megamenu__destaque h3 {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-megamenu__destaque-peso {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
  .mix-megamenu__destaque em {
  padding-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-transform: uppercase;
  font-style: normal;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}

  /* --- 1. Hero --------------------------------------------------------- */

  .mix-hero {
  position: relative;
}
  /*
   * O track é o elemento do Swiper (`.swiper`): `overflow-hidden` do CSS do Swiper é o que
   * mantém um slide por vez, inclusive antes do JS subir — sem script, os slides ficam lado a
   * lado no `.swiper-wrapper` e só o primeiro aparece.
   */
  .mix-hero__track {
  position: relative;
}

  /*
   * Mobile (Home - Mobile 97:9136): texto → painel → CTA, tudo centralizado.
   * Desktop (338:842): painel à esquerda, coluna de texto (com o CTA) à direita.
   * `display: contents` no .mix-hero__content solta os filhos no flex do slide, o que permite
   * intercalar o painel entre o texto e o CTA sem duplicar o link no HTML.
   */
  .mix-hero__slide.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}
  @media (min-width: 1024px) {

  .mix-hero__slide.swiper-slide {
    display: grid;
    grid-template-columns: 735fr 545fr;
    align-items: center;
    gap: 2.5rem;
    text-align: left;
  }
}

  /* Painel colorido com os packshots. */
  .mix-hero__panel {
  position: relative;
  display: flex;
  min-height: 320px;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 30px;
}
  @media (min-width: 1024px) {

  .mix-hero__panel {
    min-height: 660px;
  }
}
  .mix-hero__panel {
    order: 2;
  }
  .mix-hero__panel img {
  max-height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
  .mix-hero__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}

  .mix-hero__content {
  display: contents;
}

  @media (min-width: 1024px) {

  .mix-hero__content {
    display: flex;
    max-width: 36rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
  .mix-hero__content > * { order: 1; }
  .mix-hero__content > .mix-btn { order: 3; }
  @media (min-width: 1024px) {
    .mix-hero__panel,
    .mix-hero__content > *,
    .mix-hero__content > .mix-btn { order: 0; }
  }
  .mix-hero__title {
  font-family: Caprasimo, Georgia, serif;
  font-size: 2rem;
  line-height: 1.06;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-hero__title {
    font-size: 3rem;
    line-height: 3.1875rem;
  }
}
  .mix-hero__text {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-hero__text {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

  /*
   * Indicadores do carrossel, sobre o painel.
   *
   * Um só container por hero (o Swiper preenche via `renderBullet`), posicionado em relação ao
   * track. No desktop ele é limitado à largura da coluna do painel — no Figma os pontos ficam
   * centralizados no painel colorido, não no meio da seção.
   */
  .mix-hero__dots {
  position: absolute;
  bottom: 1.25rem;
  left: 0px;
  right: 0px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
  @media (min-width: 1024px) {
    .mix-hero__dots {
    right: auto;
    width: 57.4%;
  }
  }
  .mix-hero__dot {
  height: 0.625rem;
  width: 0.625rem;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 0px;
  background-color: rgb(255 255 255 / 0.6);
  padding: 0px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-hero__dot.is-current {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

  /* Setas laterais (só no desktop, onde há espaço). */
  .mix-hero__nav {
  position: absolute;
  top: 50%;
  right: 0px;
  z-index: 10;
  display: none;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  @media (min-width: 1024px) {

  .mix-hero__nav {
    display: flex;
  }
}

  /* --- 2. Intenções de uso --------------------------------------------- */

  .mix-intencoes__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
  .mix-intencoes__sub {
  font-size: 1.25rem;
  line-height: 1.875rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /*
   * Mosaico do Figma: 6 cards em 12 colunas — dois "largos" (6 col) e quatro estreitos (3 col).
   * Abaixo de lg volta a uma coluna simples (Home - Mobile).
   */
  .mix-intencoes__grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
  @media (min-width: 640px) {

  .mix-intencoes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  @media (min-width: 1024px) {

  .mix-intencoes__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 30px;
  }
}
  /* `flex` (e não só col-span) para que o card estique até a altura da linha do grid. */
  .mix-intencao {
  display: flex;
}
  @media (min-width: 1024px) {

  .mix-intencao {
    grid-column: span 3 / span 3;
  }
}
  @media (min-width: 640px) {

  .mix-intencao--wide {
    grid-column: span 2 / span 2;
  }
}
  @media (min-width: 1024px) {

  .mix-intencao--wide {
    grid-column: span 6 / span 6;
  }
}

  .mix-intencao-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-intencao-card:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  .mix-intencao-card__media {
  display: flex;
  height: 16rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
  .mix-intencao-card__media img {
  max-height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
  .mix-intencao-card__body {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1.25rem;
}
  .mix-intencao-card__title {
  font-family: Caprasimo, Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6875rem;
}
  .mix-intencao-card--wide .mix-intencao-card__title {
  font-size: 1.5rem;
  line-height: 2rem;
}
  .mix-intencao-card__text {
  padding-right: 2.75rem;
  font-size: 1rem;
  line-height: 1.25rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(58 55 81 / var(--tw-text-opacity, 1));
}
  .mix-intencao-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding-right: 3rem;
}
  .mix-intencao-card__go {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

  /* --- 3. Portfólio / Marca-Mãe (faixa coral) --------------------------- */

  .mix-portfolio {
  --tw-bg-opacity: 1;
  background-color: rgb(234 98 98 / var(--tw-bg-opacity, 1));
  padding-top: 3rem;
  padding-bottom: 3rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  @media (min-width: 768px) {

  .mix-portfolio {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
  .mix-portfolio a {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  .mix-marcamae {
  margin-top: 1.5rem;
  display: grid;
  gap: 1.5rem;
}

  @media (min-width: 1024px) {

  .mix-marcamae {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}
  .mix-marcamae__media {
  display: flex;
  min-height: 240px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 30px;
  background-color: rgb(255 255 255 / 0.1);
}
  .mix-marcamae__media img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
  .mix-marcamae__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0px;
}
  @media (min-width: 1024px) {

  .mix-marcamae__body {
    padding: 2rem;
  }
}
  .mix-marcamae__title {
  font-family: Caprasimo, Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.875rem;
}
  .mix-marcamae__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

  .mix-stat__value {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.875rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.875rem;
}
  .mix-stat__label {
  font-size: 0.75rem;
  line-height: 0.9375rem;
  text-transform: uppercase;
  line-height: 16.5px;
  letter-spacing: 0.0344em;
}

  /* Três pilares de marca. */
  .mix-pilares {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: grid;
  gap: 1rem;
}
  @media (min-width: 768px) {

  .mix-pilares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
  .mix-pilar {
  display: flex;
  flex-direction: column;
}
  .mix-pilar__logo {
  display: flex;
  height: 176px;
  align-items: center;
  justify-content: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
  @media (min-width: 768px) {

  .mix-pilar__logo {
    justify-content: flex-start;
  }
}
  /* Limita altura E largura: as três logos têm proporções bem diferentes (Selecta é 3,9:1). */
  .mix-pilar__logo img {
  max-height: 84px;
  width: auto;
  max-width: 180px;
  -o-object-fit: contain;
     object-fit: contain;
}
  .mix-pilar__body {
  margin-top: 0px;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  text-align: center;
}
  @media (min-width: 768px) {

  .mix-pilar__body {
    text-align: left;
  }
}
  .mix-pilar__title {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  font-weight: 400;
}
  .mix-pilar__text {
  min-height: 6rem;
  font-size: 1rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-pilar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
  @media (min-width: 768px) {

  .mix-pilar__foot {
    align-items: flex-start;
  }
}
  .mix-pilar__stat {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

  /* Faixa de estatísticas pêssego. */
  .mix-stats {
  position: relative;
  z-index: 10;
  margin-top: 2.5rem;
  display: grid;
  gap: 1.5rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 170 138 / var(--tw-bg-opacity, 1));
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  @media (min-width: 768px) {

  .mix-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

  /*
   * A faixa "vaza" para fora do bloco coral: desce além da borda inferior de .mix-portfolio e
   * se sobrepõe à seção seguinte, como se tivesse um `bottom` negativo.
   *
   * É `margin-bottom` negativa, e não `top`: assim a borda inferior do coral sobe junto e não
   * sobra um vão de coral vazio no lugar de onde a faixa saiu. O `z-10` acima garante que ela
   * fique por cima do conteúdo da seção seguinte.
   *
   * O seletor é longo de propósito. O global-styles do WordPress declara
   * `:root :where(.is-layout-flow) > :last-child { margin-block-end: 0 }` — especificidade
   * (0,2,0) — e a faixa é o último filho do .mix-shell; um `.mix-stats` sozinho (0,1,0) perde
   * essa disputa e a margem simplesmente não aparece.
   *
   * A conta é `-(padding-bottom de .mix-portfolio) - (vazamento)`: se o `py-12 md:py-16` da
   * faixa coral mudar, ajuste aqui também. No mobile o vazamento é menor porque há menos
   * folga até o texto da seção seguinte.
   */
  .mix-portfolio .mix-shell > .mix-stats {
    --mix-stats-vazamento: 1.5rem;
    margin-bottom: calc(-1 * (3rem + var(--mix-stats-vazamento)));
  }
  @media (min-width: 768px) {
    .mix-portfolio .mix-shell > .mix-stats {
      --mix-stats-vazamento: 3.5rem;
      margin-bottom: calc(-1 * (4rem + var(--mix-stats-vazamento)));
    }
  }
  .mix-stats__value {
  font-family: Caprasimo, Georgia, serif;
  font-size: 2.5rem;
  line-height: 0.94875;
}
  .mix-stats__label {
  margin-top: 0.5rem;
  display: block;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

  /* --- 4. Conteúdo técnico (Docepedia) --------------------------------- */

  /*
   * Respiro extra no topo a partir de md: a faixa de estatísticas vaza 3.5rem do bloco coral
   * para cima desta seção (ver `.mix-portfolio .mix-shell > .mix-stats`), então o `pt` do
   * .mix-section padrão (3.5rem) deixaria o eyebrow colado na faixa. 6.5rem devolve a folga.
   * No mobile o vazamento é menor e o padrão de .mix-section basta.
   */
  @media (min-width: 768px) {
    .mix-conteudos {
    padding-top: 6.5rem;
  }
  }

  .mix-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
  .mix-sec-head__titles {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

  .mix-carousel-nav {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

  .mix-carousel-row {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
  .mix-carousel-row::-webkit-scrollbar { display: none; }
  .mix-carousel-row > * {
  width: 300px;
  flex-shrink: 0;
    scroll-snap-align: start;
}

  .mix-conteudo-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  --tw-shadow: 9px 11px 9.5px rgba(0, 0, 0, 0.19);
  --tw-shadow-colored: 9px 11px 9.5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .mix-conteudo-card__media {
  display: flex;
  height: 11rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(245 244 239 / var(--tw-bg-opacity, 1));
}
  .mix-conteudo-card__media img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
  .mix-conteudo-card__body {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
  .mix-conteudo-card__badge {
  display: inline-flex;
  align-self: flex-start;
  border-radius: 9999px;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 10px;
  text-transform: uppercase;
  line-height: 15px;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  /* Cor explícita: dentro de um <a> o h3 herdaria a cor de link global do theme.json. */
  .mix-conteudo-card__title {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  line-height: 22px;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
}
  .mix-conteudo-card__date {
  font-size: 0.75rem;
  line-height: 0.9375rem;
  letter-spacing: 0.0417em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
  opacity: 0.5;
}
  .mix-conteudo-card__text {
  font-size: 0.875rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
  opacity: 0.7;
}
  .mix-conteudo-card__more {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}

  /* --- 5. Produtos em foco --------------------------------------------- */

  .mix-produtos-grid {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
}

  @media (min-width: 640px) {

  .mix-produtos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

  @media (min-width: 1024px) {

  .mix-produtos-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    -moz-column-gap: 67px;
         column-gap: 67px;
  }
}

  /*
   * .mix-card é o card de produto compartilhado (catálogo, busca, relacionados e Home).
   * Mantém o nome antigo para não quebrar archive-produto.php / ajax-filtros.php.
   */
  .mix-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-card:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  /* `relative` ancora o selo "+N Variações", posicionado sobre a mídia. */
  .mix-card__media {
  position: relative;
  display: flex;
  height: 235px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
  .mix-card__media img {
  max-height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

  /* Selo tracejado no canto superior direito da mídia. */
  .mix-card__variacoes {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  border-radius: 9999px;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(234 98 98 / var(--tw-border-opacity, 1));
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  letter-spacing: 0.0417em;
  font-weight: 400;
  text-transform: none;
  --tw-text-opacity: 1;
  color: rgb(88 88 87 / var(--tw-text-opacity, 1));
}

  /*
   * Régua de amostras de cor da família, entre a mídia e o corpo. `flex-wrap` porque o número
   * de cores é dado do catálogo, não do design — sem ele uma família grande estouraria o card.
   */
  .mix-card__cores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
  .mix-card__cor {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  border-radius: 3px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(245 244 239 / var(--tw-border-opacity, 1));
}
  .mix-card__cores-mais {
  margin-left: 0.25rem;
  font-size: 10px;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}

  .mix-card__body {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  padding: 1rem;
}
  .mix-card__linha {
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-self: flex-start;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(232 96 96 / var(--tw-bg-opacity, 1));
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  letter-spacing: 0.0417em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(245 244 239 / var(--tw-text-opacity, 1));
}
  /* Cor explícita no link: dentro do card o <a> herdaria a cor de link global do theme.json. */
  .mix-card__title {
  margin-bottom: 0.5rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-card__title a {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
  .mix-card__title a:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}
  .mix-card__peso {
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
  .mix-card__more {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
  .mix-card__more:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}

  /* --- Catálogo (archive-produto.php) ----------------------------------- *
   * Figma V2 — "Products - List - Desktop" (97:5973).
   * -------------------------------------------------------------------- */

  .mix-catalogo {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

  @media (min-width: 768px) {

  .mix-catalogo {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
  /* Mobile (624:571) centraliza eyebrow + título; a partir de lg volta ao par título/ordenação. */
  .mix-catalogo__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  text-align: center;
}
  @media (min-width: 1024px) {

  .mix-catalogo__head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
  }
}
  .mix-catalogo__head .mix-eyebrow {
  justify-content: center;
}
  @media (min-width: 1024px) {

  .mix-catalogo__head .mix-eyebrow {
    justify-content: flex-start;
  }
}
  .mix-catalogo__corpo {
  display: grid;
  gap: 1.5rem;
}
  @media (min-width: 1024px) {

  .mix-catalogo__corpo {
    grid-template-columns: 290px minmax(0,1fr);
  }
}

  /* Coluna de filtros. */
  .mix-filtros {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

  /*
   * Botão "Filtros" do mobile: é o <summary> do <details> que embrulha a coluna. Some a partir
   * de lg, onde os painéis voltam a ficar sempre visíveis na coluna lateral.
   */
  .mix-filtros-wrap > .mix-filtros {
  margin-top: 1rem;
}
  @media (min-width: 1024px) {

  .mix-filtros-wrap > .mix-filtros {
    margin-top: 0px;
  }
}
  .mix-filtros-toggle {
  display: flex;
  height: 2.75rem;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(88 88 87 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-filtros-toggle {
    display: none;
  }
}
  .mix-filtros-toggle::-webkit-details-marker { display: none; }
  .mix-filtros-toggle img {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

  .mix-filtro {
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
}
  .mix-filtro__titulo {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-filtro__titulo::-webkit-details-marker { display: none; }
  /* Aberto aponta para baixo (estado do design); fechado inverte a seta. */
  .mix-filtro__seta {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-filtro:not([open]) .mix-filtro__seta,
  .mix-filtro.is-fechando .mix-filtro__seta {
  --tw-scale-y: -1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  .mix-filtro__opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  padding-top: 0px;
}

  .mix-filtro__opcao {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem;
}
  .mix-filtro__opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
  /* Bolinha de 12px: branca quando desmarcada, cinza sólida quando ativa. */
  .mix-filtro__marcador {
  display: block;
  height: 0.75rem;
  width: 0.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-filtro__opcao input:checked ~ .mix-filtro__marcador {
  --tw-bg-opacity: 1;
  background-color: rgb(116 116 116 / var(--tw-bg-opacity, 1));
}
  .mix-filtro__opcao input:focus-visible ~ .mix-filtro__marcador {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #E50A4B;
}
  .mix-filtro__nome {
  flex-grow: 1;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-filtro__count {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 14.29px;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}

  .mix-limpar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(194 194 194 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(88 88 87 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-limpar:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(116 116 116 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  /* Coluna de resultados. */
  /* No mobile o frame mostra a contagem como texto solto; a pílula cinza só existe em lg. */
  .mix-resultados-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-resultados-bar {
    border-radius: 30px;
    --tw-bg-opacity: 1;
    background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
  }
}
  /* A ordenação não aparece no frame mobile — some abaixo de lg. */
  .mix-ordenar {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-ordenar {
    display: flex;
  }
}
  .mix-ordenar select {
  border-radius: 9999px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-ordenar select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 10 75 / var(--tw-ring-opacity, 1));
}

  .mix-catalogo-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  row-gap: 1.5rem;
}

  @media (min-width: 640px) {

  .mix-catalogo-grid {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    row-gap: 2rem;
  }
}

  @media (min-width: 1280px) {

  .mix-catalogo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
  .mix-vazio {
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}

  /* --- Resultado da busca (search.php) --------------------------------- *
   * Figma V2 — "Search Results - Desktop" (809:5208) e "- Mobile" (809:5064).
   * Mesma grade do catálogo, mas sem coluna de filtros: cabe uma coluna a mais no xl.
   * -------------------------------------------------------------------- */

  .mix-busca {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

  @media (min-width: 768px) {

  .mix-busca {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
  .mix-busca__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
}

  /*
   * Pílula de contagem: ao contrário da barra do catálogo (.mix-resultados-bar), aqui ela
   * existe em todas as larguras — o frame mobile também a desenha. Os números vêm em
   * <strong> dentro da frase montada por mix_busca_label_resultados().
   */
  .mix-busca-bar {
  width: 100%;
  max-width: 48rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-busca-bar strong {
  font-weight: 900;
}

  .mix-busca-grupo {
  margin-top: 2.5rem;
}
  .mix-busca-grupo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.25rem;
}
  /* O rótulo do grupo é o eyebrow sem as réguas e sem o tracking largo. */
  .mix-busca-grupo__count {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 16.5px;
  letter-spacing: 0em;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-busca-grupo .mix-catalogo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
  @media (min-width: 1280px) {

  .mix-busca-grupo .mix-catalogo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

  .mix-busca__form {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  max-width: 36rem;
}

  /* --- Sobre a Mix (templates/page-sobre.html) -------------------------- *
   * Figma V2 — "About - Desktop" (97:8234) e "About - Mobile" (637:1389).
   * -------------------------------------------------------------------- */

  /* Abertura: texto + foto lado a lado no desktop, empilhados e centrados no mobile. */
  .mix-sobre-hero__grid {
  display: grid;
  align-items: center;
  gap: 2rem;
  text-align: center;
}
  @media (min-width: 1024px) {

  .mix-sobre-hero__grid {
    grid-template-columns: minmax(0,7fr) minmax(0,9fr);
    gap: 3rem;
    text-align: left;
  }
}
  .mix-sobre-hero__texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
  @media (min-width: 1024px) {

  .mix-sobre-hero__texto {
    align-items: flex-start;
  }
}
  /* Caprasimo 30/30 — o único título em display fora da Home. */
  .mix-sobre-hero__titulo {
  font-family: Caprasimo, Georgia, serif;
  font-size: 1.875rem;
  line-height: 1.875rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-sobre-hero__titulo {
    max-width: 20ch;
  }
}
  .mix-sobre-hero__resumo {
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-sobre-hero__media {
  margin: 0px;
  overflow: hidden;
  border-radius: 30px;
}
  .mix-sobre-hero__media img {
  display: block;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

  /* Faixa pêssego de números. */
  .mix-numeros {
  margin: 0px;
  display: flex;
  width: 100%;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 170 138 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
  @media (min-width: 1024px) {

  .mix-numeros {
    width: auto;
    justify-content: flex-start;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}
  .mix-numeros__item {
  margin-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}
  .mix-numeros__valor {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-numeros__rotulo {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  opacity: 0.7;
}

  /*
   * Linha do tempo — baralho de cartões.
   * Base (sem JS): grade simples de cartões, tudo legível. Com JS o container ganha `.is-deck`
   * e os itens viram um baralho posicionado por `--pos` (0 = à frente), que o JS reescreve a
   * cada avanço.
   */
  .mix-deck {
  position: relative;
  margin-top: 2rem;
}
  .mix-deck__lista {
  margin: 0px;
  display: grid;
  list-style-type: none;
  gap: 1.5rem;
  padding: 0px;
}
  @media (min-width: 640px) {

  .mix-deck__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  @media (min-width: 1024px) {

  .mix-deck__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
  .mix-deck__item {
  margin: 0px;
}
  .mix-deck__nav {
  display: none;
}

  /*
   * Com JS o container vira o baralho. A área dos cartões sai da geometria do Figma: o
   * terceiro cartão termina em 2,32W, então 2,4W o acomoda com uma folga. `--mix-deck-w` é a
   * largura do CARTÃO da frente (324px no design).
   *
   * De cada lado sobra um trilho (`--mix-deck-seta`) para as setas ‹ e ›, como no Figma —
   * o padding é o que as tira de cima dos cartões. Como o bloco posicionado é a caixa de
   * padding, `left/right: 0` cai justamente no meio desse trilho.
   *
   * Os slides continuam no fluxo do Swiper (linha flex, cada um com a largura do container) —
   * é assim que os efeitos do próprio Swiper funcionam. Tirá-los do fluxo com `position:
   * absolute` quebra o cálculo de tamanho dele e trava a aba. Quem empilha é só o `transform`
   * escrito em setTranslate; o cartão dentro do slide é que tem a largura do design.
   */
  .mix-deck.is-deck {
    --mix-deck-w: 15rem;
    --mix-deck-seta: 2.75rem;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    max-width: calc(var(--mix-deck-w) * 2.4 + var(--mix-deck-seta) * 2);
    padding-inline: var(--mix-deck-seta);
  }
  .mix-deck.is-deck .mix-deck__lista {
  gap: 0px;
}
  .mix-deck.is-deck .mix-deck__item {
  height: auto;
  width: 100%;
    /* Os três cartões dividem o mesmo eixo vertical: a escala não pode mexer nisso. */
    transform-origin: left center;
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1), opacity 450ms;
    will-change: transform;
}
  .mix-deck.is-deck .mix-marco {
  width: var(--mix-deck-w);
    /* Piso da proporção do design (324×576): com texto curto o cartão não encolhe. */
    min-height: calc(var(--mix-deck-w) * 576 / 324);
}
  /* Cartões atrás ficam com a cópia mais apagada, como no design. */
  .mix-deck.is-deck .mix-deck__item:not(.is-ativo) .mix-marco__corpo {
  opacity: 0.6;
}

  .mix-deck.is-deck .mix-deck__nav {
  position: absolute;
  top: 50%;
  z-index: 200;
  display: flex;
  width: 2.25rem;
  height: 2.25rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-deck.is-deck .mix-deck__nav--prev {
  left: 0px;
}
  .mix-deck.is-deck .mix-deck__nav--next {
  right: 0px;
}
  .mix-deck.is-deck .mix-deck__nav:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(116 116 116 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-deck.is-deck .mix-deck__nav:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #E50A4B;
}

  @media (min-width: 1024px) {
    .mix-deck.is-deck { --mix-deck-w: 20rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mix-deck.is-deck .mix-deck__item { transition-duration: 0s; }
  }

  /*
   * Cartão de marco (Figma 590:741): 324×576 com 15px de respiro, foto arredondada no topo e
   * o ano num degrau da cor do cartão que avança sobre o canto inferior esquerdo da foto.
   * A cor vem do campo do ACF, por `--mix-marco-cor`.
   */
  .mix-marco {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  padding: 0.9375rem;
    background-color: var(--mix-marco-cor, #FED79E);
}
  .mix-marco__media {
  position: relative;
}
  .mix-marco__foto {
  display: block;
  width: 100%;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
    aspect-ratio: 294 / 330;
}
  .mix-marco__foto--vazia {
  background-color: rgb(0 0 0 / 0.1);
}
  /*
   * Marcos que o design resolve com logotipo (2015, 2023, 2025, 2026) em vez de foto: o Figma
   * assenta a marca inteira sobre uma placa branca, então aqui é `contain` — com `cover` a
   * logo entra recortada pela metade.
   */
  .mix-marco__foto--logo {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  -o-object-fit: contain;
     object-fit: contain;
  padding: 1rem;
}
  /*
   * O degrau: encosta na borda esquerda do cartão (por isso o -15px) e sobe por cima da foto.
   * O canto superior direito arredondado é o que desenha o recorte do design.
   */
  .mix-marco__ano {
  position: absolute;
  bottom: 0px;
  left: -0.9375rem;
  display: block;
  padding-bottom: 0.25rem;
  padding-left: 1.875rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  letter-spacing: 0.33em;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    background-color: var(--mix-marco-cor, #FED79E);
    border-top-right-radius: 1.25rem;
}
  .mix-marco__corpo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  padding-bottom: 1rem;
  padding-top: 0.75rem;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-marco__titulo {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.375rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-marco__texto {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /* Pilares da marca: 4 colunas no desktop, empilhados no mobile. */
  .mix-pilares-grid {
  margin: 0px;
  margin-top: 2rem;
  display: grid;
  list-style-type: none;
  gap: 2rem;
  padding: 0px;
}
  @media (min-width: 640px) {

  .mix-pilares-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  @media (min-width: 1024px) {

  .mix-pilares-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
  .mix-pilar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
  .mix-pilar__logo {
  display: flex;
  height: 106px;
  align-items: center;
  justify-content: center;
}
  /*
   * Duas travas em vez de uma: a marca Mix é um selo quadrado e as outras são logotipos
   * deitados. Limitar só a altura deixaria o selo minúsculo ao lado dos wordmarks.
   */
  .mix-pilar__logo img {
  max-height: 72px;
  max-width: 160px;
  -o-object-fit: contain;
     object-fit: contain;
}
  .mix-pilar__nome {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-pilar__texto {
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /* Conteúdo livre da página, quando o editor preencher algo além dos patterns. */
  .mix-sobre-conteudo:not(:has(.wp-block-post-content > *)) {
  display: none;
}

  /* --- Contato (templates/page-contato.html) ---------------------------- *
   * Figma V2 — "Contato - Desktop" (97:8945) e "Contato - Mobile" (801:1784).
   * Grade de três colunas: o formulário ocupa duas, os cartões de atendimento a terceira.
   * No mobile vira coluna única e os cartões caem abaixo do formulário — que é a ordem do
   * próprio markup, por isso não há nada a reordenar aqui.
   * -------------------------------------------------------------------- */

  .mix-contato-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
}

  .mix-contato {
  margin-top: 1.5rem;
  display: grid;
  align-items: flex-start;
  gap: 1.5rem;
}

  @media (min-width: 1024px) {

  .mix-contato {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mix-contato__form {
    grid-column: span 2 / span 2;
  }
}
  .mix-contato__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

  /* Cartão cinza com os campos. */
  .mix-contato-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}
  .mix-contato-form__obrigatorios {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
  .mix-contato-form__campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .mix-contato-form__label {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  /* Razão social/CNPJ e País/Cidade seguem lado a lado também no mobile, como no Figma. */
  .mix-contato-form__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
  /* Quando um rótulo quebra em duas linhas (mobile), os campos continuam alinhados pela base. */
  .mix-contato-form__linha > .mix-contato-form__campo {
  justify-content: flex-end;
}

  /*
   * Os campos do Figma têm 44px de altura; o padding padrão de .mix-field (catálogo) e
   * .mix-select (Onde Encontrar) é mais baixo, então a folga extra fica no escopo do form.
   */
  .mix-contato-form .mix-field {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  /* O select tem corpo 12px (contra 14px do input), então a altura vem do min-h. */
  .mix-contato-form .mix-select {
  min-height: 44px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  .mix-field--area {
  height: 8rem;
  resize: vertical;
  border-radius: 30px;
}

  /* Texto legal e botão lado a lado também no mobile (Figma 1188:1159): o texto encolhe. */
  .mix-contato-form__rodape {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.5rem;
}
  .mix-contato-form__rodape .mix-btn {
  flex-shrink: 0;
}
  .mix-contato-form__termos {
  min-width: 0px;
  max-width: 336px;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  letter-spacing: 0.0417em;
  line-height: 14.5px;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-contato-form__termos a {
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  .mix-contato-form__termos a:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}

  /* Cartões "Atendimento" e "Horário". */
  .mix-contato-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
}
  .mix-contato-card__tag {
  display: inline-flex;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(254 190 191 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-contato-card__titulo {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-contato-card__lista {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.5rem;
}
  .mix-contato-card__item {
  width: 100%;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  /* Divisória tracejada entre os canais, menos no último. */
  .mix-contato-card__lista > .mix-contato-card__item:not(:last-child) {
  border-bottom-width: 1px;
  border-style: dashed;
  border-color: rgb(55 65 81 / 0.3);
  padding-bottom: 0.5rem;
}

  /* --- Contato: pele do Gravity Forms ---------------------------------- *
   * O formulário de verdade é do Gravity Forms (tools/seed-form-contato.php), que renderiza
   * com o tema "orbital". Orbital é dirigido por **custom properties** (`--gf-*`), então o
   * ajuste visual é feito redefinindo esses tokens dentro de `.mix-contato-form--plugin` —
   * e não sobrescrevendo os seletores do plugin, que mudam de versão para versão.
   *
   * **Cores e raio não estão aqui**: o plugin imprime essas variáveis num \3c style> com seletor
   * de id (`#gform_wrapper_N`), que venceria qualquer regra de classe. Elas viajam no atributo
   * `styles` do shortcode, gravado pelo seed. O que fica neste bloco é só o que o atributo não
   * cobre.
   *
   * Escopo local de propósito: outros formulários do site (e o editor do plugin) continuam
   * com o visual padrão do Gravity Forms.
   * -------------------------------------------------------------------- */

  .mix-contato-form--plugin .gform_wrapper.gform-theme {
    /* Campos: 44px de altura, sem borda visível — o mesmo desenho do .mix-field. */
    --gf-ctrl-size: 44px;
    --gf-ctrl-padding-x: 1rem;
    --gf-ctrl-border-width: 0;
    --gf-ctrl-font-family: inherit;
    --gf-ctrl-font-size: 0.875rem;

    /* Placeholder dos selects: 12px cinza, como "[Selecione o seu país]" no frame. */
    --gf-ctrl-placeholder-color: #747474;
    --gf-ctrl-placeholder-font-size: 0.75rem;
    --gf-ctrl-placeholder-opacity: 1;

    /* Rótulos: mesmo tracking e peso do .mix-contato-form__label (a caixa alta é regra à parte). */
    --gf-ctrl-label-font-family-primary: inherit;
    /* O "*" acompanha o rótulo, como no frame — o padrão do plugin é o vermelho de erro. */
    --gf-ctrl-label-color-req: #374151;
    --gf-ctrl-label-font-weight-primary: 400;
    --gf-ctrl-label-letter-spacing-primary: 0.05em;
    --gf-ctrl-label-line-height-primary: 1rem;

    /* Botão Enviar: pílula do .mix-btn (a cor vem do atributo `styles` do shortcode). */
    --gf-ctrl-btn-radius: 9999px;
    --gf-ctrl-btn-size: 40px;
    --gf-ctrl-btn-padding-x: 1rem;
    --gf-ctrl-btn-font-family: inherit;
    --gf-ctrl-btn-font-size: 1rem;
    --gf-ctrl-btn-font-weight: 400;

    /* Respiro entre campos: os mesmos 16px do resto do cartão. */
    --gf-form-gap-y: 1rem;
    --gf-form-gap-x: 1rem;
    --gf-field-gap-y: 0.25rem;
    --gf-field-gap-x: 1rem;
    --gf-form-footer-margin-y-start: 0.5rem;
  }

  /* Maiúsculas do rótulo não têm token. */
  .mix-contato-form--plugin .gfield_label {
  text-transform: uppercase;
}

  /*
   * "*Campos obrigatórios": o plugin renderiza a legenda no cabeçalho do formulário, com o
   * corpo do texto. O frame a quer como rótulo miúdo, igual ao .mix-contato-form__obrigatorios.
   */
  .mix-contato-form--plugin .gform_heading {
  margin: 0px;
}
  .mix-contato-form--plugin .gform_required_legend {
  margin: 0px;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}

  /* A área de mensagem tem 128px no frame; `--gf-ctrl-size` vale só para campos de uma linha. */
  .mix-contato-form--plugin .mix-gf-mensagem textarea {
  height: 8rem;
  min-height: 8rem;
  border-radius: 30px;
}

  /*
   * Abaixo de 640px o Gravity Forms empilha tudo: as regras de `grid-column` do tema
   * "foundation" vivem dentro de um `@media (min-width: 640px)`. O frame mobile mantém
   * Razão social/CNPJ e País/Cidade lado a lado, então os pares voltam a meia largura aqui.
   */
  @media (max-width: 639px) {
    .mix-contato-form--plugin .gform_wrapper .gform_fields { -moz-column-gap: var(--gf-form-gap-x); column-gap: var(--gf-form-gap-x); }
    .mix-contato-form--plugin .gform_wrapper .gform_fields > .gfield--width-half {
      grid-column: span 6;
    }
  }

  /*
   * Rodapé: texto legal à esquerda, botão à direita (Figma 1151:1159). O parágrafo entra aqui
   * por mix_contato_gf_botao() — ver inc/blocks-contato.php.
   */
  .mix-contato-form--plugin .gform_footer {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
  .mix-contato-form--plugin .gform_footer .gform_button {
  flex-shrink: 0;
}

  /* Conteúdo livre da página, quando o editor preencher algo além do pattern. */
  .mix-contato-conteudo:not(:has(.wp-block-post-content > *)) {
  display: none;
}

  /* --- Onde Encontrar (page-onde-encontrar.php) ------------------------- *
   * Figma V2 — "WhereToBuy - Desktop" (97:8623) e "- Mobile" (798:1244).
   * -------------------------------------------------------------------- */

  .mix-onde__head {
  align-items: center;
  text-align: center;
}

  @media (min-width: 1024px) {

  .mix-onde__head {
    align-items: flex-start;
    text-align: left;
  }
}
  .mix-onde__head .mix-eyebrow {
  justify-content: center;
}
  @media (min-width: 1024px) {

  .mix-onde__head .mix-eyebrow {
    justify-content: flex-start;
  }
}

  /* Select branco arredondado dos filtros (a seta nativa fica no padding à direita). */
  .mix-select {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 9999px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1.75rem;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  letter-spacing: 0.0417em;
  line-height: 14.5px;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 10 75 / var(--tw-ring-opacity, 1));
}

  /*
   * Filtro: no desktop é uma barra (Estado · Cidade · Buscar) alinhada pela base; no mobile
   * vira o cartão "Filtrar" com os campos empilhados, como no frame.
   */
  .mix-onde-filtro {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
}
  @media (min-width: 1024px) {

  .mix-onde-filtro {
    grid-template-columns: 1fr 1fr 228px;
    align-items: flex-end;
  }
}
  .mix-onde-filtro__titulo {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-onde-filtro__titulo {
    display: none;
  }
}
  .mix-onde-filtro__campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
  .mix-onde-filtro__rotulo {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-onde-filtro__acao {
  width: 100%;
}

  /* Lista numerada de pontos. */
  .mix-pontos {
  margin: 0px;
  margin-top: 1.5rem;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0px;
}
  .mix-ponto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}
  @media (min-width: 1024px) {

  .mix-ponto {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}
  .mix-ponto__info {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
  .mix-ponto__num {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-ponto__dados {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
  .mix-ponto__nome {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-ponto__endereco {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
  /* O frame mobile mostra só nome + endereço: telefone e site viram os botões de ação. */
  .mix-ponto__contato {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: 12px;
  font-weight: 300;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
  @media (min-width: 1024px) {

  .mix-ponto__contato {
    display: flex;
  }
}
  .mix-ponto__contato a {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  .mix-ponto__contato a:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}

  .mix-ponto__acoes {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
}
  .mix-btn-mapa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 214 158 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-btn-mapa:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 158 / var(--tw-bg-opacity, 1));
}

  /* --- Ficha do produto (single-produto.php) ---------------------------- *
   * Figma V2 — "Products - Detail - Desktop" (97:7807).
   * -------------------------------------------------------------------- */

  .mix-produto {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

  @media (min-width: 768px) {

  .mix-produto {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

  .mix-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-breadcrumb a {
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
}
  .mix-breadcrumb a:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}
  .mix-breadcrumb [aria-current] {
  text-decoration-line: none;
}

  /* Topo: mídia à esquerda, coluna de dados à direita. */
  .mix-produto__topo {
  display: grid;
  gap: 2rem;
}
  @media (min-width: 1024px) {

  .mix-produto__topo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 31px;
  }
}
  .mix-produto__media {
  display: flex;
  height: 320px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}
  @media (min-width: 1024px) {

  .mix-produto__media {
    height: 460px;
  }
}
  .mix-produto__media img {
  max-height: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
  /* `ml-auto` só empurra caixas de nível bloco — daí `flex w-fit` em vez de `inline-flex`. */
  .mix-produto__baixar {
  margin-top: 0.75rem;
  margin-left: auto;
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 900;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
  .mix-produto__baixar:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}
  .mix-produto__baixar img {
  height: 18px;
  width: 18px;
}

  .mix-produto__info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
  .mix-produto__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
  .mix-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
  .mix-badge--marca {
  --tw-bg-opacity: 1;
  background-color: rgb(234 98 98 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-badge--categoria {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 158 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  .mix-produto__titulo {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 2.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-produto__resumo {
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /* Chips de atributo (Alta Fluidez, Sem Glúten…). */
  .mix-produto__atributos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
  .mix-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /* Cartão branco com embalagens e cores. */
  .mix-opcoes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1rem;
}
  .mix-opcoes__titulo {
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(234 98 98 / var(--tw-border-opacity, 1));
  padding-bottom: 0.5rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-opcoes__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

  .mix-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
  .mix-opt.is-current {
  --tw-bg-opacity: 1;
  background-color: rgb(234 98 98 / var(--tw-bg-opacity, 1));
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(245 244 239 / var(--tw-text-opacity, 1));
}

  /*
   * A régua mostra a paleta da família, então cada amostra é um produto: as dos irmãos são <a>,
   * a do produto aberto é um <span>.is-current (destaque do design — sombra + nome em bold).
   */
  /*
   * A amostra cresce com o nome (no design "CHOCOLATE BELGA" fica numa linha só, num botão de
   * 93px, ao lado de "BRANCA" num de 56px): largura mínima do chip de cor + nome sem quebra.
   */
  .mix-swatch {
  display: flex;
  min-width: 3.5rem;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  text-decoration-line: none;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  .mix-swatch__cor {
  height: 3rem;
  width: 3rem;
  border-radius: 10px;
  border-width: 1px;
  border-color: rgb(55 65 81 / 0.1);
}
  .mix-swatch__nome {
  white-space: nowrap;
  text-align: center;
  font-size: 9px;
  text-transform: uppercase;
  line-height: 13.5px;
  letter-spacing: 0.05em;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  opacity: 0.6;
}
  .mix-swatch.is-current .mix-swatch__cor {
  --tw-shadow: 0 4px 4px rgba(0,0,0,0.25);
  --tw-shadow-colored: 0 4px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
  .mix-swatch.is-current .mix-swatch__nome {
  font-weight: 900;
  opacity: 1;
}
  a.mix-swatch:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  a.mix-swatch:hover .mix-swatch__nome {
  opacity: 1;
}
  a.mix-swatch:focus-visible {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 2px;
  outline-color: #E50A4B;
}

  /* Barra "Precisa de ajuda…". */
  .mix-ajuda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1.5rem;
  padding-right: 1rem;
}
  .mix-ajuda p {
  max-width: 190px;
  font-size: 15px;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-ajuda__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
  .mix-ajuda .mix-btn {
  height: 2rem;
  padding-top: 0px;
  padding-bottom: 0px;
}

  /* Painéis da seção "Informações do produto". */
  .mix-paineis {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}
  @media (min-width: 768px) {

  .mix-paineis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  .mix-painel {
  display: flex;
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-bottom: 1.75rem;
}
  @media (min-width: 768px) {

  .mix-painel--full {
    grid-column: span 2 / span 2;
  }
}
  .mix-painel__titulo {
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.625rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-painel__corpo {
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-painel__corpo strong {
  font-weight: 700;
}
  .mix-painel__nota {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  opacity: 0.5;
}

  /* Onde usar — lista em três colunas com marcador coral. */
  .mix-aplicacoes {
  margin: 0px;
  display: grid;
  list-style-type: none;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 0.5rem;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  padding: 0px;
}
  @media (min-width: 640px) {

  .mix-aplicacoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  @media (min-width: 1024px) {

  .mix-aplicacoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
  .mix-aplicacoes li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-aplicacoes li::before {
    content: '';
    display: block;
    height: 0.5rem;
    width: 0.5rem;
    flex-shrink: 0;
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(234 98 98 / var(--tw-bg-opacity, 1));
  }

  .mix-sac {
  margin-top: 1rem;
  display: inline-block;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(254 171 139 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.875rem;
  padding-bottom: 0.625rem;
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.05em;
  font-weight: 900;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /* Dúvidas — accordion nativo (<details>), sem JS. */
  .mix-faq {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
  .mix-faq__item {
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
}
  .mix-faq__q {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
  .mix-faq__q::-webkit-details-marker { display: none; }
  .mix-faq__num {
  flex-shrink: 0;
  font-weight: 700;
}
  .mix-faq__texto {
  font-weight: 800;
}
  /*
   * São dois ícones distintos no design, não um só rotacionado:
   *   fechado → círculo claro (#FFFFFF) com seta; aberto → círculo escuro com ×.
   * Os dois ficam empilhados e trocam por opacidade, o que dá um cross-fade junto da
   * animação do <details>. `.is-fechando` antecipa a troca para o início do recolhimento.
   */
  .mix-faq__toggle {
  position: relative;
  display: block;
  height: 22px;
  width: 22px;
  flex-shrink: 0;
}
  .mix-faq__toggle img {
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}
  /* O asset da seta aponta para a esquerda; o design a gira -90° para apontar para baixo. */
  .mix-faq__toggle--fechado {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  .mix-faq__toggle--aberto {
  opacity: 0;
}
  .mix-faq__item[open]:not(.is-fechando) .mix-faq__toggle--fechado {
  opacity: 0;
}
  .mix-faq__item[open]:not(.is-fechando) .mix-faq__toggle--aberto {
  opacity: 1;
}
  .mix-faq__a {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}

  /* --- Páginas de marca (single-marca_pagina.php) ------------------------ *
   * Figma V2 — "Brands - Selecta - Desktop" (802:2225) / "- Mobile" (806:3121) e
   * "Brands - Mix Plena - Desktop" (806:3521) / "- Mobile" (809:4116). O layout é o mesmo
   * nas duas marcas: só mudam as imagens e o tom do véu do hero (campo ACF `hero_veu`).
   * -------------------------------------------------------------------- */

  .mix-marca {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

  @media (min-width: 768px) {

  .mix-marca {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

  /*
   * Hero: a imagem de fundo mora num bloco arredondado de 380px, e o packshot TRANSBORDA
   * esse bloco (no desktop pelo topo e pela base; no mobile só pela base). Por isso o fundo
   * é uma camada absoluta com altura própria em vez do background da própria section — o
   * conteúdo precisa poder ultrapassá-lo sem ser recortado.
   */
  /* `mt-14` no mobile abre espaço para a metade do logotipo que transborda o topo do bloco. */
  .mix-marca-hero {
  position: relative;
  isolation: isolate;
  margin-top: 3.5rem;
}
  @media (min-width: 1024px) {

  .mix-marca-hero {
    margin-top: 0px;
  }
}
  .mix-marca-hero__fundo {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: -10;
  height: calc(100% - 64px);
  overflow: hidden;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-marca-hero__fundo {
    top: 50%;
    height: 380px;
    --tw-translate-y: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
  .mix-marca-hero__fundo img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
  /*
   * O véu de 45% garante o contraste do texto branco sobre a textura. A cor vem do campo
   * ACF em `--mix-veu` (inline no template); o fallback repete o marrom do frame Selecta.
   */
  .mix-marca-hero__fundo::after {
    content: '';
    position: absolute;
    inset: 0px;
    background-color: var(--mix-veu, rgba(48, 22, 0, 0.45));
  }

  .mix-marca-hero__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 3.5rem;
  padding-top: 5rem;
}

  @media (min-width: 1024px) {

  .mix-marca-hero__grid {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}
  /*
   * Ordem invertida no mobile: o frame põe logo + texto em cima e o packshot embaixo,
   * transbordando a base do bloco. No desktop o packshot volta para a esquerda.
   */
  /*
   * Altura fixa, largura livre: os packshots das marcas têm proporções muito diferentes (o da
   * Selecta é quadrado, o da Mix Plena é um sachê de 1:2,3). Amarrando a LARGURA, o sachê
   * ficava com mais de 1000px de altura e empurrava o hero inteiro.
   */
  .mix-marca-hero__packshot {
  order: 2;
  margin: 0px;
  display: flex;
  height: 280px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
  @media (min-width: 1024px) {

  .mix-marca-hero__packshot {
    order: 1;
    height: 440px;
  }
}
  @media (min-width: 1280px) {

  .mix-marca-hero__packshot {
    height: 500px;
  }
}
  .mix-marca-hero__packshot img {
  height: 100%;
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

  /*
   * `w-full` no mobile: como flex item de uma coluna com `items-center`, a largura da coluna
   * seria shrink-to-fit (a do parágrafo). O logotipo abaixo é limitado em PORCENTAGEM, e uma
   * base instável faria o tamanho dele variar com a quebra do texto.
   */
  .mix-marca-hero__texto {
  order: 1;
  display: flex;
  width: 100%;
  max-width: 496px;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  text-align: center;
}
  @media (min-width: 1024px) {

  .mix-marca-hero__texto {
    order: 2;
    width: auto;
  }
}
  /*
   * O <h1> é a logo da marca; sem imagem cadastrada ele volta a ser texto.
   *
   * No mobile o logotipo fica A CAVALEIRO da borda superior do bloco: metade dentro do fundo
   * texturizado, metade fora, sobre o fundo da página. É uma decisão de layout posterior ao
   * Figma — nos frames mobile (806:3121 / 809:4116) ele aparece inteiro dentro do bloco.
   *
   * Fora do fluxo (`absolute` no topo do hero, que é a mesma borda do `__fundo`) mais
   * `-translate-y-1/2`: assim o corte cai sempre na metade exata, qualquer que seja a altura
   * do logotipo da marca — o da Selecta é deitado (~69px), o da Mix Plena é alto (100px).
   * Uma margem negativa fixa erraria em uma das duas.
   *
   * A partir de lg ele volta ao fluxo, ao lado do packshot, como no frame desktop.
   */
  .mix-marca-hero__titulo {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 10;
  margin: 0px;
  width: 100%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  font-family: Caprasimo, Georgia, serif;
  font-size: 3rem;
  line-height: 3.1875rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  @media (min-width: 1024px) {

  .mix-marca-hero__titulo {
    position: static;
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}
  /*
   * Teto de largura RELATIVO no mobile: 75% dá os 268px do design na largura de bloco do frame
   * de 390px, e em telas mais estreitas o logotipo encolhe junto em vez de encostar nas bordas
   * (com `max-w-[268px]` cru ele ia de ponta a ponta abaixo de 390px). A altura máxima de 100px
   * é a mesma nos dois frames — é ela que limita o logotipo da Mix Plena (mais alto), enquanto
   * o da Selecta é limitado pela largura.
   */
  .mix-marca-hero__titulo img {
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-height: 100px;
  width: auto;
  max-width: 75%;
}
  @media (min-width: 1024px) {

  .mix-marca-hero__titulo img {
    max-width: 268px;
  }
}
  .mix-marca-hero__resumo {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  /* --- Navegue pelas categorias ---------------------------------------- */

  /* Desktop: coluna de texto (451px no frame) + grade de cards; mobile: tudo empilhado. */
  .mix-marca-cats {
  display: grid;
  align-items: center;
  gap: 1.5rem;
}
  @media (min-width: 1024px) {

  .mix-marca-cats {
    grid-template-columns: 451px 1fr;
    gap: 1rem;
  }
}
  .mix-marca-cats__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
  .mix-marca-cats__texto {
  max-width: 343px;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /*
   * Mobile: faixa rolável com scroll-snap (o frame mostra os cards cortados na borda).
   * A partir de lg vira a grade de duas colunas do desktop. Sem JS nos dois casos — é só
   * overflow nativo, no mesmo espírito de .mix-carousel-row.
   */
  .mix-marca-cats__lista {
  margin: 0px;
  margin-left: -1rem;
  margin-right: -1rem;
  display: flex;
  list-style-type: none;
  gap: 1rem;
  overflow-x: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
}
  @media (min-width: 1024px) {

  .mix-marca-cats__lista {
    margin-left: 0px;
    margin-right: 0px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    overflow: visible;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
  }
}
  .mix-marca-cats__lista {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mix-marca-cats__lista::-webkit-scrollbar { display: none; }
  .mix-marca-cats__lista > li {
  width: 190px;
  flex-shrink: 0;
}
  @media (min-width: 1024px) {

  .mix-marca-cats__lista > li {
    width: auto;
  }
}
  .mix-marca-cats__lista > li {
    scroll-snap-align: start;
  }

  .mix-marca-cat {
  position: relative;
  display: flex;
  height: 214px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 26px;
  padding: 1rem;
  text-align: center;
  text-decoration-line: none;
}

  @media (min-width: 1024px) {

  .mix-marca-cat {
    height: 238px;
  }
}
  /* `> img` de propósito: a logo do índice /marcas/ vem dentro de um <span> e não pode
     herdar o recorte de fundo do cartão. */
  .mix-marca-cat > img {
  position: absolute;
  inset: 0px;
  z-index: -10;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
  .mix-marca-cat:hover > img {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
  /*
   * Véu de 20% do design, o que dá legibilidade ao rótulo. O índice /marcas/ passa o véu da
   * própria marca em `--mix-veu` (mesmo cartão, fundo do hero) — daí a variável com fallback.
   */
  .mix-marca-cat::after {
    content: '';
    position: absolute;
    inset: 0px;
    z-index: -10;
    background-color: var(--mix-veu, rgba(0, 0, 0, 0.2));
  }
  .mix-marca-cat__rotulo {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 900;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  /* Índice /marcas/: no lugar do rótulo entra a logo branca da marca. */
  .mix-marca-cat__logo img {
  height: auto;
  max-height: 76px;
  width: auto;
  max-width: 200px;
  -o-object-fit: contain;
     object-fit: contain;
}

  /* --- Confira nossos produtos ----------------------------------------- */

  .mix-marca-produtos__texto {
  margin-left: auto;
  margin-right: auto;
  max-width: 646px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  /* --- 6. Localizador de distribuidores -------------------------------- */

  .mix-localizador {
  display: grid;
  gap: 1.5rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
}

  @media (min-width: 768px) {

  .mix-localizador {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0px;
  }
}
  .mix-localizador__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
  @media (min-width: 768px) {

  .mix-localizador__intro {
    padding: 2.5rem;
  }
}
  .mix-localizador__title {
  font-family: Caprasimo, Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.1;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  @media (min-width: 768px) {

  .mix-localizador__title {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}
  .mix-localizador__text {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-localizador__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
  @media (min-width: 768px) {

  .mix-localizador__form {
    padding: 2.5rem;
  }
}
  .mix-localizador__label {
  font-size: 0.6875rem;
  line-height: 1.03125rem;
  letter-spacing: 0.1513em;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  .mix-field {
  width: 100%;
  border-radius: 9999px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

  .mix-field:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 10 75 / var(--tw-ring-opacity, 1));
}

  /* --- 7. Newsletter ---------------------------------------------------- *
   * Dois desenhos no Figma V2: no desktop ("Home - Desktop" 338:845) o texto fica solto
   * sobre o fundo da página e só o formulário é cartão; no mobile ("Mobile" 809:4225) um
   * único cartão cinza envolve texto e formulário, alinhados à esquerda. Por isso o cartão
   * nasce em .mix-newsletter e migra para .mix-newsletter__box a partir de md.
   */

  /* Respiro externo do cartão no mobile; no desktop o py-12 interno já dá o respiro. */
  .mix-newsletter-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
  @media (min-width: 768px) {

  .mix-newsletter-section {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

  .mix-newsletter {
  display: grid;
  align-items: flex-start;
  gap: 1.5rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

  @media (min-width: 768px) {

  .mix-newsletter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    border-radius: 0px;
    background-color: transparent;
    padding-left: 0px;
    padding-right: 0px;
  }
}
  .mix-newsletter__box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  border-radius: 0px;
  background-color: transparent;
  padding: 0px;
}
  @media (min-width: 768px) {

  .mix-newsletter__box {
    align-items: center;
    border-radius: 30px;
    --tw-bg-opacity: 1;
    background-color: rgb(227 227 227 / var(--tw-bg-opacity, 1));
    padding: 1.5rem;
  }
}
  .mix-newsletter__row {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}
  /* O campo herda w-full de .mix-field; aqui ele volta a ser flexível para caber ao lado do botão.
     As alturas maiores (52px do campo, 48px do botão) são só do mobile — daí o md: de volta ao padrão. */
  .mix-newsletter__row .mix-field {
  width: auto;
  min-width: 0px;
  flex-grow: 1;
  flex-basis: 0px;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
  @media (min-width: 768px) {

  .mix-newsletter__row .mix-field {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
  .mix-newsletter__row .mix-btn {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
  @media (min-width: 768px) {

  .mix-newsletter__row .mix-btn {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}
  .mix-newsletter__consent {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  @media (min-width: 768px) {

  .mix-newsletter__consent {
    justify-content: center;
  }
}
  .mix-newsletter__consent input {
  height: 0.875rem;
  width: 1rem;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  accent-color: #E50A4B;
}

  /* --- Newsletter: pele do Gravity Forms -------------------------------- *
   * O formulário de verdade é do Gravity Forms (tools/seed-form-newsletter.php). Mesma ideia
   * da pele do Contato: os ajustes são tokens `--gf-*` do tema "orbital" dentro de
   * `.mix-newsletter-form--plugin`, e não seletores do plugin, que mudam de versão para versão.
   * Cores e raio viajam no atributo `styles` do shortcode, gravado pelo seed.
   *
   * O que esta pele resolve, além dos tokens: o frame põe o campo e o botão *Inscrever* na
   * mesma linha, e no markup do plugin eles não são irmãos — o botão mora em `.gform_footer`,
   * irmão do corpo do formulário. A saída é `display: contents` no corpo e na lista de campos,
   * promovendo cada `.gfield` a item da grade do próprio <form>: e-mail e rodapé dividem a
   * primeira linha, o consentimento ocupa a segunda inteira.
   * -------------------------------------------------------------------- */

  .mix-newsletter-form--plugin .gform_wrapper.gform-theme {
    /*
     * Medidas do campo de e-mail, direto do frame (`input.border-2`): 412×42 no desktop, com
     * 12px de recuo lateral e o texto em 16px. No mobile o campo tem 52px.
     *
     * O token redefinido é o `-lg`, e não `--gf-ctrl-size` direto, porque o \3c style> de id do
     * plugin (`#gform_wrapper_N`) já ocupa `--gf-ctrl-size` com `var(--gf-ctrl-size-lg)` — o
     * seed pede `inputSize: lg` justamente para isso. O `-lg` fica em
     * `.gform-theme--framework`, seletor de uma classe, então este vence.
     *
     * O botão é 2px mais baixo que o campo no desktop (40 contra 42) e continua alinhado
     * porque a grade do <form> usa `items-start`: os dois encostam pelo topo, inclusive quando
     * uma mensagem de validação estica a célula do e-mail.
     */
    --gf-ctrl-size-lg: 52px;
    --gf-ctrl-padding-x: 0.75rem;
    --gf-ctrl-border-width: 0;
    --gf-ctrl-font-family: inherit;
    --gf-ctrl-font-size: 0.875rem;

    /*
     * #717182 é o cinza do placeholder no frame. Fica perto do token `muted` (#747474), que a
     * pele do Contato usa, mas não é o mesmo valor — aqui vale o do desenho.
     */
    --gf-ctrl-placeholder-color: #717182;
    --gf-ctrl-placeholder-font-size: 0.875rem;
    --gf-ctrl-placeholder-opacity: 1;

    /*
     * Botão Inscrever: pílula do .mix-btn (a cor vem do atributo `styles` do shortcode).
     *
     * Altura e recuo vão nos tokens `-lg` pelo mesmo motivo do campo: o \3c style> de id do plugin
     * resolve `--gf-ctrl-btn-size` / `--gf-ctrl-btn-padding-x` nas variantes `-lg` (48px e 20px),
     * e é nelas que se escreve. Os 16px do frame fecham a conta da linha: 94px de botão + 17 de
     * vão deixam exatamente os 412px do campo dentro dos 523px da linha.
     */
    --gf-ctrl-btn-radius: 9999px;
    --gf-ctrl-btn-size-lg: 48px;
    --gf-ctrl-btn-padding-x-lg: 1rem;
    --gf-ctrl-btn-font-family: inherit;
    --gf-ctrl-btn-font-size: 1rem;
    --gf-ctrl-btn-font-weight: 400;

    --gf-form-gap-y: 0.75rem;
    --gf-form-gap-x: 1rem;
    --gf-field-gap-y: 0.25rem;
    --gf-form-footer-margin-y-start: 0;
  }

  @media (min-width: 768px) {
    .mix-newsletter-form--plugin .gform_wrapper.gform-theme {
      --gf-ctrl-size-lg: 42px;
      --gf-ctrl-font-size: 1rem;
      --gf-ctrl-placeholder-font-size: 1rem;
      --gf-ctrl-btn-size-lg: 40px;
    }
  }

  /*
   * A grade que põe e-mail e botão lado a lado. `display: contents` tira o corpo e a lista do
   * caminho para que os filhos virem itens desta grade — sem isso o rodapé só poderia ficar
   * abaixo do bloco inteiro de campos.
   *
   * A posição vem de `order` + coluna, e não de linhas fixas (`grid-area: 1 / 1`), porque o
   * resumo de erros do plugin só existe depois de um envio inválido: com linhas fixas ele
   * precisaria de uma linha reservada, que sobraria como um vão no estado normal. Com
   * `order`, o posicionamento automático acomoda os dois estados — o rodapé declara a coluna 2
   * e cabe na mesma linha do e-mail, e o resumo, quando aparece, abre a linha de cima.
   */
  /*
   * Largura, direto do frame: o cartão tem 604px, e dentro dele a linha do formulário tem 523px
   * **centrados** (x=40.5 de cada lado) — não é a largura cheia do conteúdo. O campo é o que
   * sobra depois do botão e do vão: 412px no desenho.
   *
   * O `w-full` não é redundante: `.mix-newsletter__box` vira `md:items-center`, e num flex
   * column isso encolhe os filhos até o conteúdo — sem ele o formulário inteiro ficava preso
   * em ~337px e o campo em ~217px, em qualquer viewport. O `max-w` só entra a partir de `md`
   * porque abaixo disso o cartão já é mais estreito que 523px.
   */
  .mix-newsletter-form--plugin {
  width: 100%;
}

  .mix-newsletter-form--plugin .gform_wrapper form {
  display: grid;
  align-items: flex-start;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.75rem;
}

  @media (min-width: 768px) {

  .mix-newsletter-form--plugin .gform_wrapper form {
    margin-left: auto;
    margin-right: auto;
    max-width: 523px;
    -moz-column-gap: 17px;
         column-gap: 17px;
  }
}

  .mix-newsletter-form--plugin .gform_wrapper form {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mix-newsletter-form--plugin .gform-body,
  .mix-newsletter-form--plugin .gform_fields { display: contents; }

  /*
   * Tamanho de fonte fixado no campo e no botão, e não herdado.
   *
   * A newsletter sai no rodapé de **todas** as telas, e os templates PHP clássicos (catálogo,
   * ficha do produto, Onde Encontrar) chegam no `<body>` com outro tamanho de base que o dos
   * block templates. Como várias medidas do plugin são relativas ao próprio controle (a largura
   * da borda, por exemplo, é em `em`), herdar o corpo faria o cartão mudar de altura de uma tela
   * para a outra. Os 14/16px são os do frame.
   */
  .mix-newsletter-form--plugin .gform_wrapper input {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
  @media (min-width: 768px) {

  .mix-newsletter-form--plugin .gform_wrapper input {
    font-size: 1rem;
    line-height: 1.5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}
  .mix-newsletter-form--plugin .gform_wrapper .gfield_consent_label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-newsletter-form--plugin .gform_wrapper .gform_button {
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  .mix-newsletter-form--plugin .gform_validation_errors {
  order: 1;
  margin: 0px; grid-column: 1 / -1;
}
  .mix-newsletter-form--plugin .gfield--type-email {
  order: 2; grid-column: 1;
}
  .mix-newsletter-form--plugin .gform_footer {
  order: 3;
  margin: 0px;
  padding: 0px; grid-column: 2;
}
  .mix-newsletter-form--plugin .gfield--type-consent {
  order: 4; grid-column: 1 / -1;
}

  /* O cartão não reserva espaço para a legenda de obrigatórios nem para o título do form. */
  .mix-newsletter-form--plugin .gform_heading {
  display: none;
}

  /*
   * "(obrigatório)" ao lado do consentimento: com rótulo oculto o plugin cola o indicador no
   * texto da caixa, e o frame não o tem. Some só da tela — os campos seguem `isRequired`, e o
   * `aria-required` do input é o que anuncia a obrigatoriedade a quem usa leitor de tela.
   *
   * O `.gform_wrapper` no meio não é decorativo: o indicador dentro do rótulo do consentimento
   * tem regra própria no plugin, e a folha dele é impressa **depois** da do tema (o enfileiramento
   * acontece no render, já no rodapé). Sem esse terceiro nível a regra empata e perde.
   */
  .mix-newsletter-form--plugin .gform_wrapper .gfield_required {
  display: none;
}

  /* Consentimento: mesma caixa e mesmo texto da versão estática (.mix-newsletter__consent). */
  .mix-newsletter-form--plugin .ginput_container_consent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-newsletter-form--plugin .ginput_container_consent input[type='checkbox'] {
  height: 0.875rem;
  width: 1rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  accent-color: #E50A4B;
}

  /* --- 8. Rodapé -------------------------------------------------------- */

  .mix-footer {
  --tw-bg-opacity: 1;
  background-color: rgb(229 10 75 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-footer__grid {
  display: grid;
  gap: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
  @media (min-width: 640px) {

  .mix-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
  @media (min-width: 1024px) {

  .mix-footer__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
  .mix-footer__logo {
  height: 35px;
  width: auto;
}
  .mix-footer__about {
  margin-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
  .mix-footer__social {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
  .mix-footer__social img {
  height: 1.5rem;
  width: 1.5rem;
}
  .mix-footer__title {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1rem;
  letter-spacing: 0.0375em;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(245 244 239 / var(--tw-text-opacity, 1));
}
  .mix-footer__list {
  margin: 0px;
  margin-top: 0.75rem;
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0px;
}
  .mix-footer__list a {
  font-size: 1rem;
  line-height: 1.25rem;
  color: rgb(245 244 239 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
  .mix-footer__list a:hover {
  text-decoration-line: underline;
}
  /* Chevron dourado antes de cada item. */
  .mix-footer__list a::before { content: '› '; --tw-text-opacity: 1; color: rgb(208 163 42 / var(--tw-text-opacity, 1)); }
  .mix-footer__list em {
  display: block;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  color: rgb(245 244 239 / 0.9);
}

  .mix-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-top-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(245 244 239 / var(--tw-border-opacity, 1));
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  text-transform: uppercase;
  letter-spacing: 0.1238em;
  --tw-text-opacity: 1;
  color: rgb(245 244 239 / var(--tw-text-opacity, 1));
}
  /* Cada metade da linha legal fica inteira: só quebra quando não couberem lado a lado. */
  .mix-footer__legal > span {
  flex-shrink: 0;
}
  .mix-footer__legal a {
  --tw-text-opacity: 1;
  color: rgb(245 244 239 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
  .mix-footer__legal a:hover {
  text-decoration-line: underline;
}

  .mix-footer .wp-block-navigation .wp-block-navigation-item__description {
  display: block;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.25;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    color: rgb(245 244 239 / 0.9);
}

  /* --- Erro 404 -------------------------------------------------------- *
   * Cartão areia centralizado (Figma V2 "404 - Desktop" 809:4456 e
   * "404 - Mobile" 809:4708). O desenho é o mesmo nas duas larguras: muda só a altura
   * mínima do cartão (337px no mobile, 374px no desktop) e o respiro entre os itens.
   * A largura de 1128px é a do frame desktop; abaixo disso o cartão acompanha o shell.
   */
  .mix-erro404__card {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  min-height: 337px;
  max-width: 1128px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(233 215 203 / var(--tw-bg-opacity, 1));
  padding: 1.25rem;
  text-align: center;
}
  @media (min-width: 768px) {

  .mix-erro404__card {
    min-height: 374px;
    gap: 7px;
  }
}
  .mix-erro404__icone {
  height: 8rem;
  width: 8rem;
  flex-shrink: 0;
}
  /* 45/30 do Figma: entrelinha fechada de propósito, o par com a linha de apoio é o "bloco". */
  .mix-erro404__titulo {
  font-family: Caprasimo, Georgia, serif;
  font-size: 45px;
  line-height: 30px;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  .mix-erro404__texto {
  font-family: Zain, Inter, Arial, system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.875rem;
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
  /* Zain Regular no rótulo (o .mix-btn padrão é black) e a largura fixa de 192px do design. */
  .mix-erro404__btn {
  margin-top: 0.5rem;
  min-width: 192px;
  font-weight: 400;
  text-decoration-line: none;
}

  /* --- Catálogo (telas clássicas que reaproveitam os componentes) ------- */

  /*
   * Paginação (paginate_links type=list): barra branca centralizada com botões de 36px,
   * como no rodapé do frame do catálogo. A página atual se distingue pelo peso da fonte.
   */
  .mix-paginacao {
  margin-top: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.75rem;
}
  .mix-paginacao ul {
  margin: 0px;
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0px;
}
  /*
   * Atenção: paginate_links(type=list) aplica a classe `page-numbers` tanto no <ul> quanto
   * em cada item. Por isso o seletor dos botões desce até o <li> — sem isso o próprio <ul>
   * virava um quadrado de 36px e a lista quebrava uma página por linha.
   */
  .mix-paginacao li .page-numbers {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  font-size: 1rem;
  line-height: 1.5rem;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
  text-decoration-line: none;
}
  .mix-paginacao li .page-numbers.current {
  font-weight: 700;
}
  .mix-paginacao li a.page-numbers:hover {
  --tw-text-opacity: 1;
  color: rgb(229 10 75 / var(--tw-text-opacity, 1));
}
  .mix-paginacao li .page-numbers.dots {
  width: auto;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

  /* Estado de carregamento do grid AJAX */
  [aria-busy='true'] {
  pointer-events: none;
  opacity: 0.5;
}

  /* --- Ponte para o markup dos blocos core ----------------------------- *
   * As seções da Home viraram blocos editáveis no Site Editor, então a cópia agora sai de
   * core/heading, core/paragraph e core/image em vez de um wp:html montado pelo PHP. O
   * desenho continua o mesmo: estas regras só reconciliam o markup extra que o core
   * acrescenta. Mesma abordagem já usada em `.mix-nav .wp-block-navigation-item__content`.
   * -------------------------------------------------------------------- */

  /*
   * CTAs: `.mix-btn` passou a ficar no <p> do bloco, com o link dentro. Sem isto o <a>
   * herdaria a cor de link do theme.json (tinta, e magenta no hover) sobre a pílula coral.
   */
  .mix-btn > a,
  .mix-btn > a:hover {
  color: inherit;
  text-decoration-line: none;
}

  /* O mesmo para o link "Ver todos os conteúdos →", cuja seta é o ::after do parágrafo. */
  .mix-link-arrow > a,
  .mix-link-arrow > a:hover {
  color: inherit;
  text-decoration-line: underline;
}

  /*
   * core/image envolve a <img> num <figure> com margem inferior própria. Nas molduras que
   * centralizam a imagem (painel do hero, mídia da Marca-Mãe, logo do pilar) o figure precisa
   * ser transparente para o flex do container.
   */
  .mix-hero__panel .wp-block-image,
  .mix-marcamae__media .wp-block-image,
  .mix-pilar__logo .wp-block-image {
  margin: 0px;
  display: flex;
  max-height: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
}
  .mix-marcamae__media .wp-block-image {
  height: 100%;
  width: 100%;
}

  /*
   * O slot da Marca-Mãe recebe a logo Mix, não uma foto: `object-cover` esticaria e cortaria a
   * marca. Esta variante contém a arte e deixa respiro em volta, sobre a faixa coral.
   */
  .mix-marcamae__media .mix-marcamae__logo img {
  height: auto;
  max-height: 55%;
  width: auto;
  max-width: 55%;
  -o-object-fit: contain;
     object-fit: contain;
}

  /*
   * Ordem do hero no mobile (texto → painel → CTA): o filho de .mix-hero__content agora é o
   * <p class="mix-btn">, que a regra `.mix-hero__content > .mix-btn` já alcança. Mas quando o
   * cliente insere um core/buttons no lugar, o filho vira .wp-block-buttons — cobrimos os dois.
   */
  .mix-hero__content > .wp-block-buttons { order: 3; }
  @media (min-width: 1024px) {
    .mix-hero__content > .wp-block-buttons { order: 0; }
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.static {
  position: static;
}
.absolute {
  position: absolute;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-9 {
  grid-column: span 9 / span 9;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.size-full {
  width: 100%;
  height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.list-none {
  list-style-type: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-t-2 {
  border-top-width: 2px;
}
.bg-amber {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 158 / var(--tw-bg-opacity, 1));
}
.bg-amber\/0 {
  background-color: rgb(254 215 158 / 0);
}
.bg-amber\/10 {
  background-color: rgb(254 215 158 / 0.1);
}
.bg-amber\/100 {
  background-color: rgb(254 215 158 / 1);
}
.bg-amber\/15 {
  background-color: rgb(254 215 158 / 0.15);
}
.bg-amber\/20 {
  background-color: rgb(254 215 158 / 0.2);
}
.bg-amber\/25 {
  background-color: rgb(254 215 158 / 0.25);
}
.bg-amber\/30 {
  background-color: rgb(254 215 158 / 0.3);
}
.bg-amber\/35 {
  background-color: rgb(254 215 158 / 0.35);
}
.bg-amber\/40 {
  background-color: rgb(254 215 158 / 0.4);
}
.bg-amber\/45 {
  background-color: rgb(254 215 158 / 0.45);
}
.bg-amber\/5 {
  background-color: rgb(254 215 158 / 0.05);
}
.bg-amber\/50 {
  background-color: rgb(254 215 158 / 0.5);
}
.bg-amber\/55 {
  background-color: rgb(254 215 158 / 0.55);
}
.bg-amber\/60 {
  background-color: rgb(254 215 158 / 0.6);
}
.bg-amber\/65 {
  background-color: rgb(254 215 158 / 0.65);
}
.bg-amber\/70 {
  background-color: rgb(254 215 158 / 0.7);
}
.bg-amber\/75 {
  background-color: rgb(254 215 158 / 0.75);
}
.bg-amber\/80 {
  background-color: rgb(254 215 158 / 0.8);
}
.bg-amber\/85 {
  background-color: rgb(254 215 158 / 0.85);
}
.bg-amber\/90 {
  background-color: rgb(254 215 158 / 0.9);
}
.bg-amber\/95 {
  background-color: rgb(254 215 158 / 0.95);
}
.bg-apricot {
  --tw-bg-opacity: 1;
  background-color: rgb(254 171 139 / var(--tw-bg-opacity, 1));
}
.bg-apricot\/0 {
  background-color: rgb(254 171 139 / 0);
}
.bg-apricot\/10 {
  background-color: rgb(254 171 139 / 0.1);
}
.bg-apricot\/100 {
  background-color: rgb(254 171 139 / 1);
}
.bg-apricot\/15 {
  background-color: rgb(254 171 139 / 0.15);
}
.bg-apricot\/20 {
  background-color: rgb(254 171 139 / 0.2);
}
.bg-apricot\/25 {
  background-color: rgb(254 171 139 / 0.25);
}
.bg-apricot\/30 {
  background-color: rgb(254 171 139 / 0.3);
}
.bg-apricot\/35 {
  background-color: rgb(254 171 139 / 0.35);
}
.bg-apricot\/40 {
  background-color: rgb(254 171 139 / 0.4);
}
.bg-apricot\/45 {
  background-color: rgb(254 171 139 / 0.45);
}
.bg-apricot\/5 {
  background-color: rgb(254 171 139 / 0.05);
}
.bg-apricot\/50 {
  background-color: rgb(254 171 139 / 0.5);
}
.bg-apricot\/55 {
  background-color: rgb(254 171 139 / 0.55);
}
.bg-apricot\/60 {
  background-color: rgb(254 171 139 / 0.6);
}
.bg-apricot\/65 {
  background-color: rgb(254 171 139 / 0.65);
}
.bg-apricot\/70 {
  background-color: rgb(254 171 139 / 0.7);
}
.bg-apricot\/75 {
  background-color: rgb(254 171 139 / 0.75);
}
.bg-apricot\/80 {
  background-color: rgb(254 171 139 / 0.8);
}
.bg-apricot\/85 {
  background-color: rgb(254 171 139 / 0.85);
}
.bg-apricot\/90 {
  background-color: rgb(254 171 139 / 0.9);
}
.bg-apricot\/95 {
  background-color: rgb(254 171 139 / 0.95);
}
.bg-base {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-rose {
  --tw-bg-opacity: 1;
  background-color: rgb(254 190 191 / var(--tw-bg-opacity, 1));
}
.bg-rose\/0 {
  background-color: rgb(254 190 191 / 0);
}
.bg-rose\/10 {
  background-color: rgb(254 190 191 / 0.1);
}
.bg-rose\/100 {
  background-color: rgb(254 190 191 / 1);
}
.bg-rose\/15 {
  background-color: rgb(254 190 191 / 0.15);
}
.bg-rose\/20 {
  background-color: rgb(254 190 191 / 0.2);
}
.bg-rose\/25 {
  background-color: rgb(254 190 191 / 0.25);
}
.bg-rose\/30 {
  background-color: rgb(254 190 191 / 0.3);
}
.bg-rose\/35 {
  background-color: rgb(254 190 191 / 0.35);
}
.bg-rose\/40 {
  background-color: rgb(254 190 191 / 0.4);
}
.bg-rose\/45 {
  background-color: rgb(254 190 191 / 0.45);
}
.bg-rose\/5 {
  background-color: rgb(254 190 191 / 0.05);
}
.bg-rose\/50 {
  background-color: rgb(254 190 191 / 0.5);
}
.bg-rose\/55 {
  background-color: rgb(254 190 191 / 0.55);
}
.bg-rose\/60 {
  background-color: rgb(254 190 191 / 0.6);
}
.bg-rose\/65 {
  background-color: rgb(254 190 191 / 0.65);
}
.bg-rose\/70 {
  background-color: rgb(254 190 191 / 0.7);
}
.bg-rose\/75 {
  background-color: rgb(254 190 191 / 0.75);
}
.bg-rose\/80 {
  background-color: rgb(254 190 191 / 0.8);
}
.bg-rose\/85 {
  background-color: rgb(254 190 191 / 0.85);
}
.bg-rose\/90 {
  background-color: rgb(254 190 191 / 0.9);
}
.bg-rose\/95 {
  background-color: rgb(254 190 191 / 0.95);
}
.bg-sage {
  --tw-bg-opacity: 1;
  background-color: rgb(193 222 166 / var(--tw-bg-opacity, 1));
}
.bg-sage\/0 {
  background-color: rgb(193 222 166 / 0);
}
.bg-sage\/10 {
  background-color: rgb(193 222 166 / 0.1);
}
.bg-sage\/100 {
  background-color: rgb(193 222 166 / 1);
}
.bg-sage\/15 {
  background-color: rgb(193 222 166 / 0.15);
}
.bg-sage\/20 {
  background-color: rgb(193 222 166 / 0.2);
}
.bg-sage\/25 {
  background-color: rgb(193 222 166 / 0.25);
}
.bg-sage\/30 {
  background-color: rgb(193 222 166 / 0.3);
}
.bg-sage\/35 {
  background-color: rgb(193 222 166 / 0.35);
}
.bg-sage\/40 {
  background-color: rgb(193 222 166 / 0.4);
}
.bg-sage\/45 {
  background-color: rgb(193 222 166 / 0.45);
}
.bg-sage\/5 {
  background-color: rgb(193 222 166 / 0.05);
}
.bg-sage\/50 {
  background-color: rgb(193 222 166 / 0.5);
}
.bg-sage\/55 {
  background-color: rgb(193 222 166 / 0.55);
}
.bg-sage\/60 {
  background-color: rgb(193 222 166 / 0.6);
}
.bg-sage\/65 {
  background-color: rgb(193 222 166 / 0.65);
}
.bg-sage\/70 {
  background-color: rgb(193 222 166 / 0.7);
}
.bg-sage\/75 {
  background-color: rgb(193 222 166 / 0.75);
}
.bg-sage\/80 {
  background-color: rgb(193 222 166 / 0.8);
}
.bg-sage\/85 {
  background-color: rgb(193 222 166 / 0.85);
}
.bg-sage\/90 {
  background-color: rgb(193 222 166 / 0.9);
}
.bg-sage\/95 {
  background-color: rgb(193 222 166 / 0.95);
}
.bg-sand {
  --tw-bg-opacity: 1;
  background-color: rgb(233 215 203 / var(--tw-bg-opacity, 1));
}
.bg-sand\/0 {
  background-color: rgb(233 215 203 / 0);
}
.bg-sand\/10 {
  background-color: rgb(233 215 203 / 0.1);
}
.bg-sand\/100 {
  background-color: rgb(233 215 203 / 1);
}
.bg-sand\/15 {
  background-color: rgb(233 215 203 / 0.15);
}
.bg-sand\/20 {
  background-color: rgb(233 215 203 / 0.2);
}
.bg-sand\/25 {
  background-color: rgb(233 215 203 / 0.25);
}
.bg-sand\/30 {
  background-color: rgb(233 215 203 / 0.3);
}
.bg-sand\/35 {
  background-color: rgb(233 215 203 / 0.35);
}
.bg-sand\/40 {
  background-color: rgb(233 215 203 / 0.4);
}
.bg-sand\/45 {
  background-color: rgb(233 215 203 / 0.45);
}
.bg-sand\/5 {
  background-color: rgb(233 215 203 / 0.05);
}
.bg-sand\/50 {
  background-color: rgb(233 215 203 / 0.5);
}
.bg-sand\/55 {
  background-color: rgb(233 215 203 / 0.55);
}
.bg-sand\/60 {
  background-color: rgb(233 215 203 / 0.6);
}
.bg-sand\/65 {
  background-color: rgb(233 215 203 / 0.65);
}
.bg-sand\/70 {
  background-color: rgb(233 215 203 / 0.7);
}
.bg-sand\/75 {
  background-color: rgb(233 215 203 / 0.75);
}
.bg-sand\/80 {
  background-color: rgb(233 215 203 / 0.8);
}
.bg-sand\/85 {
  background-color: rgb(233 215 203 / 0.85);
}
.bg-sand\/90 {
  background-color: rgb(233 215 203 / 0.9);
}
.bg-sand\/95 {
  background-color: rgb(233 215 203 / 0.95);
}
.bg-sky {
  --tw-bg-opacity: 1;
  background-color: rgb(202 224 245 / var(--tw-bg-opacity, 1));
}
.bg-sky\/0 {
  background-color: rgb(202 224 245 / 0);
}
.bg-sky\/10 {
  background-color: rgb(202 224 245 / 0.1);
}
.bg-sky\/100 {
  background-color: rgb(202 224 245 / 1);
}
.bg-sky\/15 {
  background-color: rgb(202 224 245 / 0.15);
}
.bg-sky\/20 {
  background-color: rgb(202 224 245 / 0.2);
}
.bg-sky\/25 {
  background-color: rgb(202 224 245 / 0.25);
}
.bg-sky\/30 {
  background-color: rgb(202 224 245 / 0.3);
}
.bg-sky\/35 {
  background-color: rgb(202 224 245 / 0.35);
}
.bg-sky\/40 {
  background-color: rgb(202 224 245 / 0.4);
}
.bg-sky\/45 {
  background-color: rgb(202 224 245 / 0.45);
}
.bg-sky\/5 {
  background-color: rgb(202 224 245 / 0.05);
}
.bg-sky\/50 {
  background-color: rgb(202 224 245 / 0.5);
}
.bg-sky\/55 {
  background-color: rgb(202 224 245 / 0.55);
}
.bg-sky\/60 {
  background-color: rgb(202 224 245 / 0.6);
}
.bg-sky\/65 {
  background-color: rgb(202 224 245 / 0.65);
}
.bg-sky\/70 {
  background-color: rgb(202 224 245 / 0.7);
}
.bg-sky\/75 {
  background-color: rgb(202 224 245 / 0.75);
}
.bg-sky\/80 {
  background-color: rgb(202 224 245 / 0.8);
}
.bg-sky\/85 {
  background-color: rgb(202 224 245 / 0.85);
}
.bg-sky\/90 {
  background-color: rgb(202 224 245 / 0.9);
}
.bg-sky\/95 {
  background-color: rgb(202 224 245 / 0.95);
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.pt-2 {
  padding-top: 0.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.uppercase {
  text-transform: uppercase;
}
.leading-6 {
  line-height: 1.5rem;
}
.text-base {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-contrast {
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
}
.text-muted {
  --tw-text-opacity: 1;
  color: rgb(116 116 116 / var(--tw-text-opacity, 1));
}
.opacity-60 {
  opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * 1. Fontes da marca — Zain (UI/corpo) + Caprasimo (display)          *
 *    Subconjunto latin/latin-ext, baixado do Google Fonts.            *
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 2. Camada base                                                      *
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 3. Componentes                                                      *
 * ------------------------------------------------------------------ */

@media not all and (min-width: 1024px) {

  .max-lg\:mt-0 {
    margin-top: 0px;
  }

  .max-lg\:mt-2 {
    margin-top: 0.5rem;
  }
}

@media (min-width: 640px) {

  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sm\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .sm\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .md\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:text-left {
    text-align: left;
  }
}

@media (min-width: 1024px) {

  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }

  .lg\:inline {
    display: inline;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .lg\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/**
 * Swiper 14.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 26, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */