/*
Theme Name: MAYOR — Setembro
Theme URI: https://mayor-imageconsulting.pt
Author: MohB Studio
Author URI: https://mohaupt-bringts.com/studio
Description: Nachbau des Website-Entwurfs, den Maria Mayor am 31.08.2026 als PDF
  geschickt hat ("site MAYOR SETEMBRO"). Eigenstaendiges Block-Theme, PT-primaer.
  Alle Seiteninhalte bestehen aus Kernbloecken und sind im Block-Editor aenderbar.
  LABOR-Theme — laeuft auf mayor-lab.studio.mohb.de und geht NICHT live
  (Stefans Festlegung vom 01.09.2026). Einzelne Funktionen werden bewusst nach
  mayor-imageconsulting.pt uebernommen; das Theme selbst nie.
Version: 2.13.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: mayor-setembro
*/

/* ==========================================================================
   Grundsatz
   --------------------------------------------------------------------------
   Die Struktur kommt aus Kernbloecken (group, columns, media-text, query).
   Diese Datei steuert nur Schmuck: Farben, Zierrahmen, Typografie, Feinabstand.
   Deshalb greifen fast alle Regeln auf `.wp-block-*` INNERHALB einer
   Sektionsklasse zu — nicht auf eigene Elementstrukturen.
   ========================================================================== */

:root {
  --mayor-rand: clamp(1.25rem, 5vw, 5rem);
  --mayor-versatz: 14px;
  --mayor-linie: 1px solid rgba(92, 61, 46, 0.16);
}

body { -webkit-font-smoothing: antialiased; }

/* Nichts lässt sich aus der Seite herausziehen (Stefan, 01.09.2026).
   Betrifft NUR das Ziehen — Text bleibt markierbar und kopierbar, sonst
   nähme man den Besuchern etwas weg, wonach niemand gefragt hat.
   `-webkit-user-drag` kennen nur WebKit und Blink; Firefox braucht das
   `draggable="false"` aus functions.php, und mayor.js fängt den Rest ab. */
img,
a,
figure,
.wp-block-image { -webkit-user-drag: none; }
img { max-width: 100%; height: auto; }

/* Abschnitt: volle Breite, innen Seitenrand ------------------------------- */

.mayor-seccao {
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--mayor-rand);
}
.mayor-seccao--hero { padding-block: clamp(2rem, 4vw, 3.5rem); }
.mayor-seccao--centro { text-align: center; }

/* Kernblock-Abstaende innerhalb der Abschnitte etwas enger */
.mayor-seccao :where(.wp-block-columns) { margin-block: 0; }

/* Wiederkehrende Textrollen ---------------------------------------------- */

.mayor-kicker {
  font-size: var(--wp--preset--font-size--kicker);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terracota);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.mayor-numero {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--numero);
  line-height: 1;
  font-weight: 300;
  margin-bottom: 0.2rem;
}
/* Abgedunkelter Dreiklang (Stefans Entscheidung, 31.08.).
   Vorher: Terracota 3.19-3.33, Latão 2.53-2.67, Azul suave 3.00-3.16 — das
   Gold riss sogar die 3:1 für große Schrift. Jetzt liegen alle drei bei
   4.5-4.8:1 und damit gleich schwer; die Dreifarbigkeit bleibt, und weil
   4.5 erreicht ist, spielt die Schriftgröße keine Rolle mehr. */
.mayor-numero--terracota { color: var(--wp--preset--color--terracota-profundo); }
.mayor-numero--latao     { color: var(--wp--preset--color--latao-profundo); }
.mayor-numero--azul      { color: var(--wp--preset--color--azul-profundo); }

.mayor-lead { font-size: var(--wp--preset--font-size--lead); max-width: 36ch; }
.mayor-hero__lead { font-size: var(--wp--preset--font-size--lead); max-width: 34ch; }
.mayor-seccao-cabeca__sub { margin-top: 0.2rem; font-size: 0.95rem; }

.mayor-traco::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 0.75rem;
  background: var(--wp--preset--color--latao);
}
.mayor-traco--centro { text-align: center; }
.mayor-traco--centro::after { margin-inline: auto; }

.mayor-assinatura {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-size: var(--wp--preset--font-size--subtitulo);
  color: var(--wp--preset--color--castanho);
}

/* Zierrahmen --------------------------------------------------------------
   Liegt auf dem <figure> des core/image-Blocks. Der Rahmen ist ein
   Pseudo-Element, damit das Bild selbst unberuehrt und austauschbar bleibt. */

.mayor-moldura {
  position: relative;
  display: block;
  margin: 0;
  width: fit-content;
  max-width: 100%;
}
/* Verlinkte Bilder stecken in einem <a>. Das ist von Haus aus schrumpfend —
   ein `width:100%` am Bild bezieht sich dann auf die Naturbreite des Bildes
   statt auf die Spalte, und der Zierrahmen (100 % der Figur) ragt rechts
   heraus. Gemessen: Figur 295 px, Bild 202 px. */
.mayor-moldura > a { display: block; width: 100%; }
.mayor-moldura img { position: relative; z-index: 1; display: block; }
.mayor-moldura::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--mayor-versatz) * -1);
  left: calc(var(--mayor-versatz) * -1);
  width: 100%;
  height: 100%;
  background: var(--moldura-cor, var(--wp--preset--color--terracota));
}
.mayor-moldura--direita::before { left: auto; right: calc(var(--mayor-versatz) * -1); }
.mayor-moldura--linha::before {
  background: none;
  border: 2px solid var(--moldura-cor, var(--wp--preset--color--latao));
}
.mayor-moldura--terracota { --moldura-cor: var(--wp--preset--color--terracota); }
.mayor-moldura--azul      { --moldura-cor: var(--wp--preset--color--azul-suave); }
.mayor-moldura--latao     { --moldura-cor: var(--wp--preset--color--latao); }
.mayor-moldura--areia     { --moldura-cor: var(--wp--preset--color--areia); }

/* ==========================================================================
   Cabeçalho
   ========================================================================== */

/* Kleben muss die HUELLE, nicht der Kopf selbst.
   `wp:template-part` rendert einen <div class="wp-block-template-part"> um den
   Inhalt. Diese Huelle ist exakt so hoch wie der Kopf — ein sticky Kind darin
   hat null Weg und scrollt einfach mit weg. Der Kopf sah dadurch sticky aus
   (die Klasse `is-scrolled` schaltete ja korrekt), war es aber nie.
   Gemessen am 31.08.2026: nach 1200 px Scrollen stand der Kopf bei -863 px. */
.mayor-cabecalho-suporte {
  position: sticky;
  top: 0;
  z-index: 50;
}

.mayor-cabecalho {
  background: var(--wp--preset--color--marfim-quente);
  border-bottom: var(--mayor-linie);
  transition: box-shadow 0.25s ease;
}
/* Halbe Höhe, überall gleich (Stefan, 01.09.2026 (zweite Runde): „sieht aus als wären hier
   zwei leere Zeilen"). Gemessen: 94 px vorher, 54 px jetzt. Der Kopf hat
   deshalb auch keinen Sonderfall mehr für die Startseite. */
.mayor-cabecalho__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.5rem var(--mayor-rand);
  transition: padding 0.25s ease;
}
.mayor-cabecalho.is-scrolled .mayor-cabecalho__interior { padding-block: 0.35rem; }
.mayor-cabecalho.is-scrolled { box-shadow: 0 1px 14px rgba(92, 61, 46, 0.08); }

.mayor-marca { display: block; line-height: 1; text-decoration: none; }
.mayor-marca__nome {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--terracota);
}
/* Die Wortmarke ist ein Link. Mit der halbierten Schrift fiel er auf 22 px
   und riss damit die Trefferfläche (WCAG 2.5.8: 24 px). Polsterung statt
   größerer Schrift — die Kopfhöhe soll ja klein bleiben. */
.mayor-marca__nome a {
  display: inline-block;
  padding-block: 0.2rem;
  color: inherit;
  text-decoration: none;
}
.mayor-marca__sub {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--latao);
}

/* Navigation kommt aus core/navigation --------------------------------- */

.mayor-cabecalho .wp-block-navigation { flex: 0 1 auto; }
.mayor-cabecalho .wp-block-navigation__container { gap: 0.2rem; align-items: center; }
.mayor-cabecalho .wp-block-navigation-item__content {
  position: relative;
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
  color: var(--wp--preset--color--castanho);
  text-decoration: none;
}
.mayor-cabecalho .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.05rem;
  height: 1px;
  background: var(--wp--preset--color--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.mayor-cabecalho .wp-block-navigation-item__content:hover::after,
.mayor-cabecalho .current-menu-item .wp-block-navigation-item__content::after { transform: scaleX(1); }
.mayor-cabecalho .current-menu-item .wp-block-navigation-item__content { color: var(--wp--preset--color--terracota); }

/* Trennpunkte zwischen den Menuepunkten, wie im Entwurf */
.mayor-cabecalho .wp-block-navigation__container > .wp-block-navigation-item + .wp-block-navigation-item::before {
  content: "·";
  color: var(--wp--preset--color--latao);
  opacity: 0.8;
  margin-right: 0.2rem;
}

.mayor-acoes { display: flex; align-items: center; gap: 0.4rem; }
.mayor-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--wp--preset--color--castanho);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.mayor-icone:hover { background: rgba(196, 113, 90, 0.1); color: var(--wp--preset--color--terracota); }
.mayor-icone svg { width: 21px; height: 21px; }

.mayor-busca {
  display: none;
  padding: 0 var(--mayor-rand) 1.1rem;
  background: var(--wp--preset--color--marfim-quente);
  border-bottom: var(--mayor-linie);
}
.mayor-busca.is-open { display: block; }
.mayor-busca input[type="search"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: var(--mayor-linie);
  background: var(--wp--preset--color--marfim);
  font-family: inherit;
  font-size: 1rem;
}

/* ==========================================================================
   Início — Entwurfsseite 2
   --------------------------------------------------------------------------
   Bis 01.09.2026 stand hier ein 100dvh-Raster: Kopf, Hero, Rubriken und Fuß
   mussten gemeinsam in eine Bildschirmhöhe. Stefan hat das am 02.09. wieder
   aufgehoben — die Seite scrollt, der Fuß rutscht nach unten, Hero und
   Rubriken bekommen dadurch Luft.

   Was davon bleibt: NICHTS von der Zwangshöhe. Keine `dvh`-Schriftgrößen,
   keine Größen-Container, kein `overflow: hidden`. Der Hero hat nur noch eine
   MINDESTHÖHE — wächst der Text darüber hinaus, wächst der Abschnitt mit,
   statt den Text abzuschneiden.
   ========================================================================== */

.mayor-hero { gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mayor-hero h1 { margin: 0.4rem 0 1rem; }

.mayor-inicio__hero {
  position: relative;
  padding: 0;
  min-height: clamp(420px, 78dvh, 760px);
  display: flex;
  background-image: url("assets/img/deco/wash-terracota.webp");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 52%;
}
.mayor-inicio__hero > .wp-block-columns {
  position: relative;
  width: 100%;
  margin: 0;
  align-items: stretch;
}
.mayor-inicio__hero .wp-block-column:first-child {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vh, 4rem) 0 clamp(2rem, 6vh, 4rem)
           calc(var(--mayor-rand) + clamp(1.2rem, 3vw, 3rem));
}
/* Goldene Senkrechte links der Überschrift und Pinselstrich darunter — beides
   Schmuck aus dem Entwurf, deshalb CSS und nicht Inhalt. */
