/* =====================================================================
   MILA CALÇADOS — base.css
   Design tokens (extraídos do logo oficial), reset e tipografia.
   Estética: boutique feminina contemporânea.
   Rosa = cor de IDENTIDADE e DESTAQUE. Base off-white; produto protagonista.
   ===================================================================== */

:root {
  /* --- Cores (derivadas do logo: blush + rosé/rose-gold + grafite) --- */
  --c-white:        #ffffff;
  --c-offwhite:     #fcfaf8;   /* fundo base */
  --c-cream:        #f7f1ec;   /* seções alternadas */
  --c-blush:        #f6e7e3;   /* blush suave (fundo do logo) */
  --c-blush-deep:   #efd6cf;
  --c-beige:        #e6d5c8;

  --c-rose:         #c1857e;   /* rosé identidade */
  --c-rose-strong:  #ad6e66;   /* rosé queimado — display grande / hover */
  --c-rose-text:    #8c5049;   /* rosé p/ texto pequeno (AA em todos os fundos claros) */
  --c-rosegold-1:   #d8a08f;   /* gradiente cobre — do monograma */
  --c-rosegold-2:   #b0766a;

  --c-graphite:     #2a2622;   /* textos / títulos */
  --c-ink:          #1c1815;
  --c-muted:        #756a63;   /* textos secundários */
  --c-line:         rgba(42, 38, 34, .12);
  --c-line-soft:    rgba(42, 38, 34, .07);

  --c-wa:           #0f7a41;   /* WhatsApp (CTA de conversão) — AA c/ texto branco */
  --c-wa-strong:    #0c6d3a;

  /* --- Tipografia --- */
  --font-serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:   'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Parisienne', 'Cormorant Garamond', cursive;

  /* --- Escala / espaçamento --- */
  --wrap: 1240px;
  --gutter: clamp(1.15rem, 5vw, 3.5rem);
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(42, 38, 34, .06);
  --shadow-md: 0 14px 40px -18px rgba(42, 38, 34, .28);
  --shadow-lg: 0 30px 70px -30px rgba(70, 40, 35, .4);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 74px;
}

/* --- Reset enxuto --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--c-graphite);
  background: var(--c-offwhite);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--c-rose-strong); outline-offset: 3px; border-radius: 4px; }

/* --- Tipografia utilitária --- */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.1; color: var(--c-ink); }
.font-serif  { font-family: var(--font-serif); }
.font-script { font-family: var(--font-script); font-weight: 400; }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-rose-text);
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  letter-spacing: .01em;
}
.section-title .font-script {
  font-size: 1.28em;
  color: var(--c-rose-strong);
  line-height: .8;
}

/* --- Layout helpers --- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.center { text-align: center; }
.stack-sm > * + * { margin-top: .6rem; }

/* Acessibilidade: pular para o conteúdo */
.skip-link {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-140%);
  top: 8px; z-index: 200; background: var(--c-ink); color: #fff;
  padding: .7rem 1.2rem; border-radius: 999px; font-size: .85rem; transition: transform .2s;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal on scroll — progressivo: só oculta quando há JS (classe .js no <html>).
   Sem JS, sem IntersectionObserver ou com reduced-motion, o conteúdo aparece normal. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }