/*
Theme Name: KORA
Theme URI: https://kora-imageconsulting.com
Author: MohB Studio
Author URI: https://mohaupt-bringts.com/studio
Description: KORA Image Consulting — eigenständiges Block-Theme (Full Site Editing). Zweisprachig PT/EN. Nachfolger des geteilten Master-Templates mohb-studio-base.
Version: 0.12.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kora
*/

/* ------------------------------------------------------------------
   Diese Datei enthaelt NUR, was theme.json nicht ausdruecken kann.
   Alles Gestaltbare (Farben, Groessen, Abstaende) gehoert nach
   theme.json — sonst kann Catarina es im Site-Editor nicht aendern.

   > FALLE: Block-Themes laden style.css NICHT automatisch.
   > Ohne den wp_enqueue_style()-Aufruf in functions.php ist diese
   > Datei wirkungslos. Beim MAYOR-Bau wurde das zuerst uebersehen —
   > und der vermeintliche Nachweis kam aus dem Navigations-CSS des
   > Kerns, war also ein Fehlalarm der eigenen Pruefung.

   > FALLE: core-block-supports-inline-css wird NACH diesem Stylesheet
   > ausgegeben. Bei gleicher Spezifitaet gewinnt der Kern. Wenn eine
   > Regel hier nicht greift: zwei Klassen nutzen oder den Wert als
   > Blockattribut setzen (inline gewinnt immer).
   ------------------------------------------------------------------ */

:root{
  --kora-ease: cubic-bezier(.16,1,.3,1);

  /* ---- Sperrung der Wortmarke  (09.09.2026) ----------------------
     EINE Quelle fuer Kopf UND Fuss. Vorher stand `.34em` an drei
     Stellen (Block-JSON und Inline-Style in parts/header.html,
     dazu `.kora-rodape__nome` hier) — genau die Sorte Mehrfachkopie,
     die irgendwann auseinanderlaeuft.

     Der Wert ist nicht geschaetzt, sondern aus Catias Logo-PNG
     zurueckgerechnet: dessen Ink-Bbox misst 1543x287 px, also ein
     Seitenverhaeltnis von 5,376. Die Wortmarke IST bereits dieselbe
     Schrift (Tinos) in derselben Strichstaerke — sie war nur zu weit
     gesperrt (5,736 statt 5,376). Eingepasst per Bisektion im echten
     Browser: 0,2594em trifft 5,377. Auf .26em gerundet, das sind bei
     24px Schriftgrad 0,014px Unterschied.

     Deshalb KEIN Bild: als Text bleibt die Marke Vektor, macht die
     vier Farbzustaende des Kopfes (Video / .is-solido / Unterseite /
     .is-aberto) von selbst mit und behaelt `translate="no"` — den
     Schutz gegen den Browser-Uebersetzer, der am 27.06.2026 aus
     "KORA" ein "AGE" gemacht hat. */
  --kora-marca-tracking: .26em;

  /* ---- Senkrechter Rhythmus im Kopf einer Sektion  (02.09.2026) ----
     Stefan: "ist das Padding und der Abstand zwischen Titeln, Eyebrows und
     Text ueberall stimmig? in Testemunhos ist ein Unterschied."
     Nachgemessen war es das NICHT — derselbe Bezug hatte drei Werte:

       Etikett -> Titel     Hero 24px · Quem sou 24px · Faixa 24px
                            Servicos 10px · Empresas 10px
                            Testemunhos 0px   <- Stefans Fund

     Die 24 kamen nicht aus einer Entscheidung, sondern aus dem Block-
     abstand von WordPress; die 10 aus einer lokalen Regel; die 0 daraus,
     dass `.kora-vozes` in der Liste der Kaesten stand, denen der
     Blockabstand ABGENOMMEN wird (die Liste ist richtig — sie soll
     Rastern und Sektionen den automatischen Vorlauf nehmen —, nur stand
     dort ausgerechnet das Raster, das direkt unter einem Etikett liegt).

     Drei Werte fuer dieselbe Beziehung entstehen nicht dadurch, dass
     jemand sie waehlt, sondern dadurch, dass sie an drei Stellen
     NEBENBEI entstehen. Darum stehen sie jetzt hier, mit Namen, und die
     Regeln unten verweisen darauf. */
  /* Der Grundtakt zwischen zwei Textbloecken: Etikett -> Titel,
     Titel -> Absatz, Absatz -> Absatz. 24px ist kein neuer Wert, sondern
     der Blockabstand von WordPress — hier nur ausgeschrieben, damit man
     ihn lesen kann, statt ihn aus dem Verhalten zu erschliessen. */
  --kora-luft-zeile: 1.5rem;                    /* 24px */
  /* Kopfblock einer Sektion -> ihr Inhalt (Kartenraster, Zitate). */
  --kora-luft-kopf: clamp(2.5rem, 5vw, 4rem);   /* 40-64px */
  /* Text -> Handlungsknopf. Bewusst groesser als der Grundtakt: ein
     Handlungsknopf ist kein weiterer Absatz, er soll sich vom Lesefluss
     loesen. Gilt fuer Hero und Schlussfaixa gleichermassen. */
  --kora-luft-cta: 2rem;                        /* 32px */
}

/* > Stefan gemeldet 26.08.2026: "wenn man nach oben scrollt entsteht ein
   > weisser Balken ueber dem Header". Gemessen: der Hero begann bei y=24,
   > nicht bei 0. Ursache war NICHT der Header, sondern WordPress selbst —
   > der Kern setzt `:where(.wp-site-blocks) > * { margin-block-start:
   > var(--wp--style--block-gap) }`, also 24px Abstand zwischen dem
   > Kopfbereich-Part und dem Inhalt. Sichtbar wurde davon der
   > Body-Hintergrund (Branco Quente) als heller Streifen.
   > Auf oberster Ebene braucht es keinen Blockabstand: die Sektionen
   > tragen ihre Polsterung selbst. */
.wp-site-blocks > *{ margin-block-start:0 }
/* Und dasselbe eine Ebene tiefer: die Sektionen liegen in .entry-content,
   dort greift derselbe Kern-Abstand erneut. Gemessen am 26.08.2026: jede
   Sektion trug margin-top:24px, das Kartenraster und die untere
   Fusszeile ebenso — in Summe rund 70px, die es im Original nicht gibt.
   Kein !important noetig: der Kern setzt das per :where() mit
   Spezifitaet 0, jede Klasse schlaegt das. */
.entry-content > *,
.kora-cartoes,
.kora-rodape__baixo,
.kora-duplo,
.kora-duplo > *{ margin-block-start:0 }
/* `.kora-vozes` stand bis zum 02.09.2026 in dieser Liste — und war damit
   der einzige Kasten darin, der DIREKT unter einem Etikett liegt. Die
   Folge: in Testemunhos klebte "TESTEMUNHOS" mit 0px auf den Zitaten,
   waehrend derselbe Bezug in jeder anderen Sektion Luft hatte. Genau der
   Unterschied, den Stefan gemeldet hat.
   Die Liste bleibt richtig, der Eintrag war falsch: das Raster braucht
   keinen automatischen Blockabstand, sondern den Abstand, den ein
   Kopfblock zu seinem Inhalt hat. */
.kora-vozes{ margin-block-start:var(--kora-luft-kopf) }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img{ display:block; max-width:100%; height:auto }

/* Lesebreite in Zeichen — theme.json kennt nur px/rem/%. */
.kora-medida{ max-width:34ch }
.kora-medida--larga{ max-width:52ch }

/* Sanftes Einblenden beim Scrollen. CSS-only bis auf die .in-Klasse,
   damit prefers-reduced-motion unten alles auf einmal abschaltet. */
/* ── Beruehrflaechen ────────────────────────────────────────────────────
   Aus der Endgeraete-Analyse vom 30.08.2026 (reference/kora-geraete.mjs,
   11 Geraete x 7 Seiten): Eine Reihe von Zielen lag unter den 44x44 px, die
   ein Finger braucht — die Sprachwahl mit 15x24 px sogar auf JEDER der 77
   Kombinationen, Desktop eingeschlossen.

   Vergroessert wird die TREFFERFLAECHE, nicht das Element. Ein
   Pseudo-Element liegt unsichtbar ueber dem Ziel und faengt den Zeiger ab;
   Schriftgroesse, Abstaende und Zeilenlage bleiben, wie sie waren. Der
   naheliegende Weg — Polsterung — haette den Kopfbereich hoeher gemacht
   und die Fusszeile auseinandergezogen.

   `inset` mit negativen Werten waechst nach aussen. Waagerecht bewusst
   weniger als senkrecht: Die Ziele stehen nebeneinander, und zwei
   Trefferflaechen, die sich ueberlappen, machen das Treffen schlechter
   statt besser — dann liegt oben, wer spaeter im Markup steht.

   Getestet wird das mit derselben Matrix, mit der es gefunden wurde. */
.kora-nav a,
.kora-idioma button,
.kora-marca__nome a,
.kora-menu-toggle,
.kora-social,
.kora-botao,
.kora-servico__voltar a{ position:relative }

/* `::before`, nicht `::after`: An `.kora-idioma button.is-ativo::after`
   haengt der Unterstrich der aktiven Sprache. Ein zweites `::after` haette
   ihn ersetzt — der Sprachwechsel haette seine Markierung verloren, und
   zwar lautlos. */
.kora-nav a::before,
.kora-idioma button::before,
.kora-marca__nome a::before,
.kora-menu-toggle::before,
.kora-social::before,
.kora-botao::before,
.kora-servico__voltar a::before{ content:""; position:absolute; z-index:0 }

/* Die Werte stammen aus der Messung, nicht aus dem Kopf: Nach der ersten
   Runde meldete `kora-geraete.mjs` noch 44x42 und 44x40 — knapp daneben ist
   auch daneben. Jeweils zwei Pixel mehr, dann sitzt es. */
/* Nav: 16 px hohe Textzeilen. */
.kora-nav a::before{ inset:-15px -10px }
/* Sprachwahl: 15x24 — der engste Fall. Waagerecht nur -9, sonst beruehren
   sich PT und EN (Abstand .35rem = 5.6 px). */
.kora-idioma button::before{ inset:-11px -9px }
/* Wortmarke 101x26 */
.kora-marca__nome a::before{ inset:-11px -6px }
/* Menueknopf 34x24 -> 44x44 */
.kora-menu-toggle::before{ inset:-12px -6px }
/* Fusszeile: 23 px hoch, steht untereinander — senkrecht darf es grosszuegig
   sein, waagerecht nicht, sonst greift Instagram in die Mailadresse. */
.kora-social::before{ inset:-11px -8px }
.kora-servico__voltar a::before{ inset:-14px -8px }
/* Knoepfe sind 41 bis 43 px hoch — knapp unter der Grenze. Waagerecht
   nichts, sie sind ohnehin breit genug.
   Der Sonderfall `.kora-cabecalho__cta::before{inset:-8px -2px}` stand hier
   bis zum 02.09.2026 — der Kopf-CTA war mit 31px der flachste Knopf der
   Site. Der Knopf ist auf Stefans Wunsch entfernt, die Regel mit ihm. */
.kora-botao::before{ inset:-3px 0 }

/* ── Bilder sind nicht ziehbar ──────────────────────────────────────────
   Der Browser behandelt jedes <img> von Haus aus als ziehbares Objekt: Man
   haelt es mit der linken Maustaste fest, zieht ein halbdurchsichtiges
   Geisterbild ueber die Seite und laesst es in einem anderen Fenster fallen.
   Auf einer Seite, die von ihren Bildern lebt, wirkt das wie ein Fehler und
   laedt nebenbei zum Abgreifen ein.

   Bis zum 30.08.2026 war das nur an ZWEI Stellen behandelt (Overlay-Bild,
   Bildfolge im Sobre-Overlay), jeweils per `draggable="false"` am einzelnen
   Element — 9 von 27 Bildern. Der Rest blieb ziehbar, und jedes neue Bild
   waere es wieder gewesen. Darum jetzt einmal fuer alle.

   Zwei Zeilen, weil eine nicht reicht: `-webkit-user-drag` kennen nur die
   WebKit- und Blink-Browser. Firefox richtet sich allein nach dem
   `dragstart`-Ereignis — das faengt kora.js ab. CSS allein waere also ein
   Fix, der in einem Drittel der Browser nicht greift.

   `pointer-events:none` waere der kuerzeste Weg, ist hier aber falsch: Die
   Kartenbilder liegen in Verknuepfungen, und ohne Zeigerereignisse waere die
   Karte nur noch ueber die Textzeile anklickbar. Im Overlay steht es
   bewusst, dort ist das Bild reine Flaeche. */
img{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none }

.kora-revela{ opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--kora-ease), transform 1s var(--kora-ease) }
.kora-revela.in{ opacity:1; transform:none }
/* Wird von kora-texto.js gesetzt, sobald ein Absatz in Zeilen zerlegt ist.
   Ab dann traegt nicht mehr der Block die Bewegung, sondern seine Zeilen —
   sonst liefen beide uebereinander und der Absatz haette zweimal
   aufgeblendet. Die Klasse kommt ERST nach dem Split, nie vorher: Bis dahin
   soll der gewoehnliche Block-Reveal gelten. Bleibt das JavaScript aus
   (Fehler, alter Browser, kein Modul-Support), wird sie nie gesetzt — und
   der Text blendet ein wie vorher. Das ist der Rueckfall, und er ist
   Absicht. */
.kora-revela.kora-linhas{ opacity:1; transform:none; transition:none }
/* Die Zeilen selbst. `will-change` bewusst NICHT: Es sind viele Zeilen, und
   jede bekaeme eine eigene Ebene im Speicher. */
.kora-linhas [data-line]{ display:block }
.kora-revela--d1{ transition-delay:.08s }
.kora-revela--d2{ transition-delay:.16s }
.kora-revela--d3{ transition-delay:.24s }
.kora-revela--d4{ transition-delay:.32s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important }
  .kora-revela{ opacity:1; transform:none }
}

:focus-visible{ outline:2px solid var(--wp--preset--color--terracota); outline-offset:3px }

/* Nur fuer Screenreader */
.kora-sr{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* ==================================================================
   SPRACHE — PT/EN
   Zwei Bloecke im Dokument, CSS zeigt einen. Getauscht wird nur eine
   Klasse an <html>. Warum nicht wie bisher data-pt/data-en pro Text:
   ein data-Attribut ist im Block-Editor unsichtbar und darum nicht
   pflegbar. Ziel des ganzen Umbaus ist aber, dass Catarina alles
   visuell aendern kann.
   Gezwillingt wird nur der TEXT, nicht die Struktur — Bilder und
   Layout bleiben einmalig, sonst pflegt man alles doppelt.
   ================================================================== */
/* > FALLE 4 (MAYOR-Runbook, hier am 26.08.2026 zugeschlagen):
   > core-block-supports-inline-css wird NACH style.css ausgegeben. Eine
   > Gruppe mit Flex-Layout bekommt vom Kern `.wp-container-xyz{display:flex}`
   > — eine Klasse, also gleiche Spezifitaet wie `.kora-lang--en`, und die
   > spaetere Regel gewinnt. Der englische Navigationsblock war dadurch
   > SICHTBAR. Deshalb hier zwei Klassen: das schlaegt den Kern sauber,
   > ohne !important. */
/* Mit `html` davor, obwohl es nichts einschraenkt: das hebt die
   Spezifitaet ueber jede Zwei-Klassen-Regel und macht die Sprachumschaltung
   gegen spaeteres CSS immun.
   > Am 26.08.2026 zweimal noetig geworden. Erst schlug der Kern
   > (.wp-container-x{display:flex}) die Regel und die englische Navigation
   > war sichtbar. Dann schlug ich sie selbst mit
   > `.kora-overlay__body > .kora-lang{display:flex}` — im Overlay standen
   > beide Sprachen uebereinander, was den Dialog auf 1042px aufblies und
   > wie "die Schritte sind unterschiedlich hoch" aussah.
   > Eine display-Regel auf .kora-lang ist ab jetzt immer ein Fehler. */
/* > DRITTER Fall derselben Familie, gefunden am 27.08.2026: `display:revert`
   > war der Fehler. `revert` verwirft die AUTOREN-Ebene fuer diese
   > Eigenschaft und faellt auf den Browser-Standard zurueck — fuer ein <div>
   > also `block`. Damit ging auch WordPress' `.is-layout-flex{display:flex}`
   > verloren: die englische Navigation stand SENKRECHT (gemessen: PT flex,
   > 392x29 — EN block, 70x114), und die Links im Fusszeilen-Block ebenso.
   > Auf Portugiesisch fiel es nie auf, weil dort gar keine display-Regel
   > greift.
   >
   > Die Loesung ist, dem sichtbaren Block ueberhaupt KEIN display zu
   > setzen: `:not()` schraenkt die Versteck-Regel ein, statt sie
   > nachtraeglich zurueckzunehmen. Damit gilt wieder, was der Kern und das
   > Theme fuer das Layout vorsehen. `:not(.kora-en)` erhoeht die
   > Spezifitaet zusaetzlich — die Immunitaet gegen spaeteres CSS bleibt. */
html:not(.kora-en) .kora-lang.kora-lang--en{ display:none }
html.kora-en .kora-lang.kora-lang--pt{ display:none }

/* ── Die englische Fassung stand 24 px tiefer als die portugiesische ──
   Gemeldet von Stefan am 21.09.2026 fuer Serviços para pessoas und
   Testemunhos; gemessen galt es fuer JEDE Sektion mit Sprachzwillingen.

   Ursache ist kein Fehler in unserem CSS, sondern das Blocklayout des
   Kerns: `:where(.is-layout-flow) > * + *` gibt jedem Geschwister AUSSER
   dem ersten einen oberen Abstand. PT ist immer das erste Kind und
   bekommt keinen, EN ist immer das zweite und bekommt 24 px. Dass PT in
   der englischen Ansicht `display:none` traegt, aendert daran nichts —
   der Geschwister-Selektor zaehlt Elemente, nicht Sichtbarkeit.

   Der Abstand ist in beiden Faellen sinnlos: es ist immer nur EINE der
   beiden Fassungen zu sehen. Darum auf null, fuer beide.

   `html` davor aus demselben Grund wie bei der Versteck-Regel oben:
   die Kernregel steht in `:where()` und hat damit Spezifitaet 0 — eine
   Klasse genuegt zwar, aber spaeteres Kern-CSS mit echter Spezifitaet
   soll auch nicht gewinnen. */
html .kora-lang{ margin-block-start:0 }

.kora-idioma{ display:flex; align-items:center; gap:.35rem;
  font-size:var(--wp--preset--font-size--micro); letter-spacing:.1em }
/* > LESBARKEIT, gemessen am 27.08.2026:
   > Die aktive Sprache stand in Terracota. Ueber dem Hero-Video ergab das
   > 1.55:1 — praktisch unsichtbar. Die inaktive lag bei Deckkraft .55, was
   > zusammengerechnet rund 3.4:1 ergibt, also ebenfalls unter den noetigen
   > 4.5:1 fuer kleinen Text. Terracota funktioniert nur auf hellem Grund
   > (dort 6.08:1) — im Header wechselt der Grund aber.
   >
   > Die Sprachwahl arbeitet jetzt mit currentColor: sie erbt die
   > Header-Farbe und ist damit in beiden Zustaenden kontraststark. Der
   > Unterschied zwischen aktiv und inaktiv liegt in Deckkraft UND einem
   > Unterstrich — nicht in der Farbe allein. Die Signalfarbe bleibt dem
   > CTA vorbehalten; zweimal Terracota nebeneinander waere kein Signal
   > mehr, sondern Dekoration. */
.kora-idioma button{ background:none; border:0; padding:.2em .1em; cursor:pointer;
  color:inherit; font:inherit; text-transform:uppercase;
  /* Die Deckkraft steht am DATEIENDE (.kora-idioma button{opacity:.8}),
     zusammen mit dem Leseschutz des Kopfes, der sie erst erlaubt — dort
     ist sie gegen die hellsten Videostellen gemessen. Hier stand bis zum
     01.09.2026 ein .68, das nie gewirkt hat. */
  position:relative; transition:opacity .3s var(--kora-ease) }
.kora-idioma button:hover{ opacity:1 }
.kora-idioma button.is-ativo{ opacity:1 }
.kora-idioma button.is-ativo::after{ content:""; position:absolute;
  left:.1em; right:.1em; bottom:0; height:1px; background:currentColor }

/* ==================================================================
   KOPFBEREICH
   Liegt ueber dem Hero und wird beim Scrollen fest. Die vertikale
   Polsterung ist ans Scrollverhalten gekoppelt und gehoert darum
   hierher, nicht in theme.json — ein Regler, den das Scrollen
   ueberschreibt, waere eine Falle.
   ================================================================== */
/* `env(safe-area-inset-*)` ergaenzt am 21.09.2026. Der Kopf ist fix und
   klebte an `top:0` — auf Geraeten, die den Viewport unter Statusleiste
   oder Notch ziehen (Chrome auf Android im Vollbild, iPhone mit Insel),
   rutschte der Inhalt darunter. Stefans Meldung "das Header-Menue
   ueberlagert sich" kam von einem echten Telefon; in der Emulation gibt
   es keine Systemleisten, darum war dort nichts zu sehen.
   Auf Geraeten ohne Aussparung ist `env()` null — die Regel kostet dort
   nichts. Seitlich ebenso, fuer Querformat mit Notch links. */
.kora-cabecalho{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:calc(1.6rem + env(safe-area-inset-top)) calc(clamp(1.25rem,5vw,5rem) + env(safe-area-inset-right))
          1.6rem calc(clamp(1.25rem,5vw,5rem) + env(safe-area-inset-left));
  color:#fff;                       /* Schrift auf Video — funktionale Farbe */
  transition:background-color .5s var(--kora-ease), padding .5s var(--kora-ease), color .5s var(--kora-ease);
}
.kora-cabecalho.is-solido{
  background:var(--wp--preset--color--branco-quente);
  color:var(--wp--preset--color--quase-preto);
  padding-top:calc(.9rem + env(safe-area-inset-top)); padding-bottom:.9rem;
  box-shadow:0 1px 0 var(--wp--preset--color--linha);
}
.kora-cabecalho a{ color:inherit }
.kora-nav{ display:flex; gap:2.2rem; align-items:center }
.kora-nav a{ font-size:var(--wp--preset--font-size--micro);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap }
.kora-nav a:hover{ color:var(--wp--preset--color--terracota) }

/* ------------------------------------------------------------------
   Ausklappmenue "Servicos" -> Pessoas / Empresas      (02.09.2026)
   ------------------------------------------------------------------
   Der Knopf sieht aus wie die anderen Nav-Punkte: dieselbe Groesse,
   dieselbe Sperrung, dieselben Versalien. Er ist aber ein <button>, und
   der bringt vier Browser-Vorgaben mit, die kein <a> hat — dieselbe
   Falle, die am 01.09.2026 "Saber mais" in Arial dastehen liess. Darum
   hier ausdruecklich zurueckgesetzt.
   ------------------------------------------------------------------ */
.kora-nav__grupo{ position:relative }
.kora-nav__abrir{
  display:inline-flex; align-items:center; gap:.42em;
  font-family:inherit; font-size:var(--wp--preset--font-size--micro);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:inherit; background:none; border:0; padding:0; margin:0;
  cursor:pointer; line-height:inherit }
.kora-nav__abrir:hover{ color:var(--wp--preset--color--terracota) }
.kora-nav__abrir svg{ transition:transform .3s var(--kora-ease) }
.kora-nav__grupo.is-offen .kora-nav__abrir svg{ transform:rotate(180deg) }

/* Die Liste haengt AUS dem Kopf heraus und braucht darum eine eigene
   Flaeche — der Kopf selbst ist ueber dem Hero-Video durchsichtig. Ohne
   Flaeche stuenden die zwei Punkte im Film. */
.kora-nav__liste{
  position:absolute; top:calc(100% + .9rem); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:11rem; margin:0; padding:.5rem 0; list-style:none; z-index:2;
  background:var(--wp--preset--color--branco-quente);
  color:var(--wp--preset--color--quase-preto);
  border:1px solid var(--wp--preset--color--linha); border-radius:2px;
  box-shadow:0 12px 32px rgba(23,22,21,.10);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--kora-ease), transform .25s var(--kora-ease), visibility .25s }
