
/* DIAGNÓSTICO CIOT — página construída sobre o sistema visual oficial Grupo MARGEM */
body.page-ciot main{overflow:hidden}
body.page-ciot .hero{
  min-height:560px!important;
  background-image:
    linear-gradient(90deg,#02173D 0%,rgba(2,23,61,.98) 34%,rgba(2,23,61,.88) 51%,rgba(2,23,61,.44) 70%,rgba(2,23,61,.08) 100%),
    radial-gradient(circle at 83% 45%,rgba(255,125,0,.12),transparent 24%)!important;
  background-size:cover!important;
  background-position:center!important;
}
body.page-ciot .hero-grid{display:grid!important;grid-template-columns:1.03fr .97fr!important;gap:20px!important;min-height:560px!important;padding:46px 0!important}
body.page-ciot .hero-copy{width:100%!important;max-width:680px!important}
body.page-ciot .hero h1{max-width:13ch!important}
body.page-ciot .hero-visual{
  display:flex!important;align-items:flex-end!important;justify-content:center!important;
  position:relative!important;min-height:500px!important;background:transparent!important;
  border:0!important;box-shadow:none!important;overflow:visible!important
}
body.page-ciot .hero-visual:before{
  content:"";position:absolute;inset:16% 2% 2% 12%;
  background:radial-gradient(circle,rgba(255,125,0,.15),transparent 63%);
  filter:blur(24px);pointer-events:none
}
body.page-ciot .hero-visual img{
  display:block!important;width:112%!important;max-width:none!important;height:auto!important;
  object-fit:contain!important;background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;filter:drop-shadow(0 28px 34px rgba(0,0,0,.30));
  transform:translate(4%,4%)
}
.page-ciot .ciot-price{display:flex;align-items:baseline;gap:10px;margin-top:24px}
.page-ciot .ciot-price small{color:var(--gm-text2);font-size:13px;font-weight:700}
.page-ciot .ciot-price strong{font-size:36px;line-height:1;color:#fff}
.page-ciot .ciot-price span{color:var(--gm-text2);font-size:12px}
.page-ciot .ciot-proof{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;color:var(--gm-text2);font-size:13px}
.page-ciot .ciot-proof b{color:var(--gm-orange);margin-right:5px}

.page-ciot .ciot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.page-ciot .ciot-card{
  position:relative;overflow:hidden;background:var(--gm-surface)!important;border:1px solid var(--gm-border)!important;
  border-radius:16px;padding:24px;min-height:205px;box-shadow:0 18px 45px rgba(0,0,0,.16);transition:.25s ease
}
.page-ciot .ciot-card:hover{transform:translateY(-6px);border-color:rgba(255,125,0,.52)!important}
.page-ciot .ciot-card i{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(255,125,0,.11);color:var(--gm-orange);margin-bottom:16px}
.page-ciot .ciot-card h3{margin:0 0 8px;color:#fff;font-size:17px}
.page-ciot .ciot-card p{margin:0;color:var(--gm-text2);font-size:14px}

.page-ciot .ciot-band{background:linear-gradient(90deg,#07111F,#0B2341)!important}
.page-ciot .ciot-band__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center}
.page-ciot .ciot-band h2{margin:0;color:#fff;font-size:clamp(30px,3.2vw,44px);line-height:1.12;letter-spacing:-.03em}
.page-ciot .ciot-band h2 span{color:var(--gm-orange)}
.page-ciot .ciot-band p{margin:0;padding-left:28px;border-left:2px solid var(--gm-orange);color:var(--gm-text2);font-size:17px}

.page-ciot .ciot-delivery{display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:center}
.page-ciot .ciot-report-art{position:relative;min-height:460px;display:flex;align-items:center;justify-content:center}
.page-ciot .ciot-report-art:before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,125,0,.13),transparent 67%);filter:blur(20px)}
.page-ciot .ciot-report-art img{position:relative;width:108%;max-width:none!important;filter:drop-shadow(0 30px 42px rgba(0,0,0,.28))}
.page-ciot .ciot-output{display:grid;gap:11px}
.page-ciot .ciot-output__item{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start;padding:15px;background:var(--gm-surface);border:1px solid var(--gm-border);border-radius:13px}
.page-ciot .ciot-output__item i{color:var(--gm-orange)}
.page-ciot .ciot-output__item strong{display:block;color:#fff;font-size:14px}
.page-ciot .ciot-output__item span{display:block;color:var(--gm-text2);font-size:13px;margin-top:3px}

.page-ciot .ciot-process{display:grid;grid-template-columns:repeat(4,1fr);gap:42px}
.page-ciot .ciot-step{position:relative;background:var(--gm-surface);border:1px solid var(--gm-border);border-radius:16px;padding:24px;min-height:180px}
.page-ciot .ciot-step:not(:last-child):after{content:"";position:absolute;right:-31px;top:50%;width:20px;height:20px;border-top:4px solid var(--gm-orange);border-right:4px solid var(--gm-orange);transform:translateY(-50%) rotate(45deg)}
.page-ciot .ciot-step b{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--gm-orange);color:#fff;font-size:12px;margin-bottom:16px}
.page-ciot .ciot-step h3{margin:0 0 8px;color:#fff;font-size:17px}
.page-ciot .ciot-step p{margin:0;color:var(--gm-text2);font-size:14px}

.page-ciot .ciot-pricebox{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.page-ciot .ciot-pricecard{background:linear-gradient(145deg,#0A2A59,#061F49);border:1px solid var(--gm-border);border-radius:18px;padding:30px;box-shadow:0 24px 55px rgba(0,0,0,.25)}
.page-ciot .ciot-pricecard .tag{color:var(--gm-orange);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.page-ciot .ciot-pricecard .value{font-size:58px;line-height:1;color:#fff;font-weight:800;letter-spacing:-.05em;margin:12px 0}
.page-ciot .ciot-pricecard .value small{font-size:18px}
.page-ciot .ciot-pricecard p{color:var(--gm-text2);font-size:13px}
.page-ciot .ciot-pricecard .btn{width:100%;margin-top:10px}
.page-ciot .ciot-safe{display:grid;gap:7px;margin-top:15px;color:var(--gm-text2);font-size:12px}
.page-ciot .ciot-safe span:before{content:"✓";color:var(--gm-orange);font-weight:900;margin-right:8px}

.page-ciot .ciot-note{margin-top:18px;padding:16px 18px;border-radius:12px;background:rgba(255,125,0,.09);border:1px solid rgba(255,125,0,.26);color:#F5D0AD;font-size:13px}
.page-ciot .faq details{transition:.2s ease}
.page-ciot .faq details:hover{border-color:rgba(255,125,0,.42)!important}

.page-ciot .reveal .ciot-card,.page-ciot .reveal .ciot-output__item,.page-ciot .reveal .ciot-step{
  opacity:0;transform:translateY(22px);transition:opacity .62s ease,transform .62s ease
}
.page-ciot .reveal.is-visible .ciot-card,.page-ciot .reveal.visible .ciot-card,
.page-ciot .reveal.is-visible .ciot-output__item,.page-ciot .reveal.visible .ciot-output__item,
.page-ciot .reveal.is-visible .ciot-step,.page-ciot .reveal.visible .ciot-step{opacity:1;transform:none}
.page-ciot .reveal.visible .ciot-card:nth-child(2),.page-ciot .reveal.visible .ciot-output__item:nth-child(2),.page-ciot .reveal.visible .ciot-step:nth-child(2){transition-delay:.06s}
.page-ciot .reveal.visible .ciot-card:nth-child(3),.page-ciot .reveal.visible .ciot-output__item:nth-child(3),.page-ciot .reveal.visible .ciot-step:nth-child(3){transition-delay:.12s}
.page-ciot .reveal.visible .ciot-card:nth-child(4),.page-ciot .reveal.visible .ciot-output__item:nth-child(4),.page-ciot .reveal.visible .ciot-step:nth-child(4){transition-delay:.18s}
.page-ciot .reveal.visible .ciot-card:nth-child(5),.page-ciot .reveal.visible .ciot-output__item:nth-child(5){transition-delay:.24s}
.page-ciot .reveal.visible .ciot-card:nth-child(6),.page-ciot .reveal.visible .ciot-output__item:nth-child(6){transition-delay:.30s}
.page-ciot .reveal.visible .ciot-card:nth-child(7){transition-delay:.36s}

@media(max-width:900px){
  body.page-ciot .hero-grid,.page-ciot .ciot-band__grid,.page-ciot .ciot-delivery,.page-ciot .ciot-pricebox{grid-template-columns:1fr!important}
  body.page-ciot .hero-visual{min-height:360px!important}
  body.page-ciot .hero-visual img{width:100%!important;transform:none}
  .page-ciot .ciot-grid{grid-template-columns:1fr 1fr}
  .page-ciot .ciot-process{grid-template-columns:1fr 1fr;gap:18px}
  .page-ciot .ciot-step:after{display:none}
}
@media(max-width:580px){
  .page-ciot .ciot-grid,.page-ciot .ciot-process{grid-template-columns:1fr}
  body.page-ciot .hero-visual{min-height:260px!important}
  .page-ciot .ciot-report-art{min-height:310px}
  .page-ciot .ciot-pricecard .value{font-size:48px}
}


/* AJUSTE HERO CIOT — 16/09/2026
   Somente cartão CIOT, sem caminhão. Transparência visual de 40% (opacity 0.60).
   Topo do cartão a ~1 cm da borda inferior do cabeçalho. */
body.page-ciot .hero{position:relative!important;isolation:isolate!important;overflow:hidden!important}
body.page-ciot .hero-grid{position:relative!important;z-index:2!important;grid-template-columns:minmax(0,1fr)!important;min-height:560px!important}
body.page-ciot .hero-copy{position:relative!important;z-index:5!important;max-width:650px!important}
body.page-ciot .hero-copy h1,body.page-ciot .hero-copy p,body.page-ciot .hero-copy .hero-actions,body.page-ciot .hero-copy .ciot-proof{position:relative!important;z-index:6!important}
body.page-ciot .hero-visual{
  position:absolute!important;
  z-index:1!important;
  top:38px!important; /* aproximadamente 1 cm abaixo da borda inferior do cabeçalho */
  right:-5.5%!important;
  width:min(62vw,920px)!important;
  min-height:0!important;
  height:auto!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}
body.page-ciot .hero-visual:before{display:none!important}
body.page-ciot .hero-visual img{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  display:block!important;
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 26px 36px rgba(0,0,0,.23))!important;
  transform:none!important;
  opacity:.60!important; /* 40% de transparência */
}
body.page-ciot .hero:after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(2,23,61,.98) 0%,rgba(2,23,61,.92) 37%,rgba(2,23,61,.52) 57%,rgba(2,23,61,.06) 76%,transparent 100%);
}
body.page-ciot .hero-grid{z-index:4!important}
body.page-ciot .hero .ciot-price{display:none!important}

/* Compra: URL Hotmart será aplicada ao receber o checkout oficial do CIOT. */
body.page-ciot a[data-hotmart-checkout="PENDENTE_URL_HOTMART_CIOT"]{cursor:pointer}

@media(max-width:900px){
  body.page-ciot .hero-grid{min-height:620px!important;padding-bottom:245px!important}
  body.page-ciot .hero-visual{top:auto!important;right:-10%!important;bottom:16px!important;width:105vw!important;max-width:760px!important}
  body.page-ciot .hero:after{background:linear-gradient(180deg,rgba(2,23,61,.98) 0%,rgba(2,23,61,.90) 52%,rgba(2,23,61,.26) 78%,rgba(2,23,61,.05) 100%)}
}
@media(max-width:580px){
  body.page-ciot .hero-grid{min-height:650px!important;padding-bottom:230px!important}
  body.page-ciot .hero-visual{right:-27%!important;bottom:6px!important;width:135vw!important}
}
