/* ============================================================
   etéris · alma.css — camada de estética (base: Alma template)
   Carregar POR ÚLTIMO em todas as páginas. Não altera HTML/JS:
   re-veste as classes existentes via tokens + overrides.
   ============================================================ */

/* ---------- 1 · tokens lavados (alavanca principal) ---------- */
:root{
  --cor-cal:#FBFAF6;            /* fundo principal, mais lavado */
  --cor-areia:#F5EFE5;          /* cream de seção */
  --cor-terra:#2C2420;          /* tinta */
  --cor-argila:#8B7355;
  --cor-cinza-pedra:#A69D92;    /* muted mais claro */
  --cor-hover:#191410;
  --alma-hair:rgba(44,36,32,.14);
  --alma-ink-soft:#5C5248;
  /* espaçamento monumental */
  --space-4xl:8rem;
  --space-5xl:11rem;
}

body{
  background:var(--cor-cal);
  color:var(--cor-terra);
  font-weight:300;
  line-height:1.75;
}

/* ---------- 2 · tipografia ---------- */
h1,h2,.heading{
  font-family:var(--font-display);
  font-weight:300;
  text-transform:lowercase;
  letter-spacing:.005em;
  line-height:1.06;
}
h1{font-size:clamp(3rem, 2rem + 4.2vw, 5.6rem)}
h2{font-size:clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem)}
h3{font-family:var(--font-display);font-weight:400;text-transform:lowercase}
em,i{font-style:italic}
.marca{text-transform:uppercase}

.page-header__title{font-size:clamp(3rem, 2rem + 4.2vw, 5.6rem);font-weight:300}
.page-header__subtitle{font-family:var(--font-body);font-style:italic;color:var(--cor-cinza-pedra)}
.page-header{padding-top:clamp(4rem,9vw,8rem);padding-bottom:clamp(3rem,7vw,6rem)}

/* rótulos e migalhas em mono espaçado (voz Carbona) */
.label,.card__label,.tag,.badge,.breadcrumbs,.breadcrumbs__link,.breadcrumbs__current,
.product-detail__label,.article-hero__category,.footer__title,.form-label,
.catalog__filter-btn,.hero__tagline{
  font-family:var(--font-ui);
  font-weight:400;
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.badge,.tag{background:transparent;border:1px solid var(--alma-hair);border-radius:0;padding:.35em 1em}

/* ---------- 3 · header ---------- */
.header{
  background:color-mix(in srgb, var(--cor-cal) 92%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
  box-shadow:none;
}
.header .nav-link{
  font-family:var(--font-ui);
  font-size:.64rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--cor-terra);
  position:relative;
  padding-bottom:2px;
}
.header .nav-link::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--cor-terra);transition:width .3s;
}
.header .nav-link:hover::after,.header .nav-link.is-active::after{width:100%}
.header__logo-text{height:27px;width:auto}
/* símbolo abraça o conjunto: topo alinhado ao topo do wordmark, base à base do byline */
.header__logo-symbol{height:41px;width:auto}
.header__logo{gap:.55rem;align-items:center}

/* lockup "by monofloor" (reforço de marca) */
.header__logo-stack{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.header__byline,.footer__byline{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-ui);font-size:.5rem;font-weight:400;
  letter-spacing:.22em;text-transform:lowercase;line-height:1;
  color:var(--cor-terra);opacity:.55;
}
.header__byline img{height:6.5px;width:auto;display:inline-block}
.footer__logo-stack{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px}
.footer__byline img{height:6px;width:auto;display:inline-block}

/* header agora é sempre claro (backdrop do alma): logos e links escuros mesmo em is-hero */
.header.is-hero .header__logo-symbol--light,.header.is-hero .header__logo-text--light{display:none}
.header.is-hero .header__logo-symbol--dark,.header.is-hero .header__logo-text--dark{display:block}
.header.is-hero .nav-link,.header.is-hero .header__action,.header.is-hero .header__menu-toggle{color:var(--cor-terra)}
.header__action{color:var(--cor-terra)}
.cart-badge{
  background:var(--cor-terra);color:var(--cor-cal);
  font-family:var(--font-ui);border-radius:0;
}

