/* ═══════════════════════════════════════════════════════════════════════════
   ORO · el sistema metálico de las webs de Carito Tapias
   ───────────────────────────────────────────────────────────────────────────
   Tomado del sistema visual de ZOKUNO. Este archivo es la ÚNICA verdad del
   dorado: se edita aquí y `npm run oro` lo copia a los dos sitios.

   EL ORO ES UN MATERIAL, NO UN COLOR.

   Lo que el ojo reconoce como metal no es el amarillo: es la rampa de luz
   —sombra, subida, un reflejo especular casi blanco y ESTRECHO, caída, y el
   rebote del canto de abajo—. Un degradado de dos paradas entre dos amarillos
   parecidos no es oro: es un amarillo con gradiente, y se ve pintado.

   Antes de esto, las cuatro páginas usaban cuatro dorados planos distintos
   (#EDBE6A, #C49A3E, #D9B46A, #E8C483). Ninguno era el mismo y ninguno era oro.

   LA RAMPA (de la sombra al reflejo):

     --oro-6  #5C3F08   hondo      · el fondo del relieve
     --oro-5  #8E6616   sombra     · la cara que no recibe luz
     --oro-4  #C29327   medio      · el cuerpo del metal
     --oro-3  #E0B84A   luz        · el oro que uno "ve"
     --oro-2  #F2D98B   alto       · la subida al reflejo
     --oro-1  #FFF4CE   especular  · casi blanco cálido, ESTRECHO

   El reflejo tiene que ser ESTRECHO. Ancho se ve como un degradado amarillo
   claro; estrecho se ve como una superficie curva bajo un foco.

   El hue NO se mueve hacia el amarillo taxi, y tampoco baja de saturación:
   un oro poco saturado tira a oliva y ese tinte sucio es lo que hace que un
   dorado "se vea raro".
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --oro-1: #FFF4CE;
  --oro-2: #F2D98B;
  --oro-3: #E0B84A;
  --oro-4: #C29327;
  --oro-5: #8E6616;
  --oro-6: #5C3F08;

  /* Tinta sobre metal. Va OSCURA, nunca blanca: el reflejo cae en la mitad de
     la pieza, que es justo donde va la palabra, y el texto blanco desaparece
     ahí. */
  --oro-tinta: #241A04;

  /* El RELLENO metálico. Siete paradas, y cada una hace algo:
       0%   sombra     · de donde arranca la curvatura
       18%  sube al cuerpo
       34%  ESPECULAR  · el punto de luz, alto y estrecho
       46%  baja al cuerpo
       62%  medio
       80%  sombra     · la cara opuesta
       100% rebote     · la luz que sube del canto de abajo
     El rebote es el detalle que casi nadie pone y el que más se nota: el metal
     real recoge luz de la superficie sobre la que está apoyado. Sin él, la
     pieza se ve recortada y pegada a la pantalla. */
  --oro-metal: linear-gradient(145deg,
    var(--oro-5)  0%,
    var(--oro-4) 18%,
    var(--oro-1) 34%,
    var(--oro-3) 46%,
    var(--oro-4) 62%,
    var(--oro-5) 80%,
    var(--oro-2) 100%);

  /* En horizontal, para barras y botones anchos. */
  --oro-metal-h: linear-gradient(100deg,
    var(--oro-5)  0%,
    var(--oro-4) 14%,
    var(--oro-1) 30%,
    var(--oro-3) 44%,
    var(--oro-4) 64%,
    var(--oro-5) 86%,
    var(--oro-2) 100%);

  /* Para piezas CHICAS (una insignia, un punto, un tile de 32 px). En 32
     píxeles siete paradas se vuelven barro: cuatro bastan y el reflejo se
     mantiene visible. */
  --oro-metal-min: linear-gradient(145deg,
    var(--oro-2)  0%,
    var(--oro-1) 22%,
    var(--oro-3) 55%,
    var(--oro-5) 100%);

  /* Texto dorado. Son DOS valores porque el contraste manda:
     sobre negro, --oro-3 da 10,6:1 y se lee perfecto;
     sobre papel da 1,9:1 y es ilegible, así que ahí baja a --oro-texto-claro
     (7,0:1 sobre blanco). Mismo hue, distinta luz — no es el color invertido. */
  --oro-texto: var(--oro-3);
  --oro-texto-claro: #8A6B16;

  /* Velos para bordes, fondos y realces. Siempre del mismo hue del metal. */
  --oro-velo-04: rgba(224, 184, 74, 0.04);
  --oro-velo-08: rgba(224, 184, 74, 0.08);
  --oro-velo-14: rgba(224, 184, 74, 0.14);
  --oro-velo-24: rgba(224, 184, 74, 0.24);
  --oro-velo-40: rgba(224, 184, 74, 0.40);
}

/* ── El botón de metal ──────────────────────────────────────────────────────
   El hover NO cambia de color: SUBE EL BRILLO. Un metal que cambia de tono se
   ve pintado; un metal al que le sube la luz se ve inclinado hacia el foco.
   Las sombras interiores son las que dan el canto: arriba la luz que entra,
   abajo la sombra del borde. */
.oro-btn {
  background: var(--oro-metal-h);
  color: var(--oro-tinta);
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 0;
  transition: filter 180ms ease, transform 120ms ease, box-shadow 180ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 225, 0.6),
    inset 0 -2px 4px rgba(70, 46, 4, 0.4),
    0 6px 16px -6px rgba(120, 86, 14, 0.5);
}
.oro-btn:hover  { filter: brightness(1.07) saturate(1.05); }
.oro-btn:active { transform: translateY(1px); filter: brightness(0.97); }

/* Superficies de metal sueltas. */
.oro-metal   { background: var(--oro-metal); }
.oro-metal-h { background: var(--oro-metal-h); }
.oro-metal-min { background: var(--oro-metal-min); }

/* Texto con el metal dentro de la letra. Solo para titulares grandes: en
   cuerpo de texto el reflejo se come la legibilidad. */
.oro-texto-metal {
  background: var(--oro-metal-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Filo: la línea de luz que separa dos superficies. */
.oro-filo {
  background: linear-gradient(90deg, transparent, var(--oro-4), var(--oro-1), var(--oro-4), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .oro-btn { transition: none; }
  .oro-btn:active { transform: none; }
}