/* ══════════════════════════════════════════════════════════════════════════════
   MRG · Estilo común
   Sustituye a mrg-neumorfismo.css.

   POR QUÉ SE RETIRÓ EL NEUMORFISMO
   Aquella hoja ponía a cada tarjeta una sombra doble: 6px negros abajo-derecha y
   6px blancos arriba-izquierda. Eso son DOS luces opuestas a la vez, así que
   ningún objeto podía tener volumen coherente — es la razón de que las páginas se
   vieran planas, y ese estilo pasó de moda hacia 2021.

   Aquí lo sustituye un modelo de luz único: un foco naranja arriba, filo claro
   solo en el canto superior y sombra teñida hacia abajo.

   🔴 AVISO IMPORTANTE
   La hoja del neumorfismo también CORREGÍA --text3, subiéndolo para que se leyera.
   Casi todas las páginas lo definen como #4b5563, que sin esa corrección se queda
   en 2,6:1 sobre el fondo — muy por debajo del 4,5:1 que exige la WCAG — y las
   etiquetas se vuelven casi ilegibles sin dar ningún aviso. Por eso esta hoja lo
   fija más abajo. NO quitar esa línea.

   Se enlaza DESPUÉS del <style> de cada página, así que gana por cascada sin
   necesidad de !important salvo donde se indique.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Modelo de luz. Las sombras van teñidas de la marca, no en negro puro: una
     sombra negra sobre un fondo casi negro no se ve, y una ámbar hace que el
     objeto parezca estar bajo la luz naranja de la página. */
  --filo:    inset 0 1px 0 rgba(255,255,255,.06);
  --filo-on: inset 0 1px 0 rgba(255,190,140,.20);
  --elev-1:  0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(90,35,0,.14);
  --elev-2:  0 2px 6px rgba(0,0,0,.4),  0 8px 22px rgba(110,42,0,.16);
  --elev-3:  0 6px 18px rgba(0,0,0,.5), 0 24px 56px rgba(140,52,0,.20);

  /* El naranja con rango: brasa para rellenos grandes, marca para acentos,
     ámbar claro para texto sobre oscuro. */
  --brasa: #7c2d12;
  --ambar: #fdba74;

  /* Monoespaciada del sistema, sin descargar nada. Solo para DATOS. */
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', monospace;

  --sale: cubic-bezier(.22, 1, .36, 1);

  /* 🔴 NO QUITAR: ver el aviso de arriba. Da 5,4:1, frente a los 2,6:1 del
     #4b5563 que traen casi todas las páginas. */
  --text3: #838d9b !important;
}

/* ── Grano ──────────────────────────────────────────────────────────────────
   Ruido finísimo sobre toda la página. Es el cambio con mejor relación
   esfuerzo/resultado sobre fondos oscuros: rompe el bandeado de los degradados
   (que sobre 8 bits produce escalones visibles) y da tacto, porque una superficie
   perfectamente lisa se lee como "sin terminar".

   Va en html::after y no en body::after A PROPÓSITO: inicio.html ya usa
   body::after para otra cosa y se lo estaríamos pisando. html::after está libre
   en las siete páginas — comprobado antes de escribir esto.

   El data URI es porque la CSP del servidor permite `img-src 'self' data:` pero
   no orígenes externos. Se genera con feTurbulence: ni un archivo que subir. */
html::after {
  content: ''; position: fixed; inset: 0; z-index: 9;
  pointer-events: none; opacity: .03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ── Fondo de velas ─────────────────────────────────────────────────────────
   Cualquier pagina que quiera fondo animado pone un <canvas class="mrg-velas">.
   Lo anima mrg-estilo.js.

   🔴 Las dos condiciones que hacen que esto no estorbe, y que NO se deben tocar:
   va con z-index 0 (por debajo de todo) y con opacidad baja. El contenido que
   haya que leer vive sobre tarjetas opacas, asi que el movimiento solo asoma en
   los huecos entre ellas. Un fondo animado por debajo de un texto es exactamente
   lo que se debe evitar.

   Fuera en movil: alli no hay huecos que llenar y solo seria gasto de bateria. */
.mrg-velas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 18%, transparent 84%);
          mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, #000 18%, transparent 84%);
}
@media (max-width: 720px) { .mrg-velas { display: none; } }

