/* ============================================================
   anxosanchez — base.css
   SÓ o que o Kit de Deseño de Elementor non pode facer.
   Todo o demais (cores, tipografías, espazados, estilos de widget)
   confígurase en Elementor / no Kit. CSS engádese reactivamente,
   cando algo concreto non se poida facer aí.
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11"; /* features OpenType de Inter: "a" simple, "l" con cola */
}

/* Eixo de ancho variable de Bricolage Grotesque nos títulos
   (Elementor non expón font-variation-settings) */
h1, .titulo-valor { font-variation-settings: "wdth" 92; }
h2, h3, h4, h5, h6, .titulos-secundarios { font-variation-settings: "wdth" 95; }

/* Destacar palabras clave nos títulos: vermello + cursiva Bricolage
   lixeiramente condensada. Patrón único do site — usar <em> nativa
   (no editor de texto de Elementor, seleccionar palabra + botón I). */
.destaque {
  color: var(--e-global-color-accent);
  /*font-style: italic;*/
 /* font-variation-settings: "wdth" 92;*/
}

/* Hero wrapper xenérico: calquera container con decoración absoluta
   (grids, liñas-pulse, orbital, marks…) precisa ser stacking context
   illado + clipping. → CSS Class do container: `anxo-hero`.
   Os fillos decorativos van con `position:absolute; inset:0;` nas
   regras específicas de cada páxina (page-home.css, page-sobre.css). */
.anxo-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Wrapper de decoración fullbleed para widgets HTML de Elementor.
   Necesario porque Elementor mete o HTML do widget nun wrapper que
   é `position:relative` por defecto → calquera absolute interior
   ancórase a ese wrapper (0 de alto) e desaparece.
   → CSS Class no propio widget HTML: `anxo-hero-deco`. Co isto, o
   wrapper do widget vólvese absolute fullbleed do hero, e os
   elementos decorativos interiores (grid, liñas, etc.) pinease
   correctamente. */
.anxo-hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   HERO NAVY — fondo común aos heroes escuros de arquivo/single.
   Compárteno: archive de PROXECTOS, archive de PORTFOLIO, archive
   de RECURSOS e o single de proxecto. É só fondo: non leva cor de
   sección (ponse en Elementor: Primary #061A26) nin decoración.

   En Elementor, na sección do hero → Avanzado → CSS Classes:
     `anxo-hero-navy`                        (single: só degradado)
     `anxo-hero-navy anxo-hero-navy--grid`   (arquivos: + grella)
   Se ademais leva decoración nun widget HTML, ese widget leva
   `anxo-hero-deco` (ver arriba).
   ============================================================ */
.anxo-hero-navy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Degradado: arriba case negro (#050F16) fundindo ao navy da
   sección. Patrón z-index:-1 + isolation (coma .anxo-final-cta). */
.anxo-hero-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #050F16 0%, rgba(5, 15, 22, 0) 60%);
  pointer-events: none;
}

/* Modificador dos ARQUIVOS: cuadrícula estática tenue de 56px. */
.anxo-hero-navy--grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

/* ============================================================
   LUZ QUE ENTRA — decoración de hero: halo ambiente que respira +
   poza de luz no chan + motas de po en suspensión que soben.
   CSS puro, sen JS. GPU-friendly (só transform/opacity).

   Vive aquí porque a comparten varios arquivos (proxectos, recursos
   e, se se quere, portfolio).

   COR: VERMELLO corporativo. Houbo unha variante verde (proxectos
   como "sección non comercial") descartada o 2026-07-12 tras
   comparalas en vivo: gaña o vermello de marca.

   Usa DÚAS cores: #940706 (escura) no halo ambiente e #FF6B6B (viva)
   na poza e nas motas. O vermello corporativo plano non se le sobre
   navy en elementos pequenos — mesmo motivo polo que os glyphs de
   servizo usan #ff6b6b. As alfas están un chisco por riba do que
   levaba o verde porque o #940706 ten menos luminancia.

   As tres cores son custom properties: se algún día fai falla unha
   sección con outro ton, redefínense nunha clase na sección (sen
   tocar nin o markup nin esta regra).

   En Elementor:
   1. SECCIÓN do hero: `anxo-hero-navy` (+ `--grid` nos arquivos).
   2. WIDGET HTML coa decoración (markup en
      widgets-html/hero-proxecto-luz.txt) → CSS Classes:
      `anxo-hero-deco` (imprescindible: absolutiza o wrapper).
   ============================================================ */

.anxo-hero-luz {
  position: absolute;
  inset: 0;
  pointer-events: none;

  --luz-halo: rgba(148, 7, 6, 0.38);     /* #940706 — halo ambiente */
  --luz-pool: rgba(255, 107, 107, 0.26); /* #FF6B6B — poza no chan  */
  --luz-mote: rgba(255, 107, 107, 0.95); /* #FF6B6B — motas .g      */
}

/* Halo ambiente á dereita, respira amodo */
.anxo-hero-luz__halo {
  position: absolute;
  top: -10%;
  bottom: -10%;
  right: clamp(2%, 16vw, 20%);
  width: clamp(260px, 30vw, 460px);
  background: radial-gradient(ellipse 50% 60% at 50% 50%, var(--luz-halo) 0%, transparent 70%);
  animation: anxo-luz-bloom 9s ease-in-out infinite;
}
@keyframes anxo-luz-bloom {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* Poza de luz no chan */
.anxo-hero-luz__pool {
  position: absolute;
  bottom: -4%;
  right: clamp(-6%, 10vw, 12%);
  width: clamp(380px, 44vw, 700px);
  height: 180px;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, var(--luz-pool) 0%, transparent 70%);
  filter: blur(4px);
}

/* Motas de po que soben (brancas + as `.g` na cor da variante) */
.anxo-hero-luz__motes {
  position: absolute;
  inset: 0;
}
.anxo-hero-luz__motes span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(0.5px);
  opacity: 0;
  animation: anxo-luz-mote linear infinite;
}
.anxo-hero-luz__motes span.g {
  background: var(--luz-mote);
}
@keyframes anxo-luz-mote {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.9; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-52vh); opacity: 0; }
}
.anxo-hero-luz__motes span:nth-child(1) { right: 12%; bottom: 14%; animation-duration: 9s;  animation-delay: 0.8s; }
.anxo-hero-luz__motes span:nth-child(2) { right: 26%; bottom: 28%; animation-duration: 12s; animation-delay: 3.4s; width: 2px; height: 2px; }
.anxo-hero-luz__motes span:nth-child(3) { right: 8%;  bottom: 6%;  animation-duration: 10s; animation-delay: 5.2s; }
.anxo-hero-luz__motes span:nth-child(4) { right: 33%; bottom: 42%; animation-duration: 13s; animation-delay: 2.6s; width: 2px; height: 2px; }
.anxo-hero-luz__motes span:nth-child(5) { right: 18%; bottom: 20%; animation-duration: 11s; animation-delay: 7s; }
.anxo-hero-luz__motes span:nth-child(6) { right: 41%; bottom: 10%; animation-duration: 14s; animation-delay: 1.6s; width: 2px; height: 2px; }
.anxo-hero-luz__motes span:nth-child(7) { right: 22%; bottom: 48%; animation-duration: 12s; animation-delay: 9s; }
.anxo-hero-luz__motes span:nth-child(8) { right: 6%;  bottom: 34%; animation-duration: 10s; animation-delay: 4.4s; }
.anxo-hero-luz__motes span:nth-child(9) { right: 48%; bottom: 4%;  animation-duration: 15s; animation-delay: 6.2s; width: 2px; height: 2px; }