.mayor-inicio__hero .wp-block-column:first-child::before {
  content: "";
  position: absolute;
  left: var(--mayor-rand);
  top: 22%;
  width: 2px;
  height: 30%;
  background: var(--wp--preset--color--latao);
}
.mayor-inicio__hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  line-height: 1.06;
}
.mayor-inicio__hero h1::after {
  content: "";
  display: block;
  width: 88px;
  height: 16px;
  margin-top: 0.7rem;
  background: url("assets/img/deco/traco-terracota.webp") no-repeat left center / contain;
}
.mayor-inicio__hero .mayor-hero__lead { margin: 1.1rem 0 1.6rem; }
.mayor-inicio__hero .wp-block-buttons { margin: 0; }
.mayor-inicio__assinatura { margin-top: 1.4rem; }

/* Hero-Foto: randlos nach rechts und unten, wie im Entwurf. Der blaue Riegel
   links oben ist das Pseudo-Element des Zierrahmens — hier als schmaler
   Streifen, weil der Rest vom Foto verdeckt wird. */
.mayor-inicio__hero .wp-block-column:last-child { display: flex; }
.mayor-inicio__figura { width: 100%; }
.mayor-inicio__figura img {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 40vh, 520px);
  object-fit: cover;
  object-position: center 22%;
}
.mayor-inicio__figura::before {
  top: 0;
  left: -28px;
  width: 28px;
  height: 34%;
}

/* Rubriken: Foto links, Text rechts. Das Markup ist unverändert (Bild,
   Nummer, Titel, Text untereinander) — nur die Anordnung macht das Raster.
   So passen die bestehenden Patterns weiter. */
.mayor-rubricas { gap: clamp(1.2rem, 3vw, 2.4rem); }
.mayor-rubricas .mayor-moldura { width: 100%; }
.mayor-rubricas .mayor-moldura img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: filter 0.3s ease; }
.mayor-rubricas .wp-block-column:hover .mayor-moldura img { filter: brightness(1.05); }
.mayor-rubricas h3 { margin: 0 0 0.3rem; font-size: var(--wp--preset--font-size--titulo-sm); }
.mayor-rubricas h3 a { color: inherit; text-decoration: none; }
.mayor-rubricas h3 a:hover { color: var(--wp--preset--color--terracota); }
.mayor-rubricas .mayor-numero { margin-top: 1.1rem; }
.mayor-rubrica__texto { font-size: 0.86rem; margin: 0; }

/* Foto links, Text rechts — auf JEDER Breite. Gestapelt (Foto über Text) wären
   die vier Rubriken auf dem Telefon 3 598 px lang; nebeneinander sind es rund
   800 px. Der Entwurf zeigt sie ohnehin nebeneinander. */
@media (min-width: 360px) {
  /* Drei ausdrückliche Zeilen (Nummer, Titel, Text) statt `auto`: sonst
     strecken sich die Zeilen auf die Höhe der höchsten Karte der Reihe, und
     die Karte wird viel höher als ihr Foto. Gemessen am 01.09.2026: 303 px
     Karte bei 148 px Foto. */
  .mayor-rubricas--deitadas .wp-block-column {
    display: grid;
    grid-template-columns: minmax(0, 37%) minmax(0, 1fr);
    grid-template-rows: repeat(3, min-content);
    column-gap: clamp(0.7rem, 1.2vw, 1.2rem);
    align-content: center;
  }
  .mayor-rubricas--deitadas .wp-block-column > .mayor-moldura {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
  }
  .mayor-rubricas--deitadas .wp-block-column > :not(.mayor-moldura) { grid-column: 2; }
  /* Karte 04 spiegelt den Zierrahmen nach rechts. Er ragt 14 px über das Foto
     hinaus und stand sonst direkt an der Ordnungszahl (gemessen: 3 px Luft).
     Die Luft muss in die SPALTENLÜCKE — ein `margin-right` am Bild würde nur
     das Bild schmaler machen, weil es `width: 100%` trägt. */
  .mayor-rubricas--deitadas .wp-block-column:has(.mayor-moldura--direita) {
    column-gap: calc(clamp(0.7rem, 1.2vw, 1.2rem) + var(--mayor-versatz));
  }
  .mayor-rubricas--deitadas .mayor-numero { margin-top: 0; line-height: 1; font-size: clamp(1.4rem, 2.6vw, 2.3rem); }
  .mayor-rubricas--deitadas h3 { line-height: 1.15; font-size: clamp(1.05rem, 1.45vw, 1.35rem); }
  /* Neben dem Foto stehen nur ~180 px. Der Text muss in zwei Zeilen passen,
     sonst bestimmt er die Höhe der Karte statt des Fotos. */
  .mayor-rubricas--deitadas .mayor-rubrica__texto { font-size: 0.78rem; line-height: 1.45; }
  .mayor-rubricas--deitadas .mayor-moldura img { aspect-ratio: 3 / 4; }
}

/* Auf schmalen Schirmen stehen die vier Rubriken untereinander (der
   columns-Block bricht dort um). Dann ist die Karte so breit wie der Schirm —
   ohne Deckel würde das Foto 190 px hoch und die Seite wieder endlos. */
@media (max-width: 780px) {
  .mayor-rubricas--deitadas .wp-block-column {
    grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
    column-gap: 1.1rem;
    padding-block: 0.2rem;
  }
  .mayor-rubricas--deitadas .mayor-moldura img { height: 155px; aspect-ratio: auto; }
  .mayor-rubricas { gap: 1.6rem; }
}

.mayor-inicio__rubricas { border-top: var(--mayor-linie); }

/* "Explore o universo MAYOR" — mittig, mit langem Pfeil. Der Pfeil ist ein
   Hintergrundbild am Link, damit im Editor nur der Text steht. */
.mayor-banda-explorar {
  padding: clamp(1.6rem, 3vw, 2.6rem) var(--mayor-rand);
  border-top: var(--mayor-linie);
}
.mayor-banda-explorar .mayor-explorar { margin: 0; }

.mayor-explorar {
  margin: clamp(1.4rem, 3vw, 2.4rem) 0 0;
  text-align: center;
  font-size: var(--wp--preset--font-size--card);
  letter-spacing: 0.04em;
}
.mayor-explorar a {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.55rem 0.2rem;
  color: var(--wp--preset--color--terracota-profundo);
  text-decoration: none;
}
.mayor-explorar a::after {
  content: "";
  width: clamp(90px, 12vw, 175px);
  height: 10px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='175' height='10' viewBox='0 0 175 10'%3E%3Cpath d='M0 5h170M166 1l4 4-4 4' fill='none' stroke='%23A85539' stroke-width='1.1'/%3E%3C/svg%3E") no-repeat right center;
  transition: width 0.25s ease;
}
.mayor-explorar a:hover { color: var(--wp--preset--color--castanho-quente); }
.mayor-explorar a:hover::after { width: clamp(105px, 14vw, 200px); }

/* Schmale Schirme: Text über Bild, Zierstücke aus dem Weg. */
@media (max-width: 860px) {
  .mayor-inicio__hero { background-size: auto 42%; min-height: 0; display: block; }
  .mayor-inicio__hero .wp-block-column:first-child {
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--mayor-rand);
  }
  .mayor-inicio__hero .wp-block-column:first-child::before { display: none; }
  .mayor-inicio__figura::before { display: none; }
  .mayor-inicio__figura img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Testemunhos als Karussell (Startseite, unter den vier Rubriken)
   -------------------------------------------------------------------------- */

.mayor-duvidas__texto {
  max-width: 46ch;
  margin: 1rem auto 1.8rem !important;
  font-size: var(--wp--preset--font-size--lead);
}
.mayor-duvidas .wp-block-buttons { justify-content: center; }

.mayor-testemunhos-seccao { text-align: center; }
/* Alle drei auf einen Blick (Stefan, vierte Runde) — kein „Deslize para ler"
   mehr. Bei genau drei Stimmen versteckt ein Karussell ein Drittel des Inhalts
   und gibt nichts dafür. */
.mayor-testemunhos-grelha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.2rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  text-align: left;
}
.mayor-testemunhos-grelha > * { margin-block: 0; }
@media (max-width: 900px) {
  .mayor-testemunhos-grelha { grid-template-columns: 1fr; }
}
.mayor-cartao-testemunho {
  width: 100%;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  background: var(--wp--preset--color--marfim);
  border-top: 2px solid var(--wp--preset--color--terracota);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mayor-cartao-testemunho .mayor-testemunho { border: none; margin: 0; padding: 0; }
.mayor-cartao-testemunho .mayor-testemunho p {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--wp--preset--color--azul-noite);
  margin: 0;
}
.mayor-cartao-testemunho .mayor-testemunho__autor { margin: 1.2rem 0 0; }

/* ==========================================================================
   Karussell (Serviços)
   ========================================================================== */

/* Grid- und Flex-Kinder schrumpfen sonst nicht unter ihren Inhalt — die
   Spalte wird so breit wie das Karussell lang ist und die Seite laeuft
   waagerecht ueber. */
.mayor-servicos > .wp-block-column,
.mayor-notebook > .wp-block-column { min-width: 0; }

.mayor-carrossel {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1rem, 2.4vw, 2rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1.2rem;
  margin-top: 1.6rem;
  scrollbar-width: none;
}
.mayor-carrossel::-webkit-scrollbar { display: none; }
.mayor-carrossel > * { flex: 0 0 auto; scroll-snap-align: start; margin: 0; }

.mayor-dica {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.82rem;
  margin: 0.4rem 0 0;
}
/* Fortschrittslinie: JS setzt nur --mayor-progresso und --mayor-visivel,
   gezeichnet wird hier. Ohne JS bleibt eine ruhige Linie stehen. */
.mayor-dica::after {
  content: "";
  flex: 1;
  height: 2px;
  background:
    linear-gradient(
      to right,
      var(--wp--preset--color--areia) 0 100%
    );
  background-image:
    linear-gradient(to right, var(--wp--preset--color--terracota), var(--wp--preset--color--terracota)),
    linear-gradient(to right, var(--wp--preset--color--areia), var(--wp--preset--color--areia));
  background-size:
    calc(var(--mayor-visivel, 0.4) * 100%) 100%,
    100% 100%;
  background-position:
    calc(var(--mayor-progresso, 0) * 100%) 0,
    0 0;
  background-repeat: no-repeat;
  transition: background-position 0.2s ease;
}

.mayor-indice { list-style: none; margin: 0; padding: 0 1.2rem 0 0; border-right: var(--mayor-linie); }
.mayor-indice li + li { margin-top: 1.1rem; }
.mayor-indice a { text-decoration: none; color: var(--wp--preset--color--castanho); font-size: 0.85rem; line-height: 1.35; display: block; }
.mayor-indice a:hover { color: var(--wp--preset--color--terracota); }

.mayor-cartao-servico { width: clamp(230px, 26vw, 290px); }
.mayor-cartao-servico .mayor-moldura { width: 100%; }
.mayor-cartao-servico .mayor-moldura img { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; }
.mayor-cartao-servico__legenda {
  position: relative;
  z-index: 2;
  margin: -2.8rem 0 0 -0.6rem;
  padding: 1.1rem 1.3rem;
  max-width: 90%;
}
.mayor-cartao-servico__legenda h3 { margin: 0.1rem 0 0; font-size: 1.3rem; }
.mayor-cartao-servico__legenda h3 a { color: inherit; text-decoration: none; }
.mayor-cartao-servico__legenda .mayor-numero { font-size: 2rem; }
.mayor-cartao-servico__preco { margin: 0.45rem 0 0; font-size: 0.85rem; color: var(--wp--preset--color--latao-escuro); }

@media (max-width: 780px) {
  .mayor-indice { display: none; }
  .mayor-servicos > .wp-block-column:first-child { display: none; }
}