/* 🔴 En las paginas de LEER Y ESCRIBIR el lienzo va mas apagado que en el resto.
   La guia (parrafos largos, tablas de pasos) y los formularios de registro
   (etiquetas, campos, avisos) existen para leer; en las demas el fondo compite
   con tarjetas opacas y da igual, aqui compite con las letras.

   Bajarlo es lo que permite que el panel de lectura sea muy transparente (alfa
   .50) sin perder legibilidad: mas superficie abierta, pero la mitad de luz por
   detras. Medido en la guia: peor contraste 4,69:1 con el panel al 50%, frente a
   2,12:1 que daba ese mismo panel con el lienzo al brillo normal. */
body:has(.guide-section) .mrg-velas,
body:has(.form-hero)     .mrg-velas { opacity: .26; }

/* ── Superficie de lectura de la guia ───────────────────────────────────────
   🔴 .guide-section NO tenia fondo (alfa 0), asi que los parrafos de la guia
   quedaban directamente sobre las velas y costaba leerlos. Las tarjetas de dentro
   (.card, .faq-item) si eran opacas; el problema era el contenedor del texto.

   🔴 EL PANEL ES MUY TRANSPARENTE (alfa .50) Y AUN ASI SE LEE. No es magia: lo
   que emborrona el texto no es cuanta superficie deja pasar, sino CUANTA LUZ llega
   por detras. Asi que se abre el panel Y se apagan las velas bajo la guia — ver
   .guia-fondo mas abajo.

   Se simularon los cinco colores de texto de la guia con las velas al brillo que
   tenian antes:
       panel al 84% (se colaba  8%)  -> peor contraste 4,32  (1 de 5 ya fallaba)
       panel al 50% (se colaba 25%)  -> peor contraste 2,12  (3 de 5 ilegibles)
   Subir la transparencia a secas rompia la pagina. Bajando el brillo del lienzo se
   consigue el panel abierto Y contraste de sobra.

   El desenfoque hace la otra mitad: difumina las velas que quedan detras del texto
   sin apagarlas. Si el navegador no lo soporta, el fondo al 56% ya sostiene. */
.guide-section,
.form-hero {
  background: rgba(18, 19, 23, .56);
  border-radius: 14px;
  padding: clamp(16px, 2.4vw, 26px);
}
@supports (backdrop-filter: blur(1px)) {
  /* El desenfoque hace la mitad del trabajo: difumina las velas que quedan detras
     del texto, asi que se percibe el movimiento sin que compita con las letras. */
  .guide-section,
  .form-hero { background: rgba(18, 19, 23, .50); backdrop-filter: blur(14px) saturate(1.2); }
}

/* ── Cambio de seccion ──────────────────────────────────────────────────────
   Para paginas con pestanas: el contenido de la que se abre entra escalonado en
   vez de aparecer de golpe, asi se percibe de donde viene.
   Escalon corto: aqui el visitante viene a leer, no a mirar una animacion. */
.anim .mrg-entrando > * { animation: mrg-entra .42s var(--sale) backwards; }
.anim .mrg-entrando > *:nth-child(1) { animation-delay: .02s; }
.anim .mrg-entrando > *:nth-child(2) { animation-delay: .07s; }
.anim .mrg-entrando > *:nth-child(3) { animation-delay: .12s; }
.anim .mrg-entrando > *:nth-child(4) { animation-delay: .17s; }
.anim .mrg-entrando > *:nth-child(n+5) { animation-delay: .21s; }

/* ── Superficies ────────────────────────────────────────────────────────────
   El degradado vertical simula que la cara de arriba recibe más luz que la de
   abajo; el filo interior marca el canto iluminado. Juntos convierten un
   rectángulo plano en un objeto. */
.card, .stat-card, .panel, .box, .tile, .widget, .login-card,
.section, .lic-card, .pkg, .firm, .option-card, .review-card, .proof-card,
.promo-inner, .affiliate-promo, .rating-summary, .review-form-wrap,
.guia-card, .prod-card, .faq-item, .paso-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 45%),
    var(--card, #141518);
  box-shadow: var(--elev-1), var(--filo);
}

