/* ============================================================
   PIVA — Template editorial de PÁGINA DE MATÉRIA
   Importado do Claude Design ("Matéria - Matemática.html") e
   adaptado ao stack do site (shared.css + tailwind.css).

   Tudo escopado em .materia para não vazar nos componentes
   institucionais (nav-header-c / footer-c) nem em outras páginas.

   COMO REPLICAR EM OUTRA MATÉRIA:
     1. No HTML: <main class="materia materia--fisica"> (troca o modificador)
     2. Troca o glifo .glyph-letter (M, F, Q, B, H)
     3. Troca <title>, <meta description>, <link canonical>, JSON-LD
     4. Troca o conteúdo das seções
   O acento de cor sai do modificador .materia--[slug]; nada mais muda.
   ============================================================ */

/* ---------- TOKENS DO TEMPLATE (escopados) ----------
   Reaproveitam os hexes da paleta global (iguais ao shared.css),
   só renomeados para os nomes que o template usa, + os que faltavam. */
.materia {
  --bg-canvas:      #FFFDF8;            /* = --bg */
  --bg-alt:         #F5EDE3;            /* areia (acolhimento) */
  --bg-alt-2:       #F0EBE3;            /* alternância sutil */
  --bg-card:        #FFFCF6;
  --bg-deep:        #0A3D42;            /* = --bg-dark */

  --fg-1:           #1C1C1C;            /* = --text */
  --fg-2:           #3A3633;
  --fg-3:           #5A5A5A;            /* = --text-light */
  --fg-4:           #8A837B;

  --piva-amber:     #E8860C;            /* = --accent (CTAs) */
  --piva-amber-dark:#C47200;            /* = --accent-dark */
  --piva-sand:      #EADFCF;
  --piva-teal-ink:  #0A3D42;
  --piva-off-white: #FFFDF8;

  --rule:           rgba(28, 28, 28, .10);
  --radius-hero:    20px;

  --shadow-whisper: 0 1px 2px rgba(28,28,28,.04), 0 1px 0 rgba(28,28,28,.02);
  --shadow-card:
      0 1px 2px rgba(28,28,28,.04),
      0 2px 6px rgba(28,28,28,.04),
      0 8px 16px rgba(28,28,28,.04),
      0 16px 32px rgba(28,28,28,.03);
  --shadow-lift:
      0 1px 2px rgba(28,28,28,.05),
      0 6px 12px rgba(28,28,28,.05),
      0 18px 28px rgba(28,28,28,.05),
      0 32px 56px rgba(28,28,28,.04);

  --font-serif:     'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:      'Source Sans 3', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ease-premium:   cubic-bezier(0.32, 0.72, 0, 1);

  /* Acento da matéria (default = teal; sobrescrito pelos modificadores abaixo).
     --subj      = tom vívido, para glifos/elementos grandes (>=24px) e bordas.
     --subj-ink  = tom escurecido AA (>=4.5:1 sobre areia), só para TEXTO PEQUENO
                   (eyebrow, labels, links de FAQ, botão secundário). */
  --subj:      #008994;
  --subj-ink:  #006B73;
  --subj-soft: rgba(0,137,148,.08);
  --subj-line: rgba(0,137,148,.22);

  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* ---------- ACENTO POR MATÉRIA ----------
   "Versões amassadas" das matizes do logo (saturação reduzida,
   calibradas para conviver com a areia). Uma por página. */
.materia--matematica { --subj:#008994; --subj-ink:#006B73; --subj-soft:rgba(0,137,148,.08);  --subj-line:rgba(0,137,148,.22); }
.materia--fisica     { --subj:#5E58A4; --subj-ink:#4A4585; --subj-soft:rgba(94,88,164,.08);  --subj-line:rgba(94,88,164,.22); }
.materia--quimica    { --subj:#AC524D; --subj-ink:#8E423E; --subj-soft:rgba(172,82,77,.08);  --subj-line:rgba(172,82,77,.22); }
.materia--biologia   { --subj:#697755; --subj-ink:#515D40; --subj-soft:rgba(105,119,85,.08); --subj-line:rgba(105,119,85,.22); }
.materia--historia   { --subj:#A87A12; --subj-ink:#7E5C12; --subj-soft:rgba(168,122,18,.08); --subj-line:rgba(168,122,18,.22); }
.materia--portugues  { --subj:#A14A63; --subj-ink:#82384F; --subj-soft:rgba(161,74,99,.08);  --subj-line:rgba(161,74,99,.22); }
.materia--ciencias   { --subj:#3F7A4B; --subj-ink:#2F5C39; --subj-soft:rgba(63,122,75,.08);   --subj-line:rgba(63,122,75,.22); }
.materia--redacao    { --subj:#36598C; --subj-ink:#2B486F; --subj-soft:rgba(54,89,140,.08);   --subj-line:rgba(54,89,140,.22); }
.materia--geografia  { --subj:#A86A3C; --subj-ink:#7A4B28; --subj-soft:rgba(168,106,60,.08); --subj-line:rgba(168,106,60,.22); }

.materia a { color: inherit; text-decoration: none; }

.materia .container        { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.materia .container-narrow { max-width: 860px;  margin: 0 auto; padding: 0 40px; }

/* Grain overlay sutil */
.materia .grain { position: relative; }
.materia .grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .035; mix-blend-mode: multiply;
}

.materia .eyebrow {
  font-family: var(--font-sans); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--subj-ink); margin: 0;
}

/* ---------- BOTÕES ---------- */
.materia .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  border-radius: 9999px; padding: 12px 22px; min-height: 44px; cursor: pointer; border: 0;
  letter-spacing: .005em;
  transition: background .2s var(--ease-premium), transform .15s var(--ease-premium), color .2s var(--ease-premium);
}
.materia .btn-primary { background: var(--piva-amber); color: #fff; box-shadow: var(--shadow-whisper); }
.materia .btn-primary:hover { background: var(--piva-amber-dark); }
.materia .btn-primary:active { transform: scale(.98); }
.materia .btn-secondary { background: transparent; color: var(--subj-ink); border: 1px solid var(--subj); }
.materia .btn-secondary:hover { background: var(--subj-soft); }
.materia .btn-ghost { background: transparent; color: var(--fg-1); padding: 12px 12px; }
.materia .btn-ghost:hover { color: var(--subj-ink); }

/* ---------- BREADCRUMB ---------- */
.materia .crumb { padding: 18px 0 0; }
.materia .crumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0; padding: 0; font-family: var(--font-sans); font-size: 13px; color: var(--fg-3);
}
.materia .crumb a { color: var(--fg-3); transition: color .2s var(--ease-premium); }
.materia .crumb a:hover { color: var(--subj-ink); }
.materia .crumb .sep { color: var(--fg-4); font-size: 11px; }
.materia .crumb [aria-current] { color: var(--fg-1); font-weight: 500; }

/* ---------- HERO ---------- */
.materia .hero { padding: 44px 0 88px; background: var(--bg-canvas); }
.materia .hero-grid { display: grid; grid-template-columns: 1.25fr .95fr; gap: 64px; align-items: center; }
.materia .hero h1 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(40px,5vw,68px);
  line-height: 1.03; letter-spacing: -.022em; margin: 16px 0 22px; color: var(--fg-1); text-wrap: balance;
}
.materia .hero h1 em { font-style: italic; color: var(--subj); font-weight: 500; }
.materia .hero .lede {
  font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5;
  color: var(--fg-2); max-width: 40ch; margin: 0 0 34px;
}
.materia .hero .cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.materia .hero .stamp { margin-top: 40px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--fg-3); }
.materia .tag-sand {
  display: inline-flex; align-items: center; gap: 6px; background: var(--piva-sand);
  color: var(--fg-1); border: 1px solid var(--rule); border-radius: 9999px;
  padding: 6px 14px; font-size: 12px; font-weight: 500; letter-spacing: .01em;
}

/* glyph plate */
.materia .glyph-plate {
  position: relative; aspect-ratio: 4/5; background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--radius-hero); box-shadow: var(--shadow-card); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 30px 32px;
}
.materia .glyph-plate::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 12%, var(--subj-soft), transparent 55%); pointer-events: none;
}
.materia .glyph-plate .gp-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3); font-weight: 500; position: relative; z-index: 1;
}
.materia .glyph-plate .gp-top .ix { font-variant-numeric: tabular-nums; }
.materia .glyph-letter {
  font-family: var(--font-serif); font-weight: 500; font-style: italic;
  font-size: clamp(180px,22vw,300px); line-height: .78; letter-spacing: -.04em;
  color: var(--subj); text-align: center; position: relative; z-index: 1; margin: 0;
}
.materia .glyph-plate .gp-conv {
  font-family: var(--font-serif); font-style: italic; font-size: 15px; line-height: 1.5;
  color: var(--fg-3); position: relative; z-index: 1; max-width: 34ch;
}
.materia .glyph-plate .gp-conv strong {
  font-style: normal; font-family: var(--font-sans); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--subj-ink); display: block; margin-bottom: 6px;
}

