/* Estilos compartilhados das páginas de serviço e jurídico — Botanique Paris */
:root{
  --cream:#FBF3ED;
  --cream-deep:#F2E4DA;
  --rose:#B4657A;
  --rose-deep:#8F4A5C;
  --charcoal:#2B211F;
  --charcoal-soft:#4B3E3A;
  --gold:#AD8A56;
  --taupe:#79695F;
  --white:#FFFFFF;
  --shadow:0 24px 60px -24px rgba(43,33,31,.28);
  --radius:22px;
  --maxw:820px;
}
*{box-sizing:border-box; touch-action:manipulation;}
html{scroll-behavior:smooth;}
html,body{overflow-x:clip;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}
body{margin:0; font-family:'Manrope',sans-serif; color:var(--charcoal); background:var(--cream); -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:var(--rose-deep);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}

/* Header */
header{background:var(--cream); border-bottom:1px solid var(--cream-deep); position:sticky; top:0; z-index:60;}
.header-inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-block:16px; gap:16px;}
.header-back{font-size:13.5px; font-weight:700; text-decoration:none; color:var(--charcoal); display:inline-flex; align-items:center; gap:7px; padding:8px 0;}
.header-back:hover{color:var(--rose-deep);}
.logo-link{display:flex; justify-content:center;}
/* logo.webp é branco sobre fundo preto: invert+multiply escurece a marca e derrete o fundo no creme */
.logo-img{height:36px; width:auto; display:block; filter:invert(1); mix-blend-mode:multiply;}
.header-spacer{display:block;}

/* Conteúdo */
main{padding:54px 0 70px;}
.page-head{margin-bottom:38px;}
.eyebrow{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose-deep); font-weight:700; margin-bottom:14px; display:block;}
h1{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(30px,5vw,42px); line-height:1.12; margin:0; color:var(--charcoal);}
.page-head p{margin:16px 0 0; color:var(--charcoal-soft); font-size:15.5px; line-height:1.6;}

.card{background:var(--white); border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow);}
.card + .card{margin-top:22px;}
h2{font-family:'Fraunces',serif; font-weight:500; font-size:23px; line-height:1.2; margin:0 0 16px; color:var(--charcoal);}
h3{font-family:'Manrope',sans-serif; font-weight:800; font-size:15px; margin:26px 0 8px; color:var(--charcoal);}
h3:first-child{margin-top:0;}
p{margin:0 0 14px; line-height:1.68; font-size:14.5px; color:var(--charcoal-soft);}
p:last-child{margin-bottom:0;}
ul,ol{margin:0 0 14px; padding-left:20px; color:var(--charcoal-soft); font-size:14.5px; line-height:1.68;}
li{margin-bottom:7px;}
strong{color:var(--charcoal);}

/* Placeholder que a loja precisa preencher */
.ph{background:var(--cream-deep); border-radius:5px; padding:1px 7px; font-weight:700; color:var(--charcoal); white-space:nowrap;}
.notice{background:var(--cream-deep); border-left:4px solid var(--gold); border-radius:10px; padding:16px 18px; font-size:13.5px; line-height:1.6; color:var(--charcoal-soft); margin-bottom:26px;}
.notice strong{display:block; margin-bottom:4px;}

/* Tabela de dados (Datenschutz / Versand) */
.table-wrap{overflow-x:auto; border-radius:14px; border:1px solid var(--cream-deep);}
table{width:100%; border-collapse:collapse; background:var(--white); min-width:440px;}
th,td{padding:13px 14px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--cream-deep); color:var(--charcoal-soft);}
th{font-weight:800; background:var(--cream-deep); color:var(--charcoal); font-size:12.5px;}
tr:last-child td{border-bottom:none;}

/* Formulário de contato */
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:7px;}
.field input,.field textarea{width:100%; font-family:'Manrope',sans-serif; font-size:14.5px; color:var(--charcoal); background:var(--cream); border:1.5px solid var(--cream-deep); border-radius:12px; padding:13px 14px;}
.field textarea{min-height:140px; resize:vertical;}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--rose);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--rose); color:var(--white); border:none; font-family:'Manrope',sans-serif; font-weight:700; font-size:15.5px; padding:16px 30px; border-radius:100px; cursor:pointer; text-decoration:none; transition:transform .2s ease, background .2s ease; box-shadow:0 14px 30px -10px rgba(180,101,122,.55);}
.btn:hover{background:var(--rose-deep); transform:translateY(-2px);}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}

.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-bottom:26px;}
.contact-item{background:var(--cream-deep); border-radius:14px; padding:18px;}
.contact-item h3{margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--taupe);}
.contact-item p{margin:0; font-size:14.5px; color:var(--charcoal); font-weight:600;}

/* Rodapé */
footer{background:var(--charcoal-soft); color:var(--cream); padding:44px 0 24px;}
.footer-nav{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center; margin-bottom:26px;}
.footer-nav a{color:var(--cream); text-decoration:none; font-size:13.5px; opacity:.85; padding:6px 0;}
.footer-nav a:hover{opacity:1; text-decoration:underline;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:22px; text-align:center; font-size:12px; color:#C9BFB9;}

@media(max-width:900px){
  .header-inner{grid-template-columns:auto minmax(0,1fr) auto; padding-block:14px;}
  .logo-img{height:30px;}
  .header-back span{display:none;}
  main{padding:38px 0 54px;}
  .card{padding:26px 22px;}
}
@media(max-width:480px){
  .wrap{padding:0 18px;}
  .card{padding:22px 18px;}
  .card + .card{margin-top:16px;}
  h2{font-size:20px;}
  table{min-width:380px;}
}