/* ============================================================
   anxosanchez — page-sobre.css
   Estilos específicos da páxina "Sobre min" (ID 22).
   Cárgase só aí (enqueue condicional en functions.php).
   ============================================================ */

/* ============================================================
   HERO ORBITAL — fondo navy + grid 40px + shooting stars + orbital.

   Container do hero: CSS Class = `anxo-hero` (regra en base.css).

   1) Decoración de fondo (grid + shooting stars): widget HTML coa
      clase `anxo-hero-deco`. Markup e regras CSS xenéricas en base.css
      (sección "HERO NAVY ANIMADO"). Reutilízase tamén en /contacto.

   2) Orbital (disco accent + favicon + texto rotando): widget HTML
      na columna onde vaia o selo. Específico de /sobre — vai abaixo.
      SEN clase no Avanzado do widget.

        <div class="anxo-orbit">
          <div class="anxo-orbit__text">
            <svg viewBox="0 0 200 200">
              <defs>
                <path id="anxo-orbit-path"
                      d="M 100,100 m -85,0 a 85,85 0 1,1 170,0 a 85,85 0 1,1 -170,0"/>
              </defs>
              <text><textPath href="#anxo-orbit-path" startOffset="0">
                ATENCIÓN PREMIUM · EN GALEGO · DESDE 2018 · ATENCIÓN PREMIUM · EN GALEGO · DESDE 2018 ·
              </textPath></text>
            </svg>
          </div>
          <div class="anxo-orbit__center">
            <img src="/wp-content/uploads/favicon_anxo_sanchez_branco.svg" alt="">
          </div>
        </div>

   Para editar o texto orbital: cambiar o contido entre <textPath>…</textPath>.
   Engadir " · " entre frases e terminar tamén con " · " para que empate ao loop.
   ============================================================ */

/* ============================================================
   ORBITAL — disco accent co favicon branco + texto en circunferencia
   ============================================================ */
.anxo-orbit {
  /*position: relative;*/
  aspect-ratio: 1;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  z-index: 1;
}

.anxo-orbit__text {
  position: absolute;
  inset: 0;
  animation: anxo-orbit-rotate 40s linear infinite;
  transform-origin: 50% 50%;
}
.anxo-orbit__text svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.anxo-orbit__text text {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  fill: var(--e-global-color-7ea05c1);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.anxo-orbit__center {
  position: absolute;
  inset: 22%;
  background: rgba(148, 6, 6, 0.5);
  backdrop-filter: blur(1.75px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  /*box-shadow: 0 24px 64px rgba(148, 6, 6, .45);*/
}
.anxo-orbit__center img {
  width: 55%;
  height: auto;
  display: block;
  border-radius: 0px !important;
}

@keyframes anxo-orbit-rotate {
  to { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  .anxo-orbit { max-width: 280px; }
  .anxo-orbit__text text { font-size: 10px; letter-spacing: .18em; }
}

/* NOTA: `.anxo-pillar` (cards de compromisos/piares) promovido a
   base.css o 2026-05-16 para reutilizalo en /servizo/*. Aquí non
   queda nada del; só hai que poñer a clase `anxo-pillar` no
   container do card en Elementor (igual ca antes). */

@media (prefers-reduced-motion: reduce) {
  .anxo-orbit__text { animation: none; }
}