/* ══════════════════════════════════════════════════════════════════════════
   MRG · Tema Neumorfismo
   ──────────────────────────────────────────────────────────────────────────
   Capa de superficie. Se enlaza DESPUÉS del <style> de cada página, así que
   solo redefine relieve y profundidad — la estructura, el texto y el color de
   marca de cada página quedan intactos.

   Regla física única en toda la interfaz:
     · en reposo  → relieve hacia afuera (convexo)
     · al pulsar  → hundido (cóncavo)
     · campos     → siempre hundidos (invitan a escribir dentro)

   Los colores de marca NO cambian. Lo único que sube es la superficie de las
   tarjetas (#141518 → #17181c): sobre un negro casi puro la sombra clara no
   tiene dónde apoyarse y el relieve no se percibe.

   Para revertir: quitar el <link> de la página. Nada más depende de este archivo.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Superficies derivadas del carbón MRG */
  --nm-surface:#17181c;
  --nm-surface-2:#1b1c21;
  --nm-sunken:#121317;

  /* Sombra doble — el relieve */
  --nm-dark:rgba(0,0,0,.72);
  --nm-light:rgba(255,255,255,.055);
  --nm-out:6px 6px 14px var(--nm-dark),-6px -6px 14px var(--nm-light);
  --nm-out-sm:3px 3px 8px var(--nm-dark),-3px -3px 8px var(--nm-light);
  --nm-out-lg:10px 10px 26px var(--nm-dark),-8px -8px 22px var(--nm-light);
  --nm-in:inset 4px 4px 9px var(--nm-dark),inset -4px -4px 9px var(--nm-light);
  --nm-in-sm:inset 2px 2px 5px var(--nm-dark),inset -2px -2px 5px var(--nm-light);

  --nm-ease:cubic-bezier(.16,1,.3,1);

  /* Se reasignan las variables que ya usan las páginas: así cualquier regla
     existente que pinte con var(--card) hereda la superficie nueva sin tocarla. */
  --card:var(--nm-surface);
  --card2:var(--nm-surface-2);
  --bg-card:var(--nm-surface);
  --bg-card2:var(--nm-surface-2);

  /* Al aclarar la superficie, el gris más tenue (#4b5563 / #6b7480) se quedaba en
     2.4:1 — por debajo del mínimo legible de 4.5:1 de la WCAG. Se sube a un gris
     que da 4.8:1 sobre #17181c: sigue siendo discreto, pero ya se lee. */
  --text3:#7a8494;
}

/* ── Tarjetas y contenedores ──────────────────────────────────────────────
   El borde de 1px se retira: en neumorfismo el contorno lo define la sombra,
   y dejar ambos ensucia el efecto. */
.pkg,.firm,.option-card,.review-card,.proof-card,.discord-inner,.promo-inner,
.affiliate-promo,.rating-summary,.review-form-wrap,.spec-row,
.card,.stat-card,.panel,.box,.tile,.widget,.login-card{
  background:var(--nm-surface)!important;
  border:0!important;
  border-radius:18px;
  box-shadow:var(--nm-out);
}

/* Tarjeta destacada: conserva su acento naranja, ahora como luz tenue */
.pkg.featured{
  box-shadow:var(--nm-out),0 0 0 1px rgba(249,115,22,.18)!important;
}

/* Elevación al pasar el cursor: sube y la sombra se abre */
.option-card,.firm,.pkg,.review-card{
  transition:transform .2s var(--nm-ease),box-shadow .2s var(--nm-ease);
}
.option-card:hover,.firm:hover,.review-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--nm-out-lg)!important;
}
/* Al pulsar se hunde — el gesto físico que hace que se sienta app */
.option-card:active,.firm:active{
  transform:translateY(0);
  box-shadow:var(--nm-in)!important;
}

/* ── Botones ──────────────────────────────────────────────────────────────
   min-height 44px: mínimo táctil de Apple/Material. */
