/* ==========================================================================
   Bencke's Tile, paginas internas (onda 1). Dono: GERADOR (gerar.py + src/templates/).
   Carregado DEPOIS do base.css e dos s-*.css, so nas paginas internas. Usa os tokens e as classes do CONTRATO.md
   (.sec, .wrap, .h2, .h3, .kick, .lead, .lnk, .btn, .card, .photo, .pend) e acrescenta so o que a home nao tem.
   Prefixos: .crumb .hero--in .itx .ilist .iobr .iare .icar .icon .ig .itbl .ipj
   ========================================================================== */

/* ------------------------------------------------------------------ cabecalho: pagina atual */
.hd__nav a[aria-current="page"]::after{ right:0 }

/* ------------------------------------------------------------------ breadcrumb */
.crumb{ margin:0 0 4px }
.crumb ol{ display:flex; flex-wrap:wrap; align-items:center; font-size:13.5px; font-weight:500; line-height:1.2; color:var(--pedra) }
.crumb li{ display:flex; align-items:center; min-width:0 }
.crumb li+li::before{
  content:""; flex:none; width:6px; height:6px; margin:0 11px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(45deg); opacity:.55;
}
.crumb a{ display:inline-flex; align-items:center; min-height:44px; color:var(--pedra); text-decoration:none; transition:color .2s }
.crumb a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px }
.crumb [aria-current]{ color:#fff }

/* ------------------------------------------------------------------ hero interno (o da home, menor)
   Mesmas classes e mesma pele: H1 palavra por palavra, pilula de ligar em lima, formulario de 2 passos e foto real a direita
   (em cima no celular). Sem formulario (.hero--noform) o botao lima aparece; sem foto (.hero--plain) entra a grade de juntas. */
.hero--in{ --pt:calc(var(--hd-h) + 28px); --pb:76px; min-height:0 }
.hero--in .hero__copy{ padding-top:0 }
.hero--in .hero__sub{ max-width:54ch; margin-top:18px; animation-delay:.4s }
.hero--in .hero__call{ margin-top:24px; animation-delay:.55s }
.hero--in .hero__call-n{ font-size:clamp(30px,2.8vw,42px) }
.hero--in .hero__acts{ margin-top:20px; animation-delay:.7s }
.hero--in .hero__proofs{ animation-delay:.85s; margin-top:30px }
.hero--noform .hero__btn{ display:inline-flex }
.hero--in .hero__photo{ background:var(--profundo) }
.hero--in .hero__slide{ clip-path:none; transform:none; transition:none }

@media (min-width:1100px){
  .hero--noform{
    grid-template-columns:minmax(0,1fr); grid-template-areas:"." "copy" "proofs" "."; grid-template-rows:1fr auto auto 1fr; min-height:clamp(500px,66svh,640px);
  }
  .hero--noform:not(.hero--plain) .hero__copy,.hero--noform:not(.hero--plain) .hero__proofs{ max-width:min(580px,calc(52vw - var(--edge) - 24px)) }
  .hero--plain .hero__copy{ max-width:760px }
  .hero--plain .hero__proofs{ max-width:760px }
  .hero--form{ min-height:clamp(600px,80svh,720px) }
}
/* sem foto: a grade de juntas do azulejo (o grafismo do produto) ocupa o lado vazio */
.hero--plain{ overflow:hidden }
.hero--plain::before{
  content:""; position:absolute; z-index:0; top:0; right:0; bottom:0; width:min(52%,720px); pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144' viewBox='0 0 144 144'%3E%3Cg stroke='%238F8E87' stroke-opacity='.34' stroke-width='2' fill='none'%3E%3Cpath d='M0 1h144M0 73h144M1 0v72M73 72v72'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 144px 144px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 62%); mask-image:linear-gradient(90deg,transparent 0,#000 62%);
}
@media (max-width:1099px){
  .hero--in{ --pb:56px }
  .hero--long .hero__h1{ font-size:clamp(26px,7.3vw,46px) }
  .hero--in .hero__photo{ height:clamp(230px,62vw,380px) }
  .hero--plain{ padding-top:calc(var(--hd-h) + 6px) }
  .hero--plain::before{ width:70%; opacity:.7 }
  .hero--in .hero__copy{ padding-top:20px }
  .hero--in .hero__photo + .hero__copy,.hero--in .hero__copy{ order:1 }
  .hero--plain .hero__copy{ padding-top:14px }
}

/* o que vem logo depois do hero */
.hero + .sec.owner{ padding-top:calc(var(--sec-y) * .7) }

/* ------------------------------------------------------------------ texto: titulo a esquerda, corpo a direita */
.itx__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,88px); align-items:start }
.itx__head{ position:sticky; top:calc(var(--hd-solid) + 32px) }
.itx__body{ max-width:64ch }
.itx__body p{ font-size:clamp(17px,1.35vw,19px); line-height:1.65 }
.itx__body p+p,.itx__body p+ul,.itx__body ul+p{ margin-top:1.1em }
.itx__body strong{ font-weight:600 }
.itx__ul{ display:grid; gap:11px; font-size:clamp(17px,1.35vw,19px); line-height:1.55 }
.itx__ul li{ position:relative; padding-left:26px }
.itx__ul li::before{ content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px; background:var(--grafite); transform:rotate(45deg) }
.itx--foto .itx__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"head ph" "body ph"; grid-template-rows:auto 1fr; row-gap:clamp(20px,2.4vw,32px) }
.itx--foto .itx__head{ grid-area:head; position:static }
.itx--foto .itx__body{ grid-area:body }
.itx__ph{ grid-area:ph; align-self:start; max-height:min(78svh,760px) }
@media (max-width:899px){
  .itx__grid,.itx--foto .itx__grid{ grid-template-columns:minmax(0,1fr); grid-template-areas:none }
  .itx__head{ position:static }
  .itx--foto .itx__head,.itx--foto .itx__body,.itx__ph{ grid-area:auto }
  .itx__ph{ order:3 }
}

