/* ==========================================================
   FIX DE LARGURA — Container do Elementor
   Descoberto via DevTools: mesmo com "Content Width: Full
   Width" selecionado, o Elementor mantém a largura limitada.
   A cadeia real de CSS é: .e-con define
   --container-max-width:1100px, e uma regra separada usa
   max-width:min(100%, var(--width)) — ou seja, a propriedade
   realmente aplicada depende de --width, não apenas de
   --container-max-width. Por isso sobrescrevemos as duas
   variáveis, e também max-width/width diretamente, com
   !important para vencer qualquer especificidade do Elementor.
   Este arquivo só é carregado na página /brasil/ (ver
   functions-snippet.php), então esta regra NÃO afeta nenhuma
   outra página do site, mesmo sem namespace próprio.
   ========================================================== */
.elementor-element.e-con-full{
  --container-max-width: none !important;
  --width: 100% !important;
  --container-default-padding-left: 0 !important;
  --container-default-padding-right: 0 !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================
   MADERO DAIRY SYSTEMS — BRASIL
   Namespaced stylesheet for WordPress (The7 + Elementor)
   Todas as classes começam com .madero-brasil para não
   colidir com o CSS do tema ou do Elementor.
   Cores e tipografia extraídas do Manual de Identidade
   Corporativa Madero (fonte autoritativa — ver README).
   ========================================================== */

/* ==========================================================
   ESCONDE O HEADER/FOOTER REAL DO SITE NESTA PÁGINA
   O buscador de páginas do Elementor (Theme Builder →
   Condições) apresentou um bug e não conseguiu localizar a
   página /brasil/ para criar uma exclusão por lá. Como este
   arquivo CSS só é carregado NESTA página (ver
   functions-snippet.php, is_page('brasil')), esconder o
   header/footer aqui por CSS é seguro — não afeta nenhuma
   outra página do site, mesmo usando seletores genéricos do
   Elementor.
   ========================================================== */
[data-elementor-type="header"]{ display:none !important; }
[data-elementor-type="footer"]{ display:none !important; }

.madero-brasil{
  overflow-x: hidden; /* rede de segurança contra qualquer elemento (ex.: iframe do formulário com transform:scale) vazando para fora da largura da tela em navegadores móveis */
  /* -------------------------------------------------------
     NOTA: já tentamos aqui um truque de CSS (width:100vw +
     margens negativas) para forçar a largura total da tela,
     mas isso quebrou a rolagem nativa do site — o The7 usa uma
     biblioteca de scroll personalizada (custom-scrollbar) que
     depende de medir a largura real do conteúdo, e o truque de
     "escapar" do container via viewport confundia essa medição.
     A correção correta é ajustar a largura do CONTAINER do
     Elementor que envolve o widget HTML (propriedade "Largura
     do conteúdo" = "Largura total"), diretamente pela interface
     do Elementor — ver README-wordpress.md.
     ------------------------------------------------------- */
  width: 100%;

  /* -------- Tokens oficiais (Manual de Identidade) -------- */
  --mb-primary:      #00528b; /* Pantone 7462c */
  --mb-primary-700:  #00334f; /* azul complementar oficial, usado como "dark" */
  --mb-secondary:    #007a33; /* Pantone 356c */
  --mb-accent-sky:   #009fe3; /* complementar */
  --mb-accent-sky-2: #33caff; /* complementar */
  --mb-accent-sky-3: #b0ebff; /* complementar */
  --mb-gray-700:     #686868; /* complementar */
  --mb-gray-300:     #d9d9d9; /* complementar */
  --mb-gray-100:     #efefef; /* complementar */
  --mb-white:        #ffffff;
  --mb-text:         #14212B;
  --mb-text-muted:   #4E5D68;

  /* -------- Tipografia (Manual de Identidade) --------
     Principal: SF Pro Text -> pilha de fontes do sistema (sem custo/licença)
     Secundária: Bw Modelica -> FONTE COMERCIAL, licença ainda não fornecida.
       Enquanto os arquivos .woff2 licenciados não forem entregues, usamos
       a tipografia AUXILIAR definida no próprio manual (Helvetica Neue).
     Auxiliar: Helvetica Neue -> pilha de fontes do sistema */
  --mb-font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mb-font-secondary: "Helvetica Neue", Helvetica, Arial, sans-serif; /* substituir por Bw Modelica quando a licença web for fornecida */
  --mb-font-mono: "SF Mono", "IBM Plex Mono", Consolas, monospace;

  --mb-radius-sm: 4px;
  --mb-radius-md: 8px;
  --mb-radius-lg: 16px;
  --mb-shadow-md: 0 12px 32px rgba(0,51,79,.16);
  --mb-max-width: 1680px;

  color: var(--mb-text);
  font-family: var(--mb-font-primary);
  line-height: 1.55;
}

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

.madero-brasil img{ max-width:100%; display:block; }
.madero-brasil a{ color:inherit; text-decoration:none; }
.madero-brasil ul{ margin:0; padding:0; list-style:none; }
.madero-brasil button{ font-family:inherit; cursor:pointer; }
.madero-brasil h1,.madero-brasil h2,.madero-brasil h3,.madero-brasil h4{
  font-family: var(--mb-font-secondary);
  margin:0 0 .5em; line-height:1.15; color: var(--mb-primary-700);
}
.madero-brasil p{ margin:0 0 1em; }
.madero-brasil :focus-visible{ outline:3px solid var(--mb-accent-sky); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  .madero-brasil *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.madero-brasil__container{ width:100%; max-width:var(--mb-max-width); margin:0 auto; padding:0 32px; }
@media (min-width:768px){ .madero-brasil__container{ padding:0 48px; } }
@media (min-width:1600px){ .madero-brasil__container{ padding:0 64px; } }

.madero-brasil__eyebrow{
  font-family: var(--mb-font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--mb-accent-sky); display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
}
.madero-brasil__eyebrow::before{ content:""; width:22px; height:2px; background:var(--mb-accent-sky); display:inline-block; }

.madero-brasil__section{ padding:64px 0; }
@media (min-width:1024px){ .madero-brasil__section{ padding:96px 0; } }
.madero-brasil__section--dark{ background: var(--mb-primary-700); color:#E7ECEF; }
.madero-brasil__section--dark h2,.madero-brasil__section--dark h3{ color:#fff; }
.madero-brasil__section--light{ background: var(--mb-gray-100); }

.madero-brasil__section-head{ max-width:720px; margin-bottom:40px; }
.madero-brasil__section-head h2{ font-size:clamp(26px,4vw,38px); }
.madero-brasil__section-head p{ color: var(--mb-text-muted); font-size:17px; }
.madero-brasil__section--dark .madero-brasil__section-head p{ color:#B7C4CC; }

.madero-brasil__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius: var(--mb-radius-sm);
  font-weight:600; font-size:15px; border:2px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap; font-family: var(--mb-font-secondary);
}
.madero-brasil__btn:active{ transform: translateY(1px); }
.madero-brasil__btn--primary{ background: var(--mb-accent-sky); color:#fff; }
.madero-brasil__btn--primary:hover{ background: var(--mb-primary); }
.madero-brasil__btn--outline{ border-color: currentColor; background:transparent; }
.madero-brasil__btn--outline:hover{ background: rgba(255,255,255,.08); }
.madero-brasil__btn--ghost{ border-color: var(--mb-primary); color: var(--mb-primary); background:#fff; }
.madero-brasil__btn--ghost:hover{ background: var(--mb-primary); color:#fff; }
.madero-brasil__btn--block{ width:100%; }
.madero-brasil__btn--sm{ padding:10px 18px; font-size:14px; }

/* -------------------- HERO -------------------- */
.madero-brasil__hero{
  position:relative; overflow:hidden; padding:56px 0 72px; margin-top:72px; color:#fff;
  background: linear-gradient(180deg, var(--mb-primary-700) 0%, var(--mb-primary) 100%);
  min-height:100vh; display:flex; align-items:center;
}
.madero-brasil__hero > .madero-brasil__container{ width:100%; }
.madero-brasil__hero-bg{ position:absolute; inset:0; z-index:0; opacity:.55; background-size:cover; background-position:center; }
.madero-brasil__hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,51,79,.15), rgba(0,51,79,.62)); }
.madero-brasil__hero-grid{ position:relative; z-index:1; display:grid; gap:40px; align-items:center; }
@media (min-width:960px){ .madero-brasil__hero-grid{ grid-template-columns:1.1fr .9fr; } }
.madero-brasil__hero h1{ color:#fff; font-size:clamp(30px,5vw,50px); letter-spacing:-.01em; }
.madero-brasil__hero-sub{ font-size:18px; color:#C8D4DA; max-width:560px; }
.madero-brasil__hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.madero-brasil__hero-stats{ display:flex; gap:28px; margin-top:36px; flex-wrap:wrap; }
.madero-brasil__hero-stat{ font-family: var(--mb-font-mono); font-size:13px; color:#B7C4CC; }
.madero-brasil__hero-stat strong{ display:block; font-family: var(--mb-font-secondary); font-size:22px; color:#fff; }

.madero-brasil__orbit{ position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:0 auto; }
.madero-brasil__orbit svg{ width:100%; height:100%; }
.madero-brasil__orbit .mb-ring{ transform-origin:50% 50%; animation: mb-spin 26s linear infinite; }
@keyframes mb-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .madero-brasil__orbit .mb-ring{ animation:none; } }

/* -------------------- INTRO -------------------- */
.madero-brasil__intro{ display:grid; gap:32px; align-items:center; }
@media (min-width:900px){ .madero-brasil__intro{ grid-template-columns:1fr 1fr; } }
.madero-brasil__intro-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px; }
.madero-brasil__intro-list li{ font-family: var(--mb-font-mono); font-size:13px; color: var(--mb-text-muted); border-left:2px solid var(--mb-accent-sky); padding-left:10px; }

/* -------------------- PRODUCT GRID -------------------- */
.madero-brasil__grid-products{ display:grid; gap:24px; grid-template-columns:repeat(1,1fr); }
@media (min-width:640px){ .madero-brasil__grid-products{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .madero-brasil__grid-products{ grid-template-columns:repeat(3,1fr); } }

.madero-brasil__card{
  background:#fff; border:1px solid var(--mb-gray-300); border-radius: var(--mb-radius-md);
  overflow:hidden; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease;
}
.madero-brasil__card:hover{ transform: translateY(-4px); box-shadow: var(--mb-shadow-md); }
.madero-brasil__card-media{ aspect-ratio:4/3; background: var(--mb-gray-100); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.madero-brasil__card-media img{ width:100%; height:100%; object-fit:cover; }
.madero-brasil__card-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.madero-brasil__card-category{ font-family: var(--mb-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color: var(--mb-gray-700); }
.madero-brasil__card-name{ font-size:20px; margin:0; }
.madero-brasil__card-desc{ color: var(--mb-text-muted); font-size:14.5px; flex:1; }
.madero-brasil__card-benefits{ display:grid; gap:6px; font-size:13.5px; }
.madero-brasil__card-benefits li{ padding-left:18px; position:relative; }
.madero-brasil__card-benefits li::before{ content:"—"; position:absolute; left:0; color: var(--mb-accent-sky); }
.madero-brasil__card-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }

/* -------------------- SELECTOR -------------------- */
.madero-brasil__selector{ background:#fff; border:1px solid var(--mb-gray-300); border-radius: var(--mb-radius-lg); padding:28px; }
.madero-brasil__chips{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 24px; }
.madero-brasil__chip{
  border:2px solid var(--mb-gray-300); background:#fff; color: var(--mb-text);
  padding:10px 16px; border-radius:999px; font-size:14px; font-weight:600; transition:all .2s ease;
}
.madero-brasil__chip[aria-pressed="true"]{ background: var(--mb-primary); border-color: var(--mb-primary); color:#fff; }
.madero-brasil__selector-empty{ color: var(--mb-text-muted); font-size:14.5px; }

/* -------------------- TABLE -------------------- */
.madero-brasil__table-wrap{ overflow-x:auto; border:1px solid var(--mb-gray-300); border-radius: var(--mb-radius-md); }
.madero-brasil__table{ width:100%; border-collapse:collapse; min-width:820px; font-size:13.5px; }
.madero-brasil__table th,.madero-brasil__table td{ padding:12px 14px; border-bottom:1px solid var(--mb-gray-300); text-align:left; white-space:nowrap; }
.madero-brasil__table thead th{ background: var(--mb-gray-100); font-family: var(--mb-font-secondary); position:sticky; top:0; }
.madero-brasil__table td.mb-na{ color: var(--mb-gray-700); font-style:italic; }
.madero-brasil__table th:first-child,.madero-brasil__table td:first-child{ position:sticky; left:0; background:#fff; font-weight:600; }

/* -------------------- FORM WRAPPER (CF7 fica dentro) -------------------- */
.madero-brasil__form-card{ background:#fff; border-radius: var(--mb-radius-lg); box-shadow: var(--mb-shadow-md); padding:32px; border:1px solid var(--mb-gray-300); }
.madero-brasil__form-card .wpcf7-form-control-wrap{ display:block; margin-bottom:16px; }
.madero-brasil__form-card label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color: var(--mb-text); }
.madero-brasil__form-card input,
.madero-brasil__form-card select,
.madero-brasil__form-card textarea{
  width:100%; padding:12px 14px; border-radius: var(--mb-radius-sm); border:1.5px solid var(--mb-gray-300);
  font-size:15px; font-family:inherit; background:#fff; color: var(--mb-text);
}
.madero-brasil__form-card input:focus,
.madero-brasil__form-card select:focus,
.madero-brasil__form-card textarea:focus{ border-color: var(--mb-primary); }
.madero-brasil__form-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .madero-brasil__form-grid{ grid-template-columns:1fr 1fr; } }
.madero-brasil__form-grid .mb-full{ grid-column:1/-1; }
.madero-brasil__form-note{ font-size:12.5px; color: var(--mb-text-muted); margin-top:14px; }

/* -------------------- FAQ -------------------- */
.madero-brasil__faq-item{ border-bottom:1px solid var(--mb-gray-300); }
.madero-brasil__faq-item summary{ padding:18px 4px; cursor:pointer; font-weight:600; font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:16px; list-style:none; }
.madero-brasil__faq-item summary::-webkit-details-marker{ display:none; }
.madero-brasil__faq-item summary::after{ content:"+"; font-size:22px; color: var(--mb-accent-sky); flex-shrink:0; }
.madero-brasil__faq-item[open] summary::after{ content:"–"; }
.madero-brasil__faq-item p{ padding:0 4px 18px; color: var(--mb-text-muted); }

/* -------------------- PROOF -------------------- */
.madero-brasil__proof-grid{ display:grid; gap:24px; grid-template-columns:repeat(1,1fr); }
@media (min-width:768px){ .madero-brasil__proof-grid{ grid-template-columns:repeat(4,1fr); } }
.madero-brasil__proof-item{ padding:0; }
.madero-brasil__proof-icon{
  width:52px; height:52px; border-radius: var(--mb-radius-sm); background: var(--mb-accent-sky);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.madero-brasil__proof-icon svg{ width:24px; height:24px; }
.madero-brasil__proof-item h3{ font-size:17px; color:#fff; }
.madero-brasil__proof-item p{ color:#B7C4CC; font-size:14px; }

/* -------------------- CTA BAND -------------------- */
.madero-brasil__cta-band{ background: var(--mb-primary); color:#fff; text-align:center; padding:56px 0; }
.madero-brasil__cta-band h2{ color:#fff; }
.madero-brasil__cta-band .madero-brasil__btn--ghost{ background:#fff; border-color:#fff; }

/* -------------------- MODAL -------------------- */
.madero-brasil__modal-overlay{ position:fixed; inset:0; background: rgba(0,51,79,.72); display:none; align-items:center; justify-content:center; padding:24px; z-index:9999; }
.madero-brasil__modal-overlay.is-open{ display:flex; }
.madero-brasil__modal{ background:#fff; border-radius: var(--mb-radius-lg); max-width:760px; width:100%; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; position:relative; }
.madero-brasil__modal-media{ aspect-ratio:16/9; background: var(--mb-gray-100); }
.madero-brasil__modal-media img{ width:100%; height:100%; object-fit:cover; }
.madero-brasil__modal-body{ padding:28px; }
.madero-brasil__modal-close{ position:sticky; top:14px; float:right; margin-right:14px; margin-bottom:-36px; background:#fff; border-radius:50%; width:36px; height:36px; border:none; font-size:18px; z-index:2; box-shadow: var(--mb-shadow-sm); }
.madero-brasil__modal-body h3{ font-size:26px; }
.madero-brasil__modal-cat{ font-family: var(--mb-font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: var(--mb-gray-700); }

/* -------------------- STICKY CTA -------------------- */
.madero-brasil__sticky-cta{ position:fixed; bottom:0; left:0; right:0; z-index:999; background:#fff; border-top:1px solid var(--mb-gray-300); display:flex; gap:10px; padding:10px 14px; box-shadow:0 -6px 16px rgba(0,51,79,.12); }
@media (min-width:1024px){ .madero-brasil__sticky-cta{ display:none; } }

.madero-brasil__visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.madero-brasil__mt-lg{ margin-top:32px; }
.madero-brasil__text-muted{ color: var(--mb-text-muted); }

/* ==========================================================
   NOVA ESTRUTURA — inspirada na referência fornecida
   (banner principal com logo, unidades em destaque, setor
   escuro com ícones, presença internacional, CTA final em
   faixa escura, footer com logo em maior evidência)
   ========================================================== */

/* -------------------- HEADER (barra superior própria, dentro do widget HTML — Elementor Canvas não usa o header do tema) -------------------- */
.madero-brasil__header{
  position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(255,255,255,.97); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--mb-gray-300);
}
.madero-brasil__header-row{ display:flex; align-items:center; justify-content:space-between; height:72px; gap:24px; }
.madero-brasil__header-logo img{ height:34px !important; width:auto !important; max-width:none !important; display:block; }
.madero-brasil__header-nav{ display:none; gap:26px; font-size:15px; font-weight:600; white-space:nowrap; }
.madero-brasil__header-nav.is-open-mobile{
  display:flex; flex-direction:column; gap:4px;
  position:absolute; top:100%; left:0; right:0;
  background:#fff; padding:12px 20px 20px; border-top:1px solid var(--mb-gray-300);
  box-shadow: var(--mb-shadow-sm);
}
.madero-brasil__header-nav.is-open-mobile a{ padding:10px 0; border-bottom:1px solid var(--mb-gray-100); }
.madero-brasil__header-nav a{ color: var(--mb-text); padding:6px 0; }
.madero-brasil__header-nav a:hover{ color: var(--mb-primary); }
.madero-brasil__header-actions{ display:flex; align-items:center; gap:10px; }
.madero-brasil__header-actions > a{ display:none; }
@media (min-width:1024px){ .madero-brasil__header-actions > a{ display:inline-flex; } }
.madero-brasil__header-menu-btn{ display:flex; background:none; border:none; padding:8px; font-size:20px; }
@media (min-width:1024px){
  .madero-brasil__header-nav{ display:flex; }
  .madero-brasil__header-menu-btn{ display:none; }
}

/* -------------------- LOGO NO HERO -------------------- */
.madero-brasil__hero-logo{
  display:flex; align-items:center; gap:12px; margin-bottom:28px;
}
.madero-brasil__hero-logo img{ height:44px; width:auto; }
.madero-brasil__hero-logo span{
  font-family: var(--mb-font-secondary); font-weight:700; font-size:20px; color:#fff; letter-spacing:.02em;
}
.madero-brasil__hero-watermark{
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:520px; height:520px; opacity:.08; pointer-events:none;
}
@media (max-width:960px){ .madero-brasil__hero-watermark{ display:none; } }

/* -------------------- FLAGSHIPS EM DESTAQUE (Premium / MagLev) -------------------- */
.madero-brasil__flagships{ background:#fff; }
.madero-brasil__flagship-grid{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width:900px){ .madero-brasil__flagship-grid{ grid-template-columns:1fr 1fr; } }

.madero-brasil__flagship{
  position:relative; border-radius: var(--mb-radius-lg); overflow:hidden;
  background: var(--mb-primary-700); color:#fff; min-height:460px;
  display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow: var(--mb-shadow-md);
}
.madero-brasil__flagship-media{
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:.55;
}
.madero-brasil__flagship-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,51,79,.15) 0%, rgba(0,51,79,.96) 82%);
}
.madero-brasil__flagship-body{ position:relative; z-index:1; padding:36px; }
.madero-brasil__flagship-eyebrow{
  font-family: var(--mb-font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--mb-accent-sky-2); display:block; margin-bottom:10px;
}
.madero-brasil__flagship h3{ color:#fff; font-size:30px; margin-bottom:10px; }
.madero-brasil__flagship p{ color:#D7E3E9; font-size:15px; max-width:480px; }
.madero-brasil__flagship-benefits{ display:grid; gap:8px; margin:18px 0 24px; font-size:14px; }
.madero-brasil__flagship-benefits li{ padding-left:20px; position:relative; color:#EAF1F4; }
.madero-brasil__flagship-benefits li::before{ content:"—"; position:absolute; left:0; color: var(--mb-accent-sky-2); }
.madero-brasil__flagship-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.madero-brasil__flagship--maglev .madero-brasil__flagship-eyebrow{ color:#8FE1FF; }

/* -------------------- SETORES (bloco escuro com ícones sobre imagem) -------------------- */
.madero-brasil__sectors{
  position:relative; color:#fff; overflow:hidden;
  background: var(--mb-primary-700);
}
.madero-brasil__sectors-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.32; }
.madero-brasil__sectors-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,51,79,.55), rgba(0,51,79,.94)); }
.madero-brasil__sectors-inner{ position:relative; z-index:1; }
.madero-brasil__sectors h2{ color:#fff; }
.madero-brasil__sector-grid{ display:grid; gap:24px; grid-template-columns:repeat(1,1fr); margin-top:32px; }
@media (min-width:768px){ .madero-brasil__sector-grid{ grid-template-columns:repeat(3,1fr); } }
.madero-brasil__sector-card{ text-align:center; padding:28px 20px; }
.madero-brasil__sector-icon{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
}
.madero-brasil__sector-icon svg{ width:28px; height:28px; }
.madero-brasil__sector-card h3{ color:#fff; font-size:17px; margin-bottom:8px; }
.madero-brasil__sector-card p{ color:#B7C4CC; font-size:14px; margin:0; }

/* -------------------- PRESENÇA INTERNACIONAL -------------------- */
.madero-brasil__presence-grid{ display:grid; gap:32px; align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .madero-brasil__presence-grid{ grid-template-columns:1fr 1fr; } }
.madero-brasil__presence-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
.madero-brasil__presence-item{
  display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600;
  padding:12px 14px; border:1px solid var(--mb-gray-300); border-radius: var(--mb-radius-sm); background:#fff;
}
.madero-brasil__presence-item .mb-dot{ width:8px; height:8px; border-radius:50%; background: var(--mb-accent-sky); flex-shrink:0; }
.madero-brasil__presence-visual{
  border-radius: var(--mb-radius-lg); overflow:hidden; aspect-ratio:4/3; background: var(--mb-gray-100);
}
.madero-brasil__presence-visual img{ width:100%; height:100%; object-fit:cover; }

/* -------------------- FAIXA FINAL DE CONTATO -------------------- */
.madero-brasil__form-band{
  position:relative; overflow:hidden; color: var(--mb-text);
  background: var(--mb-gray-100);
}
.madero-brasil__form-band-bg{ display:none; }
.madero-brasil__form-band-inner{ position:relative; z-index:1; }
.madero-brasil__form-band h2{ color: var(--mb-primary-700); }
.madero-brasil__form-band .madero-brasil__section-head p{ color: var(--mb-text-muted); }
.madero-brasil__form-band .madero-brasil__form-card{ background:transparent; border:none; box-shadow:none; padding:0; }

/* -------------------- FOOTER — logo com mais presença -------------------- */
.madero-brasil__footer-topbar{ height:6px; background: linear-gradient(90deg, var(--mb-accent-sky-3), var(--mb-accent-sky) 45%, var(--mb-primary) 100%); }
.madero-brasil__footer-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:900px){ .madero-brasil__footer-grid{ grid-template-columns:.8fr 1.8fr; align-items:start; } }
.madero-brasil__footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.madero-brasil__footer-brand img{ display:block !important; height:64px !important; width:auto !important; max-width:none !important; opacity:1 !important; visibility:visible !important; }
.madero-brasil__footer-logo-card{
  background:#fff; border-radius: var(--mb-radius-md); padding:20px;
  display:inline-flex; align-items:center; justify-content:center; box-shadow: var(--mb-shadow-sm);
}
.madero-brasil__footer-logo-card img{ height:120px; width:auto; display:block; }
.madero-brasil__footer-tagline{
  font-family: var(--mb-font-secondary); font-weight:600; font-size:15px; color:#fff;
  letter-spacing:.02em; margin:0; max-width:280px;
}
.madero-brasil__footer-social{ display:flex; gap:10px; }
.madero-brasil__footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center;
  transition: background .2s ease;
}
.madero-brasil__footer-social a:hover{ background: var(--mb-accent-sky); border-color: var(--mb-accent-sky); }
.madero-brasil__footer-social svg{ width:18px; height:18px; }

/* ==========================================================
   ATUALIZAÇÃO ESTRATÉGICA — PREMIUM COMO PROTAGONISTA
   ========================================================== */

/* -------------------- PROBLEMA -------------------- */
.madero-brasil__problem{ text-align:center; max-width:760px; margin:0 auto; }
.madero-brasil__problem h2{ font-size:clamp(26px,4vw,36px); }
.madero-brasil__problem p{ color: var(--mb-text-muted); font-size:17px; }

/* -------------------- PREMIUM — SEÇÃO PRINCIPAL -------------------- */
.madero-brasil__premium{ background:#fff; }
.madero-brasil__premium-main{ display:grid; gap:40px; grid-template-columns:1fr; align-items:start; }
@media (min-width:960px){ .madero-brasil__premium-main{ grid-template-columns:1fr 1.1fr; align-items:center; } }
.madero-brasil__premium-media{ border-radius: var(--mb-radius-lg); overflow:hidden; box-shadow: var(--mb-shadow-md); }
.madero-brasil__premium-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.madero-brasil__premium-desc{ font-size:17px; color: var(--mb-text-muted); }
.madero-brasil__premium-body h3{ font-size:19px; margin-top:24px; }

.madero-brasil__benefit-grid{ display:grid; gap:14px; grid-template-columns:1fr; margin-top:14px; }
@media (min-width:640px){ .madero-brasil__benefit-grid{ grid-template-columns:1fr 1fr; } }
.madero-brasil__benefit-item{ display:flex; gap:10px; align-items:flex-start; }
.madero-brasil__benefit-dot{ width:9px; height:9px; border-radius:50%; background: var(--mb-accent-sky); margin-top:7px; flex-shrink:0; }
.madero-brasil__benefit-item p{ margin:0; font-size:14.5px; color: var(--mb-text); }

.madero-brasil__specs{ margin-top:28px; padding-top:20px; border-top:1px solid var(--mb-gray-300); }
.madero-brasil__specs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:14px 0 0; }
.madero-brasil__specs-grid dt{ font-family: var(--mb-font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color: var(--mb-text-muted); margin:0; }
.madero-brasil__specs-grid dd{ margin:2px 0 0; font-weight:700; font-size:16px; color: var(--mb-primary-700); }

.madero-brasil__premium-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* -------------------- VÍDEO PREMIUM (cinematográfico) -------------------- */
.madero-brasil__video-section{ background: var(--mb-primary-700); color:#fff; }
.madero-brasil__video-frame{ max-width:920px; margin:0 auto; aspect-ratio:16/9; border-radius: var(--mb-radius-lg); overflow:hidden; background:#000; box-shadow: var(--mb-shadow-md); }

/* -------------------- MAGLEV — segundo nível (menor que Premium) -------------------- */
.madero-brasil__maglev{ background: var(--mb-gray-100); }
.madero-brasil__maglev-section{ display:grid; gap:28px; grid-template-columns:1fr; border-radius: var(--mb-radius-lg); overflow:hidden; background:#fff; box-shadow: var(--mb-shadow-sm); }
@media (min-width:840px){ .madero-brasil__maglev-section{ grid-template-columns:.9fr 1.1fr; } }
.madero-brasil__maglev-media{ min-height:240px; background-size:cover; background-position:center; }
.madero-brasil__maglev-body{ padding:32px; }
.madero-brasil__maglev-body h2{ font-size:26px; }
.madero-brasil__maglev-body p{ color: var(--mb-text-muted); font-size:15px; }

/* -------------------- TRANSIÇÃO PARA O ECOSSISTEMA -------------------- */
.madero-brasil__transition{ position:relative; text-align:center; background-color: var(--mb-primary-700); background-size:cover; background-position:center; color:#fff; padding:140px 0; overflow:hidden; }
.madero-brasil__transition-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,51,79,.80), rgba(0,51,79,.88)); }
.madero-brasil__transition-inner{ position:relative; z-index:1; }
.madero-brasil__transition h2{ color:#fff; margin-bottom:12px; font-size:clamp(30px,5vw,48px); letter-spacing:-.01em; }
.madero-brasil__transition p{ font-size:17px; }
.madero-brasil__transition p{ color:#C8D4DA; max-width:640px; margin:0 auto; }

/* -------------------- ECOSSISTEMA — cards horizontais grandes + hover -------------------- */
.madero-brasil__eco-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.madero-brasil__eco-divider{ height:1px; background: var(--mb-gray-300); margin:48px 0 40px; }

/* Grupo "Gestão de precisão" — cards menores, 3 por linha no desktop */
.madero-brasil__eco-grid--compact{ grid-template-columns:1fr; }
@media (min-width:640px){ .madero-brasil__eco-grid.madero-brasil__eco-grid--compact{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .madero-brasil__eco-grid.madero-brasil__eco-grid--compact{ grid-template-columns:1fr 1fr 1fr; } }
.madero-brasil__eco-card--compact .madero-brasil__eco-card-img-btn{ aspect-ratio:4/3; background:#fff; }
.madero-brasil__eco-card--compact .madero-brasil__eco-card-img-btn img{
  object-fit:contain !important; padding:16px; box-sizing:border-box;
}
.madero-brasil__eco-card--compact .madero-brasil__eco-card-img-btn:hover img,
.madero-brasil__eco-card--compact .madero-brasil__eco-card-img-btn:focus-visible img{ transform:scale(1.02); }
.madero-brasil__eco-card--compact .madero-brasil__eco-card-overlay{ padding:14px; }
.madero-brasil__eco-card--compact .madero-brasil__eco-card-overlay h3{ font-size:16px; margin-top:1px; }
.madero-brasil__eco-card--compact .madero-brasil__card-category{ font-size:9.5px; }
.madero-brasil__eco-card--compact .madero-brasil__eco-card-desc{ font-size:11.5px; line-height:1.45; max-width:none; }
.madero-brasil__eco-card--compact .madero-brasil__eco-card-cta{ font-size:11.5px; margin-top:8px; }
.madero-brasil__eco-card--compact .madero-brasil__eco-card-img-btn:hover .madero-brasil__eco-card-desc,
.madero-brasil__eco-card--compact .madero-brasil__eco-card-img-btn:focus-visible .madero-brasil__eco-card-desc{ max-height:130px; }
@media (min-width:800px){ .madero-brasil__eco-grid{ grid-template-columns:1fr 1fr; } }
.madero-brasil__eco-card{ border-radius: var(--mb-radius-md); overflow:hidden; box-shadow: var(--mb-shadow-sm); }
.madero-brasil__eco-card-img-btn{
  position:relative; display:block; width:100%; aspect-ratio:16/9; border:none; padding:0; margin:0;
  cursor:pointer; background:#fff; font-family:inherit; text-align:left;
}
.madero-brasil__eco-card-img-btn img{
  position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important;
  object-fit:cover !important; object-position:center !important;
  transition: transform .5s ease;
}
.madero-brasil__eco-card-img-btn:hover img,
.madero-brasil__eco-card-img-btn:focus-visible img{ transform:scale(1.06); }
.madero-brasil__eco-card-overlay{
  position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; color:#fff;
  background: linear-gradient(180deg, rgba(0,82,139,0) 30%, rgba(0,82,139,.75) 68%, rgba(0,51,79,.94) 100%);
}
.madero-brasil__eco-card-overlay .madero-brasil__card-category{ color:#8FE1FF; font-size:11px; }
.madero-brasil__eco-card-overlay h3{ font-size:23px; margin:3px 0 0; color:#fff; }
.madero-brasil__eco-card-desc{
  display:block; font-size:13.5px; line-height:1.55; color:#e3eef2; margin-top:10px; max-width:520px;
  max-height:0; opacity:0; overflow:hidden;
  transition: max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
.madero-brasil__eco-card-cta{
  display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:#fff;
  opacity:0; transform:translateY(6px); transition: opacity .3s ease, transform .3s ease;
}
.madero-brasil__eco-card-img-btn:hover .madero-brasil__eco-card-desc,
.madero-brasil__eco-card-img-btn:focus-visible .madero-brasil__eco-card-desc{ max-height:140px; opacity:1; margin-top:10px; }
.madero-brasil__eco-card-img-btn:hover .madero-brasil__eco-card-cta,
.madero-brasil__eco-card-img-btn:focus-visible .madero-brasil__eco-card-cta{ opacity:1; transform:none; }
/* Em telas sem hover (celular/tablet) — em vez de forçar a descrição
   inteira sempre visível (ficava apertada e pouco legível), mostra
   só uma dica curta de "toque para mais informações", mantendo o
   card limpo. A descrição completa continua disponível no modal ao
   tocar no card. */
@media (hover:none){
  .madero-brasil__eco-card-desc{ display:none; }
  .madero-brasil__eco-card-cta{ opacity:1; transform:none; }
  .madero-brasil__eco-card-overlay h3{ font-size:20px; }
}

/* ==========================================================
   ATUALIZAÇÃO — BANNER OFICIAL + 3 SISTEMAS ROTATIVOS
   ========================================================== */

/* -------------------- BANNER PRINCIPAL (imagem oficial) -------------------- */
.madero-brasil__banner{ background: var(--mb-primary-700); text-align:center; padding:0 0 40px; }
.madero-brasil__banner-img{ width:100%; max-width:900px; margin:0 auto; display:block; }
.madero-brasil__banner-cta-bar{ padding-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* -------------------- 3 SISTEMAS ROTATIVOS (peso igual) -------------------- */
.madero-brasil__rotary-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:860px){ .madero-brasil__rotary-grid{ grid-template-columns:repeat(3,1fr); } }
.madero-brasil__rotary-card{
  background:#fff; border:1px solid var(--mb-gray-300); border-radius: var(--mb-radius-lg);
  overflow:hidden; display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease;
}
.madero-brasil__rotary-card:hover{ transform: translateY(-4px); box-shadow: var(--mb-shadow-md); }
.madero-brasil__rotary-media{ position:relative; aspect-ratio:4/3; background:#fff; overflow:hidden; }
.madero-brasil__rotary-media img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center !important; }
.madero-brasil__rotary-body{ padding:24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.madero-brasil__rotary-body .madero-brasil__card-actions{ margin-top:auto; padding-top:8px; }
.madero-brasil__rotary-body h3{ font-size:22px; margin:0; }
.madero-brasil__rotary-tagline{ font-weight:600; color: var(--mb-primary); font-size:14.5px; margin:0; }
.madero-brasil__rotary-body .madero-brasil__card-benefits{ flex:1; }

/* -------------------- SERVIÇOS -------------------- */
.madero-brasil__services-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .madero-brasil__services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .madero-brasil__services-grid{ grid-template-columns:repeat(4,1fr); } }
.madero-brasil__service-card{ border-radius: var(--mb-radius-md); background:#fff; border:1px solid var(--mb-gray-300); overflow:hidden; display:flex; flex-direction:column; }
.madero-brasil__service-media{ position:relative; aspect-ratio:16/9; background: var(--mb-gray-100); overflow:hidden; }
.madero-brasil__service-media img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; object-fit:cover !important; object-position:center !important; }
.madero-brasil__service-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,51,79,.15), rgba(0,51,79,.62)); }
.madero-brasil__service-card-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.madero-brasil__service-card-body button{ margin-top:auto; align-self:flex-start; }
.madero-brasil__service-icon{
  width:56px; height:56px; border-radius: var(--mb-radius-sm); background: var(--mb-primary);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0;
}
.madero-brasil__service-icon svg{ width:26px; height:26px; }
.madero-brasil__service-card h3{ font-size:16.5px; margin-bottom:8px; }
.madero-brasil__service-card p{ font-size:13.5px; color: var(--mb-text-muted); margin:0; }

/* -------------------- FORMULÁRIO HUBSPOT -------------------- */
#madero-brasil-hubspot-form{ min-height:120px; }
.madero-brasil__hubspot-scale-wrap{ width:100%; overflow:hidden; }
.madero-brasil__hubspot-scale-wrap iframe{ display:block; }

/* ==========================================================
   ANIMAÇÕES — entrada suave ao rolar a página
   Ativado via IntersectionObserver em madero-brasil.js.
   Qualquer elemento com [data-mb-reveal] começa invisível e
   levemente deslocado, e "aparece" quando entra na tela.
   Respeita prefers-reduced-motion (definido no topo do arquivo).
   ========================================================== */
.madero-brasil [data-mb-reveal]{
  opacity:0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.7,.32,1), transform .7s cubic-bezier(.22,.7,.32,1);
  transition-delay: var(--mb-reveal-delay, 0s);
}
.madero-brasil [data-mb-reveal].is-visible{ opacity:1; transform:none; }

/* Entrada do Hero — roda uma vez ao carregar a página (já está acima
   da dobra, então não depende de scroll) */
@keyframes mb-hero-in{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
.madero-brasil__hero-grid > div{ animation: mb-hero-in .8s cubic-bezier(.22,.7,.32,1) both; }
.madero-brasil__hero-logo{ animation: mb-hero-in .8s cubic-bezier(.22,.7,.32,1) .1s both; }

/* Leve zoom contínuo no fundo do hero, para dar sensação de movimento */
@keyframes mb-bg-zoom{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
.madero-brasil__hero-bg{ animation: mb-bg-zoom 18s ease-in-out infinite alternate; }


/* -------------------- FIX: header sticky -> fixed (overflow-x:hidden no .madero-brasil quebrava o sticky) -------------------- */
#madero-brasil-rotary, #madero-brasil-ecosistema, #madero-brasil-servicos, #madero-brasil-formulario{
  scroll-margin-top: 88px;
}

/* -------------------- FIX: banner do hero cortado no mobile -------------------- */
/* Em telas estreitas e muito altas (hero com min-height:100vh), o
   background-size:cover recorta bastante as laterais da peça gráfica
   dos 3 sistemas. Em mobile trocamos para "contain" (mostra a imagem
   inteira, sem cortar) ancorada no topo — o espaço restante mostra o
   degradê de fundo do hero, que já existe por trás desta camada. */
@media (max-width:760px){
  .madero-brasil__hero-bg{
    background-size:contain;
    background-position:top center;
    background-repeat:no-repeat;
  }
}

/* -------------------- FIX: formulário HubSpot cortado no mobile -------------------- */
/* Rede de segurança extra: se o formulário do HubSpot mudar de altura
   no futuro e voltar a ficar maior que NATURAL_HEIGHT (ver
   madero-brasil.js), isso garante que ainda dá para rolar até o fim
   dele em vez de simplesmente cortar o botão de enviar. */
/* -------------------- FIX: rede de segurança extra — força o encolhimento do formulário HubSpot via CSS puro -------------------- */
/* Isso NÃO depende do JavaScript calcular nada: mesmo que o script
   não rode (cache antigo, erro, etc.), o formulário ainda assim vai
   aparecer reduzido corretamente em vez de cortado na lateral. Os
   valores 64px/96px replicam o padding lateral de .madero-brasil__container
   nesses mesmos breakpoints (32px e 48px de cada lado). */
@media (max-width:767px){
  .madero-brasil__hubspot-scale-wrap iframe{
    transform: scale(calc((100vw - 64px) / 900)) !important;
    transform-origin: top left !important;
  }
}
@media (min-width:768px) and (max-width:899px){
  .madero-brasil__hubspot-scale-wrap iframe{
    transform: scale(calc((100vw - 96px) / 900)) !important;
    transform-origin: top left !important;
  }
}
.madero-brasil__hubspot-scale-wrap{ max-height:85vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }