:root{
  /* el golpe */
  --hj-baja:55ms;
  --hj-seco:cubic-bezier(.35,0,.85,1);

  /* el retorno amortiguado, con el pelo de rebote del push-to-open */
  --hj-sube:520ms;
  --hj-muelle:cubic-bezier(.15,1.34,.42,1);

  /* la profundidad del asiento, por tamaño de pieza */
  --hj-hondo:1.5px;    /* botones de llamada */
  --hj-medio:1px;      /* controles cuadrados del encabezado */
  --hj-leve:.6px;      /* filtros y piezas chicas */
}


/* ═══ 1. BOTONES DE LLAMADA ════════════════════════════════
   .boton lleva encima cuatro hojas (forma, orfebrería, cristal
   y contorno) y cada una escribió su propia transición. Se
   rehace entera: los colores conservan sus tiempos originales y
   solo el transform pasa a la curva de muelle. */
/* Va con [data-tema] delante A PROPOSITO: 04-cristal.css escribe la
   transicion en `[data-tema] .boton`, que pesa mas que `.boton` a
   secas. Sin ese prefijo esta hoja se cargaba entera sin efecto y el
   muelle no llegaba a aplicarse nunca. */
[data-tema] .boton{
  transition:
    background-color .18s var(--curva),
    background-image .18s var(--curva),
    border-color .18s var(--curva),
    color .18s var(--curva),
    box-shadow .28s var(--curva),
    outline-offset var(--hj-sube) var(--hj-muelle),
    transform var(--hj-sube) var(--hj-muelle); }

/* el asiento. Empata en peso con `[data-tema] .boton:active` de
   04-cristal.css y gana por ir en una hoja posterior. */
.boton:active:not([disabled]){
  transform:translateY(var(--hj-hondo)) scale(.984);
  transition-property:transform,background-color,border-color,color;
  transition-duration:var(--hj-baja),.1s,.1s,.1s;
  transition-timing-function:var(--hj-seco); }

/* un botón deshabilitado no es una pieza: no se hunde */
.boton[disabled]:active{ transform:none; }


/* ═══ 2. CONTROLES CUADRADOS DEL ENCABEZADO ════════════════
   Día/noche, ES/EN y el menú. Piezas chicas: asiento medio. */
.tema,.idioma,.hamburguesa{
  transition:
    background-color .18s var(--curva),
    border-color .18s var(--curva),
    color .18s var(--curva),
    box-shadow .22s var(--curva),
    outline-offset var(--hj-sube) var(--hj-muelle),
    transform var(--hj-sube) var(--hj-muelle); }
.tema:active,.idioma:active,.hamburguesa:active{
  transform:translateY(var(--hj-medio)) scale(.965);
  transition-property:transform,background-color,border-color,color;
  transition-duration:var(--hj-baja),.1s,.1s,.1s;
  transition-timing-function:var(--hj-seco); }


/* ═══ 3. LA GALERÍA: FILTROS Y PASO DEL VISOR ══════════════ */
.filtro{
  transition:
    color .18s var(--curva),
    border-color .18s var(--curva),
    background .18s var(--curva),
    outline-offset var(--hj-sube) var(--hj-muelle),
    transform var(--hj-sube) var(--hj-muelle); }
.filtro:active{
  transform:translateY(var(--hj-leve)) scale(.972);
  transition-property:transform,color,border-color,background;
  transition-duration:var(--hj-baja),.1s,.1s,.1s;
  transition-timing-function:var(--hj-seco); }

.paso{
  transition:
    background .18s var(--curva),
    border-color .18s var(--curva),
    opacity .18s var(--curva),
    outline-offset var(--hj-sube) var(--hj-muelle),
    transform var(--hj-sube) var(--hj-muelle); }
/* el paso ya vive centrado con translateY(-50%): el asiento se
   suma a esa traslación, no la sustituye. */
.paso:active:not([disabled]){
  transform:translateY(calc(-50% + var(--hj-medio))) scale(.94);
  transition-property:transform,background,border-color;
  transition-duration:var(--hj-baja),.1s,.1s;
  transition-timing-function:var(--hj-seco); }