/* ------------------------------------------------------------------ lista: cartoes com o visto */
.ilist .sec__head .lead{ margin-top:18px }
.ilist__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.ilist__grid--c1{ grid-template-columns:minmax(0,640px) }
.ilist__grid--c2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.ilist__it{ padding:26px 26px 28px; box-shadow:var(--sombra-sm) }
.sec--white .ilist__it{ box-shadow:none }
.ilist__ic{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--grafite); color:#fff }
.ilist__ic .i{ width:19px; height:19px }
.ilist__it .h3{ margin-top:20px }
.ilist__it p{ margin-top:9px; font-size:16.5px; line-height:1.55; color:var(--texto2) }
@media (max-width:1099px){ .ilist__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:699px){ .ilist__grid,.ilist__grid--c2{ grid-template-columns:minmax(0,1fr) } .ilist__it{ padding:22px 22px 24px } }

/* ------------------------------------------------------------------ obras: fotos reais na proporcao delas */
.iobr .sec__head .lead{ margin-top:18px }
.iobr__grid{ display:grid; grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:16px }
.iobr__t{ display:block; aspect-ratio:4/5 !important }
.iobr__t>img{ transition:transform 1.1s var(--ease-out) }
@media (hover:hover){ .iobr__t:hover>img{ transform:scale(1.05) } }
@media (max-width:699px){ .iobr__grid{ grid-template-columns:repeat(var(--colsm,2),minmax(0,1fr)); gap:12px } }

