/* =========================================================================
   HADASSA FRIZZAS — camada de personalização sobre o layout base
   Carregado DEPOIS de ever-april.webflow.shared.css (vence na cascata).
   ========================================================================= */

@import url("hadassa-brand.css");

/* ---------- assinatura de marca (substitui os logos SVG da referência) -- */
.hadassa-mark{
  font-family:Bradfordll,Georgia,serif;
  letter-spacing:.02em;
  line-height:1;
  color:currentColor;
  white-space:nowrap;
}
.hadassa-mark.is-logo{
  font-size:1.6rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-family:Maax,Arial,sans-serif;
  font-weight:300;
}
.hadassa-mark.is-nav{
  font-size:1.1rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-family:Maax,Arial,sans-serif;
  font-weight:300;
  opacity:.55;
}
.hadassa-mark.is-inline{
  font-size:1.15rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  font-family:Maax,Arial,sans-serif;
  font-weight:400;
}
.hadassa-mark.is-card{
  font-size:1rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  font-family:Maax,Arial,sans-serif;
  font-weight:400;
}
.hadassa-mark.is-loader,
.hadassa-mark.is-footer{
  font-size:clamp(2.2rem,6vw,4.4rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:Maax,Arial,sans-serif;
  font-weight:300;
}
.hadassa-sub{
  margin-top:.5rem;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  opacity:.7;
}

.hadassa-loader{
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
}
.hadassa-footer-mark{
  color:currentColor;
  height:auto;
  display:block;
}
.hadassa-footer-mark .hadassa-sub{margin-top:.75rem}

/* headings que eram imagens do logotipo (color:#0000 no CSS base) --------- */
.heading-large.hadassa-heading-text,
.hadassa-heading-text{
  color:currentColor;
  display:flex;
  align-items:center;
  font-family:Maax,Arial,sans-serif;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:clamp(1.4rem,3.4vw,3rem);
  white-space:nowrap;
}
.heading-large.rotate-text.hadassa-heading-text{
  height:4.5vw;
  min-height:2.5rem;
  align-self:flex-start;
}

/* ---------- 1ª dobra: fundo com a foto da Hadassa ----------------------- */
.header83-image-background{
  background-image:
    linear-gradient(180deg,transparent 37%,var(--color--background) 66%),
    radial-gradient(circle farthest-corner at 50% 0%,#0e0a0780 19%,transparent),
    url("../imagens/Whats-App-Image-2026-05-14-at-00-34-53-(1).jpg");
  background-position:50% 0,0 0,50% 8%;
  background-size:cover,cover,cover;
  background-repeat:no-repeat;
}
@media (max-width:767px){
  .header83-image-background{
    background-image:
      linear-gradient(180deg,transparent 29%,var(--color--background) 49%),
      linear-gradient(to bottom,transparent,transparent),
      url("../imagens/Whats-App-Image-2026-05-14-at-00-34-53-(1).jpg");
    background-position:50% 0,0 0,50% 6%;
  }
}

/* ---------- 2ª dobra: carrossel de serviços ----------------------------- */
.tricks-slider_text{
  color:#fff;
  font-family:Maax,Arial,sans-serif;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
  max-width:86%;
  font-size:clamp(1.25rem,3vw,2.9rem);
  line-height:1.1;
  text-wrap:balance;
  text-shadow:0 .12em .6em rgba(0,0,0,.45);
}
.tricks-slider_flex{padding:0 6%}
.tricks-slider_wrap{background-color:var(--hd-brown-soft)}

/* ---------- galeria "a arte da Beleza Discreta" ------------------------- */
.header80_image.is-work{
  object-fit:cover;
  aspect-ratio:auto;
}

/* ---------- slideshow que substituiu o vídeo (serviços personalizados) -- */
.hadassa-slideshow{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--hd-brown-soft);
}
.hadassa-slideshow .hd-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  animation:hd-cross 12s infinite;
}
.hadassa-slideshow .hd-slide:nth-child(1){animation-delay:0s}
.hadassa-slideshow .hd-slide:nth-child(2){animation-delay:6s}
@keyframes hd-cross{
  0%   {opacity:0;transform:scale(1.09)}
  6%   {opacity:1}
  50%  {opacity:1;transform:scale(1)}
  56%  {opacity:0}
  100% {opacity:0;transform:scale(1.09)}
}
@media (prefers-reduced-motion:reduce){
  .hadassa-slideshow .hd-slide{animation:none}
  .hadassa-slideshow .hd-slide.is-active{opacity:1;transform:none}
}