/* ---------- 4 · botões bloco (alma) ---------- */
.btn,.btn-primary,.btn-secondary,.btn-cta,.btn-ghost,.btn-light{
  font-family:var(--font-ui);
  font-weight:400;
  font-size:.66rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  border-radius:0;
  padding:1.05rem 2.4rem;
  transition:all .3s ease;
  box-shadow:none;
}
.btn-primary,.btn-cta{background:var(--cor-terra);color:var(--cor-cal);border:1px solid var(--cor-terra)}
.btn-primary:hover,.btn-cta:hover{background:var(--cor-hover);border-color:var(--cor-hover);transform:none}
.btn-secondary,.btn-ghost{background:transparent;color:var(--cor-terra);border:1px solid var(--cor-terra)}
.btn-secondary:hover,.btn-ghost:hover{background:var(--cor-terra);color:var(--cor-cal)}
.btn-sm{padding:.7rem 1.6rem;font-size:.6rem}
.btn-lg{padding:1.25rem 3rem}
.cta-link{font-family:var(--font-ui);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase}

/* ---------- 5 · cards flat com hairline ---------- */
.card,.card-product,.card-project,.feature-card{
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.card:hover,.card-product:hover,.card-project:hover{
  transform:translateY(-5px);
  box-shadow:none;
}
.card__image{border-radius:0;overflow:hidden}
.card__image img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.card:hover .card__image img,.card-product:hover .card__image img{transform:scale(1.045)}
.card__content{padding:1.6rem 0 0}
.card__title{
  font-family:var(--font-body);font-weight:400;font-size:.95rem;
  text-transform:none;
  border-top:1px solid var(--alma-hair);
  padding-top:.9rem;
}
.card__price{font-family:var(--font-body);font-weight:300;font-size:.88rem;color:var(--alma-ink-soft)}
.card__description{font-size:.84rem;color:var(--cor-cinza-pedra);font-style:italic}

/* ---------- 6 · seções e respiros ---------- */
.section{padding-top:clamp(4.5rem,10vw,9rem);padding-bottom:clamp(4.5rem,10vw,9rem)}
.section--sm{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
.section--lg{padding-top:clamp(6rem,12vw,11rem);padding-bottom:clamp(6rem,12vw,11rem)}
.bg-areia{background:var(--cor-areia)}
.bg-terra,.bg-carvao{background:var(--cor-terra)}

/* ---------- 7 · formulários minimal ---------- */
.form-input,.form-select,textarea.form-input{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--cor-terra);
  border-radius:0;
  font-family:var(--font-body);
  padding:.7rem 0;
}
.form-input:focus,.form-select:focus{outline:none;border-bottom-width:2px;box-shadow:none}
.form-label{color:var(--alma-ink-soft);margin-bottom:.4rem}

/* ---------- 8 · footer claro (alma) ---------- */
.footer{
  background:var(--cor-cal);
  color:var(--cor-terra);
  border-top:1px solid var(--alma-hair);
  padding-top:3.2rem;
}
.footer a,.footer p,.footer .footer__link{color:var(--alma-ink-soft)}
.footer .footer__link:hover{color:var(--cor-terra)}
.footer__title{color:var(--cor-terra)}
.footer__description,.footer__location{font-style:italic;color:var(--cor-cinza-pedra)}
.footer__copyright{font-family:var(--font-ui);font-size:.6rem;letter-spacing:.18em;color:var(--cor-cinza-pedra)}
/* logos brancos do footer viram tinta no fundo claro */
.footer__logo-symbol,.footer__logo-text{filter:invert(1)}
.footer__link{font-family:var(--font-ui);font-size:.62rem;letter-spacing:.22em;text-transform:lowercase}
.footer__social-link{color:var(--alma-ink-soft)}

/* ---------- 9 · componentes de página ---------- */
.accordion__item{border:none;border-bottom:1px solid var(--alma-hair);border-radius:0;background:transparent}
.accordion__header{font-family:var(--font-body);font-weight:400}
/* fix: main.js alterna is-open, mas pages.css só abre com is-active (accordions mortos no site todo) */
.accordion__item.is-open .accordion__content{display:block}
.accordion__item.is-open .accordion__icon{transform:rotate(45deg)}
.divider{background:var(--alma-hair)}
.modal,.cart-drawer{border-radius:0;background:var(--cor-cal)}
.toast{border-radius:0;background:var(--cor-terra);color:var(--cor-cal);font-family:var(--font-ui);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.quantity-selector{border:1px solid var(--alma-hair);border-radius:0}
.quantity-selector__btn{border-radius:0}

/* heroes de página interna: mantém foto+overlay, tipografia nova */
.article-hero__title,.about-hero__title{font-weight:300;text-transform:lowercase}
.hero__tagline{color:inherit}

/* fix: lista "o que evitar" dos guias (svgs sem tamanho no CSS original) */
.guide-warning-list{display:flex;flex-direction:column;gap:.9rem;margin:1.4rem 0 2rem}
.guide-warning-item{display:flex;align-items:center;gap:.9rem;
  border-bottom:1px solid var(--alma-hair);padding-bottom:.9rem}
.guide-warning-item svg{width:16px;height:16px;flex-shrink:0;color:var(--cor-terracota)}
.guide-warning-item span{font-size:.9rem;color:var(--alma-ink-soft)}

/* catálogo: filtros como labels mono */
.catalog__filter-btn{border:none;background:transparent;border-bottom:1px solid transparent;border-radius:0;padding:.4rem 0;margin-right:1.6rem}
.catalog__filter-btn.is-active,.catalog__filter-btn:hover{border-bottom-color:var(--cor-terra);background:transparent;color:var(--cor-terra)}

/* imagens: sem cantos arredondados em nenhum media */
img,.card__image,.split__media img,.article-hero__background{border-radius:0}

/* seleção */
::selection{background:var(--cor-areia);color:var(--cor-terra)}

/* botão flutuante de WhatsApp (UX: um caminho de conversa sempre à mão) */
.wa-flutuante{position:fixed;right:22px;bottom:22px;z-index:900;width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--cor-terra);color:var(--cor-cal);box-shadow:0 6px 22px rgba(25,20,16,.28);
  transition:transform .25s ease}
.wa-flutuante:hover{transform:translateY(-3px)}
@media(max-width:640px){.wa-flutuante{width:48px;height:48px;right:16px;bottom:16px}}

/* ---------- 10 · mobile-fixes (auditoria 05/jul) ---------- */
@media (max-width: 768px){
  /* botões nunca estouram a tela */
  .btn,.btn-primary,.btn-secondary,.btn-cta,.btn-ghost,.btn-light{
    white-space:normal;line-height:1.5;max-width:100%;
    padding:.95rem 1.3rem;letter-spacing:.18em}
  /* layout de produto colapsa numa coluna */
  .product-hero__grid{grid-template-columns:minmax(0,1fr) !important}
  .product-hero__grid > *{min-width:0}
  .product-gallery,.product-gallery__main{max-width:100%}
  .product-gallery__thumbnails{flex-wrap:wrap}
  .product-gallery__thumb{width:60px;height:60px}
  /* tabelas viram roláveis dentro do próprio bloco */
  .pv-compare{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .product-specs table,.mv-regua table{display:block;overflow-x:auto}
  /* carrinho empilha com respiro */
  .cart-item{grid-template-columns:84px minmax(0,1fr);gap:var(--space-md)}
  .cart-item__image{width:84px;height:84px}
  .cart-item__actions{flex-direction:row;align-items:center;gap:var(--space-md)}
  /* linhas de resumo respiram */
  .product-calculator__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem .8rem}
  /* cards de jornada e rede */
  .rd-op{padding:1.5rem 1.2rem}
  .pv-fork__grid{grid-template-columns:1fr}
}