/* ═══════════════════════════════════════════════════════════════
   nayra-design.css — capa de dirección de arte de Nayra.
   La cargan portal.html (web) y app.html (panel) para que los dos
   se vean el mismo producto.

   Regla de oro: esta capa NO cambia estructura ni comportamiento.
   Solo pinta. Si se borra este archivo, todo sigue funcionando —
   se ve peor, pero nada se rompe. Por eso va SIEMPRE de última,
   después de los estilos propios de cada página.

   Qué hace que no se vea genérica:
   1. Grano sobre el fondo (los fondos planos oscuros se ven baratos)
   2. Luz ambiental de color en vez de degradado uniforme
   3. Filo de luz interior en las tarjetas (el detalle "caro")
   4. Escala tipográfica editorial: titulares grandes y muy apretados
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Grano ────────────────────────────────────────────────────
   SVG incrustado: no pesa nada y no pide otra descarga al servidor.
   pointer-events:none es obligatorio o se traga todos los clics. */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 2. Luz ambiental ───────────────────────────────────────────
   Dos focos suaves anclados arriba, en vez del degradado plano.
   Da profundidad sin tapar nada. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 78% -8%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(48rem 34rem at 12% 4%, rgba(34,211,238,.09), transparent 62%);
}

/* ── 3. Tarjetas: filo de luz interior ──────────────────────────
   Una línea clarísima arriba simula que la luz les pega desde
   arriba. Es el detalle que separa "hecho con plantilla" de
   "diseñado". Va con :where() para no pelear con otros estilos. */
:where(.plan-card,.ag-card,.glass,.chat-mock,.card){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 1px 2px rgba(0,0,0,.28);
}

/* ── 4. Tipografía editorial ────────────────────────────────────
   Titulares más grandes y mucho más apretados. El interletrado
   negativo es lo que hace ver "premium" un titular grande. */
h1,.sec-h2,.ag-h2{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  letter-spacing:-.045em;line-height:1.02;font-optical-sizing:auto;
  text-wrap:balance;
}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* Micro-etiquetas: finas, espaciadas, en versalita. Contraste
   deliberado con los titulares apretados. */
:where(.sec-tag,.ag-eyebrow){
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}

/* ── 5. Foco visible para teclado ───────────────────────────────
   Accesibilidad real: quien navega con Tab tiene que ver dónde está. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--blue,#a855f7);outline-offset:3px;border-radius:6px;
}

/* ── 6. Respeto por quien pidió menos movimiento ────────────────
   Requisito de accesibilidad, no un extra. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* En pantallas pequeñas el grano se nota más y ensucia: bajarlo. */
@media (max-width:640px){ body::after{opacity:.022} }