@media (prefers-reduced-motion: reduce) {
  .anxo-hero-luz__halo  { animation: none; opacity: 0.85; }
  .anxo-hero-luz__motes { display: none; }
}


/* ============================================================
   PAXINACIÓN DO LOOP GRID — común a TODOS os arquivos.
   Úsana: blog (Posts page + categorías), arquivo de proxectos,
   arquivo de recursos e (cando exista) arquivo de portfolio.
   Vive aquí e non nun page-X.css porque a mesma sección cópiase
   entre arquivos; se estivese nun ficheiro condicional, ao copiala
   quedaría sen estilos (xa pasou co arquivo de recursos).

   No widget Loop Grid → Avanzado → CSS Classes: `anxo-blog-grid`.
   Pagination type: Numbers (page_reload).

   Markup que renderiza Elementor:
   nav.elementor-pagination
     span.page-numbers.current   (páxina actual)
     a.page-numbers              (resto de páxinas)
     span.page-numbers.dots      (elipse "…" se hai moitas)
     a.page-numbers.prev / .next (frechas, se se activan no widget)

   Estilo da demo (demos/blog.html): separador superior fino, pílulas
   brancas con borde, Geist Mono, hover navy, activa navy sólido.
   ============================================================ */

.anxo-blog-grid .elementor-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 4rem !important;
  padding-top: 3rem !important;
  border-top: 1px solid #E5E9EE !important;
}

/* Cada item (números, frechas e actual) = pílula */
.anxo-blog-grid .elementor-pagination .page-numbers {
  display: inline-block !important;
  min-width: 38px !important;
  padding: 0.625rem 0.875rem !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E9EE !important;
  border-radius: 6px !important;
  color: #4A5B67 !important;
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition:
    border-color .15s cubic-bezier(.4, 0, .2, 1),
    color        .15s cubic-bezier(.4, 0, .2, 1) !important;
}

/* Hover nos links */
.anxo-blog-grid .elementor-pagination a.page-numbers:hover {
  border-color: var(--e-global-color-primary) !important;
  color: var(--e-global-color-primary) !important;
}

/* Páxina actual: navy sólido, texto branco */
.anxo-blog-grid .elementor-pagination .page-numbers.current {
  background: var(--e-global-color-primary) !important;
  border-color: var(--e-global-color-primary) !important;
  color: #FFFFFF !important;
}

/* Elipse "…": sen caixa */
.anxo-blog-grid .elementor-pagination .page-numbers.dots {
  background: transparent !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .anxo-blog-grid .elementor-pagination .page-numbers {
    transition: none !important;
  }
}


/* ============================================================
   CAIXA CON GLOW — card navy con luces radiais + reixa técnica.
   Para "caixiñas" destacadas dentro dun single (ex. o bloque
   "Isto vai de:" dos singles de proxecto e de recurso).

   En Elementor: no CONTAINER da caixa → Avanzado → CSS Classes:
     `anxo-card-glow`
   O fondo navy pono a propia clase (Primary); non fai falla
   configuralo no container. O padding/radio, si (en Elementor).
   ============================================================ */

.anxo-card-glow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--e-global-color-primary);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35);
}

/* Luces radiais: glow accent nas DÚAS esquinas opostas
   (arriba-esquerda e abaixo-dereita), simétrico.
   Cada glow vai a dúas capas polo mesmo motivo ca a luz dos heroes:
   #940706 solo queda turbio sobre navy, e o núcleo #FF6B6B é o que o
   fai ler como luz. */
.anxo-card-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(255, 107, 107, .10), transparent 60%),
    radial-gradient(90% 90% at 0% 0%, rgba(148, 7, 6, .45), transparent 60%),
    radial-gradient(60% 60% at 100% 100%, rgba(255, 107, 107, .10), transparent 60%),
    radial-gradient(90% 90% at 100% 100%, rgba(148, 7, 6, .45), transparent 60%);
}

