/* Iguaçu Auto-Serviço · página única a partir do template 02 (sections em altura automática) */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { background: var(--bg); }
.sec { height: auto; min-height: 0; padding: 120px 0; }

/* ---------- logo composto (fachada: IGUAÇU itálico vermelho + arco azul) ---------- */
.logo-ig { display: inline-flex; flex-direction: column; align-items: flex-start; position: relative; padding-left: 22px; line-height: 1; white-space: nowrap; }
.logo-ig::before {
  content: ''; position: absolute; left: 0; top: -2px; width: 30px; height: 30px;
  border: 3.5px solid var(--acc); border-right-color: transparent; border-radius: 50%; transform: rotate(-20deg);
}
.logo-ig b { font-family: var(--f-titulo); font-style: italic; font-weight: 900; font-size: 25px; letter-spacing: -.01em; color: var(--acc-2); }
.logo-ig small { font-family: var(--f-titulo); font-style: italic; font-weight: 800; font-size: 10.5px; letter-spacing: .14em; color: var(--acc); margin-top: 3px; padding-left: 2px; }
.logo-ig.claro b { color: #fff; }
.logo-ig.claro small { color: var(--papel); opacity: .85; }
.logo-ig.claro::before { border-color: var(--acc-2); border-right-color: transparent; }

/* ---------- nav fixo ---------- */
.topo-nav { position: fixed; left: 0; right: 0; top: 0; z-index: 100; pointer-events: none; padding-top: 18px; }
.topo-nav .nav {
  pointer-events: auto; position: relative; left: auto; top: auto; translate: none; margin: 0 auto;
  width: min(1200px, calc(100% - 64px)); height: 68px; padding: 0 8px 0 16px; gap: 24px;
  background: #fff; border: 1px solid rgba(46, 43, 39, .28);
  transition: width .5s var(--ease), height .5s var(--ease), background-color .4s, box-shadow .4s;
}
.topo-nav.rolou .nav {
  width: min(940px, calc(100% - 64px)); height: 60px;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 12px 30px -18px rgba(46, 43, 39, .45);
}
.topo-nav .logo { flex: none; }
.topo-nav .links { display: flex; gap: 30px; margin: 0 auto; font-family: var(--f-mono); font-size: 14px; }
.topo-nav .links a { position: relative; padding: 6px 0; }
.topo-nav .btn { height: 50px; font-size: 14px; padding-right: 16px; gap: 12px; flex: none; }
.topo-nav.rolou .btn { height: 46px; }
.topo-nav .btn .seta { width: 36px; height: 36px; }
.menu-bt, .menu-m, .topo-nav .btn .txt-m { display: none; }
@media (hover: hover) and (pointer: fine) {
  .topo-nav .links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
  .topo-nav .links a:hover::after { transform: scaleX(1); }
}

/* WhatsApp flutuante (só celular, aparece depois do hero) */
.zap-flut { display: none; }

/* ======================= 01 HERO ======================= */
.hero { padding: 148px 0 0; }
.hero .coords { top: 112px; }
.hero .canto-dir { top: 116px; }
.hero .mao { margin-top: 0; }
.hero h1 { font-size: 100px; }
.hero h1 em { font-style: normal; color: var(--acc); position: relative; white-space: nowrap; }
.hero h1 em::after {
  content: ''; position: absolute; left: 2%; right: 1%; bottom: -.04em; height: .12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 50 3, 120 4, 198 6' fill='none' stroke='%23D21F33' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hero-acoes { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.nota-mini { font-family: var(--f-mono); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.nota-mini .est { color: var(--acc-2); letter-spacing: 1px; font-size: 15px; }
.nota-mini b { font-weight: 700; }
.moldura { position: relative; left: auto; right: auto; top: auto; margin: 56px auto 0; width: calc(100% - 240px); max-width: 1200px; height: 420px; }
.tela img { object-position: 50% 50%; }

/* ======================= 02 SERVIÇOS ======================= */
.servicos .wrap { padding-top: 0; max-width: 1440px; margin: 0 auto; }
.servicos .esq { position: relative; z-index: 2; }
.ficha .pr { font-family: var(--f-mao); font-weight: 400; font-size: 16px; color: var(--acc-2); }
.ficha .fita { background: rgba(210, 31, 51, .2); }
.ficha:nth-child(3n+2) .fita { background: rgba(36, 71, 154, .18); }
.servicos .obj.oleo { bottom: -24px; }

/* ======================= 03 CARTA ======================= */
.carta-sec { padding-bottom: 0; }
.carta-sec .mao { margin-top: 0; }
.carta-palco { position: relative; width: 760px; margin: 56px auto 0; padding-top: 0; }
.carta { position: relative; left: auto; top: auto; margin: 0 auto; padding-bottom: 150px; }
.envelope { left: 0; margin-left: 0; width: 100%; }
.carta-sec .ob1 { width: 220px; left: 150px; top: 330px; }
.carta-sec .ob2 { width: 250px; right: 70px; top: 610px; }
.carta-sec .ob3 { width: 380px; left: -40px; top: 640px; }
.carta .polaroid img { object-position: 60% 50%; }

/* ======================= 04 COMO FUNCIONA ======================= */
.orc .wrap { padding-top: 0; max-width: 1440px; margin: 0 auto; }
.os .num-d { text-align: right; }
.os .lista li b { color: var(--acc); }
.os .tot strong { color: var(--acc); }
.ck svg { color: var(--acc); }
.os-tras { background: #E9C7C5; }
.os-wrap { height: 740px; }
.carimbo { top: 690px; }

/* ======================= 05 HISTÓRIA ======================= */
.hist .topo { padding: 0 var(--pad); max-width: 1440px; margin: 0 auto; }
.marcos { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 64px auto 0; padding: 0 var(--pad); max-width: 1440px; height: 600px; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.marcos .linha { position: absolute; left: 0; right: 0; top: 248px; }
.marco .polaroid { width: 260px; height: 180px; }
.marco:nth-child(even) .polaroid { top: 0; height: 180px; }
.marco:nth-child(even of .marco) .polaroid { top: 386px; height: 190px; }
.marco p { max-width: 340px; }

/* ======================= 06 AVALIAÇÕES ======================= */
.aval .topo { padding: 0 var(--pad); max-width: 1440px; margin: 0 auto; }
.trilhos { position: relative; top: auto; margin-top: 56px; }
.nota { width: 380px; }
.nota p { min-height: 0; }
.nota .fita { background: rgba(36, 71, 154, .15); }
.aval .rodape { position: relative; left: auto; right: auto; bottom: auto; margin: 48px auto 0; padding: 0 var(--pad); max-width: 1440px; }

/* ======================= 07 FAQ ======================= */
.faq .wrap { padding-top: 0; max-width: 1440px; margin: 0 auto; }
.faq .esq { position: relative; z-index: 2; }
.acc { padding-top: 40px; }

/* ======================= 08 CONTATO ======================= */
.contato { padding-bottom: 0; }
.contato .wrap { padding-top: 0; max-width: 1440px; margin: 0 auto; }
.contato .polaroid.fachada { position: relative; width: 340px; height: 300px; margin-top: 56px; rotate: -3deg; }
.contato .polaroid.fachada img { object-position: 50% 32%; }
.linhas-c a { text-decoration: underline; text-decoration-color: rgba(46, 43, 39, .3); text-underline-offset: 3px; }
.pe { position: relative; left: auto; right: auto; bottom: auto; margin: 104px var(--pad) 0; max-width: calc(1440px - 2 * var(--pad)); }
@media (min-width: 1441px) { .pe { margin-left: auto; margin-right: auto; } }
.pe .logo-ig b { font-size: 22px; }
.faq .obj.rolamento { width: 210px; left: 56px; bottom: -48px; }
.etiqueta-end { align-self: start; }
.logo-ig { padding-left: 26px; }
.btn { white-space: nowrap; }