/* ELLAS Bazar — folha de estilo compartilhada */
:root{
  --creme:#FBEBD3;
  --papel:#FFF9F1;
  --terracota:#D7784A;      /* cor da marca — títulos grandes */
  --terracota-escura:#A4512A; /* textos pequenos e botões (contraste) */
  --floresta:#17402C;       /* verde do estúdio */
  --salvia:#C3E0B5;         /* verde do avatar */
  --tinta:#3A2920;
  --tinta-suave:#6E5A4E;
  --linha:rgba(58,41,32,.14);
  --f-sans:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-serif:"Cormorant Garamond","Cormorant",Georgia,serif;
  --largura:1180px;
  --arco:50% 50% 0 0 / 37.5% 37.5% 0 0; /* arco do estúdio para imagens 3:4 */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--f-sans);font-weight:400;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--terracota-escura);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--largura),100% - 2.5rem);margin-inline:auto}

/* Marca */
.marca{display:inline-flex;align-items:center;text-decoration:none;color:var(--terracota);line-height:1}
/* Logo oficial: PNG usado como máscara, então a cor vem de "color" */
.logo{display:inline-block;height:1em;aspect-ratio:1200/328;background:currentColor;-webkit-mask:url("img/logo-ellas.png") center/contain no-repeat;mask:url("img/logo-ellas.png") center/contain no-repeat}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:30;background:rgba(255,249,241,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linha);padding-top:env(safe-area-inset-top,0px)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
.topo .marca{font-size:1.7rem}
.menu{display:flex;align-items:center;gap:1.75rem}
.menu a{text-decoration:none;font-size:.95rem;color:var(--tinta-suave);padding:.35rem 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--terracota)}
.menu a.btn,.menu a.btn:hover{color:#fff;border:1px solid var(--terracota-escura);padding:.62rem 1.05rem}
.menu a.btn:hover{border-color:#8C4221}
@media (max-width:720px){.menu .so-desk{display:none}.menu{gap:1rem}}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:500 .98rem/1 var(--f-sans);letter-spacing:.01em;text-decoration:none;padding:1rem 1.6rem;border-radius:999px;border:1px solid var(--terracota-escura);background:var(--terracota-escura);color:#fff;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:#8C4221;border-color:#8C4221}
.btn.claro{background:transparent;color:var(--terracota-escura)}
.btn.claro:hover{background:var(--terracota-escura);color:#fff}
.btn.mini{padding:.62rem 1.05rem;font-size:.88rem}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* Títulos */
h1,h2,h3{font-family:var(--f-sans);font-weight:300;color:var(--tinta);margin:0;line-height:1.08;letter-spacing:-.01em}
.titulo{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--tinta-suave);max-width:36rem}
.pequeno{font-size:.9rem;color:var(--tinta-suave)}

/* Imagens em arco (motivo do estúdio da marca) */
.arco{border-radius:var(--arco);overflow:hidden;aspect-ratio:3/4;background:var(--creme)}
.arco img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}

/* Rodapé */
.rodape{background:var(--floresta);color:#EFE3D2;padding:4rem 0 3rem;margin-top:0}
.rodape a{color:#EFE3D2}
.rodape .marca{color:var(--creme);font-size:2.4rem}
.rodape-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem;align-items:start}
.rodape h3{font-size:1rem;font-weight:500;color:var(--salvia);margin-bottom:.8rem}
.rodape p{margin:.2rem 0;font-size:.95rem;color:#D9CBB8}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin:.35rem 0;font-size:.95rem}
.rodape .fim{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(239,227,210,.18);font-size:.82rem;color:#B9AA95}
@media (max-width:760px){.rodape-grid{grid-template-columns:1fr}}

/* WhatsApp flutuante */
.zap-flutuante{position:fixed;right:1.1rem;bottom:calc(1.1rem + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:50%;background:var(--floresta);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(23,64,44,.55);transition:transform .2s}
.zap-flutuante:hover{transform:scale(1.06)}
.zap-flutuante svg{width:28px;height:28px}