/* ==========================================================================
   Serviço — Detailseite
   ========================================================================== */

/* Oben ausrichten, nicht mittig. Sonst wandert die Collage bei jeder
   Höhenänderung der linken Spalte — beim Aufklappen des Kleingedruckten
   sprang sie um 173 px, exakt die halbe Zuwachshöhe (Stefan, 31.08.).
   Ein mittig ausgerichtetes Element kann bei veränderlichem Inhalt
   gar nicht ruhig stehen. */
.mayor-servico__hero { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; }
.mayor-servico__hero > .wp-block-column { align-self: flex-start; }
.mayor-servico__titulo {
  font-size: var(--wp--preset--font-size--versalete);
  text-transform: uppercase;
  margin: 0.3rem 0 1rem;
}
.mayor-servico__hero p { max-width: 42ch; }
.mayor-servico__preco {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  color: var(--wp--preset--color--latao);
  margin: 1.3rem 0 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--wp--preset--color--areia);
  max-width: 8ch;
  line-height: 1;
}
.mayor-servico__nota { font-size: 0.82rem; color: var(--wp--preset--color--terracota); margin: 0.5rem 0 0; }
.mayor-servico__metodo { font-size: 0.76rem; margin-top: 0.5rem; }

/* Collage: zwei Bilder uebereinander, wie im Entwurf */
/* Deckel auf der Collage: ohne ihn fuellt sie die halbe Spaltenbreite und
   erschlaegt den Text daneben (Stefan, 31.08.2026: "Das Bild ist riesig"). */
.mayor-colagem { position: relative; padding-bottom: 2.5rem; max-width: 430px; margin-inline: auto; }
.mayor-colagem__principal { width: 74%; }
.mayor-colagem__principal img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mayor-colagem__secundaria {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54%;
  z-index: 3;
  margin: 0;
}
.mayor-colagem__secundaria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mayor-colagem::after {
  content: "";
  position: absolute;
  right: -2%;
  bottom: 1.2rem;
  width: 14%;
  height: 26%;
  background: var(--wp--preset--color--areia);
  z-index: 0;
}
@media (max-width: 900px) {
  .mayor-colagem__principal { width: 82%; }
  .mayor-colagem__secundaria { width: 58%; }
}

/* Streifen "O percurso" */
.mayor-percurso-tira {
  align-items: center;
  gap: clamp(0.8rem, 2.5vw, 2rem);
  padding: 1.1rem var(--mayor-rand) 1.4rem;
  border-top: var(--mayor-linie);
}
.mayor-percurso-tira p { margin: 0; }
.mayor-percurso-tira__titulo {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.4rem;
  color: var(--wp--preset--color--azul-noite);
  white-space: nowrap;
}
.mayor-percurso-tira__passo { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; }
.mayor-percurso-tira__passo .mayor-numero { font-size: 1.2rem; margin: 0; }
.mayor-percurso-tira__passo span:last-child {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.05rem;
  color: var(--wp--preset--color--azul-noite);
}

/* Zitat + Einleitung */
.mayor-citacao-bloco { gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
.mayor-citacao {
  border: none;
  padding: 0;
  margin: 0;
}
.mayor-citacao p {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: 1.28;
  color: var(--wp--preset--color--azul-noite);
  margin: 0;
}
.mayor-citacao-bloco .mayor-moldura { width: 100%; }
.mayor-citacao-bloco .mayor-moldura img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* "Para quem é" */
.mayor-para-quem h2 { margin-bottom: 1.8rem; }
.mayor-para-quem__lista {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  columns: 2;
  column-gap: 2.5rem;
}
.mayor-para-quem__lista li {
  break-inside: avoid;
  padding: 0.9rem 0;
  border-bottom: var(--mayor-linie);
  font-size: 0.94rem;
  padding-left: 1.2rem;
  position: relative;
}
.mayor-para-quem__lista li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--terracota);
}
@media (max-width: 700px) { .mayor-para-quem__lista { columns: 1; } }

/* "O percurso" — Zickzack aus core/columns */
.mayor-percurso h2 { margin-bottom: 1.6rem; }
.mayor-percurso__passo {
  max-width: 1120px;
  margin: 0 auto !important;
  border: var(--mayor-linie);
  border-bottom: none;
  gap: 0;
  align-items: center;
}
.mayor-percurso .mayor-percurso__passo:last-of-type { border-bottom: var(--mayor-linie); }
.mayor-percurso__passo > .wp-block-column { padding: 1.1rem 1.4rem; }
.mayor-percurso__foto { margin: 0; }
/* Flacheres Bildformat und Hoehendeckel — vier Schritte mit 16/10 zogen den
   Abschnitt auf ueber 1000 px auseinander. */
.mayor-percurso__foto img {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 155px;
  object-fit: cover;
  display: block;
}
/* Die Bildspalte fuellt ihre Zelle randlos, wie im Entwurf */
.mayor-percurso__passo > .wp-block-column:has(> .mayor-percurso__foto) { padding: 0; align-self: stretch; }
.mayor-percurso__passo > .wp-block-column:has(> .mayor-percurso__foto) .mayor-percurso__foto,
.mayor-percurso__passo > .wp-block-column:has(> .mayor-percurso__foto) img { height: 100%; }
.mayor-percurso__rotulo { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 0.6rem; }
.mayor-percurso__rotulo .mayor-numero { font-size: 1.6rem; margin: 0; }
.mayor-percurso__nome { font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; color: var(--wp--preset--color--azul-noite); }
.mayor-percurso__texto { font-size: 0.88rem; line-height: 1.6; margin: 0; max-width: 52ch; }

/* "O que inclui" / "Formato" / Investimento */
.mayor-inclui { gap: clamp(1.5rem, 4vw, 3.5rem); }
.mayor-inclui__lista { list-style: none; margin: 1rem 0 0; padding: 0; }
.mayor-inclui__lista li { padding: 0.35rem 0 0.35rem 1.2rem; font-size: 0.94rem; position: relative; }
.mayor-inclui__lista li::before { content: "•"; position: absolute; left: 0; color: var(--wp--preset--color--terracota); }
.mayor-investimento { margin-top: 1.6rem; padding: clamp(1.4rem, 3vw, 2.2rem); }
.mayor-investimento p { color: var(--wp--preset--color--marfim); }
.mayor-investimento__rotulo { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; margin: 0; }
.mayor-investimento__valor {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0.3rem 0;
}
.mayor-investimento__nota { font-size: 0.82rem; opacity: 0.92; margin-bottom: 1.1rem; }

/* Schlusszitat */
.mayor-fecho { text-align: center; }
.mayor-fecho__texto {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1.35;
  color: var(--wp--preset--color--azul-noite);
  max-width: 32ch;
  margin: 0 auto;
}
.mayor-fecho .wp-block-buttons { justify-content: center; margin-top: 1.4rem; }

/* ==========================================================================
   Knöpfe
   ========================================================================== */

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 0;
  transition: background 0.25s ease;
}
.mayor-botao-bloco .wp-block-button__link::after {
  content: "→";
  font-size: 1.05em;
  transition: transform 0.25s ease;
}
.mayor-botao-bloco .wp-block-button__link:hover::after { transform: translateX(4px); }
/* Ein Ton für alle Handlungsknöpfe: Azul noite mit weisser Schrift
   (Stefan, 01.09.2026, sechste Runde). Der Knopftext ist 13,12 px, es gelten
   also 4.5:1 — nachgerechnet gegen WEISS, nicht gegen Marfim:

     Azul noite       #14243D  = 15.56:1   ok   ← Grundfarbe
     Azul profundo    #46719B  =  5.13:1   ok   ← Hover
     Castanho quente  #6B4226  =  8.63:1   ok
     Terracota        #C4715A  =  3.59:1   durchgefallen

   Hover ist Azul profundo und nicht das wärmere Castanho quente: die beiden
   Flächen unterscheiden sich um 3.04, Braun läge bei 1.80 — der Wechsel wäre
   also ein Farbtonwechsel ohne Helligkeitswechsel und auf einem schlechten
   Bildschirm kaum zu sehen.

   ACHTUNG, Altlast: Der Kommentar, der hier bis zur sechsten Runde stand,
   behauptete bereits „Grundfarbe ist Azul noite" — der Code setzte aber seit
   dem 31.08. Braun. Ein Kommentar, der dem Code widerspricht, ist schlimmer
   als keiner: er verhindert genau das Nachsehen, das ihn widerlegt hätte. */
.mayor-botao-bloco .wp-block-button__link:hover,
.mayor-investimento .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--azul-profundo) !important;
  color: #FFFFFF;
}

/* Genug Fläche zum Treffen, auch mit dem Daumen */
.mayor-botao-bloco .wp-block-button__link,
.mayor-investimento .wp-block-button__link {
  min-height: 48px;
}

/* ==========================================================================
   Sobre mim
   ========================================================================== */

.mayor-sobre__hero { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.mayor-sobre__hero .mayor-moldura { width: 100%; }
.mayor-sobre__hero .mayor-moldura img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
/* Vier Blöcke als 2×2, in jedem Text links und Bild rechts */
.mayor-sobre__linha { gap: clamp(1.8rem, 4vw, 3.5rem); margin-bottom: clamp(1.8rem, 4vw, 3.5rem) !important; }
.mayor-sobre__linha:last-child { margin-bottom: 0 !important; }
.mayor-sobre__bloco { gap: clamp(1rem, 2vw, 1.6rem); align-items: flex-start; }
.mayor-sobre__bloco > .wp-block-column { min-width: 0; }
.mayor-sobre__bloco .mayor-moldura { width: 100%; }
.mayor-sobre__bloco .mayor-moldura img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mayor-sobre__bloco h3 { margin: 0.2rem 0 0.5rem; font-size: 1.35rem; }
.mayor-sobre__bloco p { font-size: 0.88rem; }
.mayor-sobre__bloco .mayor-numero { font-size: 2.1rem; margin-bottom: 0.1rem; }
.mayor-sobre__subtitulo {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--wp--preset--color--latao);
  margin-bottom: 0.7rem !important;
}
@media (max-width: 900px) {
  .mayor-sobre__linha { display: block; }
  .mayor-sobre__linha > .wp-block-column { margin-bottom: 2.5rem; }
}