/* Reixa técnica de 32px, esvaecida cara abaixo cunha máscara radial */
.anxo-card-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(80% 80% at 50% 0%, #000 0%, transparent 75%);
}


/* Botón de Elementor: a icona desprázase no hover.
   → poñer a clase `anxo-btn-arrow` no widget de botón. */
.anxo-btn-arrow .elementor-button-icon { transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.anxo-btn-arrow:hover .elementor-button-icon { transform: translateX(4px); }

/* Drop cap (capitular) — letra inicial do primeiro parágrafo dun
   bloque longread en grande, vermella, Bricolage condensada.
   → en Elementor, no widget Text Editor (ou Post Content do Theme
     Builder), Avanzado → CSS Classes: `anxo-dropcap`. Aplícase ao
     primeiro <p> do bloque; o resto do texto queda intacto.
   Casos de uso: single de blog, /sobre, single de portfolio, single
   de andaina — calquera bloque de texto longo que abra páxina. */
.anxo-dropcap > p:first-of-type::first-letter {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 5em;
  line-height: .85;
  float: left;
  margin: .05em .15em 0 -.05em;
  letter-spacing: -.05em;
  font-variation-settings: "wdth" 85;
  color: var(--e-global-color-accent);
}

/* ============================================================
   CTA FINAL — filigrana de dous gradients accent sobre fondo navy.
   Reutilizable en calquera páxina que peche cun bloque CTA.
   En Elementor: na sección/container do CTA → fondo Primary (navy)
   e clase `anxo-final-cta` no container (Avanzado → CSS Classes).
   ============================================================ */
.anxo-final-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.anxo-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 50%, rgba(148, 6, 6, 0.40) 0%, transparent 50%),
    radial-gradient(circle at 20% 100%, rgba(148, 6, 6, 0.20) 0%, transparent 50%);
}

/* ============================================================
   PILLARS — cards de compromisos / piares reutilizables.
   O fondo, borde, padding e redondeo configúranse en Elementor.
   No hover: lift + sombra navy moi sutil + liña accent superior
   de 5px que crece dende a esquerda. NON se toca a cor do borde.
   → Avanzado → CSS Classes do container do card: `anxo-pillar`.
   Usos: /sobre ("Por que aquí…"), /servizo/* (compromisos), etc.
   ============================================================ */
.anxo-pillar {
  position: relative;
  overflow: hidden;
  transition:
    transform   .28s cubic-bezier(.4, 0, .2, 1),
    box-shadow  .28s cubic-bezier(.4, 0, .2, 1);
}
.anxo-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 5px;
  background: var(--e-global-color-accent);
  transition: width .32s cubic-bezier(.4, 0, .2, 1);
}
.anxo-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(6, 26, 38, .07);
}
.anxo-pillar:hover::before { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anxo-btn-arrow .elementor-button-icon { transition: none; }
  .anxo-pillar::before { transition: none; }
}

/* ============================================================
   HERO DE SERVIZO — fondo común aos 5 servizos.
   En Elementor: na sección do hero pon a cor de fondo Primary
   (navy) e a clase `anxo-servizo-hero` (Avanzado → CSS Classes).
   Esta clase engade: grid tenue de fondo (::before) + blob accent
   difuso arriba á dereita (::after). Mesmo patrón z-index:-1 +
   isolation que `.anxo-final-cta` → o contido (2 columnas: texto
   á esquerda, glyph animado á dereita) queda automaticamente por
   riba sen máis clases. Referencia: demos/servizo-deseno-web-v2.html
   ============================================================ */
.anxo-servizo-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Gridlines decorativas */
.anxo-servizo-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
}
/* Blob accent difuso, arriba á dereita */
.anxo-servizo-hero::after {
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  max-width: 700px;
  max-height: 700px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(148, 6, 6, 0.35) 0%, transparent 60%);
}

/* ============================================================
   GLYPH ANIMADO — motor común aos 5 glyphs de servizo.
   Linguaxe: monoliña branca + xesto en accent (.hot). Animación
   "estilo 2": cada trazo (pathLength="1") debúxase só (draw-on) ao
   entrar en pantalla, o .hot remata o xesto, e despois o svg respira
   (float) + o .hot pulsa en bucle. Aprobado en demos/patterns-2.html.

   En Elementor: widget HTML na columna dereita do hero. O markup do
   SVG concreto + o script de disparo vai en cada páxina (é o que
   cambia por servizo). Clases do wrapper: `anxo-glyph anxo-glyph--anim idle`.
   O script engade `.play` cando o glyph entra en pantalla.
   ============================================================ */
