/* Edna Luiza · Mercearia Arrumada
   Casa arrumada lida como prateleira de mercearia: rótulo, fita de etiquetadora, inventário. */

/* ---------- tokens ---------- */
:root {
  --papel: #F4F2EE;
  --cesta: #E3DED6;
  --tinta: #1E1A1B;
  --bordo: #7B2333;
  --bordo-hover: #8E2A3C;
  --petroleo: #1D5E66;
  --madeira: #B98A5E;
  --magenta: #D62F7F;

  --tinta-70: rgba(30, 26, 27, .70);
  --linha: rgba(30, 26, 27, .14);
  --relevo: rgba(0, 0, 0, .25);
  --sombra-flutua: rgba(30, 26, 27, .28);
  --scrim: linear-gradient(to top, rgba(30, 26, 27, .72), rgba(30, 26, 27, 0) 45%);
  --scrim-topo: linear-gradient(to bottom, rgba(30, 26, 27, .45), rgba(30, 26, 27, 0));

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-sm: 4px; --r-md: 12px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --t-display: clamp(36px, 5vw, 72px);
  --t-h2: clamp(32px, 3.4vw, 48px);
  --t-stat: clamp(96px, 11vw, 160px);
  --t-quote: clamp(28px, 2.8vw, 40px);
  --t-h3: clamp(24px, 2.2vw, 32px);
  --t-lead: clamp(18px, 1.4vw, 20px);
  --t-body: clamp(16px, 1.2vw, 17px);

  --dente-e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6'%3E%3Cpath d='M4 0V6L0 3Z'/%3E%3C/svg%3E");
  --dente-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6'%3E%3Cpath d='M0 0V6L4 3Z'/%3E%3C/svg%3E");
}

html { scroll-padding-top: 72px; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }
a { color: inherit; }
img { display: block; }

h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.ancora { color: var(--tinta-70); max-width: 62ch; margin-top: var(--s-4); }

/* ---------- grid ---------- */
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 40px; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }

/* ---------- fita de etiquetadora (wildcard) ---------- */
.fita {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 90%;
  padding: 5px 14px;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--font-texto);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-wrap: balance;
  box-shadow: inset 0 -1px 0 var(--relevo);
  transform: rotate(var(--rot, 0deg));
  transition: transform 180ms var(--ease);
  -webkit-mask-image: var(--dente-e), linear-gradient(black, black), var(--dente-d);
          mask-image: var(--dente-e), linear-gradient(black, black), var(--dente-d);
  -webkit-mask-size: 4px 6px, calc(100% - 8px) 100%, 4px 6px;
          mask-size: 4px 6px, calc(100% - 8px) 100%, 4px 6px;
  -webkit-mask-position: left top, center, right top;
          mask-position: left top, center, right top;
  -webkit-mask-repeat: repeat-y, no-repeat, repeat-y;
          mask-repeat: repeat-y, no-repeat, repeat-y;
}
.fita--bordo { background: var(--bordo); border-top: 1px solid var(--magenta); }
.fita--mini { min-height: 22px; padding: 3px 10px; font-size: 11px; white-space: nowrap; }

/* ---------- ícones ---------- */
.ck { flex: none; width: 16px; height: 16px; color: var(--petroleo); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  background: var(--bordo);
  color: var(--papel);
  font-family: var(--font-texto);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms var(--ease), transform 180ms var(--ease);
}
.btn svg { flex: none; }
.btn:hover { background: var(--bordo-hover); }
.btn:active { transform: translateY(1px); }
.btn--claro { background: var(--papel); color: var(--bordo); }
.btn--claro:hover { background: var(--cesta); }
.btn--nav { min-height: 44px; padding: 0 20px; font-size: 15px; }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 180ms var(--ease);
}
.link-seta:hover { color: var(--bordo); }
.link-seta, .marca, .marca__nome, .rodape__links a, .avaliacao__lado a { white-space: nowrap; }
.link-seta svg { transition: transform 180ms var(--ease); }
.link-seta:hover svg { transform: translateX(3px); }

