/* =====================================================================
   Franquia Coxinha no Pote — Landing Page
   Layout replicado 1:1 de franquias.suacoxinha.com.br (Divi 5),
   com dados, textos e imagens da Coxinha no Pote.
   ===================================================================== */

/* ---------- Fontes de ícones (auto-hospedadas) ---------- */
@font-face {
  font-family: "ETmodules";
  src: url("../assets/fonts/etmodules.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FontAwesome";
  src: url("../assets/fonts/fa-regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --primary: #131313;      /* fundo principal */
  --secondary: #f9c115;    /* amarelo da marca */
  --tertiary: #212121;     /* cartões escuros */
  --text-light: #ffffff;
  --btn-hover: #d3a415;
  --border-dark: #343434;
  --font: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
}

/* ---------- Reset / base (valores globais do Divi) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--primary);
  color: var(--primary);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.7em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding-bottom: 10px;
  font-family: var(--font);
  font-weight: 500;
  line-height: 1em;
  color: var(--primary);
}
p { margin: 0; padding-bottom: 1em; }
p:last-child { padding-bottom: 0; }
a { color: var(--secondary); text-decoration: none; }
strong { font-weight: 700; }
button { font-family: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Ícones ---------- */
.icon-check { display: inline-block; font-style: normal; }
.icon-check::before {
  content: "\f058";
  font-family: "FontAwesome";
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.et-icon {
  font-family: "ETmodules";
  font-weight: 400;
  font-style: normal;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

/* ---------- Estrutura (Divi flex: section > row > column > module) ---------- */
.sec {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px 0;
  background-color: var(--primary);
  background-size: cover;
  background-position: 50% 50%;
}
.row {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1280px;
  gap: 40px 5.5%;
}
.col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-height: 1px;
  z-index: 2;
}
.row-narrow { width: 50%; }

/* Títulos padrão (h2 amarelo, 35px/1.2em, 800, maiúsculas) */
.heading h2 {
  font-size: 35px;
  font-weight: 800;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--secondary);
}
.heading--center { align-self: center; }
.heading--center h2 { text-align: center; }
.heading--left h2 { text-align: left; }
.text-light, .text-light p { color: var(--text-light); }
.text-center, .text-center p { text-align: center; }

/* ---------- Botões (preset Divi "default") ---------- */
.btn {
  position: relative;
  display: inline-block;
  max-width: max-content;
  padding: 0.3em 1em;
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: 50px;
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
  transition: background-color 300ms ease, border-color 300ms ease;
  cursor: pointer;
}
.btn:hover { background-color: var(--btn-hover); border-color: var(--btn-hover); }
.btn-wrap { position: relative; }
.btn-wrap--center { text-align: center; }

/* =====================================================================
   1. HERO
   ===================================================================== */
.sec-hero {
  height: 100vh;
  padding: 15px 0 57px;
  justify-content: center;
  gap: 40px;
  background-color: var(--primary);
  background-image: url("../assets/img/hero-desktop.jpg");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
}
/* vinheta escura à esquerda / base (na página original ela está "queimada" na foto) */
.sec-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #131313 0%, #131313 27%, rgba(19, 19, 19, 0.9) 40%, rgba(19, 19, 19, 0.5) 55%, rgba(19, 19, 19, 0.18) 70%, rgba(19, 19, 19, 0.1) 86%, rgba(19, 19, 19, 0.35) 100%),
    linear-gradient(180deg, rgba(19, 19, 19, 0.45) 0%, rgba(19, 19, 19, 0.05) 28%, rgba(19, 19, 19, 0.05) 62%, #131313 100%);
}
.row-hero { width: 100%; }
.col-hero { gap: 20px 30px; }
.hero-logo { display: none; }
.hero-logo img { height: 40px; width: auto; }

.eyebrow {
  align-self: flex-start;
  padding: 13px 15px 0;
  background-color: #181818;
  border: 1px solid #2a2a2a;
  border-radius: 50px;
  overflow: hidden;
}
.eyebrow h1 {
  font-size: 10px;
  font-weight: 600;
  line-height: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-light);
  padding-bottom: 10px;
}
.hero-title { width: 40%; }
.hero-title h2 {
  font-size: 45px;
  font-weight: 800;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--secondary);
}
.hero-text { width: 40%; margin-bottom: 10px; }
.hero-text p { color: var(--text-light); }