/* ------------------------------------------------------------------ areas: lista de cidades com link */
.iare__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,5vw,88px); align-items:start }
.iare .lead{ margin-top:18px }
.iare__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.iare__a,.iare__more{
  display:flex; align-items:center; gap:12px; min-height:64px; padding:0 20px; border-radius:var(--r-md); background:#fff; text-decoration:none; font-weight:600; letter-spacing:-.015em;
  transition:background-color .3s, color .3s, transform .4s var(--ease-out);
}
.iare__more{ grid-column:1 / -1; font-weight:400; color:var(--texto2); background:transparent; box-shadow:inset 0 0 0 1px var(--rejunte) }
.iare__ic{ flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.iare__n{ flex:1; min-width:0; white-space:nowrap }
.iare__go{ flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .4s var(--ease-out) }
.iare__a:hover{ background:var(--grafite); color:#fff }
.iare__a:hover .iare__go{ transform:translateX(5px) }
@media (max-width:899px){ .iare__grid{ grid-template-columns:minmax(0,1fr) } }
@media (max-width:420px){ .iare__list{ grid-template-columns:minmax(0,1fr) } }

/* ------------------------------------------------------------------ cartoes (servicos, cidades, projetos, guias, relacionados) */
.icar .sec__head .lead{ margin-top:18px }
.icar__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px }
.icar__grid--n1,.icar__grid--n2{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.icar__grid--n4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.icar__grid--txt{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:1099px){
  .icar__grid,.icar__grid--n1,.icar__grid--n2,.icar__grid--n3,.icar__grid--n4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:699px){ .icar__grid,.icar__grid--n2,.icar__grid--n3,.icar__grid--n4,.icar__grid--txt{ grid-template-columns:minmax(0,1fr) } }
.icar__c{
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--sombra-sm);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
@media (hover:hover){ .icar__c:hover{ transform:translateY(-6px); box-shadow:var(--sombra) } }
.icar__ph{ display:block; margin:10px 10px 0; border-radius:var(--r-md); overflow:hidden }
.icar__ph>img{ transition:transform 1.1s var(--ease-out) }
@media (hover:hover){ .icar__c:hover .icar__ph>img{ transform:scale(1.06) } }
.icar__b{ display:flex; flex-direction:column; flex:1; padding:22px 24px 24px }
.icar__m{ display:block; margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--texto2) }
.icar__t{ display:block }
.icar__x{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; margin-top:10px; font-size:16px; line-height:1.55; color:var(--texto2) }
.icar__go{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:auto; padding-top:20px }
.icar__gt{ font-size:15.5px; font-weight:600 }
.icar__gi{ display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--grafite); color:#fff; transition:transform .5s var(--ease-out) }
.icar__gi .i{ width:18px; height:18px }
@media (hover:hover){ .icar__c:hover .icar__gi{ transform:translateX(4px) rotate(-8deg) } }
.icar__c--txt .icar__b{ padding:30px 28px 26px }
.icar__grid--big .icar__t{ font-size:clamp(22px,2vw,28px) }
.sec--white .icar__c{ background:var(--papel); box-shadow:none }

/* ------------------------------------------------------------------ contato */
.icon .sec__head .lead{ margin-top:18px }
.icon__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.icon__it{ display:flex; flex-direction:column; align-items:flex-start; padding:26px 26px 28px }
.icon__ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--grafite); color:#fff }
.icon__ic .i{ width:20px; height:20px }
.icon__l{ margin-top:22px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--texto2) }
.icon__v{ margin-top:8px; font-size:clamp(19px,1.7vw,23px); font-weight:600; line-height:1.25; letter-spacing:-.03em; text-decoration:none; overflow-wrap:anywhere }
a.icon__v{ background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; padding-bottom:2px; transition:background-size .4s var(--ease-out) }
a.icon__v:hover{ background-size:100% 1px }
.sec--white .icon__it{ box-shadow:none }
@media (max-width:1099px){ .icon__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:620px){ .icon__grid{ grid-template-columns:minmax(0,1fr) } }