/* ---------- nav ---------- */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  height: 64px;
  color: var(--papel);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.topo.is-rolado { background: var(--papel); color: var(--tinta); box-shadow: inset 0 -1px 0 var(--linha); }
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: 100%; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.marca__nome {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.topo__nav { display: flex; gap: 28px; margin-left: auto; }
.topo__nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; text-decoration: none; }
.topo__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- S1 hero ---------- */
.hero__palco { position: relative; height: max(560px, 68vh); overflow: hidden; background: var(--tinta); }
.hero__palco::before,
.hero__palco::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__palco::before { bottom: auto; height: 140px; background: var(--scrim-topo); }
.hero__palco::after { background: var(--scrim); }
.hero__foto { position: absolute; inset: 0; overflow: hidden; }
.hero__foto > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* retrato da Edna Luiza (foto de perfil, 150px): polaroid no canto no desktop, inteira no celular; nunca ampliar acima de 240px */
.hero__retrato { position: absolute; right: max(24px, calc((100% - 1200px) / 2)); bottom: 48px; z-index: 3; width: 240px; margin: 0; padding: 10px 10px 12px; background: var(--papel); border-radius: var(--r-sm); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); rotate: 2deg; }
.hero__foto .hero__retrato img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 20%; display: block; }
.hero__retrato .fita { position: static; display: inline-block; margin-top: 10px; }
.hero__titulo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin-inline: auto; padding-bottom: 44px; }
.fita--hero { font-size: 13px; padding: 7px 16px; white-space: nowrap; margin-bottom: var(--s-5); }
.hero h1 {
  max-width: 12.5em;
  color: var(--papel);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.hero__faixa {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: center;
  padding-top: var(--s-6);
  padding-bottom: var(--s-7);
}
.hero__texto { grid-column: 1 / span 7; }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 58ch; }
.definicao { margin-top: var(--s-3); font-size: 15px; color: var(--tinta-70); max-width: 62ch; }
.hero__ctas { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }

/* ---------- S2 espaços ---------- */
.espacos { padding: var(--s-6) 0 var(--s-8); }
.espacos__lado { grid-column: 1 / span 4; position: sticky; top: 96px; align-self: start; }
.espacos h2 { max-width: 12ch; }
.caderno { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--madeira); }
.caderno__t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}
.caderno__t svg { flex: none; color: var(--petroleo); }
.caderno__lista { margin-top: var(--s-3); }
.caderno__lista li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-3); padding: 9px 0; font-size: 16px; line-height: 1.45; }
.caderno__lista .ck { margin-top: 3px; }
.caderno__nota { margin-top: var(--s-4); font-size: 14px; color: var(--tinta-70); }
.caderno__nota a, .fatos a, .faq a { color: var(--petroleo); text-underline-offset: 3px; }

.galeria { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cesta);
  color: var(--papel);
}
.card img, .card video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.card .fita { position: absolute; left: 12px; bottom: 12px; z-index: 1; max-width: calc(100% - 24px); }
.card:hover .fita, .card:focus-visible .fita { transform: rotate(0deg); }
.card__play { position: absolute; top: 12px; right: 12px; z-index: 1; width: 36px; height: 36px; color: var(--papel); }

/* ---------- S3 inventário ---------- */
.inventario { background: var(--cesta); padding: var(--s-8) 0; }
.inventario__cab h2 { max-width: 18ch; }
.inventario__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); align-items: start; }
.ficha { grid-column: 1 / span 7; border-bottom: 1px solid var(--madeira); }
.ficha__linha { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--madeira); }
.ficha__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  color: var(--petroleo);
  font-weight: 700;
  font-size: 14px;
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ficha h3, .faq__t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.2;
  font-variation-settings: "SOFT" 0;
}
.ficha p { margin-top: 6px; color: var(--tinta-70); max-width: 52ch; }

.inventario__lado { grid-column: 9 / span 4; }
.contador__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-stat);
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--bordo);
  font-variant-numeric: lining-nums;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.contador__leg { margin-top: var(--s-2); font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.2; }