/* Schlussblock mit Zitat links und Foto rechts */
.mayor-fecho-bloco { gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.mayor-fecho-bloco .mayor-fecho__texto { margin: 0 0 0.6rem; max-width: 20ch; text-align: left; }
.mayor-fecho-bloco .mayor-moldura { width: 100%; }
.mayor-fecho-bloco .mayor-moldura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mayor-fecho-bloco .wp-block-buttons { margin-top: 1.2rem; }

/* ==========================================================================
   Contacto
   ========================================================================== */

.mayor-contacto__hero { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.mayor-contacto__hero .mayor-moldura { width: 100%; }
.mayor-contacto__hero .mayor-moldura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mayor-contacto__dado {
  padding: 0.8rem 0;
  border-bottom: var(--mayor-linie);
  font-size: 0.92rem;
  margin: 0;
}
.mayor-contacto__dado:first-of-type { border-top: var(--mayor-linie); margin-top: 1.6rem; }
.mayor-contacto__dado strong {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--latao);
  font-weight: 500;
}
/* KEIN max-width auf dem Abschnitt: er ist alignfull und traegt dadurch
   negative Aussenabstaende. Beides zusammen schiebt ihn an den linken Rand
   statt ihn zu zentrieren. Die Breite gehoert nach innen. */
.mayor-contacto__formulario h2 { text-align: center; margin-bottom: 1.8rem; }

.mayor-principios {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(92, 61, 46, 0.16);
  border: var(--mayor-linie);
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 0;
  text-align: center;
}
.mayor-principios li { background: var(--wp--preset--color--marfim); padding: 1.4rem 1.2rem; font-size: 0.88rem; }
@media (max-width: 760px) { .mayor-principios { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Notebook — core/query mit echten Beiträgen
   ========================================================================== */

.mayor-notebook { gap: clamp(1.5rem, 4vw, 3.5rem); }
/* "Notebook" ist ein langes Wort in einer schmalen Spalte — ohne Deckel
   bricht es mitten im Wort um ("Notebo / ok"). */
.mayor-notebook h1 { font-size: clamp(2rem, 3.2vw, 2.9rem); hyphens: none; overflow-wrap: normal; }
.mayor-rubricas-lista { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.mayor-rubricas-lista li { border-bottom: var(--mayor-linie); }
.mayor-rubricas-lista a {
  display: block;
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: var(--wp--preset--color--castanho);
  font-size: 0.95rem;
  border-left: 3px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mayor-rubricas-lista a:hover {
  background: rgba(212, 133, 109, 0.16);
  border-left-color: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--terracota);
}

.mayor-artigos__lista { gap: clamp(1.2rem, 2.5vw, 2rem) !important; }
.mayor-artigos .wp-block-post { display: flex; flex-direction: column; }
/* Einheitliches Format erzwingen: die echten Beitragsbilder haben sehr
   unterschiedliche Seitenverhaeltnisse, das Raster wuerde sonst ausfransen.
   Deckel auf der Hoehe, weil die Karten sonst die Seite dominieren
   (Stefan, 31.08.2026: "sieht hübsch aus, aber die Cards sind zu groß"). */
.mayor-artigo__foto,
.mayor-artigo__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 260px;
  object-fit: cover;
  margin: 0;
}
.mayor-artigos .wp-block-post-title { margin: 0.7rem 0 0.3rem; font-size: 1.08rem; line-height: 1.3; }
.mayor-artigos .wp-block-post-title a { color: var(--wp--preset--color--azul-noite); text-decoration: none; }
.mayor-artigos .wp-block-post-title a:hover { color: var(--wp--preset--color--terracota); }
.mayor-artigo__rubrica {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--latao);
  margin-top: 0.8rem;
}
.mayor-artigo__rubrica a { color: inherit; text-decoration: none; }
.mayor-artigos .wp-block-post-excerpt { font-size: 0.82rem; line-height: 1.6; }
.mayor-artigos .wp-block-query-pagination { margin-top: 2rem; gap: 0.8rem; }

/* ==========================================================================
   Encontros
   ========================================================================== */

.mayor-encontros__hero { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.mayor-encontros__hero .mayor-moldura { width: 100%; }
.mayor-encontros__hero .mayor-moldura img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mayor-encontros__sub {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  color: var(--wp--preset--color--terracota);
  margin: 0.2rem 0 0.8rem;
}
.mayor-encontros__grelha { gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2rem; text-align: center; }
.mayor-encontros__grelha .mayor-moldura { width: 100%; }
.mayor-encontros__grelha .mayor-moldura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mayor-encontros__grelha h3 { font-size: 1.2rem; margin: 1rem 0 0; }
.mayor-encontro--breve { color: var(--wp--preset--color--terracota); }

/* ==========================================================================
   Fußzeile (rodapé) — zwei Zeilen
   --------------------------------------------------------------------------
   Kein zweites Menü, keine Untermarke. Oben Marke und Kontakt, unten
   Urheberzeile und Pflichtlinks — jeweils links und rechts gegenüber.
   ========================================================================== */

/* Seit der vierten Runde trägt die Fußzeile denselben Ton wie die Kopfzeile
   (Marfim quente), nicht mehr das Braun. Damit rahmen Kopf und Fuß die Seite
   im selben Papier ein, statt sie unten abzuschneiden. Weil der Grund jetzt
   hell ist, drehen sich alle Textfarben um — und brauchen eine Trennlinie
   oben, sonst verschwimmt der Fuß mit dem letzten Abschnitt. */
.mayor-rodape {
  padding: clamp(1.4rem, 2.8vw, 2rem) var(--mayor-rand) 1.2rem;
  border-top: var(--mayor-linie);
}
.mayor-rodape,
.mayor-rodape p { color: var(--wp--preset--color--castanho); }
.mayor-rodape a { color: var(--wp--preset--color--terracota-profundo); text-decoration: none; }
.mayor-rodape a:hover { color: var(--wp--preset--color--castanho-quente); text-decoration: underline; }
.mayor-rodape p { margin: 0; }

.mayor-rodape__topo { align-items: baseline; gap: 1rem 2rem; }
.mayor-rodape .mayor-marca__nome { color: var(--wp--preset--color--terracota); font-size: 1.5rem; }
.mayor-rodape__contacto { font-size: 0.88rem; }

.mayor-rodape__base {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: var(--mayor-linie);
  align-items: baseline;
  gap: 0.6rem 2rem;
  font-size: 0.8rem;
}
.mayor-rodape__base > p:first-child { color: var(--wp--preset--color--castanho-quente); }
.mayor-rodape__legal { font-size: 0.8rem; text-align: right; }

@media (max-width: 640px) {
  .mayor-rodape__topo,
  .mayor-rodape__base { display: block; }
  .mayor-rodape__contacto { margin-top: 0.5rem !important; }
  .mayor-rodape__legal { text-align: left; margin-top: 0.3rem !important; }
}

/* ==========================================================================
   Notebook — das aufgeschlagene Heft (Entwurfsseiten 22 + 23)
   --------------------------------------------------------------------------
   Werkzeugwahl: CSS `scroll-snap` plus rund 30 Zeilen eigenes JS. Kein
   Karussell-Paket, keine Animationsbibliothek — geblättert wird durch echtes
   Scrollen, das kann der Browser besser: Wischen, Trackpad, Pfeiltasten,
   Tabulator und `prefers-reduced-motion` sind damit von allein richtig.

   DIE FORM (nachgemessen am nativen Bild von Seite 22, 1536 × 1024):

   Eine Broschüre hat keine geraden Kanten. Jede Seite wölbt sich zwischen
   Vorderschnitt und Falz nach oben durch und sackt unten entsprechend ab:

       Oberkante   132 → 115 (Scheitel) → 126 (FALZ) → 116 → 131
       Unterkante  980 → 994 (Bauch)    → ~995       → 983

   Das sind ein bis zwei Prozent der Höhe. Man sieht die Kurve nicht — man
   merkt nur, dass da nichts flach ist. Sie steckt im `clipPath`
   `#mayor-folha-papel` (functions.php), in objectBoundingBox-Einheiten,
   damit sie mit dem Kasten mitwächst.

   VIER LAGEN, in dieser Reihenfolge:
     1. Bühne  — trägt den Schlagschatten als `drop-shadow`, weil der der
                 BESCHNITTENEN Form folgen muss (ein `box-shadow` würde das
                 Rechteck werfen, und `clip-path` schnitte ihn ohnehin weg)
     2. Papier — Grundton, Blätterstapel links, Tönung der Verzeichnisseite
     3. Inhalt — Verzeichnis und Blätter
     4. Falz   — Knick und Schattierung ÜBER dem Inhalt, `multiply`, weil der
                 Knick auf Seite 22 auch über den Fotos liegt

   Die Kennzahlen aus der Messung, als Anteil der Heftbreite:
     Falz 55,3 %  ·  Schattenband 52–59 %  ·  Vorderschnitt 88,2 %
   ========================================================================== */

.mayor-caderno {
  /* Auf Entwurfsseite 22 laeuft das Heft von Rand zu Rand (98 % der Fensterbreite)
     und fuellt die Hoehe fast ganz aus. Mit dem Standard-Seitenrand von 72 px
     schwamm es in Creme und wirkte wie eine Abbildung statt wie ein Gegenstand.
     Deshalb hier ausdruecklich schmaler Rand. */
  padding: clamp(1rem, 2vw, 2rem) clamp(0.75rem, 1.5vw, 1.6rem) clamp(1.4rem, 2.6vw, 2.2rem);
  /* EIN Bund, in der Mitte. Der Entwurf zeigt rechts eine zweite Kante — ein
     aufgeschlagenes Heft hat aber genau eine Bindung (Stefan, vierte Runde).
     Die Form ist deshalb symmetrisch: zwei gleich grosse Seiten. */
  --mayor-falz: 50%;
}

/* 1 — Bühne */
.mayor-caderno__palco {
  filter:
    drop-shadow(0 18px 26px rgba(92, 61, 46, 0.16))
    drop-shadow(0 3px 6px rgba(92, 61, 46, 0.10));
}

/* 2 — Papier */
.mayor-caderno__livro {
  position: relative;
  display: grid;
  /* Höhe: das Heft soll mit der Punktreihe zusammen in den ersten Blick
     passen (Kopf 59 px + Ränder + Punktreihe ≈ 150 px). Im Entwurf hat das
     Heft das Seitenverhältnis 1520 : 881 = 1,73 — dem kommt das nahe. */
  min-height: clamp(420px, calc(100dvh - 200px), 900px);
  grid-template-columns: clamp(150px, 19%, 300px) minmax(0, 1fr);
  clip-path: url(#mayor-folha-papel);
  background-color: #FCF8F2;
  background-image:
    /* Blätterstapel an BEIDEN Aussenkanten — die geschlossenen Seiten unter
       der aufgeschlagenen. Drei Kanten je Seite, gemessen bei x = 0–2, 12–21,
       24–33 von 1520 px Heftbreite. */
    linear-gradient(
      90deg,
      rgba(92, 61, 46, 0.26) 0 0.1%,
      rgba(253, 250, 245, 1) 0.18% 0.6%,
      rgba(92, 61, 46, 0.10) 0.8% 1.3%,
      rgba(253, 250, 245, 1) 1.5% 2.2%,
      transparent 2.2%
    ),
    linear-gradient(
      270deg,
      rgba(92, 61, 46, 0.26) 0 0.1%,
      rgba(253, 250, 245, 1) 0.18% 0.6%,
      rgba(92, 61, 46, 0.10) 0.8% 1.3%,
      rgba(253, 250, 245, 1) 1.5% 2.2%,
      transparent 2.2%
    ),
    /* Ganz leichte Papierverläufe: zum Bund hin etwas wärmer, an den
       Aussenkanten etwas kühler — symmetrisch wie die Form. */
    linear-gradient(
      90deg,
      #F7F1E8 2.2%,
      #FBF6EE 12%,
      #FDFAF6 30%,
      #FBF6F0 var(--mayor-falz),
      #FDFAF6 70%,
      #FBF6EE 88%,
      #F7F1E8 100%
    );
}

/* 4 — Falz und Vorderschnitt, ÜBER dem Inhalt */
.mayor-caderno__livro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
  background-image:
    /* der Knick selbst */
    linear-gradient(
      90deg,
      transparent calc(var(--mayor-falz) - 0.75px),
      rgba(92, 61, 46, 0.22) var(--mayor-falz),
      transparent calc(var(--mayor-falz) + 0.75px)
    ),
    /* Die Wölbung beidseits des Knicks. Gemessen: 52–59 % der Heftbreite, in
       der Mitte rund 12 % dunkler. Viele Stufen, weil ein Verlauf mit drei
       Stopps eine sichtbare Kante bekommt — der erste Versuch sah aus wie ein
       aufgeklebter grauer Streifen. */
    /* SYMMETRISCH um den Bund. Die Stopps standen noch in der alten Reihenfolge
       (45 → 53,3 → 50 → 57,3 …); ein Stopp, der kleiner ist als sein Vorgänger,
       wird von CSS stillschweigend auf diesen hochgezogen. Der dunkelste Punkt
       lag dadurch bei 53,3 % statt bei 50. Gefunden nicht im Bild, sondern
       durch Ausmessen der Helligkeit quer durch das Papier. */
    linear-gradient(
      90deg,
      transparent 39.5%,
      rgba(92, 61, 46, 0.011) 43%,
      rgba(92, 61, 46, 0.03) 45.5%,
      rgba(92, 61, 46, 0.058) 47.8%,
      rgba(92, 61, 46, 0.085) var(--mayor-falz),
      rgba(92, 61, 46, 0.058) 52.2%,
      rgba(92, 61, 46, 0.03) 54.5%,
      rgba(92, 61, 46, 0.011) 57%,
      transparent 60.5%
    ),
    /* Aussenkanten: ganz sacht, damit die Seiten sich vom Grund abheben */
    linear-gradient(90deg, rgba(92, 61, 46, 0.05), transparent 3%),
    linear-gradient(270deg, rgba(92, 61, 46, 0.05), transparent 3%);
}

/* 3 — Verzeichnisseite */
.mayor-caderno__indice {
  position: relative;
  z-index: 1;
  padding: clamp(1.6rem, 3.4vw, 3rem) clamp(1rem, 2vw, 1.8rem) clamp(1.6rem, 3.4vw, 3rem) clamp(1.4rem, 2.6vw, 2.4rem);
}
.mayor-caderno__indice-item { margin: 0; position: relative; }
.mayor-caderno__indice-item + .mayor-caderno__indice-item {
  margin-top: clamp(0.6rem, 1.6vh, 1.4rem);
  padding-top: clamp(0.6rem, 1.6vh, 1.4rem);
  border-top: var(--mayor-linie);
}
.mayor-caderno__indice-item a {
  display: block;
  padding-block: 0.25rem;
  padding-right: 1.6rem;
  text-decoration: none;
  color: var(--wp--preset--color--castanho);
}
.mayor-caderno__indice-num {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.1;
  color: var(--wp--preset--color--castanho);
}
.mayor-caderno__indice-nome { display: block; font-size: clamp(0.82rem, 1vw, 0.98rem); line-height: 1.3; margin-top: 0.2rem; }
.mayor-caderno__indice-item a:hover .mayor-caderno__indice-nome { color: var(--wp--preset--color--terracota-profundo); }
.mayor-caderno__indice-item.is-actual a .mayor-caderno__indice-nome,
.mayor-caderno__indice-item.is-actual a .mayor-caderno__indice-num {
  color: var(--wp--preset--color--terracota-profundo);
}
/* Der Lesezeichen-Strich mit Punkt rechts neben der aktiven Zeile — auf
   Seite 22 das Merkmal, das die aktuelle Rubrik anzeigt. */
.mayor-caderno__indice-item.is-actual::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 0.6rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--wp--preset--color--terracota-profundo);
}
.mayor-caderno__indice-item.is-actual::before {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px -2px 0 0;
  border-radius: 50%;
  background: var(--wp--preset--color--terracota-profundo);
  z-index: 1;
}

/* 3 — Die Blätter */
.mayor-caderno__folhas {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  min-width: 0;
}
.mayor-caderno__folhas::-webkit-scrollbar { display: none; }

/* Volle Breite: seit der vierten Runde schaut kein nächstes Blatt mehr hervor
   — das las sich wie eine zweite Falte. Das Heft ist jetzt genau zwei Seiten. */
.mayor-caderno__folha {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: grid;
  /* Die Textspalte endet genau am Bund: (50 − 19) / 81 = 38,3 % der
     Blattbreite. Damit liegt links eine ganze Seite Text, rechts eine ganze
     Seite Bild — und der Knick läuft sauber dazwischen durch. */
  grid-template-columns: minmax(0, 38.3%) minmax(0, 61.7%);
  column-gap: clamp(0.8rem, 2vw, 2.2rem);
  align-items: stretch;
  padding: clamp(1.6rem, 3.2vw, 3rem) clamp(1.4rem, 3vw, 3rem) clamp(2rem, 3.4vw, 3rem) clamp(0.6rem, 0.9vw, 1rem);
}
/* Der Kopf füllt die Blatthöhe, damit das kleine Foto UNTEN sitzt — auf
   Seite 22 beginnt es bei 71 % der Blatthöhe, nicht auf halber Höhe. */
.mayor-caderno__cabeca {
  grid-column: 1;
  display: flex;
  flex-direction: column;
}
.mayor-caderno__folha h2 {
  margin: 0.3rem 0 0;
  font-size: clamp(1.7rem, 3.5vw, 3.8rem);
  line-height: 1.04;
  max-width: 11ch;
}
/* Der kurze goldene Strich unter der Überschrift (Seite 22). */
.mayor-caderno__folha h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  margin-top: clamp(0.7rem, 1.6vw, 1.2rem);
  background: var(--wp--preset--color--latao);
}
.mayor-caderno__lead { margin: clamp(0.9rem, 2vw, 1.6rem) 0 0; font-size: clamp(0.8rem, 1vw, 0.92rem); max-width: 28ch; }