/* ---------- SEÇÕES GENÉRICAS ---------- */
.materia section { position: relative; }
.materia .sec-pad { padding: 96px 0; }
.materia .bg-alt   { background: var(--bg-alt); }
.materia .bg-alt-2 { background: var(--bg-alt-2); }
.materia .head-narrow { max-width: 720px; margin: 0 0 56px; }
.materia .head-narrow h2 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px,3.4vw,46px);
  line-height: 1.08; letter-spacing: -.018em; margin: 12px 0 18px; color: var(--fg-1); text-wrap: balance;
}
.materia .head-narrow h2 em { font-style: italic; color: var(--subj); font-weight: 500; }
.materia .head-narrow .lede {
  font-family: var(--font-serif); font-style: italic; font-size: 19px; line-height: 1.55;
  color: var(--fg-2); max-width: 56ch; margin: 0;
}

/* ---------- DOR / INTRO PROSE (split) ---------- */
.materia .dor-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: flex-start; }
.materia .dor-grid h2 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px,3.1vw,42px);
  line-height: 1.1; letter-spacing: -.016em; margin: 14px 0 0; color: var(--fg-1); text-wrap: balance;
}
.materia .dor-grid h2 em { font-style: italic; color: var(--subj); font-weight: 500; }
.materia .prose-blk { font-family: var(--font-serif); font-size: 19px; line-height: 1.72; color: var(--fg-1); }
.materia .prose-blk p { margin: 0; max-width: 60ch; }
.materia .prose-blk p + p { margin-top: 18px; }
.materia .prose-blk .dropcap::first-letter {
  font-family: var(--font-serif); font-weight: 600; float: left; font-size: 3.2em;
  line-height: .92; padding: .06em .1em 0 0; color: var(--subj);
}