.passos__t {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--madeira);
  font-weight: 700;
  font-size: 13px;
  font-stretch: 75%;
  font-variation-settings: "wdth" 75;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--petroleo);
}
.passos li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; }
.passos__n {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--petroleo);
  font-variant-numeric: lining-nums;
}
.passos strong { display: block; font-weight: 600; font-size: 17px; line-height: 1.3; }
.passos p { margin-top: 4px; font-size: 16px; color: var(--tinta-70); }

.faq { margin-top: var(--s-8); }
.faq__t { margin-bottom: var(--s-4); }
.faq__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); align-items: start; }
.faq details { border-top: 1px solid var(--linha); }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 40px 12px 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  color: var(--petroleo);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--bordo); }
.faq details p { padding: 0 40px 18px 0; font-size: 16px; color: var(--tinta-70); }

/* ---------- S4 quem é ---------- */
.quem { padding: var(--s-8) 0 var(--s-7); }
.quem__cab h2 { max-width: 20ch; }
.quem__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); align-items: center; }
.quem__texto { grid-column: 1 / span 6; }
.citacao p {
  max-width: 22ch;
  padding-bottom: 4px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-quote);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}
.citacao footer { margin-top: var(--s-4); font-weight: 600; font-size: 15px; color: var(--bordo); }
.fatos { margin-top: var(--s-6); border-bottom: 1px solid var(--madeira); }
.fatos li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 14px; padding: var(--s-4) 0; border-top: 1px solid var(--madeira); }
.fatos .ck { margin-top: 4px; }
.fatos strong { font-weight: 600; }
.fatos p { color: var(--tinta-70); font-size: 16px; }
.quem__fotos { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
.quem__foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--cesta); }
.quem__foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.quem__foto--b { margin-top: var(--s-8); }
.quem__foto .fita { position: absolute; left: 12px; bottom: 12px; z-index: 1; }

/* ---------- S5 avaliação ---------- */
.avaliacao { position: relative; background: var(--bordo); color: var(--papel); padding: var(--s-9) 0 88px; }
.fita--cola {
  position: absolute;
  top: 0;
  left: max(20px, calc(50% - 620px));
  z-index: 2;
  font-size: 13px;
  padding: 7px 16px;
  border-top: 1px solid var(--magenta);
  transform: translateY(-50%) rotate(var(--rot, 0deg));
}
.avaliacao__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: center; }
.avaliacao h2 { grid-column: 1 / span 7; max-width: 14ch; font-size: clamp(34px, 3.9vw, 56px); }
.avaliacao__lado { grid-column: 8 / span 5; }
.avaliacao__lado > p { font-size: 18px; max-width: 40ch; margin-bottom: var(--s-5); }
.contatos { margin-top: var(--s-5); display: grid; gap: 2px; }
.contatos li { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.contatos svg { flex: none; }
.contatos a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding: var(--s-8) 0 var(--s-7); }
.rodape__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); }
.rodape__marca { grid-column: 1 / span 4; }
.marca__nome--grande { font-size: 40px; }
.carimbo { display: inline-block; margin-top: var(--s-4); }
.rodape__texto { grid-column: 6 / span 7; }
.sobre { font-size: 15px; color: var(--tinta-70); max-width: 62ch; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: var(--s-4); }
.rodape__links a, .rodape__links span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; text-decoration: none; }
.rodape__links a:hover { color: var(--bordo); }
.rodape__links svg { color: var(--petroleo); }
.rodape__copy { margin-top: var(--s-3); font-size: 14px; color: var(--tinta-70); }

/* ---------- flutuante (celular) ---------- */
.flutua.btn { min-height: 52px; padding: 0 22px; box-shadow: 0 8px 22px var(--sombra-flutua); }
@media (min-width: 900px) { .flutua.btn { display: none; } }
.pular { background: var(--tinta); color: var(--papel); border-radius: var(--r-sm); }