.kora-nav__grupo.is-offen .kora-nav__liste{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) }
/* `visibility` UND `opacity`: mit `opacity:0` allein bliebe die Liste
   anklickbar und im Lesefluss eines Screenreaders — ein unsichtbares Menue,
   das Klicks abfaengt. `display:none` waere die dritte Moeglichkeit, macht
   aber jeden Uebergang unmoeglich. */
.kora-nav__liste a{ display:block; padding:.62rem 1.25rem; white-space:nowrap }
.kora-nav__liste a:hover{ background:var(--wp--preset--color--superficie);
  color:var(--wp--preset--color--terracota) }
/* Trefferflaeche: die Zeilen sind 44px hoch (.62rem + .62rem + 19px Text) —
   damit ist hier die Grenze eingehalten, an der die Knoepfe der Site mit
   34-39px noch scheitern. */
.kora-menu-toggle{ display:none; background:none; border:0; cursor:pointer;
  width:34px; height:24px; position:relative; color:inherit }
.kora-menu-toggle span{ position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .4s var(--kora-ease), opacity .3s }
.kora-menu-toggle span:nth-child(1){ top:4px }
.kora-menu-toggle span:nth-child(2){ top:11px }
.kora-menu-toggle span:nth-child(3){ top:18px }

@media (max-width:900px){
  .kora-menu-toggle{ display:block }
  /* > Das offene Menue war bis zum 30.08.2026 kaputt, und zwar unbemerkt:
     > Die vier Punkte standen 166 px auseinander ueber die volle
     > Bildschirmhoehe verteilt, der erste klebte bei y=2 am oberen Rand und
     > verschwand hinter dem Kopfbereich — samt Wortmarke. Aufgefallen ist es
     > erst der Geraeteanalyse, weil die Trefferflaeche des ersten Punktes
     > nach oben aus dem Sichtfeld lief.
     >
     > Ursache war `gap:2rem`, das gar nicht ankam: WordPress erzeugt fuer
     > jede Flex-Gruppe eine eigene Container-Regel
     > (`wp-container-core-group-is-layout-…`) und setzt darin den Abstand.
     > Die ist spezifischer als eine Klassenregel — gemessen kam `gap: 0px`
     > heraus. Ohne Abstand verteilte der Flexbau die Punkte ueber die ganze
     > Hoehe.
     >
     > Deshalb hier `!important`: nicht aus Bequemlichkeit, sondern weil die
     > gegnerische Regel generiert ist und keinen stabilen Namen hat, an dem
     > man sich festhalten koennte.
     >
     > `padding-top` haelt den ersten Punkt unter dem Kopfbereich. Und die
     > Punkte sind jetzt `display:block` mit Polsterung statt nackter
     > Textzeilen — damit sind sie von sich aus gross genug fuer einen
     > Finger, ganz ohne unsichtbare Trefferflaeche. */
  .kora-cabecalho .kora-nav{
    position:fixed; inset:0; z-index:1;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
    flex-direction:column; justify-content:center; align-items:center;
    gap:clamp(.4rem,1.6vh,1rem)!important;
    padding:5.5rem 1.5rem 2.5rem;
    background:var(--wp--preset--color--branco-quente);
    color:var(--wp--preset--color--quase-preto);
    transform:translateY(-100%); transition:transform .6s var(--kora-ease);
  }
  /* Die Flex-Kinder sind nicht die Links, sondern WordPress-Absaetze um sie
     herum — und die generierte Container-Regel gibt ihnen `flex: 1 1 0px`.
     Deshalb wuchs jeder Punkt auf 126 px und die vier verteilten sich ueber
     die ganze Hoehe. Ohne `!important` verliert man auch diese Runde: die
     gegnerische Regel ist spezifischer und heisst bei jedem Build anders.
     Beim ersten Versuch stand hier `flex:0 0 auto` ohne — gemessen kam
     weiterhin `1 1 0px` heraus, und die Punkte standen weiter 136 px
     auseinander. */
  .kora-cabecalho .kora-nav > *{ flex:0 0 auto!important; margin:0 }
  .kora-cabecalho .kora-nav a{ display:block; padding:.75rem 1.25rem }
  /* Im offenen Menue tragen die Punkte ihre Groesse selbst (53 px durch
     Polsterung). Die unsichtbare Trefferflaeche von oben ist hier nicht nur
     ueberfluessig, sondern schaedlich: Sie ragt 15 px ueber den Punkt hinaus,
     der Abstand betraegt aber nur 10,6 px — die Flaechen ueberlappen, und
     dann gewinnt nicht der naechstgelegene Punkt, sondern der spaetere im
     Markup. Gemessen: 44x38 statt 44x53. */
  .kora-cabecalho .kora-nav a::before{ content:none }
  /* Wortmarke und rechte Gruppe bleiben ueber der Menueflaeche stehen.
     Vorher lag nur der Menueknopf oben — die Wortmarke verschwand beim
     Oeffnen, und man wusste im Menue nicht mehr, auf wessen Seite man ist. */
  .kora-cabecalho.is-aberto .kora-marca,
  .kora-cabecalho.is-aberto .kora-cabecalho__lado{ position:relative; z-index:2 }
  /* > Und die Schrift muss dunkel werden. Der Kopf startet durchsichtig mit
     > WEISSER Schrift, weil auf der Startseite das dunkle Hero-Video
     > darunterliegt. Klappt das Menue auf, liegt darunter aber die helle
     > Menueflaeche — und die Wortmarke stand weiss auf weiss.
     > Meine Messung hat das NICHT gefunden: `elementFromPoint` traf die
     > Wortmarke und meldete "sichtbar". Treffen ist nicht sehen. Gefunden
     > wurde es erst im Bildschirmfoto. Dieselbe Familie wie der goldene
     > Fleck vom 16.08.2026: Bei Sichtbarem entscheidet das Auge, nicht das
     > Attribut. */
  .kora-cabecalho.is-aberto{ color:var(--wp--preset--color--quase-preto) }
  .kora-cabecalho.is-aberto::before{ opacity:0 }
  .kora-cabecalho.is-aberto .kora-nav{ transform:none }
  .kora-cabecalho.is-aberto .kora-menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .kora-cabecalho.is-aberto .kora-menu-toggle span:nth-child(2){ opacity:0 }
  .kora-cabecalho.is-aberto .kora-menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
  .kora-cabecalho.is-aberto .kora-menu-toggle{ position:relative; z-index:2 }
  .kora-nav a{ font-size:1.05rem; letter-spacing:.18em }

  /* ---- Ausklappmenue im aufgeklappten Handy-Menue ----
     Hier faellt das Ausklappen weg: die zwei Punkte stehen von Anfang an
     unter "Servicos", eingerueckt. Auf einer Flaeche, die ohnehin die
     ganze Hoehe hat, ist ein zweiter Klick nur eine zusaetzliche Huerde —
     und ein absolut positioniertes Kaestchen mitten im Menue waere hier
     ohnehin falsch. Der Knopf wird damit zur Ueberschrift der Gruppe und
     traegt keine Bedienung mehr; das `aria-expanded` steht dann auf einem
     Knopf, der nichts tut. Darum wird er ganz zum Text: `pointer-events:
     none` und der Pfeil weg. */
  .kora-nav__grupo{ display:flex; flex-direction:column; align-items:center;
    gap:clamp(.2rem,.8vh,.5rem) }
  /* Grafit statt Areia Escura: 7,3:1 statt 3,0:1. Die Gruppen-
     ueberschrift soll leiser sein als ihre Punkte (die stehen auf
     Quase Preto, 17:1) — leiser heisst aber nicht unlesbar. */
  .kora-nav__abrir{ pointer-events:none; padding:.75rem 1.25rem;
    font-size:1.05rem; letter-spacing:.18em;
    color:var(--wp--preset--color--grafite) }
  .kora-nav__abrir svg{ display:none }
  .kora-nav__liste{
    position:static; transform:none; opacity:1; visibility:visible;
    pointer-events:auto; min-width:0; padding:0; margin:0;
    background:none; border:0; box-shadow:none;
    display:flex; flex-direction:column; align-items:center;
    gap:clamp(.2rem,.8vh,.5rem) }
  .kora-nav__liste a{ padding:.55rem 1.25rem; font-size:.95rem }
  .kora-nav__liste a:hover{ background:none }
}

/* ==================================================================
   HERO — Vollbild mit Video
   Hoehe, Videozuschnitt und Verlauf kann theme.json nicht ausdruecken.
   Gemessen: 900 px hoch bei 1440 UND bei 390 (reference/…json).
   ================================================================== */
/* 100svh — NICHT 900px. Die 900 aus der ersten Messung waren die Hoehe
   meines Messfensters, kein Gestaltungswert. Das alte Theme sagt 100svh,
   und bei einem 900px-Fenster ergibt das genau 900. Ein Wert, der nur
   zufaellig richtig aussah. */
.kora-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; color:#fff }
.kora-hero__media{ position:absolute; inset:0; z-index:0;
  background:var(--wp--preset--color--quase-preto) }
.kora-hero__media video,
.kora-hero__media img{ width:100%; height:100%; object-fit:cover; display:block }
/* Verlauf haelt die Schrift lesbar, ohne das Video flach zu machen. */
.kora-hero__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,22,21,.42) 0%, rgba(23,22,21,.10) 34%,
             rgba(23,22,21,.16) 58%, rgba(23,22,21,.66) 100%) }
/* Gemessen: maxW 640px, padding-bottom 81px, Seitenrand wie der Container.
   Seit 02.09.2026 waagerecht MITTIG statt links (Stefan). Senkrecht bleibt
   der Block unten — `align-items:flex-end` oben ist unangetastet, die
   Figur im Video bleibt frei.
   `margin-inline:auto` ist der Schalter: der Hero ist ein Flex-Container
   ohne `justify-content`, der Block sass darum am linken Rand.
   17.09.2026 (Catarina): auf 900px erweitert, damit die H1 in
   voller Praesenz (bis 4.5rem/72px, nahe an der urspruenglichen
   `display`-Groesse von 5rem/80px) und weiterhin zweizeilig
   ("Não existem" / "dois estilos iguais.") passt. Etikett und
   Fliesstext bleiben bei ihren gemessenen 423/409px und wirken
   dank `margin-inline:auto` weiterhin optisch zentriert. */
/* ── Der Hero-Inhalt darf NIE in den Kopfbereich laufen ────────────────
   Gemeldet von Stefan am 22.09.2026 aus Edge auf dem iPhone: das Etikett
   "CONSULTORIA DE IMAGEM · LISBOA" stand auf derselben Hoehe wie die
   Wortmarke und "PT / EN".

   Ursache: Der Hero ist `align-items:flex-end`, der Inhalt sitzt also
   unten. Oben stand KEINE Polsterung — und fuer das Handy gab es
   ueberhaupt keine eigene Regel: dieselben 130px Bodenpolsterung und
   dieselben 130px Knopfabstand wie auf 1440px. Auf einem kurzen Sichtfeld
   wird der Inhaltsblock dadurch hoeher als der Hero und laeuft nach OBEN
   heraus — genau in das Band, in dem der feste Kopf steht.

   Warum ausgerechnet Edge: Der Browser zeigt oben die Adressleiste UND
   unten eine Werkzeugleiste. Das Sichtfeld ist damit deutlich kuerzer als
   in Chrome oder Safari, und der Ueberlauf faengt frueher an. Die Ursache
   war aber die ganze Zeit da — Edge hat sie nur zuerst sichtbar gemacht.

   Die Polsterung oben ist kein Schoenheitswert: sie reserviert die Hoehe
   des Kopfes. Solange der Inhalt passt, sieht man nichts davon (der Block
   bleibt unten ausgerichtet); passt er nicht, beginnt der Ueberlauf
   unterhalb des Kopfes statt darunter. */
.kora-hero__inner{ position:relative; z-index:1; width:100%; max-width:900px;
  margin-inline:auto; text-align:center;
  padding:calc(7rem + env(safe-area-inset-top)) clamp(1.25rem,5vw,4.5rem) 130px }
/* H1 auf 640px erweitert und Groesse eigens verkleinert am 15.09.2026
   (Catarina): der neue Titel "Não existem dois estilos iguais." brach
   bei 496px + `display`-Groesse (bis 5rem/80px) dreizeilig; die Breite
   allein reichte nicht, weil "Não existem dois estilos" bei 80px auch
   in 640px nicht auf eine Zeile passt. Loesung: die Hero-H1 bekommt
   eine eigene, kleinere clamp-Groesse (bis 3.5rem/56px). Die globale
   `display`-Groesse aus theme.json bleibt unangetastet — sie wird an
   anderen Stellen im Theme noch gebraucht.
   640px = Breite des umgebenden Blocks (`.kora-hero__inner`) — der H1
   nutzt damit den vollen Block. Etikett (423px) und Fliesstext (409px)
   bleiben unveraendert, weil sie ihre Brechstellen aus dem Original
   halten sollen. */
/* `!important` ist Absicht, kein Notausgang: WordPress selbst schreibt
   `.has-display-font-size{ font-size:var(--wp--preset--font-size--display) !important }`
   in einen inline-Style-Block direkt vor `</head>` — ohne `!important`
   hier gewinnt jener und die eigene Groesse hat keine Wirkung, obwohl
   sie in der Datei steht. Nachgeprueft am 15.09.2026. */
.kora-hero h1{ text-shadow:0 1px 24px rgba(23,22,21,.28); max-width:900px;
  font-size:clamp(2.6rem, 1.7rem + 3.8vw, 4.5rem) !important }
/* Gemessen: Eyebrow 423px, Fliesstext 409px — beide brechen dadurch an
   derselben Stelle wie im Original.
   Zwei der drei Maximalbreiten sind KLEINER als die 640px des Blocks. Ohne
   `margin-inline:auto` waeren sie am linken Rand des Blocks kleben
   geblieben: der Text darin waere mittig gewesen, der Textkasten aber
   nicht — bei 423/409px in einem 640px-Block ein Versatz, der
   aussieht wie "fast zentriert". `text-align` verschiebt keine Kaesten. */
.kora-hero h1,
.kora-hero .kora-etiqueta,
.kora-hero .kora-medida--larga,
.kora-hero__acao{ margin-inline:auto }
.kora-hero .kora-etiqueta{ max-width:423px }
.kora-hero .kora-medida--larga{ max-width:409px }
/* Der Knopf steht MITTIG unter dem Text (Stefan, 02.09.2026).
   Er war am selben Tag kurz linksbuendig an der Kante des Absatzes
   (516px bei 1440) — auf Stefans Wunsch zurueck auf mittig. Der Verlauf
   steht hier, damit der naechste Leser nicht denkt, die Zentrierung sei
   nie hinterfragt worden: die linke Variante gibt es, sie ist
   ausprobiert, und sie ist verworfen.
   Kein `max-width` mehr an diesem Kasten. Er trug 409px, damit der Knopf
   an der Kante des Absatzes beginnen konnte; fuer die Mitte ist die
   Breite gleichgueltig, und eine Zahl, die nichts mehr bewirkt, laesst den
   naechsten Leser nach ihrer Wirkung suchen.
   `text-align:center` ist der Schalter, nicht `margin-inline`: der Knopf
   ist `inline-flex`, und automatische Seitenraender wirken nur an
   Elementen auf Block-Ebene. Dieselbe Stelle hat das am 02.09. schon
   einmal vorgefuehrt — erst in die eine, dann in die andere Richtung. */
/* Abstand zum Absatz darueber: 32px (Stefan, 02.09.2026 — "der CTA im Hero
   sollte etwas mehr Abstand zum Text darueber haben"). Er stand auf 0,
   weil `margin-block:0` beim Einbau des Kastens den Blockabstand von
   WordPress mit weggenommen hat — der Knopf klebte am Fliesstext.
   32px und nicht 24: ein Handlungsknopf ist kein weiterer Absatz, er
   soll sich vom Lesefluss loesen. Dieselbe Zahl gilt fuer den Knopf der
   Schlussfaixa, der vorher bei 24px lag — damit haben die beiden
   Haupt-CTAs der Startseite denselben Vorlauf.
   17.09.2026 (Catarina): 130px statt 32px, damit der Abstand OBEN gleich
   dem `padding-bottom:130px` des .kora-hero__inner (dacf3dd) ist. Wunsch:
   der Knopf soll optisch mittig zwischen Fliesstext und Unterkante des
   Videos sitzen. Nur im Hero — die Schlussfaixa behaelt ihre 32px. */
.kora-hero__acao{ margin-block:130px 0; text-align:center }

/* Auf dem Handy sind 130px oben und 130px unten zusammen 260px, die der
   Inhalt nicht hat. Gemessen auf 390x844: der Block war 40px zu hoch;
   auf 390x640 (Edge mit beiden Leisten) 244px. Beide Werte hier auf ein
   Mass, das mitwaechst — unten bleibt genug Luft, damit der Knopf nicht
   an der Videokante klebt. */
@media (max-width:781px){
  .kora-hero__inner{ padding-bottom:clamp(2.5rem,9vh,6rem) }
  .kora-hero__acao{ margin-block:clamp(2rem,7vh,5rem) 0 }
}
.kora-hero__acao .kora-botao{ display:inline-flex; margin-inline:auto }


/* ==================================================================
   Kleinteile
   ================================================================== */
.kora-etiqueta{ text-transform:uppercase; letter-spacing:.24em;
  font-size:var(--wp--preset--font-size--etiqueta) }
/* Der Grundknopf gilt fuer <a> UND <button>. Ohne den Ruecksetzer erbt nur
   der <button> vier Vorgaben des Browsers, die kein <a> hat — und weil fast
   alle Knoepfe der Site <a> sind, faellt es an der einen Ausnahme auf:
   "Saber mais" in Quem sou stand in ARIAL statt Poppins, mit 2px outset
   Rahmen, grauem Grund und Pfeil-Cursor statt Hand.

   Der Rahmen war am 28.08.2026 schon einmal gefunden worden — aber nur am
   Kontakt-Knopf behoben, mit der Begruendung, andere Sektionen seien nicht
   zur Aenderung gegeben. Der Fehler blieb damit an jedem anderen <button>
   stehen und ist am 01.09.2026 wiedergekommen. Ein Ruecksetzer gehoert an
   die Basisklasse, nicht an eine Fundstelle.

   `--cheio` und `--claro` stehen WEITER UNTEN und ueberschreiben Grund und
   Rahmen weiterhin — die Reihenfolge ist hier die ganze Absicherung. */
/* ...und weil der Ruecksetzer an EINER Fundstelle nachweislich nicht
   reicht, jetzt an der Wurzel. Gemessen am 02.09.2026 mit
   `reference/kora-schriften.mjs`: drei Knopf-Klassen standen weiter in
   ARIAL, weil sie keine `.kora-botao` sind —
     .kora-overlay__zu     (das "×" zum Schliessen, 7x auf der Startseite)
     .kora-menu-toggle     (Handy-Menue, ohne Text)
     .kora-galeria__punkt  (Punkte der Bildfolge, ohne Text)
   Sichtbar war nur das "×", und genau darum ist es durch jede Bild-
   pruefung gekommen: ein Malzeichen in Arial sieht aus wie ein Malzeichen.
   Gefunden hat es erst eine Messung, die IN die geschlossenen Overlays
   und zugeklappten Aufklapper hineinschaut — die erste Fassung des
   Skripts sah nur sichtbare Elemente und meldete alles gruen.

   Auf `header, main, footer, dialog` eingegrenzt und nicht `button`
   pauschal: die Admin-Leiste von WordPress liegt als eigenes <div> direkt
   im <body> und soll ihre eigene Schrift behalten. */