.hero-pills {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 5px;
  width: 45%;
  margin-bottom: 10px;
}
.pill {
  display: flex;
  flex-direction: row;
  gap: 10px 6px;
  width: 33%;
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  overflow: hidden;
}
.pill .icon-check {
  align-self: center;
  font-size: 30px;
  line-height: 30px;
  color: var(--secondary);
  text-align: center;
}
.pill p {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--secondary);
}
.btn-hero { font-size: 14px; }

/* =====================================================================
   2. FORMULÁRIO (topo)
   ===================================================================== */
.sec-form-top {
  padding: 60px 0;
  background-color: var(--tertiary);
  background-image: radial-gradient(circle at center, #1c1c1c 0%, #131313 100%);
}
.sec-form-top::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../assets/img/pattern-alpha.png");
  background-size: 1400px auto;
  background-repeat: repeat;
  background-position: center top;
  opacity: 0.16;
}
.row-form {
  width: 50%;
  padding: 60px;
  gap: 40px 2.5%;
  background-color: var(--primary);
  border-radius: 10px;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.col-form { gap: 20px 30px; width: 100%; }
.form-heading { width: 90%; }
.form-intro p { color: var(--text-light); text-align: center; }

/* ---------- Campos (ConverLab Forms) ---------- */
.lead-form { width: 100%; }
.fields-row { display: flex; gap: 10px; }
.field { margin-bottom: 10px; }
.field--50 { flex: 1 1 0; }
.field input,
.field select {
  display: inline-block;
  width: 100%;
  min-height: 46px;
  padding: 12px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 6px;
  color: #222;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.field select option { color: #222; }
.field input::placeholder { color: #222; opacity: 1; font-size: 14px; font-weight: 600; }
.field input:focus, .field select:focus { border-color: var(--secondary); }
.field.has-error input, .field.has-error select { border-color: #e74c3c; }
.field-error {
  display: none;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: #e74c3c;
}
.field.has-error .field-error,
.consent.has-error .field-error { display: block; }

.consent { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.consent-label {
  display: flex;
  gap: 10px;
  color: var(--text-light);
  font-size: 10px;
  font-weight: 500;
  line-height: 14.5px;
  text-align: left;
  cursor: pointer;
}
.consent-label input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--secondary);
  cursor: pointer;
}
.consent-label a { color: var(--secondary); }

.form-message {
  display: none;
  margin-top: 15px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.form-message.is-success { display: block; background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }
.form-message.is-warning { display: block; background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }

.submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 60px;
  margin-top: 12px;
  padding: 13px 18px;
  background-color: var(--secondary);
  border: 0;
  border-radius: 50px;
  color: var(--primary);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.15s, opacity 0.2s;
}
.submit-btn:hover { background-color: var(--btn-hover); }
.submit-btn:active { transform: scale(0.97); }
.submit-btn.is-loading, .submit-btn:disabled { pointer-events: none; opacity: 0.75; }
.submit-btn .spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(19, 19, 19, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.submit-btn.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.hp-field {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* =====================================================================
   3. PRODUTO (seção amarela + accordion slider)
   ===================================================================== */
.sec-products {
  background-color: var(--secondary);
  background-image: radial-gradient(circle at bottom right, #f8cc43 0%, #f9c115 100%);
}
.sec-products::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg fill='%23f9c115' preserveAspectRatio='none' viewBox='0 0 112 56' height='56px' width='112px' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0H56L0,28ZM112,0H56l56,28Zm0,56L56,28,0,56Z'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 112px 56px;
}
.row-products { align-items: center; gap: 40px 2.5%; }
.col-products-text { width: calc(40% - 2.5% * 0.6); gap: 20px; }
.col-products-slider { width: calc(60% - 2.5% * 0.4); }
.products-heading h2 { color: var(--primary); text-align: left; }
.products-text p { color: var(--primary); text-align: left; }

.acc-slider { position: relative; color: var(--text-light); }
.acc-track { display: flex; height: 430px; width: 100%; }
.acc-item {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.acc-item:first-child { border-radius: 0; }
.acc-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 0.5s ease-in-out;
}
.acc-pagination { position: relative; margin-top: 15px; text-align: center; z-index: 10; }

/* =====================================================================
   4. PRODUÇÃO (galeria + benefícios)
   ===================================================================== */
.row-production { align-items: center; gap: 40px 2.5%; }
.col-gallery, .col-production-text { width: calc(50% - 2.5% / 2); }
.col-production-text .heading { align-self: center; }
.production-text p { color: var(--text-light); text-align: left; }

.gallery {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  color: var(--text-light);
}
.gallery-items { position: relative; }
.gallery-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  border-radius: 10px;
  overflow: hidden;
}
.gallery-item.is-active { position: relative; opacity: 1; z-index: 2; }
.gallery-item img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  margin-top: -24px;
  z-index: 100;
  font-family: "ETmodules";
  font-size: 48px;
  line-height: 1;
  color: var(--primary);
  opacity: 0;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}
.gallery-arrow-prev { left: -22px; }
.gallery-arrow-next { right: -22px; }
.gallery-arrow-prev::before { content: "4"; }
.gallery-arrow-next::before { content: "5"; }
.gallery:hover .gallery-arrow-prev { left: 22px; opacity: 1; }
.gallery:hover .gallery-arrow-next { right: 22px; opacity: 1; }

.row-benefits { align-items: stretch; gap: 40px 1.5%; }
.col-benefit { width: calc(16.6667% - 1.5% * 5 / 6); }
.col-benefit-label {
  background-color: var(--secondary);
  border-radius: 10px;
  overflow: hidden;
}
.benefit-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.benefit-label p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7em;
  color: var(--primary);
  white-space: nowrap;
}
.col-benefit-item {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border: 3px solid var(--secondary);
  border-radius: 10px;
  overflow: hidden;
}
.col-benefit-item .icon-check {
  align-self: center;
  font-size: 30px;
  line-height: 30px;
  color: var(--secondary);
  text-align: center;
}
.col-benefit-item p {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: left;
}

/* =====================================================================
   5. MODELOS DE NEGÓCIO
   ===================================================================== */
.col-models-intro { gap: 20px 30px; width: 100%; }
.models-intro p { color: var(--text-light); text-align: center; }
.row-models { gap: 40px 5.5%; }
.col-model { width: calc(50% - 5.5% / 2); gap: 30px; }

.model-card {
  position: relative;
  display: flex;
  width: 100%;
  gap: 40px 0;
  background-color: var(--primary);
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}
.model-media {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(60% - 0% * 0.4);
  z-index: 2;
}
.model-media img {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  z-index: 1;
}
.model-name {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 15px 0 5px 15px;
  background-image: linear-gradient(90deg, #000000 0%, rgba(255, 255, 255, 0) 100%);
  background-repeat: no-repeat;
  z-index: 2;
}
.model-name h4 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-light);
}
.model-desc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(40% - 0% * 0.6);
  padding: 25px;
  background-color: var(--secondary);
  z-index: 2;
}
.model-desc p { font-size: 13px; font-weight: 600; line-height: 1.4em; color: var(--primary); }
.model-card--first .model-desc p { font-size: 12px; }