/* Das kleine Foto sitzt unter dem Vorspann und schiebt sich nach rechts über
   den Falz — auf Seite 22 genau so. */
.mayor-caderno__foto-b {
  position: relative;
  width: 78%;
  max-width: none;
  margin: auto 0 0 38%;
  padding-top: clamp(1.6rem, 3.2vw, 2.8rem);
}
.mayor-caderno__foto-b img { width: 100%; height: clamp(120px, 14vw, 190px); object-fit: cover; }
/* Der goldene Umriss gehört hier nach RECHTS UNTEN (Seite 22), nicht wie sonst
   nach links oben — deshalb die Ausnahme statt der Standardregel. */
.mayor-caderno__foto-b::before {
  top: auto;
  left: auto;
  right: -16px;
  bottom: -16px;
}
/* Navy-Block, der links oben hervorschaut. Klein: auf Seite 22 ist er ein
   Akzent, keine Fläche. */
.mayor-caderno__foto-b::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -18px;
  top: -18px;
  width: 26%;
  height: 44%;
  background: var(--wp--preset--color--azul-noite);
}

/* Rechte Heftseite: grosses Foto, Karte darüber. */
.mayor-caderno__colagem {
  grid-column: 2;
  position: relative;
  align-self: stretch;
  display: flex;
  min-height: clamp(240px, 30vw, 430px);
  padding-top: clamp(0.6rem, 1.6vw, 1.8rem);
  padding-bottom: clamp(0.4rem, 1.2vw, 1.4rem);
}
/* Im Entwurf ist das grosse Foto 26,5 % der Heftbreite breit (44,9 → 71,4 %),
   nicht die ganze rechte Spalte. Die Karte steht DANEBEN und überlappt nur die
   rechte Kante. */
.mayor-caderno__foto {
  position: relative;
  width: 60%;
  align-self: stretch;
  margin: 0;
}
/* Das Bild absolut setzen, damit es NICHTS zur Höhe beiträgt. Mit
   `height: 100%` in einer Figur ohne feste Höhe fällt der Browser auf die
   Eigenhöhe des Bildes zurück — gemessen am 01.09.2026: 787 px statt 420, das
   Heft wuchs dadurch auf 1041 px und lief unten aus dem Fenster. */
.mayor-caderno__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
/* Goldener Umriss, der rechts unten hinter dem grossen Foto hervorsteht. */
.mayor-caderno__foto::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -22px;
  bottom: -22px;
  width: 74%;
  height: 76%;
  border: 1px solid var(--wp--preset--color--latao);
}
.mayor-caderno__cartao {
  position: absolute;
  right: 1.5%;
  top: 20%;
  width: min(42%, 300px);
  padding: clamp(1.1rem, 1.8vw, 1.6rem);
  box-shadow: 0 22px 46px -26px rgba(92, 61, 46, 0.65);
  z-index: 3;
}
.mayor-caderno__cartao h3 { margin: 0.35rem 0 0; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.14; }
.mayor-caderno__cartao h3 a { color: inherit; text-decoration: none; }
.mayor-caderno__cartao h3 a:hover { color: var(--wp--preset--color--terracota-profundo); }
.mayor-caderno__cartao p { font-size: 0.78rem; margin: 0.5rem 0 0; }
.mayor-caderno__breve { font-style: italic; }

/* Die Zeile unter dem Heft: Hinweis, fuenf Punkte, Pfeil — wie auf Seite 22.
   Die Punkte sind echte Sprungmarken auf die Blaetter, keine Zierpunkte:
   ohne JavaScript springen sie, mit JavaScript blaettern sie. */
/* WordPress' Flow-Layout gibt jedem Kind ausser dem ersten `margin-block-start`.
   In dieser Flex-Zeile schob das die Punkte um 24 px nach unten, waehrend die
   Linie mittig blieb — dieselbe Falle wie bei „Cinco formas de descobrir". */
.mayor-caderno__navegar > * { margin-block: 0; }
.mayor-caderno__navegar {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.3rem);
  margin-top: clamp(0.9rem, 2vw, 1.6rem);
  padding-inline: clamp(1rem, 4vw, 4rem);
}
.mayor-caderno__dica {
  margin: 0;
  font-size: 0.82rem;
  color: var(--wp--preset--color--castanho-quente);
  white-space: nowrap;
}
.mayor-caderno__pontos {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.2vw, 2rem);
}
.mayor-caderno__ponto { margin: 0; }
.mayor-caderno__ponto a {
  display: block;
  width: 22px;
  height: 22px;
  position: relative;
}
.mayor-caderno__ponto a::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--wp--preset--color--latao-escuro);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.mayor-caderno__ponto a:hover::after { transform: scale(1.35); }
.mayor-caderno__ponto.is-actual a::after {
  background: var(--wp--preset--color--terracota-profundo);
  transform: scale(1.35);
}
/* Die Linie, auf der die Punkte sitzen. Der gemalte Pfeil am Ende ist seit
   dem 01.09.2026 weg: daneben steht jetzt ein ECHTER Knopf, und ein zweiter,
   gezeichneter Pfeil daneben hätte nur so ausgesehen, als könnte man ihn
   drücken. */
.mayor-caderno__navegar::after {
  content: "";
  order: 1;
  flex: 1;
  height: 1px;
  min-width: 40px;
  background: var(--wp--preset--color--latao);
}

/* Die beiden Blätterpfeile. Sie stehen bewusst UNTER dem Heft und nicht darauf:
   über der linken Seite läge ein Pfeil auf dem Rubrikenverzeichnis, über der
   rechten auf der Artikelkarte. Hier stören sie nichts und sind trotzdem das
   Erste, was man sucht, wenn man blättern will. */
.mayor-caderno__folhear {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(107, 66, 38, 0.3);
  border-radius: 50%;
  background: var(--wp--preset--color--marfim);
  color: var(--wp--preset--color--castanho);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}
.mayor-caderno__folhear svg { width: 15px; height: 15px; }
.mayor-caderno__folhear--anterior { order: -1; }
.mayor-caderno__folhear--proxima { order: 2; }
.mayor-caderno__folhear:hover:not(:disabled) {
  border-color: var(--wp--preset--color--castanho-quente);
  background: var(--wp--preset--color--marfim-quente);
  color: var(--wp--preset--color--terracota-profundo);
}
.mayor-caderno__folhear:disabled {
  opacity: 0.3;
  cursor: default;
}
.mayor-caderno__pontos::before {
  content: "";
  width: clamp(10px, 3vw, 40px);
  height: 1px;
  background: var(--wp--preset--color--terracota-profundo);
}