:is(header, main, footer, dialog) button{ font-family:inherit }

.kora-botao{ display:inline-flex; align-items:center; gap:.6rem;
  padding:.95em 1.9em; font-size:var(--wp--preset--font-size--micro);
  font-family:inherit; letter-spacing:.16em; text-transform:uppercase;
  border:0; background:none; border-radius:2px; cursor:pointer;
  transition:background-color .4s var(--kora-ease), color .4s var(--kora-ease) }
.kora-botao svg{ transition:transform .4s var(--kora-ease) }
.kora-botao:hover svg{ transform:translateX(5px) }
/* Signalfarbe der Handlungsknoepfe: Azul Petroleo, Stefan am 02.09.2026.
   Vorher Terracota -> Mogno. Terracota bleibt Markenfarbe (Zitate, Links im
   Fliesstext, `.kora-botao--texto`) — sie ist nur nicht mehr die Farbe, an
   der man den Handlungsknopf erkennt. Genau das war der Grund: eine
   Signalfarbe, die auch Schmuckfarbe ist, signalisiert nichts.
   Gemessen gegen weisse Schrift: 9.52:1 (vorher Terracota 6.41:1).
   NICHT betroffen: `.kora-contacto .kora-botao--cheio` weiter unten — auf
   der dunklen Kontaktflaeche ist der Knopf hell, und ein dunkles Blau auf
   Quase Preto waere kaum als Flaeche zu sehen. */
.kora-botao--cheio{ background:var(--wp--preset--color--azul-petroleo); color:#fff }
/* Der Absendeknopf des Formulars ist die EINE bewusste Ausnahme von der
   Signalfarbe (Stefan, 02.09.2026, nach Screenshot): er ist terracotta,
   waehrend jeder andere gefuellte Knopf blau ist. Begruendbar ist sie —
   der Knopf gehoert zur Karte, nicht zum Weg durch die Seite, und in der
   Schluss-Faixa stehen beide Knoepfe uebereinander: blau fuehrt weiter,
   terracotta schickt ab. Zwei Handlungen, zwei Farben.
   Weiss auf Terracota: 6,41:1. Hover eine Stufe dunkler (Mogno, 14,51:1) —
   dieselbe Richtung wie bei --cheio, ein Knopf wird beim Beruehren nie
   heller. */
.kora-botao--enviar{ background:var(--wp--preset--color--terracota); color:#fff }
.kora-botao--enviar:hover{ background:var(--wp--preset--color--mogno) }
.kora-botao--cheio:hover{ background:var(--wp--preset--color--azul-petroleo-escuro) }
.kora-botao--claro{ border:1px solid rgba(255,255,255,.55); color:#fff }
/* Die Faixa ist durchgehend mittig gesetzt — Etikett, Titel und Absatz
   tragen `has-text-align-center`. Der Knopf steht aber in einem eigenen
   wp:html-Block ohne diese Klasse und richtete sich deshalb links aus.
   Gemessen bei 1440 px: Knopfmitte 191, alles andere 720.
   Erster Versuch war `margin-inline:auto; width:fit-content` — wirkungslos,
   gemessen weiterhin 191. `.kora-botao` ist `inline-flex`, und automatische
   Seitenraender wirken nur an Elementen auf BLOCK-Ebene. Der Wechsel auf
   `flex` (block-level) ist der eigentliche Schalter; `width:fit-content`
   verhindert, dass der Knopf dabei auf volle Breite geht. */
/* NUR der blaue Knopf unter der Karte, nicht jeder Knopf der Faixa. Bis
   zum 02.09.2026 stand hier `.kora-faixa .kora-botao` — seit das Formular
   in dieser Sektion liegt, traf das auch den ABSENDEKNOPF: `margin-inline:
   auto` schob ihn in die Mitte, sobald der Hinweis daneben auf eine eigene
   Zeile umbrach. Auf dem Desktop fiel es nicht auf (der Hinweis steht
   daneben und teilt sich den Platz), auf 390px stand "ENVIAR" mittig
   ueber linksbuendigen Feldern. Ein Knopf, der zu einem Formular gehoert,
   richtet sich an dessen Feldern aus, nicht an der Sektion. */
.kora-faixa .kora-botao--cheio{ display:flex; width:fit-content; margin-inline:auto;
  margin-top:var(--kora-luft-cta) }
.kora-botao--claro:hover{ background:#fff; color:var(--wp--preset--color--quase-preto) }

/* ==================================================================
   SEKTIONEN — Grundraster
   ================================================================== */
/* > Gefunden am 28.08.2026 beim Umbau der Kontakt-Sektion, gilt aber fuer
   > ALLE Sprungmarken: der Kopfbereich liegt fixiert ueber dem Inhalt und
   > ist auf dem Telefon 84px hoch, die Sektionspolsterung dort aber nur
   > 72px. Jeder Klick in der Navigation schob damit das erste Element der
   > Zielsektion — das Etikett — HINTER den Kopf. Gemessen bei 375px:
   > #servicos, #sobre, #testemunhos und #contacto alle verdeckt, nur
   > #abordagem frei (dort steht ein Bild vor dem Etikett).
   > Auf dem Desktop reichen die 144px Polsterung, darum nur hier.
   > `.kora-seccao[id]` trifft bewusst nicht den Hero (`#top`, ohne diese
   > Klasse) — "zurueck nach oben" soll ganz nach oben springen. */
@media (max-width:900px){
  .kora-seccao[id]{ scroll-margin-top:5.75rem }
}

.kora-seccao--centro{ text-align:center }
.kora-seccao--centro .kora-medida,
.kora-seccao--centro p{ margin-left:auto; margin-right:auto }

/* ---------- Abordagem: drei Punkte ---------- */
.kora-ponto{ padding-top:1.6rem; border-top:1px solid rgba(249,249,248,.18); margin-top:1.6rem }
.kora-ponto h3{ margin-bottom:.5rem }
.kora-ponto p{ color:rgba(249,249,248,.72); max-width:56ch }

/* `.kora-retrato` stand hier bis zum 01.09.2026 und hat nie gegriffen: das
   Portrait in 05-sobre ist ein <figure class="kora-duplo__img"> und wird
   darueber gestaltet. Die Regel sah aus, als bestimme sie das Seiten-
   verhaeltnis des Portraits — sie tat nichts. */

/* ==================================================================
   SERVIÇOS — zwei Kartensaetze, einer sichtbar
   Umgeschaltet per Klasse an der Sektion. Das versteckte Raster wird
   mit `inert` aus der Tab-Reihenfolge genommen — sonst wandert der
   Fokus in unsichtbare Karten. Das JS setzt es.
   ================================================================== */
/* Gemessen: 94px hoch, 64px Abstand nach unten (40px auf Mobil).
   Meine erste Fassung war 169px, weil Kern-Blockabstand und Flex-Gap
   sich addiert haben. */
.kora-servicos__cabeca{ align-items:flex-end; gap:2rem;
  margin-bottom:var(--kora-luft-kopf) }
/* Gemessen: die Textspalte der Kopfzeile ist 963px breit, die Ueberschrift
   passt damit auf EINE Zeile. Meine erste Fassung hatte hier eine
   `constrained`-Gruppe — die erbt contentSize (431px) und liess die
   Ueberschrift umbrechen. Sichtbar nur im Bildvergleich, in keiner Messung. */
.kora-servicos__titel{ flex:1 1 auto; max-width:963px }
.kora-servicos__titel > *{ margin-block-start:0 }
/* ...ausser fuer das, was NACH dem Etikett kommt. Der Reset oben nimmt
   allen Kindern den Vorlauf — richtig fuer das erste Element, falsch fuer
   jedes weitere. Bis zum 02.09.2026 fiel das nicht auf, weil im Kopfblock
   nur Etikett und Titel standen und eine eigene Regel den Titel-Abstand
   nachreichte. Seit "Saber mais" in Empresas unter der Ueberschrift steht,
   klebte es dort mit 0px.
   24px und nicht 32: es ist ein stiller Textknopf im Lesefluss, nicht der
   Handlungsknopf der Sektion — in Quem sou stand er vorher genauso im
   24er-Takt. */
.kora-servicos__titel > .kora-etiqueta ~ *{ margin-block-start:var(--kora-luft-zeile) }
/* Waren `.6rem` (9,6px) und damit weniger als die Haelfte dessen, was
   derselbe Bezug in Hero, Quem sou und der Schlussfaixa hatte (24px).
   Der Wert stand hier ohne Begruendung; er war nicht falsch gemeint,
   sondern gar nicht gemeint. */
.kora-servicos__cabeca .kora-etiqueta{ margin-bottom:var(--kora-luft-zeile) }
.kora-troca{ display:inline-flex; align-items:center; gap:.55rem; background:none; border:0;
  cursor:pointer; padding:.3em 0; color:var(--wp--preset--color--terracota);
  font-size:var(--wp--preset--font-size--micro); letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid currentColor }
.kora-troca svg{ transition:transform .4s var(--kora-ease) }
.kora-troca:hover svg{ transform:translateX(5px) }
.kora-troca.is-volta svg{ transform:scaleX(-1) }
.kora-troca.is-volta:hover svg{ transform:scaleX(-1) translateX(5px) }

/* KOMPAKTE KACHELN — nicht die grossen Karten, die ich zuerst gebaut habe.
   Das alte Theme begruendet die Bauform ausdruecklich: die Kachel zeigt
   NUR Bild, Name und einen Einzeiler, KEINEN Preis — "damit die Uebersicht
   nach Angebot aussieht und nicht nach Preisliste". Der Preis erscheint
   erst auf der Detailseite. Meine erste Fassung hatte ihn auf der Kachel
   und war damit 21 % zu hoch UND inhaltlich eine andere Aussage.
   Gemessen: gap clamp(.9rem,2vw,1.6rem), Bild 4/5, align-items:start. */
.kora-cartoes{ display:grid; gap:clamp(.9rem,2vw,1.6rem);
  grid-template-columns:repeat(4,1fr); align-items:start }

/* > WordPress haelt diesen Container fuer eine Flow-Gruppe (Klasse
   > `is-layout-flow`) und setzt per `:root :where(.is-layout-flow) > *`
   > einen `margin-block-start` von 24px auf JEDES Kind ausser dem ersten.
   > In einer Flow-Gruppe ist das der Abstand zwischen den Bloecken; in
   > einem Raster ist es ein Versatz INNERHALB der Zelle. Folge: Karte 01
   > stand 24px hoeher als 02-04, die Rasterzeile war 436px hoch fuer
   > 412px hohe Karten.
   > Mit den alten Querformat-Bildern fiel es kaum auf, weil die Motive
   > randlos wirkten. Mit den Hochformaten vom 30.08.2026 steht der
   > Versatz als sichtbare Stufe in der Bildkante.
   > Am `.kora-cartoes__citacao` war es schon einmal aufgetreten und dort
   > mit einem oertlichen `margin:0` zugedeckt worden — behandelt wurde
   > das Symptom, nicht der Container. Gleiche Familie wie
   > `.kora-contacto__grelha > *` (28.08.2026): der Reset gehoert an den
   > Rasterbehaelter, nicht an das eine Kind, das gerade auffaellt. */
.kora-cartoes > *{ margin-block-start:0 }

/* ── Der Seidengrund liegt hinter der GANZEN Seite ──────────────────────
   Bis zum 30.08.2026 trug jede Sektion ihren eigenen Grund: Seide unter
   dem Manifesto, Kalkputz unter den Firmenkarten. Auf Stefans Wunsch liegt
   das Bild jetzt EINMAL hinter allem. Sektionen mit eigener, deckender
   Flaeche verdecken es; wo keine Flaeche liegt, kommt es zum Vorschein.
   Sichtbar ist es damit an genau zwei Stellen: Manifesto und Empresas.

   WARUM EINE FESTE EBENE UND NICHT `background-attachment`:
   Ein mitscrollender Grund muesste das Bild ueber die ganze Dokumenthoehe
   spannen — die Startseite ist rund 6.800 px hoch, das Bild 675 px breit.
   `cover` zoege es auf etwa das Fuenffache, und `repeat` zeigt Nahtkanten.
   Eine `position:fixed`-Ebene loest beides: Sie ist immer genau
   fenstergross, das Bild wird nie gestreckt, und sie ist NICHT
   `background-attachment: fixed` — also nicht die Eigenschaft, die auf
   iOS Safari Aerger macht. Optisch steht der Grund still, waehrend die
   Seite darueber laeuft.

   z-index:-1 setzt die Ebene hinter den Inhalt, aber vor die Grundfarbe
   der Seite (die aus theme.json bleibt als Rueckfall stehen, falls das
   Bild fehlt). Deshalb braucht body KEIN eigenes Stapelfeld — ein
   `isolation:isolate` hier wuerde die Ebene einsperren und unsichtbar
   machen.

   Der Schleier steckt in derselben Ebene. Gemessen am Manifesto: 87 %
   traegt Cátias Signatur in Terracota ueber 4,5:1; bei 74 % faellt sie auf
   3,2:1. Wer den Wert senkt, prueft mit reference/kora-grund.mjs nach. */
body::before{ content:""; position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(rgba(249,249,248,var(--kora-veu,.87)),
                                   rgba(249,249,248,var(--kora-veu,.87))),
                   var(--kora-materia-linho, none);
  background-size:cover; background-position:center }

/* Abschnitte, die den Grund NICHT zeigen sollen, brauchen eine eigene
   Flaeche. Mit einem Bild hinter der Seite ist "keine Flaeche" nicht
   dasselbe wie "die Seitenfarbe" — ohne diese Regel waere der Seidengrund
   in einem Abschnitt mehr zu sehen als gewollt.

   Sichtbar soll er in GENAU ZWEI Abschnitten sein: Manifesto und Empresas.
   Alle anderen decken ihn ab: Hero (Video), Serviços (diese Regel),
   Quem sou und Testemunhos (eigene Flaeche am Block) und die CTA-Faixa
   (eigenes Bild).

   `#sobre` stand hier bis zum 01.09.2026 mit derselben Farbe. Beim Tausch
   der Gruende von "Quem sou" und Testemunhos (Catia) musste die Regel weg:
   sie ist ein ID-Selektor und haette die neue Flaeche am Block ueberstimmt
   — die Sektion waere Branco Quente geblieben, und der Tausch haette an
   dieser einen Stelle einfach nicht stattgefunden, ohne Fehlermeldung.
   Seitdem steht die Farbe beider Sektionen dort, wo Cátia sie im Editor
   auch sieht und aendern kann. */
.kora-servicos{ background-color:var(--wp--preset--color--branco-quente) }

/* Die Firmenkarten stehen jetzt in einer eigenen Sektion und werden nicht
   mehr weggeschaltet. Dasselbe Raster wie bei den Personen-Diensten: vier
   Spalten, das Zitat belegt die ersten zwei. */
.kora-cartoes--firma{ align-items:start }

/* 18.09.2026 (Catarina) hatte hier auf ZWEI Spalten umgestellt, nachdem
   der Zitat-Block aus dem Raster genommen und als Fliesstext in den Kopf
   gewandert war — sonst haetten die zwei Karten die rechte Haelfte leer
   gelassen. Folge: 555x757 statt 265x394, also fast das Vierfache der
   Flaeche der Personen-Kacheln direkt darueber. Genau davor warnt der
   Kommentar unten, und Stefan hat es am 18.09.2026 gemeldet.

   Zurueck auf VIER Spalten. Der beschreibende Absatz uebernimmt dafuer
   wieder die Stelle des alten Zitats — Spalten 1-2 im Raster, die zwei
   Karten rechts daneben in 3-4 und damit exakt so gross wie nebenan.
   Gegengemessen im Browser: 265x394, identisch zu .kora-cartoes. */
.kora-cartoes--firma{ grid-template-columns:repeat(4, minmax(0, 1fr)) }
/* Die GANZE Textspalte steht seit dem 18.09.2026 IM Raster (Stefan):
   Etikett, Ueberschrift, Zwischenzeile, dann "Saber mais". Vorher lag der
   Kopf als eigene Zeile darueber, dadurch begannen die Karten erst weit
   unterhalb des Etiketts. Jetzt Spalten 1-2, oben buendig mit Spalte 3 —
   `align-items:start` am Raster steht schon weiter oben. */
.kora-empresas__intro{ grid-column:span 2; align-self:start;
  max-width:34ch; padding-right:2.7rem }
.kora-empresas__intro > *{ margin-block-start:0 }
.kora-empresas__intro > .kora-etiqueta{ margin-bottom:var(--kora-luft-zeile) }
.kora-empresas__intro > .kora-etiqueta ~ *{ margin-block-start:var(--kora-luft-zeile) }
/* Der "Saber mais"-Knopf steht seit dem 18.09.2026 in der Sektion
   Quem sou, hinter dem letzten Absatz. `.kora-empresas__acao` gab es
   dort nie eine eigene Regel — der Abstand kam vom Geschwister-Selektor
   des Intros. In Quem sou fehlt der, also hier ausdruecklich. */
.kora-sobre__acao{ margin:var(--kora-luft-zeile) 0 0 }
/* Schlusszeilen der Geschichte (/historia/). Zwei kurze Bloecke mit
   eigenen Zeilenumbruechen — sie tragen den Schluss und sollen nicht
   wie Fliesstext gelesen werden. 18.09.2026, Text von Catia. */


/* ── Hinweisfenster vor dem Kauf (Style Refresh) ────────────────────────
   Bewusst KEIN .kora-overlay: das ist der Textbehaelter fuer die
   Dienstbeschreibungen, mit Bildspalte, Schritten und Hoehenpinnung. Hier
   braucht es einen kurzen, breiten Kasten mit zwei Knoepfen. Wer das
   Overlay wiederverwendet, erbt dessen ganze Mechanik fuer vier Saetze. */
.kora-hinweis{ border:0; padding:0; max-width:min(92vw, 34rem); width:100%;
  background:var(--wp--preset--color--branco-quente);
  color:var(--wp--preset--color--quase-preto);
  box-shadow:0 2rem 4rem rgba(0,0,0,.18) }
.kora-hinweis::backdrop{ background:rgba(23,22,21,.55) }
.kora-hinweis__inner{ padding:clamp(1.75rem,4vw,2.75rem) }
.kora-hinweis h2{ margin:.4rem 0 0;
  font-family:var(--wp--preset--font-family--display); font-weight:300;
  line-height:1.25; font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem) }
.kora-hinweis p{ margin:.9rem 0 0; line-height:1.6;
  font-size:var(--wp--preset--font-size--corpo-sm);
  color:var(--wp--preset--color--grafite) }
.kora-hinweis .kora-etiqueta{ margin:0; color:var(--wp--preset--color--terracota) }
.kora-hinweis__acoes{ display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem 1.5rem; margin-top:1.75rem }

/* Beschreibender Absatz. */
.kora-empresas__descricao{
  margin:0; font-size:var(--wp--preset--font-size--corpo);
  color:var(--wp--preset--color--grafite); line-height:1.5 }
@media (max-width:900px){
  .kora-empresas__intro{ grid-column:1/-1; max-width:44ch;
    padding-right:0; margin-bottom:.5rem }
}

/* VIER Spalten, nicht zwei. Das Original nutzte fuer beide Zielgruppen
   dasselbe kompakte Raster; das Zitat belegt die ersten zwei Spalten
   (.svc-quote{grid-column:span 2}), die zwei Firmenkarten je eine.
   Mit zwei Spalten wurden die Bilder 555x694 statt 265x331 — doppelt so
   gross wie nebenan und ein voellig anderes Bild von der Seite.
   Seit 18.09.2026 gilt fuer `--firma` die neue Zwei-Spalten-Regel oben. */
/* `.kora-cartoes--empresas` mit `display:none` und die beiden
   `.is-empresas`-Regeln standen hier bis zum 30.08.2026. Sie schalteten die
   Firmenkarten im Serviços-Abschnitt ein und aus. Die Karten haben jetzt
   eine eigene Sektion (#empresas) und heissen dort `--firma`; ein
   `display:none` auf einer Klasse, die es nicht mehr gibt, waere eine
   Falle fuer den Naechsten, der sie wiederverwendet. */

.kora-cartao a{ display:block }
.kora-cartao img,
.kora-cartao__vazio{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; display:block;
  background:linear-gradient(135deg,var(--wp--preset--color--superficie),var(--wp--preset--color--branco-quente));
  transition:transform .9s var(--kora-ease) }
@media (hover:hover){
  .kora-cartao a:hover img{ transform:scale(1.04) }
  .kora-cartao a:hover h3{ color:var(--wp--preset--color--terracota) }
}
.kora-cartao{ position:relative }
/* > Bis zum 30.08.2026 stand hier `mix-blend-mode:difference`. Der Gedanke
   > ist gut — die Ziffer invertiert ihren Untergrund und traegt sich damit
   > auf hellen wie dunklen Motiven selbst. Das Verfahren hat aber eine
   > prinzipielle Luecke: GENAU IN DER MITTE versagt es. Mittelgrau
   > invertiert bleibt mittelgrau. Mit dem neuen Seidenbild lag die linke
   > obere Ecke von Karte 01 dort, und die "01" war praktisch unsichtbar —
   > im Bild gemessene Helligkeitsspanne 67 gegenueber 110 bis 186 auf den
   > anderen drei Karten.
   > Jetzt kraeftiges Weiss auf einem weichen Schleier. Der Schleier ist
   > kein Kasten, sondern ein Verlauf aus der Ecke heraus, der nach 120px
   > ausgelaufen ist — auf dunklen Motiven sieht man ihn nicht, auf hellen
   > traegt er gerade so viel, dass Weiss steht. Gemessen wird das mit
   > reference/kora-cartao-num.mjs, das die Ziffer einmal mit und einmal
   > ohne Inhalt aufnimmt und die Differenz als Glyphenmaske nutzt. */
/* Der Schleier haengt an der Karte, nicht an einem Bildrahmen: einen
   solchen gibt es nicht, das <a> enthaelt Ziffer, Bild und Text direkt.
   Die Karte ist bereits position:relative (weiter unten), und ihre linke
   obere Ecke IST die des Bildes. 110px Hoehe bleiben sicher im Bild
   (331px hoch), reichen also nie in die Ueberschrift. */
.kora-cartao::before{ content:""; position:absolute; inset:0 auto auto 0;
  width:190px; height:170px; pointer-events:none; z-index:1; border-radius:2px 0 0 0;
  /* RADIAL aus der Ecke, nicht linear. Ein linearer Verlauf in einem Kasten
     laeuft nur entlang SEINER Achse aus und schneidet an den beiden anderen
     Raendern hart ab — im Bild vom 30.08.2026 stand deshalb ein sichtbares
     Rechteck in der linken oberen Ecke, auf drei von vier Karten. Radial
     aus 0/0 faellt der Schleier in jede Richtung gleichmaessig; bei 100 %
     ist er bei null, und das liegt innerhalb des Elements. Darum ist der
     Kasten (190x170) groesser als die eigentlich gedeckte Flaeche. */
  background:radial-gradient(170px 150px at 0 0,
    rgba(23,22,21,.66) 0%, rgba(23,22,21,.40) 34%, rgba(23,22,21,.14) 66%, rgba(23,22,21,0) 100%) }
.kora-cartao__num{ position:absolute; top:.7rem; left:.8rem; z-index:2; color:#fff;
  font-size:.66rem; letter-spacing:.18em; font-weight:500;
  text-shadow:0 1px 2px rgba(23,22,21,.34) }
/* Gemessen: .card__meta padding-top .85rem, .card__name
   clamp(1.15rem,1.6vw,1.45rem), Zeilenhoehe 1.15. */
.kora-cartao h3{ margin:.85rem 0 0; font-size:clamp(1.15rem,1.6vw,1.45rem);
  line-height:1.15; transition:color .3s var(--kora-ease) }
/* `.kora-cartao__preco` ist am 22.09.2026 ersatzlos entfallen. Die acht
   Preiszeilen standen im Markup und waren per `display:none` unsichtbar —
   seit es sie gibt, hat sie nie jemand gesehen. Gepflegt werden mussten
   sie trotzdem bei jeder Preisaenderung, und genau solche Dubletten sind
   am 17.09.2026 auseinandergelaufen (Kachel 950 €, Kasse 980 €).
   Die Begruendung "damit Suchmaschinen ihn haben" traegt nicht: die
   Detailseiten nennen den Preis sichtbar, und fuer Maschinen waeren
   strukturierte Daten der richtige Weg, nicht versteckter Text. */
.kora-cartao__desc{ font-size:.78rem; line-height:1.45;
  color:var(--wp--preset--color--grafite); margin:.3rem 0 0 }
/* Gemessen an der alten .svc-quote: 555px breit (zwei Spalten), 37.44px
   Schrift, Zeilenhoehe 47.92, NICHT kursiv, Quase Preto, oben ausgerichtet,
   43.2px Luft nach rechts. Meine erste Fassung war kursiv, in Areia Escura
   und halb so gross — ein ganz anderes Gewicht in der Komposition. */
.kora-cartoes__citacao{ grid-column:span 2; margin:0; align-self:start;
  font-family:var(--wp--preset--font-family--display); font-weight:300;
  font-size:2.34rem; line-height:1.28; color:var(--wp--preset--color--quase-preto);
  padding-right:2.7rem }

/* Gemessen am alten Theme: bei 900px zwei Spalten, erst bei 460px eine. */
@media (max-width:900px){
  .kora-cartoes{ grid-template-columns:repeat(2,1fr) }
  .kora-cartoes__citacao{ grid-column:1/-1; max-width:44ch; padding-right:0; margin-bottom:.5rem }
}
@media (max-width:460px){
  /* `.kora-cartoes--empresas` stand hier mit in der Liste, obwohl
     `.kora-cartoes` sie ohnehin trifft — die Klasse gibt es seit dem
     30.08.2026 nicht mehr. */
  .kora-cartoes{ grid-template-columns:1fr }
  .kora-cartao img,
  .kora-cartao__vazio{ max-height:46vh }
}

/* ==================================================================
   TESTEMUNHOS
   height:100% + flex:1 setzt die Namenszeilen auf EINE Grundlinie —
   ohne das haengen sie auf drei Hoehen, weil die Zitate verschieden
   lang sind (am 25.08.2026 im Bild nachgewiesen).
   ================================================================== */
/* Das Raster zaehlt selbst, seit dem 18.09.2026. Vorher stand hier fest
   `repeat(3,1fr)` — richtig fuer die drei Platzhalter, aber sobald nur
   EINE echte Stimme dasteht, klebt sie in Spalte 1 und zwei Drittel der
   Breite bleiben leer. `auto-fit` laesst leere Spuren zusammenfallen:
   eine Stimme mittig, zwei nebeneinander, drei in einer Reihe. Catia
   liefert nach und nach nach — das Raster darf dabei nicht jedes Mal
   angefasst werden muessen. */
.kora-vozes{ display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  justify-items:center; align-items:stretch }
.kora-voz{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; height:100%; margin:0 }
.kora-voz blockquote{ margin:0; flex:1 1 auto; max-width:30ch;
  font-family:var(--wp--preset--font-family--display); font-weight:300; line-height:1.5;
  font-size:clamp(1rem,.9rem + .4vw,1.2rem); color:var(--wp--preset--color--grafite) }

/* EINE Stimme steht zweispaltig: Monogramm und Name links, das Zitat
   rechts (Stefan, 18.09.2026). Vorher lief sie als schmale Mittelsaeule
   ueber 30 Zeichen und wurde dadurch sehr hoch — viel Luft links und
   rechts, wenig Platz fuer den Text.

   Gebunden an `:only-child`, nicht an eine Zusatzklasse: sobald Catia
   die zweite Stimme liefert, greift die Regel von selbst nicht mehr und
   die Stimmen stehen wieder als Karten nebeneinander. Niemand muss daran
   denken, hier etwas zurueckzunehmen. */
@media (min-width:901px){
  .kora-voz:only-child{ display:grid; grid-template-columns:auto minmax(0,1fr);
    align-items:start; column-gap:clamp(2rem,4vw,3.5rem); row-gap:1rem;
    text-align:left; max-width:46rem }
  .kora-voz:only-child blockquote{ grid-column:2; grid-row:1; max-width:none; text-align:left }
  .kora-voz:only-child .kora-voz__mono{ grid-column:1; grid-row:1 }
  .kora-voz:only-child figcaption{ grid-column:2; grid-row:2; align-items:flex-start }
}
.kora-voz__mono{ width:72px; height:72px; flex:0 0 auto; border-radius:50%; display:grid;
  place-items:center; background:rgba(134,82,56,.10); box-shadow:0 0 0 1px var(--wp--preset--color--linha);
  font-family:var(--wp--preset--font-family--display); font-size:1.5rem; letter-spacing:.06em;
  color:var(--wp--preset--color--terracota) }
.kora-voz figcaption{ display:flex; flex-direction:column; gap:.15rem }
.kora-voz__nome{ font-size:var(--wp--preset--font-size--etiqueta); letter-spacing:.18em;
  text-transform:uppercase; color:var(--wp--preset--color--quase-preto) }
/* Grafit statt Areia Escura: 7,3:1 statt 3,0:1. Micro-Groesse in einer
   Zeile, die sagt WELCHE Leistung die Stimme betrifft — das ist Inhalt,
   nicht Zierde. */
.kora-voz__papel{ font-size:var(--wp--preset--font-size--micro); color:var(--wp--preset--color--grafite) }
/* `.kora-aviso` war der eingerahmte Hinweis "Exemplos de layout —
   testemunhos reais em breve" unter den Stimmen. Auf Stefans Wunsch am
   30.08.2026 entfernt, in beiden Sprachen. Die Regel ist mitgegangen: Ein
   Stil ohne Markup sieht beim naechsten Lesen wie ein vergessener Anschluss
   aus. Der offene Punkt bleibt: Es gibt weiterhin keine echten Testimonials
   — das steht in der Projektnotiz als Launch-Blocker, nicht mehr auf der
   Seite. */
@media (max-width:900px){ .kora-vozes{ grid-template-columns:1fr; gap:3rem } }

/* ==================================================================
   CONTACTO — invertiert, zwei Spalten
   ================================================================== */
/* > Stefan gemeldet 28.08.2026: "die Sektion ist nur halb breit". Gemessen
   > waren es 431 von 1440 px, also 30 %. Die Sektion trug das TEXTMASS
   > (contentSize) statt der Sektionsbreite (wideSize) — siehe die
   > ausfuehrliche Notiz in patterns/07-contacto.php.
   >
   > Das Raster ist absichtlich UNGLEICH geteilt (5/7): die Einladung ist
   > Fliesstext und darf nicht ueber ~34 Zeichen wachsen, das Formular
   > braucht dagegen zwei nebeneinanderliegende Felder. Zwei gleiche
   > Spalten haetten die Ueberschrift zu breit und das Formular zu eng
   > gemacht. `minmax(0,…)` statt `5fr 7fr`, weil ein `<input>` eine
   > Mindestbreite mitbringt und die Spalte sonst darueber hinauswaechst. */
.kora-contacto__grelha{ display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,5fr) minmax(0,7fr) }
/* NUR die Rasterkinder entschaerfen, nicht deren Inhalt. Beim ersten Bau
   stand hier auch `.kora-contacto__convite > *` — damit war der
   Block-Abstand von 24px zwischen Etikett, Ueberschrift und Fliesstext weg
   und die drei klebten aneinander. Gemessen: Etikett y=4493, h2 y=4513,
   Text y=4701, jeweils margin-top 0. Im Bild sah das nach "zu enger
   Zeilenabstand" aus, war aber ein zu weit gefasster Selektor.
   Merksatz: ein Reset, der einen Kern-Abstand wegnimmt, gehoert genau auf
   die Ebene, auf der der Abstand stoert — keine Ebene tiefer. */
.kora-contacto__grelha > *{ margin-block-start:0 }
/* Die Einladung behaelt ihr Lesemass, auch wenn die Spalte breiter wird. */
.kora-contacto__convite h1,
.kora-contacto__convite h2{ max-width:22ch }
.kora-contacto__convite p:not(.kora-etiqueta){ max-width:34ch }
/* Trennung als Haarlinie, nicht als Rahmen oder Karte: dieselbe Linie wie
   .kora-ponto. Die Linie sitzt in der Mitte der Gasse — links der Abstand
   aus `gap`, rechts dieselbe Polsterung.
   > Kein `align-items:start` auf dem Raster: die Linie ist der Rand der
   > rechten Spalte, und mit `start` war die Spalte nur so hoch wie das
   > Formular (253px) — die Linie endete als Stummel neben einem 384px
   > hohen Text. Der Standard `stretch` zieht beide Spalten auf die
   > Zeilenhoehe; das Formular bleibt trotzdem oben, weil es im normalen
   > Fluss sitzt. */
@media (min-width:901px){
  .kora-contacto__forma{ padding-left:clamp(2rem,5vw,4rem);
    border-left:1px solid rgba(249,249,248,.18) }
  /* In der Spalte fuellt das Formular die Breite (rund 560 px bei 1136 px
     Sektionsbreite) — die eigene Deckelung waere hier doppelt gemoppelt. */
  .kora-contacto__forma .kora-form{ max-width:none; margin-top:0 }
}
@media (max-width:900px){
  .kora-contacto__grelha{ grid-template-columns:1fr; gap:clamp(2rem,5vw,2.75rem) }
  /* Einspaltig steht das Formular sonst auf 860 px — zu breit fuer drei
     Felder. Hier greift die Deckelung von .kora-form wieder. */
  .kora-contacto__convite h1,
  .kora-contacto__convite h2,
  .kora-contacto__convite p:not(.kora-etiqueta){ max-width:34ch }
}
/* Groszuegiger als vorher (gap 1rem, Polsterung .7em). In der schmalen
   431px-Spalte war die Enge nicht aufgefallen; in der breiten Spalte stand
   ein gedraengtes Formular neben viel Luft und sah billig aus. "Premium,
   mas acessível" heiszt hier: Felder duerfen atmen. */
.kora-form{ display:grid; gap:1.4rem; max-width:560px; margin-top:2rem; text-align:left }
.kora-form__linha{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem }
.kora-campo{ display:flex; flex-direction:column; gap:.4rem; margin:0 }
.kora-campo label{ font-size:var(--wp--preset--font-size--micro); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(249,249,248,.72) }
.kora-campo input,
.kora-campo textarea{ font:inherit; font-size:.95rem; background:transparent; border:0;
  border-bottom:1px solid rgba(249,249,248,.34); padding:.85em .2em;
  color:var(--wp--preset--color--branco-quente); transition:border-color .3s }
/* .42 gemessen 3,93:1 gegen Quase Preto — unter der 4,5:1-Grenze. Die
   Platzhalter sind hier nicht dekorativ, sie zeigen das FORMAT
   ("o.teu@email.com"); wer sie nicht lesen kann, verliert Information.
   Gemessen wird im Bild nach der Deckkraft-Mischung, nicht am CSS-Wert:
   rgba() auf dunklem Grund sieht in der Regel besser aus, als es ist. */
.kora-campo input::placeholder,
.kora-campo textarea::placeholder{ color:rgba(249,249,248,.56) }
/* Der Fokus zeigt sich als DOPPELT so starke Unterlinie, nicht als Kasten:
   ein Rahmen um ein Feld, das sonst nur eine Linie hat, waere ein zweites
   Gestaltungsmittel fuer denselben Zweck. Die Verstaerkung laeuft ueber
   box-shadow statt border-width — 1px -> 2px Rahmen wuerde das Feld und
   alles darunter um einen Pixel verschieben. */
.kora-campo input:focus,
.kora-campo textarea:focus{ outline:none;
  border-bottom-color:var(--wp--preset--color--branco-quente);
  box-shadow:0 1px 0 0 var(--wp--preset--color--branco-quente) }
.kora-campo textarea{ resize:vertical; min-height:96px }
/* > Vorher stand hier nur `outline-color`. Der Umriss hatte damit eine
   > Farbe, aber weiterhin `outline-style:none` — gemessen am 28.08.2026:
   > `outline: rgb(249,249,248) none 3px`. Es gab also nie einen Fokusring,
   > und die Regel sah aus als gaebe es einen. Eine Farbe ohne Stil ist
   > kein Ring; `outline` braucht alle drei Angaben.
   > Nur fuer Knoepfe und Links — die Felder loesen es oben selbst. */
.kora-contacto a:focus-visible,
.kora-contacto button:focus-visible{
  outline:2px solid var(--wp--preset--color--branco-quente);
  outline-offset:3px }
/* Chrome/Safari erzwingen bei Autofill eine helle Fuellfarbe und wuerden
   weisse Kaesten mitten in den dunklen Block setzen. */
.kora-campo input:-webkit-autofill,
.kora-campo input:-webkit-autofill:hover,
.kora-campo input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--wp--preset--color--branco-quente);
  -webkit-box-shadow:0 0 0 100px var(--wp--preset--color--quase-preto) inset;
  caret-color:var(--wp--preset--color--branco-quente);
  transition:background-color 0s 600000s;
}
/* `border:0` gegen den Browser-Standard: ein <button> ohne Rahmenangabe
   traegt `2px outset` — gemessen am 28.08.2026 auch auf diesem hellen
   Knopf. Auf Branco Quente ist die Fase kaum zu sehen, aber sie ist da und
   passt zu einer Marke, die "Refinamento, nunca ostentação" will, gerade
   nicht. Bewusst NUR hier: `.kora-botao--cheio` steht auch in anderen
   Sektionen, und die hat Stefan nicht zur Aenderung gegeben. */
