/* RESET & TOKENS */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
:root{
  --rose:#c09a89; --coffee:#8b5d50; --wine:#621b16; --bg:#f9f4f1; --white:#fff;
  --r-card:22px; --r-pill:14px;
  --sh-card:0 8px 22px rgba(0,0,0,.10); --sh-card-hover:0 14px 28px rgba(0,0,0,.14);
  --title:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
body{font-family:var(--body);color:var(--coffee);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}

/* HERO imagem com recorte */
.hero{
  position:relative; height:clamp(220px,30vh,360px);
  background-size:cover; background-position:50% 40%; background-repeat:no-repeat;
  border-bottom-left-radius:100% 22%; border-bottom-right-radius:100% 22%;
  overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.10);
}
@media (min-width:1024px){
  .hero{ height:clamp(360px,28vw,480px); background-position:50% 36%; border-bottom-left-radius:100% 18%; border-bottom-right-radius:100% 18% }
}

/* HERO COPY (título abaixo da imagem) */
.hero-copy{background:var(--white)}
.hero-copy__inner{
  max-width:760px; margin:0 auto; padding:18px 16px 6px; text-align:center;
}
.hero-copy__inner h1{
  font-family:var(--title); font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.2rem); color:var(--wine); margin-bottom:4px;
}
.hero-copy__inner p{
  font-size:clamp(.98rem,1.6vw,1.08rem); color:var(--coffee);
}

/* LAYOUT GERAL */
.container{max-width:920px;margin:0 auto;padding:1.2rem 1rem 2.2rem}

/* CARDS — menores; grid 2 colunas em telas ≥ 840px para menos rolagem */
.cards{
  display:grid; gap:1rem;
  grid-template-columns:1fr; /* mobile: 1 coluna */
}
@media (min-width:840px){
  .cards{ grid-template-columns:1fr 1fr } /* desktop: 2 colunas */
}

.card{
  position:relative; display:block; text-decoration:none; color:#fff; overflow:hidden;
  height:clamp(180px,26vw,240px); border-radius:var(--r-card); box-shadow:var(--sh-card); background:#ddd;
  transform:translateZ(0); opacity:0; animation:fadeUp .7s ease forwards;
}
.card:nth-child(1){animation-delay:.06s}
.card:nth-child(2){animation-delay:.12s}
.card:nth-child(3){animation-delay:.18s}
.card:nth-child(4){animation-delay:.24s}
.card:nth-child(5){animation-delay:.30s}
.card:nth-child(6){animation-delay:.36s}
.card:nth-child(7){animation-delay:.42s}

/* imagem de fundo — leve, sem blur exagerado */
.card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  filter:brightness(94%); /* sutil */
  transition:transform .35s ease, filter .35s ease;
}
/* véu claro para contraste do título */
.card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(249,244,241,0.52) 0%, rgba(249,244,241,0.14) 100%);
}

/* badge (ícone MAIOR) */
.badge{
  position:absolute; left:12px; top:12px; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.95); box-shadow:0 6px 16px rgba(0,0,0,.12)
}
.badge svg{ width:24px; height:24px; display:block }

/* TÍTULO centralizado e maior */
.card h2{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:2;
  font-family:var(--title); font-weight:700;
  text-align:center;
  font-size:clamp(1.02rem,1.7vw,1.24rem);
  line-height:1.28; text-shadow:0 3px 10px rgba(0,0,0,.5)
}

@media (hover:hover){
  .card:hover{transform:translateY(-3px); box-shadow:var(--sh-card-hover)}
  .card:hover img{transform:scale(1.02); filter:brightness(96%)}
}
.card:active{transform:scale(.997)}