/* Al levantar una tarjeta se acerca a la luz: sube el filo y crece la sombra.
   Antes solo cambiaba el color del borde, que es un cambio que no se siente. */
.card:hover, .stat-card:hover, .option-card:hover, .firm:hover,
.review-card:hover, .prod-card:hover, .guia-card:hover {
  box-shadow: var(--elev-2), var(--filo-on);
}

/* Botón principal: un resplandor sutil al acercarse. Es el que quieres que pulsen. */
.btn-primary { transition: transform .14s var(--sale), box-shadow .28s var(--sale); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(249,115,22,.5); }
.btn-primary:active { transform: translateY(0); }

/* ── Datos en monoespaciada ─────────────────────────────────────────────────
   SOLO cifras, claves e importes. Ahí una tipografía de ancho fijo comunica
   precisión de verdad; en el texto corrido sería disfraz. Tabulares para que las
   columnas de las tablas queden alineadas. */
.mono, .stat-value, .lic-key, .amt, .comm-amount, .pkg-price,
.proof-amount, .rs-score, .stat .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ── Icono ──────────────────────────────────────────────────────────────────
   Mide 1em, así que hereda el tamaño de donde se ponga. `currentColor` hace que
   tome el color del texto que lo rodea: un elemento de menú activo lo pinta de
   su color solo, sin variantes. Un emoji nunca podría hacer eso, y además se
   dibuja con la fuente del sistema (distinto en Windows, Mac y Android). */
.ico {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.14em;
}
/* A 12-14px un trazo de 1.7 sobre una rejilla de 24 se queda en menos de un píxel
   y el dibujo se empasta. Se agranda y se engorda. */
.btn .ico, .badge .ico, .pill .ico, .tag .ico, .chip .ico,
h2 .ico, h3 .ico { width: 1.15em; height: 1.15em; stroke-width: 1.95; }

/* ── Animación de entrada ───────────────────────────────────────────────────
   🔴 REGLA QUE NO SE ROMPE: el contenido es VISIBLE por defecto y la animación
   solo lo adorna. Nada arranca en opacidad 0 salvo dentro de un keyframe con
   relleno `backwards`, y todo cuelga de la clase .anim que pone mrg-estilo.js.

   Si el JavaScript no corre, o el navegador tiene el reloj de fotogramas parado
   (pestaña de fondo, buscadores, servicios de vista previa), la página se ve
   entera y quieta. Eso es lo correcto. Costó tres intentos aprenderlo en la
   portada: con `opacity:0` suelto, media página se quedaba EN BLANCO sin dar
   ningún error en consola. */
@keyframes mrg-entra {
  from { opacity: 0; transform: translateY(14px); filter: blur(5px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.anim .mrg-anima > * { animation: mrg-entra .5s var(--sale) backwards; }
.anim .mrg-anima > *:nth-child(1) { animation-delay: .04s; }
.anim .mrg-anima > *:nth-child(2) { animation-delay: .10s; }
.anim .mrg-anima > *:nth-child(3) { animation-delay: .16s; }
.anim .mrg-anima > *:nth-child(4) { animation-delay: .22s; }
.anim .mrg-anima > *:nth-child(5) { animation-delay: .28s; }
/* Tope en el sexto: pasado ese punto la espera se nota más que el efecto, y en
   una lista larga las últimas tarjetas tardarían segundos en aparecer. */
.anim .mrg-anima > *:nth-child(n+6) { animation-delay: .33s; }

/* ── Respeto por quien pide menos movimiento ────────────────────────────────
   No es opcional: hay gente a la que el movimiento le provoca mareo. Se apaga
   todo y el contenido queda quieto y completo. */
@media (prefers-reduced-motion: reduce) {
  .anim .mrg-anima > *, .anim .mrg-entrando > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .mrg-velas { display: none; }
  .btn-primary:hover, .card:hover, .stat-card:hover, .option-card:hover,
  .firm:hover, .review-card:hover { transform: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}