/* min-height 44px: gemessen war der Knopf 34px hoch — unter der
   Mindestgroesze fuer eine Beruehrflaeche. Die Ursache steckt in
   `.kora-botao{padding:.95em 1.9em}` bei 12px Schrift und gilt damit fuer
   JEDEN Knopf der Website; hier nur der Kontakt-Knopf, weil nur diese
   Sektion beauftragt war. Der Rest steht in der Uebergabe an Stefan. */
.kora-contacto .kora-botao--enviar{ background:var(--wp--preset--color--branco-quente);
  color:var(--wp--preset--color--quase-preto); border:0; min-height:44px;
  justify-self:start; margin-top:.6rem }
.kora-contacto .kora-botao--enviar:hover{ background:var(--wp--preset--color--adobe) }
/* Von `micro` (11,52 px) auf `etiqueta` (12,48 px), 30.08.2026. Das hier
   ist kein Etikett, sondern ein ganzer Satz Fliesstext — und er steht
   ausgerechnet an der Stelle, an der jemand dem Formular vertrauen soll.
   Die Etiketten in gesperrten Versalien bleiben auf `micro`: Sie werden
   anders gelesen, und sie zu vergroessern wuerde die Sektionsanfaenge
   lauter machen, als sie sein sollen. */
.kora-nota{ font-size:var(--wp--preset--font-size--etiqueta); color:rgba(249,249,248,.56); margin:.8rem 0 0 }
/* Knopf und Hinweis auf EINER Zeile. Vorher hing der Hinweis allein unter
   dem Knopf und liess den Block nach unten auslaufen; in der breiteren
   Spalte ist daneben Platz. `align-items:baseline` haelt die Schriftlinien
   beieinander, `flex-wrap` bricht es auf schmalen Spalten wieder um. */
.kora-form__rodape{ display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.9rem clamp(1.25rem,3vw,2rem); margin-top:.6rem }
.kora-form__rodape .kora-botao--enviar{ margin-top:0; flex:0 0 auto }
.kora-form__rodape .kora-nota{ margin:0; flex:1 1 18ch; min-width:18ch;
  text-wrap:pretty }
.kora-hp{ position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden }
@media (max-width:640px){ .kora-form__linha{ grid-template-columns:1fr } }
/* Auf dem Telefon blieben neben dem Knopf nur ~147px fuer den Hinweis —
   drei gequetschte Zeilen. Unter 480px bekommt er eine eigene Zeile.
   `flex-basis:100%` statt `display:block`, damit der Umbruch aus derselben
   Mechanik kommt wie das Nebeneinander darueber. */
@media (max-width:480px){ .kora-form__rodape .kora-nota{ flex-basis:100% } }

/* ==================================================================
   FAIXA FINAL
   ================================================================== */
.kora-faixa{ position:relative; color:#fff; overflow:hidden;
  background-image:var(--kora-faixa-img); background-size:cover; background-position:center }
.kora-faixa--sem-imagem{ background-image:linear-gradient(135deg,
  var(--wp--preset--color--terracota),var(--wp--preset--color--mogno)) }
.kora-faixa__veu{ position:absolute; inset:0; background:rgba(23,22,21,.52); z-index:0 }

/* ------------------------------------------------------------------
   Formularkarte in der Schluss-Faixa            (02.09.2026, Stefan)
   ------------------------------------------------------------------
   Helle Flaeche auf dem Bild. Der Grund ist DECKEND (Superficie), nicht
   durchscheinend: durch eine halbtransparente Karte waeren die
   Feldlinien vor wechselndem Bildinhalt gelandet, und der Kontrast eines
   Eingabefeldes haenge dann davon ab, welche Stelle des Fotos gerade
   darunter liegt. Deckend ist der Kontrast eine Zahl statt eines
   Wahrscheinlichkeitswerts.
   ------------------------------------------------------------------ */
.kora-faixa__cartao{
  background:var(--wp--preset--color--superficie);
  color:var(--wp--preset--color--quase-preto);
  border-radius:2px;
  padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,4vw,3.5rem);
  max-width:800px; margin-inline:auto;
  text-align:left;
  box-shadow:0 24px 60px rgba(23,22,21,.22) }
/* Das Formular selbst ist fuer die DUNKLE Kontaktflaeche gebaut —
   Beschriftungen, Linien und Platzhalter stehen dort in Weisstoenen. Auf
   der hellen Karte waeren sie unsichtbar. Darum hier die Gegenstuecke,
   alle gegen Superficie #EDEAE6 gemessen. */
.kora-faixa__cartao .kora-form{ max-width:none; margin-top:0 }
.kora-faixa__cartao .kora-campo label{ color:var(--wp--preset--color--terracota) }   /* 5,34:1 */
.kora-faixa__cartao .kora-campo input,
.kora-faixa__cartao .kora-campo textarea{
  color:var(--wp--preset--color--quase-preto);                                        /* 15,07:1 */
  border-bottom-color:var(--wp--preset--color--terracota) }
/* Der Platzhalter ist Grafit (6,81:1) und NICHT Terracota wie die
   Beschriftung: er zeigt das Format ("o.teu@email.com"), ist aber kein
   eingegebener Wert. Stuende er in derselben Farbe wie das Etikett, saehe
   ein leeres Feld aus wie ein ausgefuelltes — der haeufigste Grund, warum
   Formulare unabgeschickt bleiben. Areia Escura waere naeher am
   bisherigen Eindruck, liegt hier aber bei 2,64:1. */
.kora-faixa__cartao .kora-campo input::placeholder,
.kora-faixa__cartao .kora-campo textarea::placeholder{
  color:var(--wp--preset--color--grafite); opacity:1 }