/* Verweis mit Pfeil — „Ler o artigo" */
.mayor-ligacao-seta { margin-top: 0.9rem !important; }
.mayor-ligacao-seta a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--terracota-profundo);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.mayor-ligacao-seta a::after {
  content: "";
  width: 34px;
  height: 8px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='8' viewBox='0 0 34 8'%3E%3Cpath d='M0 4h30M26 1l3.5 3-3.5 3' fill='none' stroke='%23A85539' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center;
  transition: width 0.25s ease;
}
.mayor-ligacao-seta a:hover::after { width: 46px; }

/* Schmale Schirme: aus dem Heft wird eine schlichte Karte. Ein aufgeschlagenes
   Heft mit Falz ergibt auf 390 px keinen Sinn — dort ist ohnehin nur eine
   Seite sichtbar, und der Knick liefe mitten durch den Text. */
@media (max-width: 900px) {
  .mayor-caderno__palco { filter: drop-shadow(0 10px 18px rgba(92, 61, 46, 0.14)); }
  .mayor-caderno__livro {
    grid-template-columns: 1fr;
    clip-path: none;
    background-image: none;
    background-color: #FCF8F2;
    border-radius: 2px;
  }
  .mayor-caderno__livro::after { display: none; }
  .mayor-caderno__indice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    border-bottom: var(--mayor-linie);
    padding: 1rem 1.2rem;
  }
  .mayor-caderno__indice-item + .mayor-caderno__indice-item {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .mayor-caderno__indice-item a { display: flex; gap: 0.4rem; align-items: baseline; padding-right: 0; }
  .mayor-caderno__indice-num { font-size: 1rem; }
  .mayor-caderno__indice-nome { margin-top: 0; }
  .mayor-caderno__indice-item.is-actual::after { display: none; }
  .mayor-caderno__folha { grid-template-columns: 1fr; padding: 1.4rem 1.2rem 2rem; }
  .mayor-caderno__cabeca,
  .mayor-caderno__colagem { grid-column: 1; }
  .mayor-caderno__foto-b { width: 100%; margin-top: 1.4rem; }
  .mayor-caderno__foto-b::after { display: none; }
  .mayor-caderno__foto::after { display: none; }
  .mayor-caderno__cartao { position: static; width: 100%; margin-top: 1rem; }
  .mayor-caderno__livro { min-height: 0; }
  /* Die Collage ist auf dem Schirm ein FLEX-Kasten (Foto links, Karte
     darüber). Wird die Karte mobil statisch, steht sie als zweites Flex-Kind
     NEBEN dem Foto und drückt es auf die halbe Breite — sichtbar war dann nur
     noch der terracotta Zierrahmen. Deshalb hier wieder normaler Fluss. */
  .mayor-caderno__colagem {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .mayor-caderno__foto { width: 100%; }
  /* `relative`, NICHT `static`: der Zierrahmen ist ein absolut gesetztes
     ::before. Ein statisches Bild wird von jedem positionierten Element
     übermalt, egal welchen z-index es trägt — sichtbar war dann nur der
     terracotta Rahmen, das Foto lag darunter. */
  .mayor-caderno__foto img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; }
  .mayor-caderno__foto-b { width: 100%; margin: 1.4rem 0 0; padding-top: 0; }
  /* Ohne Falz gibt es auch keinen Vorderschnitt — das nächste Blatt braucht
     auf 390 px nicht hervorzuschauen, es kostet nur 15 % Platz. */
  .mayor-caderno__folha { flex: 0 0 100%; }
  .mayor-caderno__navegar { padding-inline: 0; flex-wrap: wrap; }
  .mayor-caderno__navegar::after { display: none; }
}

/* --------------------------------------------------------------------------
   Notebook — „Um caderno aberto", „Cinco formas", „A primeira página"
   -------------------------------------------------------------------------- */

.mayor-caderno-aberto .mayor-moldura { width: 100%; }
.mayor-caderno-aberto .mayor-moldura img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 28%; }

.mayor-formas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.5vw, 1.4rem);
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  text-align: left;
}
.mayor-formas > * { margin-block: 0; }
.mayor-forma {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--marfim);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}
.mayor-forma__foto { margin: 0 0 clamp(0.8rem, 1.6vw, 1.2rem); }
.mayor-forma__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.mayor-forma__foto a { display: block; }
.mayor-forma > :not(.mayor-forma__foto) { padding-inline: clamp(0.8rem, 1.6vw, 1.2rem); }
.mayor-forma .mayor-numero { margin: 0; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1; }
.mayor-forma h3 { margin: 0.35rem 0 0.6rem; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.15; }
.mayor-forma h3 a { color: inherit; text-decoration: none; }
.mayor-forma h3 a:hover { color: var(--wp--preset--color--terracota-profundo); }
.mayor-forma__texto { font-size: 0.78rem; line-height: 1.5; margin: 0 0 auto; }
.mayor-forma__texto::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  background: var(--wp--preset--color--latao);
}

@media (max-width: 1000px) {
  .mayor-formas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mayor-formas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mayor-caderno__etiqueta {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--castanho-quente);
  margin-bottom: 0.9rem;
}
.mayor-caderno__etiqueta::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-top: 0.5rem;
  background: var(--wp--preset--color--latao);
}
.mayor-primeira-pagina .mayor-moldura { width: 100%; max-width: 440px; margin-left: auto; }
.mayor-primeira-pagina .mayor-moldura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
.mayor-primeira-pagina h2 { margin: 0.2rem 0 0.8rem; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.1; }
.mayor-primeira-pagina h2 a { color: inherit; text-decoration: none; }
.mayor-primeira-pagina h2 a:hover { color: var(--wp--preset--color--terracota-profundo); }

.mayor-caderno-fecho .mayor-moldura { width: 100%; max-width: 480px; margin-left: auto; }
.mayor-caderno-fecho .mayor-moldura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
}
.mayor-caderno-fecho h2 { margin: 0 0 0.8rem; }

.mayor-artigos-seccao .mayor-artigos { text-align: left; margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* Rubriken als Reihe — auf dem Kategorie-Archiv, damit man von dort nicht nur
   zurueck, sondern auch seitwaerts kommt (Stefan, 01.09.2026: das Archiv hatte
   gar keinen Weg heraus). */
.mayor-rubricas-fila {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 1.4rem 0 0;
  padding: 0;
}
.mayor-rubricas-fila li { margin: 0; }
.mayor-rubricas-fila a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--wp--preset--color--castanho);
  border: 1px solid rgba(107, 66, 38, 0.22);
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.mayor-rubricas-fila a:hover {
  border-color: var(--wp--preset--color--castanho-quente);
  color: var(--wp--preset--color--terracota-profundo);
}
.mayor-rubricas-fila .current-cat > a {
  background: var(--wp--preset--color--marfim);
  border-color: var(--wp--preset--color--terracota-profundo);
  color: var(--wp--preset--color--terracota-profundo);
}

/* ==========================================================================
   Beitrag und Archiv
   ========================================================================== */

.mayor-artigo-cabeca { text-align: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.mayor-artigo-cabeca h1 { margin: 0.5rem 0; max-width: 22ch; margin-inline: auto; }
.mayor-artigo-cabeca .mayor-kicker a { color: inherit; text-decoration: none; }
.mayor-artigo__data { font-size: 0.82rem; color: var(--wp--preset--color--castanho); opacity: 0.75; }

.mayor-artigo-corpo { padding-block: clamp(2rem, 4vw, 3rem); }
.mayor-artigo__capa { margin-bottom: 2.5rem; }
.mayor-artigo__capa img { width: 100%; object-fit: cover; }
.mayor-artigo-corpo p { max-width: 68ch; }
.mayor-artigo-corpo h2,
.mayor-artigo-corpo h3 { margin-top: 2.2rem; }

.mayor-artigo-pe { text-align: center; }
.mayor-artigo-pe .wp-block-buttons { justify-content: center; margin-top: 1rem; }

/* Archiv-/Suchkopf */
.wp-block-query-title { margin-bottom: 0.4rem; }
.wp-block-query-pagination a { color: var(--wp--preset--color--castanho); text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--terracota); font-weight: 500; }

/* Zitatblock auf "Sobre mim": das Zitat trägt die Fläche, das Foto begleitet
   nur — deshalb ein enges Zeilenmaß und ein Deckel auf der Bildbreite. */
.mayor-citacao-bloco--sobre .mayor-citacao p { max-width: 17ch; }
.mayor-citacao-bloco--sobre .mayor-citacao + p { max-width: 40ch; margin-top: 1.4rem; }
.mayor-citacao-bloco--sobre .mayor-moldura { max-width: 340px; margin-left: auto; }

/* Absendeknopf: Marfim auf Terracota ergibt nur 3.33:1 — der Text ist 13 px
   und braucht 4.5:1. Auf Azul noite sind es 14.45:1. Gerechnet, nicht
   geschätzt; der Grund ändert hier nichts, beide Farben gehören dem Knopf.
   ACHTUNG: dieselbe Schwäche steckt im Live-Theme (`assets/css/kontakt.css`,
   `.mayor-formbtn`) — dort noch offen. */
.mayor-kontakt .mayor-formbtn {
  background: var(--wp--preset--color--azul-noite);
  color: #FFFFFF;
}
/* Derselbe Wechsel wie bei allen anderen Knöpfen — der Absendeknopf soll sich
   nicht anders verhalten als der Rest. */
.mayor-kontakt .mayor-formbtn:hover {
  background: var(--wp--preset--color--azul-profundo);
}
.mayor-contacto__formulario .mayor-kontakt__inner { max-width: 62ch; margin-inline: auto; }
.mayor-contacto__formulario .mayor-form { margin-inline: auto; }

/* ==========================================================================
   Wegweiser als linke Spalte — wie im Notebook
   --------------------------------------------------------------------------
   Vorher eine klebende Leiste unter dem Kopf. Als Seitenmenue links ist die
   Fuehrung ueber die ganze Website hinweg dieselbe (Stefan, 31.08.).
   ========================================================================== */

.mayor-servico-pagina { padding-block: clamp(1.8rem, 3.2vw, 3rem); }
.mayor-servico__grelha { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; margin-block: 0 !important; }
.mayor-servico__grelha > .wp-block-column { min-width: 0; }

.mayor-servico__lado {
  position: sticky;
  top: calc(var(--mayor-cabecalho-altura, 70px) + 2rem);
  align-self: flex-start;
}

.mayor-indice-servicos__voltar {
  display: block;
  margin-bottom: 1.2rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--terracota-profundo);
  text-decoration: none;
}
.mayor-indice-servicos__voltar:hover { text-decoration: underline; }

.mayor-indice-servicos__lista { list-style: none; margin: 0; padding: 0; }
.mayor-indice-servicos__lista li { border-bottom: var(--mayor-linie); }
.mayor-indice-servicos__lista a {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.75rem 0.8rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mayor-indice-servicos__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: 0.95rem;
  /* 15,2 px — Latão escuro läge bei 3.50, gefordert sind 4.5 */
  color: var(--wp--preset--color--castanho-quente);
  flex: 0 0 auto;
}
.mayor-indice-servicos__nome {
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--wp--preset--color--castanho);
}
/* Deckende Fläche statt rgba: halbtransparente Gründe lassen sich nicht
   zuverlässig auf Kontrast prüfen — weder von mir noch von Prüfwerkzeugen. */
.mayor-indice-servicos__lista a:hover,
.mayor-indice-servicos__lista .is-actual a {
  background: var(--wp--preset--color--veu-rosa);
  border-left-color: var(--wp--preset--color--terracota);
}
.mayor-indice-servicos__lista .is-actual .mayor-indice-servicos__nome,
.mayor-indice-servicos__lista .is-actual .mayor-indice-servicos__num {
  color: var(--wp--preset--color--terracota-profundo);
}