/* ---------- MÉTODO APLICADO (steps) ---------- */
.materia .steps { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.materia .step {
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 16px; padding: 30px 32px;
  box-shadow: var(--shadow-card); transition: transform .24s var(--ease-premium), box-shadow .24s var(--ease-premium);
  display: flex; flex-direction: column;
}
.materia .step:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.materia .step .row { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.materia .step .n {
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 34px; line-height: 1;
  color: var(--subj); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.materia .step .meta { font-family: var(--font-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.materia .step h3 { font-family: var(--font-serif); font-weight: 600; font-size: 21px; line-height: 1.22; margin: 0 0 10px; letter-spacing: -.01em; color: var(--fg-1); }
.materia .step p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 46ch; }

/* ---------- POR SÉRIE (table) ---------- */
.materia .grade-table { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); }
.materia .grade-row { display: grid; grid-template-columns: .85fr 2fr; border-bottom: 1px solid var(--rule); }
.materia .grade-row:last-child { border-bottom: 0; }
.materia .grade-row > * { padding: 30px 36px; }
.materia .grade-row .g-when { border-right: 1px solid var(--rule); background: var(--bg-alt-2); display: flex; flex-direction: column; gap: 6px; }
.materia .grade-row .g-when .stage { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -.01em; color: var(--fg-1); }
.materia .grade-row .g-when .ages { font-family: var(--font-sans); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--subj-ink); font-weight: 600; }
.materia .grade-row .g-what { display: flex; flex-direction: column; gap: 10px; }
.materia .grade-row .g-what .lead { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.materia .grade-row .g-what .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.materia .chip {
  display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  color: var(--fg-1); background: var(--piva-sand); border: 1px solid var(--rule); border-radius: 9999px;
  padding: 6px 14px; letter-spacing: .005em;
}

/* ---------- FREIOS (list) ---------- */
.materia .freio-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: flex-start; }
.materia .freio-list { list-style: none; padding: 0; margin: 0; }
.materia .freio-list li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.materia .freio-list li:last-child { border-bottom: 0; }
.materia .freio-list .mk { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1; color: var(--subj); }
.materia .freio-list .t { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--fg-1); margin: 0 0 5px; letter-spacing: .005em; }
.materia .freio-list .d { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--fg-3); margin: 0; max-width: 48ch; }