/* Fokus: dieselbe Mechanik wie auf der dunklen Flaeche (verdoppelte
   Unterlinie ueber box-shadow, damit nichts um einen Pixel springt), nur
   in Terracota statt Weiss. */
.kora-faixa__cartao .kora-campo input:focus,
.kora-faixa__cartao .kora-campo textarea:focus{
  border-bottom-color:var(--wp--preset--color--terracota);
  box-shadow:0 1px 0 0 var(--wp--preset--color--terracota) }
.kora-faixa__cartao .kora-nota{ color:var(--wp--preset--color--grafite) }             /* 6,81:1 */
/* Die Faixa zentriert alles (Etikett, Titel, Knopf). Ein Formular gehoert
   nicht dazu: Beschriftungen und Felder brauchen eine gemeinsame linke
   Kante, sonst sucht das Auge bei jedem Feld neu. */
.kora-faixa__cartao,
.kora-faixa__cartao *{ text-align:left }
.kora-faixa__cartao .kora-form__rodape{ justify-content:flex-start }
.kora-faixa > *:not(.kora-faixa__veu){ position:relative; z-index:1 }

/* ---------- Rodapé ---------- */
/* `.kora-rodape__linha` stand hier bis zum 01.09.2026 — Rest eines
   frueheren Fussaufbaus, den kein Element mehr trug. */
.kora-rodape a:hover{ color:var(--wp--preset--color--adobe) }

/* ==================================================================
   ZWEISPALTIGE SEKTIONEN (Abordagem, Quem sou)
   Gemessen: Container 1280 max, innen 1136 nutzbar, zwei Spalten 528 px
   mit 80 px Zwischenraum. Bild 528x660 (4:5).
   Reihenfolge ist NICHT beliebig — die Referenz hat bei Abordagem das
   Bild links, bei Quem sou das Bild rechts. Beides war in meinem ersten
   Bau falsch: Abordagem hatte gar kein Bild, Quem sou es auf der
   falschen Seite.
   ================================================================== */
/* Gemessen am alten .split: gap clamp(2rem,6vw,5rem) — 80px bei 1440,
   32px bei 390. Ein fester Wert machte Mobil zu luftig. */
.kora-duplo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem);
  align-items:center; max-width:1136px; margin-inline:auto }
.kora-duplo__img{ position:relative; margin:0 }
.kora-duplo__img img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; display:block }
/* Bildmarke sitzt AUF dem Bild, nicht im Textblock (gemessen: 212x66,
   Schrift 18.4px). Im ersten Bau stand sie als Absatz in der Textspalte. */
.kora-duplo__marca{ position:absolute; left:0; bottom:0; transform:translate(-1.5rem, 1.5rem);
  background:var(--wp--preset--color--branco-quente); color:var(--wp--preset--color--quase-preto);
  padding:17.6px 24px; font-size:var(--wp--preset--font-size--marca);
  font-family:var(--wp--preset--font-family--display); border-radius:2px;
  box-shadow:0 10px 30px rgba(23,22,21,.10) }
.kora-duplo--img-direita .kora-duplo__img{ order:2 }
@media (max-width:900px){
  .kora-duplo{ grid-template-columns:1fr }
  .kora-duplo--img-direita .kora-duplo__img{ order:0 }
  .kora-duplo__marca{ transform:translate(-.75rem, .75rem) }
}

/* Die drei Punkte. Exakt die Werte des alten Themes (.ticks):
     ul  margin-top 2rem, gap 1.1rem
     li  flex, gap 1rem, align-items:flex-start, .98rem
     .n  Display-Schrift kursiv, 1.3rem, Adobe
   Entscheidend ist, dass <strong> INLINE laeuft und der Text direkt
   dahinter weiterfliesst. Meine erste Fassung hatte den Titel als eigene
   Blockzeile — dadurch war die Liste auf Mobil 133 px zu hoch und die
   Anmutung eine andere: aus einem Satz wurden zwei Zeilen. */
.kora-pontos{ list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.1rem }
.kora-pontos li{ display:flex; gap:1rem; align-items:flex-start;
  font-size:.98rem; color:rgba(249,249,248,.85) }
.kora-pontos__n{ flex:0 0 auto; font-family:var(--wp--preset--font-family--display);
  font-style:italic; color:var(--wp--preset--color--adobe); font-size:1.3rem; line-height:1 }
.kora-pontos strong{ font-weight:400; color:var(--wp--preset--color--branco-quente) }

/* ---------- Fussbereich: drei Reihen mit Trennlinien ---------- */
/* Der Kommentar sagte bis zum 01.09.2026 "gemessen 159 px" — das stimmte
   fuer ZWEI Reihen. Mit der Kontaktzeile (30.08.2026) war der Fuss auf
   251 px gewachsen, ohne dass jemand die Zahl nachgezogen haette. Stefans
   Befund "ca. zwei Zeilen zu hoch" war genau das: eine Reihe kam dazu, die
   Abstaende blieben auf das alte, luftigere Mass gerechnet.

   Die Luft der drei Reihen haengt jetzt an EINER Stelle (Variable weiter
   unten in dieser Regel) statt an drei gleichen Zahlen. Wer den Fuss enger
   oder weiter will, dreht an einer Zahl — gleiche Werte, die man einzeln
   pflegen muss, laufen sonst genau so auseinander wie hier.

   Gemessen: padding-block clamp(.95rem,1.7vw,1.3rem) -> 20.8px bei 1440,
   15.2px bei 393. Ein festes Mass machte den Fuss auf Mobil frueher 41 %
   zu hoch; das clamp bleibt deshalb, nur enger gefasst. */
.kora-rodape{ --kora-fuss-luft:.75rem;
  padding-top:clamp(.95rem,1.7vw,1.3rem)!important;
  padding-bottom:clamp(.95rem,1.7vw,1.3rem)!important }
/* > Der Fuss war bis zum 30.08.2026 dunkel (Quase Preto). Auf Stefans
   > Wunsch jetzt hell wie der Kopf im gescrollten Zustand — dieselbe Farbe,
   > `branco-quente`, damit Anfang und Ende der Seite zusammengehoeren.
   > Mitgezogen werden musste ALLES, was auf Weiss gerechnet war: die
   > Trennlinien (waren rgba(255,255,255,.12) und damit auf hellem Grund
   > unsichtbar), der Untertitel der Marke und die Fusszeile. Eine
   > Hintergrundfarbe umzustellen ist nie nur eine Zeile — jede Farbe, die
   > als "auf dunkel" gedacht war, ist danach falsch. */
.kora-rodape__topo{ display:flex; justify-content:space-between; align-items:center;
  gap:2rem; flex-wrap:wrap; padding-bottom:var(--kora-fuss-luft);
  border-bottom:1px solid var(--wp--preset--color--linha) }
.kora-rodape__baixo{ display:flex; flex-direction:column; gap:.5rem;
  padding-top:var(--kora-fuss-luft); font-size:.76rem; color:var(--wp--preset--color--grafite) }
.kora-rodape__meta{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.kora-rodape__marca{ display:flex; flex-direction:column; gap:.3rem }
/* Kopf und Fuss tragen dieselbe Wortmarke und darum dieselbe Sperrung.
   Im Kopf steht sie seit dem 09.09.2026 hier statt als Blockattribut in
   parts/header.html — inline gewinnt immer, und ein Wert, den die
   Variable nicht erreicht, ist keine Quelle, sondern eine zweite Kopie.
   Kein Kern-Konflikt: core-block-supports-inline-css gibt letter-spacing
   fuer diesen Block jetzt gar nicht mehr aus. */
.kora-marca__nome{ letter-spacing:var(--kora-marca-tracking) }

.kora-rodape__nome{ font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--subtitulo);
  letter-spacing:var(--kora-marca-tracking); line-height:1 }
/* `.kora-rodape__sub` ("Image Consulting" unter der Wortmarke) ist am
   02.09.2026 auf Stefans Wunsch entfernt — dieselbe Entscheidung wie am
   28.08. im Kopfbereich, jetzt auch im Fuss. Die Regel ist mit dem
   Element geloescht statt stehen zu lassen; sie trug die Begruendung,
   warum die Farbe Grafit war und nicht Areia Escura (3,00:1 waere fuer
   gesperrte Versalien in Micro-Groesse zu wenig gewesen) — die steht jetzt
   hier, falls der Zusatz je zurueckkommt. */
/* Abstand ueber die KINDER, nicht ueber `gap` (22.09.2026).
   Im Edge-Uebersetzer klebten die vier Rechtslinks zu
   "ContactPrivacyLegal NoticeComplaints Book" zusammen. Der Uebersetzer
   baut den Inhalt um und haengt seine eigenen Knoten dazwischen; damit
   sind die <a> keine Flex-Kinder mehr und `gap` greift ins Leere.
   Ein Rand am Kind ueberlebt jede Umbauerei — er haengt am Element
   selbst, nicht an der Rolle, die es im Elternlayout spielt.
   Der letzte Link bekommt keinen, sonst haengt rechts Luft. */
.kora-rodape__links{ display:flex; flex-wrap:wrap; font-size:0.9rem }
.kora-rodape__links a{ margin-inline-end:1.6rem }
.kora-rodape__links a:last-child{ margin-inline-end:0 }
.kora-rodape__links a:hover{ color:var(--wp--preset--color--adobe) }
/* Nur die Fusszeile, NICHT die Rechtslinks: die sind seit dem 01.09.2026
   ebenfalls Kinder von __baixo. Als die Regel geschrieben wurde, stand dort
   nichts als Copyright und Urheberzeile — sie haette die vier Rechtslinks
   still unterstrichen, und das faellt in einem Screenshot kaum auf. */
.kora-rodape__meta a{ text-decoration:underline; text-underline-offset:.2em }

/* Kontaktzeile: Instagram und Mail. Bis zum 01.09.2026 eine EIGENE Reihe
   zwischen Marke und Fusszeile; auf Catias Wunsch steht sie jetzt rechts in
   der Kopfreihe, gegenueber der Wortmarke. Damit hat der Fuss zwei Reihen
   statt drei — und die Kontaktmoeglichkeit den prominenten Platz, den eine
   Rechtslink-Liste nicht braucht.
   Kein padding und keine Haarlinie mehr: beides gehoerte zur Reihe, nicht
   zum Inhalt. Waeren sie stehengeblieben, saesse mitten in der Kopfreihe
   eine Linie unter Instagram und Mail. */
.kora-rodape__contacto{ display:flex; flex-wrap:wrap; align-items:center;
  gap:1.2rem 2.2rem }
.kora-social{ display:inline-flex; align-items:center; gap:.55rem;
  font-size:.9rem; color:var(--wp--preset--color--quase-preto);
  transition:color .4s var(--kora-ease) }
.kora-social svg{ flex:0 0 auto; transition:transform .4s var(--kora-ease) }
.kora-social:hover{ color:var(--wp--preset--color--terracota) }
.kora-social:hover svg{ transform:translateY(-2px) }
@media (prefers-reduced-motion:reduce){ .kora-social:hover svg{ transform:none } }
@media (max-width:640px){
  /* Auf dem Handy passen die vier Rechtslinks nicht in eine Zeile — der
     Livro de Reclamações (01.09.2026) bricht um und macht die Reihe 40 px
     hoeher. Ohne Gegenzug waere der Fuss dadurch HOEHER geworden als vor
     dem Kuerzen, also genau das Gegenteil des Auftrags.
     Geholt wird die Hoehe an zwei Stellen, an denen sie nichts kostet:
     weniger Luft zwischen Marke und Linkreihe (2rem war fuer EINE
     Linkzeile gedacht) und ein engeres --kora-fuss-luft.
     NICHT angetastet: `gap` der Linkreihe. Die Links sind 24 px hoch, bei
     1rem Zeilenabstand liegen zwei Trefferflaechen 40 px auseinander —
     schon jetzt unter den 44 px, mit denen weiter unten die Kontaktzeile
     gerechnet ist. Enger zu stellen hiesse, Hoehe gegen Treffsicherheit
     zu tauschen. */
  .kora-rodape{ --kora-fuss-luft:.6rem }
  .kora-rodape__topo{ flex-direction:column; align-items:flex-start; gap:1.25rem }
  .kora-rodape__links a{ margin-inline-end:1rem }
  /* Untereinander, sonst bricht die lange Mailadresse mitten im Wort.
     Der Abstand ist gemessen, nicht gegriffen: Die Zeilen sind 23 px hoch,
     bei .9rem (14,4 px) betrug der Zeilenabstand 37,4 px — zwei
     Trefferflaechen von 44 px haetten sich ueberlappt, und dann gewinnt
     nicht die naechstgelegene, sondern die spaetere im Markup. 1,35rem
     ergibt 44,6 px Abstand, gerade genug. */
  /* align-items MUSS hier zurueckgesetzt werden. In der Grundregel steht
     `center` und meint "senkrecht mittig neben der Wortmarke" — sobald die
     Reihe hier auf `column` kippt, zentriert dieselbe Eigenschaft WAAGERECHT.
     Gemessen bei 393 px: Instagram und Mail begannen bei x=101 statt am
     linken Rand, waehrend alles andere im Fuss linksbuendig blieb. Eine
     Zeile Desktop-Feinschliff, die auf dem Handy die Ausrichtung umlegt. */
  .kora-rodape__contacto{ flex-direction:column; align-items:flex-start; gap:1.35rem }
  .kora-social{ font-size:.85rem }
}

/* ==================================================================
   KOPFBEREICH AUF UNTERSEITEN
   > Von mir am 26.08.2026 fast ausgeliefert: der Kopf startet
   > durchsichtig mit weisser Schrift, weil auf der Startseite ein
   > dunkles Hero-Video darunterliegt. Auf Unterseiten gibt es das
   > nicht — gemessener Kontrast 1,05:1, die Navigation war schlicht
   > UNSICHTBAR. Kein Test haette das gemeldet: HTTP 200, keine
   > JS-Fehler, alle Elemente im DOM. Nur der Bildvergleich hat es
   > gezeigt.
   > Ohne Hero ist der Kopf darum von Anfang an fest.
   ================================================================== */
body:not(.home) .kora-cabecalho{
  position:sticky;
  background:var(--wp--preset--color--branco-quente);
  color:var(--wp--preset--color--quase-preto);
  box-shadow:0 1px 0 var(--wp--preset--color--linha);
}
/* > Der Leseschutz-Verlauf (`.kora-cabecalho::before`, weiter unten) gehoert
   > zum durchsichtigen Kopf UEBER DEM VIDEO. Auf Unterseiten gibt es kein
   > Video, der Kopf hat hier von Anfang an eine eigene Flaeche — und der
   > dunkle Verlauf lag trotzdem darueber. Stefan am 02.09.2026 zu
   > /contacto/: "der Header wird grau, das funktioniert nicht ganz".
   >
   > Gemessen im echten Browser, Mitte des Kopfes: 138,137,136 statt der
   > Flaechenfarbe 249,249,248 — der Kopf war also nicht hell mit einem
   > Schatten, sondern durchgehend grau. Positivkontrolle: dieselbe Messung
   > mit abgeschaltetem ::before ergibt an allen drei Punkten 249,249,248.
   >
   > `z-index:-1` am ::before hat NICHT geschuetzt. Es hat sichtbar
   > gemacht, dass der Verlauf hier gar keine Aufgabe hat: er verschwindet
   > erst mit `.is-solido`, und das kommt auf Unterseiten erst nach 40px
   > Scrollen — sichtbar war der Fehler also genau beim Seitenaufruf.
   >
   > `content:none` statt `opacity:0`: ein Element, das hier keine Aufgabe
   > hat, soll es auch nicht geben. Sonst sucht der naechste Leser einen
   > Zustand, in dem es doch erscheint. */
body:not(.home) .kora-cabecalho::before{ content:none }

/* ==================================================================
   FLIESSTEXT auf Unter- und Serviceseiten
   Werte aus dem alten .prose / .article__body uebernommen.
   ================================================================== */
.kora-servico > *,
.kora-pagina > *{ margin-block-start:0 }
/* ------------------------------------------------------------------
   Serviceseite: kleines Foto neben dem Text, nicht darueber
   ------------------------------------------------------------------
   Bis zum 10.09.2026 stand das Beitragsbild 1000 px breit und mittig UEBER
   dem Text. Gemessen auf /style-key/ bei 1440 px Fenster: 1000x1238 px —
   das Foto belegte die ersten ZWEI Bildschirme, Etikett und Titel des
   Dienstes begannen erst bei 2100 px Dokumenthoehe. Wer aus der Kasse
   zurueckkam oder ohne JavaScript hier landete, sah eine Seite ohne
   erkennbaren Gegenstand.
   Dazu die alte Rechnung, die schon im vorigen Kommentar an dieser Stelle
   stand: die vier Dienstfotos sind nativ 735x910. 1000 px waren also
   bereits 36 % Aufblasen — auf einer Seite, deren Ware das Bild ist.

   Jetzt zwei Spalten wie im Overlay derselben Leistung (Bild links, Text
   rechts): der Aufbau ist damit auf beiden Wegen derselbe, und die Spalte
   des Textes bleibt unangetastet bei 39.5rem. Das Foto ist maximal 244 px
   breit — auch auf einem 2x-Display (488 px) noch weit unter den nativen
   735 px, das Bild wird also nie wieder aufgeblasen.

   Es steht `sticky`, weil die Textspalte zwei Bildschirme lang ist und eine
   244-px-Spalte daneben sonst zu 90 % leer waere.

   `top` braucht KEINEN Platz fuer den Kopf: `.kora-cabecalho` ist auf
   Unterseiten zwar `position:sticky`, steckt aber in ihrem eigenen
   <header>-Wrapper der Vorlage — und der ist nur so hoch wie sie selbst.
   Der Klebebereich endet damit sofort; gemessen am 10.09.2026 auf
   /style-key/ war der Kopf schon bei 200 px Scrollhoehe aus dem Bild
   (rect.top -199). Deshalb steht hier der reine Rhythmuswert.
   Wer den Kopf auf Unterseiten wirklich stehen laesst, muss diesen Wert
   um dessen Hoehe erhoehen (gescrollt 77 px, ungescrollt 99 px), sonst
   faehrt das Foto darunter.

   KEIN Texteingriff: Etikett, Titel, Akkordeons, Preis und Knopf sind
   Seiteninhalt und bleiben unberuehrt (Stefans Vorgabe, 10.09.2026).
   ------------------------------------------------------------------ */
.kora-servico{
  display:grid; align-items:start; justify-content:center;
  grid-template-columns:clamp(180px,17vw,244px) minmax(0,39.5rem);
  column-gap:clamp(1.8rem,3.4vw,3.25rem);
}
/* `margin-inline:0!important` ist hier keine Bequemlichkeit, sondern die
   einzige Sprache, die die Gegenseite spricht: das constrained-Layout von
   WordPress setzt

     .is-layout-constrained > :where(:not(.alignleft)…){
       margin-left:auto!important; margin-right:auto!important }

   im <head>. Gegen `!important` hilft kein Kindselektor — der erste
   Versuch am 10.09.2026 mit `.kora-servico > .kora-servico__hero` (doppelt
   so spezifisch) blieb wirkungslos, das Foto stand bei 390 px Fenster
   weiter bei left 94.5 px, also mittig. Gefunden erst, als ich alle
   passenden Regeln aus dem CSSOM aufgelistet habe statt zu raten.
   Am Rechner faellt es nicht auf, weil dort die Rasterspur die Breite
   vorgibt — sichtbar ist es nur unter 900 px. */
.kora-servico > .kora-servico__hero{
  grid-column:1; grid-row:1; margin:0; margin-inline:0!important; max-width:none;
  align-self:start; position:sticky; top:2rem;
}
.kora-servico__hero img{ width:100%; height:auto; border-radius:2px; display:block }
.kora-servico > .wp-block-post-content{ grid-column:2; grid-row:1 }

/* Unter 900 px ist fuer zwei Spalten kein Platz — dann wieder untereinander,
   das Foto aber klein und LINKS statt mittig: ein 220-px-Bild in der Mitte
   einer schmalen Spalte sieht aus wie ein Fehler, an der Kante liest es
   sich als Absicht. Kein `sticky` mehr; ein mitfahrendes Bild verdeckt auf
   einem Telefon den halben Text. */
@media (max-width:899px){
  .kora-servico{ display:block }
  .kora-servico > .kora-servico__hero{ position:static; width:min(46%,220px);
    margin:0 0 clamp(1.4rem,4vw,2rem); margin-inline:0!important }
}

.kora-servico h1,
.kora-pagina h1{ margin-bottom:.4rem }
.kora-servico h2,
.kora-pagina h2{ margin:clamp(2.2rem,4vw,3rem) 0 .8rem }
.kora-servico h3,
.kora-pagina h3{ margin:1.8rem 0 .5rem }
.kora-servico p,
.kora-pagina p{ margin:0 0 1rem; max-width:68ch }
.kora-servico ul, .kora-servico ol,
.kora-pagina ul, .kora-pagina ol{ margin:0 0 1.2rem; padding-left:1.2rem; max-width:68ch }
.kora-servico li,
.kora-pagina li{ margin:.35rem 0 }
/* Der Aufklapper liest sich nicht als anklickbar (Stefan, 02.09.2026):
   "Condicoes e letras pequenas" sah aus wie eine Zwischenzeile. Er traegt
   zwar einen eigenen Marker, der steht aber RECHTS am Rand und wird neben
   dem langen Text nicht als seine Bedienung gelesen.
   Unterstrichen wie ein Link — und mit `underline-offset`, damit die Linie
   die Unterlaengen nicht durchschneidet.
   17.09.2026 (Catarina): NUR beim Hovern, nicht dauerhaft. Der frueh-
   ere Kommentar sprach dagegen ("was man erst findet, wenn man schon
   da ist, hilft nicht beim Finden"), aber Catarina findet den daue-
   rhaften Strich zu laut neben den anderen Labels der Seite. Etikette,
   Grossbuchstaben und Buchstabenabstand tragen die Klickbarkeit weiterhin.
   Gilt beide Klassen (`:is`), weil die vier Personen-Seiten
   `svc-cond kora-termos` tragen und die zwei Firmen-Seiten nur `svc-cond` —
   Fund vom 01.09.2026. */