/* ═══ 4. LAS TARJETAS DE TIPO DEL FORMULARIO ═══════════════
   Se pulsan como un botón aunque por dentro sean un radio. */
.tipo-op span{
  transition:
    border-color .16s var(--curva),
    color .16s var(--curva),
    background .16s var(--curva),
    transform var(--hj-sube) var(--hj-muelle); }
.tipo-op input:active + span{
  transform:translateY(var(--hj-hondo)) scale(.984);
  transition-property:transform,border-color,color,background;
  transition-duration:var(--hj-baja),.1s,.1s,.1s;
  transition-timing-function:var(--hj-seco); }


/* ═══ 5. LAS FOTOS QUE SE PULSAN ═══════════════════════════
   La lupa de un destacado y la placa de la galería son botones
   que cubren una foto entera. NO se hunden: mover una foto de
   1.5 px al tocarla se ve como un fallo de maquetación, no como
   una pieza que se asienta. Se quedan con el foco y nada más. */
.lupa,.abre-placa{ transition:outline-offset var(--hj-sube) var(--hj-muelle); }


/* ═══ 6. EL FOCO, CON EL MISMO MUELLE ══════════════════════
   Quien navega con el teclado no siente el asiento, así que el
   herraje se le devuelve por la vista: el aro de cobre entra
   desde fuera —7 px— y se asienta a 3 px con la misma curva. Es
   el mismo gesto, contado de otra manera.

   Se listan los controles uno por uno y no con un selector
   general para no tocar el foco de enlaces y campos, que ya
   estaba resuelto en 01-base.css. */
.boton:focus-visible,
.tema:focus-visible,.idioma:focus-visible,.hamburguesa:focus-visible,
.filtro:focus-visible,.paso:focus-visible,
.lupa:focus-visible,.abre-placa:focus-visible,
.tipo-op input:focus-visible + span{
  outline:2px solid var(--cobre-luz);
  outline-offset:3px; }

/* 01-base.css le pone border-radius:2px a TODO :focus-visible, pensando
   en enlaces de texto. En un boton eso le cuadraba las esquinas justo
   al tabular: la pieza cambiaba de forma al recibir el foco. Cada
   control recupera aqui su radio de siempre. */
.boton:focus-visible,
.tema:focus-visible,.idioma:focus-visible,.hamburguesa:focus-visible{
  border-radius:var(--radio-v); }
.filtro:focus-visible{ border-radius:100px; }
.paso:focus-visible{ border-radius:50%; }
.lupa:focus-visible,.abre-placa:focus-visible{ border-radius:0; }
.tipo-op input:focus-visible + span{ border-radius:var(--radio); }

/* el punto de partida del aro: fuera de la pieza */
.boton:not(:focus-visible),
.tema:not(:focus-visible),.idioma:not(:focus-visible),
.hamburguesa:not(:focus-visible),
.filtro:not(:focus-visible),.paso:not(:focus-visible),
.lupa:not(:focus-visible),.abre-placa:not(:focus-visible){
  outline-color:transparent; outline-offset:7px; }


/* ═══ 7. SIN MOVIMIENTO, SI ASÍ LO PIDE EL SISTEMA ═════════
   Se va el asiento y se va el muelle. Lo que NO se va es el
   aviso de que el botón responde: el color sigue cambiando, y
   el aro de foco sigue apareciendo, solo que sin viaje. */
@media (prefers-reduced-motion:reduce){
  .boton,.tema,.idioma,.hamburguesa,.filtro,.paso,.tipo-op span{
    transition-duration:.12s !important;
    transition-timing-function:linear !important; }
  .boton:active,.tema:active,.idioma:active,.hamburguesa:active,
  .filtro:active,.tipo-op input:active + span{ transform:none; }
  .paso:active:not([disabled]){ transform:translateY(-50%); }
  .boton:not(:focus-visible),.tema:not(:focus-visible),
  .idioma:not(:focus-visible),.hamburguesa:not(:focus-visible),
  .filtro:not(:focus-visible),.paso:not(:focus-visible),
  .lupa:not(:focus-visible),.abre-placa:not(:focus-visible){
    outline-offset:3px; }
}