/* hero.css – Hero da página inicial com a Matriz Perceptor Holomental 441 (js/hero3d.js, variante C).
   Texto à esquerda, matriz à direita; no celular a matriz vem depois dos botões.
   A cena tem altura fixa (sem saltos de layout enquanto o three.js carrega). */
.hero{padding:112px 0 44px}
.hero .hero-grid{width:100%}
.hero .eyebrow{line-height:1.45}                                      /* bricht am Handy um („Würfel 441“) */                                         /* .hero ist flex: ohne Breite schrumpft das Raster auf den Inhalt */
.hero-vis{position:relative;min-width:0}
.hero-stage{position:relative;width:100%;aspect-ratio:25/18;max-height:620px}
.hero #hero3d{position:absolute;inset:0;pointer-events:auto;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.hero #hero3d:not(.ready){pointer-events:none}
.hero #hero3d canvas{width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity 1.2s ease}   /* aus components.css übernommen */
.hero #hero3d.ready canvas{opacity:1}
@media (min-width:981px){
  .hero .hero-grid{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:20px;max-width:1380px}
  .hero h1{font-size:clamp(34px,calc(4.3vw - 8px),58px)}            /* Fallback ohne Container-Einheiten */
}
/* Überschrift nie abschneiden: „SYNCHRONOTRON“ (Cinzel, Kapitälchen, +.04em) ist ≈ 10,2 em breit → Schrift an der Spaltenbreite messen */
.hero .hero-grid>:first-child{container-type:inline-size;min-width:0}
@supports (font-size:1cqi){ .hero h1{font-size:clamp(24px,9.3cqi,62px)} }
.hero h1{max-width:100%;white-space:nowrap}