:is(.kora-termos, .svc-cond) > summary{
  text-decoration:none; text-underline-offset:.22em;
  text-decoration-thickness:from-font }
:is(.kora-termos, .svc-cond) > summary:hover{
  text-decoration:underline }

.kora-servico a:not(.kora-botao),
.kora-pagina a:not(.kora-botao){ text-decoration:underline; text-underline-offset:.2em;
  text-decoration-color:var(--wp--preset--color--linha) }
.kora-servico a:not(.kora-botao):hover,
.kora-pagina a:not(.kora-botao):hover{ color:var(--wp--preset--color--terracota) }

.kora-preco{ margin:0 0 1.6rem!important; letter-spacing:.12em; text-transform:uppercase }
/* Betrag und Zusatz seit dem 22.09.2026 als ZWEI Zeilen (Stefan). Vorher
   hing der Zusatz mit einem Mittelpunkt am Betrag — beim Zusammenfuehren
   der Preise waere er dabei verlorengegangen, so wie im August die
   MwSt-Zeile der Firmenangebote. Jetzt ist er ein eigenes Feld in der
   Preismaske und steht als eigene Zeile darunter: leiser gesetzt, damit
   der Betrag die Zeile bleibt, die man zuerst liest. */
.kora-preco__valor{ display:block }
.kora-preco__nota{ display:block; margin-top:.25rem;
  font-size:.72em; letter-spacing:.1em; opacity:.72; text-transform:none }

/* `.kora-details` stand hier bis zum 01.09.2026: sieben Regeln fuer
   Aufklapper, die kein einziges Element trug. Die Bedingungen der
   Serviceseiten nutzen `.svc-cond`/`.kora-termos`, die Akkordeons
   `.kora-acordeao__item`, und die FAQs haben gar kein <details>.
   Entfernt, weil totes CSS beim naechsten Umbau wie eine Zusage aussieht.

/* `.servico__figures` stand hier bis zum 01.09.2026: das Raster fuer die
   zwei Detailbilder am Ende einer Serviceseite. Sie lagen nur auf style-key
   — als einziger der vier Dienste — und sind auf Stefans Wunsch entfernt,
   damit die vier Seiten gleich aufgebaut sind. Die Bilder selbst bleiben in
   der Mediathek (kora-detalhe-linho, kora-detalhe-stylebook); wer sie
   zurueckholt, findet das Raster in der Git-Historie. */

.kora-servico__cta{ margin:2.4rem 0 0 }
/* Zugleich ein Ziel: 159x19 px, auch am Desktop unter der Grenze. Groesser
   UND mit vergroesserter Trefferflaeche (siehe Beruehrflaechen weiter oben). */
.kora-servico__voltar{ margin:1.6rem 0 0; font-size:var(--wp--preset--font-size--etiqueta);
  letter-spacing:.14em; text-transform:uppercase }
.kora-servico__voltar a{ text-decoration:none!important;
  border-bottom:1px solid var(--wp--preset--color--linha); padding-bottom:.15em }

/* ------------------------------------------------------------------
   Lesespalte auf Unter- und Serviceseiten.
   > Gemessen am 26.08.2026: die Bloecke standen auf 431px (der globalen
   > contentSize) und wurden vom `constrained`-Layout mittig gesetzt —
   > Ueberschriften und Absaetze wirkten dadurch ZENTRIERT und eingerueckt,
   > obwohl text-align korrekt "start" war. Im Bildvergleich sofort zu
   > sehen, in jeder Textausrichtungs-Messung unsichtbar.
   > Die Spalte ist 68ch breit (wie .article__body im alten Theme), die
   > Bloecke darin laufen ueber die volle Breite.
   ------------------------------------------------------------------ */
/* 39.5rem = 632px, gemessen an .article__body (68ch bei 16px Grundschrift).
   Ein blosses `68ch` faellt hier auf 662px, weil die Grundschrift 16.8px
   ist — dieselbe Regel, anderes Ergebnis. */
.kora-servico .wp-block-post-content,
.kora-pagina .wp-block-post-content{ max-width:39.5rem; margin-inline:auto }
.kora-servico .wp-block-post-content > *,
.kora-pagina .wp-block-post-content > *,
.kora-servico .kora-lang > *,
.kora-pagina .kora-lang > *{ max-width:none; margin-inline:0 }
.kora-servico .kora-lang,
.kora-pagina .kora-lang{ max-width:none }
/* Abstaende der Fliesstext-Ueberschriften, gemessen: 32px oben, 12.8px unten */
.kora-servico .wp-block-post-content h2,
.kora-pagina .wp-block-post-content h2{ margin:2rem 0 .8rem; line-height:1.2 }
.kora-servico .wp-block-post-content h3,
.kora-pagina .wp-block-post-content h3{ margin:2rem 0 .8rem; line-height:1.2;
  font-family:var(--wp--preset--font-family--display) }
.kora-servico .wp-block-post-content p,
.kora-pagina .wp-block-post-content p{ line-height:1.8; margin:0 0 1.15rem }

/* ------------------------------------------------------------------
   Der Kopf einer Sektion behaelt seinen Takt, auch im Fliesstext-Layout
   ------------------------------------------------------------------
   Die drei Regeln darueber sind der Takt fuer FLIESSTEXT: eine
   Zwischenueberschrift mitten in einem Artikel braucht viel Luft nach oben
   (32px) und wenig nach unten (12.8px), damit sie zu ihrem Absatz gehoert.
   Richtig fuer FAQs, Impressum, Datenschutz.

   Der KOPF einer Sektion ist aber kein Fliesstext: Etikett, Titel und ein
   Satz gehoeren als Block zusammen und stehen im Grundtakt (24px). Auf der
   Startseite passte das von selbst; auf /obrigado/ — derselbe Aufbau, aber
   in der Seitenvorlage — gewann der Fliesstext-Takt. Gemessen am
   02.09.2026: Etikett -> Titel 32px statt 24, Titel -> Satz 12.8px statt
   24. Derselbe Kopf, zwei Rhythmen, je nachdem welche Vorlage ihn traegt.

   Die Regeln stehen mit Absicht HIER, direkt hinter dem Fliesstext-Takt:
   sie sind gleich spezifisch (zwei Klassen, ein Element), also entscheidet
   die Reihenfolge. Wer sie nach oben verschiebt, schaltet sie ab, ohne
   dass etwas kaputt aussieht — nur die Abstaende sind wieder die alten.
   ------------------------------------------------------------------ */
.kora-seccao .kora-etiqueta{ margin-block-end:0 }
.kora-seccao .kora-etiqueta + :is(h1,h2,h3){ margin-block:var(--kora-luft-zeile) 0 }
.kora-seccao .kora-etiqueta + :is(h1,h2,h3) + *{ margin-block-start:var(--kora-luft-zeile) }
.kora-servico .wp-block-post-content ul,
.kora-servico .wp-block-post-content ol,
.kora-pagina .wp-block-post-content ul,
.kora-pagina .wp-block-post-content ol{ line-height:1.8; margin:0 0 1.15rem 1.2rem; padding-left:0 }

/* ==================================================================
   DETAIL-OVERLAY der Dienste
   Masse aus dem alten .svc-modal uebernommen: 980px breit, max 88vh,
   Bild links (0.7fr) neben dem Text (1.3fr).
   ================================================================== */
.kora-overlay{ border:0; padding:0; background:transparent; color:var(--wp--preset--color--quase-preto);
  max-width:min(980px,92vw); width:100%; max-height:88vh; overflow:visible;
  /* inset:0 + margin:auto zentriert in beiden Achsen. Ohne inset klebt der
     Dialog oben links, weil margin:auto ohne Bezugsrahmen nicht greift. */
  inset:0; margin:auto }
.kora-overlay::backdrop{ background:rgba(23,22,21,.62); backdrop-filter:blur(3px) }
.kora-overlay__inner{ position:relative; background:var(--wp--preset--color--branco-quente);
  border-radius:2px; max-height:88vh;   /* overflow: weiter unten, `hidden` */
  display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) }
/* Ohne Bild EINE Spalte. Sonst haelt das Raster die Bildspalte frei und es
   klafft eine leere Flaeche — genau das war am 26.08.2026 der Befund
   "empresas haben kein Foto": das Bild fehlte UND die Luecke blieb. */
.kora-overlay--ohne-bild .kora-overlay__inner{ grid-template-columns:minmax(0,1fr) }
.kora-overlay__media{ position:sticky; top:0; align-self:start; height:100% }
/* height:100% auf einem sehr hohen Dialog zoomt das Bild in einen winzigen
   Ausschnitt — im Bild vom 26.08. war nur noch unscharfer Stoff zu sehen.
   Deshalb an die Sichthoehe gekoppelt statt an die Inhaltshoehe. */
/* Nicht ziehbar: ein Bild laesst sich sonst mit der Maus aus dem Overlay
   herausziehen und hinterlaesst ein Geisterbild ueber der Seite. */
.kora-overlay__media img{ width:100%; height:100%; max-height:88vh; min-height:260px;
  object-fit:cover; object-position:center; display:block;
  -webkit-user-drag:none; user-select:none; -webkit-user-select:none; pointer-events:none }
.kora-overlay__body{ padding:clamp(1.6rem,3.4vw,3rem); min-width:0 }
.kora-overlay__zu{ position:absolute; top:.5rem; right:.7rem; z-index:2;
  background:var(--wp--preset--color--branco-quente); border:1px solid var(--wp--preset--color--linha);
  border-radius:50%; width:2.1rem; height:2.1rem; line-height:1; font-size:1.3rem;
  color:var(--wp--preset--color--quase-preto); cursor:pointer; transition:background .3s,color .3s }
.kora-overlay__zu:hover{ background:var(--wp--preset--color--quase-preto); color:var(--wp--preset--color--branco-quente) }

/* Der Seiteninhalt ist fuer eine ganze Seite gesetzt und traegt die
   Breitenbegrenzung des `constrained`-Layouts. Im Overlay muss beides weg,
   sonst stehen Ueberschriften eingerueckt und wirken zentriert — derselbe
   Effekt wie am 26.08. auf den Serviceseiten. */
.kora-overlay__body > *,
.kora-overlay__body .kora-lang > *,
.kora-overlay__body .wp-block-group > *{ max-width:none; margin-inline:0 }

/* Der Seiteninhalt ist fuer eine ganze Seite gesetzt. Im Overlay eine
   Stufe kleiner, sonst erschlaegt der Einleitungssatz die Ueberschrift.
   > WordPress haengt an die Preset-Klassen `has-*-font-size` ein
   > !important. Eine Regel ohne kommt dagegen nicht an — meine erste
   > Fassung war wirkungslos und der Einleitungssatz stand in 30px. */
.kora-overlay__body h1{ font-size:clamp(1.9rem,3vw,2.6rem); margin:.2rem 0 .5rem }
.kora-overlay__body h2{ font-family:var(--wp--preset--font-family--display);
  font-size:1.24rem; margin:2rem 0 .5rem }
.kora-overlay__body h3{ font-family:var(--wp--preset--font-family--corpo); font-weight:500;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--terracota); margin:1.4rem 0 .35rem }
.kora-overlay__body p,
.kora-overlay__body li{ color:var(--wp--preset--color--grafite); line-height:1.7; max-width:none }
.kora-overlay__body p.has-lead-font-size{ font-family:var(--wp--preset--font-family--corpo)!important;
  font-size:.98rem!important; line-height:1.65!important; font-weight:300!important; margin:0 0 1.6rem }
.kora-overlay__body h1.has-titulo-font-size{ font-size:clamp(1.9rem,3vw,2.6rem)!important }
.kora-overlay__body h2.has-subtitulo-font-size{ font-size:1.24rem!important }
.kora-overlay__body h3.has-marca-font-size{ font-size:.82rem!important }
.kora-overlay__body ul,
.kora-overlay__body ol{ padding-left:1.1rem; margin:.5rem 0 }
.kora-overlay__body li{ margin:.3rem 0 }
/* Im Overlay fehl am Platz: der Rueckweg zu den Diensten (man ist ja dort)
   und die Detailbilder (die gehoeren auf die Seite). Letzteres hat schon
   das alte Theme so gehalten. */
.kora-overlay__body .kora-servico__voltar{ display:none }
/* Der Knopf bleibt am unteren Rand stehen, statt am Ende eines langen
   Textes zu verschwinden. Im Original lag er ausserhalb des Scrollbereichs
   und war darum immer sichtbar — dieselbe Wirkung, ohne den Inhalt in zwei
   Behaelter zu zerlegen. Der Verlauf oben verhindert, dass Text hart unter
   dem Knopf abgeschnitten wirkt. */
.kora-overlay__body .kora-servico__cta{
  position:sticky; bottom:0; z-index:1;
  margin:2rem calc(-1 * clamp(1.6rem,3.4vw,3rem)) 0;
  padding:1.2rem clamp(1.6rem,3.4vw,3rem);
  background:linear-gradient(180deg, rgba(249,249,248,0) 0%,
             var(--wp--preset--color--branco-quente) 38%);
}

@media (max-width:760px){
  .kora-overlay__inner{ grid-template-columns:1fr }
  /* Auf dem Handy ist Hoehe knapp: das Bild wird zum Streifen, damit der
     Text oberhalb der Falz beginnt. */
  .kora-overlay__media img{ max-height:20vh; min-height:0 }
  /* 27.08.2026: Im Kartenlayout war die Startansicht auf dem Handy um 36px
     zu hoch (390x844) — ein Balken beim ersten Blick. Statt Text zu kuerzen
     das Bild etwas flacher; gemessen, nicht geraten. */
  .kora-overlay--karte .kora-overlay__media img{ max-height:17vh }
  .kora-overlay__body{ padding:1.3rem 1.2rem 1.1rem }
}
@media (prefers-reduced-motion:reduce){ .kora-overlay::backdrop{ backdrop-filter:none } }

/* > Das hidden-Attribut wird von jeder eigenen display-Regel geschlagen:
   > die UA-Regel [hidden]{display:none} hat dieselbe Spezifitaet wie eine
   > Klasse, und die spaetere gewinnt. Am 26.08.2026 blieben dadurch
   > "Seguinte" und die Warenkorb-Abkuerzung im letzten Schritt stehen,
   > obwohl das JS sie korrekt auf hidden gesetzt hatte. Einmal zentral
   > geradegezogen, statt an jeder Stelle daran zu denken. */
[hidden]{ display:none!important }

/* ==================================================================
   SCHRITTE IM DETAIL-OVERLAY
   Nachgebaut nach dem alten .svc-steps. Ohne JS bleiben alle Abschnitte
   sichtbar — die Regel greift nur, wenn die Schritte gebaut wurden.
   Der Inhalt ist also nie unerreichbar.
   ================================================================== */
.kora-passo{ display:none }
.kora-passo.is-atual{ display:block }
.kora-passo > h2:first-child{ margin-top:0 }
/* GLEICHE HOEHE FUER ALLE SCHRITTE.
   > Gemessen am 26.08.2026: der Dialog sprang zwischen 520 und 604 px, je
   > nach Textlaenge des Schritts. Ein Fenster, das beim Weiterklicken die
   > Groesse aendert, laesst den Knopf unter dem Finger wegwandern.
   Die Hoehe kommt aus dem LAENGSTEN Schritt und wird vom JS gemessen
   (--kora-passo-h). Ein fester Wert waere geraten und bei anderem Text
   sofort falsch — entweder abgeschnitten oder mit Leerlauf. */
.kora-overlay__body{ display:flex; flex-direction:column }
/* KEIN display hier — siehe die Warnung bei .kora-lang oben. Nur wachsen. */
.kora-overlay__body > .kora-lang{ flex:0 0 auto }
/* Die Hoehe setzt das JS (gemessen am laengsten Schritt). Hier nur die
   Voraussetzungen: eigener Scroll-Kontext und kein Zusammenfallen. */
.kora-overlay__inhalt{ min-height:0; scrollbar-width:thin }
/* Kein Scrollen INNERHALB des Fensters: der Inhalt ist so bemessen, dass er
   passt. `hidden` statt `auto`, damit ein Fehler auffaellt statt sich hinter
   einer Bildlaufleiste zu verstecken. */
.kora-overlay__inner{ overflow:hidden }

/* Feste Zeilenhoehe. Der Kaufknopf im letzten Schritt ist von Natur aus
   hoeher als "Seguinte" (mehr Polsterung) — dadurch wuchs die Leiste um 5px
   und der Dialog sprang trotz gleich hoher Inhalte. Die Hoehe der Leiste
   darf nicht vom Schritt abhaengen. */
.kora-passos{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  margin-top:auto; padding-top:1.1rem; border-top:1px solid var(--wp--preset--color--linha);
  min-height:calc(1.1rem + 46px);
}
.kora-passos__btn,
.kora-passos__kauf,
.kora-passos__kaufen{ min-height:46px; box-sizing:border-box }
.kora-passos__anzeige{ font-size:.76rem; letter-spacing:.2em;
  color:var(--wp--preset--color--grafite); white-space:nowrap; text-align:center }
.kora-passos__go{ grid-column:3; display:flex; align-items:center; gap:.6rem; justify-self:end }
.kora-passos__btn{
  display:inline-flex; align-items:center; gap:.55rem; background:none; cursor:pointer;
  border:1px solid var(--wp--preset--color--linha); border-radius:2px; padding:0 1.1em;
  font-size:var(--wp--preset--font-size--micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--quase-preto); transition:border-color .3s, color .3s;
}
.kora-passos__btn:hover:not(:disabled){ border-color:var(--wp--preset--color--terracota);
  color:var(--wp--preset--color--terracota) }
.kora-passos__btn:disabled{ opacity:.32; cursor:default }
.kora-passos__zurueck{ padding:0 .95em }
.kora-passos__kauf{ padding:0 .85em; line-height:0 }
.kora-passos__kauf svg{ display:block }
/* Im letzten Schritt trägt der ausgeschriebene Knopf; er darf breiter werden. */
/* Der CTA im Inhalt ist im Overlay ueberfluessig: er steht im letzten
   Schritt in der Leiste. Auf der Serviceseite bleibt er natuerlich. */
.kora-overlay__body .kora-servico__cta{ display:none }
/* Ebenso der Preis unter dem Titel — im Original erscheint er erst in der
   Leiste des Kaufschritts, direkt neben dem Knopf. */
.kora-overlay__body .kora-preco{ display:none }
.kora-passos__preco{ font-size:var(--wp--preset--font-size--micro); letter-spacing:.06em;
  color:var(--wp--preset--color--grafite); white-space:nowrap }
.kora-passos__kaufen{ padding:0 1.4em }

/* Große Pfeile am Rand. Nur Maus/Touch — der Tastaturweg ist die Leiste,
   darum aria-hidden und tabindex -1. Zwei Wege zur selben Sache dürfen die
   Tab-Reihenfolge nicht verdoppeln. */
.kora-rand{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:var(--wp--preset--color--branco-quente);
  border:1px solid var(--wp--preset--color--linha);
  color:var(--wp--preset--color--quase-preto);
  display:grid; place-items:center; transition:background .3s, color .3s;
  box-shadow:0 6px 18px rgba(23,22,21,.10);
}
.kora-rand:hover{ background:var(--wp--preset--color--terracota); color:#fff;
  border-color:var(--wp--preset--color--terracota) }
.kora-rand--zurueck{ left:.9rem }
.kora-rand--weiter{ right:.9rem }
.kora-rand[hidden]{ display:none }

@media (max-width:760px){
  .kora-overlay__body{ min-height:0 }
  .kora-passos{ gap:.6rem }
  .kora-passos__btn{ padding:.6em .8em; letter-spacing:.1em }
  /* Auf dem Handy verdecken Randpfeile den Text — dort führt die Leiste. */
  .kora-rand{ display:none }
}

/* ==================================================================
   Bildfolge im Overlay + stiller Textknopf          (26.08.2026)
   ------------------------------------------------------------------
   Fuer "Saber mais" in der Quem-sou-Sektion: mehrere Fotos, die
   uebereinanderliegen und per Deckkraft gewechselt werden.

   Warum kein Karussell mit Selbstlauf: Cátias Design-Direktive sagt,
   die Bildseite solle nicht um Aufmerksamkeit buhlen. Bewegung, die
   von allein passiert, zieht den Blick vom Text weg, den sie
   begleiten soll. Gewechselt wird deshalb nur auf Klick.
   ================================================================== */

/* Stiller Knopf: gleiche Masse wie .kora-botao, aber ohne Flaeche und
   ohne Rahmen. Ein gefuellter Terracota-Knopf haette hier mit dem
   eigentlichen CTA der Seite um den Rang gestritten — "Saber mais" ist
   ein Angebot, keine Aufforderung. */
.kora-botao--texto{ padding:.95em 0; color:var(--wp--preset--color--terracota);
  position:relative }
.kora-botao--texto::after{ content:""; position:absolute; left:0; bottom:.7em;
  width:100%; height:1px; background:currentColor; transform:scaleX(0);
  transform-origin:left; transition:transform .5s var(--kora-ease) }
.kora-botao--texto:hover::after,
.kora-botao--texto:focus-visible::after{ transform:scaleX(1) }

.kora-galeria{ position:relative; height:100%; min-height:260px }
.kora-galeria__img{ position:absolute; inset:0; margin:0; opacity:0;
  transition:opacity .7s var(--kora-ease); pointer-events:none }
