/* Amber — capa de acento.
 *
 * Tailwind está precompilado en este sitio: no existe ninguna utilidad ámbar
 * y no se puede añadir una clase nueva escribiéndola en el bundle. Así que la
 * página de Amber se escribe con las mismas utilidades blue-* que usan Nexus
 * y Brandly —garantizadas en index-mJdWpmod.css— y aquí se reasignan al
 * ámbar de la marca, únicamente dentro de [data-page="amber"]. Mismo patrón
 * que jumaro-brandly-v1.css.
 *
 * Consecuencias buscadas:
 *   · El resto del sitio no se toca: el selector no lo alcanza.
 *   · El footer queda fuera del wrapper, así que conserva el azul del sitio.
 *   · Si esta hoja no carga, la página cae a la paleta azul de Nexus y sigue
 *     siendo coherente. Ningún estado depende de este archivo.
 *
 * Colores elegidos por contraste real, no por gusto:
 *   --am-ink       #92400E sobre blanco  → 7.09:1
 *   --am-solid     texto blanco sobre #B45309 → 5.02:1
 *   --am-solid-hover  texto blanco sobre #92400E → 7.09:1
 *   --am-on-dark   #FBBF24 sobre negro → 12.58:1
 *   --am-on-dark-soft   #FCD34D sobre negro → 14.56:1
 *   --am-on-dark-bright #FDE68A sobre negro → 16.86:1
 * --am-brand (#F59E0B) es el ámbar puro del logotipo; se usa en bordes y
 * fondos suaves, no como color de texto, así que no necesita pasar contraste.
 */
[data-page="amber"] {
  --am-ink: #92400e;
  --am-brand: #f59e0b;
  --am-solid: #b45309;
  --am-solid-hover: #92400e;
  --am-on-dark: #fbbf24;
  --am-on-dark-soft: #fcd34d;
  --am-on-dark-bright: #fde68a;
}

/* Texto sobre fondo claro */
[data-page="amber"] .text-blue-700 { color: var(--am-ink); }
[data-page="amber"] .hover\:text-blue-700:hover { color: var(--am-ink); }

/* Texto sobre fondo oscuro */
[data-page="amber"] .text-blue-400 { color: var(--am-on-dark); }
[data-page="amber"] .text-blue-300 { color: var(--am-on-dark-soft); }
[data-page="amber"] .hover\:text-blue-300:hover { color: var(--am-on-dark-soft); }
[data-page="amber"] .hover\:text-blue-200:hover { color: var(--am-on-dark-bright); }

/* Superficies y bordes */
[data-page="amber"] .bg-blue-600 { background-color: var(--am-solid); }
[data-page="amber"] .hover\:bg-blue-700:hover { background-color: var(--am-solid-hover); }
[data-page="amber"] .bg-blue-500 { background-color: var(--am-brand); }
[data-page="amber"] .bg-blue-500\/10 { background-color: rgb(245 158 11 / 0.1); }
[data-page="amber"] .border-blue-500 { border-color: var(--am-brand); }
[data-page="amber"] .border-blue-500\/50 { border-color: rgb(245 158 11 / 0.5); }

/* El resplandor del hero es azul en el bundle base; aquí acompaña a la marca.
   Solo el matiz: la geometría, el desenfoque y la animación siguen siendo las
   del sitio (.hero-aurora), para no introducir un movimiento distinto. */
[data-page="amber"] .hero-aurora-a { background: radial-gradient(circle, #f59e0b75, #f59e0b00 68%); }
[data-page="amber"] .hero-aurora-c { background: radial-gradient(circle, #fbbf243d, #fbbf2400 70%); }