.btn,.btn-ghost,.option-btn,.firm-link,.social-btn,button.btn{
  border:0!important;
  border-radius:14px;
  min-height:44px;
  box-shadow:var(--nm-out-sm);
  transition:transform .18s var(--nm-ease),box-shadow .18s var(--nm-ease);
}
.btn:hover,.btn-ghost:hover,.option-btn:hover,.firm-link:hover,.social-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--nm-out)!important;
}
.btn:active,.btn-ghost:active,.option-btn:active,.firm-link:active,.social-btn:active{
  transform:translateY(0);
  box-shadow:var(--nm-in)!important;
}
.btn-ghost,.social-btn{
  background:var(--nm-surface)!important;
  box-shadow:var(--nm-in-sm);
}
.btn-ghost:hover{background:var(--nm-surface-2)!important}

/* Acción principal: el único punto de luz de la pantalla. Naranja de marca
   sin cambios; el resplandor se mantiene tenue para que señale, no decore. */
.btn-primary{
  background:linear-gradient(145deg,#fb923c,#ea580c)!important;
  color:#1a0d02!important;
  box-shadow:var(--nm-out-sm),0 6px 16px rgba(249,115,22,.18)!important;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:var(--nm-out),0 8px 20px rgba(249,115,22,.24)!important;
}
.btn-primary:active{transform:translateY(0);box-shadow:var(--nm-in)!important}
.btn:disabled,.btn-primary:disabled,button:disabled{
  opacity:.45;transform:none!important;
  box-shadow:var(--nm-in-sm)!important;cursor:not-allowed;
}

/* ── Campos de formulario: siempre hundidos ───────────────────────────────── */
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=number],input[type=search],input:not([type]),select,textarea{
  background:var(--nm-sunken)!important;
  border:0!important;
  border-radius:14px;
  box-shadow:var(--nm-in);
  min-height:48px;
  outline:none;
  transition:box-shadow .18s var(--nm-ease);
}
textarea{min-height:96px;padding-top:14px}
input:focus,select:focus,textarea:focus{
  box-shadow:var(--nm-in),0 0 0 2px rgba(249,115,22,.5)!important;
}

/* ── Insignias y píldoras ─────────────────────────────────────────────────── */
.brand-tag,.promo-badge,.pkg-ribbon,.firm-badge,.proof-badge,.affiliate-promo-badge,
.badge,.pill,.tag,.chip{
  border:0!important;
  border-radius:999px;
  box-shadow:var(--nm-out-sm);
}

/* Iconos: hundidos, como incrustados en la superficie */
.option-icon,.firm-cover,.discord-icon,.affiliate-promo-icon,.rc-avatar,.pkg-icon{
  border:0!important;
  border-radius:16px;
  background:var(--nm-sunken);
  box-shadow:var(--nm-in-sm);
}

/* ── Navegación y selector de idioma ──────────────────────────────────────── */
.lang-switch{
  background:var(--nm-sunken)!important;
  border:0!important;
  border-radius:999px;
  box-shadow:var(--nm-in-sm);
  padding:4px;
}
.lang-switch a,.lang-switch button{
  border-radius:999px;
  min-height:36px;
  position:relative;
  transition:box-shadow .2s var(--nm-ease),color .2s;
}
/* El selector de idioma se ve compacto (36px) pero responde en 44px:
   el pseudo-elemento amplía el área táctil sin engordar el diseño. */
.lang-switch a::after,.lang-switch button::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%);
}
.lang-switch a.active,.lang-switch button.active,
.lang-switch a[aria-current],.lang-switch button[aria-selected=true]{
  background:var(--nm-surface);
  box-shadow:var(--nm-out-sm);
}
.lang-sep{opacity:0}

/* ── Tablas ───────────────────────────────────────────────────────────────── */
table{border-collapse:separate;border-spacing:0}
.specs,.spec-row{border:0!important}
td,th{border-color:rgba(255,255,255,.05)!important}
/* Cifras tabulares: evita que los números "bailen" al actualizarse en vivo */
td,.pkg-price,.proof-amount,.trust .n,.rs-score,.stat .v,.amt{
  font-variant-numeric:tabular-nums;
}

/* ── Accesibilidad ────────────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--brand,#f97316);
  outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .option-card:hover,.firm:hover,.review-card:hover,.btn:hover{transform:none!important}
}