.model-stats { display: flex; flex-direction: column; gap: 5px 0; }
.stat {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  padding: 0 10px 5px;
  border-bottom: 1px solid var(--border-dark);
}
.stat p { padding: 0; font-size: 14px; line-height: 27.2px; color: var(--text-light); }
.stat p:not(.stat-value) { white-space: nowrap; flex-shrink: 0; }
.stat .stat-value { flex: 1 1 auto; min-width: 0; font-weight: 700; text-transform: uppercase; text-align: right; }

.row-indicators { width: 42%; }
.col-indicators { width: 100%; gap: 30px; }
.indicators p { font-size: 20px; font-weight: 600; color: var(--text-light); text-align: center; }
.btn-models { font-size: 16px; line-height: 1.1em; }

/* =====================================================================
   6. ESTRUTURA / SUPORTE
   ===================================================================== */
.col-support-intro { gap: 20px; width: 100%; }
.support-intro p { color: var(--text-light); text-align: center; }
.row-support { gap: 40px 5.5%; }
.col-support {
  width: calc(25% - 5.5% * 3 / 4);
  gap: 20px;
  padding: 30px;
  border: 3px solid var(--secondary);
  border-radius: 10px;
  overflow: hidden;
}
.support-icon { display: flex; justify-content: center; align-items: center; }
.support-icon img { height: 80px; width: auto; }
.col-support h5 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
}
.col-support p { font-size: 14px; line-height: 1.5em; color: var(--text-light); text-align: center; }