/* ---------- CONVERSA COM (interdisciplinar) ---------- */
.materia .conv-strip { display: flex; flex-wrap: wrap; gap: 16px; }
.materia .conv-card {
  flex: 1 1 240px; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 14px;
  padding: 26px 28px; box-shadow: var(--shadow-whisper);
  transition: transform .24s var(--ease-premium), box-shadow .24s var(--ease-premium);
}
.materia .conv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.materia .conv-card .cg { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 40px; line-height: .9; color: var(--subj); letter-spacing: -.03em; }
.materia .conv-card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 19px; margin: 14px 0 8px; letter-spacing: -.008em; color: var(--fg-1); }
.materia .conv-card p { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; color: var(--fg-3); margin: 0; max-width: 34ch; }

/* ---------- DEPOIMENTO (band teal, âncora institucional) ---------- */
.materia .quote-band { padding: 104px 0; background: var(--piva-teal-ink); color: var(--piva-off-white); overflow: hidden; }
.materia .quote-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .04; mix-blend-mode: screen; pointer-events: none;
}
.materia .quote-inner { max-width: 920px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 1; }
.materia .quote-inner .mk { font-family: var(--font-serif); font-size: 120px; line-height: .4; color: var(--piva-amber); display: block; margin-bottom: 8px; }
.materia .quote-inner blockquote {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(26px,3.1vw,40px);
  line-height: 1.24; letter-spacing: -.014em; color: var(--piva-off-white); margin: 0 0 28px; max-width: 24ch; text-wrap: balance;
}
.materia .quote-inner blockquote em { color: var(--piva-amber); font-style: italic; }
.materia .quote-inner .who { display: flex; gap: 16px; align-items: center; font-size: 14px; color: rgba(255,253,248,.72); letter-spacing: .01em; }
.materia .quote-inner .who .dash { width: 40px; height: 1px; background: var(--piva-amber); }

/* ---------- FAQ (details nativo) ---------- */
.materia .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; align-items: flex-start; }
.materia .faq-head h2 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px,3vw,40px);
  line-height: 1.1; letter-spacing: -.016em; margin: 12px 0 0; color: var(--fg-1);
}
.materia .faq-head h2 em { font-style: italic; color: var(--subj); }
.materia .faq-list { border-top: 1px solid var(--rule); }
.materia details.faq { border-bottom: 1px solid var(--rule); }
.materia details.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; padding: 24px 0; font-family: var(--font-serif); font-weight: 500; font-size: 20px;
  line-height: 1.32; letter-spacing: -.008em; color: var(--fg-1); text-wrap: balance;
}
.materia details.faq summary::-webkit-details-marker { display: none; }
.materia details.faq summary .ic { flex-shrink: 0; font-family: var(--font-sans); font-size: 24px; font-weight: 400; color: var(--subj); line-height: 1; transition: transform .24s var(--ease-premium); }
.materia details.faq[open] summary .ic { transform: rotate(45deg); }
.materia details.faq .ans { font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: var(--fg-2); margin: 0 0 26px; max-width: 62ch; padding-right: 40px; }
.materia details.faq .ans a { color: var(--subj-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--subj-line); }