/* QUEM EU SOU com FOTO */
.about{
  margin-top:1.6rem; background:var(--white); padding:1.4rem; border-radius:20px; box-shadow:var(--sh-card);
  display:grid; gap:1rem; grid-template-columns:1fr; align-items:center;
}
.about__media img{
  width:100%; height:auto; border-radius:16px; box-shadow:0 8px 18px rgba(0,0,0,.08); object-fit:cover;
}
.about__text h3{
  font-family:var(--title); font-size:1.5rem; color:var(--wine); margin-bottom:.6rem; text-align:center;
}
.about__text p{ color:var(--coffee); margin:.45rem 0 }
@media (min-width:880px){
  .about{
    grid-template-columns: 0.9fr 1.1fr; /* foto + texto lado a lado */
    padding:1.6rem;
  }
  .about__text h3{text-align:left}
}

/* UTILITÁRIOS DE FOCO (anti-corte) */
.img-focus-center{object-position:50% 50%}
.img-focus-top{object-position:50% 20%}
.img-focus-upper{object-position:50% 35%}
.img-focus-bottom{object-position:50% 80%}

/* ANIMAÇÃO */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* MOBILE FINO */
@media (max-width:480px){
  .container{padding:1rem .9rem 1.8rem}
  .badge{left:10px; top:10px; width:46px; height:46px}
  .card h2{left:12px; right:12px; bottom:12px}
}
.card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* badge (ícone) maior e acima do texto */
.badge{
  position:static; /* tira do absoluto */
  transform:none;
  margin-bottom:10px; /* espaço entre ícone e texto */
  width:70px;
  height:70px;
  background:rgba(255,255,255,.92);
  border-radius:50%;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge svg{
  width:38px;
  height:38px;
}

/* título centralizado abaixo do ícone */
.card h2{
  position:static;
  transform:none;
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.55);
  line-height:1.3;
  padding:0 10px;
}

/* imagem de fundo e véu mantidos */
.card img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(94%);
  z-index:0;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg,rgba(249,244,241,0.52) 0%, rgba(249,244,241,0.14) 100%);
}

/* garante que conteúdo (ícone + texto) fique acima da imagem */
.card > *{
  position:relative;
  z-index:2;
}

/* ajustes responsivos */
@media (max-width:480px){
  .badge{
    width:60px;
    height:60px;
    margin-bottom:8px;
  }
  .badge svg{
    width:32px;
    height:32px;
  }
  .card h2{
    font-size:clamp(.95rem,4vw,1.1rem);
    padding:0 8px;
  }
}
/* ===========================
   AJUSTE: Ícone no canto (grande)
   e cards sempre em 1 coluna
   =========================== */

/* 1) Cards SEMPRE 1 coluna (desktop/tablet/mobile) */
.cards{
  grid-template-columns: 1fr !important;
}

/* 2) Título central no meio do card */
.card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.card h2{
  position:relative;
  z-index:2;
  margin:0;
  font-family:var(--title);
  font-weight:700;
  font-size:clamp(1.06rem, 1.8vw, 1.3rem);
  line-height:1.28;
  color:#fff;
  text-shadow:0 3px 10px rgba(0,0,0,.55);
  padding:0 14px;
}