/* =====================================================================
   7. DEPOIMENTOS (carrossel de vídeos)
   ===================================================================== */
.row-testimonials { align-items: center; gap: 40px 2.5%; }
.col-testimonials-text { width: calc(33.3333% - 2.5% * 2 / 3); gap: 20px; }
.col-testimonials-carousel { width: calc(66.6667% - 2.5% / 3); }
.col-testimonials-text .heading { align-self: flex-start; }
.testimonials-text p { color: var(--text-light); text-align: left; }
.btn-testimonials { font-size: 11px; }

.vcarousel { position: relative; display: flex; flex-direction: column; gap: 30px; }
.vcarousel-container { position: relative; overflow: hidden; }
.vcarousel-track {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  transition: transform 0.2s ease-in-out;
  will-change: transform;
}
.vcarousel-track.no-transition { transition: none !important; }
.vcarousel-slide { flex: 0 0 50%; min-width: 0; max-width: 100%; }
.vcard { display: flex; flex-direction: column; gap: 30px; padding: 0 10px; }
.video-card {
  position: relative;
  display: block;
  width: 100%;
  height: 1006px;
  padding: 0;
  background: #000;
  border: 3px solid var(--secondary);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}
.video-card img { width: 100%; height: 100%; object-fit: cover; }
.video-card-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 16px 40px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
  color: var(--text-light);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.video-card-title small { display: block; font-size: 12px; font-weight: 500; opacity: 0.85; margin-top: 2px; }
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  background: rgba(33, 33, 33, 0.8);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}
.video-card:hover .video-play { background: #ff0000; }
.vcarousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 20px;
  padding: 0;
  background-color: rgba(19, 19, 19, 0.8);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  z-index: 5;
  line-height: 0;
}
.vcarousel-arrow-prev { left: 0; }
.vcarousel-arrow-next { right: 0; }
.vcarousel-arrow .et-icon { font-size: 48px; line-height: 48px; color: var(--secondary); }

/* ---------- Lightbox de vídeo ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.9); }
.lightbox-content { position: relative; width: 100%; max-width: 960px; }
.lightbox-content.is-vertical { max-width: calc(85vh * 9 / 16); }
.lightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 3px solid var(--secondary);
  border-radius: 10px;
  overflow: hidden;
}
.lightbox-content.is-vertical .lightbox-frame { aspect-ratio: 9 / 16; max-height: 85vh; }
.lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 34px;
  line-height: 36px;
  cursor: pointer;
}

/* =====================================================================
   8. PERFIL IDEAL
   ===================================================================== */
.row-profile { gap: 40px 2.5%; }
.col-profile { width: calc(33.3333% - 2.5% * 2 / 3); }
.col-profile-text { gap: 20px; }
.col-profile-text .heading { align-self: center; }
.profile-text p { color: var(--text-light); text-align: left; }
.col-profile-box {
  gap: 30px;
  padding: 40px;
  border: 3px solid var(--secondary);
  border-radius: 10px;
  overflow: hidden;
}
.profile-box-title p {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5em;
  text-transform: uppercase;
  color: var(--text-light);
}
.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px 30px;
  line-height: 26px;
}
.icon-list li { display: flex; align-items: center; gap: 30px 10px; }
.icon-list .icon-check {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 16px;
  margin-top: 5px;
  font-size: 16px;
  line-height: 16px;
  color: var(--secondary);
}
.icon-list .li-text { flex: 1 1 0; color: var(--text-light); line-height: 1.5em; }

/* =====================================================================
   9. FAQ
   ===================================================================== */