.kora-galeria__img.is-an{ opacity:1; pointer-events:auto }
/* Das erste Bild traegt is-an schon im Markup — ohne JS bleibt also ein
   Bild sichtbar statt einer leeren Spalte. */
.kora-galeria__img img{ width:100%; height:100%; max-height:88vh;
  min-height:260px; object-fit:cover; display:block }

.kora-galeria__punkte{ position:absolute; left:0; right:0; bottom:1rem;
  display:flex; justify-content:center; gap:.55rem; z-index:2 }
/* Ein Verlauf unter den Punkten, sonst verschwinden sie auf hellen Fotos.
   Beim ersten Bau standen weisse Punkte auf einer hellen Wand — im Test
   gesehen, nicht gerechnet. Der Verlauf sitzt hinter der Leiste und
   faengt keine Klicks ab. */
.kora-galeria__punkte::before{ content:""; position:absolute; z-index:-1;
  left:0; right:0; bottom:-1rem; height:5.5rem; pointer-events:none;
  background:linear-gradient(to top, rgba(23,22,21,.42), rgba(23,22,21,0)) }
.kora-galeria__punkt{ width:7px; height:7px; padding:0; border:0;
  border-radius:50%; cursor:pointer; background:rgba(249,249,248,.5);
  transition:background-color .4s var(--kora-ease), transform .4s var(--kora-ease) }
.kora-galeria__punkt.is-an{ background:var(--wp--preset--color--branco-quente);
  transform:scale(1.35) }
.kora-galeria__punkt:focus-visible{ outline:2px solid var(--wp--preset--color--branco-quente);
  outline-offset:3px }

/* Die Bildfolge sitzt in der Medienspalte des Overlays und muss deren
   Sticky-Verhalten erben, sonst scrollt sie mit dem Text weg. */
.kora-overlay__media .kora-galeria{ height:100% }

@media (max-width:760px){
  /* AUSDRUECKLICHE Hoehe noetig. Die Bilder liegen absolut uebereinander und
     erzeugen deshalb KEINE Hoehe fuer ihren Container. Auf dem Desktop faellt
     das nicht auf, weil die Medienspalte ihre Hoehe vom Grid bekommt — auf
     dem Handy klappt das Grid auf eine Spalte, und die Bildspalte fiel auf
     0px zusammen: das Foto fehlte komplett. Gesehen im Screenshot bei 390px,
     nicht in den Zahlen. */
  /* MIT dem Elternselektor, sonst gewinnt die Regel
     `.kora-overlay__media .kora-galeria{height:100%}` weiter oben durch
     hoehere Spezifitaet — und 100% eines 0 hohen Elternteils sind 0.
     Genau daran ist der erste Versuch gescheitert. */
  .kora-overlay__media .kora-galeria{ height:26vh; min-height:0 }
  .kora-galeria__img img{ max-height:none; min-height:0 }
  .kora-galeria__punkte{ bottom:.5rem }
  .kora-galeria__punkte::before{ height:3.5rem }
}

@media (prefers-reduced-motion:reduce){
  .kora-galeria__img{ transition:none }
  .kora-botao--texto::after{ transition:none }
}

/* Sichtbare Markierung fuer Platzhaltertext. Dieselbe Haltung wie beim
   Testemunhos-Hinweis: unfertige Inhalte werden gekennzeichnet, nicht
   stillschweigend echt aussehend stehen gelassen. Beim Freigeben des
   endgueltigen Textes den Absatz mit dieser Klasse loeschen. */
.kora-nota-rascunho{ display:inline-block; margin:0 0 .9rem;
  /* Der Schliessen-Knopf sitzt absolut oben rechts. Ohne diese Grenze lief
     die erste Zeile bei 390px unter das X. */
  max-width:calc(100% - 2.6rem);
  padding:.35em .7em; border-radius:2px;
  background:rgba(134,82,56,.12); color:var(--wp--preset--color--terracota);
  letter-spacing:.14em }

/* ------------------------------------------------------------------
   Erzaehlungs-Overlays duerfen scrollen           (26.08.2026)
   ------------------------------------------------------------------
   `.kora-overlay__inner{overflow:hidden}` weiter oben ist fuer die
   SCHRITT-Overlays richtig: dort misst das JS den laengsten Schritt und
   passt die Hoehe ein, ein Scrollbalken waere dort ein Fehlersymptom.

   Ein Overlay mit `data-kora-sem-passos` hat diese Einpassung nicht — sein
   Text ist so lang, wie er eben ist. Ohne eigene Regel wurde er schlicht
   abgeschnitten: bei 1440x700 um 72px, bei 1440x600 um 160px und auf dem
   Handy um 459px. Bei 1440x900 passte er zufaellig, und genau in dieser
   Groesse hatte ich geprueft. Stefan hat es am echten Fenster gesehen.

   Es scrollt der TEXT, nicht der ganze Dialog: so bleibt das Foto stehen
   und wandert nicht mit weg.
   ------------------------------------------------------------------ */
.kora-overlay[data-kora-sem-passos] .kora-overlay__inner{
  grid-template-rows:minmax(0,1fr) }
.kora-overlay[data-kora-sem-passos] .kora-overlay__body{
  min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin }

@media (max-width:760px){
  /* Eine Spalte: Bild oben in fester Hoehe, Text darunter im Rest. */
  .kora-overlay[data-kora-sem-passos] .kora-overlay__inner{
    grid-template-rows:auto minmax(0,1fr) }
}

/* ------------------------------------------------------------------
   Der Dialog muss senkrecht mittig bleiben       (26.08.2026)
   ------------------------------------------------------------------
   `.kora-overlay{inset:0;margin:auto}` zentriert nur, solange BEIDE
   Blockraender `auto` bleiben. WordPress' Layout-CSS setzt aber

       :root :where(.is-layout-constrained) > :last-child{margin-block-end:0}

   — gleiche Spezifitaet wie `.kora-overlay`, spaeter in der Reihenfolge,
   also gewinnt es. Das Overlay der Quem-sou-Sektion ist das letzte Kind
   seiner <section> und klebte dadurch am unteren Bildschirmrand: die ganze
   Restflaeche landete auf margin-top (gemessen 147px oben, 0px unten).

   Warum das schwer zu finden war: es sah nach einem Fehler in MEINEN neuen
   Regeln aus. Sie einzeln abzuschalten aenderte nichts — erst die Frage an
   den Browser, WELCHE Regel margin-bottom gewinnt, hat es gezeigt.

   ZUR SPEZIFITAET, weil ich sie erst falsch gerechnet habe:
   `:root :where(.is-layout-constrained) > :last-child` ist (0,2,0) — `:root`
   UND `:last-child` zaehlen je als Klasse, `:where()` zaehlt null. Mein
   erster Versuch `dialog.kora-overlay` ist nur (0,1,1) und verlor deshalb
   weiterhin. Die doppelte Klasse hebt auf (0,2,1) und gewinnt unabhaengig
   von der Reihenfolge der Stylesheets — verlaesslicher als ein Gleichstand,
   bei dem entscheidet, wer zuletzt geladen wurde.

   Bewusst fuer ALLE Overlays: die Dienst-Dialoge stehen heute zufaellig
   nicht an letzter Stelle, und dieser Zufall soll nicht tragend sein.
   ------------------------------------------------------------------ */
dialog.kora-overlay.kora-overlay{ margin-block:auto }

/* Kapitel im Erzaehlungs-Overlay. Sie sind die Kopplung zwischen Text und
   Bild: das JS misst, welches Kapitel gerade oben steht, und schaltet die
   Bildfolge entsprechend. Es sind bewusst NUR Gliederungshuellen — kein
   eigener Rahmen, kein eigener Abstand ueber das hinaus, was die Absaetze
   ohnehin haetten, damit die Kopplung im Layout unsichtbar bleibt. */
.kora-capitulo{ scroll-margin-top:1rem }
.kora-capitulo > h2:first-child{ margin-top:2.2rem }
.kora-capitulo:first-of-type > *:first-child{ margin-top:0 }

/* ── Lesbarkeit der langen Geschichte (/historia/) ────────────────────
   Nachgemessen am 21.09.2026, nachdem Stefan die Formatierung
   bemaengelt hat. Zwei Befunde, beide nicht sichtbar, solange man nur
   das Markup liest:

   1. Die Zwischentitel standen bei 18,4 px, der Fliesstext bei 15,7 px.
      Anderthalb Punkte Unterschied sind keine Hierarchie — auf dem
      Schirm liest sich das wie ein fett gesetzter Absatz. Die Bloecke
      tragen `fontSize:marca`, und fuer `h2.has-marca-font-size` gab es
      keine Regel: die Preset-Klasse des Kerns bringt ihr eigenes
      !important mit und gewann.

   2. `.kora-fecho` sollte die Schlusszeilen in die Serifenschrift
      heben. Die Regel war wirkungslos — die Bloecke tragen zugleich
      `fontSize:lead`, und `.kora-overlay__body p.has-lead-font-size`
      erzwingt Poppins per !important. Der Schluss der Geschichte stand
      also in derselben Schrift und Groesse wie jeder andere Absatz.
      Gegen eine !important-Regel hilft nur mehr Spezifitaet plus
      !important, nicht die Reihenfolge. */
.kora-overlay__body h2.has-marca-font-size{
  font-size:clamp(1.3rem, 1.1rem + .6vw, 1.55rem)!important;
  margin:2.6rem 0 .6rem }

/* Luft zwischen den Kapiteln. 24px waren der Standardabstand zwischen
   zwei Absaetzen — zwischen zwei KAPITELN ist das zu wenig, der Text
   lief als eine Wand durch. */
.kora-overlay__body .kora-capitulo + .kora-capitulo{ margin-top:2.4rem }

/* Der Schluss: Serifenschrift, eine Stufe groesser, und durch eine
   Haarlinie vom Fliesstext abgesetzt. Die beiden Bloecke gehoeren
   zusammen, darum nur EINE Linie darueber. */
.kora-overlay__body p.kora-fecho{
  font-family:var(--wp--preset--font-family--display)!important;
  font-size:clamp(1.15rem, 1rem + .5vw, 1.4rem)!important;
  font-weight:300!important; line-height:1.45!important;
  color:var(--wp--preset--color--quase-preto);
  margin:0 0 .9rem }
.kora-overlay__body p:not(.kora-fecho) + p.kora-fecho{
  margin-top:1.6rem; padding-top:1.6rem;
  border-top:1px solid var(--wp--preset--color--linha) }
.kora-overlay__body p.kora-fecho:last-child{ margin-bottom:0 }

/* ==================================================================
   Dienst als EINE Karte: Akkordeons statt Schritte      (27.08.2026)
   ------------------------------------------------------------------
   Style Scan erklaert sich auf einer Karte. Drei Akkordeons, das erste
   offen, mehrere gleichzeitig offen moeglich — das kann <details> von
   Haus aus, samt Tastaturbedienung und Funktion ohne JavaScript.

   Bewegung: NUR die Pfeilspitze dreht sich (CSS-Transition). Das Auf-
   und Zuklappen selbst laeuft ueber ::details-content, wo der Browser
   es kann, und schnappt sonst. Kein JavaScript, kein Anime.js — eine
   Offenlegung ist ein Zustandswechsel, kein Scrub.
   ================================================================== */

.kora-acordeao{ margin:2rem 0 0; border-top:1px solid var(--wp--preset--color--linha) }

.kora-acordeao__item{ border-bottom:1px solid var(--wp--preset--color--linha) }
.kora-acordeao__item > summary{
  list-style:none; cursor:pointer; position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 0; margin:0;
  font-family:var(--wp--preset--font-family--display);
  font-size:1.18rem; font-weight:300; line-height:1.25;
  color:var(--wp--preset--color--quase-preto);
  transition:color .35s var(--kora-ease) }
/* Das Standard-Dreieck beider Engines abschalten. */
.kora-acordeao__item > summary::-webkit-details-marker{ display:none }
.kora-acordeao__item > summary::marker{ content:"" }
.kora-acordeao__item > summary:hover{ color:var(--wp--preset--color--terracota) }
.kora-acordeao__item > summary:focus-visible{ outline:2px solid var(--wp--preset--color--terracota);
  outline-offset:3px }

/* Pfeilspitze aus zwei Strichen — kein Bild, kein Zeichensatz-Glyph. */
.kora-acordeao__item > summary::after{
  content:""; flex:0 0 auto; width:9px; height:9px; margin-right:.25rem;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .4s var(--kora-ease) }
.kora-acordeao__item[open] > summary::after{ transform:rotate(225deg) translate(-2px,-2px) }

.kora-acordeao__item > *:not(summary){ margin:0 0 1.15rem }
.kora-acordeao__item p{ color:var(--wp--preset--color--grafite); line-height:1.7;
  max-width:62ch }

/* Weiches Aufklappen, wo der Browser es beherrscht. Wo nicht, schnappt es —
   das ist kein Fehler, sondern die Rueckfallebene. */
@supports selector(::details-content){
  .kora-acordeao__item::details-content{
    block-size:0; overflow:hidden;
    transition:block-size .38s var(--kora-ease), content-visibility .38s allow-discrete;
    content-visibility:hidden }
  .kora-acordeao__item[open]::details-content{ block-size:auto; content-visibility:visible }
}

/* Termos e condições: rechtsbuendig und leiser als die Akkordeons —
   es ist Pflichtinformation, kein Verkaufsargument. */
:is(.kora-termos,.svc-cond){ margin:1.1rem 0 0; text-align:right }
:is(.kora-termos,.svc-cond) > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;
  font-size:var(--wp--preset--font-size--micro); letter-spacing:.14em;
  /* Grafit statt Areia Escura: 7,3:1 statt 3,0:1. Der Aufklapper soll
     leise bleiben (Pflichtinformation, kein Verkaufsargument) — aber
     3,0:1 ist nicht leise, sondern schlecht lesbar, und ausgerechnet an
     der Stelle, an der Preise, Fristen und Ruecktritt stehen. Passt zur
     Unterstreichung vom selben Tag: beides macht denselben Aufklapper
     auffindbar. */
  text-transform:uppercase; color:var(--wp--preset--color--grafite);
  transition:color .35s var(--kora-ease) }
:is(.kora-termos,.svc-cond) > summary::-webkit-details-marker{ display:none }
:is(.kora-termos,.svc-cond) > summary::marker{ content:"" }
:is(.kora-termos,.svc-cond) > summary:hover{ color:var(--wp--preset--color--terracota) }
:is(.kora-termos,.svc-cond) > *:not(summary){ text-align:left }
/* Fliesstext auf den Leistungsseiten ("Este programa é desenhado…",
   "Todos os valores com IVA…"). Ganze Saetze unter 12 px sind eine
   Zumutung, und hier stehen die Bedingungen, die jemand VOR dem Kauf
   liest. Die Ueberschrift `h3` darunter bleibt auf micro — sie ist ein
   Etikett in Versalien. */
:is(.kora-termos,.svc-cond) p, :is(.kora-termos,.svc-cond) li{ font-size:var(--wp--preset--font-size--etiqueta);
  color:var(--wp--preset--color--grafite); line-height:1.6 }
:is(.kora-termos,.svc-cond) h3{ font-size:var(--wp--preset--font-size--micro)!important;
  letter-spacing:.14em; text-transform:uppercase; margin:.9rem 0 .3rem }

/* Fusszeile der Serviceseite. Ausrichtung und Abstand stehen weiter unten
   unter "3. PREIS UND KNOPF stehen ZUSAMMEN unten rechts" — hier standen
   bis zum 01.09.2026 ein `space-between` und ein abweichendes `gap`, die
   beide nie gewirkt haben. Der Kommentar behauptete dazu "Preis links,
   Kaufknopf rechts" und beschrieb damit das Gegenteil des Sichtbaren. */
.kora-servico__rodape{
  display:flex; align-items:center; flex-wrap:wrap; margin:1.6rem 0 0;
  padding-top:1.2rem; border-top:1px solid var(--wp--preset--color--linha) }
.kora-servico__rodape .kora-preco{ margin:0!important }
.kora-servico__rodape .kora-servico__cta{ margin:0 }

/* 18.09.2026 (Catarina): Style Lab hat als einziges einen langen Zusatz
   "Datas a anunciar brevemente" im Preis. Ohne extra Regel bricht das
   Zeile-2 aus und der Knopf springt darunter. Nur fuer diese Karte
   (Modal-ID #kora-ov-style-lab): der Preis darf nicht umbrechen, der
   Knopf bleibt rechts, und die Zeile bekommt Platz durch
   `space-between`. Font-Groesse wird eine Stufe kleiner, damit der
   Preis in engen Breiten trotzdem sicher passt. Die anderen drei
   Karten behalten ihr Original-Layout.

   21.09.2026 (Stefan meldete es vom Handy): Dieser Block stand ohne
   Media-Query und hat unter 760px die Handy-Regel weiter unten
   ausgehebelt. Dort bekommt der CTA `flex:1 1 100%`, damit Preis und
   Knopf UNTEREINANDER stehen und der Knopf die volle Breite fuellt.
   Das funktioniert nur, wenn die Zeile umbrechen darf — `flex-wrap:
   nowrap` plus `flex-shrink:0` (ID-Selektor, hoehere Spezifitaet)
   ergaben zusammen `flex:1 0 100%` in einer Zeile, die nicht umbrechen
   kann: der Kaufknopf lief 209px ueber den Dialogrand hinaus und war
   rechts abgeschnitten. Nur Style Lab war betroffen, weil nur diese
   Karte die Sonderregel hat. Die Regel loest ein reines Desktop-
   Problem und gilt deshalb ab 761px. */
@media (min-width:761px){
  #kora-ov-style-lab .kora-servico__rodape{
    gap:1rem; justify-content:space-between; flex-wrap:nowrap }
  #kora-ov-style-lab .kora-servico__rodape .kora-preco{
    white-space:nowrap; font-size:var(--wp--preset--font-size--micro) }
  #kora-ov-style-lab .kora-servico__rodape .kora-servico__cta{
    flex-shrink:0 }
}

/* ------------------------------------------------------------------
   Kartenlayout IM OVERLAY
   ------------------------------------------------------------------
   Das JS setzt `kora-overlay--karte`, sobald der Inhalt Akkordeons hat.
   Drei Dinge muessen dann anders sein als bei den Schritt-Overlays:

   1. Der Textteil darf scrollen. Die Schritt-Overlays duerfen das
      ausdruecklich NICHT (dort passt das JS die Hoehe ein, ein Balken
      waere ein Fehlersymptom) — hier ist er gewollt, sobald jemand
      mehrere Akkordeons oeffnet. Zugeklappt passt die Karte ohne.
   2. Preis und Kaufknopf werden weiter oben fuer Overlays ausgeblendet,
      weil sie dort in der Schrittleiste stehen. Hier gibt es keine
      Leiste, also muessen sie zurueck.
   3. Der klebende Einzel-CTA weicht der klebenden FUSSZEILE, damit
      Preis und Knopf zusammen stehenbleiben.
   ------------------------------------------------------------------ */
.kora-overlay--karte .kora-overlay__inner{ grid-template-rows:minmax(0,1fr) }
.kora-overlay--karte .kora-overlay__body{
  min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin }

.kora-overlay--karte .kora-overlay__body .kora-servico__rodape .kora-preco{ display:block }
.kora-overlay--karte .kora-overlay__body .kora-servico__rodape .kora-servico__cta{
  display:block; position:static; margin:0; padding:0; background:none }

.kora-overlay--karte .kora-overlay__body .kora-servico__rodape{
  position:sticky; bottom:0; z-index:1;
  margin:1.6rem calc(-1 * clamp(1.6rem,3.4vw,3rem)) 0;
  padding:1rem clamp(1.6rem,3.4vw,3rem) clamp(1.2rem,2.4vw,1.6rem) }
/* Der Verlauf stand hier IN der Leiste und liess Text hinter Preis und
   Knopf durchscheinen. Er sitzt jetzt als ::before UEBER ihr, die Flaeche
   selbst ist deckend — siehe ganz unten. */

@media (max-width:760px){
  .kora-overlay--karte .kora-overlay__inner{ grid-template-rows:auto minmax(0,1fr) }
  /* Auf dem Handy untereinander, Knopf ueber die volle Breite. Die Breite
     muss am ABSATZ haengen: der Knopf ist sein Kind, und ein width:100% am
     Kind fuellt nur den Absatz, der selbst nur so breit ist wie sein Text. */
  .kora-servico__rodape{ align-items:stretch }
  .kora-servico__rodape .kora-servico__cta{ flex:1 1 100% }
  .kora-servico__rodape .kora-botao{ justify-content:center; width:100% }
}

@media (prefers-reduced-motion:reduce){
  .kora-acordeao__item > summary::after,
  .kora-acordeao__item::details-content{ transition:none }
}

/* ------------------------------------------------------------------
   Die Karte muss ZUGEKLAPPT ohne Scrollen passen     (27.08.2026)
   ------------------------------------------------------------------
   Vorgabe von Stefan: scrollen darf man, muessen soll man nicht,
   solange alle Akkordeons zu sind. Gemessen war der Inhalt 659px hoch
   bei 616px Platz (1440x700) und 657 bei 574 (390x844) — also nur
   43 bzw. 83px zu viel. Darum kein Kuerzen am Text, sondern ein
   strafferer vertikaler Rhythmus plus etwas mehr Dialoghoehe.
   ------------------------------------------------------------------ */
.kora-overlay--karte .kora-overlay__body{
  padding-top:clamp(1.3rem,2.6vw,2.2rem); padding-bottom:0 }