/* 3) Ícone (badge) GRANDE no canto superior ESQUERDO */
.badge{
  position:absolute !important;
  left:14px;         /* canto esquerdo */
  top:14px;          /* canto superior */
  width:84px;        /* maior no desktop */
  height:84px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.badge svg{ width:42px; height:42px }

/* 4) Responsivo do ícone (um pouco menor no mobile) */
@media (max-width:480px){
  .badge{ width:72px; height:72px; left:10px; top:10px }
  .badge svg{ width:36px; height:36px }
  .card h2{ font-size:clamp(.98rem, 4vw, 1.16rem); padding:0 10px }
}

/* 5) (opcional) classes pra escolher o canto do ícone por card */
.badge.tr{ left:auto; right:14px; top:14px }       /* top-right */
.badge.bl{ top:auto; bottom:14px; left:14px }      /* bottom-left */
.badge.br{ top:auto; bottom:14px; right:14px }     /* bottom-right */
@media (max-width:480px){
  .badge.tr{ right:10px; top:10px }
  .badge.bl{ left:10px; bottom:10px }
  .badge.br{ right:10px; bottom:10px }
}
.cards{
  grid-template-columns: 1fr !important;
}

/* texto central e maior */
.card{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.card h2{
  position:relative;
  z-index:2;
  margin:0;
  font-family:var(--title);
  font-weight:800; /* mais grosso */
  font-size:clamp(1.4rem, 2vw, 1.9rem); /* nome bem maior */
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height:1.3;
  text-shadow:0 3px 14px rgba(0,0,0,.65);
  padding:0 16px;
}

/* ícone grande no canto */
.badge{
  position:absolute;
  left:18px;
  top:18px;
  width:92px;
  height:92px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.badge svg{
  width:50px;
  height:50px;
}

/* responsivo */
@media (max-width:480px){
  .badge{
    width:80px;
    height:80px;
    left:12px;
    top:12px;
  }
  .badge svg{
    width:40px;
    height:40px;
  }
  .card h2{
    font-size:clamp(1.2rem, 4.6vw, 1.5rem);
    line-height:1.25;
    padding:0 12px;
  }
}
.card h2{
  word-wrap:break-word;
  white-space:normal;
  text-align:center;
  hyphens:auto;
}
.card h2{
  text-transform:none;      /* remove o CAPS */
  letter-spacing:0;         /* remove espaçamento extra */
  font-weight:700;          /* mantém destaque, mas mais natural */
  font-family:var(--title);
  line-height:1.3;
}
/* ===========================
   🔧 AJUSTE: foto menor no "Quem é Janaína"
   =========================== */
.about__media img{
  width:70%;
  max-width:180px;
  margin:0 auto;
  display:block;
  border-radius:16px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* desktop: ainda menor e mais equilibrado */
@media (min-width:880px){
  .about__media img{
    width:100%;
    max-width:220px;
    margin:0 auto;
  }
}
/* ===========================
   🔧 AJUSTE: Rodapé centralizado e link estilizado
   =========================== */

footer{
  background:var(--white);
  padding:1.4rem 1rem;
  text-align:center;
  border-top:1px solid rgba(0,0,0,.05);
  font-family:var(--body);
  font-size:.95rem;
  color:var(--coffee);
  line-height:1.5;
}

/* link do rodapé (usa cor da paleta mais escura) */
footer a{
  color:var(--wine);            /* vinho escuro da paleta */
  text-decoration:none;
  font-weight:600;
  transition:color .3s ease;
}
footer a:hover{
  color:#4a0f0b;                /* ainda mais escuro no hover */
  text-decoration:underline;
}

.about__media img{
  width:70%;
  max-width:200px;
  margin:0 auto;
  display:block;
  border-radius:50%;                    /* deixa a foto redonda */
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  object-fit:cover;
  aspect-ratio:1/1;                     /* mantém proporção perfeita */
}

/* no desktop — centraliza e mantém pequena */
@media (min-width:880px){
  .about__media{
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .about__media img{
    width:180px;
    max-width:180px;
  }
}
@media (max-width:480px){

  /* altura geral dos cards */
  .card{
    height:clamp(140px, 38vw, 180px);  /* antes ~200–240px */
    border-radius:18px;
  }

  /* ícone (badge) proporcionalmente menor */
  .badge{
    width:64px;
    height:64px;
    left:10px;
    top:10px;
  }
  .badge svg{
    width:32px;
    height:32px;
  }

  /* título menor e mais ajustado */
  .card h2{
    font-size:clamp(.9rem, 3.6vw, 1.1rem);
    line-height:1.25;
    padding:0 8px;
  }
}
/* ===========================
   🔧 AJUSTE: TÍTULOS BEM GRANDES NOS CARDS
   =========================== */

/* geral (desktop, tablet e mobile) */
.card h2{
  position:relative;
  z-index:2;
  margin:0;
  text-align:center;
  font-family:var(--title);
  font-weight:800;
  color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.6);
  line-height:1.25;
  padding:0 10px;
  font-size:clamp(1.6rem, 4vw, 2.2rem) !important; /* bem maior */
  letter-spacing:0.3px;
}

/* mobile: ainda mais destaque */
@media (max-width:480px){
  .card h2{
    font-size:clamp(1.4rem, 5vw, 1.9rem) !important; /* grande mesmo em cards pequenos */
    line-height:1.22;
    padding:0 12px;
  }
}
/* ===========================
   🔧 CENTRALIZAÇÃO PRECISA DOS TEXTOS NOS CARDS
   =========================== */

/* garante que cada card funcione como container centralizado */
.card{
  display:flex;
  flex-direction:column;
  justify-content:center;   /* centraliza verticalmente */
  align-items:center;       /* centraliza horizontalmente */
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* título do card bem centralizado */
.card h2{
  position:relative;
  z-index:2;
  margin:0;
  padding:0 12px;
  font-family:var(--title);
  font-weight:800;
  font-size:clamp(1.5rem, 4vw, 2.2rem);
  color:#fff;
  text-shadow:0 3px 14px rgba(0,0,0,.6);
  line-height:1.3;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  width:90%;
  height:auto;
}

/* mantém o ícone fixo no canto */
.badge{
  position:absolute;
  left:18px;
  top:18px;
  width:92px;
  height:92px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.badge svg{
  width:50px;
  height:50px;
}

/* mobile */
@media (max-width:480px){
  .card h2{
    font-size:clamp(1.3rem, 5vw, 1.9rem);
    padding:0 8px;
  }
  .badge{
    width:78px;
    height:78px;
    left:10px;
    top:10px;
  }
  .badge svg{
    width:38px;
    height:38px;
  }
}
/* ===========================
   🔧 AJUSTE: Só o ícone do WhatsApp
   =========================== */

/* ícone do WhatsApp grande e destacado */
.card[href*="wa.me"] .badge{
  position:absolute;
  left:16px;
  top:16px;
  width:82px;
  height:82px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

/* tamanho do símbolo dentro do círculo */
.card[href*="wa.me"] .badge svg{
  width:46px;
  height:46px;
}

/* mobile */
@media (max-width:480px){
  .card[href*="wa.me"] .badge{
    width:68px;
    height:68px;
    left:10px;
    top:10px;
  }
  .card[href*="wa.me"] .badge svg{
    width:36px;
    height:36px;
  }
}
/* ===========================
   🔧 AJUSTE ESPECÍFICO — CENTRALIZAÇÃO DO PRIMEIRO CARD (SÉRIE GRATUITA)
   =========================== */

/* Seleciona apenas o primeiro card */
.cards .card:first-child h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  line-height: 1.25;
  padding: 0 12px;
  margin: 0 auto;
  position: relative;
  top: 0;
  transform: translateY(0); /* reseta qualquer leve deslocamento */
  font-size: clamp(1.3rem, 4vw, 2rem);
}

/* garante equilíbrio em telas pequenas */
@media (max-width: 480px) {
  .cards .card:first-child h2 {
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
    line-height: 1.3;
    padding: 0 10px;
  }
}
/* ===========================
   🔧 AJUSTE FINO — MOVER TEXTO DO 1º CARD LEVEMENTE À ESQUERDA
   =========================== */

/* apenas o primeiro card */
.cards .card:first-child h2 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  line-height: 1.25;
  padding: 0 12px;
  margin: 0 auto;
  position: relative;
  left: -10px; /* 👉 move um pouquinho pra esquerda */
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 800;
}

/* no mobile, desloca um pouco menos pra não sair do centro */
@media (max-width: 480px) {
  .cards .card:first-child h2 {
    left: -6px; /* deslocamento leve */
    font-size: clamp(1.2rem, 4.5vw, 1.8rem);
  }
}