/* Leiste „Pontos de hoje“ – zugleich die zugängliche Liste der Punkte */
.hero-pts{position:relative;z-index:2;min-height:74px;margin-top:4px}
.hp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hp-lbl{font:600 11px/1.2 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-shadow:0 1px 8px rgba(7,10,28,.9)}
.hp-seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:rgba(7,10,28,.55)}
.hp-mode{border:0;border-radius:999px;background:none;color:var(--muted);font:600 12px/1 var(--font);letter-spacing:.02em;padding:8px 13px;cursor:pointer}
.hp-mode:hover{color:var(--text)}
.hp-mode[aria-pressed="true"]{background:var(--gold);color:#1a1405}   /* GR-15 */
.hp-list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.hp-pt{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border:1px solid rgba(170,180,255,.2);border-color:color-mix(in srgb,var(--c) 42%,transparent);
  border-radius:8px;background:rgba(7,10,28,.6);color:var(--text);font:500 12px/1 var(--font);font-variant-numeric:tabular-nums;cursor:pointer;transition:background .2s,border-color .2s}
.hp-pt b{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 5px;border-radius:5px;background:var(--c);color:#0b0e24;font:700 11px/1 var(--font)}
/* „todos os pontos“: alle Chips wie die Hauptpunkte (03.10.2026) */
.hp-pt:hover,.hp-pt:focus-visible,.hp-pt[aria-expanded="true"]{border-color:var(--c);background:rgba(255,255,255,.08);color:var(--text)}
.hp-mode:focus-visible,.hp-pt:focus-visible,.hp-x:focus-visible,.hp-a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hp-note{color:var(--muted);font-size:14px;max-width:56ch}
.hp-special .hp-seg{display:none}

/* Kurzinfo zu einem Feld */
.hp-tip{position:absolute;z-index:6;left:0;top:0;width:300px;max-height:min(70vh,430px);overflow:auto;padding:13px 15px 11px;border-radius:14px;
  background:rgba(10,13,36,.95);border:1px solid rgba(170,180,255,.24);box-shadow:0 18px 50px rgba(0,0,0,.55);color:var(--text);font:400 13px/1.45 var(--font);text-align:left}
.hp-tip[hidden]{display:none}
.hp-tip:not(.pinned){pointer-events:none}                            /* Vorschau beim Zeigen verdeckt keine Nachbarpunkte; Klick heftet an */
.hp-tip:not(.pinned) .hp-x{visibility:hidden}
.hp-x{position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:var(--text);font:400 19px/1 var(--font);cursor:pointer}
.hp-x:hover{background:rgba(255,255,255,.14)}
.hp-h{margin:1px 30px 9px 0;font:600 11px/1.35 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hp-e{margin:0 0 10px;padding:1px 0 1px 10px;border-left:3px solid var(--c)}
.hp-n{margin:0;font-weight:600}
.hp-n b{margin-right:3px;color:var(--c)}
.hp-v{margin:2px 0 0;color:var(--muted);font-size:12px}
.hp-s{margin:5px 0 0;font-size:12.5px}
.hp-a{display:inline-block;margin-top:5px;color:var(--gold);font-size:12px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(227,191,110,.35)}
.hp-a:hover{border-color:var(--gold)}
.hp-f{margin:4px 0 0;padding-top:8px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-style:italic}
.hp-f span{display:block;margin-bottom:3px;color:var(--gold);font:600 10.5px/1.3 var(--font);letter-spacing:.1em;text-transform:uppercase;font-style:normal}

@media (max-width:980px){
  .hero{min-height:0;padding:100px 0 30px}
  .hero-vis{margin-top:14px}
  .hero-pts{min-height:100px}
}
@media (max-width:600px){.hero-pts{min-height:132px}}   /* 6 Punkte in zwei Reihen (360–414 px gemessen 132): kein Nachrücken beim Aufruf mit #anker */
@media (prefers-reduced-motion:reduce){.hp-pt{transition:none}}

/* Standbild für schwache Geräte (js/hero3d.js showStill): dieselbe Grafik als <canvas>, leicht geneigt wie die 3D-Bühne,
   Punkte des Tages als SVG darüber; Knopf „3D trotzdem laden“ unten rechts in der Bühne */
.hero .hs-box{position:absolute;top:4%;bottom:6%;left:50%;aspect-ratio:1;transform:translateX(-50%) perspective(1400px) rotateX(24deg);transform-origin:50% 60%}
.hero .hs-img,.hero .hs-ov{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.hero .hs-img{border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(170,180,255,.18)}
.hero .hs-ov{overflow:visible;cursor:default}
.hero .hs-ov rect[data-key]{cursor:pointer}
.hero .hs-lab{pointer-events:none}                                   /* Klicks gehen an die Felder darunter */
.hero .hs-lab text{font-family:var(--font);font-weight:700;paint-order:stroke;stroke:rgba(7,10,28,.9);stroke-width:.85px;stroke-linejoin:round}   /* Einheiten des Overlays: 0–100 */
.hero .hs-3d{position:absolute;right:8px;bottom:8px;z-index:3;border:1px solid rgba(227,191,110,.6);border-radius:999px;background:rgba(7,10,28,.82);color:var(--gold);
  font:600 12px/1 var(--font);padding:0 14px;min-height:36px;cursor:pointer}
.hero .hs-3d:hover{background:rgba(227,191,110,.14)}
.hero .hs-3d:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.hero .hs-3d[hidden]{display:none}
@media (pointer:coarse){.hero .hs-3d{min-height:40px}}
.hero #hero3d[data-mode="lite"] .hs-box{bottom:12%}                  /* Platz für den Knopf unter der Bildecke (GR-20) */
/* schmal: Knopf mittig unter das Standbild, das Bild rückt dafür nach oben (GR-20: sonst liegt er auf der Bildecke) */
@media (max-width:980px){
  .hero #hero3d[data-mode="lite"] .hs-box{top:2%;bottom:20%}
  .hero .hs-3d{right:auto;left:50%;bottom:2px;transform:translateX(-50%);white-space:nowrap}
}
/* ---------- Kin-Orakel über der Matrix (js/home.js #hero-or, 05.10.2026): Orakelkreuz + Kin, Mond.Tag/Plasma, Mantra, Datum ----------
   Höhe reserviert (kein Layoutsprung beim Füllen); die Bühne darunter etwas flacher, damit die Punkte-Leiste im ersten Bild bleibt.
   min-height (Kontrolle Runde 8): Desktop gemessen 186,6 px für alle Mantras → 188 px. */
.hero-or{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"x t" "x m";align-content:center;width:fit-content;max-width:100%;margin-inline:auto;align-items:center;gap:0 18px;min-height:188px;margin-block:0 4px;padding:8px 22px 8px 12px;border:1px solid var(--line);border-radius:18px;background:rgba(7,10,28,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .5s ease}
.hero-or.ready{opacity:1}
.ho-x{grid-area:x;display:grid;grid-template-columns:repeat(3,auto);grid-template-areas:". g ." "a d n" ". o .";gap:0 2px;align-items:center;justify-items:center}
.ho-c{display:flex;flex-direction:column;align-items:center;gap:0;padding:2px 3px 1px;border-radius:8px;color:var(--muted);text-decoration:none;line-height:0}
.ho-c svg{display:block;height:auto}
.ho-c b{font:600 9.5px/1.15 var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
.ho-c.guia{grid-area:g}.ho-c.antipoda{grid-area:a}.ho-c.destino{grid-area:d}.ho-c.analogo{grid-area:n}.ho-c.oculto{grid-area:o}
.ho-c.destino{background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent)}
.ho-c.destino b{color:var(--text);font-size:11px}
.ho-c:hover,.ho-c:focus-visible{background:rgba(227,191,110,.12);outline:none;box-shadow:0 0 0 1px var(--gold)}
.ho-t{grid-area:t;min-width:0;display:flex;flex-direction:column;gap:3px;align-self:end}
.ho-mw{grid-area:m;min-width:0;display:flex;flex-direction:column;gap:1px;align-self:start}
.ho-d{font:600 10.5px/1.3 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ho-k{font:700 clamp(16px,1.5vw,20px)/1.2 var(--display);color:var(--text);overflow-wrap:anywhere}
.ho-meta{font-size:12.5px;color:var(--muted)}
.ho-m{margin-top:4px;font:italic 500 clamp(13.5px,1.15vw,15.5px)/1.4 var(--font);color:var(--text);quotes:"“" "”"}
.ho-ml{font-size:11px;color:var(--faint);letter-spacing:.04em}
@media (min-width:981px){ .hero-or ~ .hero-stage{aspect-ratio:25/15.5;max-height:max(340px,calc(100svh - 400px))} }   /* Punkte-Leiste bleibt im ersten Bild (1280 × 739) */
@media (max-width:600px){
  .hero-or{grid-template-areas:"x t" "m m";gap:4px 12px;padding:8px 12px 10px 8px;min-height:242px}   /* Mantra unter dem Kreuz über die volle Breite: Höhe bis 2 Mantrazeilen stabil */
  .ho-t{align-self:center}
  .ho-c svg{width:24px}.ho-c.destino svg{width:34px}
  .ho-k{font-size:15px}
  .ho-m{font-size:13px}
}