@media (max-width: 900px) {
  .mayor-servico__grelha { display: block; }
  .mayor-servico__lado { position: static; margin-bottom: 2rem; }
  .mayor-indice-servicos__lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .mayor-indice-servicos__lista li { border-bottom: none; }
  .mayor-indice-servicos__lista a { padding: 0.5rem 0.7rem; border: var(--mayor-linie); border-left-width: 3px; }
}

/* ==========================================================================
   Notebook-Beitrag mit stehender Rubrikenspalte
   ========================================================================== */

.mayor-artigo__grelha { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: flex-start; }
.mayor-artigo__grelha > .wp-block-column { min-width: 0; }

/* `align-self` muss auf das Element selbst: ein Flex-Kind streckt sich sonst
   auf die volle Hoehe der Reihe und hat als sticky keinen Weg mehr.
   Gemessen: Spalte 1737 px = Reihe 1737 px, also null Spielraum. */
.mayor-artigo__lado {
  position: sticky;
  top: calc(var(--mayor-cabecalho-altura, 70px) + 2rem);
  align-self: flex-start;
}
.mayor-artigo__lado-titulo { margin: 0 0 0.2rem; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.mayor-artigo__lado-titulo a { color: inherit; text-decoration: none; }
.mayor-artigo__lado-titulo a:hover { color: var(--wp--preset--color--terracota); }
.mayor-artigo__lado-sub { font-size: 0.85rem; margin: 0 0 1.4rem; }
.mayor-artigo__voltar { margin-top: 1.4rem; font-size: 0.84rem; }
.mayor-artigo__voltar a { color: var(--wp--preset--color--terracota-profundo); text-decoration: none; }
.mayor-artigo__voltar a:hover { text-decoration: underline; }

/* core/categories trägt eigene Klassen — auf die Sidebar-Optik bringen */
.mayor-artigo__lado .wp-block-categories { list-style: none; margin: 0; padding: 0; }
.mayor-artigo__lado .wp-block-categories li { border-bottom: var(--mayor-linie); }
.mayor-artigo__lado .wp-block-categories a {
  display: block;
  padding: 0.7rem 0.8rem;
  text-decoration: none;
  color: var(--wp--preset--color--castanho);
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mayor-artigo__lado .wp-block-categories a:hover,
.mayor-artigo__lado .wp-block-categories .current-cat > a {
  background: rgba(212, 133, 109, 0.16);
  border-left-color: var(--wp--preset--color--terracota);
  color: var(--wp--preset--color--terracota);
}

/* ==========================================================================
   Artikel — Bandeira oben rechts und die beiden Blätterpfeile
   --------------------------------------------------------------------------
   Stefan, 01.09.2026 (fünfte Runde): innerhalb einer Rubrik soll man mit
   Pfeilen links und rechts weiterblättern können, und oben rechts sollen das
   Veröffentlichungsdatum und eine Vorschau auf den nächsten Beitrag stehen.

   Aufteilung: Die INFORMATION steht in der Bandeira (Datum, Bild, Titel), die
   BEDIENUNG in den Pfeilen. Ein Pfeil, der beim Überfahren seinen Titel
   ausklappt, ist ein Bonus — nicht der einzige Weg an die Auskunft.
   ========================================================================== */

/* Reihe 1: links Rubrik und Titel, rechts die Bandeira. Alles darunter läuft
   über die volle Breite — sonst wäre der Fliesstext dauerhaft schmaler. */
.mayor-artigo__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1.2rem, 3vw, 2.6rem);
}
.mayor-artigo__corpo > .mayor-kicker,
.mayor-artigo__corpo > .wp-block-post-title { grid-column: 1; }
.mayor-artigo__bandeira { grid-column: 2; grid-row: 1 / 3; }
.mayor-artigo__corpo > :not(.mayor-artigo__bandeira):not(.mayor-kicker):not(.wp-block-post-title) {
  grid-column: 1 / -1;
}

.mayor-artigo__bandeira {
  width: clamp(150px, 20vw, 230px);
  text-align: right;
  padding-left: clamp(0.8rem, 2vw, 1.6rem);
  border-left: var(--mayor-linie);
}
.mayor-artigo__bandeira .mayor-artigo__data {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--castanho-quente);
  opacity: 1;
}
.mayor-artigo__seguinte {
  display: block;
  margin-top: clamp(0.9rem, 2vw, 1.4rem);
  padding-top: clamp(0.7rem, 1.6vw, 1.1rem);
  border-top: var(--mayor-linie);
  text-decoration: none;
  color: inherit;
}
.mayor-artigo__seguinte-rotulo {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terracota-profundo);
  margin-bottom: 0.5rem;
}
.mayor-artigo__seguinte-corpo { display: flex; gap: 0.7rem; align-items: flex-start; justify-content: flex-end; }
.mayor-artigo__seguinte-foto {
  width: 48px;
  height: 60px;
  object-fit: cover;
  flex: 0 0 auto;
  order: 2;
}
.mayor-artigo__seguinte-titulo {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(0.92rem, 1.2vw, 1.1rem);
  line-height: 1.2;
  color: var(--wp--preset--color--castanho);
}
.mayor-artigo__seguinte:hover .mayor-artigo__seguinte-titulo { color: var(--wp--preset--color--terracota-profundo); }
.mayor-artigo__seguinte:hover .mayor-artigo__seguinte-foto { filter: brightness(1.06); }

/* --- Die beiden Pfeile ----------------------------------------------------
   Sie stehen im Markup am ENDE des Artikels. Das ist die richtige Reihenfolge
   für Tastatur und Vorlesegeräte — erst der Text, dann der Weg weiter. Auf
   breiten Schirmen hebt CSS sie an die Fensterränder; darunter bleiben sie
   einfach stehen, wo sie sind, und werden zu einem normalen Blätterpaar. */

.mayor-artigo__setas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: clamp(2rem, 4vw, 3rem) 0 clamp(1.4rem, 3vw, 2.2rem);
  padding-top: clamp(1.2rem, 2.6vw, 2rem);
  border-top: var(--mayor-linie);
}
.mayor-seta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--wp--preset--color--castanho);
  max-width: 46%;
}
.mayor-seta--proximo { margin-left: auto; flex-direction: row-reverse; text-align: right; }
.mayor-seta__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(107, 66, 38, 0.3);
  border-radius: 50%;
  background: var(--wp--preset--color--marfim);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mayor-seta__icone svg { width: 17px; height: 17px; }
.mayor-seta:hover .mayor-seta__icone {
  border-color: var(--wp--preset--color--castanho-quente);
  background: var(--wp--preset--color--marfim-quente);
}
.mayor-seta__rotulo {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terracota-profundo);
}
.mayor-seta__titulo {
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.2;
  margin-top: 0.2rem;
}
.mayor-seta:hover .mayor-seta__titulo { color: var(--wp--preset--color--terracota-profundo); }

/* Ab 1180 px an die Fensterränder — links und rechts neben dem Text, wie die
   Blätterkanten eines Hefts. Der Titel klappt beim Überfahren auf; die
   Auskunft selbst steht ohnehin oben rechts in der Bandeira. */
@media (min-width: 1180px) {
  /* Der Artikel rueckt zur Seite, damit die Pfeile eine eigene Gasse haben.
     Ohne das sassen sie bei 1440 px auf dem „Voltar ao Notebook" der
     Seitenspalte — 72 px Seitenrand reichen fuer einen 62-px-Kreis nicht. */
  .mayor-artigo { padding-inline: clamp(88px, 7vw, 150px); }
  .mayor-artigo__setas {
    display: contents;
  }
  .mayor-seta {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    max-width: none;
    padding: 0.5rem;
  }
  .mayor-seta--anterior { left: clamp(0.4rem, 1.4vw, 1.4rem); }
  .mayor-seta--proximo { right: clamp(0.4rem, 1.4vw, 1.4rem); margin-left: 0; }
  .mayor-seta__icone {
    background: rgba(250, 246, 239, 0.92);
    box-shadow: 0 6px 18px -10px rgba(92, 61, 46, 0.55);
  }
  /* Der Titel liegt zusammengefaltet neben dem Pfeil und klappt auf. `width`
     zu animieren ist hier richtig und nicht teuer: das Element steht in einer
     eigenen Ebene (`position: fixed`), es reisst also kein Seitenlayout mit. */
  .mayor-seta__texto {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 0.28s ease, opacity 0.22s ease;
  }
  .mayor-seta:hover .mayor-seta__texto,
  .mayor-seta:focus-visible .mayor-seta__texto {
    width: clamp(140px, 15vw, 210px);
    opacity: 1;
  }
  .mayor-seta:hover,
  .mayor-seta:focus-visible {
    background: rgba(250, 246, 239, 0.96);
    border-radius: 30px;
    box-shadow: 0 8px 24px -12px rgba(92, 61, 46, 0.5);
  }
}

@media (max-width: 780px) {
  .mayor-artigo__corpo { display: block; }
  .mayor-artigo__bandeira {
    width: 100%;
    text-align: left;
    padding: 0 0 0.9rem;
    margin-bottom: 1.2rem;
    border-left: none;
    border-bottom: var(--mayor-linie);
  }
  .mayor-artigo__seguinte-corpo { justify-content: flex-start; }
  .mayor-artigo__seguinte-foto { order: 0; }
  .mayor-seta { max-width: none; flex: 1 1 100%; }
  .mayor-seta--proximo { flex-direction: row; text-align: left; }
}

.mayor-artigo__corpo .mayor-kicker { margin-bottom: 0.4rem; }
.mayor-artigo__corpo .mayor-kicker a { color: inherit; text-decoration: none; }
.mayor-artigo__corpo h1 { margin: 0 0 0.5rem; max-width: 24ch; }
/* Der Deckel gehoert auf das <figure>, nicht auf das <img>.
   core/post-featured-image legt das Seitenverhaeltnis auf die FIGUR und laesst
   das Bild mit height:100% darin sitzen. Begrenzt man nur das Bild, schrumpft
   es — die Figur behaelt ihre Hoehe, und darunter klafft leerer Raum.
   Gemessen am 31.08.2026: Bild 380 px, Figur 563 px, Luecke 183 px. */
/* `width` muss mit: setzt man nur die Hoehe, treibt das Seitenverhaeltnis des
   Blocks die BREITE — auf 390 px Viewport wurde die Figur 676 px breit und
   die Seite lief waagerecht ueber. */
.mayor-artigo__corpo .mayor-artigo__capa {
  margin: 1.8rem 0 2rem;
  width: 100%;
  height: clamp(200px, 42vw, 380px);
}
.mayor-artigo__corpo .mayor-artigo__capa img { width: 100%; height: 100%; object-fit: cover; }
.mayor-artigo__corpo p { max-width: 66ch; }
.mayor-artigo__corpo .wp-block-buttons { margin-top: 2.5rem; }

@media (max-width: 860px) {
  .mayor-artigo__grelha { display: block; }
  .mayor-artigo__lado { position: static; margin-bottom: 2rem; }
}

/* ==========================================================================
   Kein Abstand zwischen Kopf, Inhalt und Fuß
   --------------------------------------------------------------------------
   WordPress setzt auf die obersten Bloecke einen Abstand:
   `:where(.wp-site-blocks) > * { margin-block-start: var(--wp--style--block-gap) }`.
   Das ergab einen 24 px hohen Streifen unter dem Kopf und einen zweiten ueber
   dem Fuss, in denen der Seitengrund durchschien — bei diesem Entwurf tragen
   die Abschnitte ihre Polsterung selbst, der Abstand ist also nur Stoerung.
   `:where()` hat Spezifitaet 0, eine einfache Klasse genuegt zum Ueberschreiben.
   ========================================================================== */