.anxo-glyph {
  display: block;
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 1;
  color: #fff;
}
.anxo-glyph svg { width: 100%; height: 100%; overflow: visible; }
.anxo-glyph [stroke] { stroke: currentColor; }
.anxo-glyph .hot { stroke: #ff6b6b; } /* vermello vivo: lese mellor que o accent #940606 sobre navy */

/* estado inicial (antes de .play) */
.anxo-glyph--anim .ln  { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anxo-glyph--anim .hot { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anxo-glyph--anim .dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); }
.anxo-glyph--anim svg  { transform-origin: 50% 50%; }

/* draw-on (a clase .play engádea o script ao entrar en pantalla) */
.anxo-glyph--anim.play .ln    { animation: anxo-g-draw 1s cubic-bezier(.65, 0, .35, 1) forwards; }
.anxo-glyph--anim.play .ln.l2 { animation-delay: .4s; }
.anxo-glyph--anim.play .ln.l3 { animation-delay: .6s; }
.anxo-glyph--anim.play .ln.l4 { animation-delay: .8s; }
.anxo-glyph--anim.play .ln.l5 { animation-delay: 1s; }
.anxo-glyph--anim.play .dot    { animation: anxo-g-pop .35s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.anxo-glyph--anim.play .dot.d1 { animation-delay: .6s; }
.anxo-glyph--anim.play .dot.d2 { animation-delay: .72s; }
.anxo-glyph--anim.play .dot.d3 { animation-delay: .84s; }
.anxo-glyph--anim.play .dot.d4 { animation-delay: .96s; }
.anxo-glyph--anim.play .hot   { animation: anxo-g-draw .8s cubic-bezier(.65, 0, .35, 1) 1.15s forwards; }

/* respiración tras debuxar (engadir clase `idle` ao wrapper) */
.anxo-glyph--anim.play.idle svg  { animation: anxo-g-float 5.5s ease-in-out 2.2s infinite; }
.anxo-glyph--anim.play.idle .hot { animation: anxo-g-draw .8s cubic-bezier(.65, 0, .35, 1) 1.15s forwards,
                                              anxo-g-hot 2.8s ease-in-out 2.2s infinite; }

@keyframes anxo-g-draw  { to { stroke-dashoffset: 0; } }
@keyframes anxo-g-pop   { to { opacity: 1; transform: scale(1); } }
@keyframes anxo-g-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes anxo-g-hot   { 0%, 100% { stroke-dashoffset: 0; opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .anxo-glyph--anim .ln,
  .anxo-glyph--anim .hot { stroke-dashoffset: 0 !important; animation: none !important; }
  .anxo-glyph--anim .dot { opacity: 1 !important; transform: none !important; animation: none !important; }
  .anxo-glyph--anim.play.idle svg { animation: none !important; }
}

/* ============================================================
   FAQ — acordeón (widget Nested Accordion de Elementor) sobre navy.
   En Elementor: no widget Nested Accordion → Avanzado → CSS Classes:
   `anxo-faq`. Estilo de liñas separadoras finas, pregunta en Bricolage
   700 e icona circular que se enche de accent ao abrir (Elementor
   intercambia o glifo + / × só). Reutilizable en todas as FAQ do site.
   Asume sección de fondo navy. Ref: demos/servizo-deseno-web-v2.html (§7).
   ============================================================ */
.anxo-faq .e-n-accordion { gap: 0; }

/* item = liña separadora fina, sen caixa nin fondo */
.anxo-faq .e-n-accordion-item {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  background: transparent;
  margin: 0;
}
.anxo-faq .e-n-accordion-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* título (summary) */
.anxo-faq .e-n-accordion-item-title {
  padding: 1.5rem 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
.anxo-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.anxo-faq .e-n-accordion-item-title-header { flex: 1 1 auto; margin: 0; }
.anxo-faq .e-n-accordion-item-title-text {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" 95;
  color: #fff;
  transition: color 150ms cubic-bezier(.4, 0, .2, 1);
}
.anxo-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: #FCE8E8; }

/* icona: círculo branco translúcido que se enche de accent ao abrir */
.anxo-faq .e-n-accordion-item-title-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 220ms cubic-bezier(.4, 0, .2, 1),
              border-color   220ms cubic-bezier(.4, 0, .2, 1);
}
.anxo-faq .e-n-accordion-item-title-icon svg {
  width: 12px;
  height: 12px;
  fill: #fff;
  transition: fill 220ms cubic-bezier(.4, 0, .2, 1);
}
.anxo-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  background: var(--e-global-color-accent);
  border-color: var(--e-global-color-accent);
}

/* corpo da resposta (widget Heading dentro do item → tratádeo como texto) */
.anxo-faq .e-n-accordion-item > .e-con { padding: 0; }
.anxo-faq .e-n-accordion-item .elementor-widget-heading { margin: 0; }
.anxo-faq .e-n-accordion-item .elementor-heading-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.82);
  max-width: 70ch;
  padding: 0 0 1.75rem;
}
.anxo-faq .e-n-accordion-item .elementor-heading-title strong { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .anxo-faq .e-n-accordion-item-title-text,
  .anxo-faq .e-n-accordion-item-title-icon,
  .anxo-faq .e-n-accordion-item-title-icon svg { transition: none; }
}

/* ============================================================
   HERO NAVY ANIMADO — cuadrícula 40px + shooting stars.
   Decoración de fondo para heroes navy de páxinas tipo marca persoal
   (/sobre, /contacto, etc.). Promovido de page-sobre.css o 2026-05-27
   ao usarse tamén en /contacto. Nomes consérvanse (`anxo-sobre-*`) para
   non tocar widgets HTML xa pegados en Elementor.

   Uso en Elementor:
   1) Container do hero (sección): CSS Class = `anxo-hero` (xenérico)
   2) Widget HTML co markup de abaixo, no campo Avanzado → CSS Classes
      do widget pon: `anxo-hero-deco` (fai o widget fullbleed dentro do hero)

        <div class="anxo-sobre-grid"></div>
        <div class="anxo-sobre-pulses" aria-hidden="true">
          <span></span><span></span><span></span><span></span>
          <span></span><span></span><span></span><span></span>
        </div>

   Notas:
   - 4 streaks brancos + 2 accent vermellos + 2 brancos extra = 8 spans.
     Impares = verticais (descenden), pares = horizontais (van a dereita).
   - Posicións aliñadas á cuadrícula 40px (ver px en cada span).
   - GPU: anímanse con translate, animation-fill-mode: backwards para que
     queden off-screen durante o delay inicial.
   ============================================================ */

/* --- Cuadrícula 40px estática, esvaece dende arriba --- */
.anxo-sobre-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, transparent 0%, #000 30%, transparent 82%);
          mask-image: radial-gradient(130% 110% at 50% 0%, transparent 0%, #000 30%, transparent 82%);
}