.col-faq { width: 100%; gap: 30px; }
.faq-heading { align-self: center; max-width: 100%; }
.faq { display: flex; flex-direction: column; gap: 10px 30px; }
.faq-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: var(--tertiary);
  border: 1px solid #313131;
  border-radius: 3px;
  box-shadow: 0 0 40px rgba(49, 49, 49, 0.3);
  overflow: hidden;
}
.faq-title {
  position: relative;
  margin: 0;
  padding: 0 50px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1em;
  color: var(--text-light);
  cursor: pointer;
}
.faq-title::before {
  content: "\e050";
  font-family: "ETmodules";
  position: absolute;
  right: -4px;
  top: 50%;
  margin-top: -0.5em;
  font-size: 24px;
  line-height: 24px;
  color: var(--secondary);
}
.faq-item.is-open .faq-title::before { display: none; }
.faq-content {
  display: none;
  padding-top: 20px;
  font-size: 14px;
  line-height: 27.2px;
  color: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.faq-item.is-open .faq-content { display: block; }

/* =====================================================================
   10. CTA FINAL (fundo amarelo com "seta" preta)
   ===================================================================== */
.sec-cta {
  padding: 100px 0;
  background-color: var(--secondary);
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  /* réplica do back-seta: bloco preto + chevron + padrão da marca sobre amarelo */
  background-image:
    linear-gradient(to bottom right, #131313 49.8%, rgba(19, 19, 19, 0) 50.2%),
    linear-gradient(to bottom left, #131313 49.8%, rgba(19, 19, 19, 0) 50.2%),
    linear-gradient(#131313, #131313),
    url("../assets/img/pattern-alpha.png");
  background-position: left 0 top 21.9vw, right 0 top 21.9vw, center top, center top;
  background-size: 50.1% 19.3vw, 50.1% 19.3vw, 100% calc(21.9vw + 1px), 700px auto;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
}
.row-cta { width: 50%; align-items: center; }
.col-cta { width: 100%; gap: 30px; }
.cta-heading h2 { line-height: 1.1em; }
.cta-box {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 60px;
  background-color: var(--tertiary);
  border: 1px solid #333;
  border-radius: 10px;
  box-shadow: 0 0 40px var(--tertiary);
  overflow: hidden;
}
.cta-text p { font-size: 22px; font-weight: 700; line-height: 1.5em; color: var(--text-light); text-align: center; }

/* =====================================================================
   11. RODAPÉ
   ===================================================================== */
.sec-footer { padding: 57px 0; }
.col-footer { width: 100%; }
.footer-text { text-align: center; }
.footer-text p { color: var(--text-light); text-align: center; }
.footer-text a { color: var(--secondary); }
.footer-text strong a { font-weight: 700; }

/* =====================================================================
   RESPONSIVO — TABLET (≤ 980px)  [breakpoint "tablet" do Divi]
   ===================================================================== */
@media only screen and (max-width: 980px) {
  .row { width: 90%; }
  .row-narrow, .row-form, .row-cta { width: 90%; }
  .row-indicators { width: 70%; }

  /* hero */
  .sec-hero {
    height: auto;
    padding-bottom: 600px;
    background-image: url("../assets/img/hero-mobile.jpg");
    background-position: center bottom;
  }
  .sec-hero::before { display: none; }
  .row-hero { width: 90%; }
  .hero-logo { display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; }
  .eyebrow { align-self: center; }
  .hero-title { width: 100%; }
  .hero-title h2 { font-size: 36px; text-align: center; }
  .hero-title h2 br { display: none; }
  .hero-text { width: 100%; }
  .hero-text p { text-align: center; }
  .hero-pills { width: 100%; }
  .btn-wrap-hero { text-align: center; }

  /* títulos */
  .heading h2, .products-heading h2 { font-size: 30px; }

  /* produtos */
  .row-products { flex-direction: column; align-items: center; }
  .col-products-text, .col-products-slider { width: 100%; }

  /* produção / benefícios */
  .row-benefits { flex-wrap: wrap; row-gap: 12px; }
  .col-benefit { width: calc(33.3333% - 1.5% * 2 / 3); }

  /* modelos */
  .row-models { flex-direction: column; flex-wrap: wrap; }
  .col-model { width: 100%; }

  /* suporte */
  .row-support { flex-wrap: wrap; }
  .col-support { width: calc(50% - 5.5% / 2); }

  /* depoimentos */
  .row-testimonials { flex-direction: column; align-items: center; }
  .col-testimonials-text, .col-testimonials-carousel { width: 100%; }
  .col-testimonials-text .heading { align-self: flex-start; }

  /* perfil */
  .row-profile { flex-direction: column; flex-wrap: wrap; }
  .col-profile { width: 100%; }

  /* cta */
  .sec-cta { padding-top: 40px; }

  /* parallax off */
  .sec-form-top::before { background-attachment: scroll; }
}

/* =====================================================================
   RESPONSIVO — PHONE (≤ 767px)  [colunas 24/24 no phone]
   ===================================================================== */
@media only screen and (max-width: 767px) {
  .row-production { flex-wrap: wrap; }
  .col-gallery, .col-production-text { width: 100%; }
  .gallery .gallery-arrow-prev { left: 22px; opacity: 1; }
  .gallery .gallery-arrow-next { right: 22px; opacity: 1; }
  .gallery:hover .gallery-arrow-prev { left: 0; }
  .gallery:hover .gallery-arrow-next { right: 0; }

  .col-benefit { width: calc(50% - 1.5% / 2); }

  .model-card { flex-wrap: wrap; }
  .model-media, .model-desc { width: 100%; }

  .col-support { width: 100%; }

  /* no celular o original mantém 2 vídeos por vez, na proporção 563:1000 */
  .video-card { height: auto; aspect-ratio: 563 / 1000; }
  .video-card-title { padding: 8px 10px 24px; font-size: 11px; }
  .video-card-title small { font-size: 9px; }
  .video-play { width: 44px; height: 30px; margin: -15px 0 0 -22px; border-radius: 8px; }
  .video-play::before { border-width: 7px 0 7px 12px; }
}

/* Formulário: campos em coluna única no celular (ConverLab) */
@media only screen and (max-width: 600px) {
  .fields-row { flex-direction: column; gap: 0; }
  .submit-btn { font-size: 18px; min-height: 60px; }
}

/* =====================================================================
   RESPONSIVO — PHONE PEQUENO (≤ 531px)  [breakpoint "phone" do Divi]
   ===================================================================== */
@media only screen and (max-width: 531px) {
  .sec { padding: 50px 0; }
  .sec-hero { padding: 15px 0 320px; justify-content: flex-start; align-items: center; }
  .row { width: 95%; }
  .row-hero, .row-narrow, .row-form, .row-cta, .row-indicators { width: 95%; }
  .col-hero { gap: 10px 30px; }
  .hero-logo img { height: 35px; }
  .eyebrow h1 { font-size: 8px; }
  .hero-title { margin-bottom: 0; }
  .hero-title h2 { font-size: 22px; }
  .hero-text { margin-bottom: 0; }
  .hero-text p { font-size: 14px; line-height: 1.5em; }
  .pill { flex-direction: column; padding: 15px 10px; text-align: center; }
  .pill p { font-size: 10px; text-align: center; }
  .btn-hero { font-size: 14px; }

  .heading h2, .products-heading h2 { font-size: 22px; }
  .form-intro p, .production-text p, .models-intro p, .support-intro p,
  .testimonials-text p, .profile-text p, .products-text p { font-size: 14px; line-height: 1.5em; }

  .sec-form-top { padding: 50px 0; }
  .row-form { padding: 20px; flex-wrap: wrap; }
  .submit-btn { font-size: 18px; min-height: 54px; }

  .acc-track { height: 250px; }

  .col-benefit-item { flex-direction: column; align-items: center; }
  .col-benefit-item p { font-size: 10px; text-align: center; }

  .sec-models { gap: 40px; }
  .indicators p { font-size: 18px; }
  .btn-models { line-height: 1.1em; }
  .btn-testimonials { font-size: 11px; }

  .col-profile-box { padding: 20px; }

  .vcarousel-arrow { margin: 0; }
  .vcarousel-arrow .et-icon { font-size: 40px; line-height: 40px; }
  .vcard { padding: 0 5px; }

  .sec-cta {
    padding: 50px 0;
    background-position: left 0 top 54.75vw, right 0 top 54.75vw, center top, center top;
    background-size: 50.1% 48.2vw, 50.1% 48.2vw, 100% calc(54.75vw + 1px), 500px auto;
  }
  .cta-box { padding: 20px; gap: 20px; }
  .cta-text p { font-size: 16px; line-height: 1.5em; }

  .sec-footer { padding: 50px 0 120px; }
  .footer-text p { font-size: 12px; line-height: 1.5em; }
}

/* Parallax do padrão (somente desktop com ponteiro fino) */
@media only screen and (min-width: 981px) and (hover: hover) {
  .sec-form-top::before { background-attachment: fixed; }
}