.wp-site-blocks > * { margin-block-start: 0; }

/* ==========================================================================
   Abschnitte aus der Live-Copy (31.08., vierte Runde)
   ========================================================================== */

/* Manifest — seit 01.09.2026 auf "Sobre mim", als Vorspann zu den Grundsaetzen */
.mayor-manifesto__texto {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.45;
  color: var(--wp--preset--color--azul-noite);
  max-width: 46ch;
  margin: 0.6rem auto 0 !important;
}
/* Das Manifest ist jetzt der Vorspann zu „Aquilo em que acredito" — die
   Ueberschrift braucht danach Luft, sonst klebt sie an der Signatur. */
.mayor-manifesto__autor + .wp-block-heading { margin-top: 2.6rem; }
.mayor-manifesto__autor {
  margin-top: 1.2rem !important;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--latao-escuro);
}

/* Testemunhos */
.mayor-testemunhos { gap: clamp(1.5rem, 3.5vw, 3rem); margin-top: 2rem !important; }
.mayor-testemunhos > .wp-block-column { min-width: 0; }
.mayor-testemunho { border: none; margin: 0; padding: 0; }
.mayor-testemunho p {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.45;
  color: var(--wp--preset--color--azul-noite);
  margin: 0;
}
.mayor-testemunho::before {
  content: "\201C";
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-size: 2.6rem;
  line-height: 0.7;
  color: var(--wp--preset--color--terracota);
  margin-bottom: 0.5rem;
}
.mayor-testemunho__autor {
  margin-top: 0.9rem !important;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--latao-escuro);
}

/* "Acompanhar é mais do que aconselhar" auf Sobre mim */
.mayor-acompanhar__linha {
  max-width: 52ch;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--lead);
}
.mayor-acompanhar__linha:nth-of-type(2) {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--wp--preset--color--terracota);
}

/* Rhythmus-Absatz unter den Serviços */
.mayor-ritmo__texto { max-width: 56ch; margin-inline: auto; }
.mayor-ritmo__texto:first-of-type {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: var(--wp--preset--color--azul-noite);
  margin-bottom: 1rem !important;
}

/* Aufklappbare FAQ / Termos (core/details) */
.mayor-detalhe {
  border-bottom: var(--mayor-linie);
  padding: 0;
  text-align: left;
}
.mayor-detalhe summary {
  padding: 1rem 0;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--wp--preset--color--azul-noite);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.mayor-detalhe summary::-webkit-details-marker { display: none; }
.mayor-detalhe summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--wp--preset--color--terracota);
  transition: transform 0.25s ease;
  flex: 0 0 auto;
}
.mayor-detalhe[open] summary::after { transform: rotate(45deg); }
.mayor-detalhe p { margin: 0 0 1.1rem; font-size: 0.9rem; max-width: 68ch; }

/* Notebook-Untertitel */
.mayor-notebook__sub { font-size: 0.86rem; margin-top: 0.5rem !important; }

/* Encontros: erklärende Blöcke, Eckdaten */
.mayor-encontros__blocos { gap: clamp(1.5rem, 4vw, 3.5rem); }
.mayor-encontros__blocos h3 { margin: 0.3rem 0 0.6rem; font-size: 1.35rem; }
.mayor-encontros__blocos .mayor-numero { font-size: 1.8rem; }
.mayor-encontros__dados {
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  border-block: var(--mayor-linie);
  padding-block: 1.4rem;
}
.mayor-encontros__dado { margin: 0 !important; font-size: 0.95rem; text-align: center; }
.mayor-encontros__dado strong {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--latao);
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.mayor-encontros__nota {
  margin-top: 1.2rem !important;
  font-size: 0.85rem;
  color: var(--wp--preset--color--terracota);
}

/* ==========================================================================
   Lesbarkeit kleiner Texte auf hellem Grund
   --------------------------------------------------------------------------
   Gerechnet gegen Marfim / Marfim quente / Véu rosa:
     Latão          #B8934A = 2.53–2.67   durchgefallen
     Latão escuro   #A67C3D = 3.32–3.50   durchgefallen (Text)
     Terracota      #C4715A = 3.16–3.33   durchgefallen
     Terracota prof.#A85539 = 4.60–4.84   ok
     Castanho quente#6B4226 = 7.61–8.01   ok
   Betroffen war ausschliesslich KLEINER Text — Etiketten, Notizen, Namen.
   Die grossen Zierziffern bleiben bewusst unveraendert, das waere ein
   Eingriff in Marias Gestaltung (siehe Projektnotiz).
   ========================================================================== */

.mayor-kicker,
.mayor-servico__nota,
.mayor-encontros__nota,
.mayor-encontro--breve,
.mayor-sobre__subtitulo,
.mayor-cartao-servico__preco { color: var(--wp--preset--color--terracota-profundo); }

.mayor-testemunho__autor,
.mayor-manifesto__autor,
.mayor-artigo__rubrica,
.mayor-artigo__rubrica a,
.mayor-encontros__dado strong,
.mayor-contacto__dado strong { color: var(--wp--preset--color--castanho-quente); }

/* Der Preis ist die wichtigste Zahl der Seite — 46 px, also gilt 3:1.
   Latão liegt bei 2.56, Latão escuro bei 3.50. */
.mayor-servico__preco { color: var(--wp--preset--color--latao-escuro); }

/* Die frühere Ausnahme für den waagerechten Wegweiser ist entfallen — er ist
   jetzt Text im Seitenmenü und trägt Castanho quente (siehe oben). Die Regel
   stand HINTER der Definition und hat sie still überschrieben. */


/* ==========================================================================
   Serviço-Detailseite — aufgeräumt (31.08., fünfte Runde)
   --------------------------------------------------------------------------
   Stefans Befund: zu viel los, Breiten springen zwischen voll und halb, die
   Abstände treiben die Seite in die Scrolltiefe, der Farbklotz am Schluss
   überrascht, und die Reihenfolge stimmte nicht.
   Gemessen vorher: 10 Abschnitte, 5940 px, Innenbreiten 1296/980/1120/780,
   jeder Abschnitt 72 px Polsterung oben und unten.
   ========================================================================== */

/* EIN Maß für alle Abschnitte — das war die Hauptunruhe. */
.mayor-medida > * {
  max-width: 1120px;
  margin-inline: auto;
}
.mayor-medida { padding-block: clamp(1.8rem, 3.2vw, 3rem); }

/* Rabatt ist eine Information, kein zweiter Handlungsaufruf */
.mayor-servico__desconto {
  margin: 0.1rem 0 0 !important;
  font-size: 0.9rem;
  color: var(--wp--preset--color--castanho-quente);
}
.mayor-servico__nota {
  margin: 0.35rem 0 0 !important;
  font-size: 0.82rem;
  color: var(--wp--preset--color--castanho-quente);
}
.mayor-servico__hero .wp-block-buttons { margin-top: 1.4rem; }

/* Kleingedrucktes direkt unter dem Preis */
.mayor-termos { margin-top: 1.4rem; border-bottom: none; }
.mayor-termos > summary { font-size: 0.82rem; color: var(--wp--preset--color--castanho-quente); padding: 0.5rem 0; }
.mayor-termos .mayor-termo {
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0 0 0.6rem;
  max-width: 46ch;
  color: var(--wp--preset--color--castanho);
}
.mayor-termos .mayor-termo strong { color: var(--wp--preset--color--azul-noite); }

/* Abschluss: Handlungsaufruf links, Stimmen rechts */
.mayor-fecho-servico { gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.mayor-fecho-servico > .wp-block-column { min-width: 0; }
.mayor-fecho-servico .mayor-fecho__texto { text-align: left; margin: 0 0 0.8rem; max-width: 22ch; }
.mayor-fecho__preco {
  font-family: var(--wp--preset--font-family--display);
  /* 25,6 px: ab 24 px gilt die 3:1-Schwelle, Latão escuro liegt bei 3.36.
     Bei den vorherigen 22,4 px hätte es 4.5 gebraucht und wäre gerissen. */
  font-size: 1.6rem;
  color: var(--wp--preset--color--latao-escuro);
  margin: 0 0 1.2rem !important;
}
.mayor-fecho-servico .wp-block-buttons { justify-content: flex-start; }

/* Halbbreites Karussell mit den Kundenstimmen */
.mayor-vozes { gap: 1.2rem; margin-top: 0; }
.mayor-voz {
  flex: 0 0 auto;
  width: min(300px, 78vw);
  padding: 1.4rem 1.5rem;
  background: var(--wp--preset--color--marfim);
  border: var(--mayor-linie);
}
.mayor-voz .mayor-testemunho p { font-size: 1.05rem; }
.mayor-voz .mayor-testemunho::before { font-size: 2rem; margin-bottom: 0.3rem; }
.mayor-voz .mayor-testemunho__autor { margin-top: 0.7rem !important; }

@media (max-width: 860px) {
  .mayor-fecho-servico { display: block; }
  .mayor-fecho-servico > .wp-block-column + .wp-block-column { margin-top: 2rem; }
}

/* FAQ steht jetzt am Ende. Auch sie folgt dem einen Maß — begrenzt wird
   stattdessen die Textzeile der Antwort, nicht der Kasten. */
/* Kein eigenes max-width — sonst schlaegt es das Maß aus .mayor-medida.
   Begrenzt wird nur die Textzeile der Antwort. */
.mayor-acordeao .mayor-detalhe p { max-width: 72ch; }


/* Die Abschnitte sitzen jetzt in der rechten Spalte — der Seitenrand kommt
   von der Seite selbst, nicht mehr von jedem Abschnitt. */
.mayor-servico__corpo .mayor-seccao { padding-inline: clamp(1rem, 2.2vw, 2rem); }
.mayor-servico__corpo .mayor-medida > * { max-width: none; }
.mayor-servico__corpo .mayor-percurso-tira { padding-inline: clamp(1rem, 2.2vw, 2rem); }

/* ==========================================================================
   Trefferflächen für Finger
   --------------------------------------------------------------------------
   WCAG 2.5.8 verlangt 24 × 24 px. Gemessen auf 390 px (WebKit) waren drei
   Ziele darunter: der Rückweg im Seitenmenü (22 px) und die beiden
   Rechtstext-Links in der Fußzeile (17 px). Sie stehen im Fließtext, also
   inline-block mit senkrechter Polsterung statt größerer Schrift.
   ========================================================================== */

.mayor-indice-servicos__voltar,
.mayor-artigo__voltar a,
.mayor-rodape__legal a,
.mayor-rodape__contacto a,
.mayor-rodape li a,
.mayor-artigo__corpo .mayor-kicker a,
.mayor-contacto__dado a,
.mayor-artigo__rubrica a {
  display: inline-block;
  padding-block: 0.4rem;
}

/* Einzeilige Beitragstitel im Raster blieben bei 22 px. Mehrzeilige waren
   ohnehin hoch genug — deshalb fiel es nur bei manchen auf. */
.mayor-artigos .wp-block-post-title a {
  display: inline-block;
  padding-block: 0.3rem;
}


/* ==========================================================================
   Bewegung auf Wunsch abschalten
   --------------------------------------------------------------------------
   Fehlte bis 01.09.2026 vollstaendig — die Endgeraete-Pruefung meldete es an
   dem Tag zum ersten Mal, weil sie vorher nie gegen einen Stand ohne diese
   Regel gelaufen ist. `prefers-reduced-motion` ist nie optional.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}