/* ---------- bloco "Quem está por trás do seu cuidado?" ------------------ */
.layout517_image.is-portrait{object-position:50% 25%}
.hadassa-signature{
  margin-top:1.25rem;
  font-family:Bradfordll,Georgia,serif;
  font-size:1.5rem;
  letter-spacing:.04em;
  opacity:.9;
}

/* ---------- bloco de localização (novo) --------------------------------- */
.section_hadassa-local{
  background-color:var(--color--background);
  color:var(--color--text);
}
.hd-local{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:3rem;
  align-items:stretch;
}
.hd-local_info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.35rem;
}
.hd-local_info h2{margin:0 0 1.25rem}
.hd-local_row{
  margin:0 0 .75rem;
  font-size:1rem;
  line-height:1.6;
  opacity:.85;
}
.hd-local_info .button-group{margin-top:1.5rem}
.hd-local_map{
  min-height:24rem;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
}
.hd-map-placeholder{
  min-height:24rem;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:1rem;
  padding:2rem;
  text-align:center;
}
.hd-map-placeholder p{max-width:28rem;margin:0}
.hd-local_map iframe{
  width:100%;
  height:100%;
  min-height:24rem;
  border:0;
  display:block;
  filter:grayscale(.35) contrast(1.05);
}
@media (max-width:991px){
  .hd-local{grid-template-columns:1fr;gap:2rem}
}

/* ---------- ajustes finos ---------------------------------------------- */
.header115_content-right-copy .heading-large.hadassa-heading-text{justify-content:flex-end}
.image-10{width:100%;height:auto;object-fit:cover;aspect-ratio:16/10}

/* =====================================================================
   Botões de agendar + card/ponto 07 (Eyebrow Lamination) — index.html
   ===================================================================== */
.hd-card-cta,.hd-slide-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.7em 1.6em;border-radius:999px;background:var(--hd-brown);color:#fff;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.hd-card-cta:hover,.hd-slide-cta:hover{background:var(--hd-ink);transform:translateY(-1px)}

/* segunda dobra: botão logo abaixo do procedimento clicado */
.tricks-slider_slide{cursor:pointer}
.hd-slide-cta{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,6px);
  z-index:6;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
}
.tricks-slider_slide.is-selected .hd-slide-cta{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.tricks-slider_slide.is-selected .hd-slide-cta:hover{transform:translate(-50%,-1px)}
/* a segunda dobra tem fundo marrom: botão claro para ter contraste */
.hd-slide-cta{background:#f7f3ec;color:#5b4632;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hd-slide-cta:hover{background:#fff;color:#3a2c1e}

/* dobra do corpo: ponto 07 e card 07 */
.hover-button-grid{cursor:pointer}
.hover-button-grid._7{z-index:3;width:5vw;position:absolute}
.team15_item._7{z-index:7;grid-column-gap:2rem;grid-row-gap:1rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-columns:1fr;display:grid}
.team_card-link.is-picked{text-decoration:underline;text-underline-offset:4px;font-weight:500}
@media (min-width:992px){
  /* só o card do ponto ativo aparece (controle em js/hadassa-site.js) */
  .layout468_content-left .team15_item{display:none !important;opacity:0 !important}
  .layout468_content-left .team15_item.is-active{display:grid !important;opacity:1 !important}
  .hover-button-grid.is-current{filter:drop-shadow(0 0 10px rgba(255,255,255,.55))}
}
@media (max-width:991px){
  .hover-button-grid._7{display:none}
}
/* mobile: mesmo empilhamento dos cards 02–06 (texto em cima, imagem embaixo) */
@media (max-width:767px){
  .team15_item._7{flex-flow:wrap-reverse;display:flex}
}

/* Posição de cada ponto sobre a parte certa do rosto (desktop) */
@media (min-width:992px){
  .hover-button-grid._1{top:28.3% !important;left:52.4% !important}  /* 01 Sobrancelhas: sobrancelha esquerda */
  .hover-button-grid._2{top:56% !important;left:58.1% !important}    /* 02 Lábios: boca */
  .hover-button-grid._3{top:34.3% !important;left:52% !important}    /* 03 Cílios: olho esquerdo */
  .hover-button-grid._4{top:30.4% !important;left:47.6% !important}  /* 04 Micropigmentação: cauda da sobrancelha */
  .hover-button-grid._5{top:43.1% !important;left:53.05% !important}  /* 05 Pele: bochecha */
  .hover-button-grid._6{top:76% !important;left:79% !important}      /* 06 Experiência: ombro */
  .hover-button-grid._7{top:32.2% !important;left:60.35% !important} /* 07 Eyebrow Lamination: sobrancelha direita */
}