/* ------------------------------------------------------------------ guia */
.ig__grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:clamp(28px,5vw,88px); align-items:start }
.ig__toc{ position:sticky; top:calc(var(--hd-solid) + 32px) }
.ig__toc .kick{ margin-bottom:12px }
.ig__toc ol{ display:grid; border-left:2px solid var(--pedra) }
.ig__toc a{
  display:flex; align-items:center; min-height:44px; padding:6px 0 6px 18px; margin-left:-2px; border-left:2px solid transparent; font-size:15px; font-weight:500; line-height:1.3;
  color:var(--texto2); text-decoration:none; transition:color .25s, border-color .25s;
}
.ig__toc a:hover,.ig__toc a.is-on{ color:var(--grafite); border-left-color:var(--grafite) }
.ig__art{ max-width:70ch }
.ig__by{ margin-bottom:clamp(26px,3vw,40px); padding-bottom:18px; border-bottom:1px solid var(--pedra); font-size:14.5px; color:var(--texto2) }
.ig__s{ margin-top:clamp(36px,4.2vw,56px) }
.ig__s:first-of-type{ margin-top:0 }
.ig__h2{ font-size:clamp(26px,2.5vw,35px); font-weight:600; line-height:1.12; letter-spacing:-.04em; text-wrap:balance }
.ig__s p{ margin-top:1.05em; font-size:clamp(17px,1.32vw,18.5px); line-height:1.7 }
.ig__s p strong{ font-weight:600 }
.ig__s .itx__ul{ margin-top:1.05em }
.ig__s a{ text-decoration:underline; text-underline-offset:3px }
.ig__fig{ margin:1.5em 0 0 }
.ig__figs{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)) }
.ig__fig--n1 .ig__figs{ grid-template-columns:minmax(0,1fr); max-width:340px }
.ig__ph{ display:block; border-radius:var(--r-md); overflow:hidden }
.ig__ph img{ display:block; width:100%; height:100%; object-fit:cover }
.ig__fig figcaption{ margin-top:10px; font-size:14.5px; line-height:1.5; color:var(--texto2) }
.itbl{ margin-top:26px; overflow-x:auto; border-radius:var(--r-md); background:#fff; box-shadow:inset 0 0 0 1px var(--pedra) }
.itbl:focus-visible{ outline-offset:2px }
.itbl table{ width:100%; border-collapse:collapse; min-width:600px; font-size:15.5px; line-height:1.45 }
.itbl th,.itbl td{ padding:15px 20px; text-align:left; vertical-align:top }
.itbl thead th{ background:var(--grafite); color:#fff; font-size:13.5px; font-weight:600; letter-spacing:.02em }
.itbl tbody th{ font-weight:600; white-space:nowrap }
.itbl tbody tr+tr{ border-top:1px solid var(--pedra) }
.itbl tbody tr:nth-child(even){ background:var(--papel) }
.ig__cta{ margin:clamp(38px,4.4vw,58px) 0 0; padding:clamp(26px,3.2vw,40px); border-radius:var(--r-lg); background:var(--profundo); color:#fff }
.ig__cta-t{ max-width:21em; font-size:clamp(23px,2.3vw,31px); font-weight:600; line-height:1.15; letter-spacing:-.04em; text-wrap:balance }
.ig__cta-a{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-top:24px }
.ig__cta-tel{ display:inline-flex; align-items:center; gap:10px; min-height:48px; font-size:19px; font-weight:600; letter-spacing:-.02em; text-decoration:none }
.ig__cta-tel .i{ width:18px; height:18px; color:var(--lima) }
@media (max-width:1099px){
  .ig__grid{ grid-template-columns:minmax(0,1fr) }
  .ig__toc{ position:static; padding:20px 22px 12px; border-radius:var(--r-md); background:#fff }
  .ig__toc ol{ border-left:0 }
  .ig__toc a{ margin-left:0; border-left:0; padding-left:0; border-top:1px solid var(--pedra) }
  .ig__toc li:first-child a{ border-top:0 }
  .ig__toc a.is-on{ border-left:0 }
}
@media (max-width:520px){ .ig__cta-a .btn{ width:100%; justify-content:space-between } }

/* ------------------------------------------------------------------ projeto */
.ipj__grid{ column-count:2; column-gap:18px }
.ipj__grid--n1{ column-count:1; max-width:560px; margin-inline:auto }
.ipj__f{ display:block; margin:0 0 18px; break-inside:avoid }
@media (max-width:759px){ .ipj__grid{ column-count:1 } }
.ipj__meta{ margin-top:30px; border-top:1px solid var(--pedra) }
.ipj__meta li{ display:flex; align-items:center; gap:24px; min-height:58px; border-bottom:1px solid var(--pedra); font-weight:500; font-size:16.5px }
.ipj__ml{ flex:0 0 84px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--texto2) }