/* =========================================================================
   GETU Shopping — launches (VinO₂, Mokaflor, coffee page, homepage carousel)
   WordPress build of assets/css/launches.css (approved 2026-10-30; /cafes/ added 2026-11-01).
   Loaded only on the front page, /mokaflor/, /vino2/, /cafes-cold-brew/ and /cafes/
   (getu-launches.php). Every rule is scoped to .lx-* classes, .lx-scope or
   .lx-modal; there is no reset and no second Tailwind layer.
   ========================================================================= */
/* Brand tokens used by the lx components (getu-chrome.css defines the shadow/ease ones). */
.lx-scope, .lx-modal {
  --wine-900: #2A0E14; --wine-700: #5A1320; --wine-600: #6E1A2A; --wine-500: #8B2436;
  --gold: #C8A45D; --cream: #F6F1EA; --ink: #241015;
  --shadow-raised: 0 1px 2px rgba(42,14,20,.05), 0 4px 12px rgba(42,14,20,.06);
  --shadow-float: 0 6px 16px rgba(42,14,20,.08), 0 18px 40px rgba(42,14,20,.12);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* Utilities used by the approved markup that the live getu-tailwind.css build does not contain. */
.lx-scope .mb-7, .lx-modal .mb-7 { margin-bottom: 1.75rem; }
.lx-scope .pl-7 { padding-left: 1.75rem; }
.lx-scope .pt-9 { padding-top: 2.25rem; }
.lx-scope .self-start { align-self: flex-start; }
.lx-scope .scroll-mt-24 { scroll-margin-top: 6rem; }
.lx-modal .leading-\[\.98\] { line-height: .98; }
.lx-modal .text-\[54px\] { font-size: 54px; }
.lx-modal .text-white\/90 { color: rgb(255 255 255 / .9); }
@media (min-width: 1024px) {
  .lx-scope .lg\:items-end { align-items: flex-end; }
  .lx-scope .lg\:justify-between { justify-content: space-between; }
  .lx-scope .lg\:self-auto { align-self: auto; }
  .lx-scope .lg\:mb-2 { margin-bottom: .5rem; }
  .lx-scope .lg\:mb-8 { margin-bottom: 2rem; }
  .lx-scope .lg\:mb-9 { margin-bottom: 2.25rem; }
  .lx-scope .lg\:mb-10 { margin-bottom: 2.5rem; }
  .lx-scope .lg\:pb-8 { padding-bottom: 2rem; }
  .lx-scope .lg\:pb-14 { padding-bottom: 3.5rem; }
  .lx-scope .lg\:pt-6 { padding-top: 1.5rem; }
  .lx-scope .lg\:pt-8 { padding-top: 2rem; }
  .lx-scope .lg\:pt-11 { padding-top: 2.75rem; }
  .lx-scope .lg\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .lx-scope .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; }
  .lx-scope .lg\:text-\[20px\] { font-size: 20px; }
}
/* Production-only parts of the dialog and the VinO₂ card. */
.lx-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lx-error--form { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: #FDECEA; }
.lx-error--form .lx-link { white-space: nowrap; }
.lx-submit[disabled] { opacity: .7; cursor: progress; transform: none; }
.lx-vino-card__price { font-family: "Cormorant Garamond", Georgia, serif; font-size: 30px; color: var(--wine-700); margin-bottom: 12px; }
.lx-vino-card__price[hidden] { display: none; }
.lx-btn[disabled] { cursor: not-allowed; }
/* The dialog title and the done title only receive focus programmatically (not interactive);
   the site-wide focus ring must not frame them. */
.lx-modal .lx-modal__title:focus, .lx-modal .lx-modal__title:focus-visible,
.lx-modal .lx-done__title:focus, .lx-modal .lx-done__title:focus-visible { outline: none !important; box-shadow: none !important; }

/* /cafes/ (2026-11-01): utilities used by the approved markup that getu-tailwind.css does not contain. */
@media (min-width: 1024px) {
  .lx-scope .lg\:mt-1 { margin-top: .25rem; }
  .lx-scope .lg\:mt-2 { margin-top: .5rem; }
  .lx-scope .lg\:mb-3 { margin-bottom: .75rem; }
  .lx-scope .lg\:mb-6 { margin-bottom: 1.5rem; }
  .lx-scope .lg\:px-\[52px\] { padding-left: 52px; padding-right: 52px; }
}

:root {
  --lx-oro: #E2B13C;
  --lx-rosso: #C9252F;
  --lx-nero: #1F1A1B;
  --lx-blu: #3456D6;
  --lx-white: #FFFFFF;
  --lx-line: rgba(42, 14, 20, .10);
  --lx-muted: rgba(36, 16, 21, .62);
  --lx-radius-lg: 20px;
  --lx-radius: 16px;
  --lx-shadow-card: 0 1px 2px rgba(42, 14, 20, .04), 0 10px 28px rgba(42, 14, 20, .06);
  --lx-shadow-card-hover: 0 2px 6px rgba(42, 14, 20, .06), 0 22px 44px rgba(42, 14, 20, .11);
  --lx-panel: linear-gradient(135deg, #2A0E14 0%, #3E1019 48%, #561726 100%);
}

/* ---------- Layout ---------- */
.lx-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 20px; }
.lx-wide { width: 100%; max-width: 1392px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 640px) { .lx-wide { padding-inline: 24px; } }
.lx-section { padding-block: 44px; }
@media (min-width: 1024px) { .lx-section { padding-block: 48px 52px; } }
.lx-section--tight { padding-block: 24px; }
@media (min-width: 1024px) { .lx-section--tight { padding-block: 28px; } }

/* ---------- Type ---------- */
.lx-kicker { font-family: "Hanken Grotesk", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; line-height: 1.4; }
.lx-kicker--wine { color: var(--wine-500); }
.lx-kicker--gold { color: #E0BD6E; }
.lx-display { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; }
.lx-h2 { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(34px, 4.5vw, 60px); line-height: 1.03; color: var(--wine-900); }
.lx-h2--wine { color: var(--wine-600); }
.lx-lead { font-size: 16.5px; line-height: 1.6; color: var(--lx-muted); }
@media (min-width: 1024px) { .lx-lead { font-size: 19px; } }
sub.lx-sub { font-size: .56em; bottom: -.12em; letter-spacing: 0; margin-left: .02em; } /* the 2 in VinO₂ */

/* ---------- Buttons (extend .btn from style.css) ---------- */
.lx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  border-radius: 9999px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer;
  transition: transform .4s var(--ease-spring), box-shadow .35s var(--ease-out), background-color .25s, color .25s, border-color .25s; }
.lx-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lx-btn:active { transform: translateY(1px) scale(.985); }
.lx-btn svg { flex-shrink: 0; transition: transform .35s var(--ease-spring); }
.lx-btn:hover svg.lx-arrow { transform: translateX(3px); }
.lx-btn:hover svg.lx-arrow-down { transform: translateY(2px); }
.lx-btn--gold { background: #D7B46A; color: var(--wine-900); box-shadow: 0 1px 2px rgba(20, 6, 10, .18), 0 8px 22px rgba(200, 164, 93, .28); }
.lx-btn--gold:hover { background: #E2C27E; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20, 6, 10, .2), 0 14px 30px rgba(200, 164, 93, .34); }
.lx-btn--ghost { color: #FFF; border: 1px solid rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .02); }
.lx-btn--ghost:hover { border-color: #E0BD6E; color: #F3D9A0; transform: translateY(-2px); }
.lx-btn--wine { background: var(--wine-600); color: #FFF; box-shadow: var(--shadow-raised); }
.lx-btn--wine:hover { background: var(--wine-500); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.lx-btn--outline { color: var(--wine-600); border: 1.5px solid rgba(110, 26, 42, .55); background: transparent; }
.lx-btn--outline:hover { background: var(--wine-600); border-color: var(--wine-600); color: #FFF; transform: translateY(-1px); }
.lx-btn--outline[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.lx-btn--outline[aria-disabled="true"]:hover { background: transparent; color: var(--wine-600); border-color: rgba(110, 26, 42, .55); transform: none; }
.lx-btn--lg { padding: 16px 30px; font-size: 16px; }
.lx-btn--md { padding: 13px 24px; font-size: 15px; }
.lx-btn--sm { padding: 10px 18px; font-size: 13.5px; }
.lx-btn--block { width: 100%; }

.lx-link { color: var(--wine-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
.lx-link:hover { color: var(--wine-500); text-decoration-thickness: 2px; }
.lx-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* Secondary text link on a dark hero (e.g. "Conheça os blends") */
.lx-textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15.5px; font-weight: 600; color: rgba(255, 255, 255, .88);
  text-decoration: underline; text-decoration-color: rgba(224, 189, 110, .6); text-underline-offset: 5px; text-decoration-thickness: 1px; border-radius: 6px; transition: color .2s; }
.lx-textlink:hover { color: #F3D9A0; text-decoration-color: #F3D9A0; }
.lx-textlink:hover svg { transform: translateY(2px); }
.lx-textlink svg { transition: transform .35s var(--ease-spring); }
.lx-textlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lx-textlink:active { color: #E0BD6E; }

/* ---------- Breadcrumb ---------- */
.lx-crumbs { font-size: 13px; color: rgba(246, 241, 234, .78); }
.lx-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.lx-crumbs li + li::before { content: "/"; margin-right: .4rem; color: rgba(246, 241, 234, .5); }
.lx-crumbs a { color: inherit; transition: color .2s; }
.lx-crumbs a:hover { color: #F3D9A0; }
.lx-crumbs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* =========================================================================
   Landing hero (Mokaflor, VinO₂, coffee page)
   Desktop: text on a deep wine panel, photo on the right fading into it.
   Mobile/tablet: photo on top, wine panel with the text below.
   ========================================================================= */
.lx-hero { position: relative; overflow: hidden; color: #FFF; background: #2E0D15; isolation: isolate; }
.lx-hero__media { position: relative; height: clamp(230px, 58vw, 440px); }
.lx-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46, 13, 21, 0) 45%, rgba(46, 13, 21, .7) 80%, #2E0D15 100%); }
.lx-hero__content { position: relative; z-index: 2; padding-top: 4px; padding-bottom: 44px; }
.lx-hero__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.025em;
  font-size: clamp(46px, 11vw, 74px); line-height: .98; }
.lx-hero__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(38px, 8.6vw, 58px); line-height: 1; }
.lx-hero__text { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); max-width: 30rem; }
.lx-hero__crumbs-mobile { padding-top: 20px; }
@media (min-width: 1024px) {
  .lx-hero { min-height: clamp(520px, 45vw, 640px); display: flex; align-items: stretch; }
  .lx-hero--compact { min-height: clamp(440px, 37vw, 540px); }
  .lx-hero--compact .lx-hero__content { padding-top: 28px; padding-bottom: 48px; }
  .lx-hero__media { position: absolute; inset: 0 0 0 auto; width: 64%; height: auto; z-index: 0; }
  .lx-hero__media::after { background: linear-gradient(90deg, #2E0D15 0%, rgba(46, 13, 21, .82) 12%, rgba(46, 13, 21, .35) 30%, rgba(46, 13, 21, 0) 52%); }
  .lx-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(70% 90% at 0% 0%, rgba(110, 26, 42, .55) 0%, rgba(46, 13, 21, 0) 60%),
                radial-gradient(60% 70% at 18% 100%, rgba(139, 36, 54, .35) 0%, rgba(46, 13, 21, 0) 65%); }
  .lx-hero__content { display: flex; flex-direction: column; justify-content: center; padding-top: 26px; padding-bottom: 46px; }
  .lx-hero--notify .lx-hero__content { padding-bottom: 40px; } /* Mokaflor hero: extra text link under the buttons */
  /* Delivered mockup crops already end in wine at their edge: a short blend keeps the subject unshaded. */
  .lx-hero--crop .lx-hero__media::after { background: linear-gradient(90deg, #2E0D15 0%, rgba(46, 13, 21, .55) 3%, rgba(46, 13, 21, 0) 10%); }
  /* Mokaflor hero: the delivered crop is wider than this hero, so a full-height crop would cut
     the outer bags. Show the whole photo (four bags + cup) at its own ratio, anchored at the
     bottom, with its top edge fading into the wine panel. */
  .lx-hero--fit .lx-hero__media img { inset: auto 0 0 0; height: auto; max-height: 100%; aspect-ratio: 2400 / 1416;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
  .lx-hero__inner { max-width: 480px; }
  .lx-hero__inner--wide { max-width: 620px; }
  .lx-hero__name { font-size: clamp(50px, 4.4vw, 64px); }
  .lx-hero__title { font-size: clamp(64px, 6.4vw, 92px); line-height: .92; }
  .lx-hero__text { font-size: 20px; max-width: 25rem; }
}
/* Coffee page hero (cafes.html, 2026-11-01): a standalone photo with a dark left side, so the
   default long blend applies (no --crop); a little lower than the landing heroes, title on two lines. */
@media (min-width: 1024px) {
  .lx-hero--cafes { min-height: clamp(430px, 31.5vw, 560px); }
  .lx-hero--cafes .lx-hero__inner--wide { max-width: 700px; }
  .lx-hero--cafes .lx-hero__title { font-size: clamp(62px, 5.4vw, 88px); line-height: .94; }
  .lx-hero--cafes .lx-hero__media img { object-position: 50% 62%; }
  .lx-hero--cafes .lx-hero__content { padding-top: 20px; padding-bottom: 38px; }
}

/* ---------- Benefit strip under a hero ---------- */
.lx-benefits { background: #FBF8F3; border-bottom: 1px solid var(--lx-line); }
.lx-benefits__grid { display: grid; grid-template-columns: 1fr; }
.lx-benefit { display: flex; align-items: center; gap: 16px; padding: 18px 0; }
.lx-benefit + .lx-benefit { border-top: 1px solid var(--lx-line); }
.lx-benefit__icon { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 9999px;
  background: rgba(110, 26, 42, .06); color: var(--wine-600); }
.lx-benefit__title { font-weight: 700; font-size: 16px; color: var(--wine-700); line-height: 1.3; }
.lx-benefit__text { font-size: 14.5px; color: var(--lx-muted); line-height: 1.45; margin-top: 2px; }
@media (min-width: 900px) {
  .lx-benefits__grid { grid-template-columns: repeat(3, 1fr); }
  .lx-benefit { padding: 24px 28px; }
  .lx-benefit:first-child { padding-left: 0; }
  .lx-benefit + .lx-benefit { border-top: 0; border-left: 1px solid var(--lx-line); }
}

/* =========================================================================
   Homepage launch carousel (one carousel, two slides)
   All slides share ONE grid cell, so the stage is always as tall as the
   tallest slide: switching never changes the section height.
   ========================================================================= */
.lx-launches { padding-top: 56px; padding-bottom: 8px; }
@media (min-width: 1024px) { .lx-launches { padding-top: 76px; } }
.lx-carousel { position: relative; }
.lx-carousel__stage { display: grid; border-radius: var(--lx-radius-lg); overflow: hidden; touch-action: pan-y;
  box-shadow: 0 2px 6px rgba(42, 14, 20, .08), 0 24px 54px rgba(42, 14, 20, .14); background: #2E0D15; }
.lx-slide { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr; min-width: 0;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility 0s linear 0s; }
.lx-slide[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: translateX(var(--lx-shift, 24px));
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility 0s linear .4s; }
.lx-slide__panel { position: relative; color: #FFF; background: var(--lx-panel); padding: 26px 22px 30px; display: flex; flex-direction: column; justify-content: center; }
.lx-slide__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(80% 70% at 100% 0%, rgba(139, 36, 54, .45) 0%, rgba(42, 14, 20, 0) 60%); }
.lx-slide__panel > * { position: relative; z-index: 1; }
.lx-slide__meta { font-variant-numeric: lining-nums; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(21px, 5.4vw, 25px); line-height: 1.2; color: rgba(255, 255, 255, .92); margin-top: 10px; }
.lx-slide__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.025em;
  font-size: clamp(40px, 9.5vw, 58px); line-height: .98; margin-top: 10px; }
.lx-slide__text { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .86); margin-top: 14px; letter-spacing: .01em; }
.lx-slide__cta { margin-top: 22px; align-self: flex-start; }
.lx-slide__media { position: relative; order: -1; aspect-ratio: 16 / 10; overflow: hidden; background: #3A0F18; }
.lx-slide__media > img, .lx-slide__media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-slide__inset { position: absolute; right: 10px; bottom: 10px; width: 34%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden;
  border: 3px solid #FFF; box-shadow: 0 10px 26px rgba(20, 6, 10, .35); }
.lx-slide__inset img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .lx-slide__panel { padding: 34px 40px 38px; }
  .lx-slide__inset { right: 22px; bottom: 20px; width: 34%; }
}
@media (min-width: 1024px) {
  .lx-slide { grid-template-columns: 36% 1fr; grid-template-rows: none; min-height: 440px; }
  .lx-slide__media { order: 0; aspect-ratio: auto; }
  .lx-slide__panel { padding: 40px 44px 44px 9%; }
  .lx-slide__title { font-size: clamp(48px, 4.4vw, 62px); }
  .lx-slide__text { font-size: 18px; }
  .lx-slide__inset { width: 38%; right: 24px; bottom: 22px; }
}
.lx-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.lx-carousel__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9999px; color: var(--wine-700);
  border: 1.5px solid rgba(90, 19, 32, .55); background: transparent; cursor: pointer;
  transition: transform .35s var(--ease-spring), background-color .25s, color .25s, border-color .25s; }
.lx-carousel__arrow:hover { background: var(--wine-600); border-color: var(--wine-600); color: #FFF; transform: scale(1.06); }
.lx-carousel__arrow:active { transform: scale(.94); }
.lx-carousel__arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lx-carousel__tabs { display: flex; gap: 4px; }
.lx-carousel__tab { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 9999px;
  font-size: 15px; font-weight: 500; color: var(--wine-700); background: transparent; cursor: pointer; align-items: center;
  transition: background-color .25s, color .25s, transform .35s var(--ease-spring); }
.lx-carousel__tab:hover { background: rgba(110, 26, 42, .07); }
.lx-carousel__tab:active { transform: scale(.97); }
.lx-carousel__tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-carousel__tab[aria-selected="true"] { background: var(--wine-700); color: #FFF; }
.lx-carousel__num { font-variant-numeric: tabular-nums; font-size: 14px; opacity: .85; }
.lx-carousel__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================================
   Product cards
   ========================================================================= */
.lx-card { background: var(--lx-white); border-radius: var(--lx-radius); box-shadow: var(--lx-shadow-card); border: 1px solid rgba(42, 14, 20, .05);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.lx-card:hover { transform: translateY(-4px); box-shadow: var(--lx-shadow-card-hover); }

/* Mokaflor blend card — horizontal on phones, vertical from 640px */
.lx-blends { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .lx-blends { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .lx-blends { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.lx-blend { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px; align-items: center; }
.lx-blend__img { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #FFF; }
.lx-blend__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; mix-blend-mode: multiply; } /* near-white photo backdrop melts into the white card */
.lx-blend__body { display: flex; flex-direction: column; min-width: 0; }
.lx-blend__bar { display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--blend, var(--wine-600)); }
.lx-blend__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 29px; line-height: 1.05; color: var(--wine-900); margin-top: 10px; }
.lx-blend__mix { font-size: 14px; color: var(--lx-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.lx-blend__profile { font-size: 14.5px; font-weight: 600; color: rgba(36, 16, 21, .82); margin-top: 8px; }
.lx-blend__notes { font-size: 14px; line-height: 1.5; color: var(--lx-muted); margin-top: 4px; }
.lx-blend__cta { margin-top: 14px; }
@media (min-width: 640px) {
  .lx-blend { grid-template-columns: 1fr; gap: 0; padding: 18px 20px 22px; align-items: stretch; }
  .lx-blend__img { aspect-ratio: 1 / 1.1; background: #FFF; border-radius: 10px; }
  .lx-blend__bar { margin-top: 18px; }
  .lx-blend__body { flex: 1; }
  .lx-blend__cta { margin-top: auto; padding-top: 16px; }
}
@media (min-width: 1024px) {
  .lx-blend__name { font-size: 37px; }
  .lx-blend__mix { font-size: 16px; }
  .lx-blend__profile { font-size: 16.5px; margin-top: 10px; }
  .lx-blend__notes { font-size: 16px; }
  .lx-blend .lx-btn--sm { padding: 12px 18px; font-size: 15px; }
  .lx-blend--compact .lx-blend__name { font-size: 34px; }
}

/* Blend colour tokens */
.lx-blend--oro { --blend: var(--lx-oro); }
.lx-blend--rosso { --blend: var(--lx-rosso); }
.lx-blend--nero { --blend: var(--lx-nero); }
.lx-blend--blu { --blend: var(--lx-blu); }
.lx-dot { display: inline-block; width: 14px; height: 14px; border-radius: 9999px; background: var(--blend); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

/* Arte Café product card (horizontal) */
.lx-arte { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .lx-arte { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.lx-arte__card { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: 16px; padding: 10px; align-items: center; }
.lx-arte__img { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #EFE7DB; }
@media (min-width: 900px) { .lx-arte__card { grid-template-columns: minmax(0, 52%) 1fr; } .lx-arte__img { aspect-ratio: 3 / 4; } .lx-arte__name { font-size: clamp(28px, 2.9vw, 44px); } }
.lx-arte__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.lx-arte__card:hover .lx-arte__img img { transform: scale(1.04); }
.lx-arte__body { padding: 8px 8px 8px 0; min-width: 0; }
.lx-arte__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.015em; font-size: clamp(26px, 4vw, 34px); line-height: 1.04; color: var(--wine-900); margin-top: 8px; }
.lx-arte__spec { font-size: clamp(15px, 1.35vw, 18px); color: var(--lx-muted); margin-top: 8px; }
.lx-arte__cta { margin-top: 18px; white-space: nowrap; }
@media (max-width: 639px) { .lx-arte__cta.lx-btn--lg { padding: 12px 20px; font-size: 15px; } }
@media (min-width: 640px) { .lx-arte__card { gap: 26px; padding: 12px; } .lx-arte__body { padding-right: 18px; } }

/* VinO₂ product card + explanation */
.lx-vino { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 1024px) { .lx-vino { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; } .lx-vino__text { padding-top: 28px; } }
.lx-vino-card { padding: 14px 14px 22px; }
.lx-vino-card:hover { transform: none; }
.lx-vino-card__img { position: relative; aspect-ratio: 1 / 1.02; border-radius: 12px; overflow: hidden; background: #3A1A16; }
.lx-vino-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.lx-vino-card__body { padding: 0 8px; }
.lx-vino-card__bar { display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--wine-600); margin-top: 22px; }
.lx-vino-card__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(40px, 9vw, 50px); line-height: 1; color: var(--wine-900); margin-top: 12px; }
.lx-vino-card__type { font-size: 19px; color: var(--lx-muted); margin-top: 8px; }
.lx-vino-card__text { font-size: 16px; color: var(--lx-muted); margin-top: 6px; }
.lx-vino-card__cta { margin-top: 20px; }
@media (min-width: 640px) { .lx-vino-card { padding: 18px 18px 30px; } .lx-vino-card__body { padding: 0 18px; } }
@media (min-width: 640px) and (max-width: 1023px) {
  .lx-vino-card { display: grid; grid-template-columns: 44% 1fr; gap: 8px; align-items: center; padding: 16px; }
  .lx-vino-card__bar { margin-top: 0; }
}
.lx-preview-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45;
  color: #5A3A10; background: #FBF1DC; border: 1px dashed rgba(160, 120, 40, .55); }
.lx-preview-note[hidden] { display: none; }
.lx-preview-note.is-flash { animation: lx-flash .6s var(--ease-out); }
@keyframes lx-flash { 0% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 100% { transform: translateX(0); } }
.lx-features { display: grid; gap: 14px; margin-top: 28px; }
.lx-feature { display: flex; align-items: center; gap: 20px; font-size: 18px; font-weight: 500; color: var(--wine-600); }
.lx-feature__icon { flex-shrink: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 9999px; background: rgba(110, 26, 42, .07); color: var(--wine-600); }
@media (min-width: 1024px) { .lx-feature { font-size: 20px; } .lx-feature__icon { width: 76px; height: 76px; } .lx-feature__icon svg { width: 32px; height: 32px; } .lx-features { gap: 18px; margin-top: 34px; } }

/* =========================================================================
   Editorial / story / table / steps / gallery
   ========================================================================= */
.lx-story { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
.lx-story__img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #E9DCC7; }
.lx-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-story__text { padding-inline: 16px; }
@media (min-width: 640px) { .lx-story__text { padding-inline: 24px; } }
@media (min-width: 1024px) {
  /* Photo bleeds to the left viewport edge; text column aligns with the wide container. */
  .lx-story { grid-template-columns: 55% 1fr; gap: 56px; padding-right: max(24px, calc((100vw - 1344px) / 2)); }
  .lx-story__img { aspect-ratio: auto; height: clamp(300px, 27vw, 400px); border-radius: 0 var(--lx-radius-lg) var(--lx-radius-lg) 0; }
  .lx-story__text { padding-inline: 0; }
}
.lx-year { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; color: #D2AE62;
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 52px; line-height: 1; font-variant-numeric: lining-nums; }
.lx-year::before, .lx-year::after { content: ""; height: 1px; width: 72px; background: rgba(200, 164, 93, .7); }

.lx-table { width: 100%; max-width: 1080px; margin-inline: auto; background: var(--lx-white); border: 1px solid var(--lx-line);
  border-radius: 14px; overflow: hidden; border-collapse: separate; border-spacing: 0; font-size: 15px; box-shadow: var(--lx-shadow-card); }
.lx-table th, .lx-table td { text-align: left; padding: 13px 22px; border-bottom: 1px solid var(--lx-line); vertical-align: middle; }
.lx-table thead th { font-weight: 500; color: var(--lx-muted); background: #FDFBF8; }
.lx-table tbody tr:last-child > * { border-bottom: 0; }
.lx-table td + td, .lx-table th + th { border-left: 1px solid var(--lx-line); }
.lx-table__blend { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--wine-700); }
/* Phones: each row becomes a small card; roles on the markup keep table semantics. */
@media (max-width: 639px) {
  .lx-table, .lx-table tbody, .lx-table tr, .lx-table th, .lx-table td { display: block; }
  .lx-table { background: transparent; border: 0; box-shadow: none; }
  .lx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lx-table tbody { display: grid; gap: 10px; }
  .lx-table tbody tr { background: var(--lx-white); border: 1px solid var(--lx-line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--lx-shadow-card); }
  .lx-table th, .lx-table td { padding: 0; border: 0 !important; }
  .lx-table td { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 14.5px; }
  .lx-table td::before { content: attr(data-label); color: var(--lx-muted); }
}

.lx-steps { display: grid; grid-template-columns: 1fr; }
.lx-step { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 22px 0; align-items: end; }
.lx-step + .lx-step { border-top: 1px solid var(--lx-line); }
.lx-step__num { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 76px; line-height: .8; color: #CDA85B; font-variant-numeric: lining-nums; }
.lx-step__icon { color: var(--wine-600); }
.lx-step__icon svg { width: 46px; height: 46px; }
.lx-step__body { grid-column: 1 / -1; padding-left: 64px; }
.lx-step__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--wine-600); margin-top: 10px; }
.lx-step__text { font-size: 16px; line-height: 1.5; color: var(--lx-muted); margin-top: 4px; }
@media (min-width: 768px) {
  .lx-steps { grid-template-columns: repeat(3, 1fr); }
  .lx-step { padding: 6px 22px 10px; column-gap: 14px; justify-content: start; }
  .lx-step + .lx-step { border-top: 0; border-left: 1px solid var(--lx-line); }
  .lx-step__num { font-size: 72px; }
  .lx-step__icon svg { width: 54px; height: 54px; }
  .lx-step__body { padding-left: 0; }
}
@media (min-width: 1024px) {
  .lx-step { padding: 6px 28px 10px; column-gap: 18px; justify-content: center; }
  .lx-step__num { font-size: 96px; }
  .lx-step__icon svg { width: 72px; height: 72px; }
  .lx-step__body { padding-left: 80px; }
  .lx-step__title { font-size: 34px; }
}

.lx-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .lx-gallery { grid-template-columns: 1.85fr 1fr; gap: 14px; } }
.lx-gallery__img { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 16 / 10; background: #E9DCC7; }
.lx-gallery__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.lx-gallery figure:hover .lx-gallery__img img { transform: scale(1.03); }
@media (min-width: 768px) { .lx-gallery__img { aspect-ratio: auto; height: 340px; } }
@media (min-width: 1280px) { .lx-gallery__img { height: 380px; } }
.lx-gallery figcaption { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; line-height: 1.2; color: var(--wine-600); margin-top: 10px; padding-left: 10px; }

/* =========================================================================
   FAQ (native details/summary — keyboard and screen reader support built in)
   ========================================================================= */
.lx-faq { max-width: 1250px; margin-inline: auto; background: var(--lx-white); border: 1px solid var(--lx-line); border-radius: var(--lx-radius); overflow: hidden; }
.lx-faq__item + .lx-faq__item { border-top: 1px solid var(--lx-line); }
.lx-faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer;
  padding: 18px 20px; font-weight: 600; font-size: 15.5px; line-height: 1.4; color: var(--wine-700); transition: background-color .2s; }
.lx-faq__q::-webkit-details-marker { display: none; }
.lx-faq__q:hover { background: rgba(110, 26, 42, .035); }
.lx-faq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.lx-faq__icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; color: var(--wine-600); }
.lx-faq__icon::before, .lx-faq__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease-out), opacity .25s; }
.lx-faq__icon::after { transform: rotate(90deg); }
details[open] > .lx-faq__q .lx-faq__icon::after { transform: rotate(0deg); opacity: 0; }
.lx-faq__a { padding: 0 20px 18px; font-size: 15px; line-height: 1.6; color: var(--lx-muted); max-width: 64rem; }
@media (min-width: 768px) { .lx-faq__q { padding: 16px 36px; font-size: 16px; } .lx-faq__a { padding: 0 36px 18px; font-size: 15.5px; } }
/* Coffee-page variant: separate rows with a leading chevron */
.lx-faq--rows { background: transparent; border: 0; border-radius: 0; overflow: visible; display: grid; gap: 8px; }
.lx-faq--rows .lx-faq__item { background: var(--lx-white); border: 1px solid rgba(42, 14, 20, .06); border-radius: 12px; box-shadow: 0 1px 2px rgba(42, 14, 20, .03); }
.lx-faq--rows .lx-faq__item + .lx-faq__item { border-top: 1px solid rgba(42, 14, 20, .06); }
.lx-faq--rows .lx-faq__q { color: var(--wine-500); border-radius: 12px; }
.lx-faq__chev { flex-shrink: 0; color: var(--wine-500); transition: transform .35s var(--ease-out); }
details[open] > .lx-faq__q .lx-faq__chev { transform: rotate(90deg); }
.lx-faq--rows .lx-faq__a { padding-left: 54px; }
@media (min-width: 768px) { .lx-faq--rows .lx-faq__q { padding: 16px 32px; } .lx-faq--rows .lx-faq__a { padding: 0 32px 18px 66px; } }

/* =========================================================================
   Contact banner (wine panel + photo)
   ========================================================================= */
.lx-contact { position: relative; overflow: hidden; border-radius: var(--lx-radius-lg); color: #FFF; background: #3A0F18; isolation: isolate;
  box-shadow: 0 2px 6px rgba(42, 14, 20, .1), 0 24px 54px rgba(42, 14, 20, .16); }
.lx-contact__media { position: relative; height: 210px; }
.lx-contact__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-contact__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 15, 24, 0) 40%, #3A0F18 100%); }
.lx-contact__body { position: relative; z-index: 1; padding: 6px 22px 28px; }
.lx-contact__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; font-size: clamp(32px, 4.1vw, 56px); line-height: 1.04; margin-top: 10px; }
.lx-contact__text { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: rgba(255, 255, 255, .86); margin-top: 10px; max-width: 30rem; }
.lx-contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.lx-contact__actions--stack { flex-direction: column; align-items: flex-start; gap: 14px; }
.lx-tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 500; letter-spacing: .01em; color: #FFF; border-radius: 6px; padding-inline: 4px;
  transition: color .2s; font-variant-numeric: tabular-nums; }
.lx-tel:hover { color: #F3D9A0; }
.lx-tel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 900px) {
  .lx-contact { min-height: 300px; display: flex; align-items: center; }
  .lx-contact__media { position: absolute; inset: 0 0 0 auto; width: 62%; height: auto; z-index: -1; }
  .lx-contact__media::after { background: linear-gradient(90deg, #3A0F18 0%, rgba(58, 15, 24, .7) 18%, rgba(58, 15, 24, 0) 52%); }
  .lx-contact--cafes .lx-contact__media img { object-position: 50% 46%; }
  .lx-contact--crop .lx-contact__media::after { background: linear-gradient(90deg, #3A0F18 0%, rgba(58, 15, 24, .6) 4%, rgba(58, 15, 24, 0) 14%); }
  .lx-contact::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(60% 120% at 0% 0%, rgba(110, 26, 42, .55) 0%, rgba(58, 15, 24, 0) 70%); }
  .lx-contact__body { padding: 34px 56px 38px 8%; max-width: 660px; }
}

/* =========================================================================
   Coffee page: section navigation + recipes banner
   ========================================================================= */
.lx-secnav { background: #FBF8F3; border-bottom: 1px solid var(--lx-line); }
.lx-secnav ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-secnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 12px 6px;
  font-size: 12.5px; font-weight: 600; color: var(--wine-500); text-align: center; line-height: 1.25; transition: background-color .2s, color .2s; }
.lx-secnav a::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--wine-600);
  transform: scaleX(0); transition: transform .35s var(--ease-out); }
.lx-secnav a:hover { background: rgba(110, 26, 42, .035); }
.lx-secnav a:hover::after, .lx-secnav a.is-lead::after { transform: scaleX(1); }
.lx-secnav a:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.lx-secnav a:active { background: rgba(110, 26, 42, .07); }
@media (min-width: 768px) {
  .lx-secnav li + li a::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--lx-line); }
  .lx-secnav a { flex-direction: row; gap: 14px; font-size: 15.5px; min-height: 84px; }
  .lx-secnav svg { width: 32px; height: 32px; }
}

.lx-recipes { position: relative; overflow: hidden; border-radius: var(--lx-radius-lg); color: #FFF; background: #3A0F18; isolation: isolate;
  box-shadow: 0 2px 6px rgba(42, 14, 20, .1), 0 24px 54px rgba(42, 14, 20, .16); }
.lx-recipes__media { position: relative; height: 230px; }
.lx-recipes__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lx-recipes__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58, 15, 24, 0) 45%, #3A0F18 100%); }
.lx-recipes__body { position: relative; padding: 8px 22px 30px; }
@media (min-width: 900px) {
  .lx-recipes { min-height: 340px; display: flex; align-items: center; justify-content: flex-end; }
  .lx-recipes__media { position: absolute; inset: 0 auto 0 0; width: 60%; height: auto; z-index: -1; }
  .lx-recipes__media::after { background: linear-gradient(270deg, #3A0F18 0%, rgba(58, 15, 24, .6) 4%, rgba(58, 15, 24, 0) 14%); }
  .lx-recipes::before { content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(55% 120% at 100% 0%, rgba(110, 26, 42, .55) 0%, rgba(58, 15, 24, 0) 70%); }
  .lx-recipes__body { width: 40%; padding: 40px 5% 44px 3%; }
}

/* Coffee page section rhythm: ONE gap between two blocks (nav → Mokaflor → Arte Café → recipes →
   FAQ → contact → footer), set once as a margin on the later block. The sections carry no vertical
   padding of their own, so paddings can never add up to a double gap. Values follow the 4px spacing
   scale (Tailwind 8 / 12 / 16): phones 32px, tablets 48px, desktop (≥1024px) 64px. Spacing inside a
   section (kicker, heading, intro, cards) is untouched. */
.lx-cafes { --lx-cafes-gap: 32px; }
@media (min-width: 768px) { .lx-cafes { --lx-cafes-gap: 48px; } }
@media (min-width: 1024px) { .lx-cafes { --lx-cafes-gap: 64px; } }
.lx-cafes .lx-cafes__section { margin-top: var(--lx-cafes-gap); }        /* the gap above every section */
.lx-cafes .lx-cafes__section--last { padding-bottom: var(--lx-cafes-gap); } /* last banner → footer */
/* .lx-cafes is <main> locally and the body class on WordPress (one Bricks wrapper per section),
   so these rules use descendant selectors only. */
/* Coffee page only: Arte Café photos on white (approved 2026-11-01), treated like the Mokaflor bags —
   whole bag visible (contain), the near-white backdrop melts into the white card. */
.lx-cafes .lx-arte__img { background: #FFF; }
.lx-cafes .lx-arte__img img { object-fit: contain; mix-blend-mode: multiply; }
@media (min-width: 900px) { .lx-cafes .lx-arte__img { aspect-ratio: 14 / 15; } }
.lx-cafes .lx-recipes__media img { object-position: 50% 62%; }
/* Coffee page: bag photos are cropped to the bag (92% of the frame), so the tile is a little lower. */
@media (min-width: 640px) { .lx-cafes .lx-blend__img { aspect-ratio: 15 / 16; } }
/* =========================================================================
   Coffee page (cafes.html) — desktop type scale and compact banners from the approved
   mockup (2026-11-01). Scoped to main.lx-cafes, so mokaflor.html and vino2.html keep
   the shared component sizes; phones and tablets keep them too.
   ========================================================================= */
@media (min-width: 1024px) {
  .lx-cafes .lx-hero__text { font-size: 28px; line-height: 1.28; max-width: 32rem; }
  .lx-cafes .lx-hero .lx-btn--lg { padding: 17px 34px; font-size: 18.5px; }
  .lx-cafes .lx-secnav a { font-size: 18px; }
  .lx-cafes .lx-secnav svg { width: 36px; height: 36px; }
  .lx-cafes .lx-h2 { font-size: clamp(56px, 4.6vw, 66px); }
  .lx-cafes .lx-lead { font-size: 24px; line-height: 1.4; }
  /* Mokaflor cards */
  .lx-cafes .lx-blend { padding: 8px 20px 14px; }
  .lx-cafes .lx-blend__bar { margin-top: 0; }
  .lx-cafes .lx-blend__name { margin-top: 8px; line-height: 1; }
  .lx-cafes .lx-blend__cta { padding-top: 8px; }
  .lx-cafes .lx-blend__mix { font-size: 19px; margin-top: 2px; }
  .lx-cafes .lx-blend__profile { font-size: 19px; font-weight: 400; color: var(--lx-muted); margin-top: 2px; }
  .lx-cafes .lx-cafes__more { padding: 11px 22px; font-size: 15.5px; }
  .lx-cafes .lx-blend .lx-btn--sm { padding: 10px 18px; font-size: 17px; }
  /* Arte Café */
  .lx-cafes .lx-arte__img { aspect-ratio: 9 / 10; }
  .lx-cafes .lx-arte__name { font-size: clamp(38px, 3.05vw, 44px); line-height: 1.02; }
  .lx-cafes .lx-arte__spec { font-size: 21px; }
  .lx-cafes .lx-arte__cta { padding: 15px 40px; font-size: 21px; }
  /* Recipes + contact banners */
  .lx-cafes .lx-recipes { min-height: 320px; }
  .lx-cafes .lx-recipes__body { width: 38%; padding: 18px 28px 22px 0; }
  .lx-cafes .lx-recipes .lx-btn--md { margin-top: 18px; }
  .lx-cafes .lx-recipes .lx-contact__title { font-size: clamp(50px, 4.2vw, 60px); line-height: .98; }
  .lx-cafes .lx-contact { min-height: 237px; }
  .lx-cafes .lx-contact__body { padding-block: 16px 16px; max-width: 700px; }
  .lx-cafes .lx-contact .lx-contact__title { font-size: clamp(44px, 3.5vw, 50px); line-height: .9; margin-top: 8px; }
  .lx-cafes .lx-contact__text { font-size: 23px; line-height: 1.4; }
  .lx-cafes .lx-contact .lx-contact__text { margin-top: 6px; }
  .lx-cafes .lx-contact__actions { margin-top: 14px; }
  .lx-cafes .lx-recipes .lx-btn--md, .lx-cafes .lx-contact .lx-btn--md { padding: 15px 32px; font-size: 19px; }
  .lx-cafes .lx-tel { font-size: 21px; }
  /* FAQ: full container width, compact rows */
  .lx-cafes #duvidas .lx-h2 { font-size: clamp(46px, 3.8vw, 54px); }
  .lx-cafes .lx-faq { max-width: none; }
  .lx-cafes .lx-faq--rows { gap: 10px; }
  .lx-cafes .lx-faq--rows .lx-faq__q { padding: 8px 40px 8px 32px; font-size: 21.5px; }
  .lx-cafes .lx-faq--rows .lx-faq__a { max-width: none; padding: 0 40px 12px 66px; font-size: 18.5px; margin-top: -6px; }
}

/* ---------- Reveal on scroll (opt-in, one orchestrated entrance per section) ---------- */
.lx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.lx-reveal.is-in { opacity: 1; transform: none; }

/* =========================================================================
   Mokaflor "Quero ser avisado" dialog
   ========================================================================= */
html.lx-modal-open { overflow: hidden; }
.lx-modal { padding: 0; border: 0; background: transparent; color: var(--ink); width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; overflow: hidden; }
.lx-modal::backdrop { background: rgba(20, 6, 10, .62); backdrop-filter: blur(3px); }
.lx-modal[open] { display: flex; align-items: stretch; justify-content: center; }
.lx-modal__panel { position: relative; display: grid; grid-template-columns: 1fr; width: 100%; height: 100%; background: #FBF8F3; overflow: hidden; }
.lx-modal[open] .lx-modal__panel { animation: lx-pop .42s var(--ease-out) both; }
.lx-modal[open]::backdrop { animation: lx-fade .3s ease-out both; }
@keyframes lx-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
.lx-modal__visual { display: none; }
.lx-modal__scroll { position: relative; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-top: 72px; }
.lx-modal__body { padding: 18px 18px 28px; }
/* Phones: a sticky wine bar holds the brand line and the close button, so the
   button never floats over form content while scrolling. */
.lx-modal__bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 8px 6px 18px; color: #FFF; background: var(--lx-panel); }
.lx-modal__close { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 9999px; border: 1px solid rgba(42, 14, 20, .18); background: rgba(255, 255, 255, .95); color: var(--wine-900); cursor: pointer;
  transition: transform .35s var(--ease-spring), background-color .2s, border-color .2s; }
.lx-modal__close:hover { background: #FFF; border-color: var(--wine-600); transform: rotate(90deg); }
.lx-modal__close:active { transform: scale(.94); }
.lx-modal__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-modal__band { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13.5px; }
.lx-modal__band strong { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 20px; letter-spacing: -0.01em; }
.lx-modal__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -0.02em; font-size: clamp(36px, 9vw, 54px); line-height: 1; color: var(--wine-900); margin-top: 8px; }
.lx-modal__title:focus { outline: none; }
.lx-modal__title:focus-visible { outline: none; } /* programmatic focus target only (not interactive) */
.lx-modal__desc { font-size: 16px; line-height: 1.5; color: var(--lx-muted); margin-top: 10px; max-width: 34rem; }
@media (min-width: 768px) {
  /* A modal <dialog> is position: fixed with inset-block: 0. It must keep fit-content sizing:
     `height: auto` would stretch it (and the panel) to the full viewport height. */
  .lx-modal { width: fit-content; height: fit-content; max-width: calc(100vw - 40px); max-height: calc(100dvh - 40px); margin: auto; overflow: visible; }
  /* Tablets (768–1023): one centred column, form only — a side panel would be too narrow. */
  .lx-modal__panel { width: min(640px, calc(100vw - 40px)); height: auto; max-height: calc(100dvh - 40px); border-radius: 22px;
    box-shadow: 0 30px 80px rgba(20, 6, 10, .45); }
  /* Close button: a zero-height sticky row, so it stays in view while the form scrolls on short screens. */
  .lx-modal__bar { position: sticky; top: 14px; height: 0; align-items: flex-start; justify-content: flex-end; padding: 0 14px 0 0; background: none; overflow: visible; }
  .lx-modal__band { display: none; }
  .lx-modal__body { padding: 30px 40px 26px; }
  .lx-modal__scroll { height: auto; max-height: calc(100dvh - 40px); }
}
@media (min-width: 1024px) {
  /* Desktop (mockup 05): compact image panel left, form right. */
  .lx-modal__panel { width: min(1120px, calc(100vw - 40px)); grid-template-columns: 42% 1fr; }
  .lx-modal__visual { --vpad: 40px; position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 40px); color: #FFF; background: var(--lx-panel); padding: 38px var(--vpad) 28px; overflow: hidden; }
  .lx-modal__body { padding: 40px 48px 28px; }
}
/* Group photo directly under the panel text, at its own ratio; it may shrink on short screens. */
.lx-modal__visual-img { position: relative; flex: 0 1 auto; aspect-ratio: 1200 / 846; min-height: 150px; margin: 22px calc(-1 * var(--vpad, 36px)) 0; overflow: hidden; }
.lx-modal__visual-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 84%, transparent 100%); } /* both edges melt into the panel gradient */
.lx-modal__visual-foot { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; font-variant-numeric: lining-nums; font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; color: #E6C989; letter-spacing: .04em; white-space: nowrap; }
.lx-modal__visual-foot::before, .lx-modal__visual-foot::after { content: ""; flex: 1; height: 1px; background: rgba(224, 189, 110, .55); }

/* Product of interest + blend picker */
.lx-pick[hidden], .lx-picklist[hidden] { display: none; }
.lx-pick { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px 14px; background: #FFF; border: 1px solid var(--lx-line); border-radius: 14px; }
.lx-pick__thumb { position: relative; flex-shrink: 0; width: 58px; height: 72px; border-radius: 8px; overflow: hidden; background: #FFF; border: 1px solid var(--lx-line); }
.lx-pick__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; mix-blend-mode: multiply; }
.lx-pick__label { font-size: 13px; color: var(--lx-muted); }
.lx-pick__name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.05; color: var(--wine-600); }
.lx-pick__change { margin-left: auto; min-height: 44px; padding: 0 6px; font-weight: 600; font-size: 15px; color: var(--wine-600); text-decoration: underline; text-underline-offset: 4px;
  border-radius: 6px; cursor: pointer; transition: color .2s; }
.lx-pick__change:hover { color: var(--wine-500); text-decoration-thickness: 2px; }
.lx-pick__change:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-picklist { margin-top: 10px; padding: 12px; border: 1px solid var(--lx-line); border-radius: 14px; background: #FFF; }
.lx-picklist legend { font-size: 14px; font-weight: 600; color: var(--ink); padding: 0 4px; }
.lx-picklist__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.lx-option { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border: 1.5px solid var(--lx-line); border-radius: 12px; cursor: pointer;
  transition: border-color .2s, background-color .2s; }
.lx-option:hover { border-color: rgba(110, 26, 42, .4); background: rgba(110, 26, 42, .03); }
.lx-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lx-option:has(input:checked) { border-color: var(--wine-600); background: rgba(110, 26, 42, .05); }
.lx-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-option__name { font-weight: 600; font-size: 15px; color: var(--wine-700); line-height: 1.2; }
.lx-option__mix { display: block; font-weight: 400; font-size: 12.5px; color: var(--lx-muted); margin-top: 2px; }

/* Form */
.lx-form { margin-top: 4px; }
.lx-fieldset { margin-top: 18px; border: 0; padding: 0; min-width: 0; }
.lx-legend, .lx-label { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.lx-label .lx-opt { font-weight: 400; color: var(--lx-muted); }
.lx-req { color: #B3261E; margin-left: 2px; }
.lx-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; border: 1px solid rgba(42, 14, 20, .18); border-radius: 14px; background: #FFF; }
.lx-seg label { position: relative; display: grid; place-items: center; min-height: 46px; padding: 0 8px; border-radius: 10px; font-size: 15.5px; font-weight: 500; color: var(--wine-700); cursor: pointer;
  text-align: center; line-height: 1.2; transition: background-color .25s, color .25s; }
.lx-seg label:hover { background: rgba(110, 26, 42, .05); }
.lx-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lx-seg label:has(input:checked) { background: var(--wine-600); color: #FFF; }
.lx-seg label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-fields { display: grid; grid-template-columns: 1fr; gap: 14px 18px; margin-top: 18px; }
@media (min-width: 560px) { .lx-fields { grid-template-columns: 1fr 1fr; } }
.lx-input { width: 100%; min-height: 50px; padding: 12px 16px; font-size: 16px; color: var(--ink); background: #FFF; border: 1px solid rgba(42, 14, 20, .2); border-radius: 12px;
  transition: border-color .2s, box-shadow .2s; }
.lx-input::placeholder { color: rgba(36, 16, 21, .42); }
.lx-input:hover { border-color: rgba(42, 14, 20, .35); }
.lx-input:focus { outline: none; border-color: var(--wine-600); box-shadow: 0 0 0 3px rgba(110, 26, 42, .14); }
.lx-input[aria-invalid="true"] { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, .1); }
.lx-phone { display: flex; align-items: stretch; background: #FFF; border: 1px solid rgba(42, 14, 20, .2); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.lx-phone:focus-within { border-color: var(--wine-600); box-shadow: 0 0 0 3px rgba(110, 26, 42, .14); }
.lx-phone:has(.lx-input[aria-invalid="true"]) { border-color: #B3261E; }
.lx-phone__cc { display: grid; place-items: center; padding: 0 14px; font-size: 16px; color: var(--ink); border-right: 1px solid rgba(42, 14, 20, .15); }
.lx-phone .lx-input { border: 0; box-shadow: none; border-radius: 0 12px 12px 0; }
.lx-error { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: #B3261E; margin-top: 6px; }
.lx-error[hidden] { display: none; }
.lx-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; }
.lx-check input { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--wine-600); cursor: pointer; }
.lx-check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lx-check label { font-size: 15px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.lx-check__note { font-size: 14px; line-height: 1.5; color: var(--lx-muted); margin: 6px 0 0 34px; }
.lx-submit { width: 100%; margin-top: 22px; min-height: 56px; font-size: 17px; border-radius: 12px; }
.lx-submit.lx-btn--gold { background: #F0CD74; }
.lx-submit.lx-btn--gold:hover { background: #F5D689; }
.lx-modal__foot { text-align: center; font-size: 13.5px; color: var(--lx-muted); margin-top: 12px; }
.lx-done { padding: 22px 20px; margin-top: 22px; border-radius: 14px; background: #FFF; border: 1px dashed rgba(110, 26, 42, .4); }
.lx-done__title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--wine-700); }
.lx-done__title:focus { outline: none; }
.lx-done p { font-size: 15px; line-height: 1.55; color: var(--lx-muted); margin-top: 8px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lx-slide, .lx-slide[aria-hidden="true"] { transition: none; transform: none; }
  .lx-reveal { opacity: 1; transform: none; transition: none; }
  .lx-modal[open] .lx-modal__panel, .lx-modal[open]::backdrop, .lx-preview-note.is-flash { animation: none; }
  .lx-card, .lx-btn, .lx-btn svg, .lx-arte__img img, .lx-gallery__img img, .lx-faq__icon::before, .lx-faq__icon::after, .lx-faq__chev,
  .lx-carousel__arrow, .lx-carousel__tab, .lx-modal__close, .lx-secnav a::after { transition: none; }
  .lx-card:hover, .lx-btn:hover, .lx-carousel__arrow:hover { transform: none; }
}