.kora-overlay--karte .kora-acordeao{ margin-top:1.2rem }
.kora-overlay--karte .kora-acordeao__item > summary{ padding:.85rem 0 }
.kora-overlay--karte .kora-acordeao__item > *:not(summary){ margin-bottom:.85rem }
.kora-overlay--karte :is(.kora-termos,.svc-cond){ margin-top:.7rem }
.kora-overlay--karte .kora-overlay__body .kora-servico__rodape{
  padding-top:.9rem }   /* margin-top: weiter unten `auto`, siehe dort */

/* Preis in der Kartenfusszeile wie in der Schrittleiste der anderen
   Dienste: Gemischtschrift, Fliesstextschrift, Grafit — nicht die
   gesperrten Versalien von `.kora-preco` unter dem Titel. Stefan hat am
   27.08.2026 einen Screenshot der Schrittleiste als Vorbild geschickt.
   Die Werte sind von `.kora-passos__preco` uebernommen, nicht geschaetzt. */
.kora-servico__rodape .kora-preco{
  font-family:var(--wp--preset--font-family--corpo);
  /* font-size steht weiter unten (`etiqueta`); das `corpo-sm` von hier war
     neben dem Knopf sichtbar zu gross und wurde dort korrigiert. */
  letter-spacing:.06em; text-transform:none; font-weight:300;
  color:var(--wp--preset--color--grafite); white-space:nowrap }

/* ------------------------------------------------------------------
   Konstante Kartenhoehe beim Auf- und Zuklappen      (27.08.2026)
   ------------------------------------------------------------------
   Stefan: das Fenster soll seine Groesse behalten, egal wie viele
   Akkordeons offen sind. Das JS pinnt dafuer beim Oeffnen die gemessene
   Hoehe des Inneren; hier steht nur, was das Layout dazu braucht.

   > ZUR display-REGEL AUF .kora-lang, die weiter oben ausdruecklich als
   > "immer ein Fehler" markiert ist: Hier ist sie geprueft unbedenklich.
   > Die Versteck-Regel `html:not(.kora-en) .kora-lang.kora-lang--en` hat
   > Spezifitaet (0,3,1), diese hier (0,3,0) — die Versteck-Regel gewinnt
   > also weiterhin. Das Flex gilt nur fuer den SICHTBAREN Block, auf den
   > gar keine display-Regel zeigt. Die Abnahme prueft "nur eine Sprache
   > sichtbar" und muss danach gruen bleiben.
   ------------------------------------------------------------------ */
.kora-overlay--karte .kora-overlay__body > .kora-lang{
  flex:1 1 auto; min-height:0; flex-direction:column }
/* Schiebt die Fusszeile an den unteren Rand, wenn oben Platz frei wird —
   sonst haengt sie bei zugeklappten Akkordeons mitten in der Karte. */
.kora-overlay--karte .kora-overlay__body .kora-servico__rodape{ margin-top:auto }
/* 17.09.2026 (Catarina): der Inhaltsblock (Intro + Akkordeons + Condições)
   sass am oberen Rand und wirkte "nach oben gerutscht" gegenueber der
   Bildspalte links. Loesung: das ERSTE Kind des Sprachblocks bekommt
   ebenfalls `margin-top:auto`. Weil die Fusszeile schon `margin-top:auto`
   traegt (Regel darueber), teilen sich beide auto-Margen den Restplatz —
   die Fusszeile bleibt unten, und der Inhalt sitzt senkrecht mittig
   zwischen Oberkante und Fusszeile.
   Wichtig: `> *:first-child`, nicht ein spezifischer Selektor pro Seite —
   die Serviceseiten fangen mal mit einem `<p>` an, mal mit einem `<div>`
   (Style Lab hat kein Intro, die Akkordeons kommen sofort). Der First-
   Child-Selektor packt beide Faelle. */
.kora-overlay--karte .kora-overlay__body > .kora-lang > *:first-child{
  margin-top:auto }

/* Handy: zwei Prozentpunkte mehr Hoehe fuer die Karte.
   MUSS nach `.kora-overlay--karte{max-height:92vh}` weiter oben stehen —
   gleiche Spezifitaet, also entscheidet die Reihenfolge. Beim ersten
   Versuch stand die Regel im Media-Query-Block WEITER OBEN und blieb
   wirkungslos; gemessen an der unveraenderten Kartenhoehe von 776px
   (= 92vh von 844), nicht am Augenschein. */

/* ==================================================================
   Drei Korrekturen nach Stefans Rueckmeldung        (27.08.2026)
   ================================================================== */

/* 1. GLEICHE ABSTAENDE zwischen den Akkordeons.
   WordPress' Layout-CSS gibt jedem Kind einer Layout-Gruppe
   `margin-block-start:24px` — das erste Kind bekommt keins. Gemessen:
   Feld 1 marginTop 0, Feld 2 und 3 je 24px. Die Felder waren also gleich
   hoch (52px, nachgemessen), aber die Kopfzeilen sassen ungleich zwischen
   ihren Trennlinien. Genau das hat Stefan als "unterschiedliche Hoehen"
   gesehen.
   Spezifitaet: die WP-Regel `:root :where(.is-layout-constrained) > *` ist
   (0,2,0). `.kora-acordeao__item` allein waere (0,1,0) und wuerde verlieren
   — dieselbe Falle wie beim Dialog-Rand am 26.08. Element + zwei Klassen
   ergibt (0,2,1) und gewinnt unabhaengig von der Ladereihenfolge. */
.kora-acordeao > details.kora-acordeao__item{ margin-top:0 }

/* 2. PREIS in derselben Groesse wie in der Schrittleiste.
   Gemessen am Vorbild (style-key): 11.52px = `micro`. Meine Karte stand auf
   16px (`corpo-sm`) — der Preis war sichtbar groesser als die Knopfschrift
   daneben, und genau das sah anders aus als Stefans Screenshot. */
.kora-servico__rodape .kora-preco{
  font-size:var(--wp--preset--font-size--etiqueta) }

/* 3. PREIS UND KNOPF stehen ZUSAMMEN unten rechts.
   Vorher `space-between`: der Preis klebte links, der Knopf rechts. Im
   Vorbild bilden beide eine Einheit am rechten Rand. */
.kora-servico__rodape{ justify-content:flex-end; gap:1rem 1.4rem }

/* 4. Die Fusszeile bleibt unten stehen, egal wie viele Akkordeons offen
   sind.
   > Mein erster Versuch war ein halber: `margin-top:auto` auf der Fusszeile
   > plus `flex-direction:column` auf dem Sprachblock — OHNE `display:flex`.
   > Ohne das ist `flex-direction` wirkungslos und `margin-top:auto` tut
   > nichts. Gemessen: die Fusszeile sass bei "alles zu" 100px weiter oben
   > als bei "eins offen".
   > Warum `display:flex` auf `.kora-lang` hier trotz der Warnung oben
   > unbedenklich ist: die Versteck-Regel hat Spezifitaet (0,3,1), diese
   > (0,3,0) — sie gewinnt weiterhin. Das Flex gilt nur fuer den sichtbaren
   > Block. Die Abnahme prueft "nur eine Sprache sichtbar". */
.kora-overlay--karte .kora-overlay__body > .kora-lang{ display:flex }
/* > UND DIE FOLGE DAVON, die ich beim ersten Anlauf uebersehen habe:
   > WordPress' Constrained-Layout setzt auf JEDES Kind
   > `margin-left:auto!important; margin-right:auto!important`. Im
   > Blocklayout ist das folgenlos — die Kinder sind ohnehin so breit wie
   > der Container. Als Flex-Items macht es sie schmal wie ihr Inhalt und
   > zentriert sie: gemessen Etikett 230px, Ueberschrift 177px, Termos
   > 152px und die Fusszeile 431px statt der vollen 541px. Sichtbar wurde
   > es daran, dass "Termos e condicoes" nicht mehr am rechten Rand sass.
   >
   > Das `!important` hier ist kein Holzhammer, sondern die einzige
   > Moeglichkeit: der Kern setzt selbst `!important`. */
.kora-overlay--karte .kora-overlay__body > .kora-lang > *{
  margin-left:0!important; margin-right:0!important; align-self:stretch }

/* ------------------------------------------------------------------
   Karte: hoeher, Knopf buendig rechts                (27.08.2026)
   ------------------------------------------------------------------ */

/* 1. Etwas mehr Hoehe, damit die Karte nicht gedrungen wirkt. Der Wert ist
   eine MINDESThoehe — laengere Inhalte wachsen weiter, und auf flachen
   Fenstern greift die vh-Grenze, damit nichts hinausragt. */
/* Dieselbe Hoehe wie die Schritt-Overlays: Stefan hat am 27.08.2026 deren
   Format als das bessere benannt. Gemessen ist Style Key `min(88vh, 937px)`
   — 88vh bis rund 1100px Fensterhoehe, darueber inhaltsbegrenzt. Die Karte
   folgt derselben Regel, damit beim Durchklicken der Kacheln kein
   Formatsprung entsteht. */
.kora-overlay--karte,
.kora-overlay--karte .kora-overlay__inner{
  min-height:min(88vh,937px); max-height:min(88vh,937px) }

/* 2. Der Kaufknopf endet buendig mit dem Text darueber.
   > Ursache des Versatzes war meine eigene Regel von vorhin: Die
   > Fusszeile blutete per negativem Rand ueber die Textbreite hinaus und
   > holte sich die Breite per Polsterung zurueck. `margin-left/right:0
   > !important` fuer alle Kinder des Sprachblocks hat den negativen Rand
   > entfernt — die Polsterung blieb, und damit sass der Inhalt 48px zu
   > weit innen. Gemessen: Termos-Text endete bei 1162, der Knopf bei 1114.
   > Statt den Rand wieder einzufuehren faellt jetzt die Polsterung weg;
   > der Verlauf deckt weiterhin, weil der Text ohnehin nicht in den
   > Seitenrand des Dialogs laeuft. */
.kora-overlay--karte .kora-overlay__body .kora-servico__rodape{
  padding-left:0; padding-right:0 }

/* Stichpunkte in den Akkordeons. Bewusst schmale Einrueckung: die Liste
   soll unter dem Absatz haengen, nicht als eigener Block danebenstehen. */
.kora-acordeao__item ul{ margin:.2rem 0 0; padding-left:1.05rem; list-style:none }
.kora-acordeao__item li{ position:relative; margin:.55rem 0;
  color:var(--wp--preset--color--grafite); line-height:1.6;
  font-size:var(--wp--preset--font-size--corpo-sm) }
.kora-acordeao__item li::before{ content:""; position:absolute;
  left:-1.05rem; top:.62em; width:4px; height:4px; border-radius:50%;
  background:var(--wp--preset--color--adobe) }
.kora-acordeao__item li strong{ font-weight:500;
  color:var(--wp--preset--color--quase-preto) }

/* ------------------------------------------------------------------
   Die Fusszeile muss DECKEND sein                    (27.08.2026)
   ------------------------------------------------------------------
   Der Hintergrund war ein Verlauf, der erst bei 42 % Hoehe deckend
   wurde — die oberen 42 % waren durchsichtig. Beim Scrollen lief der
   Text sichtbar hinter Preis und Knopf durch. Gedacht war der Verlauf
   als weicher Uebergang, aber ein Uebergang gehoert UEBER die Leiste,
   nicht in sie hinein.

   Jetzt: Flaeche deckend, der Verlauf sitzt als eigenes Element
   darueber. Er faengt keine Klicks ab (pointer-events:none).
   ------------------------------------------------------------------ */
.kora-overlay--karte .kora-overlay__body .kora-servico__rodape{
  background:var(--wp--preset--color--branco-quente) }
.kora-overlay--karte .kora-overlay__body .kora-servico__rodape::before{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height:2.4rem; pointer-events:none;
  background:linear-gradient(180deg, rgba(249,249,248,0) 0%,
             var(--wp--preset--color--branco-quente) 100%) }

/* ------------------------------------------------------------------
   Platz fuer die Bildlaufleiste dauerhaft freihalten  (27.08.2026)
   ------------------------------------------------------------------
   Stefan: beim Aufklappen von "How does it work?" verschiebt sich der
   Kaufknopf. Ursache ist NICHT das Layout des Overlays, sondern die
   Bildlaufleiste: Sobald der Inhalt ueberlaeuft, erscheint sie, nimmt
   Breite weg und schiebt alles Rechtsbuendige — Preis, Knopf, "Termos
   e condicoes" — nach links.

   > WARUM MEINE PRUEFUNGEN DAS NICHT ZEIGTEN: In diesem Headless-
   > Chromium sind Bildlaufleisten IMMER ueberlagernd und 0 px breit,
   > auch mit --disable-features=OverlayScrollbar. Nachgemessen an einem
   > Testkasten mit overflow-y:scroll: offsetWidth - clientWidth = 0.
   > Das Pruefwerkzeug konnte den Fehler gar nicht sehen — dieselbe
   > Familie wie die CSP-Lektion vom 09.08. und der grep-Blindfleck vom
   > 18.08. An Stefans Mac haengt eine Maus, und macOS zeigt die Leisten
   > dann dauerhaft und platzverbrauchend.

   `scrollbar-gutter:stable` haelt den Platz immer frei, ob die Leiste
   sichtbar ist oder nicht. Damit gibt es nichts mehr zu verschieben.
   Wo die Eigenschaft fehlt, bleibt es beim heutigen Verhalten — kein
   Rueckschritt.
   ------------------------------------------------------------------ */
.kora-overlay--karte .kora-overlay__body,
.kora-overlay[data-kora-sem-passos] .kora-overlay__body{
  scrollbar-gutter:stable }

/* ------------------------------------------------------------------
   Navigation springt beim Sprachwechsel nicht mehr   (27.08.2026)
   ------------------------------------------------------------------
   Gemessen: der Nav-Block war in beiden Sprachen mittig (Mitte 776),
   aber unterschiedlich BREIT — 405 px auf Portugiesisch, 353 auf
   Englisch. Dadurch sass jeder einzelne Punkt woanders: "Serviços"
   begann bei 573, "Services" bei 599. Beim Umschalten sprang das Menue
   um 26 px.

   Der Block nimmt jetzt die volle Mittelspalte ein — die ist in beiden
   Sprachen gleich, weil Wortmarke und rechte Gruppe fest sind — und
   verteilt die Punkte darin. Erster und letzter Punkt liegen damit in
   beiden Sprachen exakt gleich; dazwischen bleibt der Unterschied der
   Wortlaengen, wo er hingehoert.
   ------------------------------------------------------------------ */
.kora-cabecalho .kora-nav{ flex:1 1 auto; gap:0;
  max-width:34rem; margin:0 auto }
/* ------------------------------------------------------------------
   ... und sie sitzt seit 02.09.2026 auch wirklich in der SEITENMITTE
   ------------------------------------------------------------------
   `margin:0 auto` zentriert die Linkreihe in dem Platz, der zwischen
   Wortmarke und rechter Gruppe uebrig bleibt — nicht auf der Seite. Solange
   rechts die Sprachwahl UND der CTA standen (zusammen ~200px), lag dieser
   Rest zufaellig fast mittig. Mit dem Entfernen des CTA schrumpfte die
   rechte Gruppe auf 48px, und die Navigation rutschte um 26 px nach rechts
   (gemessen: Mitte 746 statt 720).
   26 px sind an dieser Stelle nachweislich sichtbar — genau dieser Betrag
   war am 27.08.2026 der Grund, den Sprung beim Sprachwechsel zu beheben.
   Es waere also ein Fehler, den das Entfernen des Knopfes erst erzeugt hat.

   Beide Aussenspalten bekommen dieselbe Grundbreite; damit liegt die Mitte
   der Linkreihe auf der Mitte der Seite, unabhaengig davon, wie breit die
   Wortmarke oder die rechte Gruppe gerade sind. Nur ab 901px: darunter ist
   die Navigation ein eingeklapptes Menue und die Reihe hat keine Mitte,
   die zu treffen waere. */
@media (min-width:901px){
  .kora-cabecalho .kora-marca,
  .kora-cabecalho .kora-cabecalho__lado{ flex:1 1 0 }
  /* Ohne das rueckt die Sprachwahl in die Mitte ihrer nun breiten Spalte
     statt an den rechten Rand. */
  .kora-cabecalho .kora-cabecalho__lado{ justify-content:flex-end }
}
/* Gleich breite Felder statt `space-between`: damit liegt JEDER Punkt in
   beiden Sprachen an derselben Stelle, nicht nur der erste und der letzte.
   Mit space-between wanderten die mittleren noch um bis zu 22 px, weil
   "Abordagem" laenger ist als "Approach". */
.kora-cabecalho .kora-nav > *{ flex:1 1 0; text-align:center; margin:0 }

/* ------------------------------------------------------------------
   CTA oben rechts — ENTFERNT am 02.09.2026 (Stefan)
   ------------------------------------------------------------------
   Der gefuellte Knopf "Serviços" / "Services" rechts oben ist weg. Hier
   standen bis dahin rund 60 Zeilen dafuer: Signalfarbe, eine erzwungene
   Schriftfarbe gegen `.kora-cabecalho a{color:inherit}`, eine eigene
   Trefferflaeche und zwei Medienabfragen, mit denen er auf dem Handy
   gerade noch neben den Menueknopf passte.
   Alles geloescht statt stillgelegt — eine Regel fuer ein Element, das es
   nicht gibt, laesst den naechsten Leser nach dem Element suchen (dieselbe
   Begruendung wie beim Untertitel am 28.08.2026).
   Der Weg zu den Leistungen bleibt zweifach vorhanden: der Nav-Punkt
   "Serviços" im Kopf und der Knopf "Ver serviços" im Hero.
   Wiederherstellen: git log -- parts/header.html style.css
   ------------------------------------------------------------------ */
/* Der engere Abstand in der rechten Gruppe war eine der drei
   Stellschrauben, mit denen der CTA auf dem Handy Platz fand. Ohne ihn
   bleibt nur noch eine Luecke (Sprachwahl | Menueknopf) — gemessen wird
   nach dem Deploy, ob 24px dort wieder passen. Solange bleibt der
   gemessene Wert stehen: enger schadet hier nichts. */
@media (max-width:900px){
  .kora-cabecalho__lado{ gap:12px }
}

/* ------------------------------------------------------------------
   Leseschutz hinter dem Header ueber dem Video       (27.08.2026)
   ------------------------------------------------------------------
   Gemessen ueber vier Videostellen: im Bereich der Navigation traegt
   der Film weisse Schrift gut (7.3 bis 10.9:1), RECHTS OBEN faellt er
   aber auf 3.94:1 — und genau dort stehen Sprachwahl und CTA. Die
   inaktive Sprache landete dadurch bei rund 2.5:1. Das ist Stefans
   "PT/EN ist sehr schwer erkennbar", und es lag nicht an der Deckkraft
   allein, sondern am hellen Bildinhalt darunter.

   Ein Verlauf statt einer Flaeche: oben traegt er, nach unten
   verschwindet er, und der Hero bleibt offen. Sichtbar nur, solange der
   Header durchsichtig ist — sobald er fest wird, gibt es einen echten
   Hintergrund und der Schutz waere doppelt.
   ------------------------------------------------------------------ */
.kora-cabecalho::before{
  content:""; position:absolute; inset:0 0 auto 0; height:170%;
  pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(23,22,21,.5) 0%, rgba(23,22,21,.28) 45%, rgba(23,22,21,0) 100%);
  transition:opacity .5s var(--kora-ease) }
.kora-cabecalho.is-solido::before{ opacity:0 }
/* Mit dem Leseschutz darf die inaktive Sprache wieder kraeftiger sein — den
   Unterschied traegt der Unterstrich, nicht das Verblassen. Bei .75 lag sie
   an den hellsten Videostellen noch bei 4.33:1, knapp unter den noetigen
   4.5 fuer kleinen Text; .8 bringt sie darueber. Nachgemessen, nicht
   geschaetzt. */
.kora-idioma button{ opacity:.8 }

/* ------------------------------------------------------------------
   /obrigado/ — eine Achse statt zweier.

   Die Seitenvorlage setzt den Titel linksbuendig (x=280 px, wie auf
   FAQs, Privacidade, Informação Legal). Das ist Handschrift, kein
   Fehler — nur ist die Dankeseite die EINZIGE Standardseite, deren
   Inhalt zentriert steht. Dadurch bricht dort die Achse, und zwischen
   Titel und Ueberschrift klaffen 178 px (die anderen Seiten: 37 bis
   99 px). Dank und Aussage lesen sich dann wie zwei Fragmente statt
   wie ein Gedanke.

   Erst wurde am 10.09.2026 das zentrierte Etikett entfernt und der
   linksbuendige Titel behalten — die falsche Haelfte. Jetzt umgekehrt:
   Das Etikett traegt den Dank auf der Mittelachse, der Titel wird
   VISUELL verborgen.

   > Kein display:none. Die Seite braucht ihre <h1> — fuer
   > Screenreader und fuer die Dokumentstruktur. Das hier ist das
   > uebliche Muster (clip-path + 1px), das den Text aus dem Bild
   > nimmt, ohne ihn aus dem Baum zu nehmen.
   ------------------------------------------------------------------ */
/* 21.09.2026 ergaenzt: /imprint/ (14) und /privacidade/ (15).
   Dort zeigte die Seite ZWEI Ueberschriften — die Vorlage rendert
   `wp:post-title`, und der Seiteninhalt traegt seit dem 19.09. eine
   eigene <h1>. Beide mussten bleiben koennen: der Seitentitel ist
   EINSPRACHIG (er kommt aus post_title), die Ueberschriften im Inhalt
   liegen je Sprache vor. Haette ich die Inhalts-<h1> entfernt, stuende
   in der englischen Ansicht ein portugiesischer Titel.
   Also derselbe Weg wie bei /obrigado/: den Seitentitel VISUELL
   verbergen, nicht loeschen. */
.page-id-14 .wp-block-post-title,
.page-id-15 .wp-block-post-title,
.page-id-110 .wp-block-post-title{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0 }