/* --- Shooting stars: cada <span> é o propio streak (un segmento de
   liña con cabeza brillante + cola fade) que percorre unha columna
   ou fila do grid. Anímase con `transform: translate` → porcentaxes
   sobre o propio elemento (predicibles), GPU-friendly. Impares =
   verticais (descenden); pares = horizontais (van a dereita).
   Posicións aliñadas á cuadrícula de 40px.

   Cálculo do off-screen: o streak ocupa 45% do contedor. Con
   `translateY(-110%)` translátase 110% da súa propia altura = -49.5%
   do contedor → fóra arriba. Con `translateY(225%)` = +101.25% do
   contedor → fóra abaixo. Entre iteracións, salta de 225% a -110%
   instantáneamente, pero ambos están off-screen → invisible. --- */
.anxo-sobre-pulses {
  position: absolute;
  inset: 0;
}
.anxo-sobre-pulses span {
  position: absolute;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-fill-mode: backwards;
  will-change: transform;
}

/* Verticais (impares) — cabeza leading abaixo, cola fade arriba */
.anxo-sobre-pulses span:nth-child(odd) {
  top: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, .35) 94%,
    transparent 100%
  );
  animation-name: anxo-sobre-streak-v;
}

/* Horizontais (pares) — cabeza leading á dereita, cola fade á esquerda */
.anxo-sobre-pulses span:nth-child(even) {
  left: 0;
  width: 45%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0) 65%,
    rgba(255, 255, 255, .35) 94%,
    transparent 100%
  );
  animation-name: anxo-sobre-streak-h;
}

/* Posicións aliñadas á cuadrícula 40px + ritmos desfasados */
.anxo-sobre-pulses span:nth-child(1) { left: 200px;  animation-duration: 5.2s; animation-delay: 0.2s; }
.anxo-sobre-pulses span:nth-child(2) { top:  160px;  animation-duration: 5.0s; animation-delay: 1.1s; }
.anxo-sobre-pulses span:nth-child(3) { left: 520px;  animation-duration: 6.8s; animation-delay: 2.1s; }
.anxo-sobre-pulses span:nth-child(4) { top:  360px;  animation-duration: 6.2s; animation-delay: 0.4s; }

/* Dúas en accent vermello — sobrescriben só o gradient */
.anxo-sobre-pulses span:nth-child(5) {
  left: 1080px;
  animation-duration: 5.6s;
  animation-delay: 3.4s;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(148, 6, 6, 0) 65%,
    rgba(148, 6, 6, .45) 94%,
    transparent 100%
  );
}
.anxo-sobre-pulses span:nth-child(6) {
  top: 600px;
  animation-duration: 5.8s;
  animation-delay: 2.7s;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(148, 6, 6, 0) 65%,
    rgba(148, 6, 6, .45) 94%,
    transparent 100%
  );
}

.anxo-sobre-pulses span:nth-child(7) { left: 1480px; animation-duration: 6.4s; animation-delay: 1.5s; }
.anxo-sobre-pulses span:nth-child(8) { top:  840px;  animation-duration: 6.6s; animation-delay: 3.9s; }

@keyframes anxo-sobre-streak-v {
  0%   { transform: translateY(-110%); }
  100% { transform: translateY(225%); }
}
@keyframes anxo-sobre-streak-h {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(225%); }
}

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

/* ============================================================
   SECTOR HERO — fondo común ás landings sectoriais
   (nutricionistas + tradutores).
   En Elementor: na sección do hero pon a cor de fondo Off-white
   e a clase `anxo-sector-hero` (Avanzado → CSS Classes, unha
   soa clase). O modifier por sector vai DENTRO, na clase do
   widget HTML das celas (ex.: `anxo-sector-hero__cells--nutri`)
   — así a sección queda cunha soa clase no padrón do proxecto.
   Estrutura recomendada:
     <section.anxo-sector-hero>
       widget HTML  →  ver widgets-html/hero-sector-X.txt
       inner-section: eyebrow + H1 + lead + 2 CTA + trust strip
     </section>
   As 10 celas teñen posicións e delays prefixados; cada widget
   HTML por sector trae 10 <span>s baleiros + a súa clase
   modifier para cor. Referencia: demos/servizo-nutricionistas-
   v2-a.html
   ============================================================ */
.anxo-sector-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Grid 40px en navy 6% con máscara radial (esváese fóra do centro) */
.anxo-sector-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(6, 26, 38, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 26, 38, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%);
}
/* Blob verde difuso arriba á dereita con respiración lenta:
   intensidade e tamaño varían suavemente cada 9s, sin chamar a
   atención. É a única animación do hero. */
.anxo-sector-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 95% 10%, rgba(31, 122, 77, 0.26) 0%, transparent 60%);
  transform-origin: 95% 10%;
  animation: anxo-sector-blob-breathe 9s ease-in-out infinite;
}
@keyframes anxo-sector-blob-breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .anxo-sector-hero::after { animation: none; opacity: 0.85; }
}


/* ============================================================
   NEWSLETTER — estilo completo do formulario de Elementor
   (movido de page-home.css 2026-06-12; úsase na home e no
   single do blog, por iso vive aquí en base.css)
   En Elementor: NO widget Form → Avanzado → CSS Classes:
     `anxo-newsletter`. Esquecer o panel "Style" do widget, todo
     se controla aquí. O form vai sobre fondo accent (vermello),
     polo que os colores son light (branco + opacidades).
   ============================================================ */

/* Form transparente (a pill vai no wrapper interno, non aquí) */
.anxo-newsletter .elementor-form {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Layout: pill SÓ sobre email+botón (debuxada con pseudoelemento),
   check de privacidade fóra, debaixo, sen pill. */
.anxo-newsletter .elementor-form-fields-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "email  button"
    "accept accept";
  align-items: stretch;
  margin: 0;
  gap: 0;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
}
/* O pseudo debuxa a pill só sobre o row 1 (email + botón) */
.anxo-newsletter .elementor-form-fields-wrapper::before {
  content: "";
  grid-row: 1;
  grid-column: 1 / -1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 6px;
  pointer-events: none;
}
.anxo-newsletter .elementor-form .elementor-field-group {
  margin: 0;
  width: auto;
}
.anxo-newsletter .elementor-field-type-email {
  grid-area: email;
  padding: 6px 0 6px 6px !important;
}
.anxo-newsletter .e-form__buttons {
  grid-area: button;
  padding: 6px 6px 6px 0 !important;
}
.anxo-newsletter .elementor-field-type-acceptance {
  grid-area: accept;
  margin-top: .75rem !important;
  padding: 0 .25rem !important;
  background: transparent;
  border: 0;
}