/* ---------- celular ---------- */
@media (max-width: 899px) {
  .wrap { padding-inline: 20px; }
  .topo__nav, .btn--nav { display: none; }

  /* hero: foto em cima, texto embaixo */
  .topo { background: var(--papel); color: var(--tinta); box-shadow: inset 0 -1px 0 var(--linha); }
  .hero { padding-top: 64px; }
  .hero__palco { height: auto; overflow: visible; background: none; }
  .hero__palco::before, .hero__palco::after { display: none; }
  .hero__foto { position: relative; height: 62svh; min-height: 440px; }
  .hero__foto > img { object-position: 50% 40%; }
  .hero__foto::after { content: ""; position: absolute; inset: 0; background: rgba(30, 26, 27, .3); pointer-events: none; }
  .hero__retrato { right: auto; left: 50%; bottom: auto; top: 50%; translate: -50% -50%; width: min(55vw, 200px); rotate: -2deg; }
  .hero__titulo { position: relative; padding-bottom: 0; }
  .fita--hero { margin: -16px 0 var(--s-4); font-size: 12px; letter-spacing: .06em; padding: 6px 12px; max-width: 100%; white-space: normal; text-align: center; line-height: 1.5; }
  .hero h1 { color: var(--tinta); font-size: clamp(32px, 10vw, 40px); }
  .hero__faixa { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); padding-top: var(--s-5); padding-bottom: var(--s-8); }
  .hero__ctas { order: -1; align-items: stretch; }
  .hero__ctas .btn { width: 100%; }
  .hero__ctas .link-seta { align-self: center; }

  .espacos, .inventario, .quem { padding: var(--s-8) 0; }
  .g12 { display: block; }
  .espacos__lado { position: static; }
  .galeria { margin-top: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card .fita { left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 11px; letter-spacing: .1em; padding: 4px 10px; }
  .card--reel { grid-column: 1 / -1; aspect-ratio: 1 / 1; max-width: 340px; width: 100%; justify-self: center; }
  .card--reel video { aspect-ratio: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
  .hero__faixa { padding-bottom: var(--s-6); }
  .espacos { padding-top: var(--s-6); }
  .marca .fita--mini { display: none; }
  .rodape__links { gap: 0 var(--s-4); }

  .inventario__grade { display: flex; flex-direction: column; gap: var(--s-6); margin-top: var(--s-6); }
  .inventario__lado { display: contents; }
  .contador { order: -1; display: flex; align-items: baseline; gap: var(--s-4); }
  .passos__t { margin-top: 0; }
  .ficha__linha { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-4) 0 var(--s-5); }
  .ficha__num { height: auto; }
  .faq__grade { grid-template-columns: minmax(0, 1fr); }

  .quem__grade { display: flex; flex-direction: column; gap: var(--s-6); margin-top: var(--s-6); align-items: stretch; }
  .quem__texto { display: contents; }
  .citacao { order: 1; }
  .quem__fotos { order: 2; gap: 10px; }
  .fatos { order: 3; margin-top: 0; }
  .quem__foto--b { margin-top: var(--s-6); }
  .quem__foto .fita { left: 8px; bottom: 8px; font-size: 11px; }

  .avaliacao { padding: var(--s-8) 0; }
  .avaliacao__grade { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); }
  .avaliacao__lado .btn { width: 100%; }
  .fita--cola { font-size: 11px; letter-spacing: .1em; }

  .rodape { padding-bottom: 104px; }
  .rodape__grade { display: flex; flex-direction: column; gap: var(--s-6); }
}

@media (max-width: 359px) {
  .btn { padding: 0 18px; font-size: 15px; }
}

@media (min-width: 900px) and (max-width: 1100px) {
  .topo__nav { gap: 18px; }
  .marca .fita--mini { display: none; }
}

/* 04/11/2026 · hero desktop: foto do closet em largura total (≥80% da largura, ≥ metade da tela), título por cima, polaroid 240px no canto */
@media (min-width: 900px) {
  .hero__palco { height: max(600px, 74vh); }
}