#cooper-hero{
  --paper:#f4f1e8;
  --ink:#141414;
  --ink-soft:#2b2b2b;
  --green:#76885b;
  --green-dark:#5f6f49;
  box-sizing:border-box;     /* o padding lateral entra na largura */
  font-family:'PT Serif',Georgia,serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  padding:34px 20px;
  display:block;
  overflow-x:clip;           /* nada de dentro gera rolagem lateral */
}
#cooper-hero *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#cooper-hero .ch-inner{
  max-width:1060px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:34px;
  align-items:center;
}
@media (max-width:820px){
  #cooper-hero .ch-inner{
    grid-template-columns:1fr;
  }
  #cooper-hero .ch-right{order:-2;}   /* placa e fotos primeiro */
}
#cooper-hero .ch-banner{
  background:var(--green);
  color:#ffffff;
  display:inline-block;
  font-family:'Playfair Display',serif;
  font-size:.92rem;
  padding:10px 18px;
  margin-bottom:16px;
  letter-spacing:.03em;
  box-shadow:4px 4px 0 rgba(0,0,0,.85);
  max-width:100%;
}
#cooper-hero .ch-banner strong{
  display:block;
  font-weight:900;
}
#cooper-hero .ch-banner-mob{
  display:none;   /* so aparece no celular */
}
#cooper-hero .ch-text{
  container-type:inline-size;   /* mede o titulo pela coluna, nao pela tela */
  min-width:0;
}
#cooper-hero .ch-headline{
  font-family:'Playfair Display',serif;
  font-weight:900;
  white-space:nowrap;                   /* sempre em uma linha */
  font-size:clamp(.95rem,4vw,1.5rem);   /* reserva para navegadores antigos */
  font-size:min(2.2rem,5cqi);           /* folga para a fonte substituta nao estourar */
  line-height:1.12;
  max-width:100%;
}
#cooper-hero .ch-headline em{
  font-weight:400;
  font-style:normal;
  display:block;
  font-size:.82em;
}
#cooper-hero .ch-sub{
  margin:16px 0 20px;
  font-size:.88rem;
  color:var(--ink-soft);
}
#cooper-hero .ch-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
#cooper-hero .ch-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem;
  text-decoration:none;
  padding:13px 22px;
  border:2px solid var(--ink);
  color:var(--ink);
  background:transparent;
  transition:transform .18s ease, box-shadow .18s ease;  /* nao mais "all" */
  box-shadow:4px 4px 0 var(--ink);
}
#cooper-hero .ch-btn:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink);
}
#cooper-hero .ch-btn-green{
  background:var(--green);
  border-color:var(--green-dark);
  color:#ffffff;
  box-shadow:4px 4px 0 var(--green-dark);
}
#cooper-hero .ch-btn-green:hover{
  box-shadow:2px 2px 0 var(--green-dark);
}
#cooper-hero .ch-signpost{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 0;
  flex:0 0 auto;
  min-width:0;
}
#cooper-hero .ch-pole{
  width:14px;
  height:34px;
  background:linear-gradient(90deg,#2e2e2e,#565656 45%,#2e2e2e);
}
#cooper-hero .ch-pole-tall{
  height:56px;
}
#cooper-hero .ch-sign{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.06em;
  padding:9px 20px;
  font-size:1.05rem;
  box-shadow:3px 4px 8px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  max-width:100%;
}
#cooper-hero .ch-sign small{
  font-size:.55em;
  align-self:flex-start;
  margin-top:2px;
}
#cooper-hero .ch-teal{
  background:#2ba8a0;
  color:#ffffff;
  transform:rotate(-2deg);
}
#cooper-hero .ch-black{
  background:#161616;
  color:#ffffff;
  transform:rotate(1.5deg);
}
#cooper-hero .ch-white{
  background:#ffffff;
  color:#111111;
  transform:rotate(2deg);
}
#cooper-hero .ch-liberty{
  font-size:1.6rem;
  line-height:1;
}

/* ---------- placa + fotos flutuantes ---------- */
#cooper-hero .ch-right{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-width:0;
}
/* fotos: 2 em cima lado a lado, 1 embaixo centralizada */
#cooper-hero .ch-photos{
  display:grid;
  grid-template-columns:repeat(2,auto);
  justify-items:center;
  gap:18px;
  min-width:0;
}
#cooper-hero .ch-photo:nth-child(3){
  grid-column:1 / -1;   /* terceira foto ocupa a linha inteira embaixo */
}
#cooper-hero .ch-photo{
  text-align:center;
  /* a moldura e' quem flutua — o transform do <img alt="Cooper NYC Salão de Beleza — salão de beleza em Bom Fim, Porto Alegre - RS"> fica livre
     para o zoom do hover e para a camada de video */
  will-change:transform;
}
#cooper-hero .ch-photo img{
  display:block;
  width:158px;
  height:158px;
  max-width:100%;          /* sem vw: nao depende da barra de rolagem */
  border-radius:2px;
  object-fit:cover;
  border:4px solid #fdfcf7;
  box-shadow:0 10px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(20,20,20,.35);
  transition:transform .3s ease, box-shadow .3s ease;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
#cooper-hero .ch-photo:hover img{
  transform:scale(1.05);
  box-shadow:0 14px 28px rgba(0,0,0,.34), 0 0 0 1px rgba(20,20,20,.45);
}

/* ===== APAGUE DAQUI para deixar as fotos totalmente paradas ===== */
#cooper-hero .ch-photo:nth-child(1){animation:ch-float 7s ease-in-out infinite;}
#cooper-hero .ch-photo:nth-child(2){animation:ch-float 7s ease-in-out infinite;animation-delay:1.6s;}
#cooper-hero .ch-photo:nth-child(3){animation:ch-float 7s ease-in-out infinite;animation-delay:3.2s;}
@keyframes ch-float{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-5px,0);}
}
@media (prefers-reduced-motion:reduce){
  #cooper-hero .ch-photo{animation:none !important;}
}
/* ===== APAGUE ATE AQUI ===== */

/* no celular: fotos ao lado da placa, em coluna unica */
@media (max-width:560px){
  #cooper-hero{padding:28px 14px;}
  #cooper-hero .ch-right{gap:14px;}
  #cooper-hero .ch-photos{grid-template-columns:1fr;gap:12px;}
  #cooper-hero .ch-photo img{
    width:132px;
    height:132px;
    border-width:3px;
  }
  #cooper-hero .ch-sign{font-size:.95rem;padding:8px 14px;}
}
@media (max-width:380px){
  #cooper-hero{padding:24px 10px;}
  #cooper-hero .ch-photos{gap:10px;}
  #cooper-hero .ch-photo img{width:108px;height:108px;}
  #cooper-hero .ch-sign{font-size:.85rem;padding:7px 11px;}
  #cooper-hero .ch-liberty{font-size:1.3rem;}
}

/* no celular: faixa verde depois da placa e das fotos, antes do texto.
   precisa ficar no FIM do CSS para vencer o display:none acima */
@media (max-width:820px){
  #cooper-hero .ch-banner-mob{
    display:inline-block;
    order:-1;
    justify-self:start;
  }
  #cooper-hero .ch-text .ch-banner{display:none;}
}