/* ---------- CTA BAND ---------- */
.materia .cta-band { padding: 100px 0; background: var(--bg-canvas); text-align: center; }
.materia .cta-band h2 {
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(32px,3.4vw,48px); line-height: 1.08;
  letter-spacing: -.02em; margin: 12px auto 18px; max-width: 22ch; text-wrap: balance; color: var(--fg-1);
}
.materia .cta-band h2 em { font-style: italic; color: var(--subj); font-weight: 500; }
.materia .cta-band p { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--fg-2); margin: 0 auto 32px; max-width: 46ch; }
.materia .cta-band .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .materia .container, .materia .container-narrow { padding: 0 24px; }
  .materia .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .materia .glyph-plate { aspect-ratio: 16/10; }
  .materia .glyph-letter { font-size: clamp(120px,30vw,200px); }
  .materia .dor-grid, .materia .freio-grid, .materia .faq-grid { grid-template-columns: 1fr; gap: 36px; }
  .materia .steps { grid-template-columns: 1fr; }
  .materia .grade-row { grid-template-columns: 1fr; }
  .materia .grade-row .g-when { border-right: 0; border-bottom: 1px solid var(--rule); }
  .materia .sec-pad { padding: 64px 0; }
  .materia .quote-band { padding: 72px 0; }
  .materia .cta-band { padding: 72px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .materia *, .materia *::before, .materia *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   RODAPÉ EDITORIAL do template de matéria.
   Autossuficiente (não depende do .materia scope nem do CSS por-página
   onde mora o footer-c). Usa tokens globais do shared.css (--bg-dark,
   --accent, --ease-premium), que já está carregado.
   ============================================================ */
.materia-footer {
  background: var(--bg-dark, #0A3D42);
  color: #FFFDF8;
  padding: 80px 0 40px;
  font-family: 'Source Sans 3', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.materia-footer .mf-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.materia-footer .mf-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 48px; margin-bottom: 56px; }
.materia-footer .mf-wm { font-family: 'Lora', Georgia, serif; font-weight: 600; font-size: 30px; letter-spacing: -.018em; color: #FFFDF8; }
.materia-footer .mf-wm span { font-weight: 500; color: rgba(255,253,248,.6); }
.materia-footer .mf-brand p { font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.5; color: rgba(255,253,248,.72); margin: 14px 0 0; max-width: 34ch; }
.materia-footer .mf-col-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,253,248,.55); font-weight: 600; margin: 0 0 16px; }
.materia-footer .mf-col a { display: block; font-size: 14px; line-height: 2; color: rgba(255,253,248,.85); text-decoration: none; transition: color .2s var(--ease-premium, ease); }
.materia-footer .mf-col a:hover { color: var(--accent, #E8860C); }
.materia-footer .mf-addr { font-style: normal; font-size: 14px; line-height: 1.7; color: rgba(255,253,248,.85); margin: 0; }
.materia-footer .mf-addr a { color: rgba(255,253,248,.85); text-decoration: none; }
.materia-footer .mf-addr a:hover { color: var(--accent, #E8860C); }
.materia-footer .mf-rule { border-top: 1px solid rgba(255,253,248,.14); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: rgba(255,253,248,.55); }
@media (max-width: 960px) {
  .materia-footer { padding: 56px 0 32px; }
  .materia-footer .mf-inner { padding: 0 24px; }
  .materia-footer .mf-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .materia-footer .mf-grid { grid-template-columns: 1fr; }
  .materia-footer .mf-rule { flex-direction: column; align-items: flex-start; }
}