/* Input email — sen borde (a pill xa o ten), texto branco */
.anxo-newsletter .elementor-form .elementor-field-type-email input {
  width: 100%;
  height: 100%;
  min-height: 38px;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  padding: .625rem .875rem !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: .9375rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
.anxo-newsletter .elementor-form .elementor-field-type-email input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.anxo-newsletter .elementor-form .elementor-field-type-email input:focus,
.anxo-newsletter .elementor-form .elementor-field-type-email input:focus-visible {
  background: transparent !important;
  outline: 0 !important;
}
/* Focus mostrarase no propio pill */
.anxo-newsletter .elementor-form-fields-wrapper:focus-within {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
}

/* Botón — branco sobre accent, dentro do pill, SEN lift no hover */
.anxo-newsletter .elementor-form .e-form__buttons button {
  background: #fff !important;
  color: var(--e-global-color-accent) !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: .625rem 1.25rem !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: .875rem !important;
  letter-spacing: .01em !important;
  cursor: pointer;
  white-space: nowrap;
  height: 100%;
  transition: background .22s ease, box-shadow .22s ease, color .22s ease;
}
.anxo-newsletter .elementor-form .e-form__buttons button:hover {
  background: #fff !important;
  color: var(--e-global-color-as_accent_dark, #7A0505) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.anxo-newsletter .elementor-form .e-form__buttons button:active {
  box-shadow: none;
}

/* Acceptance — check MOI pequeno + texto Inter pequeniño, aliñados ao centro */
.anxo-newsletter .elementor-field-type-acceptance .elementor-field-subgroup {
  display: block;
  margin: 0;
}
.anxo-newsletter .elementor-field-option {
  display: flex;
  align-items: center; /* aliñado co texto, non flex-start */
  gap: .4rem;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: .6875rem !important;   /* 11px */
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, 0.72);
}
.anxo-newsletter .elementor-field-option input[type="checkbox"].elementor-acceptance-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 11px !important;
  height: 11px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 2px !important;
  background: transparent !important;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease;
  position: relative;
  top: 0; /* xa centrado polo flex */
}
.anxo-newsletter .elementor-field-option input[type="checkbox"].elementor-acceptance-field::before {
  content: "";
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 1px;
  transform: scale(0);
  transition: transform .12s ease-in-out;
}
.anxo-newsletter .elementor-field-option input[type="checkbox"].elementor-acceptance-field:checked {
  border-color: #fff !important;
}
.anxo-newsletter .elementor-field-option input[type="checkbox"].elementor-acceptance-field:checked::before {
  transform: scale(1);
}
.anxo-newsletter .elementor-field-option input[type="checkbox"].elementor-acceptance-field:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}
.anxo-newsletter .elementor-field-option label {
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: .6875rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}
.anxo-newsletter .elementor-field-option label a {
  color: #fff !important;
  font-family: inherit !important;
  font-size: inherit !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.anxo-newsletter .elementor-field-option label a:hover {
  text-decoration-thickness: 2px;
}

/* Mensaxes de validación */
.anxo-newsletter .elementor-message {
  margin-top: .75rem;
  padding: .5rem .75rem;
  border-radius: 4px;
  font-size: .8125rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Responsive: stack vertical en mobile */
@media (max-width: 600px) {
  .anxo-newsletter .elementor-form-fields-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "email"
      "button"
      "accept";
  }
  .anxo-newsletter .e-form__buttons { padding-right: 0 !important; }
  .anxo-newsletter .elementor-form .e-form__buttons button { width: 100%; }
}

/* ============================================================
   CAPTURA RESPONSIVE — marco de navegador + marco de móbil
   Para o single do CPT `portfolio` (proposta B, 2026-07-13).
   Ref. visual: demos/portfolio-caso-capturas.html §B

   Os MARCOS son 100% CSS (nin un PNG de mockup). O único
   ficheiro que carga é a captura da web do cliente, que entra
   por widget Imaxe cun Dynamic Tag ao campo de JetEngine.
   Van como <img> de verdade (non background) para que teñan
   alt, carga diferida e srcset — nunha web que vende SEO,
   unha captura invisible para Google sería mal chiste.

   ESTRUTURA EN ELEMENTOR (o layout faino Elementor, non o CSS):

   Container (flex row · align: END · gap)      ← sen clase
   ├── Container  `anxo-browser`                ← ancho: fill/grow
   │   ├── Container  `anxo-browser__bar`       ← SÓ a clase (layout no CSS)
   │   │   ├── Widget HTML  → <span class="anxo-browser__dots"></span>
   │   │   └── Widget `anxo-browser__url` co campo `url_cliente`
   │   │           (Texto con Dynamic Tag ou Dynamic Field de JetEngine)
   │   └── Container  `anxo-browser__viewport`
   │       └── Widget Imaxe
   │               Dynamic Tag → campo `captura_escritorio`
   │               Tamaño: FULL (precísase a páxina enteira)
   └── Container  `anxo-phone`                  ← ancho: nada (CSS: 240 px)
       └── Container  `anxo-phone__screen`      ← IMPRESCINDIBLE: recorta,
           └── Widget Imaxe                        redondea e dá o scroll
                   Dynamic Tag → campo `captura_mobil`
                   Tamaño: FULL

   Esquece o panel "Style" dos widgets: todo se controla aquí
   (mesmo criterio que `.anxo-newsletter`).

   AS CAPTURAS: páxina completa, WebP, 1200 px de ancho o
   escritorio e 390 o móbil. Sen o banner de cookies.

   O SCROLL DO HOVER: ao pasar o rato, a captura percorre a
   páxina enteira sen que o CSS saiba canto mide. `100cqh` é o
   alto do marco e `100%` o alto da imaxe, así que
   `translateY(100cqh - 100%)` despraza exactamente o que
   sobresae. Por iso o marco leva `container-type: size`.
   En táctil non se move (só `@media (hover: hover)`): un cadro
   que se despraza co dedo roubaríalle o scroll á páxina.
   ============================================================ */

/* ---- Peza común ás dúas pantallas ---- */
.anxo-browser__viewport,
.anxo-phone__screen {
  overflow: hidden;          /* recorta a captura, que é longuísima */
  container-type: size;      /* activa `cqh` = alto do marco */
}

.anxo-browser__viewport img,
.anxo-phone__screen img {
  display: block;
  width: 100%;
  height: auto;              /* a imaxe sobresae por abaixo: é o que se percorre */
  transition: transform 7000ms cubic-bezier(.33, 0, .25, 1);
}

@media (hover: hover) {
  .anxo-browser:hover .anxo-browser__viewport img,
  .anxo-phone:hover   .anxo-phone__screen img {
    transform: translateY(calc(100cqh - 100%));
  }
}

/* ---- Marco de navegador ---- */
.anxo-browser {
  border-radius: 12px;
  overflow: hidden;
  background: var(--e-global-color-secondary);       /* navy lift #0A2536 */
  box-shadow: 0 40px 90px -20px rgba(6, 26, 38, .45),
              0 0 0 1px rgba(6, 26, 38, .12);
}

/* O layout da barra vaino pondo este CSS: o container en Elementor só
   precisa a clase, sen tocar Layout. (Antes esperábase direction/gap/
   padding do panel e era fácil esquecer algún — 2026-07-15.) */
.anxo-browser .anxo-browser__bar {
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

/* Os tres puntiños: unha bóla + dúas sombras desprazadas.
   Vai nun widget HTML cun <span> baleiro. */
.anxo-browser__dots {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 107, 107, .55);
  box-shadow: 15px 0 0 rgba(255, 255, 255, .18),
              30px 0 0 rgba(255, 255, 255, .18);
  margin-right: 30px;        /* oco para as dúas sombras, que non ocupan layout */
}

/* A pill da URL. O texto ven do campo `url_cliente` — vale tanto un
   widget Texto con Dynamic Tag coma o Dynamic Field de JetEngine.
   Os estilos van directos no wrapper do widget: co markup optimizado
   de Elementor 4 xa NON existe `.elementor-widget-container`, así que
   nada de colgar estilos del (2026-07-15). */
.anxo-browser__url {
  flex: 1 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, .06);
  border-radius: 9999px;
  padding: .3125rem .75rem;
  text-align: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .6875rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .5);
}
.anxo-browser__url p,
.anxo-browser__url .jet-listing-dynamic-field,
.anxo-browser__url .jet-listing-dynamic-field__content {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* En móbil a barra a tamaño completo queda moi gorda: pásase ás
   proporcións da variante pequena (--sm). */
@media (max-width: 767px) {
  .anxo-browser .anxo-browser__bar {
    padding: .4375rem .625rem;
    gap: .5rem;
  }
  .anxo-browser__dots {
    width: 7px;
    height: 7px;
    margin-right: 22px;
    box-shadow: 11px 0 0 rgba(255, 255, 255, .18),
                22px 0 0 rgba(255, 255, 255, .18);
  }
  .anxo-browser__url {
    font-size: .625rem;
    padding: .1875rem .5rem;
  }
  /* só en móbil: o wrapper de JetEngine mete o corpo a 16px;
     aquí ten que herdar a tipografía pequena da pill */
  .anxo-browser__url p,
  .anxo-browser__url .jet-listing-dynamic-field,
  .anxo-browser__url .jet-listing-dynamic-field__content {
    font: inherit;
    line-height: 1.2;
  }
}

/* 16/9 = proporción de monitor real. As capturas fanse a 1600 px de ancho
   de viewport para que a web se vexa espazosa dentro do marco, coma nunha
   pantalla grande, e non apertada nunha caixa. */
.anxo-browser__viewport { aspect-ratio: 16 / 9; }

/* ---- Marco de móbil ---- */
/* Clase dobrada a mantenta: Elementor ten `.e-con.e-flex { flex: ... }`
   (especificidade 0,2,0) que cun só `.anxo-phone` gañaba ao noso
   flex-shrink e esmagaba o móbil de volta a ~220 px (2026-07-15). */
.anxo-phone.anxo-phone {
  position: relative;
  width: 250px;          /* por defecto; se en Elementor se pon un ancho, manda o de Elementor */
  flex-shrink: 0;        /* que o navegador non o esmague */
  padding: 9px;
  border-radius: 34px;
  background: linear-gradient(160deg, #24404F 0%, #0A2536 55%, #061A26 100%);
  box-shadow: 0 40px 70px -18px rgba(6, 26, 38, .5),
              inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.anxo-phone::after {                       /* o notch */
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 18px;
  z-index: 2;
  background: var(--e-global-color-primary);
  border-radius: 0 0 11px 11px;
}

.anxo-phone__screen {
  border-radius: 26px;
  aspect-ratio: 390 / 844;
}

/* ---- Pista de "pasa o rato" (senón, ninguén descobre o efecto) ----
   Widget Texto ou Heading coa clase — a tipografía vai incluída aquí,
   no widget non hai que tocar nada. En fondo escuro (hero navy do
   single) engadir tamén `anxo-shot-hint--inverse`.
   Ocúltase en táctil, onde non hai hover. */
.anxo-shot-hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}
/* que o heading interior non meta a súa tipografía de Kit */
.anxo-shot-hint .elementor-heading-title {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.anxo-shot-hint::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--e-global-color-accent);
  animation: anxo-shot-blink 1.6s ease-in-out infinite;
}
.anxo-shot-hint--inverse { color: rgba(255, 255, 255, .55); }
.anxo-shot-hint--inverse::before { background: #FF6B6B; }
@keyframes anxo-shot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
@media (hover: none) {
  .anxo-shot-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anxo-browser__viewport img,
  .anxo-phone__screen img { transition: none; }
  .anxo-browser:hover .anxo-browser__viewport img,
  .anxo-phone:hover   .anxo-phone__screen img { transform: none; }
  .anxo-shot-hint::before { animation: none; }
}

/* ---- Marco pequeno, para reixas de varias webs do mesmo cliente ----
   Caso de uso: clientes con máis dunha web (ex. Casa Grande de Xanceda,
   6 campañas de RSC). A web principal vai na peza grande de arriba
   (campos `captura_escritorio` + `captura_mobil`); as demais, aquí.

   EN ELEMENTOR — Listing item de JetEngine (orixe: repeater `outras_webs`):

   Container  `anxo-browser anxo-browser--sm`   ← as DÚAS clases
   ├── Container  `anxo-browser__bar`
   │   ├── Widget HTML   → <span class="anxo-browser__dots"></span>
   │   └── Widget Texto  `anxo-browser__url`  → Dynamic: subcampo `url`
   └── Container  `anxo-browser__viewport`
       └── Widget Imaxe  → Dynamic: subcampo `captura` (tamaño Full)

   O nome e a descrición van debaixo, en widgets Texto normais (a
   tipografía sae do Kit; non precisan clase).

   O bloque enteiro leva Dynamic Visibility → visible só se o repeater
   ten filas. Un caso cunha soa web nin se decata de que existe.

   Cambia o TAMAÑO da barra (máis fina) e a SOMBRA (a da peza grande,
   90 px de blur, é para un elemento a ancho completo; nunha reixa de
   tres marcos xuntos amontoa e escurece o oco entre columnas — aquí vai
   máis curta e lixeira). A proporción do viewport é a mesma que na peza
   grande: 16/9. Nos secundarios NON fai falla captura
   de móbil (nun marco así non se apreciaría) NIN scroll: a captura
   córtase xa a 16/9 exacto, así que non sobresae e o hover non move nada.
   Non hai que desactivar nada por código — simplemente non hai a onde ir.
   -------------------------------------------------------------- */
.anxo-browser--sm {
  box-shadow: 0 18px 40px -14px rgba(6, 26, 38, .25),
              0 0 0 1px rgba(6, 26, 38, .12);
}

.anxo-browser--sm .anxo-browser__bar,
.anxo-browser--card .anxo-browser__bar {
  padding: .4375rem .625rem;
  gap: .5rem;
}
.anxo-browser--sm .anxo-browser__dots,
.anxo-browser--card .anxo-browser__dots {
  width: 7px;
  height: 7px;
  margin-right: 22px;
  box-shadow: 11px 0 0 rgba(255, 255, 255, .18),
              22px 0 0 rgba(255, 255, 255, .18);
}
.anxo-browser--sm .anxo-browser__url,
.anxo-browser--card .anxo-browser__url {
  font-size: .625rem;
  padding: .25rem .5rem;
}

/* ---- Marco da TARXETA (imaxe destacada nas reixas de portfolio) ----
   Caso de uso: a card do arquivo /portfolio e calquera Listing Grid de
   proxectos. A imaxe é a `-tarxeta.webp`: o hero recortado a 4:3, NON a
   páxina enteira.

   EN ELEMENTOR — Listing item de JetEngine (CPT `portfolio`):

   Container  `anxo-browser anxo-browser--card`   ← as DÚAS clases
   ├── Container  `anxo-browser__bar`
   │   └── Widget HTML   → <span class="anxo-browser__dots"></span>
   └── Container  `anxo-browser__viewport`
       └── Widget Imaxe  → Dynamic: Imaxe destacada (tamaño Large abonda:
                           a card nunca pasa de ~400 px de ancho)

   O título, o ano e o extracto van debaixo, fóra do marco.

   Tres diferenzas coa peza grande:

   1. **SEN a pill da URL.** Na card a barra leva só os tres puntiños.
      (Na peza grande do single si vai: alí o marco é grande e a URL
      remata de vender que iso é unha web de verdade. Nunha card de
      ~380 px sobra e ensucia.)

   2. O viewport é **4/3**, non 16/9 — que é xusto a proporción da tarxeta.
      Así a imaxe encaixa exacta: non sobresae, non hai a onde desprazarse
      e o hover de percorrido non move nada. Non hai que desactivalo por
      código; simplemente non hai oco. (Mesmo truco que en `--sm`.)

   3. **SEN SOMBRA.** A da peza grande (90 px de blur) está pensada para un
      elemento a ancho completo; nunha reixa ensucia e as cards parecen
      flotar. Probouse con sombra curta e sen ela: non se distinguen, así
      que fóra.

      Queda só un **fío de 1 px**, que non é decoración: sen el, as capturas
      de fondo claro (Mel Casa Príncipe, por caso) fúndense co bege do
      fondo e a card perde o bordo de abaixo. Se algún día o fondo pasa a
      escuro, este fío pódese quitar sen máis.
   -------------------------------------------------------------- */
.anxo-browser--card {
  box-shadow: 0 0 0 1px rgba(6, 26, 38, .12);
}

.anxo-browser--card .anxo-browser__viewport { aspect-ratio: 4 / 3; }